/*
 * Blok temasına özgü köprü katmanı.
 *
 * sections/*.css dosyaları statik tasarımdan değişmeden gelir; bu dosya yalnızca
 * çekirdek blokların ürettiği sarmalayıcı farklarını kapatır ve statik HTML'de
 * PHP döngüsünden gelen sıra numaralarını CSS sayaçlarına devreder.
 */

/* Çekirdek blokların kendi düzen kancaları bu temada kullanılmaz. */
.wp-block-group,
.wp-block-post-template,
.wp-block-query,
.wp-block-columns,
.wp-block-column {
  margin-block: 0;
}

.wp-block-post-template {
  list-style: none;
  padding-inline-start: 0;
}

/* --- Sıra numaraları -------------------------------------------------------
 * Statik HTML'de "01", "02" … PHP döngü indeksinden basılıyordu. Query Loop
 * indeks veremediği için numara boş bırakılır ve buradan sayaçla yazılır.
 */

/* Hizmet numarası küme boyunca değil sayfa boyunca artar: sayaç bölümde
   bir kez sıfırlanır, küme listelerinde sıfırlanmaz. */
.s-services,
.s-services-hub {
  counter-reset: ec-service;
}

.s-services__item {
  counter-increment: ec-service;
}

.s-services__num:empty::before {
  content: counter(ec-service, decimal-leading-zero);
}

.s-process__list {
  counter-reset: ec-step;
}

.s-process__step {
  counter-increment: ec-step;
}

.s-process__step-num:empty::before {
  content: counter(ec-step, decimal-leading-zero);
}

.s-service__steps {
  counter-reset: ec-service-step;
}

.s-service__step {
  counter-increment: ec-service-step;
}

.s-service__step-num:empty::before {
  content: counter(ec-service-step, decimal-leading-zero);
}

.s-principles__list {
  counter-reset: ec-principle;
}

.s-principles__item {
  counter-increment: ec-principle;
}

.s-principles__index:empty::before {
  content: counter(ec-principle, decimal-leading-zero);
}

.s-agency__principles {
  counter-reset: ec-agency-principle;
}

.s-agency__principle {
  counter-increment: ec-agency-principle;
}

.s-agency__principle-no:empty::before {
  content: counter(ec-agency-principle, decimal-leading-zero);
}

/* --- Kart boyutları --------------------------------------------------------
 * Statik HTML'de her karta s-works__card--full / --half / --third sınıfı
 * PHP döngü indeksinden veriliyordu. Query Loop kart başına sınıf veremediği
 * için boyut sıra konumundan türetilir. Kırılma noktaları s-works.css ile
 * birebir aynıdır: 900px altında yarım ve üçte bir kartlar tam satıra,
 * 560px altında ızgara tek kolona döner.
 */

.s-works__grid > * {
  grid-column: span 4;
}

.s-works__grid--featured > :nth-child(1) {
  grid-column: span 12;
}

.s-works__grid--featured > :nth-child(2),
.s-works__grid--featured > :nth-child(3) {
  grid-column: span 6;
}

/* Tam genişlik kartın başlığı bir kademe büyüktür. */
.s-works__grid--featured > :nth-child(1) .s-works__name {
  font-size: var(--step-3);
}

@media (max-width: 900px) {
  .s-works__grid > *,
  .s-works__grid--featured > :nth-child(2),
  .s-works__grid--featured > :nth-child(3) {
    grid-column: span 12;
  }
}

@media (max-width: 560px) {
  .s-works__grid > *,
  .s-works__grid--featured > :nth-child(1),
  .s-works__grid--featured > :nth-child(2),
  .s-works__grid--featured > :nth-child(3) {
    grid-column: span 1;
  }
}

/* --- Tüm kartı tıklanabilir yapan bağlantı --------------------------------
 * Statik HTML'de kart içeriğinin tamamı tek bir <a> ile sarılıydı. Çekirdek
 * bloklar birden çok bloğu bağlantıyla saramadığı için kart bir grup olarak
 * kurulur ve içindeki tek bağlantı kartın tamamına yayılır.
 */

.s-hero__metric,
.s-works__card,
.s-journal__card,
.s-journal-archive__card,
.s-services__item,
.s-notfound__links li,
.s-contact__channel,
.s-case__next {
  position: relative;
}

.ec-stretch {
  color: inherit;
  text-decoration: none;
}

.ec-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Site başlığı bloğunun sarmalayıcısı düzen almaz; stil bağlantıdadır. */
.l-header__logo-wrap {
  margin: 0;
}

/* --- Query Loop kartları ---------------------------------------------------
 * Statik HTML'de kart içeriği tek bir .s-works__link içindeydi. Çekirdek
 * bloklarda başlık ve terim kendi bağlantılarını basar; görünüm aynı kalsın
 * diye o bağlantılar rengi devralır ve başlık bağlantısı kartın tamamına yayılır.
 */

.s-works__card,
.s-journal-archive__card {
  padding-block-end: var(--space-5);
}

