/*
 * Hizmet landing page — tasarımın editoryal diline eklenen bölümler.
 *
 * Mevcut s-service.css'e dokunulmaz; buradaki sınıflar yalnızca hizmet
 * sayfasının kendi anlatı bölümleri içindir. Aynı tokenlar, aynı hairline
 * çizgiler, gradient ve gölge yok.
 */

@layer sections {
  /* --- Künye şeridi --------------------------------------------------------
     Başlığın hemen altında, mono ile yazılmış teknik satır. */
  .s-service__strip {
    display: grid;
    /* min() olmadan kolonlar 12rem'in altına inemez ve dar ekranda ızgara
       kabı taşırır; bu, auto-fit'in bilinen tuzağıdır. */
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: var(--space-5);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--line);
  }

  .s-service__strip-item {
    display: grid;
    gap: var(--space-2);
  }

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

  .s-service__strip-value {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--ink);
  }

  /* --- İddia ---------------------------------------------------------------
     Hizmetin bakış açısını tek cümlede söyleyen, sayfanın en büyük tipografisi. */
  .s-service__claim {
    padding-block: var(--space-10);
    border-block: 1px solid var(--line);
  }

  .s-service__claim-text {
    margin: 0;
    max-width: 22ch;
    font-family: var(--font-display);
    font-size: var(--step-5);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.04em;
    color: var(--ink);
    text-wrap: balance;
  }

  .s-service__claim-note {
    margin: var(--space-6) 0 0;
    max-width: 46ch;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
  }

  /* --- Karşıtlık -----------------------------------------------------------
     Yaygın yaklaşım ile bu ajansın yaklaşımını satır satır karşılaştırır. */
  .s-service__contrast {
    display: grid;
    gap: 0;
  }

  .s-service__contrast-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    padding-block: var(--space-5);
    border-block-end: 1px solid var(--line);
  }

  .s-service__contrast-common {
    margin: 0;
    color: var(--ink-muted);
    /* Yaygın yaklaşımın geçersizliği tipografiyle değil renkle söylenir. */
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
    text-decoration-thickness: 1px;
  }

  .s-service__contrast-ours {
    margin: 0;
    color: var(--ink);
    font-weight: 500;
  }

  /* --- Öne çıkan vaka ------------------------------------------------------
     Üç kartlık ızgara yerine tek işi büyüterek anlatır. */
  .s-service__case {
    display: grid;
    gap: var(--space-6);
    padding-block: var(--space-9);
    border-block-start: 1px solid var(--ink);
  }

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

  .s-service__case-metric {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-6);
    font-weight: 800;
    line-height: 0.86;
    letter-spacing: -0.05em;
    color: var(--ink);
  }

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

  .s-service__case-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    max-width: 52ch;
  }

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

  .s-service__case-text {
    margin: 0;
    color: var(--ink-muted);
  }

  .s-service__case-link {
    justify-self: start;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-block-end: 1px solid var(--ink);
  }

  @media (min-width: 900px) {
    .s-service__case {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: start;
      column-gap: var(--space-8);
    }

    .s-service__case-label {
      grid-column: 1 / -1;
    }
  }

  /* --- Bölüm ızgarası ------------------------------------------------------
     Her bölüm 12 kolona oturur. Solda kaydırma boyunca yerinde kalan mono ray,
     sağda gövde. Sayfanın ritmi bu asimetriden gelir. */
  .s-service__block {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .s-service__rail {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    min-width: 0;
  }

  .s-service__rail-index {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--step-2);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    /* Ölçek işareti etkisi boyut kontrastından gelir. Kontur (transparent +
       text-stroke) denendi ve bırakıldı: 1:1 kontrast oranı AA'yı geçmiyor. */
    color: var(--ink-muted);
  }

  .s-service__block-body {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
  }

  @media (min-width: 900px) {
    /* Izgara yalnızca ray taşıyan bölümlere uygulanır. Şablondan gelen bir
       bölümde ray yoksa çocukları tek tek kolonlara düşer ve ezişir. */
    .s-service__block:has(.s-service__rail) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gutter);
    }

    .s-service__rail {
      grid-column: 1 / span 3;
      position: sticky;
      top: calc(64px + var(--space-6));
      padding-block-end: var(--space-6);
    }

    .s-service__rail-index {
      font-size: var(--step-4);
    }

    .s-service__block-body {
      grid-column: 5 / span 8;
    }
  }

  /* --- İddia ---------------------------------------------------------------
     Başlık soldan dokuz kolon, mono not sağ kenarda daralan bir sütun. */
  @media (min-width: 900px) {
    .s-service__claim {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gutter);
      align-items: end;
    }

    .s-service__claim-text {
      grid-column: 1 / span 8;
      max-width: none;
      font-size: var(--step-6);
    }

    .s-service__claim-note {
      grid-column: 10 / span 3;
      margin: 0;
      max-width: none;
      padding-inline-start: var(--space-4);
      border-inline-start: 1px solid var(--ink);
    }
  }

  /* --- Karşıtlık -----------------------------------------------------------
     Satırlar zig-zag: yaygın yaklaşım yukarıda ve soluk, bizimki aşağıda ve
     ağır. Aradaki dikey çizgi gözü aşağı taşır. */
  .s-service__contrast-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    grid-template-areas:
      "index common"
      ".     ours";
    align-items: baseline;
    gap: var(--space-3) var(--space-4);
    padding-block: var(--space-6);
    border-block-end: 1px solid var(--line);
  }

  .s-service__contrast-index {
    grid-area: index;
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    color: var(--ink-muted);
  }

  .s-service__contrast-common {
    grid-area: common;
    font-size: var(--step-1);
  }

  .s-service__contrast-ours {
    grid-area: ours;
    position: relative;
    padding-inline-start: var(--space-5);
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }

  /* Yaygın yaklaşımdan bizimkine inen dirsek. */
  .s-service__contrast-ours::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0.15em auto;
    inline-size: var(--space-3);
    block-size: 0.7em;
    border-inline-start: 1px solid var(--ink);
    border-block-end: 1px solid var(--ink);
  }

  /* --- Kapsam --------------------------------------------------------------
     Düz liste yerine hairline hücre ızgarası; her hücre kendi indeksini taşır. */
  .s-service__scope {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-block-start: 1px solid var(--ink);
  }

  .s-service__scope-item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    min-width: 0;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-5) 0;
    border-block-end: 1px solid var(--line);
  }

  .s-service__scope-index {
    grid-row: span 2;
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--step-1);
    line-height: 1;
    color: var(--ink-muted);
  }

  @media (min-width: 720px) {
    .s-service__scope {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--gutter);
    }

    /* Sağ kolondaki hücreler sola bir hairline ile bağlanır. */
    .s-service__scope-item:nth-child(2n) {
      padding-inline-start: var(--gutter);
      border-inline-start: 1px solid var(--line);
    }
  }

  /* --- Süreç ---------------------------------------------------------------
     Dört adım yatay bir ray üzerinde; numaralar dev, aralarındaki çizgi sürekli. */
  .s-service__steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    counter-reset: ec-service-step;
  }

  .s-service__step {
    position: relative;
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-5);
    border-block-end: 1px solid var(--line);
  }

  .s-service__step-num {
    font-family: var(--font-mono);
    font-size: var(--step-4);
    line-height: 1;
    color: var(--ink);
  }

  @media (min-width: 900px) {
    .s-service__steps {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: var(--gutter);
      padding-block-start: var(--space-6);
      border-block-start: 1px solid var(--ink);
    }

    .s-service__step {
      padding-block: 0;
      border-block-end: 0;
    }

    /* Adımlar arası bağlantı: rayın üstünde küçük bir çentik. */
    .s-service__step::before {
      content: "";
      position: absolute;
      inset-block-start: calc(var(--space-6) * -1);
      inset-inline-start: 0;
      inline-size: 1px;
      block-size: var(--space-4);
      background: var(--ink);
    }
  }

  /* --- Rakam bandı ---------------------------------------------------------
     Üç eşit kolon yerine hiyerarşi: ilk rakam baskın. */
  @media (min-width: 900px) {
    .s-service__stats .s-stats__list {
      grid-template-columns: 1.6fr 1fr 1fr;
    }

    .s-service__stats .s-stats__item:first-child .s-stats__value {
      font-size: var(--step-6);
    }
  }

  /* --- Öne çıkan vaka ------------------------------------------------------
     Metrik gövdenin üstüne biner; sayfadaki tek taşma bu. */
  @media (min-width: 900px) {
    .s-service__case {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gutter);
    }

    .s-service__case-label {
      grid-column: 1 / -1;
    }

    .s-service__case-figure {
      grid-column: 1 / span 7;
    }

    .s-service__case-body {
      grid-column: 8 / span 5;
      align-self: end;
      max-width: none;
    }

    .s-service__case-metric {
      font-size: clamp(56px, 7vw, 132px);
    }
  }

  /* --- Neden biz -----------------------------------------------------------
     Prensip indeksleri de aynı mono ölçek diline uyar. */
  .s-service__block-body .s-principles__index {
    font-size: var(--step-1);
    color: var(--ink-muted);
  }
}

