/* ==========================================================================
   Res. digital — ana sayfa
   Yalnızca ana sayfada yüklenir (functions.php → is_front_page()).

   Tasarımın görsel dili dört tekrar eden öğeden oluşuyor; hepsi burada
   bileşen olarak tanımlı:
     .frame-blue      mavi dış çerçeve
     .panel-dark      koyu iç panel + kesikli yer tutucu çerçevesi
     .notch           köşeyi kesen renkli blok
     .arrow-btn       dairesel ok butonu
   ========================================================================== */

/* ==========================================================================
   NOT — paylaşılan bileşenler burada DEĞİL

   .frame-blue · .panel-dark · .notch · .arrow-btn · .pill · .head-row
   .stat-inline · .tick-list · .band-blue · .figure-dark · .placeholder-label
   components.css içinde tanımlıdır; iç sayfalar da aynı görsel dili
   kullanıyor ve components.css her sayfada yükleniyor.

   Burada YALNIZCA ana sayfaya özel bölümler kalır. İki yerde tanımlamak,
   ileride birinin değişip diğerinin kalmasına ve ana sayfanın iç
   sayfalardan sessizce ayrışmasına yol açardı.
   ========================================================================== */


/* ==========================================================================
   1. HERO
   ========================================================================== */

.hero { padding-block: 8px clamp(40px, 6vw, 72px); }

.hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.hero__top-slot { padding: clamp(18px, 2.4vw, 26px) 0 0 clamp(18px, 3vw, 44px); }

.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(20px, 3vw, 44px);
  align-items: end;
  padding-inline: clamp(18px, 3vw, 44px);
}

.hero__slider {
  position: relative;
  min-height: 3.25em;
  font-size: var(--fs-hero);
}

/*
 * Slaytlar üst üste yığılır. Geçiş SIRALI: çıkan slayt önce kaybolur,
 * gelen 0.18s sonra girer. Aynı anda ikisi de görünür olsaydı iki dev
 * başlık okunur biçimde üst üste binerdi.
 */
.hero__title {
  position: absolute;
  inset: 0;
  margin: 0;
  font-size: inherit;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.hero__title.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: .18s;
}

/*
 * Sabit başlık varyantı — dönen slayt DEĞİL.
 *
 * .hero__title slayt yığını için position:absolute ve opacity:0 ile
 * kurulmuş. Sabit başlıkta yığın yok: tek öğe akışta durur ve görünür
 * olur. Aynı sınıfı paylaşıyorlar çünkü tipografi ikisinde de aynı.
 */
.hero__title--fixed {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  /*
   * Punto BURADA verilmek zorunda. Dönen varyantta boyut sarmalayıcı
   * .hero__slider'dan geliyordu (.hero__title { font-size: inherit }).
   * Sabit başlıkta o sarmalayıcı yok; devralınacak değer gövde
   * metniydi ve başlık gövde puntosunda çıkıyordu.
   */
  font-size: var(--fs-hero);
  max-width: 20ch;
}

/* Üst etiket: kategoriyi ilk saniyede söyler, slogan bu yükü taşımaz. */
.hero__kicker {
  margin-bottom: 14px;
  font-size: 12.5px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-on-dark-82);
}

/* Alt satır H1 ile aynı sütunda, ondan bir kademe küçük. Hero'nun
   sağındaki paragrafla (.hero__lead) karışmasın diye ayrı sınıf. */
.hero__alt {
  margin-top: 20px;
  max-width: 54ch;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: var(--lh-body);
  color: var(--c-on-dark-94);
}

.hero__line { display: block; }

/* İçi boş kontur yalnızca dekoratif ikinci satırda; ana mesaj hep
   dolgulu satırlarda durur (Ekip Toplantısı Raporu madde 18). */
.hero__line--outline {
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.72);
}

.hero__lead {
  max-width: 42ch;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: var(--lh-body);
  color: var(--c-on-dark-94);
}

