/* ==========================================================================
   TEMİZ İTİBAR — Ana stil dosyası
   ---------------------------------------------------------------------------
   Tasarım sistemi: beyaz zemin + Google marka paleti (kırmızı / sarı / yeşil /
   mavi). Marka laciverti ve altını yalnız logo kilidi ve birkaç dokunuşta
   kullanılır. Tüm renkler aşağıdaki :root bloğundadır; renk değişimi için
   yalnız bu bloğu düzenlemeniz yeterlidir.

   İçindekiler
     01  Tokenlar (:root)
     02  Sıfırlama ve taban
     03  Tipografi
     04  Yerleşim (container / section)
     05  Butonlar
     06  Erişilebilirlik (odak, atlama bağlantısı, hareket tercihi)
     07  Üst menü
     08  Hero
     09  Maps kartı + link kutusu
     10  Beliriş
     11  Bölüm başlığı
     12  Güven şeridi (stats)
     13  Kartlar / rozetler / not
     14  Kaldırılabilirlik testi
     15  Süreç adımları
     16  Hesaplayıcı
     17  Vakalar + sektörler
     18  Güvence sütunları
     19  SSS
     20  Kapanış CTA
     21  Footer
     22  Keyframe kütüphanesi
   ========================================================================== */

/* == 01  TOKENLAR ========================================================= */
:root {
  /* --- Google marka paleti — birincil vurgu sistemi --------------------- */
  --g-blue: #4285f4;           /* saf marka mavisi — dolgu, çizgi, ikon */
  --g-blue-soft: #e8f0fe;
  --g-blue-deep: #1a56c4;      /* beyaz üstünde metin için — 6.6:1 */
  --g-blue-cta: #1f6feb;       /* beyaz metin taşıyan degradelerin açık ucu */

  --g-red: #ea4335;
  --g-red-soft: #fce8e6;
  --g-red-deep: #b3261e;

  --g-yellow: #fbbc04;
  --g-yellow-soft: #fef7e0;
  --g-yellow-deep: #8a6100;

  --g-green: #34a853;          /* saf marka yeşili — nokta, çizgi, ikon */
  --g-green-soft: #e6f4ea;
  --g-green-deep: #137333;     /* beyaz üstünde metin için — 6.0:1 */
  --g-green-darkest: #0f5c28;  /* degrade koyu ucu — beyaz metin 8.4:1 */

  /* --- Marka — lacivert (logo kilidi ve koyu şerit) --------------------- */
  --navy: #0d2340;
  --navy-deep: #081729;

  /* --- Marka — altın (yalnız vurgu; geniş alan dolgusu değil) ----------- */
  --gold-light: #f0cf82;
  --gold-dark: #8a6a24;

  /* --- Durum: onay / doğrulama (Google yeşiline hizalı) ----------------- */
  --verify: #34a853;
  --verify-text: #137333;

  /* --- Durum: uyarı ve hata -------------------------------------------- */
  --danger-text: #b3261e;
  --danger-on-navy: #ffb4a6;

  /* --- Metin ------------------------------------------------------------ */
  --ink: #14181f;              /* gövde ve başlık */
  --ink-strong: #0a0d12;       /* en yüksek kontrast */
  --ink-muted: #566173;        /* ikincil metin — beyazda 6.4:1 */
  --ink-faint: #626d7e;        /* yardımcı metin — beyazda 5.1:1, gri zeminde 4.8:1 */
  --on-navy: #f4f7fb;
  --on-navy-muted: #b9cbe0;
  --on-navy-faint: #8ba3bf;

  /* --- Zemin ------------------------------------------------------------ */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f8f9fa;
  --surface-sunk: #f1f3f4;
  --glass: rgba(255, 255, 255, .78);
  --white: #ffffff;            /* buton/koyu zemin metni */
  --mask-ink: #000000;         /* yalnız mask-image geçişi — renk olarak görünmez */
  --g-yellow-press: #c98f00;   /* sarı degradenin koyu ucu */

  /* --- Kenarlık --------------------------------------------------------- */
  --line: #e3e6ea;
  --line-strong: #cdd3db;
  --line-navy: #24405f;

  /* --- Aralık ölçeği (10 kademe) ---------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* --- Köşe ölçeği (6 kademe) ------------------------------------------- */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 16px;
  --r-4: 24px;
  --r-5: 32px;
  --r-pill: 999px;

  /* --- Gölge merdiveni (5 kademe) --------------------------------------- */
  --sh-1: 0 1px 2px rgba(16, 24, 40, .04);
  --sh-2: 0 2px 6px rgba(16, 24, 40, .05), 0 1px 2px rgba(16, 24, 40, .04);
  --sh-3: 0 8px 20px rgba(16, 24, 40, .07), 0 2px 6px rgba(16, 24, 40, .04);
  --sh-4: 0 24px 48px rgba(16, 24, 40, .09), 0 8px 18px rgba(16, 24, 40, .05);
  --sh-5: 0 60px 120px rgba(16, 24, 40, .10), 0 24px 60px rgba(66, 133, 244, .10);

  /* --- Renkli parıltı gölgeleri ----------------------------------------- */
  --glow-blue: 0 10px 28px rgba(66, 133, 244, .32), 0 2px 6px rgba(66, 133, 244, .22);
  --glow-blue-h: 0 14px 36px rgba(66, 133, 244, .42), 0 4px 10px rgba(66, 133, 244, .28);
  --glow-blue-lg: 0 18px 44px rgba(66, 133, 244, .40), 0 4px 10px rgba(66, 133, 244, .26);
  --glow-green: 0 10px 28px rgba(52, 168, 83, .30), 0 2px 6px rgba(52, 168, 83, .20);
  --glow-yellow: 0 10px 28px rgba(251, 188, 4, .34);
  --ring-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* --- Atmosfer yıkamaları ---------------------------------------------- */
  --wash-blue: rgba(66, 133, 244, .10);
  --wash-green: rgba(52, 168, 83, .09);
  --wash-yellow: rgba(251, 188, 4, .12);
  --wash-red: rgba(234, 67, 53, .07);

  /* --- Ölçü ------------------------------------------------------------- */
  --container: 1200px;
  --nav-h: 76px;

  /* --- Hareket ---------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* hafif yaylanma */
  --t-fast: .16s;
  --t-mid: .28s;
  --t-slow: .5s;

  /* --- Tipografi — üç aile ---------------------------------------------- */
  --font-display: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
}

/* == 02  SIFIRLAMA VE TABAN =============================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

img, svg { max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--g-blue-soft); color: var(--g-blue-deep); }

/* == 03  TİPOGRAFİ ======================================================== */
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.14;
  margin: 0 0 .5em;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink-strong);
  font-optical-sizing: auto;
}
/* Başlık ölçeği kasıtlı olarak iddialı: en büyük boy 96px'e çıkar ve
   ağırlık 800'dür. Geometrik bir grotesk bu ağırlıkta okunaklı kalır;
   sıkı harf aralığı (-.04em) büyük puntoda dağılmayı önler. */
