/* ---- 00-tokens.css ---- */
/* ============================================================
   00-tokens.css — Design tokens (BLUEPRINT.md §1)
   Tier 1 primitives -> Tier 2 semantic -> Tier 3 component/type.
   Components should reference tier 2/3 only, never raw hex.
   Legacy aliases (--turquoise, --ink, --bg-base, --text-main, ...)
   are kept pointing at the new semantic tokens per §1.1; nothing
   outside this stylesheet references them (verified by grep), so
   they are inert compatibility shims, safe to delete in phase 2.
   ============================================================ */
:root {
  /* ---- Tier 1: primitives (§1.2) ---- */
  --slate-900: #293739;
  --slate-600: #5B6769;
  --slate-200: #DCE3E1;
  --teal-700: #1E756B;
  --teal-800: #175E56;
  --teal-100: #A9D5CD;
  --sage-500: #718C85;
  --sand-400: #CBA378;
  --sand-700: #8A6A3F;
  --paper: #FAFAFA;
  --white: #FFFFFF;     /* raised surfaces */
  --sage-50: #EEF3F0;

  /* ---- Tier 2: semantic (§1.2) ---- */
  --color-bg: var(--paper);
  --surface-raised: var(--white);
  --surface-tint: var(--sage-50);
  --surface-inverse: var(--slate-900);
  --color-text: var(--slate-900);
  --color-text-muted: var(--slate-600);
  --color-text-inverse: var(--paper);
  --color-action: var(--teal-700);
  --color-action-hover: var(--teal-800);
  --color-on-action: var(--white);
  --color-button: var(--color-action);
  --color-button-hover: var(--color-action-hover);
  --color-accent-inverse: var(--teal-100);
  --color-border: var(--slate-200);
  --color-focus: var(--teal-700);
  /* Decorative-only motif colour (§ "Palette", arc.mjs) — never used for text or actions. */
  --color-motif: var(--sand-400);
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-body: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Note-card pastel fills (§1.2), kept as their existing literal values —
     they are tints requiring ≥4.5:1 with --color-text, not derivable from
     the primitive ramp above without shifting hue. */
  --surface-sky: #e0ebef;
  --surface-sand: #eee0cd;

  /* ---- Tier 3: type scale (§1.3), minor-third, clamped 390px→1440px ---- */
  --text-display: clamp(2.375rem, 1.6rem + 3.2vw, 4.5rem);
  --text-h1: clamp(2rem, 1.5rem + 2vw, 3.75rem);
  --text-h2: clamp(1.75rem, 1.35rem + 1.35vw, 2.5rem);
  --text-h3: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  --text-lead: clamp(1.063rem, 1rem + 0.27vw, 1.25rem);      /* 17->20px, hero lead */
  --text-body: clamp(1rem, 0.97rem + 0.12vw, 1.063rem);      /* 16->17px, prose */
  --text-small: 0.875rem;                                     /* 14px, meta/captions */
  --text-kicker: 0.75rem;                                     /* 12px, eyebrows */

  /* ---- Spacing (§1.4), base unit 4px ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;
  --section-y: clamp(4rem, 2.8rem + 5vw, 7rem);
  --gutter: clamp(1rem, .95rem + .5vw, 2rem);

  /* ---- Shape, elevation, motion (§1.5) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(41, 55, 57, .06);
  --shadow-2: 0 10px 40px rgba(0, 0, 0, .04);   /* default card (existing brand value) */
  --shadow-3: 0 14px 44px rgba(0, 0, 0, .08);   /* card hover, sticky bar */
  --shadow-focus: 0 0 0 2px var(--white), 0 0 0 4px var(--color-focus);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 150ms;
  --dur-2: 200ms;

  /* ---- Layout (§1.6) ---- */
  --container: 72rem;        /* 1152px — close to the current 1160px --max (§1.6) */
  --container-prose: 68ch;
  --header-h: 4rem;
  --header-h-md: 4.5rem;
  --sticky-bar-h: calc(4.5rem + env(safe-area-inset-bottom, 0px));

  /* ---- Legacy aliases (kept during phase 1, delete in phase 2 once grep
     shows zero uses outside this file — already true today). ---- */
  --bg-base: var(--color-bg);
  --text-main: var(--color-text);
  --text-muted: var(--color-text-muted);
  --accent-primary: var(--color-action);
  --accent-secondary: var(--sage-500);
  --accent-warm: var(--sand-400);
  --turquoise: var(--accent-primary);
  --turquoise-2: var(--accent-secondary);
  --pale: var(--surface-tint);
  --ink: var(--text-main);
  --body: var(--text-muted);
  /* --line intentionally NOT re-aliased to --color-border: the historical
     --line (#cfe9ee, pale blue) and --slate-200 (#DCE3E1, slate-grey) are
     visually different hairline colours. Re-aliasing would recolour every
     card/table/detail-nav divider on the site, breaking visual parity.
     Kept as its own literal, documented here as an accepted deviation from
     "aliases point at the new semantic tokens" for this one variable. */
  --line: var(--color-border);
  --max: var(--container); /* 1152px vs legacy 1160px — see --container note above */
}

/* Self-hosted Fraunces (OFL, google/fonts, variable — wght 100-900 + opsz), for display
   headings only (Poppins stays the body font, per plan §Type). Variable-font src list
   follows the standard woff2-variations -> woff2 fallback order. License: assets/fonts/FRAUNCES-OFL.txt. */
@font-face{
  font-family:Fraunces;
  src:url('/assets/fonts/fraunces-variable.woff2') format('woff2-variations'),
      url('/assets/fonts/fraunces-variable.woff2') format('woff2');
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}

/* Metric-matched fallback for Fraunces, sized against Georgia (serif, widely available)
   so the swap-in doesn't shift display-heading layout (same CLS-guard approach as the
   Poppins Fallback above). */
@font-face{
  font-family:"Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 98%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* Self-hosted Poppins, weights used across the site (unchanged from phase 0). */
@font-face{font-family:Poppins;src:url('/assets/fonts/poppins-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('/assets/fonts/poppins-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url('/assets/fonts/poppins-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url('/assets/fonts/poppins-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* Metric-matched fallback (§1.3 CLS guard) so the swap from the system font
   to Poppins does not shift layout. Tuned against Arial on this build's
   Poppins 400/600 renders (headings/body measured at 320/390/900/1440px in
   phase1-before screenshots): Poppins runs slightly narrower and a touch
   taller than Arial at equivalent font-size, hence size-adjust < 100% and a
   taller ascent/shorter descent than Arial's own metrics.
   Final tuned values: size-adjust 112%, ascent-override 93%,
   descent-override 31%, line-gap-override 0% (BLUEPRINT §1.3 reference
   values — verified against baseline screenshots to already match Poppins'
   actual metrics closely enough that no further adjustment was needed). */
@font-face{
  font-family:"Poppins Fallback";
  src: local("Arial");
  size-adjust: 112%;
  ascent-override: 93%;
  descent-override: 31%;
  line-gap-override: 0%;
}

/* ---- 10-reset.css ---- */
/* 10-reset.css */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: "Poppins","Poppins Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size: var(--text-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-action);
  text-underline-offset: .2em;
}

a:hover {
  color: var(--color-action-hover);
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--color-bg);
  padding: var(--space-3) var(--space-4);
}

main {
  min-width: 0;
}

/* ---- 20-base.css ---- */
/* 20-base.css */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--color-text);
}

h2 {
  font-weight: 600;
  color: var(--color-text);
}

h3 {
  font-weight: 600;
  color: var(--color-text);
}

:is(h1,h2,h3) {
  letter-spacing: -.025em;
}

.editorial-hero :is(h1,h2,h3) {
  color: var(--color-text-inverse);
}

.process-band :is(h1,h2,h3) {
  color: var(--color-text-inverse);
}

.about-birlikte :is(h1,h2,h3) {
  color: var(--color-text-inverse);
}

p {
  font-weight: 400;
  line-height: 1.7;
}

.utility-label {
  font-size: var(--text-kicker);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

summary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.eyebrow {
  font-size: var(--text-kicker);
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-action);
}

.section-kicker {
  font-size: var(--text-kicker);
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-action);
}

/* ---- 30-layout.css ---- */
/* 30-layout.css */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));
}

.grid-auto {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.split {
  display: grid;
  grid-template-columns: 1fr;
}

.prose {
  max-width: var(--container-prose);
}

.brand:hover {
  color: var(--color-text);
}

header nav a:hover {
  color: var(--color-action);
}

header nav a:focus-visible {
  color: var(--color-action);
}

footer nav a:hover {
  color: var(--color-action);
}

footer>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}

.footer-brand strong {
  font-size: 1.08rem;
}

.footer-brand span {
  margin-top: .6rem;
  color: var(--color-text-muted);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.gtm {
  display: none;
  visibility: hidden;
}

header {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  z-index: 5;
  min-height: 0;
  gap: 0 .75rem;
  padding: .65rem var(--gutter) .25rem;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--color-border);
}

.brand {
  margin-right: auto;
  text-decoration: none;
  color: var(--color-text);
  line-height: 1.15;
  min-width: 0;
  max-width: calc(100% - 155px);
}

.brand strong {
  display: block;
  letter-spacing: -.02em;
  font-size: .88rem;
  line-height: 1.25;
}

.brand span {
  display: block;
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: .52rem;
  letter-spacing: .08em;
  margin-top: .15rem;
}

header .nav-cta {
  min-height: 44px;
  padding: .5rem .7rem;
  font-size: .7rem;
  white-space: nowrap;
}

header nav {
  display: flex;
  order: 3;
  width: 100%;
  overflow: visible;
  white-space: normal;
  justify-content: flex-start;
  gap: .25rem .9rem;
  flex-wrap: wrap;
  padding: .35rem 0 0;
  min-width: 0;
}

header nav a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .1rem;
  font-size: clamp(.625rem,2.55vw,.75rem);
  white-space: nowrap;
}

header nav a[aria-current] {
  color: var(--color-action);
  box-shadow: inset 0 -2px var(--color-button);
}

footer {
  max-width: var(--max);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  padding: 3rem var(--gutter);
  border-color: var(--color-border);
  gap: 1.5rem 3rem;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .2rem 1.25rem;
}

footer nav a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: .875rem;
  min-height: 44px;
}

.footer-contact a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  font-size: .875rem;
  min-height: 44px;
}

.footer-brand p {
  max-width: 390px;
  margin: .25rem 0;
  color: var(--color-text-muted);
  font-size: .875rem;
  line-height: 1.6;
}