.hero__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.hero__dots { display: flex; gap: 7px; }

/* Dokunma hedefi 44×44; görsel çubuk küçük kalır (Final Rapor A2) */
.hero__dot {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hero__dot-bar {
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  transition: background var(--t-base), width var(--t-base);
}
.hero__dot:hover .hero__dot-bar { background: #fff; }
.hero__dot.is-active .hero__dot-bar { width: 34px; background: #fff; }

.hero__pause {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--r-pill);
  background: transparent;
  color: #fff;
  font-size: 9px;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.hero__pause:hover { background: #fff; color: var(--c-primary); border-color: #fff; }

.hero__cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 0 clamp(18px, 3vw, 44px) clamp(20px, 2.6vw, 30px);
}
.hero__card {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 20px;
  border-radius: var(--r-lg);
}
.hero__card--stat { background: var(--c-surface); color: var(--c-text); }

/* Cam kart — koyu panelin üzerinde duruyor, hareket etmiyor, tek öğe.
   Bulanıklık burada panelin dokusunu içeri alıyor. */
.hero__card--claim {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hero__card--claim {
    background: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .hero__card--claim {
    background: rgba(255, 255, 255, 0.16) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

.hero__stat {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}
.hero__card-text { max-width: 24ch; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--c-text-70); }
.hero__card-small { font-size: var(--fs-sm); line-height: 1.4; color: var(--c-on-dark-82); }
.hero__card-big { margin-top: 3px; font-size: clamp(16px, 1.9vw, 19px); letter-spacing: -0.02em; color: #fff; }

.btn--ghost-light {
  align-self: start;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
  font-size: 12.5px;
}
.btn--ghost-light:hover { background: #fff; color: var(--c-primary); border-color: #fff; }

/* ==========================================================================
   2. YÖNTEM — üç sütun
   ========================================================================== */

.yontem__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 20px;
  align-items: stretch;
}

.tall-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 9px;
  min-height: 420px;
  padding: 28px;
  border-radius: var(--r-xl);
  overflow: hidden;
}
.tall-card--dark { background: var(--c-text); color: #fff; }
.tall-card--dark::before,
.tall-card--soft::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: var(--r-xl);
  pointer-events: none;
}
.tall-card--soft {
  background: var(--c-primary-soft);
  color: var(--c-text);
  justify-content: flex-start;
}
.tall-card--soft::before { border-color: rgba(32, 33, 36, 0.16); }

/*
 * Yöntem kartlarında arka plan görseli.
 *
 * İki kart iki farklı çözüm istiyor çünkü metin renkleri zıt:
 *   · Koyu kart → beyaz metin. Görsel tam kaplar, %50 opaklıkla
 *     koyu zemine karışır; kontrast fotoğrafın parlaklığına
 *     bırakılmaz.
 *   · Açık mavi kart → koyu metin. Yarı saydam görsel açık zeminde
 *     metnin kontrastını düşürürdü; bu yüzden görsel tam opak ama
 *     yalnızca alt yarıya sabitleniyor. Metin üstte, temiz zeminde
 *     kalır.
 *
 * z-index elle veriliyor: .notch mutlak konumlu ve z-index: 2
 * taşıyor; kapsayıcıya blanket bir `position: relative` vermek onu
 * kırardı.
 */
.tall-card.has-media::before { border-style: solid; border-color: transparent; }
.tall-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tall-card--dark .tall-card__media { opacity: .5; }
.tall-card--soft .tall-card__media {
  inset: auto 0 0 0;
  height: 58%;
}

.tall-card__body { position: relative; z-index: 1; }
.tall-card__title { font-size: 25px; letter-spacing: var(--ls-tight); }
.tall-card__title--blue { color: var(--c-primary); }
.tall-card__text {
  position: relative;
  margin-top: 9px;
  max-width: 24ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.72);
}
.tall-card--soft .tall-card__text { color: rgba(32, 33, 36, 0.72); }

.yontem__mid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.yontem__title {
  margin-top: 18px;
  font-size: clamp(30px, 3.7vw, 50px);
  max-width: 30ch;
}
.yontem__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  flex: 1;
}

.mini-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 230px;
  padding: 28px;
  border-radius: var(--r-xl);
}
.mini-card--blue { background: var(--c-primary); color: #fff; }
.mini-card--grey { background: var(--c-surface); }
.mini-card__text { font-size: 17px; line-height: var(--lh-snug); max-width: 26ch; }
.mini-card .btn { align-self: start; }

.yontem__foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  margin-top: 56px;
  align-items: center;
}

/* ==========================================================================
   3. BEŞ ADIMLI DÖNGÜ
   ========================================================================== */

.cycle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
  list-style: none;
}

.cycle__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  transition: background var(--t-base), border-color var(--t-base),
              color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.cycle__item:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(23, 78, 166, 0.24);
}