h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
}
h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
}
h3 {
  font-size: clamp(1.18rem, 2.1vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
p  { margin: 0 0 1rem; text-wrap: pretty; }
h1, h2 { text-wrap: balance; }

strong { font-weight: 650; color: var(--ink-strong); }

/* Sayısal ve etiket rolü — üçüncü aile */
.stat__num, .sift__from, .sift__to, .calc__from, .calc__to,
.case__from, .case__to, .field__out, .card__no, .step__no,
.sechead__eyebrow, .badge, .hero__eyebrow, .calc__label, .case__sector,
.sift__title, .footer__legal, .sectors__tags li {
  font-family: var(--font-ui);
}

/* == 04  YERLEŞİM ========================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-4), 4vw, var(--sp-7));
}

.section {
  position: relative;
  padding-block: clamp(var(--sp-7), 6.5vw, var(--sp-8));
}

/* Ritim kırıcı: bölümler aynı nefesi almasın. */
.section--alt {
  background: var(--surface-alt);
  padding-block: clamp(var(--sp-8), 10vw, var(--sp-10));
}
.section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 82% 8%, var(--wash-blue), transparent 70%),
    radial-gradient(55% 40% at 6% 96%, var(--wash-green), transparent 72%);
}
.section--alt > * { position: relative; }

/* Koyu şerit — sayfadaki tek karanlık ada. Bilerek bir "ilkeler" duvarı. */
.section--navy {
  background:
    radial-gradient(70% 50% at 20% 0%, rgba(66, 133, 244, .22), transparent 68%),
    radial-gradient(60% 55% at 92% 100%, rgba(52, 168, 83, .18), transparent 70%),
    var(--navy-deep);
  color: var(--on-navy);
  border-radius: var(--r-5);
  margin-inline: clamp(0px, 3vw, var(--sp-6));
  overflow: hidden;
  box-shadow: var(--sh-5);
}
.section--navy h2, .section--navy h3 { color: var(--on-navy); }
.section--navy p { color: var(--on-navy-muted); }

/* == 05  BUTONLAR ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: .92rem 1.65rem;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition:
    transform var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out),
    background-color var(--t-fast) linear,
    border-color var(--t-fast) linear,
    color var(--t-fast) linear;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Birincil eylem — Google mavisi + renkli parıltı.
   Sınıf adı tarihsel olarak "gold"; görsel dil artık mavi. */
/* Degradenin EN AÇIK ucu bile beyaz metinle 4.5:1 üstünde kalmalı;
   bu yüzden üst durak --g-blue değil --g-blue-cta (koyulaştırılmış). */
.btn--gold {
  background: linear-gradient(180deg, var(--g-blue-cta) 0%, var(--g-blue-deep) 100%);
  color: var(--white);
  box-shadow: var(--glow-blue), var(--ring-inset);
}
.btn--gold:hover { box-shadow: var(--glow-blue-lg), var(--ring-inset); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink-strong);
  border: 1.5px solid var(--line-strong);
  box-shadow: var(--sh-2);
}
.btn--ghost:hover {
  border-color: var(--g-blue);
  color: var(--g-blue-deep);
  box-shadow: var(--sh-3);
}

.btn--lg { padding: 1.15rem 2.3rem; font-size: 1.06rem; }

/* Koyu zeminlerde hayalet buton beyaza döner */
.section--navy .btn--ghost,
.cta .btn--ghost,
.hero .btn--ghost {
  background: rgba(255, 255, 255, .06);
  color: var(--on-navy);
  border-color: var(--line-navy);
  box-shadow: none;
}
.section--navy .btn--ghost:hover,
.cta .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--on-navy-faint);
  color: var(--white);
}
/* Hero açık zeminde: hayalet buton normal davranışına döner */
.hero .btn--ghost {
  background: var(--surface);
  color: var(--ink-strong);
  border-color: var(--line-strong);
  box-shadow: var(--sh-2);
}
.hero .btn--ghost:hover {
  background: var(--surface);
  color: var(--g-blue-deep);
  border-color: var(--g-blue);
  box-shadow: var(--sh-3);
}

/* == 06  ERİŞİLEBİLİRLİK ================================================== */
:focus-visible {
  outline: 3px solid var(--g-blue);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
.section--navy :focus-visible,
.cta :focus-visible,
.footer :focus-visible,
.stats :focus-visible {
  outline-color: var(--g-yellow);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  /* Ham marka mavisi beyaz metinle 3.56:1 kalıyor (AA altı).
     Klavye kullanıcısının tek yön bulma aracı — koyu varyant şart. */
  background: var(--g-blue-deep);
  color: var(--white);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-ui);
  font-weight: 600;
  border-radius: 0 0 var(--r-2) 0;
  box-shadow: var(--glow-blue);
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* == 07  ÜST MENÜ ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
              background-color var(--t-mid) var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--surface); }
}
/* Mobilde cam efekti kapatılır: tam genişlikte sticky bir yüzeyde bulanıklık
   her kaydırma karesinde yeniden boyanır ve zayıf GPU'larda takılma yapar.
   Görsel kazanç küçük ekranda zaten düşük — düz zemine düşüyoruz. */
@media (max-width: 720px) {
  .nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface);
  }
}
.nav.is-stuck {
  background: var(--glass);
  box-shadow: var(--sh-3);
  border-bottom-color: var(--line);
}
/* Google şeridi — kaydırınca beliren dört renkli ince çizgi */
.nav::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg,
    var(--g-blue) 0 25%, var(--g-red) 25% 50%,
    var(--g-yellow) 50% 75%, var(--g-green) 75% 100%);
  transition: transform var(--t-slow) var(--ease-out);
}
.nav.is-stuck::after { transform: scaleX(1); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--nav-h);
}
.nav__logo { display: flex; align-items: center; }
.nav__logo img { width: 196px; height: auto; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 2vw, var(--sp-6));
}
.nav__menu a {
  position: relative;
  color: var(--ink-muted);
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: .95rem;
  transition: color var(--t-fast) linear;
}
.nav__menu a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--g-blue);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform var(--t-mid) var(--ease-out);
}
.nav__menu a:hover { color: var(--ink-strong); }
.nav__menu a:not(.nav__cta):hover::after { transform: scaleX(1); }

.nav__cta {
  color: var(--white) !important;
  padding: .68rem 1.25rem;
  font-size: .93rem;
}
.nav__cta:hover { color: var(--white) !important; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.nav__toggle:hover { border-color: var(--g-blue); box-shadow: var(--sh-2); }
.nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--ink);
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) linear,
              background-color var(--t-fast) linear;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--g-blue); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--g-blue); }

@media (max-width: 940px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-4);
    padding: var(--sp-2) clamp(var(--sp-4), 4vw, var(--sp-7)) var(--sp-5);
    display: none;
  }
  .nav__menu.is-open { display: flex; animation: menu-drop .3s var(--ease-out) both; }
  .nav__menu a { padding: .95rem 0; border-bottom: 1px solid var(--line); }
  .nav__menu a:not(.nav__cta)::after { display: none; }
  .nav__cta { margin-top: var(--sp-4); border-bottom: 0 !important; justify-content: center; }
}

/* == 08  HERO ============================================================= */
/* İmza animasyon: harita iğnesinin düşüşü + ızgara sisi. */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
  /* Üst boşluk kasıtlı olarak dar: yapışkan menünün hemen altında
     96px'e varan bir boşluk sayfayı boş başlatıyordu. */
  padding-block: clamp(var(--sp-5), 3.5vw, var(--sp-7)) clamp(var(--sp-7), 7vw, var(--sp-9));
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 76% 6%, var(--wash-blue), transparent 70%),
    radial-gradient(34% 38% at 92% 44%, var(--wash-yellow), transparent 72%),
    radial-gradient(40% 44% at 4% 88%, var(--wash-green), transparent 70%),
    radial-gradient(30% 30% at 22% 4%, var(--wash-red), transparent 72%);
}
/* Harita ızgarası — ince, hafif, tek boyama */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, var(--mask-ink), transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 30%, var(--mask-ink), transparent 78%);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  align-items: center;
}
@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: .42rem .95rem .42rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--sh-2);
  color: var(--ink-muted);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.pulse {
  width: 9px; height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--g-green);
  box-shadow: 0 0 0 0 rgba(52, 168, 83, .6);
  animation: pulse 2.4s infinite;
}

