/* ==========================================================================
   Ana sayfa · v3 katmanı
   --------------------------------------------------------------------------
   home.css'in ÜSTÜNE yüklenir; onu değiştirmez, yalnızca v3 tasarımının
   getirdiği kuralları ekler. Böylece bir bölüm geri alınmak istendiğinde
   ilgili blok buradan silinir, home.css'e dokunulmaz.

   Bu dosyadaki tek bölüm şimdilik HERO'dur (01). Sıradaki bölümler
   geldikçe aynı dosyaya kendi başlıklarıyla eklenecek.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · HERO — tam genişlik, tam yükseklik, iki slayt

   Değişen kurgu: hero artık sayfanın içinde bir kutu değil, ekranı kaplayan
   bir giriş. Panel kenara kadar akar (wrap sınırı ve köşe yuvarlaması sıfır),
   yüksekliği görünür alana oturur. İçerik üç satıra dizilir:
   slogan · kartlar · slayt gezinmesi.
   -------------------------------------------------------------------------- */

.hero { padding-block: 0; }

/* Kenara kadar akan panel: wrap'in genişlik sınırı ve iç boşluğu kalkar. */
.hero > .wrap {
  max-width: none;
  padding-inline: 0;
}

.hero .frame-blue--flush { border-radius: 0; }

.hero .frame-blue--flush .panel-dark {
  border-radius: 0;
  /* svh desteklemeyen tarayıcı için yedek. */
  min-height: 100vh;
  min-height: 100svh;
  /* Sabit başlık içeriği örtmesin. */
  padding-top: clamp(88px, 10vh, 128px);
  justify-content: space-between;
}

@media (max-width: 620px) {
  .hero .frame-blue--flush .panel-dark { border-radius: 0; }
}

/* --- Arka plan hareketi kapatıldı ------------------------------------------
   Önceki turda hero görseline üç ayrı hareket eklenmişti: 32 saniyelik
   yavaş yakınlaşma (res-hero-yaklas), tarama çizgileri (res-hero-tarama)
   ve aşağı süzülen veri hattı (res-hero-akis). Panel tam ekrana çıkıp
   slayta dönünce bu sürekli hareket okumayı zorlaştırdı; kapatıldı.

   Kurallar components.css'te duruyor, buradan geçersiz kılınıyor —
   hareket geri istenirse bu blok silinir, başka dosyaya dokunulmaz.
   -------------------------------------------------------------------------- */

.hero .panel-dark.has-media .panel-dark__media {
  animation: none;
  transform: none;
}

.hero .panel-dark.has-media::before,
.hero .panel-dark.has-media::after {
  content: none;
  animation: none;
}

/* --- Slayt katmanları -----------------------------------------------------
   Aynı hücreyi paylaşan slaytlar üst üste binerler; yalnızca .is-active
   olan görünür. Yükseklik en uzun slayta göre sabit kaldığı için geçişte
   sayfa zıplamaz.
   ------------------------------------------------------------------------ */

.hero__top-slot,
.hero__slider,
.hero__leads,
.hero__cards,
.hero__slogan .hero__actions { display: grid; }

.hero__top-slot > [data-slide],
.hero__slider > [data-slide],
.hero__leads > [data-slide],
.hero__cards > [data-slide],
.hero__actions > [data-slide] {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}

.hero__top-slot > [data-slide].is-active,
.hero__slider > [data-slide].is-active,
.hero__leads > [data-slide].is-active,
.hero__cards > [data-slide].is-active,
.hero__actions > [data-slide].is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__top-slot > [data-slide],
  .hero__slider > [data-slide],
  .hero__leads > [data-slide],
  .hero__cards > [data-slide],
  .hero__actions > [data-slide] {
    transform: none;
    transition: opacity .01s linear, visibility .01s linear;
  }
}

/* Başlık artık mutlak konumlu değil: slider bir grid, başlıklar hücreyi
   paylaşır. home.css'teki .hero__title absolute kuralını geçersiz kılar. */
.hero__slider {
  position: static;
  min-height: 0;
  margin-bottom: 12px;
  font-size: var(--fs-hero);
}

.hero__slider > .hero__title {
  position: static;
  inset: auto;
}

.hero .hero__title {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
}

.hero .hero__title:not(.is-active) { pointer-events: none; }

/* Üst etiket: slaytın rengi vurgulu. */
.hero__kicker--accent {
  color: #7ea9e8;                                        /* yedek */
  color: color-mix(in oklch, var(--c-primary) 42%, white);
}