.cycle__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cycle__icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: #fff;
  color: var(--c-primary);
  font-size: 18px;
  /* Kart hover'da zemini değiştiriyor (`.cycle-section .cycle__item:hover
     .cycle__icon`); geçiş tanımlı olmadığı için ikon kutusu, kartın geri
     kalanı yumuşak geçerken tek karede zıplıyordu. */
  transition: background var(--t-base);
}
.cycle__no { font-size: 12.5px; letter-spacing: .04em; opacity: .85; }
.cycle__title { margin-top: 4px; font-size: 21px; letter-spacing: -0.02em; color: inherit; }
.cycle__text { font-size: var(--fs-base); line-height: var(--lh-body); color: inherit; opacity: .7; flex: 1; }
.cycle__out {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid currentColor;
  font-size: var(--fs-sm);
  color: inherit;
  opacity: .8;
}

/* ==========================================================================
   4. ÇÖZÜMLER
   ========================================================================== */

.sol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}

.sol-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(26px, 3vw, 34px);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.sol-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(32, 33, 36, 0.10); }
.sol-card--blue {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.sol-card--blue:hover { box-shadow: 0 20px 44px rgba(23, 78, 166, 0.28); }

.sol-card__title { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: var(--ls-tight); }
.sol-card__text {
  margin-top: 12px;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-text-66);
}
.sol-card--blue .sol-card__text { color: var(--c-on-dark-82); }

.sol-card__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 20px;
  border-top: 1px solid var(--c-border-soft);
  list-style: none;
}
.sol-card--blue .sol-card__list { border-top-color: rgba(255, 255, 255, 0.3); }
.sol-card__list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: var(--lh-snug);
  color: var(--c-text-70);
}
.sol-card--blue .sol-card__list li { color: var(--c-on-dark-82); }
.sol-card__list svg { flex: none; margin-top: 2px; color: var(--c-primary); }
.sol-card--blue .sol-card__list svg { color: #fff; }

.sol-card__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 500;
  transition: background var(--t-base);
}
.sol-card__cta:hover { background: var(--c-primary-hover); color: #fff; }
.sol-card--blue .sol-card__cta { background: #fff; color: var(--c-primary); }
.sol-card--blue .sol-card__cta:hover { background: var(--c-primary-soft); }

/* ==========================================================================
   5. SİSTEM MAVİ BANDI
   ========================================================================== */


/* ==========================================================================
   6+7. HİZMETLER
   ========================================================================== */

.intro-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px;
  align-items: start;
}
.intro-split__note {
  margin-top: 26px;
  max-width: 34ch;
  font-size: 15px;
  line-height: var(--lh-loose);
  color: var(--c-text-70);
}
.intro-split__title { font-size: clamp(28px, 3.3vw, 42px); max-width: 24ch; }

.pillars {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 64px);
}

.pillar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
/* Çift sıralarda görsel sağa geçer — tasarımdaki zikzak düzen */
@media (min-width: 981px) {
  .pillar--rev .pillar__fig { order: 2; }
}