.hero h1 { color: var(--ink-strong); margin-bottom: var(--sp-5); }

/* .gold — vurgulu kelime. Artık altın değil, Google mavisi bir altı çizgi. */
.gold {
  color: var(--g-blue-deep);
  position: relative;
  white-space: nowrap;
  background-image: linear-gradient(90deg, var(--g-blue) 0 25%, var(--g-red) 25% 50%, var(--g-yellow) 50% 75%, var(--g-green) 75% 100%);
  background-repeat: no-repeat;
  background-size: 100% .14em;
  background-position: 0 92%;
  padding-bottom: .04em;
}

/* Başlığa genişlik sınırı: 800 ağırlıklı büyük punto sınırsız sütunda
   satır sayısını şişirip hero'yu ele geçiriyor. Alt paragraf kendi
   ölçüsünde kalsın diye sınır yalnız h1'e uygulanır. */
.hero h1 { max-width: 15ch; }
@media (max-width: 940px) {
  .hero h1 { max-width: none; }
}

.hero__lede {
  color: var(--ink-muted);
  font-size: 1.07rem;
  max-width: 54ch;
  margin-bottom: var(--sp-6);
}

/* --- Hero metni: kademeli açılış ---------------------------------------- */
/* Öğeler sırayla belirir; göz yukarıdan aşağı doğal biçimde iner ve
   sayfa "canlı açılmış" hissi verir. Yalnızca transform/opacity
   canlandırılır, düzen yeniden hesaplanmaz. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero__eyebrow,
.hero h1,
.hero__lede,
.hero__actions,
.hero__badges li {
  animation: hero-rise .75s var(--ease-out) both;
}
.hero__eyebrow      { animation-delay: .05s; }
.hero h1            { animation-delay: .16s; }
.hero__lede         { animation-delay: .30s; }
.hero__actions      { animation-delay: .42s; }
.hero__badges li:nth-child(1) { animation-delay: .54s; }
.hero__badges li:nth-child(2) { animation-delay: .62s; }
.hero__badges li:nth-child(3) { animation-delay: .70s; }

/* Vurgulu kelimenin altındaki Google şeridi soldan sağa çizilir */
.gold {
  background-size: 0 .14em;
  animation: gold-draw .9s var(--ease-out) .85s both;
}
@keyframes gold-draw {
  from { background-size: 0 .14em; }
  to   { background-size: 100% .14em; }
}