.s-works__sector a,
.s-works__name a,
.s-journal__title a,
.s-journal-archive__link,
.s-services__name a,
.s-article__toc-link {
  color: inherit;
  text-decoration: none;
}

.s-works__name a::after,
.s-journal__title a::after,
.s-journal-archive__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Öne çıkarılan görsel bloğu figürü kendi bağlantısını sarar. */
.s-works__media a,
.s-journal__media a {
  display: block;
}

/* Terim bloğu <div> basar; tasarımda satır içi bir etiketti. */
.s-works__sector,
.s-journal__category,
.s-journal-archive__category,
.s-article__meta .wp-block-post-terms {
  display: block;
}

/* Alıntı bloğu metni bir <p> içine sarar; tasarımda satırın kendisi metindi. */
.s-services__desc p,
.s-journal-archive__excerpt p,
.s-service__lede p,
.s-case__lede p,
.s-article__lede p {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* --- Hizmet satırı ---------------------------------------------------------
 * Statik HTML'de satır ızgarası .s-services__link (tek <a>) üzerindeydi.
 * Query Loop satırı doğrudan <li class="s-services__item"> içine bastığı için
 * aynı ızgara buraya taşınır; alt öğelerin grid-area tanımları değişmez.
 */

.s-services__item {
  display: grid;
  grid-template-columns: 3.2rem var(--icon-tile-sm) 1fr 2rem;
  grid-template-areas:
    "num icon name  arrow"
    ".   .    desc  desc";
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  padding: var(--space-4) var(--gutter);
}

@media (min-width: 56.25rem) {
  .s-services__item {
    grid-template-columns: 5rem minmax(14rem, 20ch) 1fr 3rem;
    grid-template-areas: "num name desc arrow";
    padding-block: var(--space-5);
  }
}


/* --- Paragrafa sarılı bağlantılar ------------------------------------------
 * Tasarımda bağımsız <a> olan öğeler blok editöründe paragrafa sarılır.
 * Sarmalayıcı düzenden çıkarılır, böylece bağlantı üst kabın doğrudan
 * öğesi gibi davranır.
 */

.ec-carrier,
.s-services-hub__cta-links {
  display: contents;
}

/* --- İletişim kanalı satırı ------------------------------------------------
 * Tasarımda satır ızgarası .s-contact__channel-link (tek <a>) üzerindeydi ve
 * etiket ile değeri iki uca yayıyordu. Bloklarda etiket ve değer ayrı
 * paragraflardır; düzen satırın kendisine taşınır, bağlantı yalnızca
 * tıklama alanını kartın tamamına yayar.
 */

.s-contact__channel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-3);
  border-radius: var(--radius);
  transition: background-color 120ms linear;
}

.s-contact__channel:hover,
.s-contact__channel:focus-within {
  background-color: var(--paper-2);
}

@media (prefers-reduced-motion: reduce) {
  .s-contact__channel {
    transition: none;
  }
}

/* --- Satır içi öğeler ------------------------------------------------------
 * Tasarımda <span> olan bu öğeler blok editöründe paragraf olarak kurulur;
 * paragrafın varsayılan blok boşluğu satır yüksekliğini bozmasın diye sıfırlanır.
 */

.s-hero__metric-label,
.s-hero__metric-value,
.s-hero__metric-context,
.s-stats__value,
.s-process__step-num,
.s-process__output,
.s-agency__principle-no,
.s-story__year,
.s-principles__index,
.s-contact__channel-label,
.s-contact__channel-value,
.s-service__scope-name,
.s-service__scope-desc,
.s-service__step-num,
.s-service__step-name,
.s-service__step-out,
.s-case__metric-value,
.s-case__metric-label,
.s-services__num,
.s-services__arrow,
.s-services__desc,
.s-services__name {
  margin: 0;
}

/* --- Hizmet landing page ---------------------------------------------------
 * Hizmet gövdesi tek bir u-container içinde değil, blok başına kapsanır;
 * böylece rakam bandı tam genişlikte akar. Bant .s-stats işaretlemesini
 * paylaşır, yalnızca dış boşluğu bölüm ızgarasına uyarlanır.
 */

.s-service__body {
  align-content: start;
}

.s-service__stats {
  /* blocks.css katmansızdır ve en son yüklenir; bu yüzden s-stats.css'teki
     .s-stats.u-invert kuralını burada eziyoruz. Bandın dikey ritmi
     s-service-lp.css'teki ölçekle aynı kademede tutulur. */
  padding-block: var(--space-9);
}

@media (max-width: 900px) {
  .s-service__stats {
    padding-block: var(--space-8);
  }
}

/* "Neden biz" listesi prensip işaretlemesini paylaşır; bölüm içinde
   sayaç yeniden başlar. */
.s-service__block .s-principles__list {
  counter-reset: ec-principle;
}

/* Landing page girişinde birden çok paragraf olabilir; statik tasarımda
   tek paragraf olduğu için .s-service__text boşluksuzdu. */
.s-service__text + .s-service__text {
  margin-block-start: var(--space-4);
}