.pillar__fig { position: relative; }


/*
 * Sağ altta beyaz kesim — butonun oturduğu boşluk.
 *
 * Üç parçadan oluşur: dikdörtgen gövde ve iki TERS YARIÇAP köşesi.
 * Ters köşeler olmadan kesim "yapıştırılmış" görünür; onlarla birlikte
 * karttan oyulmuş gibi durur. Her biri bir radyal degrade: dairenin
 * içi şeffaf, dışı beyaz.
 */
/* Solda, kesimin yanında */
/* Üstte, kesimin üzerinde */


.pillar__kicker { margin-bottom: 8px; font-size: 12.5px; color: var(--c-primary); }
.pillar__title { font-size: clamp(26px, 3vw, 38px); max-width: 18ch; }
.pillar__desc {
  margin-top: 18px;
  max-width: 36ch;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-text-70);
}

/* ==========================================================================
   8. TEMEL DEĞERLERİMİZ
   ========================================================================== */

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px;
  align-items: start;
}
.values__title { font-size: clamp(28px, 3.4vw, 42px); }
.values__note {
  margin-top: 26px;
  max-width: 40ch;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-text-66);
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}

.value-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 170px;
  padding: 24px;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  transition: background var(--t-base), color var(--t-base),
              transform var(--t-base), box-shadow var(--t-base);
}
.value-card:hover {
  background: var(--c-primary);
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(23, 78, 166, 0.22);
}
.value-card__title { font-size: 19px; letter-spacing: -0.02em; color: inherit; }
.value-card__text { font-size: var(--fs-base); line-height: var(--lh-body); color: inherit; opacity: .72; }

/* ==========================================================================
   9. VAKALAR — konturlu dev başlık
   ========================================================================== */


/* ==========================================================================
   10-11. REFERANSLAR ve PARTNERLER — components.css'e taşındı

   Hakkımızda sayfası da aynı referans carousel'ini ve partner şeridini
   kullanıyor. İki sayfanın paylaştığı her şey components.css'te durur.
   ========================================================================== */

/* ==========================================================================
   12. KAYNAKLAR
   ========================================================================== */

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  align-items: stretch;
  margin-top: 42px;
}
.posts-grid__intro { align-self: start; }
.posts-grid__note {
  max-width: 30ch;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-text-70);
  margin-bottom: 22px;
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--c-surface);
  border-radius: var(--r-xl);
  transition: background .3s ease, transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
.post-card:hover {
  background: var(--c-primary-soft);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(32, 33, 36, 0.14);
}
.post-card__title { font-size: 16.5px; line-height: 1.35; letter-spacing: -0.015em; color: var(--c-text); }
.post-card__date { font-size: var(--fs-xs); color: var(--c-text-66); }
.post-card__fig {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  background: var(--c-bg);
  border: 1px dashed var(--c-border);
  overflow: hidden;
}
.post-card__fig img { width: 100%; height: 100%; object-fit: cover; }
.post-card__fig .placeholder-label { color: rgba(32, 33, 36, 0.34); }

/* ==========================================================================
   13. KAPANIŞ BANDI
   ========================================================================== */

.cta-panel__title { font-size: clamp(28px, 4vw, 46px); color: #fff; }
.cta-panel__text {
  margin-top: 12px;
  max-width: 52ch;
  font-size: var(--fs-md);
  color: var(--c-on-dark-82);
}

/* ==========================================================================
   14. TANIŞALIM
   ========================================================================== */

.contact-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 52px;
  align-items: start;
}
.contact-split__title { font-size: clamp(28px, 3.6vw, 44px); }
.contact-split__text {
  margin-top: 18px;
  max-width: 36ch;
  font-size: 15px;
  line-height: var(--lh-loose);
  color: var(--c-text-66);
}
.contact-split__meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 30px;
  font-size: 14px;
  color: var(--c-text-66);
}
.contact-split__meta a { color: var(--c-primary); }