/* Rozet tikleri sırayla "damgalanır" */
.hero__badges .tick { animation: tick-pop .5s var(--ease-spring) both; }
.hero__badges li:nth-child(1) .tick { animation-delay: .60s; }
.hero__badges li:nth-child(2) .tick { animation-delay: .68s; }
.hero__badges li:nth-child(3) .tick { animation-delay: .76s; }
@keyframes tick-pop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero h1, .hero__lede, .hero__actions,
  .hero__badges li, .hero__badges .tick { animation: none; }
  .gold { background-size: 100% .14em; animation: none; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.hero__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.hero__badges li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-muted);
  font-size: .95rem;
}
.tick {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--g-green-soft);
  box-shadow: inset 0 0 0 1px rgba(52, 168, 83, .22);
  position: relative;
}
.tick::after {
  content: "";
  position: absolute;
  left: 7px; top: 5px;
  width: 5px; height: 9px;
  border: solid var(--g-green-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* == 09  MAPS KARTI + LİNK KUTUSU ========================================= */
.hero__panel {
  display: grid;
  gap: var(--sp-4);
  position: relative;
}

/* --- Ayıklama şeridi ----------------------------------------------------- */
/* Hero görselinin tamamı. Rakip siteler harita gösteriyor; harita
   işletmenin NEREDE olduğunu anlatır, oysa satılan hizmet yorumlarla
   ilgilidir. Bu bileşen doğrudan işin kendisini gösterir: sahte yorumlar
   taranır, işaretlenir, süzülüp düşer; gerçekler kalır. */
.sift {
  position: relative;
  border-radius: var(--r-4);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-5);
  overflow: hidden;
  animation: pin-drop .85s var(--ease-out) both;
}

/* Üst çubuk: pencere noktaları + başlık + canlı puan */
.sift__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.sift__dots { display: inline-flex; gap: 5px; flex: none; }
.sift__dots i { width: 9px; height: 9px; border-radius: 50%; }
.sift__dots i:nth-child(1) { background: #f6786d; }
.sift__dots i:nth-child(2) { background: #fbd25e; }
.sift__dots i:nth-child(3) { background: #81c995; }

.sift__title {
  flex: 1;
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: .01em;
}

.sift__score {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex: none;
  font-family: var(--font-display);
}
.sift__from {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.sift__arrow { color: var(--g-blue); font-weight: 700; font-size: .82rem; }
.sift__from, .sift__arrow {
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.sift.is-dirty .sift__from,
.sift.is-dirty .sift__arrow { opacity: 0; transform: translateX(-6px); }

.sift__to {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--g-red-deep);
  transition: color .5s var(--ease-out), transform .4s var(--ease-out);
}
.sift.is-cleaning .sift__to { color: var(--g-yellow-deep); }
.sift.is-clean .sift__to { color: var(--g-green-deep); transform: scale(1.06); }

/* Tarama çizgisi — süpürme sırasında listenin üzerinden geçer */
.sift__scan {
  position: absolute;
  inset: 52px 0 auto 0;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.sift__scan span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--g-blue), transparent);
  box-shadow: 0 0 18px 4px rgba(66, 133, 244, .45);
}
.sift.is-cleaning .sift__scan {
  opacity: 1;
  animation: sift-scan 1.5s var(--ease-out) both;
}
@keyframes sift-scan {
  from { transform: translateY(0); }
  to   { transform: translateY(268px); }
}

/* Yorum listesi */
.sift__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0;
  display: grid;
}

.sift__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  position: relative;
  transition:
    opacity .55s var(--ease-out),
    transform .55s var(--ease-out),
    max-height .55s var(--ease-out),
    padding .55s var(--ease-out),
    background-color .4s var(--ease-out);
  max-height: 96px;
}

/* İşaret noktası: nötr → kırmızı çarpı (sahte) / yeşil tik (gerçek) */
.sift__mark {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--surface-sunk);
  position: relative;
  transition: background-color .4s var(--ease-out);
}
.sift__mark::before,
.sift__mark::after {
  content: "";
  position: absolute;
  background: var(--surface);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
/* çarpı */
.sift__mark::before {
  left: 5px; top: 9px; width: 10px; height: 2px;
  border-radius: 1px;
  transform: rotate(45deg);
}
.sift__mark::after {
  left: 5px; top: 9px; width: 10px; height: 2px;
  border-radius: 1px;
  transform: rotate(-45deg);
}

.sift.is-marked .sift__row[data-fake] .sift__mark { background: var(--g-red); }
.sift.is-marked .sift__row[data-fake] .sift__mark::before,
.sift.is-marked .sift__row[data-fake] .sift__mark::after { opacity: 1; }
.sift.is-marked .sift__row[data-fake] { background: var(--g-red-soft); }

/* gerçek yorum: tik */
.sift.is-marked .sift__row[data-real] .sift__mark { background: var(--g-green); }
.sift.is-marked .sift__row[data-real] .sift__mark::before {
  opacity: 1;
  left: 5px; top: 10px; width: 5px; height: 2px;
  transform: rotate(45deg);
}
.sift.is-marked .sift__row[data-real] .sift__mark::after {
  opacity: 1;
  left: 7px; top: 9px; width: 9px; height: 2px;
  transform: rotate(-50deg);
}

/* Süzülme: sahte satırlar sola kayıp yüksekliklerini bırakır */
.sift.is-sifted .sift__row[data-fake] {
  opacity: 0;
  transform: translateX(-28px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.sift__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sift__stars {
  color: var(--g-yellow);
  font-size: .82rem;
  letter-spacing: 1.5px;
  line-height: 1;
}
.sift__text {
  font-size: .88rem;
  color: var(--ink);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sift__why {
  font-family: var(--font-ui);
  font-size: .72rem;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sift.is-marked .sift__row[data-fake] .sift__why { color: var(--g-red-deep); }

/* Alt sayaç şeridi */
.sift__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.sift__stat { display: inline-flex; align-items: center; gap: .35rem; }
.sift__stat b {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sift__stat--out b { color: var(--g-red-deep); }
.sift__stat--in  b { color: var(--g-green-deep); }

.sift__note {
  position: absolute;
  right: var(--sp-4);
  top: calc(52px + var(--sp-2));
  margin: 0;
  font-size: .68rem;
  color: var(--ink-faint);
  background: rgba(255, 255, 255, .8);
  padding: .1rem .45rem;
  border-radius: var(--r-pill);
  z-index: 1;
}

@media (max-width: 520px) {
  .sift__row { padding: var(--sp-2) var(--sp-3); }
  .sift__why { display: none; }
  .sift__to { font-size: 1.35rem; }
  .sift__foot { gap: var(--sp-3); font-size: .72rem; }
}

/* Hareket azaltma: döngü JS tarafında hiç başlamaz, temiz sonuç
   doğrudan gösterilir; kalan geçişler de susturulur. */
@media (prefers-reduced-motion: reduce) {
  .sift__scan { display: none; }
  .sift__row,
  .sift__mark,
  .sift__mark::before,
  .sift__mark::after,
  .sift__to,
  .sift__from,
  .sift__arrow { transition: none; }
  .sift.is-clean .sift__to { transform: none; }
  .sift.is-dirty .sift__from,
  .sift.is-dirty .sift__arrow { opacity: 1; transform: none; }
}


/* --- Link kutusu --------------------------------------------------------- */
.linkbox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: var(--sp-5);
  box-shadow: var(--sh-3);
  transition: box-shadow var(--t-mid) var(--ease-out);
}
.linkbox:focus-within { box-shadow: var(--sh-4), 0 0 0 4px var(--g-blue-soft); }
.linkbox label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: var(--sp-3);
  color: var(--ink-strong);
}
.linkbox__row { display: flex; gap: var(--sp-2); }
.linkbox__row input {
  flex: 1;
  min-width: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  transition: border-color var(--t-fast) linear, background-color var(--t-fast) linear;
}
.linkbox__row input::placeholder { color: var(--ink-faint); }
.linkbox__row input:focus {
  border-color: var(--g-blue);
  background: var(--surface);
  outline: none;
  box-shadow: 0 0 0 3px var(--g-blue-soft);
}
.linkbox__hint { margin: var(--sp-3) 0 0; font-size: .81rem; color: var(--ink-muted); }
@media (max-width: 520px) {
  .linkbox__row { flex-direction: column; }
}

/* == 10  BELİRİŞ ========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* == 11  BÖLÜM BAŞLIĞI ==================================================== */
.sechead {
  max-width: 62ch;
  margin: 0 auto clamp(var(--sp-6), 4vw, var(--sp-7));
  text-align: center;
}
.sechead__eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-4);
  padding: .34rem .9rem;
  border-radius: var(--r-pill);
  background: var(--g-blue-soft);
  color: var(--g-blue-deep);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.sechead p { color: var(--ink-muted); font-size: 1.04rem; margin-bottom: 0; }

/* Bölümden bölüme kaşın rengi döner — tekdüzeliği kırar. */
#sorun .sechead__eyebrow      { background: var(--g-red-soft);    color: var(--g-red-deep); }
#test .sechead__eyebrow       { background: var(--g-green-soft);  color: var(--g-green-deep); }
#nasil-calisir .sechead__eyebrow { background: var(--g-blue-soft); color: var(--g-blue-deep); }
#hesapla .sechead__eyebrow    { background: var(--g-yellow-soft); color: var(--g-yellow-deep); }
#vakalar .sechead__eyebrow    { background: var(--g-green-soft);  color: var(--g-green-deep); }

.section--navy .sechead__eyebrow {
  background: rgba(251, 188, 4, .16);
  color: var(--g-yellow);
}

/* Tüm bölüm başlıkları ortalanır (temel .sechead kuralı). Daha önce
   "sorun" ve "vakalar" bölümleri ritim kırıcı olarak sola yaslıydı;
   sayfa genelinde hizasız duruyordu. Ritim artık renkli üst çizgiler
   ve bölüm zemin değişimleriyle korunuyor. */

/* == 12  GÜVEN ŞERİDİ ===================================================== */
/* İmza animasyon: sayaç kartlarının sırayla yükselişi. */
.stats {
  position: relative;
  background: var(--surface-alt);
  color: var(--ink);
  padding-block: clamp(var(--sp-6), 5vw, var(--sp-7));
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(45% 120% at 50% 0%, var(--wash-blue), transparent 70%);
}
.stats__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  text-align: center;
}
@media (max-width: 780px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }
}

.stat {
  position: relative;
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-3);
  transition: background-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease-out);
}
.stat:hover { background: var(--surface); box-shadow: var(--sh-2); }
/* Dört sayaç, dört Google rengi */
.stat:nth-child(1) .stat__num { color: var(--g-blue-deep); }
.stat:nth-child(2) .stat__num { color: var(--g-red-deep); }
.stat:nth-child(3) .stat__num { color: var(--g-green-deep); }
.stat:nth-child(4) .stat__num { color: var(--g-yellow-deep); }

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.3vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}
.stat__label {
  color: var(--ink-muted);
  font-size: .88rem;
  line-height: 1.4;
  display: block;
}

/* == 13  KARTLAR ========================================================== */
/* İmza animasyon: kart kenarında tarama çizgisi (sinyal taraması). */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-5);
  align-items: start;
}

/* Kartlar aynı hizada ve eşit genişlikte durur. Bölüm ritmi zaten sola
   yaslı başlık ve karta özgü renkli üst çizgiyle kırılıyor; kartları
   ayrıca kaydırmak hizasız bir merdiven görüntüsü yaratıyordu.
   Eşit yükseklik için stretch: kartlar alt kenarda da hizalanır. */
.cards { align-items: stretch; }
.cards > .card { display: flex; flex-direction: column; }
/* Rozet her kartta en alta yapışır, böylece alt kenarlar da hizalı olur. */
.cards > .card > .badge { margin-top: auto; align-self: flex-start; }

.card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow: var(--sh-1);
  transition:
    transform var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out),
    border-color var(--t-fast) linear;
}
/* Üst kenarda renk sinyali */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--g-blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-slow) var(--ease-out);
}
.card:nth-child(2)::before { background: var(--g-yellow); }
.card:nth-child(3)::before { background: var(--g-green); }
.card:nth-child(4)::before { background: var(--g-red); }
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-4);
  border-color: var(--line-strong);
}
.card:hover::before { transform: scaleX(1); }

/* Tarama çizgisi: kart üzerinde soldan sağa süzülen ışık */
.card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(66, 133, 244, .10), transparent);
}
.card:hover::after { animation: scanline 1.1s var(--ease-out) both; }