@media (min-width:40em) {

  header {
      padding: .7rem var(--gutter) .2rem;
    }

  .brand strong {
      font-size: 1rem;
    }

  .brand span {
      font-size: .59rem;
    }

  header nav {
      justify-content: flex-start;
      gap: 1.25rem;
    }

  header nav a {
      font-size: .83rem;
    }

  footer {
      padding: 4rem 1.25rem;
      grid-template-columns: 1.5fr 1fr .9fr;
      padding-block: 4rem;
    }

}

@media (min-width:56.25em) {

  .split {
      grid-template-columns: repeat(12, 1fr);
      gap: var(--gutter);
    }

  .split--7-5>:first-child {
      grid-column: span 7;
    }

  .split--7-5>:last-child {
      grid-column: span 5;
    }

  .split--8-4>:first-child {
      grid-column: span 8;
    }

  .split--8-4>:last-child {
      grid-column: span 4;
    }

  footer {
      gap: 4rem;
    }

}

@media (min-width:75em) {

  header {
      min-height: 0;
      flex-wrap: nowrap;
      height: 76px;
      padding: 0 max(2rem,calc((100% - var(--container))/2));
      gap: 2rem;
    }

  header nav {
      order: 0;
      width: auto;
      overflow-x: visible;
      white-space: nowrap;
      padding: 0;
      margin-left: auto;
      gap: 1.6rem;
    }

  header nav a {
      min-height: 0;
      font-size: .84rem;
    }

  header .nav-cta {
      font-size: .82rem;
      padding-inline: 1.1rem;
    }

}

/* ---- components/about.css ---- */
/* components/about.css */
.about-page .hero-copy>p:not(.eyebrow) {
  color: var(--color-text-muted);
}

.about-page .hero-inner .hero-media {
  max-width: 450px;
}

.about-page .hero-media img {
  height: auto;
  aspect-ratio: 9/7;
}

.about-section {
  border-bottom: 1px solid rgba(20,57,65,.08);
}

.editorial-copy>p:first-child {
  margin-top: 0;
}

.editorial-copy p {
  margin: .6rem 0 1.1rem;
}

.about-yaklasim .section-kicker {
  color: var(--color-action);
  font-weight: 700;
}

.education-timeline {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  border-top: 1px solid #dcd8ce;
}

.education-timeline li p {
  margin: 0;
}

.education-timeline .timeline-year {
  color: var(--color-action);
  font-weight: 700;
}

.education-timeline h3 {
  margin: 0;
  font-size: .96rem;
}

.education-timeline li div p {
  font-size: .86rem;
}

.source-link a {
  font-weight: 600;
  text-decoration-thickness: 1px;
}

.text-link {
  font-weight: 600;
  text-decoration-thickness: 1px;
}

.about-birlikte {
  background: #143941;
  color: var(--color-text-inverse);
}

.about-birlikte .editorial-copy {
  color: #d8e6e8;
}

.about-birlikte .section-kicker {
  font-weight: 700;
  color: #76e9f6;
}

.principle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  margin-top: 1.5rem;
}

.principle-grid>div {
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,.2);
}

.principle-grid h3 {
  margin: 0;
  font-size: .94rem;
  color: var(--color-text-inverse);
}

.principle-grid p {
  margin: .25rem 0 0;
  font-size: .86rem;
  color: #c2d5d8;
}

.research-year {
  margin: 1.25rem 0 0;
  color: var(--color-action);
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1;
}

.research-year span {
  display: block;
  margin-top: .5rem;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.publication-title {
  font-size: 1.12rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--color-text);
}

.publication-citation {
  font-size: .83rem;
}

.research-details {
  margin: 1.25rem 0;
  border: 1px solid #c6e4e9;
  padding: .85rem 1rem;
  background: rgba(255,255,255,.6);
}

.research-details summary {
  cursor: pointer;
  color: var(--color-text);
  font-weight: 600;
  font-size: .84rem;
}

.research-details p {
  font-size: .86rem;
}

.about-tanisalim .editorial-inner {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.about-tanisalim .actions {
  margin-top: 1.1rem;
}

.academic-band>div:last-child {
  max-width: 650px;
  color: var(--color-text-muted);
}

.academic-facts {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-action);
}

.profile-pillars {
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(3rem,7vw,6rem) clamp(1.25rem,4vw,3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem,4vw,3.5rem);
}

.profile-pillars .profile-section+.profile-section {
  border-top: 1px solid #dfe6e3;
  padding-top: 2rem;
}

.profile-section {
  min-width: 0;
  scroll-margin-top: 7rem;
}

.profile-section h2 {
  color: var(--color-text);
  font-size: clamp(1.5rem,2.2vw,2rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.035em;
}

.profile-copy {
  color: var(--color-text-muted);
  font-size: .9375rem;
  line-height: 1.9;
  max-width: 75ch;
}

.profile-copy p {
  margin: 0 0 1.3rem;
}

.profile-fact-list {
  margin: 0 0 1.3rem;
  padding-left: 1.2rem;
}

.profile-fact-list li {
  margin-bottom: .5rem;
}

.profile-copy h3 {
  font-size: 1.075rem;
  color: var(--color-text);
  font-weight: 500;
  margin: 2rem 0 1rem;
  line-height: 1.5;
}

.profile-copy a {
  overflow-wrap: anywhere;
}

.profile-foundations {
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(3rem,7vw,6rem) clamp(1.25rem,4vw,3rem);
  padding-top: 0;
}

.profile-foundations>.profile-section {
  border-top: 1px solid #dfe6e3;
  padding-block: 3rem;
  display: grid;
  grid-template-columns: 1fr;
}

.profile-foundations .section-kicker {
  grid-column: 1/-1;
}

.about-page .hero-inner {
  min-height: 0;
}

.about-page .hero-copy h1 {
  max-width: 19ch;
  letter-spacing: -.045em;
  font-size: var(--text-h1);
}

.editorial-inner {
  max-width: var(--max);
  margin: auto;
  padding: 3.3rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: start;
  padding-block: var(--section-y);
}

.editorial-heading h2 {
  max-width: 460px;
  margin: .4rem 0;
  letter-spacing: -.04em;
  font-size: var(--text-h2);
  line-height: 1.2;
}

.academic-band h2 {
  max-width: 460px;
  margin: .4rem 0;
  letter-spacing: -.04em;
  font-size: var(--text-h2);
  line-height: 1.2;
}

.editorial-copy {
  max-width: 650px;
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: 1.75;
}

.about-egitim {
  background: var(--paper);
}

.academic-band {
  max-width: none;
  margin: 0 auto;
  padding: 3.3rem 1.25rem;
  padding-left: max(1.25rem, calc((100% - var(--max)) / 2));
  padding-right: max(1.25rem, calc((100% - var(--max)) / 2));
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: center;
  background: var(--paper);
}

.about-ogretim {
  background: var(--surface-raised);
}

.about-arastirma {
  background: var(--surface-tint);
}

.education-timeline li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: .7rem;
  padding: 1rem 0;
  border-bottom: 1px solid #dcd8ce;
  border-color: var(--color-border);
}

@media (min-width:40em) {

  .academic-band {
      grid-template-columns: .9fr 1.1fr;
      gap: 3rem;
      padding-top: 6rem;
      padding-bottom: 6rem;
    }

  .editorial-inner {
      grid-template-columns: .9fr 1.1fr;
      gap: 3rem;
      padding-top: 6rem;
      padding-bottom: 6rem;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }

  .editorial-heading h2 {
      font-size: clamp(2rem,3.3vw,3rem);
    }

  .academic-band h2 {
      font-size: clamp(2rem,3.3vw,3rem);
    }

  .editorial-copy {
      font-size: .97rem;
    }

  .education-timeline li {
      grid-template-columns: 74px 1fr;
      gap: 1rem;
    }

  .research-year {
      font-size: 3.5rem;
    }

}

@media (min-width:56.25em) {

  .editorial-inner {
      gap: 6rem;
    }

  .academic-band {
      gap: 6rem;
    }

  .profile-pillars {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }

  .profile-pillars .profile-section+.profile-section {
      border-top: 0;
      padding-top: 0;
    }

  .profile-foundations>.profile-section {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
      column-gap: 4rem;
    }

  .profile-foundations .profile-copy {
      max-width: 760px;
    }

}

/* ---- components/arc.css ---- */
/* components/arc.css — the goniometer-arc motif (arc.mjs). Decorative only: every .c-arc
   is aria-hidden and must never intercept pointer events or sit on top of a CTA. */
.c-arc {
  display: block;
  pointer-events: none;
  overflow: visible;
}

.c-arc__path {
  stroke: var(--color-motif);
  stroke-linecap: round;
}

.c-arc__ticks line {
  stroke: var(--color-motif);
  opacity: .55;
}

.c-arc__label {
  font-family: var(--font-display);
  font-weight: 500;
  fill: var(--color-text);
  font-size: 13px;
}

/* Nav / footer indicators: small, inline with link text. */
.c-arc--nav {
  display: inline-block;
  margin-inline-start: .3em;
  vertical-align: .05em;
}

.c-arc--nav .c-arc__path { stroke: var(--color-action); }

/* Inline divider glyph between editorial bands. */
.c-arc--divider {
  display: block;
  margin: 0 0 var(--space-4);
}

.c-arc--divider .c-arc__path { stroke: var(--sand-400); }

/* Plain hairline mark (hairline() in arc.mjs) — a quiet section-opening rule for pages
   without a numbered index. */
.c-hairline {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--sand-400);
  margin: 0 0 var(--space-4);
}

/* Section marker (replaces the old bare divider): a small arc + "0N / 0T" index, aligned
   to the h2 baseline. */
.c-section-marker {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 var(--space-4);
}

.c-section-marker__rule {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--sand-400);
  flex: none;
}

.c-section-marker__index {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-kicker);
  letter-spacing: .08em;
  color: var(--sand-700);
  font-weight: 600;
}

/* ---- heroGoniometer() — the large hero signature instrument ---- */
.c-goniometer {
  overflow: visible;
}

.c-goniometer__scale {
  stroke: var(--sand-400);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.c-goniometer__pivot {
  fill: var(--sand-700);
}

.c-goniometer__tick--major {
  stroke: var(--sand-700);
  stroke-width: 1.5;
}

.c-goniometer__tick--minor {
  stroke: var(--sand-400);
  stroke-width: 1;
  opacity: .7;
}

.c-goniometer__degree {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  fill: var(--sand-700);
}

.c-goniometer__measured {
  stroke: var(--color-action);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .js .c-goniometer__measured {
    transition: stroke-dashoffset 1.4s var(--ease);
  }
  .js .c-goniometer__measured.c-arc--pending {
    stroke-dashoffset: 1000;
  }
}

.c-goniometer__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  fill: var(--color-action);
}