/* ==========================================================================
   DAR EKRAN
   ========================================================================== */

@media (max-width: 620px) {
  .frame-blue { padding: 10px; border-radius: var(--r-xl); }
  .panel-dark { min-height: 0; border-radius: var(--r-lg); }
  .notch--tr { padding: 0 0 10px 10px; border-bottom-left-radius: 18px; }
  .notch__btn { padding: 10px 16px; font-size: 12.5px; }
  .hero__top .placeholder-label { padding: 16px 0 0 16px; }
  .hero__grid,
  .hero__cards { padding-inline: 16px; }
  .hero__cards { flex-direction: column; }

  .tall-card { min-height: 300px; }
  .outline-title { -webkit-text-stroke-width: 1px; }
  .figure-dark__btn { position: static; margin-top: 12px; }
  .figure-dark__cut { display: none; }
}

/* ==========================================================================
   HERO — sabit başlık düzeni

   Dönen slogan kaldırıldıktan sonra hero iki sütun: solda H1, sağda giriş
   paragrafı + iki çağrı. Eskiden sağ sütun yalnızca paragraf taşıyordu;
   çağrılar çentikteki tek düğmedeydi ve kaydırmadan görülen tek eylem oydu.
   ========================================================================== */

.hero__intro {
  min-width: 0;
  max-width: 46ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 22px;
}

/* Sayı değil ARALIK taşıyor ("2–4 hafta"): rakam puntosunda yazılırsa
   satır taşıyor, bu yüzden bir kademe küçük ve sarmalanabilir. */
.hero__stat {
  display: block;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-primary);
}

/* ==========================================================================
   KANIT ŞERİDİ — hero çerçevesinin altında

   İlk iki madde iddia (süre, konum), kalanı platform adı. İkisi aynı
   biçimde basılsaydı platform adları da bir iddia gibi okunurdu.
   ========================================================================== */
.proof-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 0;
  padding: 24px 4px 0;
  list-style: none;
}
.proof-strip__item {
  padding: 5px 12px;
  background: var(--c-surface);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--c-text-66);
}
.proof-strip__item--lead {
  padding: 0;
  background: none;
  color: var(--c-text-70);
}

/* ==========================================================================
   SORUN — belirti kartları

   Her kart iki katman: üstte belirti (ziyaretçinin gördüğü), altta
   "altında ne var" (sebebi). Ayrım tipografiyle kuruluyor; tek paragraf
   olsaydı belirti ile teşhis aynı ağırlıkta okunurdu.
   ========================================================================== */
.symptom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 20px;
}
.symptom {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 230px;
  padding: 26px;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  transition: background var(--t-base), color var(--t-base),
              transform var(--t-base), box-shadow var(--t-base);
}
.symptom:hover {
  background: var(--c-primary);
  color: #fff;
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(23, 78, 166, 0.24);
}
.symptom__label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  opacity: .55;
}
.symptom__title {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: inherit;
  text-wrap: pretty;
}
.symptom__text {
  margin-top: auto;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: inherit;
  opacity: .72;
  text-wrap: pretty;
}
.symptom__cue { opacity: .75; }

/* ==========================================================================
   FARKIMIZ — üç iş

   İlk blok mavi: üç işin sırası anlamlı (önce ölçüm) ve sıranın nereden
   başladığını renk söylüyor.
   ========================================================================== */