.card__no {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-faint);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.card h3 { margin-bottom: var(--sp-4); padding-right: var(--sp-7); }

.quote {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--g-red);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  background: var(--g-red-soft);
  color: var(--danger-text);
  font-size: .94rem;
  font-style: italic;
  line-height: 1.55;
}

.card__signals {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.card__signals li {
  position: relative;
  padding-left: var(--sp-5);
  color: var(--ink-muted);
  font-size: .91rem;
  line-height: 1.55;
}
.card__signals li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--g-blue);
  box-shadow: 0 0 0 3px var(--g-blue-soft);
}

.badge {
  display: inline-block;
  padding: .34rem .8rem;
  border-radius: var(--r-pill);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.45;
}
.badge--danger {
  background: var(--g-red-soft);
  color: var(--danger-text);
  box-shadow: inset 0 0 0 1px rgba(234, 67, 53, .18);
}
.badge--ok {
  background: var(--g-green-soft);
  color: var(--verify-text);
  box-shadow: inset 0 0 0 1px rgba(52, 168, 83, .2);
}

/* --- Not kutusu ---------------------------------------------------------- */
.note {
  position: relative;
  margin: clamp(var(--sp-6), 4vw, var(--sp-7)) auto 0;
  max-width: 76ch;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-left: 4px solid var(--g-green);
  border-radius: 0 var(--r-3) var(--r-3) 0;
  background: linear-gradient(100deg, var(--g-green-soft), var(--surface-alt) 45%);
  color: var(--ink-muted);
  font-size: .96rem;
  box-shadow: var(--sh-2);
}
.note strong { color: var(--g-green-deep); }

/* == 14  KALDIRILABİLİRLİK TESTİ ========================================== */
/* İmza animasyon: sonucun oturması (result-settle) + seçenek kaydırması. */
.elig {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 880px) { .elig { grid-template-columns: 1fr; gap: var(--sp-5); } }

.elig__options { display: grid; gap: var(--sp-2); }
.elig__opt {
  position: relative;
  text-align: left;
  padding: .95rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .96rem;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition:
    border-color var(--t-fast) linear,
    background-color var(--t-fast) linear,
    box-shadow var(--t-mid) var(--ease-out),
    transform var(--t-mid) var(--ease-out);
}
.elig__opt:hover {
  border-color: var(--g-blue);
  box-shadow: var(--sh-2);
  transform: translateX(4px);
}
.elig__opt.is-active {
  border-color: var(--g-blue);
  background: linear-gradient(90deg, var(--g-blue-soft), var(--surface) 70%);
  box-shadow: inset 4px 0 0 var(--g-blue), var(--sh-2);
  color: var(--ink-strong);
  font-weight: 600;
}

.elig__result {
  /* Yapışkan: kullanıcı seçenek listesinde aşağı inerken sonuç görünür
     kalır. min-height boş panelin çökmesini engeller, fazlası alt tarafta
     gereksiz boşluk bırakıyordu. */
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-5));
  min-height: 232px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: var(--sp-6);
  box-shadow: var(--sh-4);
  overflow: hidden;
}
/* Sonuç durumuna göre üst şerit ve atmosfer */
.elig__result::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--line-strong);
  transition: background-color var(--t-mid) linear;
}
.elig--high  { animation: result-settle .45s var(--ease-out) both; }
.elig--medium{ animation: result-settle .45s var(--ease-out) both; }
.elig--low   { animation: result-settle .45s var(--ease-out) both; }
.elig--high::before   { background: var(--g-green); }
.elig--medium::before { background: var(--g-yellow); }
.elig--low::before    { background: var(--ink-faint); }
.elig--high  { box-shadow: var(--sh-4), var(--glow-green); }
.elig--medium{ box-shadow: var(--sh-4), var(--glow-yellow); }

@media (max-width: 880px) { .elig__result { position: static; min-height: 0; } }

.elig__empty {
  text-align: center;
  color: var(--ink-muted);
  padding: var(--sp-7) var(--sp-4);
}
.elig__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--g-blue-soft);
  color: var(--g-blue-deep);
  font-family: var(--font-ui);
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 0 0 6px rgba(66, 133, 244, .07);
}
.elig__empty p { margin: 0; }

.elig__level {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.elig__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex: none;
  background: var(--ink-faint);
}
.elig__level h3 { margin: 0; font-size: 1.25rem; }

.elig--high .elig__dot { background: var(--g-green); box-shadow: 0 0 0 4px var(--g-green-soft); }
.elig--high .elig__level h3 { color: var(--g-green-deep); }
.elig--medium .elig__dot { background: var(--g-yellow); box-shadow: 0 0 0 4px var(--g-yellow-soft); }
.elig--medium .elig__level h3 { color: var(--g-yellow-deep); }
.elig--low .elig__dot { background: var(--ink-faint); box-shadow: 0 0 0 4px var(--surface-sunk); }
.elig--low .elig__level h3 { color: var(--ink-muted); }

.elig__detail { color: var(--ink-muted); font-size: .97rem; }

.elig__cta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.elig__cta .btn { width: 100%; }

.disclaimer {
  margin: var(--sp-6) auto 0;
  max-width: 68ch;
  text-align: center;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* == 15  SÜREÇ ADIMLARI =================================================== */
/* İmza animasyon: adım numarasının kilitlenmesi (step-lock). */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  counter-reset: adim;
  position: relative;
  max-width: 980px;
  margin-inline: auto;
}
.step {
  position: relative;
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
  transition: border-color var(--t-fast) linear, box-shadow var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out);
}
/* Alternatif hizalama: adımlar merdiven gibi kaysın */
@media (min-width: 860px) {
  .step:nth-child(2) { margin-left: var(--sp-7); }
  .step:nth-child(3) { margin-left: calc(var(--sp-7) * 2); }
}
.step:hover {
  border-color: var(--g-blue);
  box-shadow: var(--sh-3);
  transform: translateY(-3px);
}
.step__no {
  flex: none;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--r-2);
  background: linear-gradient(160deg, var(--g-blue-cta), var(--g-blue-deep));
  color: var(--white);
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: var(--glow-blue), var(--ring-inset);
}
.step:nth-child(2) .step__no { background: linear-gradient(160deg, var(--g-yellow), var(--g-yellow-press)); color: var(--ink-strong); box-shadow: var(--glow-yellow), var(--ring-inset); }
/* Gradyanın açık ucu --g-green-cta iken beyaz rakam 4.21:1'de kalıyordu;
   18.4px kalın metin büyük-metin eşiğinin (18.66px) altında olduğu için
   4.5:1 gerekiyor. İki uç da --g-green-deep tabanına çekildi. */
.step:nth-child(3) .step__no { background: linear-gradient(160deg, var(--g-green-deep), var(--g-green-darkest)); box-shadow: var(--glow-green), var(--ring-inset); }
.step:hover .step__no { animation: step-lock .55s var(--ease-out) both; }
.step__body h3 { margin-bottom: var(--sp-2); }
.step__body p { color: var(--ink-muted); margin-bottom: var(--sp-3); }
@media (max-width: 560px) { .step { flex-direction: column; gap: var(--sp-4); } }

/* == 16  HESAPLAYICI ====================================================== */
/* İmza animasyon: puanın yukarı sayması (score-lift) + yıldız parıltısı. */
.calc {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--sp-5);
  align-items: stretch;
}
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; } }