.hero__slogan .hero__lead { margin-top: 0; }
.hero__slogan .hero__actions {
  margin-top: 18px;
  justify-items: start;
}

/* --- Üç satırlı yerleşim -------------------------------------------------- */

.hero__grid--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  grid-template-rows: auto auto auto;
  align-items: start;
  align-content: start;
  row-gap: 0;
  flex: 1;
  margin-top: calc(-1 * clamp(22px, 3vw, 40px) + 4px);
}

.hero__grid--split > .hero__slogan { grid-column: 1; grid-row: 1; }

.hero__grid--split > .hero__cards {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: clamp(-28px, -2.4vw, -12px);
  padding-inline: 0;
}

@media (max-width: 900px) {
  .hero__grid--split { grid-template-columns: minmax(0, 1fr); }
  .hero__grid--split > .hero__slogan,
  .hero__grid--split > .hero__cards { grid-column: 1; }
  .hero__grid--split > .hero__cards { grid-row: auto; margin-top: 18px; }
}

/* --- Kart seti ------------------------------------------------------------ */

.hero__cards-set {
  display: flex;
  flex-direction: row;
  gap: 14px;
}

.hero__cards-set .hero__card {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.hero__cards-set .hero__card-big,
.hero__cards-set .hero__card-text,
.hero__cards-set .hero__card-small {
  max-width: none;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/*
 * HER İKİ KART DA CAM (v3). home.css'te birinci kart açık zeminliydi
 * (.hero__card--stat), ikincisi camdı. Slaytta ikisi aynı yerde nöbetleşe
 * göründüğü için renk farkı "kart değişti" değil "sayfa değişti" gibi
 * okunuyordu; tasarım ikisini de cama çekiyor.
 */
.hero__cards .hero__card {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hero__cards .hero__card {
    background: rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
  }
}

.hero__cards .hero__card-big { color: #fff; }

.hero__cards .hero__card-text,
.hero__cards .hero__card-small { color: rgba(255, 255, 255, .82); }

.hero__cards .hero__card-small { font-size: 12px; line-height: 1.4; }

@media (max-width: 720px) {
  .hero__cards-set { flex-direction: column; }
}

/* --- Slayt gezinmesi ------------------------------------------------------ */

.hero__nav {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

.hero__nav-btns { display: flex; gap: 8px; }

.hero__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}

.hero__nav-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--c-text);
  transform: translateY(-1px);
}

.hero__nav-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.hero__progress {
  flex: none;
  width: 220px;
  max-width: 40vw;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
}

.hero__progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}

/* --------------------------------------------------------------------------
   01b · Hero altı not bandı

   Eskiden hero panelinin içindeydi (koyu zeminde). Artık panelin altında,
   açık zeminde duran ayrı bir bant.
   -------------------------------------------------------------------------- */

.hero-note-band { padding: clamp(40px, 6vw, 72px) 0 clamp(8px, 1vw, 16px); }

.hero-note-band .hero__alt {
  max-width: 62ch;
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text-70);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   02 · YÖNTEM — dört kart tek ızgarada

   12 sütunluk ızgara; dört kart ve başlık hücresi farklı boyutlarda oturur.
   Kartlar tek kalıbı paylaşır: üstte etiket, altta metin + çağrı. Görselli
   kartlarda fotoğraf kartın tamamını kaplar, üstüne okunabilirlik için
   koyudan açığa geçen bir örtü biner.
   -------------------------------------------------------------------------- */

.ym-stack {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}

.ym-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2vw, 24px);
  border-radius: 22px;
  overflow: hidden;
  /* Negatif z-index'li görsel ve örtü kartın dışına taşmasın. */
  isolation: isolate;
}

.ym-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.ym-card--media { color: #fff; }

.ym-card--media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .42) 0%,
    rgba(0, 0, 0, .10) 38%,
    rgba(0, 0, 0, .72) 100%);
}