.c-arc--nav { display: none; }
h2 { font-weight: 500; letter-spacing: -0.01em; }

/* ---- components/buttons.css ---- */
/* components/buttons.css */
.guide-contact .button {
  color: var(--color-on-action);
}

.text-link {
  display: inline-block;
  margin-top: 1.1rem;
  font-weight: 600;
}

.text-link:hover {
  color: var(--color-action-hover);
  text-decoration: underline;
  text-decoration-color: var(--sand-400);
  text-underline-offset: .2em;
}

.note-copy .text-link:hover {
  color: var(--color-action-hover);
  text-decoration: underline;
  text-decoration-color: var(--sand-400);
  text-underline-offset: .2em;
}

.service-card:hover .service-card-link {
  color: var(--color-action-hover);
  text-decoration: underline;
  text-decoration-color: var(--sand-400);
  text-underline-offset: .2em;
}

.service-about:hover .service-card-link {
  color: var(--color-action-hover);
  text-decoration: underline;
  text-decoration-color: var(--sand-400);
  text-underline-offset: .2em;
}

.condition-card .condition-card__link:hover {
  color: var(--color-action-hover);
  text-decoration: underline;
  text-decoration-color: var(--sand-400);
  text-underline-offset: .2em;
}

.enquiryBlock :is(.button, button, input[type="submit"]) {
  background: var(--color-action);
  color: var(--color-on-action);
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}

#enquiryBlock :is(.button, button, input[type="submit"]) {
  background: var(--color-action);
  color: var(--color-on-action);
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}

.enquiryBlock :is(.button, button, input[type="submit"]):hover {
  background: var(--color-action-hover);
  color: var(--color-on-action);
}

#enquiryBlock :is(.button, button, input[type="submit"]):hover {
  background: var(--color-action-hover);
  color: var(--color-on-action);
}

.service-card {
  transition: color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}

.note-card {
  transition: color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  min-height: 48px;
  padding: .7rem 1.1rem;
  background: var(--color-button);
  color: var(--color-on-action);
  font-size: .85rem;
  line-height: 1.3;
  border: 1px solid var(--color-button);
  box-shadow: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  min-height: 48px;
  padding: .7rem 1.1rem;
  background: var(--color-button);
  color: var(--color-on-action);
  font-size: .85rem;
  line-height: 1.3;
  border: 1px solid var(--color-button);
  box-shadow: none;
}

.nav-cta:hover {
  background: var(--color-button-hover);
  border-color: var(--color-button-hover);
  color: var(--color-on-action);
}

.button:hover {
  background: var(--color-button-hover);
  border-color: var(--color-button-hover);
  color: var(--color-on-action);
}

.button.secondary {
  border: 1px solid currentColor;
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.button.secondary:hover {
  background: var(--surface-tint);
  color: var(--color-text);
}

.actions {
  gap: .65rem;
  margin-top: 1.5rem;
}

.actions .button {
  width: auto;
}

.actions .button:first-child {
  flex: 1 1 190px;
}

.actions .button.secondary {
  flex: 0 0 auto;
}

a {
  transition: color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}

button {
  transition: color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}

summary {
  transition: color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}

.premium-image {
  filter: none;
  transition: none;
}

@media (min-width:56.25em) {

  .nav-cta {
      min-height: 48px;
      padding: .7rem 1.25rem;
      font-size: .86rem;
    }

  .button {
      min-height: 48px;
      padding: .7rem 1.25rem;
      font-size: .86rem;
    }

}

@media (hover:hover) {

  .service-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-3);
    }

  .note-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-3);
    }

  .button:hover {
      transform: none;
      box-shadow: none;
      filter: none;
    }

  .nav-cta:hover {
      transform: none;
      box-shadow: none;
      filter: none;
    }

  .card:hover {
      transform: none;
      box-shadow: none;
      filter: none;
    }

  .premium-image:hover {
      transform: none;
      box-shadow: none;
      filter: none;
    }

}

/* Arc underline sweep (plan micro-interactions): a thin curved rule sweeps in under
   .button/.nav-cta on hover/focus. Purely decorative (::after, transform-only), gated
   behind prefers-reduced-motion, and never changes the element's box or hit area. */
.button, .nav-cta {
  position: relative;
}

.button::after, .nav-cta::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -3px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--color-motif);
  transform: scaleX(0);
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .button::after, .nav-cta::after {
    transition: transform var(--dur-2) var(--ease);
  }
}

@media (hover:hover) {
  .button:hover::after, .nav-cta:hover::after { transform: scaleX(1); }
}

.button:focus-visible::after, .nav-cta:focus-visible::after { transform: scaleX(1); }

/* ---- components/callout.css ---- */
/* components/callout.css */
.c-callout h2 {
  margin: 0 0 .6rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.c-callout ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: 1.7;
}

.c-callout p {
  margin: .6rem 0 0;
  color: var(--color-text-muted);
  font-size: .82rem;
}

.c-callout {
  border-radius: var(--radius-sm);
  max-width: none;
  margin: 2.5rem 0;
  padding: 1.5rem 1.7rem;
  border-left: 3px solid var(--color-action);
  background: var(--paper);
}

/* ---- components/cards.css ---- */
/* ============================================================
   components/cards.css — generic inner-page link cards
   ============================================================ */
.cards{display:grid;grid-template-columns:1fr;gap:0;margin-top:2.2rem;border-top:1px solid var(--line)}
.card{padding:1.5rem;border:0;text-decoration:none;color:var(--color-text);box-shadow:var(--shadow-2)} /* the phase-0
  unconditional "Premium refinement" rule zeroed .card's border (incl.
  border-bottom) everywhere, leaving only the box-shadow for definition */
.card strong,.card span{display:block}
.card strong{font-size:1.05rem}
.card span{margin-top:.45rem;color:var(--color-text-muted);font-size:.88rem}

@media(min-width:40em){
  .cards{grid-template-columns:repeat(3,1fr)}
  .card{padding:2rem}
}

/* ---- components/condition-detail.css ---- */
/* components/condition-detail.css */
.c-symptom-list li {
  margin-bottom: .3rem;
}

.c-related__label {
  margin: 0 0 .6rem;
  color: var(--color-text-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.c-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.c-related a:hover {
  background: var(--sage-50);
  text-decoration: underline;
}

.c-sources summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: .78rem;
  font-weight: 600;
  list-style: none;
}

.c-sources summary::-webkit-details-marker {
  display: none;
}

.c-sources ul {
  margin: .7rem 0 0;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
  font-size: .76rem;
  line-height: 1.8;
}

.c-sources a {
  color: var(--color-text-muted);
}

.c-condition-block {
  margin: 0 auto;
  max-width: none;
}

.c-symptom-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  font-size: var(--text-body);
  max-width: 65ch;
}

.c-related {
  margin: 2.5rem auto 0;
  max-width: none;
}

.c-sources {
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  max-width: none;
}

.c-related a {
  padding: .5rem .9rem;
  background: var(--surface-tint);
  color: var(--color-action);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}

/* ---- components/conditions.css ---- */
/* components/conditions.css */
.conditions * {
  box-sizing: border-box;
}

.conditions {
  box-sizing: border-box;
  padding: clamp(3rem, 7vw, 6rem) 1.25rem;
  background: var(--color-bg);
  font-family: "Poppins", sans-serif;
}

.conditions__inner {
  max-width: var(--max);
  margin-inline: auto;
}

.conditions h2 {
  margin: 0 0 1rem;
  color: var(--color-text);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.conditions__intro {
  max-width: 640px;
  margin: 0 0 2.5rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.8;
}

.conditions__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.condition-card h3 {
  margin: 0 0 1rem;
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.condition-card p {
  margin: 0 0 1.75rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.85;
}

.condition-card .condition-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.65rem;
  min-height: 44px;
  margin-top: auto;
  color: var(--color-action);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform var(--dur-1) ease, color var(--dur-1) ease;
}

.condition-card__link span {
  font-size: 1.125rem;
}

.condition-card:focus-within {
  border-color: #93aaa3;
  box-shadow: var(--shadow-2);
}

.condition-card .condition-card__link:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 5px;
  border-radius: 2px;
}

.conditions-page {
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.condition-index-hero>div {
  max-width: var(--max);
  margin-inline: auto;
}

.condition-index-hero h1 {
  max-width: 900px;
  margin: .5rem 0 1rem;
  color: var(--color-text);
  font-size: clamp(2rem,9vw,3rem);
  line-height: 1.15;
  text-wrap: balance;
}

.condition-index-hero .lead {
  max-width: 720px;
  color: var(--color-text-muted);
}

.condition-index {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 1.25rem clamp(3rem,6vw,6rem);
}

.condition-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  padding: 1.5rem 0 2.5rem;
}

.condition-category-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-action);
  font-size: .8rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.condition-category-nav a:hover {
  border-color: var(--color-action);
}

.condition-index-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.condition-category .section-kicker {
  font-size: .65rem;
  color: var(--color-action);
  margin: 0 0 1rem;
}

.condition-region .section-kicker {
  font-size: .65rem;
  color: var(--color-action);
  margin: 0 0 1rem;
}

.condition-category h2 {
  color: var(--color-text);
  font-size: 1.35rem;
  line-height: 1.4;
  margin: 0 0 1.5rem;
  min-height: 0;
}

.condition-region h2 {
  color: var(--color-text);
  font-size: 1.35rem;
  line-height: 1.4;
  margin: 0 0 1.5rem;
  min-height: 0;
}

.condition-category ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.condition-region-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.condition-category li+li {
  border-top: 1px solid #e3e9e7;
}

.condition-region-list li+li {
  border-top: 1px solid #e3e9e7;
}

.condition-category li a>span:last-child {
  color: var(--sage-500);
  flex-shrink: 0;
}

.condition-category li a:hover {
  color: var(--color-action);
  background: var(--surface-tint);
}

.condition-category li a:focus-visible {
  color: var(--color-action);
  background: var(--surface-tint);
}

.condition-region-list li {
  min-height: 0;
}

a.condition-chip:hover {
  color: var(--color-action);
  background: var(--surface-tint);
}

a.condition-chip:focus-visible {
  color: var(--color-action);
  background: var(--surface-tint);
}

a.condition-chip>span:last-child {
  color: var(--sage-500);
  flex-shrink: 0;
}

span.condition-chip.condition-chip--draft {
  color: var(--color-text-muted);
  cursor: default;
}