.fark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}
.fark-card {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 30px;
  background: #fff;
  border-radius: var(--r-xl);
}
.fark-card--blue { background: var(--c-primary); color: #fff; }
.fark-card__no { font-size: var(--fs-sm); color: inherit; opacity: .7; }
.fark-card__title {
  margin-top: 6px;
  font-size: clamp(21px, 2.3vw, 26px);
  letter-spacing: -0.02em;
  color: inherit;
  text-wrap: pretty;
}
.fark-card__text {
  margin-top: 12px;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: inherit;
  opacity: .75;
  text-wrap: pretty;
}

/* ==========================================================================
   SONUÇ ARALIĞI

   Tek bir ortalama yüzde yerine aralık ve aralığı ne belirlediği. Panelin
   içinde beyaz bir sınır kutusu duruyor: yöntemin UYMADIĞI durum. Sayfanın
   kendi sınırını söylediği tek yer, o yüzden zeminden ayrılıyor.
   ========================================================================== */
.range-panel {
  padding: clamp(28px, 3.4vw, 52px);
  background: var(--c-surface);
  border-radius: var(--r-2xl);
}
.range-panel__title {
  max-width: 26ch;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: var(--ls-tight);
  text-wrap: pretty;
}
.range-panel__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 32px;
  margin-top: 28px;
}
.range-panel__cols p {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--c-text-70);
  text-wrap: pretty;
}

.limit-note {
  margin-top: 32px;
  padding: 26px;
  background: var(--c-bg);
  border-radius: 22px;
}
.limit-note__title {
  font-size: var(--fs-md);
  letter-spacing: -0.015em;
}
.limit-note__text {
  margin-top: 7px;
  max-width: 74ch;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-text-70);
  text-wrap: pretty;
}

/* ==========================================================================
   HİZMET SÜTUNU — vaat, kime, kapsam

   Kart eskiden yalnızca üst etiket + ad + özet taşıyordu. Ziyaretçinin
   sorduğu iki soru eksikti: "bana mı" ve "içinde ne var". İkisi de
   hizmet sayfasına tıklamadan cevaplanıyor artık.
   ========================================================================== */
.pillar__promise {
  margin-top: 14px;
  max-width: 34ch;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: var(--lh-snug);
  color: var(--c-text);
  text-wrap: pretty;
}
.pillar__who {
  margin-top: 14px;
  max-width: 46ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-text-66);
  text-wrap: pretty;
}
.pillar__who-cue { color: var(--c-primary); }

.pillar__scope {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border-soft);
}
.pillar__scope-label {
  margin-bottom: 10px;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-66);
}

/* ==========================================================================
   KİMLER İÇİN — başlangıç sorusu

   Belirti listesinin yerini tek bir soru aldı: firma kendi cümlesini
   okuyor. Liste üç madde taşırken tarama gerektiriyordu; soru tek satırda
   tanınıyor.
   ========================================================================== */
.sol-card__ask {
  padding-top: 20px;
  border-top: 1px solid var(--c-border-soft);
}
.sol-card--blue .sol-card__ask { border-top-color: rgba(255, 255, 255, 0.28); }
.sol-card__ask-label {
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  color: inherit;
  opacity: .65;
}
.sol-card__ask-text {
  display: flex;
  align-items: start;
  gap: 9px;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: inherit;
  opacity: .95;
  text-wrap: pretty;
}
.sol-card__ask-text svg { flex: none; margin-top: 3px; }

/* Değer kartlarına sıra numarası — dört kural bir liste, sıra taşıyor. */
.value-card__no { font-size: var(--fs-sm); color: inherit; opacity: .6; }

/* ==========================================================================
   ANALİZ AÇIKLAMASI — kapanış bandının altında

   Kapanış bandı "ücretsiz analiz al" diyor ama analizin NE olduğunu
   söylemiyordu. Çağrının hemen altında, tıklamadan önce okunacak yerde.
   ========================================================================== */
.analysis-note {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px;
  align-items: start;
  padding: clamp(26px, 3vw, 44px);
  background: var(--c-surface);
  border-radius: var(--r-xl);
}
.analysis-note__label {
  margin-bottom: 12px;
  font-size: var(--fs-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.analysis-note__text {
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text-70);
  text-wrap: pretty;
}
.analysis-note__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--fs-base);
  color: var(--c-text-66);
}
.analysis-note__meta a { color: var(--c-primary); }
.analysis-note__hint {
  margin-top: 8px;
  max-width: 40ch;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-text-66);
  text-wrap: pretty;
}