.ym-card--blue { background: var(--c-primary); color: #fff; }
.ym-card--grey { background: var(--c-surface, #f1f3f4); color: var(--c-text); }

.ym-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ym-card__label,
.ym-card__name {
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ym-card--media .ym-card__label,
.ym-card--media .ym-card__name { color: rgba(255, 255, 255, .92); }
.ym-card--blue .ym-card__label { color: rgba(255, 255, 255, .7); }
.ym-card--grey .ym-card__label { color: var(--c-text-45); }

.ym-card__foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.ym-card__text {
  font-size: var(--fs-base);
  line-height: 1.45;
  text-wrap: pretty;
}

.ym-card--media .ym-card__text { color: rgba(255, 255, 255, .92); }
.ym-card--grey .ym-card__text { color: var(--c-text-70); }

.ym-head {
  grid-column: 10 / span 3;
  grid-row: 1;
  align-self: start;
  padding-top: 4px;
}

.ym-head__title {
  margin-top: 14px;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

/* Yerleşim: masaüstü */
.ym-card--a { grid-column: 1 / span 4;  grid-row: 1 / span 3; min-height: 620px; }
.ym-card--b { grid-column: 5 / span 5;  grid-row: 1 / span 2; min-height: 420px; }
.ym-card--c { grid-column: 10 / span 3; grid-row: 2;          min-height: 260px; }
.ym-card--d { grid-column: 5 / span 8;  grid-row: 3;          min-height: 260px; }

@media (max-width: 1000px) {
  .ym-head    { grid-column: 1 / span 12; grid-row: 1; }
  .ym-card--a { grid-column: 1 / span 6;  grid-row: 2 / span 2; min-height: 460px; }
  .ym-card--b { grid-column: 7 / span 6;  grid-row: 2; }
  .ym-card--c { grid-column: 7 / span 6;  grid-row: 3; }
  .ym-card--d { grid-column: 1 / span 12; grid-row: 4; }
}

@media (max-width: 640px) {
  .ym-head    { grid-column: 1 / span 12; grid-row: 1; }
  .ym-card--a { grid-column: 1 / span 12; grid-row: 2; min-height: 320px; }
  .ym-card--b { grid-column: 1 / span 12; grid-row: 3; min-height: 320px; }
  .ym-card--c { grid-column: 1 / span 12; grid-row: 4; min-height: 260px; }
  .ym-card--d { grid-column: 1 / span 12; grid-row: 5; min-height: 260px; }
}

/* --------------------------------------------------------------------------
   03 · FARKIMIZ — giriş ve üç kart tek şeritte

   Giriş bloğu ızgaranın ilk sütunu; üç kart yanına diziliyor. Kartlar
   `display: contents` sayesinde kendi kaplarından çıkıp doğrudan şeridin
   hücrelerine oturur.
   -------------------------------------------------------------------------- */

.fark-band {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  align-items: stretch;
}

.fark-band__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(8px, 1.4vw, 18px) clamp(12px, 1.6vw, 22px) clamp(8px, 1.4vw, 18px) 0;
}

.fark-band__intro .pill { align-self: flex-start; }

.fark-band__title {
  font-size: var(--fs-2xl);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.fark-band__note {
  margin-top: auto;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-66);
  text-wrap: pretty;
}

.fark-band__cards { display: contents; }

.fark-band .fark-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 64px);
  min-height: 340px;
  padding: clamp(18px, 2vw, 26px);
  border-radius: 20px;
  background: #fff;
  color: var(--c-text);
  transition: transform var(--t-base);
}

/*
 * components.css'teki .fark-card:hover kartı maviye çeviriyor. Şeritte
 * kartların rengi zaten farklı (koyu · açık · mavi); üzerine gelince
 * hepsinin maviye dönmesi diziyi bozardı. Renk sabit, yalnızca hafif
 * yükselme kalıyor.
 */
.fark-band .fark-card:hover { background: #fff; color: var(--c-text); transform: translateY(-4px); }
.fark-band .fark-card--dark,
.fark-band .fark-card--dark:hover { background: var(--c-text); color: #fff; }
.fark-band .fark-card--blue,
.fark-band .fark-card--blue:hover { background: var(--c-primary); color: #fff; }

.fark-band .fark-card:hover .fark-card__no,
.fark-band .fark-card:hover .fark-card__title,
.fark-band .fark-card:hover .fark-card__text { color: inherit; }

.fark-band .fark-card__no {
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: inherit;
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

.fark-band .fark-card__title {
  margin-top: 10px;
  font-size: var(--fs-md);
  line-height: 1.25;
  color: inherit;
}

.fark-band .fark-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.fark-band .fark-card__text {
  font-size: 13px;
  line-height: 1.5;
  color: inherit;
  opacity: .82;
  text-wrap: pretty;
}

.fark-band .arrow-btn { flex: none; }
.fark-band .arrow-btn--light { background: #fff; color: var(--c-text); }
.fark-band .arrow-btn--light:hover { background: #fff; color: var(--c-primary); }

@media (max-width: 1080px) {
  .fark-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fark-band__intro { grid-column: 1 / -1; padding-right: 0; }
  .fark-band__note { margin-top: 4px; max-width: 70ch; }
}

@media (max-width: 640px) {
  .fark-band { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   05 · RES DÖNGÜSÜ — dört adım, ortada halka

   Üç sütunlu ızgara: solda iki adım, ortada halka (iki satır boyunca),
   sağda iki adım. 1000 px altında halka üste çıkar, adımlar ikişerli;
   640 px altında hepsi tek sütun.
   -------------------------------------------------------------------------- */

.cyc-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.cyc-head__pill { position: absolute; left: 0; top: 2px; }

.cyc-head__title {
  max-width: 22ch;
  font-size: var(--fs-3xl, var(--fs-2xl));
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.cyc-head__note {
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--c-text-66);
  text-wrap: pretty;
}

.cyc-orbit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(24px, 3vw, 48px) clamp(20px, 3vw, 44px);
  align-items: start;
  margin-top: clamp(28px, 4vw, 56px);
}

.cyc-step { max-width: 34ch; }
.cyc-step--tl { grid-column: 1; grid-row: 1; }
.cyc-step--tr { grid-column: 3; grid-row: 1; }
.cyc-step--bl { grid-column: 1; grid-row: 2; align-self: end; }
.cyc-step--br { grid-column: 3; grid-row: 2; align-self: end; }

.cyc-core {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: grid;
  place-items: center;
  color: var(--c-primary);
}

.cyc-core__svg { width: 100%; max-width: 420px; height: auto; display: block; }

.cyc-core__label {
  position: absolute;
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: center;
  color: var(--c-text-66);
}

.cyc-step__no {
  font-size: clamp(40px, 4.4vw, 62px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.cyc-step__title {
  margin-top: 6px;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
}

.cyc-step__text {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text-66);
  text-wrap: pretty;
}

.cyc-step__out {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--c-primary);
}

@media (max-width: 1000px) {
  .cyc-orbit    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cyc-core     { grid-column: 1 / -1; grid-row: 1; }
  .cyc-step--tl { grid-column: 1; grid-row: 2; }
  .cyc-step--tr { grid-column: 2; grid-row: 2; }
  .cyc-step--bl { grid-column: 1; grid-row: 3; align-self: start; }
  .cyc-step--br { grid-column: 2; grid-row: 3; align-self: start; }
  .cyc-head     { align-items: flex-start; text-align: left; }
  .cyc-head__pill { position: static; }
}

@media (max-width: 640px) {
  .cyc-orbit    { grid-template-columns: minmax(0, 1fr); }
  .cyc-step--tl { grid-column: 1; grid-row: 2; }
  .cyc-step--tr { grid-column: 1; grid-row: 3; }
  .cyc-step--bl { grid-column: 1; grid-row: 4; }
  .cyc-step--br { grid-column: 1; grid-row: 5; }
  .cyc-step     { max-width: none; }
}

/* --------------------------------------------------------------------------
   07b · HİZMETLER — dört kart yan yana

   Kapakta numara, ad, platform satırı ve kapsam etiketleri durur. Üzerine
   gelindiğinde (ya da içeriden bir öğe odaklandığında) alttan özet ve
   kapsam listesi açılır. 640 px altında açılır katman kalıcı olarak
   görünür ve etiketler gizlenir — dokunmatikte "üzerine gelme" yok.
   -------------------------------------------------------------------------- */

.svc-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  min-height: 460px;
  padding: clamp(18px, 1.8vw, 24px);
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-base);
}

.svc-row .svc-card:nth-child(even) { margin-top: clamp(24px, 3vw, 56px); }
.svc-card:hover { transform: translateY(-4px); }

.svc-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.svc-card--dark { background: var(--c-text); color: #fff; }
.svc-card--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.24) 46%, rgba(0,0,0,.66) 100%);
}

.svc-card--light {
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-border-soft);
  box-shadow: 0 18px 44px rgba(32, 33, 36, .10);
}
.svc-card--light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.30) 46%, rgba(255,255,255,.84) 100%);
}

.svc-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.svc-card__no {
  font-size: clamp(38px, 3.6vw, 54px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.svc-card__title {
  margin-top: 8px;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
}

.svc-card__sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  opacity: .7;
}

.svc-card__go { flex: none; }
.svc-card--dark .arrow-btn--light { background: #fff; color: var(--c-text); }
.svc-card--dark .arrow-btn--light:hover { background: #fff; color: var(--c-primary); }

.svc-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }

.svc-tag {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.svc-card--dark .svc-tag { background: #fff; color: var(--c-text); }
.svc-card--light .svc-tag { background: var(--c-text); color: #fff; }

.svc-card__reveal {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 1.8vw, 24px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

.svc-card--dark .svc-card__reveal {
  background: linear-gradient(180deg, rgba(32,33,36,0) 0%, rgba(32,33,36,.94) 22%);
  color: #fff;
}
.svc-card--light .svc-card__reveal {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.96) 22%);
  color: var(--c-text);
}

/* Açıldığında metin seçilebilir olsun diye pointer-events geri veriliyor. */
.svc-card:hover .svc-card__reveal,
.svc-card:focus-within .svc-card__reveal {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.svc-card:hover .svc-card__tags,
.svc-card:focus-within .svc-card__tags { opacity: 0; transition: opacity .2s ease; }

.svc-card__desc {
  font-size: 12.5px;
  line-height: 1.55;
  opacity: .9;
  text-wrap: pretty;
}

.svc-card__scope-label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}

.svc-card__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.45;
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card__reveal { transition: opacity .01s linear; }
  .svc-card:hover { transform: none; }
}

@media (max-width: 1080px) {
  .svc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-row .svc-card:nth-child(even) { margin-top: 0; }
}

@media (max-width: 640px) {
  .svc-row { grid-template-columns: minmax(0, 1fr); }
  .svc-card { min-height: 400px; }
  .svc-card__reveal { opacity: 1; transform: none; pointer-events: auto; }
  .svc-card__tags { display: none; }
}

/* --------------------------------------------------------------------------
   07c · DÖRT ÇALIŞMA KURALI — iki sütun, büyük numara

   Giriş metni üstte tek blok; kartlar sabit iki sütun. Kartın içi de bir
   ızgara: solda numara (iki satır boyunca), sağda başlık ve metin.
   -------------------------------------------------------------------------- */

.values { display: block; }

.values__intro {
  max-width: 70ch;
  margin-bottom: clamp(26px, 3vw, 40px);
}

.val-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  align-items: stretch;
}

.val-row .value-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(18px, 2vw, 28px);
  row-gap: 10px;
  padding: clamp(24px, 2.4vw, 36px);
  border-radius: var(--r-xl, 22px);
  background: #fff;
  color: var(--c-text);
  border: 1px solid rgba(32, 33, 36, .08);
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}

.val-row .value-card:hover {
  background: var(--c-primary);
  color: #fff;
  transform: translateY(-3px);
}

.val-row .value-card__no {
  grid-row: span 2;
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 500;
  line-height: .9;
  color: var(--c-primary);
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

.val-row .value-card__title {
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: inherit;
  text-wrap: balance;
}

.val-row .value-card__text {
  grid-column: 2;
  font-size: var(--fs-base);
  line-height: var(--lh-snug, 1.6);
  color: var(--c-text-66);
  opacity: 1;
  text-wrap: pretty;
}

.val-row .value-card:hover .value-card__no,
.val-row .value-card:hover .value-card__text { color: #fff; }
.val-row .value-card:hover .value-card__no { opacity: .8; }

@media (max-width: 820px) {
  .val-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .val-row .value-card { grid-template-columns: minmax(0, 1fr); }
  .val-row .value-card__no { grid-row: auto; }
  .val-row .value-card__text { grid-column: 1; }
}

/* --------------------------------------------------------------------------
   10 · MÜŞTERİ LOGOLARI — kayan şerit

   Her logo kendi beyaz çerçevesinde, sabit yükseklikte. Şerit soldan sağa
   akar; liste iki kez basıldığı için kopya başa geldiğinde döngü fark
   edilmez. Kenarlarda maske ile silinme var, logolar kesik görünmesin.

   Bölüm ancak Site Ayarları'na logo satırı girildiğinde basılır
   (template-parts/referans-logolari.php) — boş kutu göstermiyoruz.
   -------------------------------------------------------------------------- */

.logo-slider {
  --logo-bosluk: clamp(14px, 1.6vw, 24px);
  position: relative;
  margin-top: clamp(24px, 3vw, 40px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.logo-slider__track {
  display: flex;
  gap: var(--logo-bosluk);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: logo-kaydir var(--logo-sure, 30s) linear infinite;
}

/* Okumak isteyen kullanıcıyı kesme: üzerine gelince ve odak içerideyken dur. */
.logo-slider:hover .logo-slider__track,
.logo-slider:focus-within .logo-slider__track { animation-play-state: paused; }

.logo-wall__item {
  flex: 0 0 clamp(150px, 18vw, 220px);
  display: grid;
  /*
   * `place-items: center` KULLANILMIYOR. Ortalama, ögeyi içeriğine göre
   * boyutlandırıyor; o durumda görselin `height: 100%` kuralı çözülemiyor
   * ve görsel en-boy oranına göre kutudan taşıyordu. Varsayılan `stretch`
   * ile öge hücreyi tam kaplıyor, logo `object-fit: contain` sayesinde
   * içine ortalanarak sığıyor.
   */
  place-items: stretch;
  /*
   * Satır AÇIKÇA sabitleniyor. Otomatik satırda yükseklik içerikten
   * hesaplanıyor, içerik de görselin en-boy oranından: kutu logoya göre
   * uzuyordu. minmax(0, 1fr) satırı kabın kesin yüksekliğine bağlar,
   * görsel de o satıra sığar.
   */
  grid-template-rows: minmax(0, 1fr);
  text-align: center;
  height: clamp(96px, 9vw, 132px);
  min-height: 0;
  padding: clamp(14px, 1.6vw, 22px);
  border: 1px solid rgba(32, 33, 36, .10);
  border-radius: var(--r-lg, 18px);
  background: #fff;
}

/* Logo görseli yoksa marka adı yazıyla basılıyor; o metin ortalanır. */
.logo-slider .logo-metin { align-self: center; }

/*
 * components.css'te logo yüksekliği 38 px ile sınırlı — zeminsiz şerit
 * içindi. Çerçeveli kutuda logo kutuyu doldurmalı; oran korunarak
 * içeri sığdırılıyor.
 */
.logo-slider .logo-img {
  /*
   * ÖLÇÜ KUTUDAN GELİR, GÖRSELDEN DEĞİL.
   *
   * Burada `width/height: auto` kullanılamaz: görsel `loading="lazy"` ve
   * henüz yüklenmemişken doğal ölçüsü yok, auto ile 0×0 hesaplanıyor.
   * 0 boyutlu öge de tembel yükleme eşiğini tetiklemiyor — logo hiç
   * yüklenmiyordu. Kutuyu doldurup `contain` ile sığdırınca ölçü yükleme
   * durumundan bağımsız oluyor, oran da korunuyor.
   */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/*
 * Yarı yol + yarım boşluk: şeritte 2N öge ve 2N-1 boşluk var; tam yarıya
 * kaydırmak yarım boşluk kadar kayma bırakırdı.
 */
@keyframes logo-kaydir {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--logo-bosluk) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-slider { overflow-x: auto; }
  .logo-slider__track { animation: none; }
}

/* --------------------------------------------------------------------------
   18 · İLETİŞİM — form açılır pencerede

   Sağ sütunda artık form değil, formu açan çağrı duruyor. Pencere
   `hidden` ile kapalı başlar; JavaScript yoksa hiç görünmez ve düğme
   iletişim sayfasına giden normal bir bağlantı olarak çalışır.
   -------------------------------------------------------------------------- */

.contact-split__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.contact-split__open { align-self: flex-start; }

.contact-split__cta-note {
  font-size: var(--fs-sm);
  opacity: .65;
}

.res-modal { display: none; }

.res-modal.is-open {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}

.res-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 21, 23, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.res-modal__panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(88vh, 900px);
  overflow: auto;
  background: #fff;
  color: var(--c-text);
  border-radius: var(--r-lg, 18px);
  box-shadow: 0 30px 80px rgba(20, 21, 23, .35);
}

.res-modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px);
  background: #fff;
  border-bottom: 1px solid rgba(32, 33, 36, .10);
}

.res-modal__title { font-size: var(--fs-lg); letter-spacing: -0.02em; }

.res-modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(32, 33, 36, .14);
  border-radius: var(--r-pill, 999px);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base);
}

.res-modal__close:hover { background: var(--c-text); color: #fff; }
.res-modal__close:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.res-modal__body { padding: clamp(20px, 2.4vw, 32px); }

@media (max-width: 640px) {
  .res-modal.is-open { padding: 0; align-items: stretch; }
  .res-modal__panel { max-height: 100vh; border-radius: 0; }
}