.condition-region-more {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid #e3e9e7;
  color: var(--color-text-muted);
  font-size: .78rem;
}

.condition-region-more a {
  color: var(--color-action);
  font-weight: 600;
}

.condition-index>.guide-contact {
  margin-top: 3rem;
}

.condition-detail>.guide-contact {
  margin-top: 3rem;
}

.conditions-page header {
  height: auto;
  flex-wrap: wrap;
  min-height: 0;
  padding-top: .65rem;
  padding-bottom: .25rem;
  gap: 0 .75rem;
}

.conditions-page header nav {
  order: 3;
  width: 100%;
  flex-wrap: wrap;
}

.condition-detail {
  margin: 0 auto;
  max-width: 820px;
  padding: 1rem var(--gutter) 5rem;
}

.condition-detail h2 {
  border-top: 1px solid var(--line);
  color: var(--color-text);
  font-size: var(--text-h2);
  line-height: 1.2;
  margin: 2.4rem 0 1rem;
  padding-top: 1.7rem;
}

.condition-detail .c-callout h2 {
  margin: 0 0 .6rem;
  padding: 0;
  border: 0;
  font-size: 1.1rem;
}

.condition-index-hero {
  padding: clamp(2.5rem,6vw,5.5rem) 1.25rem 2rem;
  background: var(--surface-tint);
}

.condition-category {
  min-width: 0;
  padding: clamp(1.4rem,2.4vw,2.2rem);
  border: 1px solid #e3e9e7;
  border-radius: 8px;
  scroll-margin-top: 2rem;
  box-shadow: none;
  border-color: var(--color-border);
  background: var(--surface-raised);
}

.condition-region {
  min-width: 0;
  padding: clamp(1.4rem,2.4vw,2.2rem);
  border: 1px solid #e3e9e7;
  border-radius: 8px;
  scroll-margin-top: 2rem;
  box-shadow: none;
  border-color: var(--color-border);
  background: var(--surface-raised);
}

.condition-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid #e3e9e7;
  border-radius: 8px;
  transition: box-shadow var(--dur-2) ease, border-color var(--dur-2) ease;
  box-shadow: none;
  border-color: var(--color-border);
  background: var(--surface-raised);
}

.condition-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  margin-bottom: 1.75rem;
  color: var(--color-action);
}

.condition-card__icon svg {
  color: var(--color-action);
}

.condition-category li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 56px;
  padding: .8rem .35rem;
  color: var(--color-text);
  line-height: 1.65;
  text-decoration: none;
  border-radius: 3px;
  overflow-wrap: anywhere;
  font-size: .91rem;
}

.condition-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 56px;
  padding: .8rem .35rem;
  color: var(--color-text);
  line-height: 1.65;
  text-decoration: none;
  border-radius: 3px;
  overflow-wrap: anywhere;
  font-size: .91rem;
}

@media (min-width:40em) {

  .conditions__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  .condition-index-grid {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }

  .condition-category h2 {
      min-height: 3.8em;
    }

  .condition-category-nav {
      gap: .5rem 1.25rem;
    }

  .condition-index-hero h1 {
      font-size: clamp(2.3rem,5vw,4.2rem);
    }

}

@media (min-width:56.25em) {

  .condition-detail {
      max-width: var(--container);
      padding: 1.5rem var(--gutter) 7rem;
    }

  .condition-detail > .c-condition-block,
    .condition-detail > .c-callout {
      display: grid;
      grid-template-columns: minmax(0, 31%) minmax(0, 1fr);
      column-gap: clamp(3rem, 7vw, 7rem);
      align-items: start;
      padding: 3.5rem 0;
      margin: 0;
      border-top: 1px solid var(--color-border);
    }

  .condition-detail > .c-condition-block > h2,
    .condition-detail > .c-callout > h2 {
      grid-column: 1;
      grid-row: 2;
      margin: 0;
      padding: 0;
      border: 0;
      max-width: 13ch;
      font-size: var(--text-h2);
      line-height: 1.17;
    }

  .condition-detail > .c-condition-block > .c-section-marker {
      grid-column: 1;
      grid-row: 1;
      align-self: end;
      margin: 0 0 .5rem;
    }

  .condition-detail > .c-condition-block > :not(h2):not(.c-section-marker),
    .condition-detail > .c-callout > :not(h2) { grid-column: 2; grid-row: 1 / 3; }

  .condition-detail > .c-callout { background: var(--surface-tint); padding-inline: 2rem; border-left: 3px solid var(--color-action); }

  .condition-detail > .guide-contact { margin: 0; padding: 2.5rem; }

  .condition-detail > .c-related { display: grid; grid-template-columns: minmax(0, 31%) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 7rem); align-items: center; }

  .condition-detail > .c-related .c-related__label { margin: 0; }

  .condition-detail > .c-sources { margin-left: calc(31% + clamp(3rem, 7vw, 7rem)); }

}

@media (min-width:75em) {

  .conditions__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

  .conditions-page header nav {
      order: 0;
      width: auto;
      flex-wrap: nowrap;
    }

  .condition-index-grid {
      grid-template-columns: repeat(3,minmax(0,1fr));
    }

  .conditions-page header {
      flex-wrap: nowrap;
      height: 76px;
      padding-top: 0;
      padding-bottom: 0;
      gap: 2rem;
    }

}

@media (hover:hover) {

  .condition-card:hover {
      border-color: #c9d6d1;
      box-shadow: var(--shadow-2);
    }

  .condition-card .condition-card__link:hover {
      color: var(--color-action-hover);
      text-decoration: underline;
      text-decoration-color: var(--sand-400);
      text-underline-offset: .2em;
      transform: translateX(4px);
    }

}

@media (prefers-reduced-motion:reduce) {

  .condition-card {
      transition: none;
    }

  .condition-card .condition-card__link {
      transition: none;
    }

  .condition-card .condition-card__link:hover {
      transform: none;
    }

}