@layer sections {
  /* =========================================================================
     DİKEY RİTİM
     Bölümlerin çoğu core/post-content'in .entry-content sarmalayıcısı içinde
     durur. Çekirdek düzen CSS'i bu temada kapalı olduğu için o sarmalayıcı
     çocuklarına boşluk vermez ve bölümler birbirine yapışırdı. Ritim burada
     tek yerden kurulur: bölümler arası sabit bir aralık, vurgulu bölümlerde
     ise ağırlığıyla orantılı iç dolgu.
     ========================================================================= */

  .s-service__body > .entry-content {
    display: grid;
    gap: var(--space-9);
    align-content: start;
  }

  /* Künye şeridi başlığın parçasıdır; araya ritim boşluğu girmez. */
  .s-service__head {
    padding-block-end: var(--space-6);
  }

  .s-service__body {
    padding-block-start: 0;
  }

  .s-service__strip {
    margin-block-start: 0;
    padding-block-start: var(--space-5);
  }

  /* Vurgulu bölümlerin iç dolgusu: dışarıdaki ritim zaten ayırıyor, bu yüzden
     dolgu yalnızca kendi çizgilerinden ve zemininden uzak durmak içindir. */
  .s-service__claim {
    padding-block: var(--space-8);
  }

  .s-service__case {
    padding-block-start: var(--space-8);
    padding-block-end: 0;
  }

  .s-service__cta {
    padding: var(--space-8);
  }

  @media (max-width: 900px) {
    /* Ritim mobilde bir kademe daralır; iki sarmalayıcı da aynı ölçeği
       kullanmalı, yoksa son bölümler geniş aralıkta kalır. */
    .s-service__body,
    .s-service__body > .entry-content {
      gap: var(--space-7);
    }

    .s-service__claim {
      padding-block: var(--space-7);
    }

    .s-service__cta {
      padding: var(--space-7);
    }
  }
}