.calc__form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-6);
  align-content: start;
  box-shadow: var(--sh-3);
}
.field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .93rem;
  color: var(--ink-strong);
}
.field__out {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--g-blue-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.field input[type="number"] {
  width: 100%;
  padding: .82rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  font: inherit;
  color: var(--ink);
  background: var(--surface-alt);
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.field input[type="number"]:focus {
  border-color: var(--g-blue);
  background: var(--surface);
  outline: none;
  box-shadow: 0 0 0 3px var(--g-blue-soft);
}

.field input[type="range"] {
  width: 100%;
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--g-blue-soft), var(--surface-sunk));
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--g-blue), var(--g-blue-deep));
  border: 3px solid var(--surface);
  box-shadow: var(--glow-blue);
  transition: transform var(--t-fast) var(--ease-out);
}
.field input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
.field input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--g-blue);
  border: 3px solid var(--surface);
  box-shadow: var(--glow-blue);
}

/* Sonuç paneli — sayfadan yüzen koyu kart. */
.calc__result {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(66, 133, 244, .3), transparent 68%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--on-navy);
  border-radius: var(--r-4);
  padding: var(--sp-6);
  text-align: center;
  display: grid;
  align-content: center;
  gap: var(--sp-2);
  box-shadow: var(--sh-5);
}
.calc__result::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 70%;
  pointer-events: none;
  background: radial-gradient(50% 100% at 50% 100%, rgba(52, 168, 83, .28), transparent 70%);
}
.calc__result > * { position: relative; }
.calc__label {
  color: var(--on-navy-muted);
  font-size: .87rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
}
.calc__score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.calc__from {
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--on-navy-faint);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.calc__arrow { color: var(--g-yellow); font-weight: 700; }
.calc__to {
  font-size: clamp(2.7rem, 6vw, 3.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 24px rgba(66, 133, 244, .5);
  animation: score-lift .7s var(--ease-out) both;
}
.calc__stars {
  color: var(--g-yellow);
  font-size: 1.6rem;
  letter-spacing: 4px;
  animation: star-shimmer 3.2s ease-in-out infinite;
}
.calc__delta { color: var(--g-green); font-weight: 600; margin: 0; }
.calc__error { color: var(--danger-on-navy); font-weight: 500; margin: 0; }
.calc__result .btn { margin-top: var(--sp-3); justify-self: center; }

/* == 17  VAKALAR + SEKTÖRLER ============================================== */

/* --- Ürün panelleri (gerçek ekran görselleri) ---------------------------- */
.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}

.panel {
  margin: 0;
  display: grid;
  gap: var(--sp-4);
}

.panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: var(--sh-4);
  transition:
    transform var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out);
}

.panel:hover img {
  transform: translateY(-6px) scale(1.012);
  box-shadow: var(--sh-5);
}

.panel figcaption {
  color: var(--ink-muted);
  font-size: .94rem;
  line-height: 1.6;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--g-blue);
}

.panel figcaption strong {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
}

/* Paneller aynı hizada durur; kaydırma hizasız görünüyordu. */
.panels { align-items: start; }

@media (prefers-reduced-motion: reduce) {
  .panel:hover img { transform: none; }
}

/* İmza animasyon: puan kartında konfeti (başarı). */
.case__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.case__sector { color: var(--ink-muted); font-size: .82rem; font-weight: 500; }
.case__score {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.case__from {
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink-faint);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.case__arrow { color: var(--g-blue); font-weight: 700; }
.case__to {
  font-size: 2.35rem;
  font-weight: 700;
  color: var(--g-green-deep);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.case:hover .case__to { animation: confetti-pop .6s var(--ease-out) both; }
.case__meta {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.case__meta li { color: var(--ink-muted); font-size: .88rem; }
.case__meta strong {
  display: block;
  color: var(--ink-strong);
  font-family: var(--font-ui);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.case__note { margin: 0; color: var(--ink-muted); font-size: .92rem; }
.case::before { background: var(--g-green); }
.case:nth-child(2)::before { background: var(--g-blue); }
.case:nth-child(3)::before { background: var(--g-yellow); }

/* --- Sektör / bölge listesi ---------------------------------------------- */
.sectors {
  position: relative;
  margin-top: clamp(var(--sp-7), 5vw, var(--sp-8));
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  background:
    radial-gradient(60% 120% at 100% 0%, var(--g-blue-soft), transparent 65%),
    var(--surface-alt);
  border-radius: var(--r-4);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.sectors h3 { margin-bottom: var(--sp-3); }
.sectors p { color: var(--ink-muted); margin-bottom: var(--sp-4); max-width: 72ch; }
.sectors__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.sectors__tags li {
  padding: .38rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .85rem;
  color: var(--ink-muted);
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) linear,
              border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.sectors__tags li:hover {
  transform: translateY(-2px);
  color: var(--g-blue-deep);
  border-color: var(--g-blue);
  box-shadow: var(--sh-2);
}

/* == 18  GÜVENCE SÜTUNLARI ================================================ */
/* İmza animasyon: kalkan parlaması (shield-sweep). */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--sp-5);
}
.pillar {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-navy);
  border-radius: var(--r-3);
  padding: var(--sp-6) var(--sp-5);
  transition: transform var(--t-mid) var(--ease-out), border-color var(--t-fast) linear,
              background-color var(--t-fast) linear;
}
.pillar:hover {
  transform: translateY(-5px);
  border-color: var(--on-navy-faint);
  background: rgba(255, 255, 255, .09);
}
.pillar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 55%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent);
}
.pillar:hover::after { animation: shield-sweep 1s var(--ease-out) both; }
.pillar__icon {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-2);
  background: rgba(66, 133, 244, .22);
  color: var(--on-navy);
  font-size: 1.35rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.pillar:nth-child(2) .pillar__icon { background: rgba(52, 168, 83, .24); }
.pillar:nth-child(3) .pillar__icon { background: rgba(251, 188, 4, .24); }
.pillar:nth-child(4) .pillar__icon { background: rgba(234, 67, 53, .24); }
.pillar h3 { margin-bottom: var(--sp-3); font-size: 1.1rem; }
.pillar p { color: var(--on-navy-muted); font-size: .93rem; margin: 0; }

/* == 19  SSS ============================================================== */
/* İmza animasyon: cevabın açılışı (answer-open). */
.faq {
  max-width: 880px;
  margin-inline: auto;
  display: grid;
  gap: var(--sp-2);
}
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: border-color var(--t-fast) linear, box-shadow var(--t-mid) var(--ease-out);
}
.faq__item:hover { box-shadow: var(--sh-2); }
.faq__item[open] {
  border-color: var(--g-blue);
  box-shadow: var(--sh-3), 0 0 0 3px var(--g-blue-soft);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 3.2rem 1.15rem var(--sp-5);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-strong);
  position: relative;
  transition: color var(--t-fast) linear;
}
.faq__item summary:hover { color: var(--g-blue-deep); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute;
  right: var(--sp-5);
  top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--g-blue);
  border-bottom: 2px solid var(--g-blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t-mid) var(--ease-out);
}
.faq__item[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq__body {
  padding: 0 var(--sp-5) var(--sp-5);
  animation: answer-open .35s var(--ease-out) both;
}
.faq__body p { margin: 0; color: var(--ink-muted); font-size: .96rem; }

/* == 20  KAPANIŞ CTA ====================================================== */
/* İmza animasyon: yavaş dönen aura (aura-drift). */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-alt);
  color: var(--ink);
  padding-block: clamp(var(--sp-8), 9vw, var(--sp-9));
  text-align: center;
  border-top: 1px solid var(--line);
}
.cta::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(28% 34% at 30% 40%, var(--wash-blue), transparent 70%),
    radial-gradient(26% 30% at 68% 34%, var(--wash-red), transparent 70%),
    radial-gradient(30% 32% at 56% 72%, var(--wash-yellow), transparent 70%),
    radial-gradient(28% 30% at 40% 68%, var(--wash-green), transparent 70%);
  animation: aura-drift 26s linear infinite;
}
.cta__inner { max-width: 760px; }
.cta h2 { color: var(--ink-strong); }
.cta p { color: var(--ink-muted); margin-bottom: var(--sp-6); font-size: 1.05rem; }
.cta__note { margin: var(--sp-4) 0 0; font-size: .86rem; color: var(--ink-muted); }
.cta .btn--gold { box-shadow: var(--glow-blue-lg), var(--ring-inset); }