@media (max-width: 620px) {
  .proof-strip { padding-top: 18px; }
  .symptom { min-height: 0; }
  .fark-card,
  .gc-card { min-height: 0; }
}

/* ==========================================================================
   REVİZELER — çerçeve, glass, kart yoğunluğu
   ========================================================================== */

/* --- Hero: görsel varken mavi çerçeve kalkar ---------------------------- */
/*
 * Çerçeve boş panelde işe yarıyordu; fotoğraf girince resmin etrafında
 * ikinci bir kenarlık gibi okunuyor ve görseli kutuya sıkıştırıyordu.
 * Mavi zemin de kalkıyor: padding sıfırlanınca hiçbir yerde görünmezdi,
 * yalnızca boyanmış bir dikdörtgen olarak kalırdı.
 */
.frame-blue--flush {
  padding: 0;
  background: none;
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.frame-blue--flush .panel-dark { border-radius: var(--r-2xl); }

/* Çerçeve sıfırlanınca çentik düğmesi panelin kendi kenarına yaslanır. */
.frame-blue--flush .frame-blue__btn {
  top: clamp(16px, 2.4vw, 28px);
  right: clamp(16px, 2.4vw, 28px);
}

/* --- Hizmet sütunu: görsel yazı sütunu kadar ---------------------------- */
.pillar { align-items: stretch; }
.pillar__text { display: flex; flex-direction: column; justify-content: center; }

/*
 * Oranı bırakıp sütun yüksekliğini alır. min-height, yazı sütunu çok
 * kısaldığında (kapsam listesi girilmemiş bir hizmet) görselin bant gibi
 * incelmesini engelliyor.
 */
.figure-dark--fill {
  aspect-ratio: auto;
  height: 100%;
  min-height: clamp(260px, 26vw, 380px);
}
/* Kesikli çerçeve yalnızca görsel yokken — yer tutucu durumunun işareti. */
.figure-dark.has-media { border-color: transparent; }

/* --- Res Döngüsü: cam kartlar ------------------------------------------- */
/*
 * Cam etkisi ancak ARKASINDA bir şey varsa görünür. Bölüm düz beyazdı;
 * kartlar yarı saydam yapılsaydı hiçbir fark oluşmazdı. Zemine yumuşak
 * bir mavi yıkama kondu, kartlar onun üzerinde duruyor.
 */
.cycle-section {
  position: relative;
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(23, 78, 166, 0.10), transparent 70%),
    radial-gradient(50% 70% at 88% 100%, rgba(66, 133, 244, 0.12), transparent 70%),
    var(--c-surface);
}