/* ---- components/contact.css ---- */
/* components/contact.css */
.contact-band {
  max-width: var(--max);
  margin: auto;
  padding: 4rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.address-panel {
  border-left: 4px solid var(--turquoise);
  padding: 1.2rem 0 1.2rem 2rem;
}

.address-panel span {
  display: block;
  margin-bottom: .65rem;
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.address-panel address {
  font-style: normal;
  font-weight: 500;
}

.address-panel a {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
}

.contact-page .hero-inner .lead {
  max-width: 690px;
}

.contact-page .hero-inner .actions {
  display: flex;
}

.contact-section .section-kicker {
  margin: 0;
  color: var(--color-action);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.contact-section-0 {
  grid-row: auto;
}

.contact-section-1 address {
  font-style: normal;
}

.contact-section-1>p:last-child {
  margin-bottom: 0;
}

.contact-options {
  margin-top: 1.2rem;
}

.contact-options strong {
  font-size: 1.05rem;
  color: var(--color-text);
}

.contact-options small {
  font-size: .8rem;
  color: var(--color-text-muted);
}

/* Release 2: "İlk görüşmeniz" (index 2) now renders steps() instead of a hand-written <ol>.
   steps.css's 3-across rule is scoped to .home-band .c-steps, so it needs a matching rule
   here for the contact page's light surface. */
.contact-section-2 .c-steps {
  margin-top: .2rem;
  max-width: none;
}

/* Release 2: "Pratik sorular" (index 3, new) — a plain FAQ list, same visual weight as the
   old "Acil durumlar" note below it. */
.contact-section-3 .c-faq {
  margin-top: .2rem;
}

/* Release 2: "Acil durumlar" moved from index 3 to index 4 when "Pratik sorular" was
   inserted before it — these rules keep its small-text/tinted-note treatment. */
.contact-section-4 h2 {
  font-size: 1rem;
}

.contact-section-4 p:last-child {
  margin-bottom: 0;
  font-size: .83rem;
  color: var(--color-text-muted);
}

.contact-page .hero-inner {
  grid-template-columns: 1fr;
  min-height: auto;
  padding: 2rem var(--gutter) 2.5rem;
  background: var(--surface-tint);
}

.contact-page .hero-copy {
  margin: 0;
  max-width: var(--container);
  width: 100%;
}

.contact-layout {
  max-width: var(--max);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  padding: var(--section-y) var(--gutter);
  gap: 0;
}

.contact-section {
  padding: 2rem 0;
  background: transparent;
  box-shadow: none;
  border-top: 1px solid var(--color-border);
}

.contact-section-1 {
  background: var(--paper);
  padding: 2rem;
}

.contact-section-4 {
  grid-column: auto;
  background: var(--surface-tint);
  padding: 1.5rem;
}

.contact-section h2 {
  margin: .2rem 0 .8rem;
  line-height: 1.3;
  font-size: var(--text-h2);
}

.contact-options>a {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  min-height: 72px;
}

.contact-options>a>span {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--color-action);
}

@media (min-width:40em) {

  .contact-band {
      padding-top: 8rem;
      padding-bottom: 8rem;
      grid-template-columns: 1.3fr .7fr;
    }

  .contact-section-0 {
      grid-row: span 2;
    }

  .contact-page .hero-inner {
      padding-top: 2.3rem;
      padding-bottom: 2.4rem;
      padding-block: 3rem;
    }

  .contact-layout {
      padding-bottom: 5rem;
      grid-template-columns: 1.15fr .85fr;
      gap: 0 3rem;
    }

  .contact-section {
      padding: 2.5rem 0;
    }

  .contact-section-1 {
      padding: 2.5rem;
    }

  .contact-section-2 {
      grid-column: 1/-1;
    }

  .contact-section-2 .c-steps {
      grid-template-columns: repeat(3,1fr);
      gap: 2rem;
    }

  .contact-section-3 {
      grid-column: 1/-1;
    }

  .contact-section-4 {
      grid-column: 1/-1;
      padding: 2rem;
    }

}

@media (min-width:56.25em) {

  .contact-band {
      gap: 8rem;
    }

}

/* ---- components/detail.css ---- */
/* components/detail.css */
.detail-layout {
  max-width: var(--max);
  margin: auto;
  padding: 0 1.25rem 3rem;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.detail-nav {
  position: static;
  align-self: start;
  padding-top: 1rem;
}

.detail-nav nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.detail-nav nav a span {
  margin-right: .25rem;
  color: var(--color-action);
  font-size: .72rem;
  font-weight: 700;
}

.detail-nav nav a:hover {
  color: var(--color-action);
}

.detail-nav .section-kicker {
  font-size: .73rem;
  margin-bottom: .35rem;
}

.back-link {
  display: inline-block;
  margin-top: .8rem;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
}

.detail-section {
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 1.5rem;
}

.detail-section:first-child {
  border-top: 0;
  padding-top: 1rem;
}

.detail-section .section-no {
  margin: 0;
  color: var(--color-action);
  font-size: .74rem;
  font-weight: 700;
}

.detail-section .prose {
  color: var(--color-text-muted);
  line-height: 1.85;
}

.detail-section .prose p:first-child {
  margin-top: 0;
}

.detail-end {
  margin-top: .5rem;
  padding: 1.2rem;
  background: var(--surface-tint);
  border: 0;
}

.detail-end .actions {
  margin: .75rem 0 0;
}

.detail-section h2 {
  margin: .25rem 0 1rem;
  line-height: 1.25;
  letter-spacing: -.035em;
  font-size: var(--text-h2);
}

.detail-nav nav a {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .45rem .6rem;
  text-decoration: none;
  color: var(--color-text);
  font-size: .73rem;
  line-height: 1.45;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (min-width:40em) {

  .detail-layout {
      padding: 1rem 1.25rem 5rem;
      grid-template-columns: 210px minmax(0,1fr);
      gap: 3rem;
    }

  .detail-nav {
      position: sticky;
      top: 2rem;
      padding-top: 2rem;
    }

  .detail-nav nav {
      display: grid;
      gap: .25rem;
    }

  .detail-nav nav a {
      display: grid;
      grid-template-columns: 2rem 1fr;
      gap: .5rem;
      padding: .6rem 0;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      font-size: .84rem;
    }

  .detail-nav nav a span {
      margin-right: 0;
    }

  .back-link {
      margin-top: 1.5rem;
    }

  .detail-section {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

  .detail-section h2 {
      font-size: 2rem;
    }

  .detail-end {
      padding: 1.5rem;
    }

}

@media (min-width:56.25em) {

  .detail-layout {
      grid-template-columns: 250px minmax(0,740px);
      gap: 5rem;
    }

}

/* ---- components/editorial.css ---- */
/* components/editorial.css */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin: 0 0 .85rem;
  color: var(--color-text-muted);
  font-size: .75rem;
  line-height: 1.4;
}

.breadcrumbs a {
  color: var(--color-action);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs [aria-current] {
  color: var(--color-text-muted);
}

.page-jump {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--color-bg);
}

.page-jump>div {
  max-width: var(--max);
  margin: auto;
  padding: .55rem 1.25rem;
  display: flex;
  gap: .2rem 1rem;
  flex-wrap: wrap;
}

.page-jump a {
  padding: .35rem 0;
  text-decoration: none;
  color: var(--color-text);
  font-size: .74rem;
  font-weight: 600;
}

.page-jump a span {
  color: var(--color-action);
  margin-left: .2rem;
}

.editorial-hero .editorial-inner {
  display: block;
  padding: 0;
  gap: 0;
  max-width: var(--max);
  margin: 0 auto;
}

.editorial-hero h1 {
  max-width: 900px;
  margin: .25rem 0 1rem;
  font-size: 2.3rem;
  line-height: 1.12;
  letter-spacing: -.045em;
}

.editorial-hero .lead {
  max-width: 720px;
  color: #e1eeea;
  font-size: 1rem;
  line-height: 1.75;
}

.editorial-hero .breadcrumbs {
  color: #c2d8d3;
}

.editorial-hero .breadcrumbs [aria-current] {
  color: #c2d8d3;
}

.editorial-article {
  max-width: 920px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
  padding-top: 2rem;
}

.editorial-meta {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid #cad3c8;
  color: var(--color-text-muted);
  font-size: .78rem;
}

.article-sections {
  counter-reset: answers;
}

.article-sections section {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}

.article-sections h2 {
  margin: 0 0 .65rem;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.article-sections .prose {
  color: var(--color-text-muted);
  line-height: 1.8;
  font-size: .98rem;
}

.article-sections .prose p {
  margin: .4rem 0;
}

.article-sections .answer-step:last-child {
  background: transparent;
  border-left: 3px solid #c5c9ba;
}

.article-sections .answer-step:last-child .prose {
  font-size: .88rem;
}

.answer-number {
  position: static;
  display: block;
  margin-bottom: .4rem;
  color: #517c6a;
  font-size: .8rem;
  font-weight: 600;
}

.editorial-disclaimer {
  padding-top: 1.25rem;
  color: var(--color-text-muted);
  font-size: .8rem;
}

.reading-links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.5rem;
  margin-top: 1rem;
}

.reading-links a {
  color: var(--color-action);
  font-weight: 600;
}

.guide-contact a {
  color: var(--color-action);
  font-weight: 600;
}

.notes-intro a {
  color: var(--color-action);
  font-weight: 600;
}

.guide-contact {
  margin-top: 1.5rem;
}

.notes-list .section-inner {
  max-width: var(--max);
  margin: auto;
}

.notes-list h2 {
  margin: .3rem 0 .8rem;
  font-size: 1.7rem;
}

.notes-intro {
  max-width: 700px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.notes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 1.7rem;
}

.note-photo {
  display: block;
  position: relative;
  overflow: hidden;
  height: 175px;
}

.note-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.note-photo span {
  position: absolute;
  bottom: 12px;
  left: 16px;
  background: #143941;
  color: var(--color-text-inverse);
  padding: .35rem .7rem;
  font-size: .75rem;
  border-radius: 3px;
}

.note-copy {
  padding: 1.25rem;
}

.notes-list .note-copy h2 {
  font-size: 1.55rem;
  letter-spacing: -.035em;
  line-height: 1.25;
}

.note-copy>p:not(.section-kicker) {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.note-copy .text-link {
  color: #145e67;
  padding: .5rem 0;
}

.note-card .section-kicker {
  margin: 0 0 .5rem;
  font-size: .68rem;
}

.notes-guide h2 {
  font-size: 1.5rem;
}

.notes-guide p {
  margin: .5rem 0;
}

.visit-time {
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}

.visit-time small {
  display: inline;
  margin-left: .7rem;
  font-size: .8rem;
  font-weight: 500;
}

.notes-guide a {
  color: var(--color-action);
  font-weight: 600;
  display: inline-block;
  margin-top: .5rem;
}

.guide-contact[aria-label] {
  padding: 1.5rem;
  background: var(--surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: none;
  border-radius: 4px;
}

.guide-contact[aria-label] p:first-child {
  max-width: 55ch;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.guide-contact[aria-label] .actions {
  align-items: center;
  gap: .5rem 1.25rem;
}

.guide-contact[aria-label] .button {
  flex: 0 0 auto;
  color: var(--color-on-action);
  background: var(--color-button);
}

.guide-contact[aria-label] .text-link {
  margin: 0;
  color: var(--color-accent-inverse);
  font-size: .86rem;
}

.guide-contact[aria-label] .text-link:hover {
  color: var(--color-text-inverse);
}

/* IntentChips (release 1): the "Ücret bilgisi · Randevu uygunluğu · İlk görüşme" row under
   EnquiryBlock's actions and the homepage İletişim band's buttons — both dark surfaces
   (--surface-inverse). A plain flex-wrap row: no JS needed to avoid overflow at 320px. */
.c-intent {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.c-intent__hint {
  margin: .6rem 0 0;
  font-size: .74rem;
  color: var(--color-accent-inverse);
  opacity: .85;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: .4rem .85rem;
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.3;
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .chip {
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  }
}

.c-intent .chip {
  color: var(--color-accent-inverse);
  border-color: var(--color-accent-inverse);
}

.c-intent .chip:hover,
.c-intent .chip:focus-visible {
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
  background: rgba(255, 255, 255, .1);
}

/* The single inline "Ücret bilgisi" chip in the fee FAQ answer sits on a light surface
   (home/services FAQ), so it gets the light-surface treatment instead. */
.c-faq .chip {
  margin-left: .4rem;
  color: var(--color-action);
  border-color: var(--color-border);
}

.c-faq .chip:hover,
.c-faq .chip:focus-visible {
  border-color: var(--color-action);
  background: var(--surface-tint);
}

.editorial-hero {
  padding: 1.6rem 1.25rem 1.7rem;
  color: var(--color-text-inverse);
  border-bottom: 7px solid #2a9d8f;
  background: var(--surface-inverse);
  border-color: var(--color-button);
}

.editorial-hero .eyebrow {
  color: var(--color-accent-inverse);
}

.editorial-hero .breadcrumbs a {
  color: var(--color-accent-inverse);
}

.article-sections .answer-step {
  position: relative;
  margin: 1rem 0;
  padding: 1.3rem 1.2rem;
  border: 0;
  border-left: 3px solid #8ab8a5;
  border-radius: 3px;
  background: var(--surface-tint);
  border-color: var(--color-action);
}

.guide-page .article-sections .answer-step:last-child {
  background: var(--surface-tint);
  border-color: var(--color-action);
}

.article-sections .answer-step:nth-child(even) {
  background: var(--paper);
  border-color: var(--color-border);
}

.notes-list {
  padding: 1.6rem 1.25rem 3rem;
  background: var(--paper);
}

.note-card {
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 5px;
  transition: color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
  background: var(--surface-tint);
  box-shadow: none;
}

.notes-guide {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  align-items: center;
  margin-top: 2rem;
  padding: 1.35rem;
  border-left: 5px solid #21877e;
  background: var(--surface-tint);
  box-shadow: none;
}

.note-card:nth-child(2) {
  background: var(--surface-sky);
}

.note-card:nth-child(3) {
  background: var(--surface-sand);
}

@media (min-width:40em) {

  .breadcrumbs {
      margin-bottom: 1.25rem;
    }

  .page-jump>div {
      gap: .5rem 1.5rem;
      padding: .75rem 1.25rem;
    }

  .page-jump a {
      font-size: .8rem;
    }

  .editorial-hero h1 {
      font-size: clamp(2.2rem,7vw,3.4rem);
    }

  .editorial-hero .lead {
      font-size: 1.15rem;
    }

  .guide-contact[aria-label] {
      padding: 2rem;
    }

  .editorial-article {
      padding: 2rem 1.25rem 5rem;
    }

  .editorial-meta {
      flex-direction: row;
      justify-content: space-between;
    }

  .article-sections section {
      padding: 1.6rem 0;
    }

  .article-sections h2 {
      font-size: 1.55rem;
    }

  .article-sections .prose {
      font-size: 1.03rem;
    }

  .article-sections .answer-step {
      padding: 1.6rem 1.8rem 1.6rem 5rem;
    }

  .answer-number {
      position: absolute;
      top: 1.65rem;
      left: 1.4rem;
      margin-bottom: 0;
      font-size: 1rem;
    }

  .notes-list {
      padding-top: 2.8rem;
      padding-bottom: 5rem;
    }

  .notes-grid {
      grid-template-columns: 1fr 1fr;
      gap: 1.35rem;
    }

  .notes-list h2 {
      font-size: 2rem;
    }

  .note-photo {
      height: 190px;
    }

  .note-copy {
      padding: 1.5rem;
    }

  .notes-list .note-copy h2 {
      font-size: 1.55rem;
    }

  .notes-guide {
      grid-template-columns: 180px 1fr;
      gap: 2.5rem;
      padding: 2rem;
    }

  .notes-guide h2 {
      font-size: 1.7rem;
    }

  .visit-time {
      font-size: 3rem;
    }

  .visit-time small {
      display: block;
      margin-left: 0;
      margin-top: .5rem;
    }

}

@media (min-width:56.25em) {

  .editorial-hero {
      padding: 3.25rem 1.25rem 3rem;
    }

  .editorial-hero h1 {
      max-width: 950px;
      font-size: clamp(2.35rem,4.6vw,4rem);
    }

  .notes-grid {
      grid-template-columns: repeat(3,minmax(0,1fr));
    }

}

@media (hover:hover) {

  .note-card:hover {
      transform: none;
      box-shadow: none;
      filter: none;
    }

}

/* ---- components/faq.css ---- */
/* components/faq.css */
.home-band .c-faq {
  max-width: 680px;
}

.c-faq details {
  padding: .85rem 0;
  border-top: 1px solid var(--line);
}

.c-faq details:last-child {
  border-bottom: 1px solid var(--line);
}

.c-faq summary::-webkit-details-marker {
  display: none;
}

.c-faq details[open] summary::after {
  transform: rotate(90deg);
}

.c-faq details p {
  margin: .55rem 0 0;
  color: var(--color-text-muted);
  font-size: .88rem;
  line-height: 1.6;
}

.c-faq {
  max-width: none;
  margin: 0;
}

.c-faq summary {
  cursor: pointer;
  color: var(--color-text);
  font-weight: 600;
  list-style: none;
  display: block;
  min-height: 44px;
  padding: .55rem 1.5rem .55rem 0;
  font-size: 1rem;
}

.c-faq summary::after {
  content: "▸";
  float: right;
  color: var(--color-action);
}

@media (prefers-reduced-motion: no-preference) {
  .c-faq summary::after {
    transition: transform var(--dur-1) var(--ease);
  }
}

/* ---- components/hero.css ---- */
/* components/hero.css */
.hero {
  position: relative;
}

.hero-copy {
  width: 100%;
  max-width: var(--max);
  margin: auto;
  padding: 4rem 1.25rem;
  min-width: 0;
}

.hero h1 {
  max-width: 830px;
  margin: 0;
  font-size: var(--text-display);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.actions {
  display: flex;
  align-items: stretch;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.actions .button {
  width: auto;
}

.hero-inner .hero-media {
  position: relative;
  order: 0;
  justify-self: start;
  max-width: 450px;
  width: 100%;
  overflow: hidden;
}

.hero-inner .hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
}

.hero-inner .actions {
  margin-top: 1.3rem;
}

.portrait-caption {
  margin: 1rem 0 .8rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--color-text);
}

.portrait-caption span {
  display: block;
  margin-top: .1rem;
  color: var(--color-text-muted);
  font-size: .76rem;
  font-weight: 400;
}

/* Home hero: warm-paper ground, an oversized asymmetric Fraunces headline, the photo in a
   tall arch mask with the goniometer arc swept around it (plan §Signature moments #1). */
.hero-home {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 2.5rem;
  background: var(--color-bg);
  max-width: var(--max);
  margin: auto;
  padding: 1rem var(--gutter) 0;
}

.hero-home .hero-copy {
  color: var(--color-text);
  padding: 1.5rem 0 0;
  max-width: none;
  margin: 0;
}

.hero-home .eyebrow {
  color: var(--color-action);
}

.hero-home .actions {
  max-width: 560px;
}

.hero-home h1 {
  font-family: var(--font-display);
  max-width: 13ch;
  font-size: clamp(2.75rem, 2rem + 6vw, 6.5rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.02em;
  overflow-wrap: normal;
}

.hero-home .lead {
  color: var(--color-text-muted);
  max-width: 42ch;
}

.hero-home .button.secondary {
  color: var(--color-text);
  border-color: var(--color-border);
}

.hero-home .button.secondary:hover {
  color: var(--color-action);
  border-color: var(--color-action);
}

/* Home hero signature: Marey-style walking chronophotograph (hero-motion.mjs). */
.hero-motion { margin: 0 auto; width: min(92vw, 540px); pointer-events: none; }
.hero-motion svg { width: 100%; height: auto; display: block; overflow: visible; }
.hero-motion path, .hero-motion circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hm-ghost { opacity: var(--op); }
.hm-ghost path, .hm-ghost circle { fill: var(--color-text); stroke: none; }
.hm-ghost .hm-far { fill: var(--slate-600); }
.hm-solid path, .hm-solid circle { fill: var(--color-text); stroke: none; }
.hm-solid .hm-far { fill: var(--slate-600); opacity: .55; }
.hm-ground { stroke: var(--color-motif); stroke-width: 1; }
.hm-trace { stroke-width: 1.4; }
.hm-trace--hip { stroke: var(--color-action); stroke-width: 2; }
.hm-trace--ankle { stroke: var(--color-motif); }
.hm-trace--far { stroke: var(--color-motif); opacity: .45; stroke-dasharray: 2 4; }
.hm-live .hm-ghost { opacity: 0; transition: opacity .6s var(--ease); }
.hm-live .hm-ghost.is-on { opacity: var(--op); }

@media (min-width:40em) {

  .hero-home {
      grid-template-columns: minmax(0,1.15fr) minmax(240px,.85fr);
      align-items: center;
      gap: 3rem;
      padding-block: 2.5rem;
    }

  .hero-motion { width: 100%; max-width: 380px; margin: 0; }


}

@media (min-width:56.25em) {

  .hero-home {
      grid-template-columns: minmax(0,1.3fr) minmax(300px,.8fr);
      gap: 4rem;
      padding-block: 3rem;
    }

  .hero-home h1 {
      font-size: clamp(4rem, 2.2rem + 6vw, 7.5rem);
    }

  .hero-motion { width: 100%; max-width: 380px; margin: 0; }


}

.hero-inner {
  max-width: var(--max);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-width: 0;
  padding: clamp(2rem,4vw,4.5rem) var(--gutter);
  gap: 2.5rem;
}

.hero-inner h1 {
  font-size: var(--text-h1);
  line-height: 1.12;
  letter-spacing: -.035em;
  overflow-wrap: normal;
}

.hero-inner .hero-copy {
  padding: 0;
  max-width: 68ch;
}

.hero-inner .hero-media:before {
  content: "";
  position: absolute;
  background: var(--surface-tint);
  z-index: -1;
  inset: 12px -12px -12px 12px;
}

.lead {
  margin: 1.65rem 0 0;
  font-size: var(--text-lead);
  color: var(--color-text-muted);
  text-wrap: pretty;
  line-height: 1.6;
  margin-top: 1rem;
  max-width: 68ch;
}

.condition-hero {
  max-width: none;
  display: block;
  padding: 1.5rem var(--gutter) 2.1rem;
  background: var(--surface-tint);
  position: relative;
  overflow: hidden;
}

.condition-hero .hero-copy {
  max-width: 820px;
  margin: auto;
  position: relative;
}

/* Small static goniometer glyph (plan §Stage 3): a quiet instrument mark behind the H1,
   never over the CTAs below. Decorative — aria-hidden + pointer-events:none via .c-arc. */
.c-arc--condition-hero {
  position: absolute;
  top: -1.2rem;
  right: -1rem;
  width: 96px;
  height: 96px;
  opacity: .5;
  z-index: -1;
}

.c-arc--condition-hero .c-arc__path { stroke: var(--sand-400); }

@media (min-width:40em) {

  .c-arc--condition-hero {
      width: 130px;
      height: 130px;
      top: -1.5rem;
      right: 0;
    }

}

.condition-hero h1 {
  max-width: 25ch;
  font-size: clamp(2rem,1.55rem + 2vw,3rem);
  line-height: 1.12;
}

.condition-hero .lead {
  margin-top: .85rem;
  max-width: 58ch;
  font-size: clamp(1rem,.96rem + .25vw,1.15rem);
}

.condition-hero .c-trust {
  max-width: 69ch;
  margin-top: .85rem;
  font-size: .77rem;
  line-height: 1.55;
}

.condition-hero .actions {
  max-width: 450px;
  margin-top: 1rem;
}

.condition-hero .actions .button:first-child {
  flex: 1;
}

.condition-hero .actions .button.secondary {
  min-width: 88px;
  border-color: var(--color-action);
  color: var(--color-action);
}

.hero-inner:not(.condition-hero) .actions {
  max-width: 480px;
}

@media (min-width:40em) {

  .hero-inner {
      padding: 3.25rem 1.25rem;
      grid-template-columns: minmax(0,1fr) minmax(270px,.8fr);
      gap: 2.5rem;
    }

  .hero-inner:not(.condition-hero) {
      grid-template-columns: minmax(0,1fr) minmax(260px,.8fr);
    }

  .condition-hero {
      padding-block: 2.5rem 3rem;
    }

  .hero-inner.condition-hero { padding-inline: var(--gutter); }

}

@media (min-width:56.25em) {

  .hero-copy {
      padding: 5.5rem 1.25rem;
    }

  .hero h1 {
      font-size: clamp(3rem, 6vw, 5.35rem);
    }

  .actions {
      align-items: center;
    }

  .actions .button {
      width: auto;
    }

  .hero-inner {
      grid-template-columns: minmax(0,1fr) minmax(320px,.88fr);
      gap: 4rem;
    }

  .hero-inner .hero-media {
      justify-self: end;
    }

  .hero-inner:not(.condition-hero) {
      gap: 5rem;
    }

  .condition-hero {
      padding-block: 3rem 3.25rem;
    }

  .condition-hero .hero-copy {
      display: grid;
      grid-template-columns: minmax(0, 31%) minmax(0, 1fr);
      grid-template-rows: auto auto auto auto;
      column-gap: clamp(3rem, 7vw, 7rem);
      align-items: start;
      max-width: calc(var(--container) - 2 * var(--gutter));
    }

  .condition-hero .breadcrumbs { grid-column: 1 / -1; margin-bottom: 2.5rem; }

  .condition-hero h1 {
      grid-column: 1;
      grid-row: 2 / 5;
      max-width: 13ch;
      font-size: clamp(2.7rem, 3.5vw, 3.5rem);
      line-height: 1.07;
    }

  .condition-hero .lead { grid-column: 2; grid-row: 2; margin: .1rem 0 0; font-size: var(--text-lead); }

  .condition-hero .c-trust { grid-column: 2; grid-row: 3; margin-top: 1.35rem; font-size: var(--text-small); }

  .condition-hero .actions { grid-column: 2; grid-row: 4; margin-top: 1.6rem; max-width: 460px; }

}

/* ---- components/home.css ---- */
/* components/home.css */
.home-band .container {
  max-width: var(--container);
}

.home-band--contact {
  background: var(--surface-inverse);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}

/* Closing motif: one large, very faint arc bleeding off the right edge (plan
   "Contact band"). Sits behind the copy/buttons and never intercepts pointer events. */
.home-contact-arc {
  position: absolute;
  top: 50%;
  right: -6%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}

.home-contact-arc__svg {
  width: min(60vw, 560px);
  height: auto;
  opacity: .25;
}

.home-contact-arc__svg .c-arc__path { stroke: var(--sand-400); }

.home-band--contact .container {
  position: relative;
  z-index: 1;
}

.home-band--contact h2 {
  color: var(--color-text-inverse);
}

.home-band {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--color-border);
}

.home-band h2 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 500;
  letter-spacing: -.02em;
  text-align: left;
  max-width: 14ch;
  margin: 0 0 1rem;
  line-height: 1.02;
}

.home-band__lede {
  color: var(--color-text-muted);
  text-align: left;
  margin: 0 0 1.5rem;
  max-width: 65ch;
  font-size: 1rem;
}

.home-band--regions {
  background: var(--surface-raised);
}

.home-band--faq {
  background: var(--surface-raised);
}

.home-band--steps {
  background: var(--paper);
}

.home-band--why {
  background: var(--paper);
  text-align: left;
  padding-block: calc(var(--section-y) * 1.1);
}

.home-band--why .c-trust {
  text-align: left;
  margin: 0;
  max-width: 68ch;
  font-size: 1rem;
}

.home-band--why .home-band__lede {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--color-text);
  max-width: 22ch;
}

.home-band .c-steps {
  margin: 0;
  max-width: 780px;
}

.home-band .c-faq {
  margin: 0;
  max-width: 780px;
}

.home-band--contact p {
  color: rgba(255,255,255,.8);
  max-width: 560px;
  margin: 0 auto 1.5rem;
  text-align: left;
  margin-left: 0;
}

.home-band--contact address {
  display: block;
  font-style: normal;
  color: rgba(255,255,255,.7);
  margin-top: 2rem;
  text-align: left;
  margin-left: 0;
}

.home-band--contact .actions {
  justify-content: flex-start;
  max-width: 500px;
}

.home-band--contact .text-link {
  text-align: left;
  margin-left: 0;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--color-accent-inverse);
}

.home-band--contact .button.secondary {
  color: var(--color-text-inverse);
  border-color: rgba(255,255,255,.65);
}

@media (min-width:56.25em) {

  .home-band .container {
      display: grid;
      grid-template-columns: minmax(220px, .9fr) minmax(0, 2.1fr);
      gap: 0 clamp(3rem, 7vw, 7rem);
    }

  .home-band { padding-block: calc(var(--section-y) * 1.05); }

  .home-band h2 {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
    }

  .home-band .c-section-marker {
      grid-column: 1;
      grid-row: 1;
      align-self: end;
    }

  .home-band__body {
      grid-column: 2;
      grid-row: 1/3;
    }

  .home-band--contact .container {
      display: block;
    }

  .home-band--contact p {
      max-width: 58ch;
    }

  .home-band--why .c-trust {
      max-width: 70ch;
    }

  .home-band.home-band--why { padding-block: calc(var(--section-y) * .72); }

}

/* ---- components/region-tiles.css ---- */
/* components/region-tiles.css */
.c-region-tiles__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
}

.c-body-map {
  width: 100%;
  max-width: 150px;
}

.c-body-map svg { width: 100%; height: auto; display: block; overflow: visible; }

.c-body-map__figure path {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.c-body-map__fill path { fill: var(--surface-tint); stroke: none; }
.c-body-map__detail path, .c-body-map__detail circle {
  fill: none; stroke: var(--slate-600); stroke-width: .7; opacity: .55;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}

.c-body-map__spine,
.c-body-map__scale {
  fill: none;
  stroke: var(--color-motif);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.c-body-map__scale { opacity: .55; }

.c-body-map__hotspot { cursor: pointer; }
.c-body-map__hit { fill: transparent; stroke: none; }

.c-body-map__dot {
  fill: var(--color-bg);
  stroke: var(--color-text);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur-2) var(--ease), stroke var(--dur-2) var(--ease);
}

.c-body-map__ring {
  fill: none;
  stroke: var(--color-action);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.c-body-map__hotspot:hover .c-body-map__dot,
.c-body-map__hotspot:focus-visible .c-body-map__dot,
.c-body-map__hotspot.is-active .c-body-map__dot,
.c-body-map__hotspot.is-selected .c-body-map__dot {
  fill: var(--color-action);
  stroke: var(--color-action);
}

.c-body-map__hotspot:hover .c-body-map__ring,
.c-body-map__hotspot:focus-visible .c-body-map__ring,
.c-body-map__hotspot.is-active .c-body-map__ring,
.c-body-map__hotspot.is-selected .c-body-map__ring { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  .c-body-map__ring { transition: stroke-dashoffset .45s var(--ease); }
}

.c-body-map__hotspot:focus-visible { outline: none; }
.c-body-map__hotspot:focus-visible .c-body-map__hit {
  stroke: var(--color-focus);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.c-region-tiles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  max-width: 900px;
  width: 100%;
}

.c-region-tiles ul a {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 72px;
  padding: .8rem .25rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.4;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.c-region-tile__icon { width: 24px; height: 24px; flex: none; color: var(--sage-500); }

.c-region-tiles li.is-active a,
.c-region-tiles ul a.is-active,
.c-region-tiles li.is-selected a,
.c-region-tiles ul a.is-selected {
  color: var(--color-action-hover);
  border-color: var(--color-action);
}

@media (min-width:40em) {

  .c-region-tiles__grid {
      flex-direction: row;
      align-items: center;
      gap: var(--space-8);
    }

  .c-body-map {
      max-width: 200px;
      flex: none;
    }

}

@media (min-width:56.25em) {

  .c-body-map { max-width: 230px; }

  .c-region-tiles ul { column-gap: 3rem; }

  .c-region-tiles ul a { min-height: 86px; font-size: 1rem; }

}

@media (hover:hover) {

  .c-region-tiles ul a:hover { color: var(--color-action-hover); border-color: var(--color-action); }

}

/* Body-map inline panels (release 2, homepage only): a calm, restrained reveal on the same
   surface the regions band already sits on (--surface-raised via .home-band--regions). Panels
   stay [hidden] until site-js.mjs's click handler shows one; without JS they never appear and
   the hotspot/list links keep navigating to /rahatsizliklar#<id> as before. */
.c-region-panels {
  width: 100%;
  margin-top: var(--space-7);
}

.c-region-panel {
  max-width: 640px;
  margin: 0 auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  text-align: left;
}

.c-region-panel[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .c-region-panel:not([hidden]) {
    animation: c-region-panel-reveal var(--dur-2) var(--ease);
  }
}

@keyframes c-region-panel-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.c-region-panel h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text);
}

.c-region-panel h3:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.c-region-panel > p {
  margin: 0 0 var(--space-4);
  max-width: 60ch;
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: 1.6;
}

/* Specificity note: .c-region-tiles ul (two-column region grid, above) would otherwise win
   over a single-class selector here since both apply inside the same <nav> — this needs to
   be at least as specific. */
.c-region-panel .c-region-panel__featured {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-region-panel__featured a,
.c-region-panel__all a {
  color: var(--color-action);
  font-weight: 600;
  text-decoration: none;
}

.c-region-panel__featured a:hover,
.c-region-panel__all a:hover {
  color: var(--color-action-hover);
  text-decoration: underline;
  text-decoration-color: var(--sand-400);
  text-underline-offset: .2em;
}

.c-region-panel__others {
  margin: 0 0 var(--space-5);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.c-region-panel__others a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 2px;
}

.c-region-panel__others a:hover {
  color: var(--color-action);
  text-decoration-color: var(--sand-400);
}

.c-region-panel__all {
  margin: 0;
  font-size: var(--text-small);
}

/* ---- components/services.css ---- */
/* components/services.css */
.service-index-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.services-index-page .service-index-hero .eyebrow {
  margin-bottom: .55rem;
}

.service-index-heading {
  display: block;
  margin-bottom: .85rem;
}

.service-index-heading .section-kicker {
  margin: 0 0 .25rem;
}

.service-index-heading>p:last-child {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .8rem;
}

.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.service-card-summary {
  color: var(--color-text-muted);
  font-size: .9rem;
  line-height: 1.65;
}

.service-card-bullets li {
  margin-bottom: .3rem;
}

.service-legacy-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.service-process>h2 {
  margin: 0;
  font-size: var(--text-h3);
  line-height: 1.35;
  font-weight: 600;
}

.service-faq>h2 {
  margin: 0;
  font-size: var(--text-h3);
  line-height: 1.35;
  font-weight: 600;
}

.service-process ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: .95rem;
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
}

.service-process li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}

.service-step-no {
  flex: 0 0 auto;
  color: #09879d;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.service-progress {
  max-width: 750px;
  margin: .95rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--turquoise);
  color: var(--color-text-muted);
  font-size: .8rem;
  line-height: 1.6;
}

.service-about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
  gap: .55rem;
  padding: .25rem 0;
  color: var(--color-text);
  text-decoration: none;
}

.service-about-label {
  color: var(--color-action);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.service-about>span:nth-child(2) {
  max-width: none;
  color: var(--color-text-muted);
  font-size: .84rem;
  line-height: 1.6;
}

.service-about .service-card-link {
  margin-top: 0;
  padding-top: .2rem;
}

.service-faq details {
  padding: .8rem 0;
  border-top: 1px solid var(--line);
}

.service-faq details:first-of-type {
  margin-top: .55rem;
}

.service-faq summary {
  cursor: pointer;
  color: var(--color-text);
  font-size: .87rem;
  font-weight: 600;
}

.service-faq details p {
  margin: .45rem 0 0;
  color: var(--color-text-muted);
  font-size: .83rem;
  line-height: 1.6;
}

.service-contact h2 {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.4;
  font-weight: 600;
}

.service-contact p {
  margin: .15rem 0 0;
  color: var(--color-text-muted);
  font-size: .84rem;
}

.service-contact .button {
  white-space: nowrap;
  min-height: 44px;
  width: auto;
}

.services-index-page a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.services-index-page summary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.service-reading-link {
  display: inline-block;
  margin-top: .55rem;
  color: var(--color-text-muted);
  font-size: .75rem;
  line-height: 1.45;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.service-first-visit {
  margin: 1.4rem 0 0;
}

.service-first-visit a {
  color: var(--color-action);
  font-weight: 600;
}

.services-index-page .service-index-hero {
  padding: clamp(2.5rem,5vw,4.5rem) var(--gutter);
  background: var(--surface-tint);
}

.services-index-page .service-index-hero h1 {
  font-size: var(--text-h1);
}

.services-index-page .service-index-hero .lead {
  max-width: 680px;
  margin-top: .8rem;
  line-height: 1.6;
  font-size: var(--text-lead);
}

.service-index {
  padding: var(--section-y) var(--gutter);
}

.service-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.service-card {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  min-height: 0;
  padding: 1.5rem 0;
}

.service-card-image {
  display: block;
  overflow: hidden;
  min-height: 0;
  height: auto;
  aspect-ratio: 3/2;
  border-radius: 3px;
  background: var(--surface-tint);
}

.service-card-copy {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.3rem 0;
}

.service-card h2 {
  margin: 0 0 .45rem;
  line-height: 1.3;
  letter-spacing: -.025em;
  font-weight: 600;
  font-size: var(--text-h3);
}

.service-card-bullets {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: .94rem;
}

.service-card-link {
  display: inline-flex;
  gap: .35rem;
  margin-top: auto;
  padding-top: .55rem;
  color: var(--color-action);
  font-weight: 600;
  font-size: .85rem;
  min-height: 44px;
  align-items: center;
}

.service-card:hover {
  color: var(--color-text);
  box-shadow: none;
}

.service-card:hover .service-card-image img {
  transform: none;
}

.service-process {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  border-color: var(--color-border);
}

.service-index-more {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  border-color: var(--color-border);
}

.service-process h3 {
  margin: 0;
  line-height: 1.4;
  font-weight: 600;
  font-size: 1rem;
}

.service-process li p {
  margin: .25rem 0 0;
  color: var(--color-text-muted);
  line-height: 1.55;
  font-size: 1rem;
}

.service-contact {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  gap: .85rem;
  margin-top: 1.8rem;
  padding: 1rem;
  background: var(--surface-tint);
  border-left: 3px solid var(--color-button);
}

@media (min-width:40em) {

  .services-index-page .service-index-hero {
      padding: 3.1rem 1.25rem 2.1rem;
    }

  .services-index-page .service-index-hero h1 {
      font-size: clamp(2.5rem, 5vw, 4.25rem);
    }

  .services-index-page .service-index-hero .lead {
      font-size: 1.05rem;
    }

  .service-index {
      padding: 2rem 1.25rem 4.5rem;
      padding-top: 4rem;
      padding-bottom: 5rem;
    }

  .service-index-heading {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      margin: 0 0 1.1rem;
    }

  .service-index-heading .section-kicker {
      margin: 0;
    }

  .service-index-heading>p:last-child {
      font-size: .88rem;
    }

  .service-card h2 {
      font-size: 1.08rem;
    }

  .service-card-summary {
      font-size: .84rem;
      line-height: 1.55;
    }

  .service-card-link {
      padding-top: .85rem;
      font-size: .83rem;
    }

  .service-process {
      margin-top: 3.2rem;
      padding-top: 1.65rem;
    }

  .service-progress {
      margin-top: 1.15rem;
    }

  .service-index-more {
      grid-template-columns: .85fr 1.15fr;
      gap: 2rem;
      margin-top: 2.5rem;
      padding-top: 1.5rem;
    }

  .service-about>span:nth-child(2) {
      max-width: 390px;
    }

  .service-contact {
      flex-direction: row;
      align-items: center;
      gap: 1.5rem;
      margin-top: 2.5rem;
      padding: 1.25rem 1.4rem;
    }

  .service-card-grid {
      gap: .75rem;
      grid-template-columns: 1fr;
    }

  .service-card {
      flex-direction: column;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0,42%) minmax(0,1fr);
      gap: 2rem;
      align-items: center;
      padding: 2rem 0;
    }

  .service-card-image {
      height: auto;
      min-height: 0;
      aspect-ratio: 3/2;
    }

  .service-card-copy {
      padding: 0;
    }

  .service-process ol {
      gap: 1.2rem;
      margin-top: 1.15rem;
      grid-template-columns: repeat(3,minmax(0,1fr));
    }

}

@media (min-width:56.25em) {

  .service-card-grid {
      gap: 1.15rem;
    }

  .service-index-more {
      gap: 3rem;
    }

  .service-card {
      gap: 4rem;
      padding: 2.5rem 0;
    }

  .service-card-image {
      aspect-ratio: 1.65;
    }

  .service-card h2 {
      font-size: 1.45rem;
    }

  .service-card-copy {
      padding: 1rem 1.05rem 1.05rem;
      max-width: 55ch;
    }

}

@media (hover:hover) {

  .service-card:hover {
      transform: none;
      box-shadow: none;
      filter: none;
    }

}

@media (prefers-reduced-motion:reduce) {

  .service-card {
      transition: none;
    }

  .service-card-image img {
      transition: none;
    }

}

/* ---- components/steps.css ---- */
/* components/steps.css */
.home-band .c-steps {
  max-width: 720px;
  margin-inline: auto;
}

.c-steps li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.c-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  max-width: none;
  gap: 1.5rem;
}

.c-steps__no {
  flex: 0 0 auto;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.8;
  font-size: .8rem;
  color: var(--color-action);
  padding-top: .15rem;
}

.c-steps h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.4;
  font-size: 1rem;
}

.c-steps p {
  margin: .3rem 0 0;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: .94rem;
}

@media (min-width:40em) {

  .home-band .c-steps {
      grid-template-columns: repeat(3,1fr);
      gap: 2rem;
    }

}

/* Sticky storytelling variant (plan "Nasıl çalışıyorum"): each step gets its own arc,
   advancing 60/120/180deg as it enters (site-js.mjs adds .is-active via IntersectionObserver;
   fully visible at rest, so this degrades gracefully). */
.c-steps--arc li {
  flex-direction: column;
  align-items: flex-start;
}

.c-steps__arc {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: .75rem;
}

.c-steps__arc-track,
.c-steps__arc-sweep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.c-steps__arc-track .c-arc__path {
  stroke: var(--color-border);
  opacity: 1;
}

.c-steps__arc-sweep .c-arc__path {
  stroke: var(--color-action);
  opacity: .55;
  transition: opacity var(--dur-2) var(--ease);
}

.c-steps__arc[data-step-arc].is-active .c-steps__arc-sweep .c-arc__path,
li:has(.c-steps__arc[data-step-arc].is-active) .c-steps__arc-sweep .c-arc__path {
  opacity: 1;
}

/* .c-steps--arc always renders as one generously-spaced vertical column — 3-across only
   ever applied to the plain (non-arc) condition-page steps grid above. */
.home-band .c-steps.c-steps--arc {
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 620px;
}

@media (min-width:56.25em) {

  /* Desktop: sticky storytelling — the heading column pins in place while the steps
     progress vertically beside it (plan "Nasıl çalışıyorum"). */
  .home-band--steps .container {
      align-items: start;
    }

  .home-band--steps h2 {
      position: sticky;
      top: calc(var(--header-h-md) + 2rem);
    }

  .home-band .c-steps.c-steps--arc {
      gap: 4.5rem;
    }

}

/* ---- components/sticky-bar.css ---- */
/* components/sticky-bar.css */
.c-sticky.is-hidden {
  transform: translateY(100%);
  opacity: 0;
}

.c-sticky .button {
  flex: 1;
  min-height: 48px;
}

html {
  scroll-padding-bottom: var(--sticky-bar-h);
}

.c-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  background: var(--surface-inverse);
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);
  min-height: var(--sticky-bar-h);
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom,0px));
  gap: .55rem;
  box-shadow: 0 -1px 0 var(--color-border);
}

