@layer sections {
  /* ── Hero ─────────────────────────────────────────────── */
  .s-about__hero {
    padding-block: var(--space-11) var(--space-10);
    border-block-end: 1px solid var(--line);
  }

  .s-about__hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 72ch;
  }

  .s-about__kicker {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin: 0;
  }

  .s-about__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-5);
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin: 0;
    color: var(--ink);
  }

  .s-about__lead {
    font-size: var(--step-1);
    line-height: 1.6;
    color: var(--ink-muted);
    margin: 0;
    max-width: 60ch;
  }

  /* ── Bölüm genel ──────────────────────────────────────── */
  .s-about__section {
    padding-block: var(--space-10);
    border-block-end: 1px solid var(--line);
  }

  .s-about__section-inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-8) var(--space-10);
    align-items: start;
  }

  .s-about__section-label {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin: 0;
    padding-top: 0.3rem;
  }

  .s-about__section-body {
    display: grid;
    gap: var(--space-5);
  }

  .s-about__section-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-3);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--ink);
  }

  .s-about__section-text {
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--ink-muted);
    margin: 0;
  }

  /* ── Adımlar (9 adım) ─────────────────────────────────── */
  .s-about__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    margin-block-start: var(--space-6);
  }

  .s-about__step {
    padding: var(--space-5);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .s-about__step:nth-child(3n) { border-right: 0; }
  .s-about__step:nth-last-child(-n+3) { border-bottom: 0; }

  .s-about__step-no {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin: 0 0 var(--space-2);
  }

  .s-about__step-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-0);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-2);
    color: var(--ink);
  }

  .s-about__step-text {
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--ink-muted);
    margin: 0;
  }

  /* ── Hizmet kartları ──────────────────────────────────── */
  .s-about__services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-block-start: var(--space-6);
  }

  .s-about__service {
    border: 1px solid var(--line);
    padding: var(--space-5);
    display: grid;
    gap: var(--space-3);
  }

  .s-about__service-title {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0;
    color: var(--ink);
  }

  .s-about__service-text {
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--ink-muted);
    margin: 0;
  }

  /* ── Kanıt metrikleri ─────────────────────────────────── */
  .s-about__proofs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    margin-block-start: var(--space-6);
  }

  .s-about__proof {
    padding: var(--space-5);
    border-right: 1px solid var(--line);
  }

  .s-about__proof:last-child { border-right: 0; }

  .s-about__proof-value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-4);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent);
    margin: 0 0 var(--space-2);
  }

  .s-about__proof-label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink-muted);
    margin: 0 0 var(--space-1);
  }

  .s-about__proof-context {
    font-size: var(--step--2);
    color: var(--ink-muted);
    margin: 0;
    line-height: 1.4;
  }

  /* ── Sonuç / manifesto ────────────────────────────────── */
  .s-about__manifesto {
    padding-block: var(--space-10);
    background: var(--ink);
    color: var(--paper);
  }

  .s-about__manifesto-inner {
    display: grid;
    gap: var(--space-5);
    max-width: 64ch;
  }

  .s-about__manifesto-label {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--paper) 55%, transparent);
    margin: 0;
  }

  .s-about__manifesto-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-3);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0;
  }

  .s-about__manifesto-sub {
    font-size: var(--step-0);
    line-height: 1.6;
    color: color-mix(in srgb, var(--paper) 70%, transparent);
    margin: 0;
  }

  /* ── Responsive ───────────────────────────────────────── */
  @media (max-width: 899px) {
    .s-about__section-inner {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }

    .s-about__steps {
      grid-template-columns: repeat(2, 1fr);
    }

    .s-about__step:nth-child(3n) { border-right: 1px solid var(--line); }
    .s-about__step:nth-child(2n) { border-right: 0; }
    .s-about__step:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
    .s-about__step:nth-last-child(-n+2) { border-bottom: 0; }

    .s-about__services {
      grid-template-columns: 1fr;
    }

    .s-about__proofs {
      grid-template-columns: repeat(2, 1fr);
    }

    .s-about__proof:nth-child(2) { border-right: 0; }
    .s-about__proof:nth-child(1),
    .s-about__proof:nth-child(2) { border-bottom: 1px solid var(--line); }
  }

  @media (max-width: 560px) {
    .s-about__title { font-size: var(--step-4); }
    .s-about__steps { grid-template-columns: 1fr; }
    .s-about__step { border-right: 0 !important; }
    .s-about__step:not(:last-child) { border-bottom: 1px solid var(--line) !important; }
    .s-about__proofs { grid-template-columns: 1fr; }
    .s-about__proof { border-right: 0; border-bottom: 1px solid var(--line); }
    .s-about__proof:last-child { border-bottom: 0; }
  }
}