.cycle-section .cycle__item {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 6px 24px rgba(32, 33, 36, 0.06);
}
.cycle-section .cycle__item:hover {
  background: rgba(23, 78, 166, 0.92);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* İkon kutusu da cam: içi beyaz dolu olsaydı kartın üstünde yamaya benzerdi. */
.cycle-section .cycle__icon {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: var(--c-primary);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cycle-section .cycle__item:hover .cycle__icon {
  background: rgba(255, 255, 255, 0.92);
}

/*
 * backdrop-filter desteklemeyen tarayıcıda yarı saydam zemin bulanık
 * değil sadece soluk çıkar ve metin kontrastı düşer. O durumda kartlar
 * tam opak beyaza döner.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cycle-section .cycle__item { background: #fff; }
  .cycle-section .cycle__icon { background: #fff; }
}

/* --- Başlangıç noktaları: üç kart --------------------------------------- */
.sol-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.sol-grid--3 .sol-card { min-height: 300px; }

/* --- Değerler: aradaki boşluk ve cam kartlar ---------------------------- */
/*
 * 48px boşluk, sol sütun kısaldığında (sayaç şeridi ayrı bölüme taşındı)
 * iki sütunu birbirinden kopardı. Ölçü diğer iki sütunlu bölümlerle
 * hizalandı.
 */
.values { gap: clamp(26px, 3vw, 40px); }

.values__grid { align-content: start; }

/*
 * Değer kartları düz gri kutulardı ve dört tanesi yan yana tek bir blok
 * gibi okunuyordu. Cam yüzey + ince kenarlık kartları birbirinden
 * ayırıyor; sıra numarası da hangisinin kaçıncı kural olduğunu söylüyor.
 */
.value-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 6px 22px rgba(32, 33, 36, 0.06);
}
.value-card:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .value-card { background: #fff; }
}

/* --- Bölüm başlığı: rozet ile başlık iç içe girmesin -------------------- */
/*
 * .pill satır içi bir öğe, h2 ise blok. Aralarında hiç boşluk tanımlı
 * değildi: büyük puntolu başlıkların (clamp 50px) satır kutusu rozetin
 * üzerine biniyordu. Sarmalayıcı ikisini de dikey akışa alıyor.
 */
.section-head { display: flex; flex-direction: column; align-items: start; gap: 16px; }
.section-head .section__title { margin: 0; }
.section-head .section__intro { margin-top: 0; }
.section-head + .card-grid,
.section-head + .posts-grid { margin-top: clamp(28px, 4vw, 44px); }

/* --- Vaka kartları: daha küçük ------------------------------------------ */
/*
 * Kartlar 16/11 görsel + 30px metrik + 2.5em sabit başlık yüksekliğiyle
 * ekranın yarısını tutuyordu. Sıkı varyantta görsel oranı yatıklaşıyor,
 * başlık sabit yüksekliği kalkıyor ve tipografi bir kademe iniyor.
 */
.card-grid--compact .case-card { gap: 11px; padding: 20px; }
.card-grid--compact .case-card__fig { aspect-ratio: 16 / 7; }
.card-grid--compact .case-card__title {
  min-height: 0;
  font-size: 17.5px;
}
.card-grid--compact .case-card__text { font-size: 13.5px; }
.card-grid--compact .case-card__metric-value { font-size: 24px; }

/* --- Kaynaklar: beş küçük kart ------------------------------------------ */
/*
 * Beş yazı + giriş sütunu = altı kutu. 240px alt sınırla üçü bir satıra
 * sığıyordu; 170px ile altısı da geniş ekranda tek satırda duruyor.
 * Kartta görsel yok: yazıların çoğunda öne çıkan görsel yüklenmemişti ve
 * kartlar boş yer tutucularla doluyordu.
 */
.posts-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 14px;
}
.posts-grid--compact .posts-grid__intro {
  grid-column: 1 / -1;
  align-self: auto;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.posts-grid--compact .posts-grid__note { margin-bottom: 0; max-width: 46ch; }

.post-card--compact {
  gap: 8px;
  padding: 18px;
  min-height: 160px;
}
.post-card--compact .post-card__title { font-size: 15px; line-height: 1.3; }
.post-card--compact .post-card__more {
  margin-top: auto;
  color: var(--c-primary);
  display: inline-flex;
}

@media (max-width: 620px) {
  .figure-dark--fill { min-height: 220px; }
  .card-grid--compact .case-card__fig { aspect-ratio: 16 / 9; }
}

/* --- Hero kartları: başlık rengi zemine bağlı --------------------------- */
/*
 * v2'de iki hero kartı aynı kalıbı paylaşıyor (başlık + açıklama + çağrı)
 * ama zeminleri farklı: birincisi açık gri, ikincisi koyu panel üzerinde cam.
 * .hero__card-big beyaz tanımlıydı — cam kartta doğru, açık kartta görünmez.
 * Renk artık karta göre belirleniyor.
 */
.hero__card--stat .hero__card-big { color: var(--c-text); }
.hero__card--stat .hero__card-small { color: var(--c-text-70); }