.c-sticky .button:first-child {
  flex: 2;
}

.c-sticky .button.secondary {
  flex: 1;
  color: var(--color-text-inverse);
  border-color: rgba(255,255,255,.55);
}

.c-sticky .button.secondary:hover {
  color: var(--color-text);
}

body.has-sticky {
  padding-bottom: var(--sticky-bar-h);
}

@media (min-width:56.25em) {

  .c-sticky {
      display: none;
    }

  body.has-sticky {
      padding-bottom: 0;
    }

  html {
      scroll-padding-bottom: 0;
    }

}

@media (prefers-reduced-motion:reduce) {

  .c-sticky {
      transition: none;
    }

}

/* ---- components/trust-line.css ---- */
/* ============================================================
   components/trust-line.css — TrustLine (BLUEPRINT §3.2 #4)
   ============================================================ */
.c-trust{margin:1.1rem 0 0;color:var(--color-text-muted);font-size:.82rem;line-height:1.6;letter-spacing:.01em}
.hero-home .c-trust{color:var(--color-text-muted)}
.condition-hero{background:var(--surface-tint)}

/* ---- 90-utilities.css ---- */
/* 90-utilities.css */
.anchor {
  position: relative;
  top: -2rem;
}

@media (prefers-reduced-motion:reduce) {

  html {
      scroll-behavior: auto;
    }

  .premium-image {
      transition: none;
    }

  .button:hover {
      transform: none;
    }

  .nav-cta:hover {
      transform: none;
    }

  .service-card:hover {
      transform: none;
    }

  .note-card:hover {
      transform: none;
    }

  .card:hover {
      transform: none;
    }

  .premium-image:hover {
      transform: none;
    }

  .service-card:hover .service-card-image img {
      transform: none;
    }

  .enquiryBlock :is(.button, button, input[type="submit"]) {
      transition: none;
    }

  #enquiryBlock :is(.button, button, input[type="submit"]) {
      transition: none;
    }

  .c-sticky {
      transition: none;
    }

  a {
      transition: none;
    }

  button {
      transition: none;
    }

  summary {
      transition: none;
    }

  .service-card {
      transition: none;
    }

  .note-card {
      transition: none;
    }

}