/* == 21  FOOTER =========================================================== */
.footer {
  background: var(--navy-deep);
  color: var(--on-navy-muted);
  padding-block: clamp(var(--sp-7), 6vw, var(--sp-8)) var(--sp-5);
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--g-blue) 0 25%, var(--g-red) 25% 50%,
    var(--g-yellow) 50% 75%, var(--g-green) 75% 100%);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line-navy);
}
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

.footer__brand img { width: 210px; margin-bottom: var(--sp-4); }
.footer__brand p { font-size: .92rem; max-width: 42ch; margin: 0; }

.footer__col { display: grid; gap: var(--sp-2); align-content: start; }
.footer__col h3 {
  color: var(--on-navy);
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.footer__col a, .footer__col span {
  color: var(--on-navy-muted);
  text-decoration: none;
  font-size: .92rem;
  transition: color var(--t-fast) linear;
}
.footer__col a:hover { color: var(--g-yellow); }

.footer__bottom { padding-top: var(--sp-5); font-size: .85rem; }
.footer__bottom p { margin: 0 0 var(--sp-2); }
.footer__legal { color: var(--on-navy-faint); font-size: .79rem; line-height: 1.55; }

/* == 22  KEYFRAME KÜTÜPHANESİ ============================================= */

/* Hero — canlılık göstergesi */
@keyframes pulse {
  70%  { box-shadow: 0 0 0 10px rgba(52, 168, 83, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 168, 83, 0); }
}

/* Hero — harita iğnesi düşüyor */
@keyframes pin-drop {
  0%   { opacity: 0; transform: translateY(-26px) scale(.97); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Kartlar — sinyal tarama çizgisi */
@keyframes scanline {
  0%   { opacity: 0; transform: translateX(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(350%); }
}

/* Test — sonucun yerine oturması */
@keyframes result-settle {
  0%   { opacity: 0; transform: translateY(10px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Süreç — adım numarasının kilitlenmesi */
@keyframes step-lock {
  0%   { transform: rotate(0deg) scale(1); }
  45%  { transform: rotate(-9deg) scale(1.08); }
  75%  { transform: rotate(4deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Hesaplayıcı — puanın yukarı kalkması */
@keyframes score-lift {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Hesaplayıcı — yıldızların parıldaması */
@keyframes star-shimmer {
  0%, 100% { opacity: 1; }
  50%      { opacity: .68; }
}

/* Vakalar — başarı konfetisi */
@keyframes confetti-pop {
  0%   { transform: scale(1) rotate(0deg); }
  35%  { transform: scale(1.16) rotate(-3deg); }
  65%  { transform: scale(.98) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Güvence — kalkan üzerinde ışık süpürmesi */
@keyframes shield-sweep {
  0%   { opacity: 0; transform: translateX(0); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(320%); }
}

/* SSS — cevabın açılışı */
@keyframes answer-open {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* CTA — dört renkli auranın yavaş dönüşü */
@keyframes aura-drift {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Menü — mobil panelin inişi */
@keyframes menu-drop {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* == 23  DAR EKRAN DÜZELTMELERİ =========================================== */
@media (max-width: 400px) {
  body { font-size: 16px; }
  .card { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .card h3 { padding-right: var(--sp-6); }
  .calc__form, .elig__result, .linkbox { padding: var(--sp-5); }
  .case__meta { gap: var(--sp-4); }
  .section--navy { border-radius: var(--r-3); margin-inline: 0; }
}

/* == 25  YÜZEN BUTONLAR + DESTEK PANELİ =================================== */

.fab {
  position: fixed;
  bottom: clamp(var(--sp-4), 3vw, var(--sp-6));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .8rem 1.15rem;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.fab svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.fab:hover { transform: translateY(-3px); }

.fab--wa {
  left: clamp(var(--sp-4), 3vw, var(--sp-6));
  /* Beyaz metin taşıdığı için her iki degrade ucu da AA geçmek zorunda:
     eski #2fb457 açık ucu 2.70:1'de kalıyordu (gerekli 4.5:1).
     Şimdi 5.95:1 → 8.13:1 aralığında. */
  background: linear-gradient(160deg, var(--g-green-deep), var(--g-green-darkest));
  box-shadow: 0 6px 20px rgba(19, 115, 51, .38), 0 2px 6px rgba(16, 24, 40, .12);
}
.fab--wa:hover { box-shadow: 0 10px 28px rgba(19, 115, 51, .48); }

.fab--chat {
  right: clamp(var(--sp-4), 3vw, var(--sp-6));
  background: linear-gradient(160deg, var(--g-blue-cta), var(--g-blue-deep));
  box-shadow: var(--glow-blue), 0 2px 6px rgba(16, 24, 40, .12);
  position: fixed;
}
.fab--chat:hover { box-shadow: var(--glow-blue-h), 0 4px 10px rgba(16, 24, 40, .16); }

/* Dikkat çeken tek seferlik nabız — panel açılınca durur */
.fab__ping {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--g-blue);
  opacity: 0;
  animation: fab-ping 3.2s var(--ease-out) 2s 3;
  pointer-events: none;
}
@keyframes fab-ping {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
.chat.is-open ~ .fab--chat .fab__ping,
.fab--chat.is-active .fab__ping { animation: none; opacity: 0; }

@media (max-width: 560px) {
  .fab__label { display: none; }
  .fab { padding: .85rem; }
}

/* --- Destek paneli ------------------------------------------------------- */
.chat {
  position: fixed;
  right: clamp(var(--sp-4), 3vw, var(--sp-6));
  bottom: calc(clamp(var(--sp-4), 3vw, var(--sp-6)) + 62px);
  z-index: 70;
  width: min(380px, calc(100vw - 2 * clamp(var(--sp-4), 3vw, var(--sp-6))));
  /* Sabit yükseklik: panel yalnız içeriği kadar büyüdüğünde sohbet alanı
     ~110px'e sıkışıyor ve mesajlar okunmuyordu. Artık ekranın izin
     verdiği kadarını alıp fazlasını sohbet alanına veriyor. */
  height: min(600px, calc(100vh - 130px));
  max-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--sh-5);
  overflow: hidden;
  transform-origin: 100% 100%;
  animation: chat-in .32s var(--ease-out);
}
/* Panel varsayilan olarak GORUNUR; animasyon yalnizca giris hareketini
   ekler. "both" fill-mode ile animasyonun ilerlemedigi ortamlarda panel
   opacity:0 da donup kaliyordu. */
@keyframes chat-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.chat__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  color: var(--on-navy);
}
.chat__brand { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; }
.chat__avatar {
  width: 38px; height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-light), var(--gold-dark));
  color: var(--navy-deep);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .85rem;
}
.chat__head strong { display: block; font-size: .95rem; color: var(--on-navy); }
.chat__status {
  display: block;
  font-size: .72rem;
  color: var(--on-navy-muted);
  line-height: 1.35;
}
.chat__close {
  flex: none;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--on-navy);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.chat__close:hover { background: rgba(255, 255, 255, .24); }

.chat__log {
  flex: 1 1 auto;
  /* Taban yükseklik: alt bölümler şiştiğinde sohbet alanı ezilmesin. */
  min-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  background: var(--surface-alt);
}

.msg {
  max-width: 86%;
  padding: .62rem .85rem;
  border-radius: var(--r-3);
  font-size: .88rem;
  line-height: 1.5;
  animation: msg-in .28s var(--ease-out) both;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.msg--bot {
  justify-self: start;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-left-radius: var(--r-1);
}
.msg--user {
  justify-self: end;
  background: linear-gradient(160deg, var(--g-blue-cta), var(--g-blue-deep));
  color: #fff;
  border-bottom-right-radius: var(--r-1);
}

/* Yazıyor göstergesi */
.msg--typing { display: inline-flex; gap: 4px; padding: .7rem .85rem; }
.msg--typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: typing 1.1s infinite;
}
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Hızlı soru düğmeleri */
.chat__quick {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  overflow-x: auto;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.chat__q {
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .82rem;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.chat__q:hover { border-color: var(--g-blue); background: var(--g-blue-soft); }

.chat__foot { flex: none; padding: var(--sp-2) var(--sp-4) var(--sp-3); background: var(--surface); }
.chat__cta { width: 100%; font-size: .88rem; padding: .75rem 1rem; }

@media (max-width: 560px) {
  .chat { bottom: calc(clamp(var(--sp-4), 3vw, var(--sp-6)) + 58px); }
}

@media (prefers-reduced-motion: reduce) {
  .chat, .msg { animation: none; }
  .fab__ping { animation: none; opacity: 0; }
  .msg--typing i { animation: none; }
}

/* Yalnızca ekran okuyucular için */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sohbet giriş alanı */
.chat__form {
  flex: none;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) 0;
  background: var(--surface);
}
.chat__form input {
  flex: 1;
  min-width: 0;
  padding: .6rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: .87rem;
  color: var(--ink);
  background: var(--surface);
}
.chat__form input:focus { border-color: var(--g-blue); outline: none; }
.chat__form button {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--g-blue-cta), var(--g-blue-deep));
  color: #fff;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.chat__form button:hover { transform: scale(1.06); }
.chat__form button svg { width: 17px; height: 17px; fill: currentColor; }

/* Yüzen butonlar sabit konumlu ve footer içeriğini örtebiliyor.
   Boşluk body yerine footer'ın KENDİ alt dolgusuna eklenir: body'ye
   verildiğinde koyu footer'ın altında beyaz bir şerit kalıyordu. */
.footer { padding-bottom: calc(var(--sp-5) + 76px); }
@media (max-width: 560px) { .footer { padding-bottom: calc(var(--sp-5) + 68px); } }

/* hidden özniteliği display:flex tarafından eziliyordu; panel açılmadan
   önce görünür kalıyordu. Bu kural onu kesin olarak gizler. */
.chat[hidden] { display: none !important; }

/* --- Destek paneli: kategoriler, takip önerileri, araçlar --------------- */

/* Kategori düğmeleri */
.chat__cat {
  padding: .4rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.chat__cat:hover { border-color: var(--g-blue); color: var(--g-blue-deep); }
.chat__cat.is-active {
  background: var(--g-blue-soft);
  border-color: var(--g-blue);
  color: var(--g-blue-deep);
}
.chat__cat--lead {
  background: var(--g-green-soft);
  border-color: var(--g-green);
  color: var(--g-green-deep);
}
.chat__cat--more {
  border-style: dashed;
  color: var(--g-blue-deep);
}

/* Şerit tek satırda kalır, taşarsa kendi içinde yatay kayar.
   min-width:0 olmadan flex çocuk kendi içeriği kadar genişleyip
   sayfayı taşırıyordu. */
.chat__quick {
  flex-wrap: nowrap;
  min-width: 0;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.chat__quick .chat__cat { flex: none; }

/* Kategori seçilince sohbetin içinde açılan soru listesi */
.chat__catlist {
  justify-self: stretch;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  animation: msg-in .24s var(--ease-out);
}
.chat__catlist-head {
  font-family: var(--font-ui);
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .02em;
}

/* Cevabın altındaki takip önerileri */
.msg__next {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-self: start;
  max-width: 92%;
  animation: msg-in .3s var(--ease-out) both;
}
.chat__next {
  padding: .38rem .75rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: .8rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.chat__next:hover {
  border-style: solid;
  border-color: var(--g-blue);
  color: var(--g-blue-deep);
  background: var(--g-blue-soft);
}
.chat__next--lead,
.chat__next--tool {
  border-style: solid;
  border-color: var(--g-green);
  color: var(--g-green-deep);
}
.chat__next--send {
  border: 0;
  background: linear-gradient(160deg, var(--g-green-deep), var(--g-green-darkest));
  color: #fff;
  font-weight: 700;
  padding: .55rem 1rem;
}

/* Panel içi araçlar */
.chat__tool {
  max-width: 100%;
  display: grid;
  gap: var(--sp-2);
}
.chat__tool strong { font-size: .88rem; }
.chat__tool label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: .82rem;
  color: var(--ink-muted);
}
.chat__tool input {
  width: 92px;
  padding: .3rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font: inherit;
  font-size: .82rem;
  text-align: right;
}
.chat__tool input:focus { border-color: var(--g-blue); outline: none; }
.chat__toolopts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chat__toolopts .chat__q { font-size: .78rem; padding: .32rem .62rem; }

.chat__toolout {
  margin: 0;
  padding: .5rem .7rem;
  border-radius: var(--r-1);
  background: var(--surface-sunk);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.chat__toolout.is-ok,
.chat__toolout.is-high { background: var(--g-green-soft); color: var(--g-green-deep); }
.chat__toolout.is-medium { background: #fdf3e3; color: #8a5713; }
.chat__toolout.is-low { background: var(--surface-sunk); color: var(--ink-muted); }
.chat__toolout.is-err { background: var(--g-red-soft); color: var(--g-red-deep); }

/* Açılış selamı */
.chat-teaser {
  position: fixed;
  right: calc(clamp(var(--sp-4), 3vw, var(--sp-6)) + 4px);
  bottom: calc(clamp(var(--sp-4), 3vw, var(--sp-6)) + 60px);
  z-index: 65;
  max-width: 240px;
  padding: .7rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  border-bottom-right-radius: var(--r-1);
  background: var(--surface);
  box-shadow: var(--sh-4);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
  animation: teaser-in .4s var(--ease-spring) both;
}
.chat-teaser:hover { border-color: var(--g-blue); }
@keyframes teaser-in {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.chat-teaser[hidden] { display: none !important; }

/* Mobilde panel tam ekrana yakın açılır */
@media (max-width: 560px) {
  .chat {
    right: var(--sp-3);
    left: var(--sp-3);
    width: auto;
    bottom: calc(clamp(var(--sp-4), 3vw, var(--sp-6)) + 58px);
    max-height: calc(100vh - 130px);
  }
  .chat-teaser { max-width: 200px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__catlist, .msg__next, .chat-teaser { animation: none; }
}

/* Asistan başlığındaki canlılık noktası */
.chat__status { display: flex; align-items: center; gap: .35rem; }
.chat__dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--g-green);
  box-shadow: 0 0 0 0 rgba(52, 168, 83, .6);
  animation: pulse 2.4s infinite;
}
.chat__avatar { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .chat__dot { animation: none; } }

/* Footer adresi — <address> varsayılan italiğini nötrler */
.footer__adres {
  font-style: normal;
  color: var(--on-navy-muted);
  font-size: .93rem;
  line-height: 1.55;
  margin: 0;
}