/* =========================================================================
   Luvi Psikoloji — tema
   Tasarım taslaklarından çıkarıldı: lacivert başlık + turuncu gradyan vurgu,
   sıcak krem zeminler, yumuşak beyaz kartlar, pastel ikon kutuları,
   el yazısı süs notları, yeşil WhatsApp şeridi.

   HEX değerler YALNIZ bu :root bloğunda. Başka yerde çıplak renk yazılmaz.
   ========================================================================= */

:root {
  /* Zeminler — logonun beyaz/krem dünyası */
  --krem:        #FFFAF3;
  --krem-2:      #FDF3E6;
  --krem-3:      #FBE9D5;
  --beyaz:       #FFFFFF;

  /* Metin — taslakta başlıklar lacivert, gövde ılık gri */
  --lacivert:    #16375C;
  --lacivert-2:  #1E4B78;
  --gri:         #64748B;
  --gri-2:       #94A3B8;

  /* Marka turuncusu (logodan) — VARSAYILAN palet.
     Panelde Tema Ayarları'ndan bir vurgu rengi seçilmişse bu dört değişken
     (+ --seftali-zem) /tema.css ile ezilir; koyu/açık tonlar orada tek
     renkten color-mix ile türetilir. Ayar yoksa dosya hiç yüklenmez ve
     aşağıdaki değerler geçerli kalır.
     Vurguya bağlı yarı saydam kullanımlar (hover gölgesi, kenarlık, odak
     halkası) artık sabit rgba değil, var(--turuncu) üzerinden türetiliyor —
     yoksa renk değişince site yarı yeni yarı eski görünürdü. */
  --turuncu:     #F97316;
  --turuncu-koy: #EA580C;
  --turuncu-ack: #FB923C;
  --amber:       #FBBF24;
  --amber-ack:   #FDE68A;

  /* Yardımcı renkler */
  --yesil:       #22C55E;
  --yesil-koy:   #15803D;
  --yesil-zem:   #ECFDF3;
  --mavi-zem:    #EFF6FF;
  --pembe-zem:   #FEF2F2;
  --seftali-zem: #FFF1E4;
  --sari-zem:    #FEF6E0;

  --kenar:       #F3E5D2;
  --kenar-2:     #E8EEF5;
  --hata:        #B42318;

  --golge-s:     0 2px 10px rgba(22, 55, 92, .05);
  --golge:       0 10px 30px rgba(22, 55, 92, .07);
  --golge-b:     0 22px 48px rgba(22, 55, 92, .11);
  --golge-tur:   0 10px 24px color-mix(in srgb, var(--turuncu) 28%, transparent);

  --r:           18px;
  --r-b:         26px;
  --r-k:         12px;

  --baslik-yazi: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --govde-yazi:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --el-yazisi:   "Caveat", "Segoe Script", cursive;

  --en:          1200px;
  --bosluk:      clamp(18px, 4vw, 32px);

  /* Hareket eğrileri — TEK YERDE, HEX'ler gibi.
     `--yay` yumuşak bir çıkış (ease-out ailesi); `--yay-geri` sonda hafifçe
     hedefi aşıp geri gelir, yani "canlı" hissi buradan gelir ve yalnız KÜÇÜK
     öğelerde kullanılır. Büyük bir blokta aşma, sayfa zıplıyormuş gibi
     görünür; o yüzden bölüm/kart girişleri `--yay` ile. */
  --yay:      cubic-bezier(.22, .61, .36, 1);
  --yay-geri: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--krem);
  color: var(--gri);
  font-family: var(--govde-yazi);
  font-size: clamp(.97rem, .94rem + .16vw, 1.03rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--baslik-yazi);
  color: var(--lacivert);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem); }
h3 { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--turuncu-koy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }

:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 3px; border-radius: 6px; }

/* --- iskelet ------------------------------------------------------------ */
.kabuk { width: 100%; max-width: var(--en); margin-inline: auto; padding-inline: var(--bosluk); }
.bolum { padding-block: clamp(48px, 7vw, 88px); position: relative; }
.bolum--krem { background: linear-gradient(180deg, var(--krem-2), var(--krem)); }
.bolum--beyaz { background: var(--beyaz); }
.bolum--dar { padding-block: clamp(36px, 5vw, 60px); }

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--lacivert); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-k) 0;
}
.atla:focus { left: 0; }

/* --- başlık blokları ----------------------------------------------------- */
.uste { /* eyebrow */
  display: block; font-size: .8rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--turuncu); margin-bottom: 12px;
}
.bolum-basi { max-width: 60ch; margin-bottom: clamp(26px, 3.5vw, 44px); }
.bolum-basi--orta { margin-inline: auto; text-align: center; }
.bolum-basi p { color: var(--gri); }
.bolum-basi h2 { margin-bottom: .35em; }

.cizgi-alt { position: relative; padding-bottom: 14px; }
.cizgi-alt::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 4px;
  border-radius: 4px; background: linear-gradient(90deg, var(--turuncu), var(--amber));
}
.bolum-basi--orta .cizgi-alt::after { left: 50%; transform: translateX(-50%); }

.vurgu { color: var(--turuncu); }
.el-yazisi {
  font-family: var(--el-yazisi); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.7rem);
  line-height: 1.35; color: var(--lacivert-2); opacity: .85;
}
.el-yazisi--tur { color: var(--turuncu-koy); }

/* --- düğmeler ------------------------------------------------------------ */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.dugme:hover { text-decoration: none; }
.dugme--birincil {
  background: linear-gradient(135deg, var(--turuncu), var(--turuncu-ack));
  color: #fff; box-shadow: var(--golge-tur);
}
.dugme--birincil:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--turuncu) 34%, transparent); }
.dugme--beyaz { background: var(--beyaz); color: var(--lacivert); box-shadow: var(--golge-s); }
.dugme--beyaz:hover { transform: translateY(-2px); box-shadow: var(--golge); }
.dugme--cizgi { background: var(--beyaz); border-color: color-mix(in srgb, var(--turuncu) 45%, transparent); color: var(--turuncu-koy); }
.dugme--cizgi:hover { border-color: var(--turuncu); background: var(--seftali-zem); }
.dugme--yesil { background: var(--yesil); color: #fff; box-shadow: 0 10px 22px rgba(34, 197, 94, .3); }
.dugme--yesil:hover { transform: translateY(-2px); background: var(--yesil-koy); }
.dugme--kucuk { padding: 9px 18px; font-size: .87rem; }
.dugme--tam { width: 100%; }
.dugme--buyuk { padding: 16px 32px; font-size: 1rem; }

.yuvarlak-ok {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: var(--seftali-zem); color: var(--turuncu);
  transition: background-color .15s ease, transform .15s ease;
}

/* --- üst bar ------------------------------------------------------------- */
.ust {
  position: sticky; top: 0; z-index: 60; background: var(--beyaz);
  box-shadow: 0 1px 0 rgba(22, 55, 92, .06), 0 6px 24px rgba(22, 55, 92, .04);
}
.ust__ic { display: flex; align-items: center; gap: 18px; min-height: 78px; }
.marka { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.marka:hover { text-decoration: none; }
.marka img { width: 48px; height: 48px; }
.marka__ad { display: grid; line-height: 1; gap: 4px; }
.marka__ad strong {
  font-family: var(--baslik-yazi); font-size: 1.28rem; font-weight: 700;
  letter-spacing: .18em; color: var(--turuncu);
}
.marka__ad span { font-size: .66rem; letter-spacing: .32em; color: var(--turuncu-ack); font-weight: 700; }

.gezinti { display: flex; align-items: center; gap: 2px; }
.gezinti__kalem { position: relative; }
.gezinti__bag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: .95rem;
  color: var(--lacivert); background: none; border: 0; font-family: inherit; cursor: pointer;
}
.gezinti__bag:hover { color: var(--turuncu-koy); text-decoration: none; }
.gezinti__bag[aria-current="page"], .gezinti__kalem--etkin > .gezinti__bag {
  color: var(--turuncu); position: relative;
}
.gezinti__kalem--etkin > .gezinti__bag::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--turuncu);
}
.gezinti__bag svg { transition: transform .15s ease; }
.gezinti__bag[aria-expanded="true"] svg { transform: rotate(180deg); }

.acilir {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--beyaz); border: 1px solid var(--kenar-2); border-radius: var(--r);
  box-shadow: var(--golge-b); padding: 18px; z-index: 70;
}
.acilir[hidden] { display: none; }
.acilir--sade { min-width: 240px; display: grid; gap: 2px; }
/* Eski mega kuralı kaldırıldı; yeni mega ızgarası aşağıda (.mega). */
.acilir__grup h4 {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--turuncu); margin-bottom: 10px; display: flex; align-items: center; gap: 7px;
}
.acilir__grup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.acilir a {
  display: block; padding: 8px 10px; border-radius: 10px;
  color: var(--lacivert); font-size: .92rem; font-weight: 600; line-height: 1.35;
}
.acilir a:hover { background: var(--seftali-zem); color: var(--turuncu-koy); text-decoration: none; }
.acilir a small { display: block; font-weight: 500; color: var(--gri-2); font-size: .8rem; }

.ust__eylem { display: flex; align-items: center; gap: 10px; }
.wa-yuvarlak {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--yesil); color: #fff; box-shadow: 0 8px 18px rgba(34, 197, 94, .32);
}
.wa-yuvarlak:hover { background: var(--yesil-koy); text-decoration: none; transform: translateY(-2px); }

.menu-dugme {
  display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--kenar-2);
  background: var(--beyaz); color: var(--lacivert); cursor: pointer; place-items: center;
}

/* --- kahraman (hero) ----------------------------------------------------- */
.kahraman {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--krem-2) 0%, var(--krem) 45%, var(--krem-3) 100%);
  padding-block: clamp(36px, 5vw, 64px) clamp(60px, 8vw, 96px);
}
.kahraman__ic { position: relative; display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 940px) { .kahraman__ic { grid-template-columns: 1.02fr .98fr; } }
.kahraman h1 { margin-bottom: .35em; }
.kahraman h1 .vurgu { position: relative; white-space: nowrap; }
.kahraman h1 .vurgu::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: .1em;
  border-radius: 99px; background: linear-gradient(90deg, var(--turuncu), var(--amber));
  opacity: .55;
}
.kahraman__giris { font-size: 1.03rem; max-width: 54ch; }
.kahraman__eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.kahraman__rozet { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; }
.kahraman__rozet span { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--lacivert); }
.kahraman__rozet svg { color: var(--turuncu); }

/* Fotoğraf yerine geçen sıcak görsel alan (gerçek foto panelden yüklenince
   aynı çerçeveye oturur) */
.gorsel-cerceve {
  position: relative; border-radius: var(--r-b); overflow: hidden;
  background: linear-gradient(140deg, var(--seftali-zem), var(--sari-zem) 55%, var(--yesil-zem));
  box-shadow: var(--golge-b); aspect-ratio: 4 / 3; display: grid; place-items: center;
}
/* ═══ ÇERÇEVE GÖRSELLERİ MUTLAK KONUMLANIR ════════════════════════════════
   ÖLÇÜLEN KUSUR: `height: 100%` bir IZGARA ÖĞESİNDE, satır `auto` ise
   ÇÖZÜLMÜYOR — yüzde tanımsız kapsayıcıya karşı `auto`ya düşüyor ve görsel
   kendi DOĞAL yüksekliğinde kalıyor. Sonuç: `object-fit: cover` hiç devreye
   girmiyor, dolayısıyla `object-position` (panelden seçilen odak) hiçbir şey
   yapmıyor. Kişi sayfasında ölçüldü: çerçeve 526×526, görsel 526×702.

   Kırpma o zaman TAŞMA + ORTALAMA ile oluyordu; kullanıcı da haklı olarak
   "panelden seçiyorum ama sitede değişmiyor" dedi. `overflow: hidden` olmayan
   çerçevelerde (kişi kartı) ise tersi oluyordu: görsel çerçeveyi geriyor,
   `aspect-ratio: 1/1` sessizce yok sayılıyor, kart 3:4 çıkıyordu.

   ÇÖZÜM MUTLAK KONUM. Denendi ve ELENDİ: `align-self: stretch` işe yaramıyor,
   çünkü esnetme yalnız eksen boyu `auto` iken uygulanır ve burada `height`
   açıkça `100%`. `min-height: 100%` çalışıyor ama aynı tanımsızlık kuralına
   takılıyor, tarayıcı davranışına güvenmek gerekiyor. Mutlak konum ikisine de
   bağlı değil: kutu doğrudan konumlanmış atadan gelir.

   Bu kalıp kod tabanında ZATEN VAR — `.mega__gorsel img` yıllardır böyle.
   Dört çerçeve ona hizalandı.

   ÇERÇEVEYE `position: relative` ZORUNLU: yoksa görsel en yakın konumlanmış
   atayı arar ve sayfanın tamamına yayılır. `overflow: hidden` de zorunlu:
   `border-radius`/kare oranı ancak o zaman gerçekten kırpar. */
.gorsel-cerceve img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ═══ GÖRSELİN HANGİ KISMI GÖRÜNSÜN ════════════════════════════════════════
   `object-fit: cover` görseli kırpar; hangi kısmın kalacağını
   `object-position` söyler. Karar İKİ kaynaktan gelebiliyor:

   1) ELLE SEÇİM — panelde kişi başına seçilen odak (`alanlar.odak`).
      Sınıf olarak basılıyor, satır içi `style` ile DEĞİL: sitenin CSP'si
      `style-src 'self'` ve nonce yok, satır içi stil engellenirdi.
      İki eksen iki değişkene yazıyor; `object-position` tek özellik
      olduğu için onu iki ayrı sınıfa bölmenin başka yolu yok.

   2) OTOMATİK TAHMİN — seçim yoksa, görsel dikeyse (`data-dikey`).
      Mekân fotoğrafında içerik alt yarıdadır (üstte tavan kalır);
      PORTREDE tersi, baş üsttedir. O yüzden kişi kapsayıcılarında
      ayrı kural var.

   PHP ikisini aynı anda basmaz: elle seçim varsa `data-dikey` hiç
   yazılmaz. Yazılsaydı kapsayıcıya bağlı varsayılan (0-2-1) tek sınıflı
   seçimi (0-1-0) özgüllükte yener ve kullanıcının tercihi yok sayılırdı. */
img[data-dikey],
img[class*="odak-"] { object-position: var(--odak-x, 50%) var(--odak-y, 50%); }

/* 21 KADEME, BEŞER BEŞER. Panel seçimi fotoğrafın üstünde sürükleyerek
   yapılıyor; beş kademe (üst/üst-orta/orta/alt-orta/alt) yetmiyordu.
   Adım 5 seçildi çünkü 3:4 bir portrede bir kademe fotoğraf yüksekliğinin
   %1,25'i (~27 piksel) — gözle ayırt edilemeyecek kadar ince, ama 21 kural
   da stil sayfasına ~1 KB ekliyor. PHP tarafı (`by_odak_sayi()`) yalnız
   beşin katlarını geçiriyor; ara bir değer sınıfsız kalır ve seçim
   sessizce ortalanırdı. İKİ TARAF BİRLİKTE DEĞİŞMELİ. */
.odak-x-0 { --odak-x: 0%; }
.odak-x-5 { --odak-x: 5%; }
.odak-x-10 { --odak-x: 10%; }
.odak-x-15 { --odak-x: 15%; }
.odak-x-20 { --odak-x: 20%; }
.odak-x-25 { --odak-x: 25%; }
.odak-x-30 { --odak-x: 30%; }
.odak-x-35 { --odak-x: 35%; }
.odak-x-40 { --odak-x: 40%; }
.odak-x-45 { --odak-x: 45%; }
.odak-x-50 { --odak-x: 50%; }
.odak-x-55 { --odak-x: 55%; }
.odak-x-60 { --odak-x: 60%; }
.odak-x-65 { --odak-x: 65%; }
.odak-x-70 { --odak-x: 70%; }
.odak-x-75 { --odak-x: 75%; }
.odak-x-80 { --odak-x: 80%; }
.odak-x-85 { --odak-x: 85%; }
.odak-x-90 { --odak-x: 90%; }
.odak-x-95 { --odak-x: 95%; }
.odak-x-100 { --odak-x: 100%; }

.odak-y-0 { --odak-y: 0%; }
.odak-y-5 { --odak-y: 5%; }
.odak-y-10 { --odak-y: 10%; }
.odak-y-15 { --odak-y: 15%; }
.odak-y-20 { --odak-y: 20%; }
.odak-y-25 { --odak-y: 25%; }
.odak-y-30 { --odak-y: 30%; }
.odak-y-35 { --odak-y: 35%; }
.odak-y-40 { --odak-y: 40%; }
.odak-y-45 { --odak-y: 45%; }
.odak-y-50 { --odak-y: 50%; }
.odak-y-55 { --odak-y: 55%; }
.odak-y-60 { --odak-y: 60%; }
.odak-y-65 { --odak-y: 65%; }
.odak-y-70 { --odak-y: 70%; }
.odak-y-75 { --odak-y: 75%; }
.odak-y-80 { --odak-y: 80%; }
.odak-y-85 { --odak-y: 85%; }
.odak-y-90 { --odak-y: 90%; }
.odak-y-95 { --odak-y: 95%; }
.odak-y-100 { --odak-y: 100%; }
/* Otomatik tahmin: mekân görseli ALTTAN hizalanır. */
img[data-dikey] { --odak-y: 100%; }

/* Portre ise ÜSTE YAKIN: alttan hizalamak yüzü kırpar, tam üste
   yapıştırmak saç/alın keser; %18 yüzü ortalarken omuzları da bırakıyor. */
.kisi-kart__gorsel img[data-dikey],
.gorsel-cerceve--yuvarlak img[data-dikey] { --odak-y: 18%; }
.gorsel-cerceve--yuvarlak { aspect-ratio: 1; border-radius: 50%; }
.gorsel-cerceve__ic { display: grid; justify-items: center; gap: 14px; padding: 26px; text-align: center; }
.gorsel-cerceve__ic svg { color: var(--turuncu); opacity: .75; }
.gorsel-cerceve__ic span { font-family: var(--el-yazisi); font-size: 1.4rem; color: var(--turuncu-koy); }

.not-kagit {
  position: absolute; z-index: 2; background: rgba(255, 255, 255, .86);
  border-radius: 16px; padding: 10px 16px; box-shadow: var(--golge);
  font-family: var(--el-yazisi); font-size: 1.15rem; color: var(--lacivert-2); line-height: 1.25;
}
.not-kagit--sag-ust { top: 16px; right: 16px; }
.not-kagit--sol-alt { left: 16px; bottom: 16px; }

/* Botanik süsler */
.yaprak { position: absolute; color: var(--yesil); opacity: .16; pointer-events: none; z-index: 0; }
.yaprak--sol-ust { top: -20px; left: -30px; transform: rotate(-25deg); }
.yaprak--sag-alt { right: -30px; bottom: -20px; transform: rotate(155deg); }

/* --- güven şeridi (hero altı) -------------------------------------------- */
.guven {
  position: relative; z-index: 3; margin-top: clamp(-48px, -4vw, -32px);
  background: var(--beyaz); border-radius: var(--r-b); box-shadow: var(--golge);
  padding: clamp(18px, 2.4vw, 26px);
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.guven__kalem { display: flex; align-items: center; gap: 12px; }
.guven__kalem strong { display: block; color: var(--lacivert); font-size: .96rem; font-family: var(--baslik-yazi); }
/* Yalnız metin span'i: bu kural eskiden tüm span'leri kapsıyordu ve
   .ikon-kutu'nun display:grid ayarını ezip ikonu köşeye itiyordu. */
.guven__kalem span span { font-size: .84rem; color: var(--gri-2); line-height: 1.4; display: block; }

/* --- ikon kutuları -------------------------------------------------------- */
.ikon-kutu {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--seftali-zem); color: var(--turuncu); flex: none;
}
.ikon-kutu--yesil { background: var(--yesil-zem); color: var(--yesil-koy); }
.ikon-kutu--sari  { background: var(--sari-zem);  color: var(--amber); }
.ikon-kutu--mavi  { background: var(--mavi-zem);  color: var(--lacivert-2); }
.ikon-kutu--pembe { background: var(--pembe-zem); color: #E11D48; }
.ikon-kutu--kucuk { width: 42px; height: 42px; border-radius: 13px; }
.ikon-kutu--buyuk { width: 62px; height: 62px; border-radius: 20px; }

/* --- kartlar --------------------------------------------------------------- */
.izgara { display: grid; gap: clamp(14px, 2vw, 22px); }
.izgara--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.izgara--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.izgara--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

.kart {
  background: var(--beyaz); border: 1px solid var(--kenar); border-radius: var(--r);
  padding: clamp(18px, 2.2vw, 26px); box-shadow: var(--golge-s);
  display: flex; flex-direction: column; gap: 12px; position: relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kart--bag:hover { transform: translateY(-3px); box-shadow: var(--golge); border-color: color-mix(in srgb, var(--turuncu) 35%, transparent); text-decoration: none; }
.kart--bag:hover .yuvarlak-ok { background: var(--turuncu); color: #fff; }
.kart h3 { margin: 0; }
.kart h3 small { display: block; font-weight: 500; font-size: .82rem; color: var(--gri-2); margin-top: 3px; }
.kart p { color: var(--gri); font-size: .94rem; margin: 0; }
.kart__alt { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kart__bag { color: var(--turuncu-koy); font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; }

.hizmet-kart { padding-block: clamp(20px, 2.4vw, 28px); }
.hizmet-kart .ikon-kutu { margin-bottom: 4px; }

/* konu/özellik kartı — küçük, iki satırlı */
.mini-kart {
  display: flex; align-items: center; gap: 14px; background: var(--beyaz);
  border: 1px solid var(--kenar); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--golge-s);
}
.mini-kart strong { display: block; color: var(--lacivert); font-family: var(--baslik-yazi); font-size: .95rem; }
.mini-kart span { font-size: .85rem; color: var(--gri-2); }
.mini-kart--bag:hover { border-color: color-mix(in srgb, var(--turuncu) 40%, transparent); text-decoration: none; }
.mini-kart--bag:hover .yuvarlak-ok { background: var(--turuncu); color: #fff; }

/* --- adımlar ------------------------------------------------------------- */
/* Dört adım YAN YANA. Daha önce `auto-fit` vardı ve dar kapsayıcıda
   ikişerli iki sıraya düşüyordu; adımlar bir SIRA anlatıyor, 2x2 ızgara
   o sırayı "1-2 / 3-4" diye kırıyor. Sayı sabit olduğu için sütun sayısı
   da sabit yazıldı. */
.adimlar {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  /* Alt boşluk BURADA. Daha önce `bolum-basi` sınıfıyla geliyordu ama o
     sınıf bir OKUMA GENİŞLİĞİ kuralı (`max-width: 60ch`) ve ızgarayı 603px
     e kısıyordu: dört kart 137px e düşüyor, başlıklar kırılıyordu. */
  margin-bottom: clamp(26px, 3.5vw, 44px);
}

/* Adımları birbirine bağlayan ince çizgi — kartların arkasından geçer ve
   ilk kartın ortasından son kartın ortasına uzanır. Süs değil: dört kutuyu
   bir akış gibi okutan şey bu. */
.adimlar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--turuncu) 34%, transparent),
    color-mix(in srgb, var(--turuncu) 12%, transparent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1) .15s;
  pointer-events: none;
}

.adimlar:has(.gorundu)::before { transform: scaleX(1); }
.adim {
  background: var(--beyaz); border: 1px solid var(--kenar); border-radius: var(--r);
  padding: 26px 20px 20px; box-shadow: var(--golge-s); position: relative; text-align: left;
}
.adim__no {
  position: absolute; top: -16px; left: 20px;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--baslik-yazi); font-weight: 700; font-size: .95rem; color: #fff;
  background: linear-gradient(135deg, var(--turuncu), var(--turuncu-ack));
  box-shadow: var(--golge-tur);
}
/* Kartın kendi hareketi: üzerine gelince hafifçe kalkar, numarası büyür.
   Süre kısa ve mesafe küçük — adım kartları okunacak bir liste, oynanacak
   bir oyuncak değil. */
.adim { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease; }
.adim:hover {
  transform: translateY(-5px);
  box-shadow: var(--golge-tur);
  border-color: color-mix(in srgb, var(--turuncu) 32%, var(--kenar));
}
.adim__no { transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.adim:hover .adim__no { transform: scale(1.12); }

.adim .ikon-kutu { margin-bottom: 12px; }
.adim h3 { font-size: 1rem; margin-bottom: 6px; }
.adim p { font-size: .88rem; color: var(--gri); margin: 0; }

@media (max-width: 1040px) {
  /* Ikiserli iki sira: dort sutun 1040 altinda 200px'in altina duserdi. */
  .adimlar { grid-template-columns: repeat(2, 1fr); }
  .adimlar::before { display: none; }
}

@media (max-width: 620px) {
  .adimlar { grid-template-columns: 1fr; }
}

/* --- kişi kartı ----------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   EKİP IZGARASI — kart genişliği TAVANLI.

   `.izgara--4` şu kalıbı kullanıyor:
       repeat(auto-fit, minmax(min(100%, 215px), 1fr))
   `1fr` tavanı yüzünden satırda AZ kart varsa kalan yeri paylaşıp şişiyorlar:
   iki kişilik bir ekipte her kart ~600 piksel genişliğe çıkıyor ve sayfa
   "kocaman" görünüyordu. Sorun görselin kendisi değil, kartın genişlemesi.

   Tavan `1fr` yerine sabit bir değere çekildi; artan boşluk kartlara
   dağıtılmak yerine `justify-content: center` ile iki yana bırakılıyor.
   Böylece ekip iki kişi de olsa on kişi de olsa kart ölçüsü AYNI kalıyor.

   EŞİT YÜKSEKLİK: ızgara öğesi, kartı saran `<div data-etiket>`; kartın
   kendisi onun içinde. Sarmalayıcı ızgarada gerilse de `<a class="kart">`
   kendi içeriği kadar yükselirdi, bu yüzden uzmanlık sayısı farklı olan
   kartlar farklı boyda duruyordu. Sarmalayıcı da ızgaraya çevrilip kart
   `height: 100%` yapıldı.
   --------------------------------------------------------------------------- */
.izgara--ekip {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 240px));
  justify-content: center;
}
/* YALNIZ SARMALAYICI ızgaraya çevrilir. `ekip.php`de kart bir
   `<div data-etiket>` içinde, `kisi.php`de ise DOĞRUDAN ızgara öğesi.
   Ayrım yapılmasaydı ikinci durumda kartın kendi `display: flex`
   düzeni `grid`e çevrilirdi. Doğrudan öğe zaten ızgara gerilmesiyle
   tam boy oluyor, ek kurala ihtiyacı yok. */
.izgara--ekip > *:not(.kart) { display: grid; }
.izgara--ekip .kisi-kart { height: 100%; }
/* Metin bloğu üstten hizalanır: kart gerildiğinde yazılar ortaya kaçmasın. */
.izgara--ekip .kisi-kart__ic { align-content: start; }

.kisi-kart { padding: 0; overflow: hidden; }
.kisi-kart__gorsel { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: linear-gradient(140deg, var(--seftali-zem), var(--sari-zem)); display: grid; place-items: center; }
.kisi-kart__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kisi-kart__bas {
  font-family: var(--baslik-yazi); font-size: 2rem; font-weight: 700; color: var(--turuncu);
}
.kisi-kart__ic { padding: 18px 20px 22px; display: grid; gap: 8px; }
.kisi-kart h3 { font-size: 1.02rem; margin: 0; }
.kisi-kart__unvan { color: var(--turuncu); font-weight: 700; font-size: .87rem; }
.kisi-kart p { font-size: .88rem; }
.rozetler { display: flex; flex-wrap: wrap; gap: 6px; }
.rozet {
  background: var(--krem-2); color: var(--gri); border-radius: 999px;
  padding: 4px 11px; font-size: .76rem; font-weight: 600;
}
.rozet--tur { background: var(--seftali-zem); color: var(--turuncu-koy); }
.rozet--yesil { background: var(--yesil-zem); color: var(--yesil-koy); }

/* --- yazı kartı ----------------------------------------------------------- */
.yazi-kart { padding: 0; overflow: hidden; }
.yazi-kart__gorsel { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(140deg, var(--sari-zem), var(--yesil-zem)); display: grid; place-items: center; }
.yazi-kart__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yazi-kart__ic { padding: 16px 20px 20px; display: grid; gap: 9px; }
.yazi-kart h3 { font-size: 1.05rem; margin: 0; }
.yazi-kart p { font-size: .89rem; }
.tarih { display: inline-flex; align-items: center; gap: 7px; font-size: .81rem; color: var(--gri-2); font-weight: 600; }

.one-cikan {
  display: grid; gap: 0; background: var(--beyaz); border: 1px solid var(--kenar);
  border-radius: var(--r-b); overflow: hidden; box-shadow: var(--golge);
}
@media (min-width: 820px) { .one-cikan { grid-template-columns: 1.05fr .95fr; } }
.one-cikan__ic { padding: clamp(22px, 3vw, 34px); display: grid; gap: 12px; align-content: center; }
.one-cikan__gorsel { position: relative; overflow: hidden; min-height: 240px; background: linear-gradient(140deg, var(--seftali-zem), var(--sari-zem)); display: grid; place-items: center; }
.one-cikan__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- yan sütun ------------------------------------------------------------ */
.iki-sutun { display: grid; gap: clamp(20px, 3vw, 34px); align-items: start; }
@media (min-width: 960px) { .iki-sutun { grid-template-columns: minmax(0, 1fr) 340px; } }
.yan-kart {
  background: var(--beyaz); border: 1px solid var(--kenar); border-radius: var(--r);
  padding: 22px; box-shadow: var(--golge-s); display: grid; gap: 14px;
}
.yan-kart h3 { font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.yan-kart--sicak { background: linear-gradient(160deg, var(--seftali-zem), var(--krem)); border-color: color-mix(in srgb, var(--turuncu) 22%, transparent); }
.yan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.yan-liste a { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: var(--r-k); }
.yan-liste a:hover { background: var(--krem-2); text-decoration: none; }
.yan-liste__gorsel { width: 58px; height: 46px; border-radius: 10px; flex: none; background: linear-gradient(140deg, var(--sari-zem), var(--yesil-zem)); overflow: hidden; }
.yan-liste__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.yan-liste strong { display: block; color: var(--lacivert); font-size: .89rem; font-weight: 600; line-height: 1.35; font-family: var(--baslik-yazi); }

/* Hızlı bilgiler (hizmet detay) */
.bilgi-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bilgi-liste li { display: flex; gap: 12px; align-items: flex-start; }
.bilgi-liste strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gri-2); }
.bilgi-liste span { color: var(--lacivert); font-weight: 600; font-size: .94rem; }

/* --- alıntı / not kutuları ------------------------------------------------ */
.alinti {
  background: var(--seftali-zem); border-radius: var(--r); padding: 20px 24px;
  border-left: 4px solid var(--turuncu); color: var(--lacivert-2);
  font-family: var(--el-yazisi); font-size: 1.35rem; line-height: 1.4;
}
.alinti cite { display: block; font-family: var(--govde-yazi); font-size: .82rem; font-style: normal; color: var(--gri-2); margin-top: 8px; }

.not-kutu {
  background: linear-gradient(160deg, var(--sari-zem), var(--krem)); border: 1px solid var(--kenar);
  border-radius: var(--r); padding: 26px; display: grid; gap: 10px; place-items: center; text-align: center;
}

/* --- liste (onaylı) ------------------------------------------------------- */
.onay-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.onay-liste li { display: flex; gap: 11px; align-items: flex-start; font-size: .94rem; }
.onay-liste svg { color: var(--yesil); flex: none; margin-top: 3px; }

/* --- SSS ------------------------------------------------------------------ */
.sss { display: grid; gap: 10px; }
.sss details { background: var(--beyaz); border: 1px solid var(--kenar); border-radius: var(--r); padding: 2px 20px; }
.sss details[open] { border-color: color-mix(in srgb, var(--turuncu) 35%, transparent); box-shadow: var(--golge-s); }
.sss summary {
  cursor: pointer; padding: 16px 0; list-style: none; display: flex; gap: 14px; align-items: center;
  color: var(--lacivert); font-weight: 700; font-family: var(--baslik-yazi); font-size: .98rem;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary .yuvarlak-ok { margin-left: auto; }
.sss details[open] summary .yuvarlak-ok { background: var(--turuncu); color: #fff; }
.sss__cevap { padding: 0 0 18px; color: var(--gri); font-size: .94rem; }

/* --- filtre çipleri -------------------------------------------------------- */
.cipler { display: flex; flex-wrap: wrap; gap: 10px; }
.cip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  background: var(--beyaz); border: 1px solid var(--kenar); color: var(--lacivert);
  font-weight: 600; font-size: .88rem; cursor: pointer; font-family: inherit;
}
.cip:hover { border-color: var(--turuncu-ack); text-decoration: none; }
.cip[aria-pressed="true"], .cip--etkin {
  background: linear-gradient(135deg, var(--turuncu), var(--turuncu-ack)); color: #fff; border-color: transparent;
  box-shadow: var(--golge-tur);
}
.cip svg { color: currentColor; }

/* --- WhatsApp şeridi ------------------------------------------------------- */
.wa-serit {
  background: linear-gradient(120deg, var(--yesil-zem), #F3FBF6);
  border: 1px solid #D6F2E1; border-radius: var(--r-b);
  padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 32px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
}
.wa-serit__ic { display: flex; align-items: center; gap: 16px; margin-right: auto; }
.wa-serit strong { display: block; color: var(--lacivert); font-family: var(--baslik-yazi); }
/* Element kapsamlı `.wa-serit span` (0,1,1) `.wa-serit__ikon` (0,1,0) sınıfını
   eziyordu → WhatsApp logosu yeşil kutunun içinde gri çiziliyordu. Kural metin
   sarmalayıcısına daraltıldı; `strong` font-size'ını oradan miras aldığı için
   `strong + span`e değil `> span:last-child`e bağlandı (yoksa başlık büyüyor).
   İkon kuralı da 0,2,0'a çıkarıldı ki ileride benzer bir iniş kuralı yenemesin. */
.wa-serit__ic > span:last-child { color: var(--gri); font-size: .93rem; }
.wa-serit__ic > .wa-serit__ikon { width: 52px; height: 52px; border-radius: 16px; background: var(--yesil); color: #fff; display: grid; place-items: center; flex: none; }
.wa-serit__ikon svg { color: #fff; }

/* --- CTA şeridi ------------------------------------------------------------ */
.cta-serit {
  position: relative; overflow: hidden; border-radius: var(--r-b);
  background: linear-gradient(120deg, var(--krem-3), var(--seftali-zem) 60%, var(--sari-zem));
  padding: clamp(26px, 4vw, 44px);
  display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center;
}
.cta-serit__ic { margin-right: auto; max-width: 56ch; }
.cta-serit h2 { margin-bottom: .3em; }
.cta-serit p { margin: 0; }

/* --- sayfa başlığı (iç sayfalar) ------------------------------------------ */
.sayfa-basi {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--krem-2), var(--krem) 55%, var(--krem-3));
  padding-block: clamp(30px, 4vw, 54px) clamp(34px, 5vw, 64px);
}
.sayfa-basi__ic { position: relative; display: grid; gap: 28px; align-items: center; }
@media (min-width: 940px) { .sayfa-basi__ic--gorselli { grid-template-columns: 1.05fr .95fr; } }
.iz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .84rem; color: var(--gri-2); margin-bottom: 14px; }
.iz a { color: var(--gri-2); font-weight: 600; }
.iz a:hover { color: var(--turuncu-koy); }
.iz span { color: var(--gri-2); }

/* --- makale gövdesi -------------------------------------------------------- */
.makale { max-width: 74ch; color: var(--gri); }
.makale h2 { margin-top: 1.5em; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); }
.makale h3 { margin-top: 1.3em; }
.makale ul, .makale ol { padding-left: 1.25em; }
.makale li { margin-bottom: .45em; }
.makale blockquote {
  margin: 1.5em 0; padding: 16px 22px; border-left: 4px solid var(--turuncu);
  background: var(--seftali-zem); border-radius: 0 var(--r) var(--r) 0; color: var(--lacivert-2);
}
/* Panel editorundeki yerlesim dugmeleri bu siniflari yaziyor; boyut ise
   width ozniteligiyle piksel olarak geliyor. Sozluk sabittir
   (PanelIcerik::IZINLI_SINIF) ve buradaki kurallarla birebir eslesir. */
/* Video govdede gorselle AYNI kutu davranisini alir: hizalama sinif
   sozlugu ikisinde de ayni (PanelIcerik::IZINLI_SINIF), bu yuzden temel
   kurallar da ortak olmali — ayri tutulsaydi ayni sinif iki ogede iki
   farkli sonuc verirdi. */
.makale img,
.makale video {
  border-radius: var(--r);
  margin-block: 1.4em;
  max-width: 100%;   /* width="1600" mobilde kapsayiciyi tasiriyordu */
  height: auto;      /* piksel genislik verilince en-boy orani korunsun */
}

/* <video> satir ici bir ogedir; `gorsel--merkez`in `margin-inline: auto`
   kurali ancak blok ogede calisir. <img> BILEREK degistirilmedi: blok
   yapmak yanindan akan metinli mevcut yerlesimleri bozardi. */
.makale video {
  display: block;
  background: #000;  /* ilk kare gelene kadar seffaf bir bosluk kalmasin */
}

.makale .gorsel--sol    { margin-inline: 0 auto; }
.makale .gorsel--merkez { margin-inline: auto; }
.makale .gorsel--sag    { margin-inline: auto 0; }

/* Metin sarma (Word'deki "Kare" kaydirma karsiligi) */
.makale .gorsel--sar-sol {
  float: inline-start;
  margin-inline: 0 1.4em;
  margin-block: .4em .8em;
}
.makale .gorsel--sar-sag {
  float: inline-end;
  margin-inline: 1.4em 0;
  margin-block: .4em .8em;
}

/* Panel editorunun yazi rengi paleti — sozluk sabit (PanelIcerik). */
.makale .renk-turuncu { color: var(--turuncu-koy); }
.makale .renk-yesil   { color: var(--yesil-koy); }
.makale .renk-mavi    { color: var(--lacivert-2); }
.makale .renk-pembe   { color: #E11D48; }

/* Panel editorunden gelen tablolar */
.makale table { border-collapse: collapse; width: 100%; margin: 0 0 1.4em; }
.makale th, .makale td { border: 1px solid #E4D9CB; padding: .6em .9em; text-align: left; vertical-align: top; }
.makale th { background: var(--sari-zem); font-weight: 600; }
.makale caption { caption-side: bottom; padding: .5em; color: var(--gri-2, #64748B); font-size: .9em; }

/* Panel editorunden gelen kod bloklari */
.makale pre {
  margin: 0 0 1.4em;
  padding: 1em 1.25em;
  border-radius: var(--r);
  background: #1E293B;
  color: #E2E8F0;
  font-size: .88rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.makale code {
  padding: .15em .45em;
  border-radius: 6px;
  background: var(--sari-zem);
  font-size: .9em;
}
.makale pre code { padding: 0; background: none; font-size: inherit; }

/* Kayan gorsel kapsayiciyi yukseltmiyor; sonraki bolume tasmasin. */
.makale::after { content: ""; display: block; clear: both; }

@media (max-width: 640px) {
  .makale [class*="gorsel--sar-"] { float: none; width: 100%; margin-inline: 0; }
}
.makale a { text-decoration: underline; text-underline-offset: 3px; }

/* --- form ------------------------------------------------------------------ */
.form { display: grid; gap: 16px; }
.form__satir { display: grid; gap: 16px; }
@media (min-width: 700px) { .form__satir--2 { grid-template-columns: 1fr 1fr; } }
.alan { display: grid; gap: 7px; }
.alan label { font-weight: 700; font-size: .9rem; color: var(--lacivert); }
.alan label .istege { font-weight: 500; color: var(--gri-2); }
.alan input, .alan select, .alan textarea {
  font: inherit; color: var(--lacivert); width: 100%;
  padding: 13px 16px; border-radius: var(--r-k);
  border: 1px solid var(--kenar); background: var(--krem);
}
.alan input::placeholder, .alan textarea::placeholder { color: var(--gri-2); }
.alan textarea { min-height: 150px; resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: none; border-color: var(--turuncu-ack); background: var(--beyaz);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--turuncu) 16%, transparent);
}
.alan--hata input, .alan--hata select, .alan--hata textarea { border-color: var(--hata); }
.alan__hata { color: var(--hata); font-size: .86rem; font-weight: 600; }
.onam { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; }
.onam input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--turuncu); }
.bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bildirim { border-radius: var(--r-k); padding: 15px 18px; font-weight: 600; border: 1px solid; font-size: .93rem; }
.bildirim--ok { background: var(--yesil-zem); border-color: #ABEFC6; color: var(--yesil-koy); }
.bildirim--hata { background: #FEF3F2; border-color: #FECDCA; color: var(--hata); }

.iletisim-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.iletisim-liste li { display: flex; gap: 14px; align-items: flex-start; }
.iletisim-liste strong { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gri-2); }
.iletisim-liste a, .iletisim-liste span { color: var(--lacivert); font-weight: 600; font-size: .96rem; }
.iletisim-liste a:hover { color: var(--turuncu-koy); }

/* --- boş durum -------------------------------------------------------------- */
.bos {
  border: 1px dashed var(--kenar); border-radius: var(--r); background: var(--beyaz);
  padding: clamp(26px, 4vw, 44px); text-align: center; display: grid; gap: 12px; justify-items: center;
}
/* Liste süzgeci (blog, ekip) gizlemeyi `hidden` ile yapar. Tarayıcının
   `[hidden] { display: none }` kuralı en zayıf kuraldır: `.bos`un
   `display: grid`i "Bu başlıkta yazı bulunmuyor" kutusunu HER yüklemede
   gösteriyordu, `.izgara--ekip > *:not(.kart)` de süzülen ekip kartlarını.
   Genel bir `[hidden]` kuralı KONULAMAZ — masaüstü menüsü `.gezinti[hidden]`ı
   bilerek gösteriyor. Kapsam yalnız süzgecin gizlediği öğeler. */
[data-etiket][hidden], [data-suzgec-bos][hidden] { display: none !important; }

/* --- alt bilgi -------------------------------------------------------------- */
.alt { background: var(--krem-2); border-top: 1px solid var(--kenar); margin-top: clamp(40px, 6vw, 72px); }
.alt__ic { display: grid; gap: 32px; padding-block: clamp(36px, 5vw, 56px); }
@media (min-width: 900px) { .alt__ic { grid-template-columns: 1.3fr .8fr 1fr 1.1fr; } }
.alt h4 { font-size: .95rem; margin-bottom: 14px; color: var(--lacivert); }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.alt a { color: var(--gri); font-size: .92rem; }
.alt a:hover { color: var(--turuncu-koy); }
.alt__marka { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.alt__marka img { width: 46px; height: 46px; }
.alt__slogan { font-family: var(--el-yazisi); font-size: 1.3rem; color: var(--turuncu-koy); line-height: 1.2; margin-bottom: 10px; }
.alt__metin { font-size: .89rem; color: var(--gri); max-width: 34ch; }
.sosyal { display: flex; gap: 10px; margin-top: 16px; }
.sosyal a {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--beyaz); border: 1px solid var(--kenar); color: var(--turuncu);
}
.sosyal a:hover { background: var(--turuncu); color: #fff; border-color: transparent; }
.alt__harita {
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--kenar); background: var(--beyaz);
  padding: 14px; display: grid; gap: 8px; margin-top: 14px;
}
.alt__harita span { font-size: .84rem; color: var(--gri-2); }
/* Yapımcı izi: telif satırının üstünde, ortalı, sessiz. Üzerine gelince
   tam opaklığa açılır — alt bilgide bir reklam değil, bir imza. */
.alt__yapimci { display: flex; justify-content: center; padding-top: 4px; }
.alt__yapimci a { display: block; opacity: .6; transition: opacity .2s ease; }
.alt__yapimci a:hover, .alt__yapimci a:focus-visible { opacity: 1; }
/* Yükseklik oranla gelir; `display:block` satır içi görselin taban çizgisi
   altında bıraktığı boşluğu keser. */
.alt__yapimci img { display: block; width: 150px; height: auto; }

.alt__bar {
  border-top: 1px solid var(--kenar); padding-block: 16px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--gri-2);
}
.alt__bar ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* --- mobil: yandan açılan menü çekmecesi ------------------------------------
   Çekmece ve perde ikisi de <header> İÇİNDE duruyor. Gerekçe: `.ust`
   `z-index: 60` ile kendi yığın bağlamını kuruyor; perdeyi header dışına
   koysaydık 80'lik z-index'i header'ın tamamının (dolayısıyla çekmecenin de)
   üstüne çıkardı. Aynı bağlamda kaldıkları sürece sıralama beklendiği gibi
   çalışıyor; yığın bağlamını bir üst kata taşımak için menü açıkken `.ust`
   z-index'i 90'a çıkıyor — sağ alttaki `.yigin` (80) altta kalsın diye.

   Açılma/kapanma `hidden` + `.gezinti--acik` ikilisiyle yürüyor: `hidden`
   erişilebilirlik ağacındaki tek gerçek, geçiş animasyonu ise `display:none`
   üzerinden çalışmadığı için sınıf, yeniden akış zorlandıktan SONRA ekleniyor
   ve kapanışta `hidden` geçiş bitene kadar bekletiliyor (bkz. site.js).
   --------------------------------------------------------------------------- */
.gezinti__bas, .gezinti__ayak, .gezinti-perde { display: none; }

@media (max-width: 1040px) {
  .menu-dugme { display: grid; }
  .ust__eylem .dugme--birincil span { display: none; }

  .gezinti-perde:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 80;
    background: rgba(22, 55, 92, .45);
    opacity: 0; transition: opacity .28s ease;
  }
  .menu-acik .gezinti-perde { opacity: 1; }
  .menu-acik { overflow: hidden; }
  .menu-acik .ust { z-index: 90; }

  .gezinti {
    position: fixed; inset: 0 0 0 auto; z-index: 85;
    width: min(360px, 88vw); height: 100dvh; max-height: none;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--beyaz); padding: 0 0 max(20px, env(safe-area-inset-bottom));
    box-shadow: -20px 0 48px rgba(22, 55, 92, .22);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); transition: transform .28s cubic-bezier(.32, .72, .3, 1);
  }
  .gezinti--acik { transform: none; }
  .gezinti[hidden] { display: none; }

  .gezinti__bas {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 2; background: var(--beyaz);
    padding: 16px 18px; border-bottom: 1px solid var(--kenar);
  }
  .gezinti__kapat {
    width: 42px; height: 42px; flex: none; display: grid; place-items: center;
    border-radius: 12px; border: 1px solid var(--kenar-2);
    background: var(--beyaz); color: var(--lacivert); cursor: pointer;
  }
  .gezinti__kapat:hover { background: var(--seftali-zem); color: var(--turuncu-koy); }

  .gezinti > .gezinti__kalem { padding-inline: 14px; }
  .gezinti__bas + .gezinti__kalem { margin-top: 10px; }
  .gezinti__bag { width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 1rem; }
  .gezinti__kalem--etkin > .gezinti__bag::after { display: none; }

  .gezinti__ayak {
    display: grid; gap: 10px; margin-top: auto; padding: 18px;
    border-top: 1px solid var(--kenar);
  }
  .gezinti__ayak .dugme { width: 100%; justify-content: center; }
  .gezinti__tel {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px; border-radius: 12px; border: 1px solid var(--kenar-2);
    color: var(--lacivert); font-weight: 600; font-size: .92rem;
  }
  .gezinti__tel:hover { background: var(--seftali-zem); color: var(--turuncu-koy); text-decoration: none; }

  /* Çekmecede panel akışa girer. Görünümü (zemin, yuvarlaklık, iç boşluk,
     açılış hareketi) dosyanın SONUNDAKİ "mobil menü — görsel düzen"
     bloğunda: oradaki kurallar `.mega__*` tanımlarını eziyor ve o tanımlar
     bu bloktan sonra geliyor. */
  .acilir {
    position: static; transform: none; width: 100%; box-shadow: none; border: 0;
  }
  /* `.acilir--mega` dosyada daha aşağıda `width: min(1060px, 94vw)` diyor ve
     düz `.acilir` kuralımızı yeniyordu: panel 352px çıkıp 330px'lik çekmeceden
     taşıyordu. 0,2,0 ile geri alınıyor. */
  .gezinti .acilir--mega { width: 100%; }
  /* Fare köprüsü (`.acilir::before`) yalnız masaüstü hover'ı için var;
     çekmecede görünmez bir şerit olarak komşu kalemin üstüne biniyor ve
     dokunuşu yutabiliyor. Dosyanın sonundaki tanımı yenmek için 0,2,0. */
  .gezinti .acilir::before { content: none; }
  .mega, .mega--kurumsal { grid-template-columns: 1fr; }
  /* Çekmece 360px: mega menünün süs paneli ve tanıtım kutusu burada yalnız
     kaydırma uzatıyor, içerdikleri bağlantılar zaten listede var.
     `.mega > ...` ile yazılıyor (0,2,0): medya sorgusu özgüllük katmıyor ve
     bu kuralların asıl tanımı dosyada DAHA AŞAĞIDA — düz sınıf seçicisiyle
     yazılsaydı aşağıdaki tanım kazanır, görsel çekmecede görünmeye devam
     ederdi (ilk denemede tam olarak bu oldu). */
  .mega > .mega__gorsel, .mega > .mega__tanitim { display: none; }
  .mega > .mega__gruplar { padding: 0; gap: 10px; }
  .mega > .mega__alt { padding: 10px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gezinti, .gezinti-perde { transition: none; }
}

@media (min-width: 1041px) {
  .gezinti[hidden] { display: flex; }
}
@media (max-width: 620px) {
  .ust__ic { min-height: 68px; gap: 10px; }
  .marka img { width: 40px; height: 40px; }
  .marka__ad strong { font-size: 1.05rem; letter-spacing: .14em; }
  .marka__ad span { font-size: .58rem; letter-spacing: .26em; }
  .dugme { padding: 12px 20px; }
}

/* Grup başlığı altındaki hizmet ızgarası — CSP satır içi stile izin vermiyor,
   bu yüzden aralık sınıfla veriliyor. */
.izgara--altbosluk { margin-bottom: 34px; }

/* =========================================================================
   MEGA MENÜ — sağ tarafta görsel paneli
   Menü kalemi üzerine gelince panel o kaleme ait görseli ve özeti gösterir.
   ========================================================================= */
.acilir--mega { width: min(1060px, 94vw); padding: 0; display: block; }
.mega { display: grid; gap: 0; overflow: hidden; border-radius: var(--r); }
@media (min-width: 1041px) {
  .mega { grid-template-columns: minmax(0, 1fr) 300px; }
  .mega--kurumsal { grid-template-columns: 240px minmax(0, 1fr) 290px; }
}
.mega__gruplar {
  display: grid; gap: 18px; padding: 22px 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr));
  align-content: start;
}
.mega__tanitim {
  padding: 24px; background: linear-gradient(160deg, var(--seftali-zem), var(--krem));
  display: grid; gap: 10px; align-content: start;
}
.mega__tanitim h4 { font-size: 1.15rem; margin: 0; }
.mega__tanitim p { font-size: .87rem; color: var(--gri); margin: 0; line-height: 1.55; }

.mega__gorsel {
  position: relative; overflow: hidden; min-height: 260px;
  background: linear-gradient(150deg, var(--seftali-zem), var(--sari-zem));
  display: grid; align-items: end;
}
.mega__gorsel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .32s ease, transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.mega__gorsel img.solmus { opacity: 0; }
.mega__gorsel-ic {
  position: relative; z-index: 3; padding: 18px;
  background: linear-gradient(to top, rgba(20, 44, 72, .88), rgba(20, 44, 72, .1) 78%, transparent);
  color: #fff; display: grid; gap: 5px;
}
.mega__gorsel-ic strong { font-family: var(--baslik-yazi); font-size: 1.02rem; }
.mega__gorsel-ic span { font-size: .84rem; opacity: .92; line-height: 1.45; }

.mega__bag { display: block; padding: 9px 10px; border-radius: 10px; }
.mega__bag strong { display: block; font-size: .92rem; font-weight: 600; color: var(--lacivert); line-height: 1.32; }
.mega__bag small { display: block; font-size: .78rem; color: var(--gri-2); font-weight: 500; margin-top: 2px; }
.mega__bag:hover, .mega__bag:focus-visible { background: var(--seftali-zem); text-decoration: none; }
.mega__bag:hover strong { color: var(--turuncu-koy); }

.mega__alt {
  grid-column: 1 / -1; border-top: 1px solid var(--kenar); background: var(--krem);
  padding: 12px 24px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  font-size: .85rem; color: var(--gri);
}
.mega__alt a { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================================
   ÇOCUK TEMASI — balonlar
   Çocukla ilgili menü grubunda ve çocuk sayfalarının kahraman alanında
   yavaşça yükselen balonlar. Hareket azaltma tercihinde tamamen kapanır.

   Altı balonun rengi BİLEREK sabittir: bu bir pastel gökkuşağıdır (turuncu,
   sarı, yeşil, mavi, pembe), vurgu ailesi değil. Birini vurguya bağlamak
   mavi bir vurguda iki mavi balon demek olurdu — bu yüzden /tema.css
   override'ı buraya dokunmaz.
   ========================================================================= */
.balonlar { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.balon {
  position: absolute; bottom: -80px; width: 24px; height: 30px;
  border-radius: 50% 50% 47% 47%; opacity: 0; animation: balon-ucus 11s linear infinite;
}
.balon::after {
  content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 20px;
  background: rgba(22, 55, 92, .22);
}
.balon:nth-child(1) { left: 8%;  background: #FDBA74; animation-duration: 10s; }
.balon:nth-child(2) { left: 25%; background: #FCD34D; animation-duration: 13s; animation-delay: 1.6s; }
.balon:nth-child(3) { left: 43%; background: #86EFAC; animation-duration: 11.5s; animation-delay: .7s; }
.balon:nth-child(4) { left: 62%; background: #93C5FD; animation-duration: 14s; animation-delay: 2.5s; }
.balon:nth-child(5) { left: 79%; background: #FDA4AF; animation-duration: 12s; animation-delay: .3s; }
.balon:nth-child(6) { left: 92%; background: #FB923C; animation-duration: 15s; animation-delay: 3.2s; }
@keyframes balon-ucus {
  0%   { transform: translateY(0) rotate(-5deg); opacity: 0; }
  12%  { opacity: .85; }
  50%  { transform: translateY(-52%) rotate(5deg); }
  86%  { opacity: .8; }
  100% { transform: translateY(-118%) rotate(-4deg); opacity: 0; }
}
.balonlar[hidden] { display: none; }

/* Çocuk temalı kahraman alanı: daha neşeli zemin */
.kahraman--cocuk, .sayfa-basi--cocuk {
  background: linear-gradient(135deg, #FFF3E0 0%, var(--krem) 45%, #EAF7EE 100%);
}

/* =========================================================================
   HAREKET — kaydırmayla beliren bölümler, üst barın küçülmesi
   ========================================================================= */
/* Gizleme sınıfını JS ekler; JavaScript kapalıysa içerik olduğu gibi görünür
   ve ekranın üstündeki öğeler hiç gizlenmez (yanıp sönme olmaz). */
/* GİZLEME ANINDA GEÇİŞ KAPALI.
   `.kart` kendi `transform` geçişini taşıyor; JS gizleme sınıfını eklediğinde
   kart 0'dan 28px'e KAYARAK gidiyordu, yani ziyaretçi sayfa açılırken
   kartların aşağı düşüp sonra geri toplandığını görüyordu. Gizlenme anında
   olması gereken şey ışınlanmadır; animasyon yalnız GERİ DÖNÜŞTE var.
   Sıra önemli: bu kural `.kart` tanımından (≈430. satır) SONRA geliyor,
   ikisi de (0,1,0) ve sonraki kazanıyor — `!important` gerekmiyor. */
.anim-bekliyor { opacity: 0; transform: translateY(28px); transition: none; }

/* YÖN VARYANTLARI.
   Şablonlarda `data-anim="sol"` (4 yer) ve `data-anim="olcek"` (12 yer)
   ZATEN yazılıydı ama karşılığı CSS'te YOKTU: on altı öğe yön bilgisi
   taşıyıp hepsi aynı aşağıdan-yukarı geçişi yapıyordu. Sitenin "hiç
   hareket yok" hissinin bir sebebi buydu — her şey tek tip.

   Özgüllük: `.anim-bekliyor` (0,1,0), bunlar (0,2,0) — ezme doğru yönde.
   Yalnız `transform` ve `opacity`; ikisi de derleyici katmanında çalışır ve
   yeniden yerleşim tetiklemez. */
[data-anim="sol"].anim-bekliyor   { transform: translate3d(-38px, 0, 0); }
[data-anim="sag"].anim-bekliyor   { transform: translate3d(38px, 0, 0); }
[data-anim="olcek"].anim-bekliyor { transform: scale(.92); }
[data-anim="yavas"].anim-bekliyor { transform: translateY(44px); }

[data-anim].gorundu {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .72s var(--yay);
}
[data-anim="yavas"].gorundu { transition-duration: .85s, 1.05s; }

/* Kademeli giriş. Izgara içindeki kartlar kardeş olduğu için `nth-child`
   yetiyor; altı kalemde durmasının sebebi yoktu, hizmet listesi dokuz
   karttan oluşuyor ve yedincisinden sonrası aynı anda beliriyordu. */
[data-anim].gorundu:nth-child(2)  { transition-delay: .06s; }
[data-anim].gorundu:nth-child(3)  { transition-delay: .12s; }
[data-anim].gorundu:nth-child(4)  { transition-delay: .18s; }
[data-anim].gorundu:nth-child(5)  { transition-delay: .24s; }
[data-anim].gorundu:nth-child(6)  { transition-delay: .30s; }
[data-anim].gorundu:nth-child(7)  { transition-delay: .36s; }
[data-anim].gorundu:nth-child(8)  { transition-delay: .42s; }
[data-anim].gorundu:nth-child(9)  { transition-delay: .48s; }
[data-anim].gorundu:nth-child(10) { transition-delay: .52s; }
[data-anim].gorundu:nth-child(n+11) { transition-delay: .56s; }

/* Başlık altı çizgisi belirdiğinde ÇİZİLİR.
   `scale` ÖZELLİĞİ kullanılıyor, `transform` değil: ortalı varyant
   (`.bolum-basi--orta .cizgi-alt::after`) kendini `translateX(-50%)` ile
   ortalıyor ve transform'a yazmak o ortalamayı silerdi. `scale` ayrı bir
   özellik olduğu için ikisi birlikte yaşar. */
.cizgi-alt::after { transform-origin: left center; }
.bolum-basi--orta .cizgi-alt::after { transform-origin: center; }
.gorundu .cizgi-alt::after,
.gorundu.cizgi-alt::after { animation: cizgi-ciz .5s var(--yay) .2s backwards; }
@keyframes cizgi-ciz { from { scale: 0 1; } }

.ust { transition: box-shadow .2s ease; }
.ust--kucuk { box-shadow: 0 2px 24px rgba(22, 55, 92, .13); }
.ust--kucuk .ust__ic { min-height: 64px; }
.ust__ic, .marka img { transition: min-height .2s ease, width .2s ease, height .2s ease; }
.ust--kucuk .marka img { width: 40px; height: 40px; }

.gorsel-cerceve img { transition: transform 1.2s var(--yay); }
.gorsel-cerceve:hover img { transform: scale(1.06); }

/* =========================================================================
   KAHRAMAN GİRİŞİ — sayfa açılırken sıralı beliriş
   -------------------------------------------------------------------------
   LCP KURALI: en büyük öğe (mobilde H1, masaüstünde kahraman görseli)
   OPAKLIKTAN animasyon ALMAZ. Tarayıcı `opacity: 0` olan bir öğeyi
   "boyanmış" saymaz; başlığı soldurarak açmak LCP damgasını animasyon
   süresi kadar ileri iter ve bu, PageSpeed'in ölçtüğü metriği doğrudan
   bozar (bugünkü mobil skoru 87). Onlar yalnız `transform` ile kayar —
   ilk karede tam opaklıkta boyanırlar. Küçük öğeler (üst etiket, paragraf,
   düğmeler, rozetler) LCP adayı olmadığı için opaklık + kayma alabilir.

   `backwards` dolgusu şart: gecikme süresince öğe BAŞLANGIÇ karesinde
   durmalı, yoksa önce son hâliyle görünüp sonra geri sıçrar.
   ========================================================================= */
/* SÜRELER KISA TUTULUYOR. İlk sürümde son rozet 1.10 sn'de yerine
   oturuyordu; Speed Index "ilk ekran ne zaman son hâlini aldı" diye
   ölçtüğü için bu, doğrudan ölçüme yazılan bir gecikmeydi. Kademe hissi
   sürenin uzunluğundan değil, kalemler ARASINDAKİ farktan geliyor —
   toplam 1.10 → 0.85 sn indi, sıralama aynı kaldı. */
.kahraman h1     { animation: giris-kaydir .6s var(--yay) backwards; }
.kahraman .uste  { animation: giris-belir .55s var(--yay) .04s backwards; }
.kahraman__giris { animation: giris-belir .55s var(--yay) .14s backwards; }
.kahraman__eylem { animation: giris-belir .55s var(--yay) .22s backwards; }
.kahraman__rozet { animation: giris-belir .55s var(--yay) .30s backwards; }

@keyframes giris-kaydir { from { transform: translate3d(0, 26px, 0); } }
@keyframes giris-belir  { from { opacity: 0; transform: translate3d(0, 20px, 0); } }

/* Vurgulanan sözcüğün altındaki turuncu çizgi, cümle yerleştikten sonra
   çizilir. Kalem darbesi etkisi: girişin en son adımı. */
.kahraman h1 .vurgu::after {
  transform-origin: left center;
  animation: cizgi-ciz .45s var(--yay) .42s backwards;
}

/* =========================================================================
   ORTAM HAREKETİ — kendiliğinden, çok yavaş
   -------------------------------------------------------------------------
   Sitede hover/kaydırma dışında hiçbir şey kıpırdamıyordu; sayfa durunca
   donuk görünüyordu. Buradaki hareketler METNİN ÜSTÜNDE DEĞİL, süs
   katmanında ve genliği küçük (14px, ≥8s): göz ucuyla fark edilir,
   okumayı bölmez. Bir psikoloji sitesinde hareketin sakin kalması
   biçimsel değil içeriksel bir gereklilik.

   `translate` ÖZELLİĞİ kullanılıyor, `transform` değil: `.yaprak--sol-ust`
   kendi açısını `transform: rotate(-25deg)` ile alıyor ve transform'a
   yazmak o açıyı silerdi. İki özellik bağımsız birleşir — aynı sebeple
   kahraman görselinde süzülme, kaydırmayla beliriş sisteminin
   `transform`uyla da çakışmaz.
   ========================================================================= */
.yaprak { animation: suzul 11s ease-in-out infinite; }
.yaprak--sag-alt { animation-duration: 13.5s; animation-delay: -4s; }

/* KAHRAMAN GÖRSELİ SÜREKLİ SÜZÜLMÜYOR — bilinçli olarak geri alındı.
   İlk sürümde o da yapraklar gibi sonsuz süzülüyordu. İki maliyeti vardı:
   (1) Speed Index görsel tamamlanmayı SON KAREYE göre ölçer; ilk ekranın
       en büyük öğesi hiç durmazsa ara kareler sürekli "eksik" sayılır ve
       sayfa hiçbir zaman yerleşmiş görünmez.
   (2) Sonsuz animasyon o büyük görseli kalıcı olarak ayrı bir derleyici
       katmanına bağlar; kısıtlı mobil aygıtta her kare için iş demektir.
   Karşılığında kazandırdığı canlılık, girişteki kayma zaten verildiği için
   küçüktü. Yapraklar kalıyor: soluk (%16), kenarda ve minik — ortam
   hareketinin ucuz olan kısmı orası. */

/* GİRİŞ KAYMASI YALNIZ İKİ SÜTUNLU DÜZENDE.
   940px altında kahraman görseli metnin ALTINA iniyor, yani ilk ekranın
   dışında kalıyor; orada açılış animasyonu kullanıcı oraya kaydırmadan
   çok önce biter ve görsel cansız durur. O ölçüde işi şablonda zaten
   yazılı olan `data-anim="olcek"` kaydırma belirişi devralıyor. Eşik,
   düzenin tek sütuna düştüğü `.kahraman__ic` sorgusuyla AYNI olmalı.

   Yalnız giriş kayması var; sürekli süzülme yukarıdaki gerekçeyle
   kaldırıldı. */
@media (min-width: 940px) {
  .kahraman .gorsel-cerceve { animation: giris-kaydir .9s var(--yay) .1s backwards; }
}

@keyframes suzul { 50% { translate: 0 -14px; } }

/* =========================================================================
   ETKİLEŞİM — kart, düğme, ikon
   ========================================================================= */
/* Kart kalkışı 3px'ten 6px'e çıktı ve süre .16s → .24s: eski değer
   "tıklanabilir" demeye yetiyordu ama hareket olarak algılanmıyordu. */
.kart { transition: transform .24s var(--yay), box-shadow .24s ease, border-color .24s ease; }
.kart--bag:hover { transform: translateY(-6px); }

/* İkon kutusu kartla birlikte canlanır. `--yay-geri` sonda hedefi hafifçe
   aşar; küçük bir öğede bu "zıplama" olarak değil, canlılık olarak okunur. */
.kart .ikon-kutu,
.guven__kalem .ikon-kutu { transition: transform .32s var(--yay-geri); }
.kart--bag:hover .ikon-kutu,
.guven__kalem:hover .ikon-kutu { transform: translateY(-3px) scale(1.09) rotate(-5deg); }

/* Ok, kartın okuma yönünde ilerler. Renk geçişi zaten vardı, hareket yoktu. */
.yuvarlak-ok { transition: background-color .18s ease, color .18s ease, transform .3s var(--yay-geri); }
.kart--bag:hover .yuvarlak-ok,
.mini-kart--bag:hover .yuvarlak-ok { transform: translateX(5px); }

/* Birincil düğmede ışık süpürmesi.
   `overflow: hidden` gölgeyi KIRPMAZ (gölge kutunun dışında çizilir), yalnız
   içerideki parlama şeridini sınırlar. Şerit `translate` ile sürülüyor:
   düğmenin kendi `transform: translateY(-2px)` kalkışıyla çakışmasın.
   `isolation` şart — negatif z-index'li süsün düğmenin zemininin ardına
   değil, ÜSTÜNE ama metnin ALTINA düşmesi buna bağlı. */
.dugme--birincil { position: relative; overflow: hidden; isolation: isolate; }
.dugme--birincil::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
  translate: -130% 0;
}
.dugme--birincil:hover::after,
.dugme--birincil:focus-visible::after { animation: parlama .8s ease; }
@keyframes parlama { to { translate: 130% 0; } }

/* =========================================================================
   SSS AÇILIR KAPANIR
   Artı işareti 135° dönünce çarpı olur — durumu ikon ANLATIR, yalnız rengi
   değişmez. Cevap da kayarak açılır; `height` animasyonu YOK, o her karede
   yeniden yerleşim demekti.
   ========================================================================= */
.sss summary .yuvarlak-ok svg { transition: transform .3s var(--yay-geri); }
.sss details[open] summary .yuvarlak-ok svg { transform: rotate(135deg); }
.sss details[open] .sss__cevap { animation: sss-acil .34s ease backwards; }
@keyframes sss-acil { from { opacity: 0; transform: translateY(-8px); } }

/* =========================================================================
   OKUMA ÇUBUĞU — yalnız blog yazılarında (kabuk `$icerikTuru` ile basar)
   -------------------------------------------------------------------------
   JS YOK: kaydırmaya bağlı animasyon zaman çizelgesi tarayıcının kendi
   derleyici katmanında çalışır, `scroll` olayı dinlemekten hem daha akıcı
   hem bedavadır. Desteklemeyen tarayıcıda `scale: 0 1` yüzünden çubuk
   görünmez kalır — eksik süs, bozuk sayfa değil.
   ========================================================================= */
.okuma-cubugu {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 90;
  background: linear-gradient(90deg, var(--turuncu), var(--amber));
  transform-origin: left center; scale: 0 1; pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .okuma-cubugu {
    animation: okuma-ilerle linear;
    animation-timeline: scroll(root block);
  }
  @keyframes okuma-ilerle { to { scale: 1 1; } }
}

/* =========================================================================
   SAĞ ALT BUTON YIĞINI — WhatsApp + yukarı çık
   Yukarı çık düğmesi en altta, WhatsApp onun üzerinde durur.
   ========================================================================= */
.yigin {
  position: fixed; right: clamp(14px, 2.5vw, 26px); bottom: clamp(14px, 2.5vw, 26px);
  z-index: 80; display: grid; gap: 12px; justify-items: end;
}
.yigin__dugme {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; position: relative; padding: 0;
  box-shadow: 0 12px 26px rgba(22, 55, 92, .22);
  transition: transform .18s ease, box-shadow .18s ease, opacity .25s ease, visibility .25s;
}
.yigin__dugme:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 32px rgba(22, 55, 92, .28); }
.yigin__wa { background: linear-gradient(135deg, #25D366, #128C7E); }
.yigin__wa:hover { text-decoration: none; }
.yigin__yukari {
  background: linear-gradient(135deg, var(--turuncu), var(--turuncu-ack));
  opacity: 0; visibility: hidden; transform: translateY(12px);
}
.yigin__yukari.gorunur { opacity: 1; visibility: visible; transform: none; }

.yigin__wa::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .5); animation: nabiz 2.8s ease-out infinite;
}
@keyframes nabiz {
  0%   { transform: scale(1);    opacity: .75; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}

/* Sohbet balonu — "Desteğe mi ihtiyacınız var?" */
.sohbet {
  position: relative; width: min(290px, calc(100vw - 40px)); background: var(--beyaz);
  border: 1px solid var(--kenar); border-radius: 18px 18px 6px 18px;
  box-shadow: var(--golge-b); padding: 14px;
  display: grid; grid-template-columns: 38px 1fr 24px; gap: 10px; align-items: start;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.96);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility .32s;
}
.sohbet.gorunur { opacity: 1; visibility: visible; transform: none; }
.sohbet__avatar {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: var(--seftali-zem); display: grid; place-items: center;
}
.sohbet__avatar img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.sohbet__metin strong { display: block; font-size: .83rem; color: var(--lacivert); font-family: var(--baslik-yazi); }
.sohbet__metin p { margin: 3px 0 0; font-size: .85rem; color: var(--gri); line-height: 1.45; }
.sohbet__kapat {
  background: none; border: 0; color: var(--gri-2); cursor: pointer; padding: 2px;
  line-height: 0; border-radius: 6px;
}
.sohbet__kapat:hover { color: var(--lacivert); background: var(--krem-2); }
.sohbet__cevap { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sohbet__cevap a {
  font-size: .78rem; font-weight: 700; padding: 7px 13px; border-radius: 999px;
  background: var(--yesil-zem); color: var(--yesil-koy);
}
.sohbet__cevap a:hover { background: var(--yesil); color: #fff; text-decoration: none; }
.sohbet__cevap a.sohbet__cevap--tur { background: var(--seftali-zem); color: var(--turuncu-koy); }
.sohbet__cevap a.sohbet__cevap--tur:hover { background: var(--turuncu); color: #fff; }

@media (max-width: 620px) {
  .yigin__dugme { width: 50px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Dosyanın başındaki genel kural süreleri zaten .01ms'e indiriyor; burada
     KENDİLİĞİNDEN DÖNEN animasyonlar büsbütün kapatılıyor. Aradaki fark
     önemli: sonsuz bir döngüyü hızlandırmak onu durdurmaz, titremeye
     çevirir. Yeni bir sonsuz animasyon eklersen adını BU listeye de yaz. */
  .balon,
  .yigin__wa::before,
  .yaprak,
  .okuma-cubugu { animation: none !important; }

  /* Giriş animasyonları `backwards` dolgusuyla başlangıç karesinde bekler;
     kapatınca öğe son hâlinde kalmalı, yoksa kahraman metni görünmez olur. */
  .kahraman h1,
  .kahraman .uste,
  .kahraman__giris,
  .kahraman__eylem,
  .kahraman__rozet,
  .kahraman .gorsel-cerceve,
  .sss details[open] .sss__cevap { animation: none !important; opacity: 1; transform: none; }

  /* Çizgilerde YALNIZ animasyon kapatılıyor, `transform` DEĞİL:
     `.bolum-basi--orta .cizgi-alt::after` kendini `translateX(-50%)` ile
     ortalıyor ve `transform: none` yazmak çizgiyi sola kaydırırdı. */
  .kahraman h1 .vurgu::after,
  .cizgi-alt::after { animation: none !important; scale: 1 1; }

  [data-anim] { opacity: 1; transform: none; }
  .sohbet { transition: none; }
}

/* Mega menü grup başlıkları ve listeleri */
.mega__grup h4 {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--turuncu); margin-bottom: 8px; display: flex; align-items: center; gap: 7px;
}
.mega__grup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

/* Fare köprüsü: buton ile panel arasındaki 10px boşlukta imleç menüden
   çıkmış sayılıyor ve menü kapanıyordu. Görünmez bir şerit boşluğu kapatır. */
.acilir::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}

/* İkon kutusu dayanıklılık: element kapsamlı kurallar (ör. ".guven__kalem span")
   sınıf kuralını ezebiliyor. Aynı özgüllükte ve dosyanın sonunda tekrar
   tanımlanınca kutu her yerde ortalı kalır. */
span.ikon-kutu, a.ikon-kutu, div.ikon-kutu { display: grid; place-items: center; }
.ikon-kutu svg { display: block; }

/* --- İletişim: gömülü harita kartı (panel → Site Ayarları → Haritalar) --- */
.kart--harita{padding:10px}
.kart--harita iframe{border:0;border-radius:14px;display:block;width:100%;height:300px}

/* Ekran dışına taşınan izleme pikseli (Metrica noscript) */
.ekran-disi{position:absolute;left:-9999px}

/* --- KVKK onam metni modali ------------------------------------------------
   Onam kutucuğunun yanındaki "Aydınlatma Metni" bağlantısı bunu açar.
   Bağlantının href'i durduğu için JS kapalıyken tıklama sayfaya gider;
   burada tanımlananların hiçbiri o yolu etkilemez.                          */

/* Rıza çubuğu 2147483000 kullanıyor ve "her şeyin üstünde" olmak üzere
     tasarlandı. Bu doğru — ama kullanıcı KVKK metnini AÇIKÇA açtıysa o an
     baktığı şey bu modaldir; çubuk modalın düğmelerini örtüyordu ve
     "kabul ediyorum" tıklanamıyordu. Bilerek bir tık üstte. */
.onam-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
}

/* display:grid, hidden'ın tarayıcı varsayılanını ezer. */
.onam-modal[hidden] { display: none; }

.onam-modal__perde {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--lacivert, #17324d) 55%, transparent);
  backdrop-filter: blur(2px);
  animation: onam-perde .2s ease-out both;
}

.onam-modal__kutu {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(78vh, 720px);
  background: var(--beyaz);
  border-radius: var(--r);
  box-shadow: 0 28px 70px -18px rgba(23, 50, 77, .42);
  overflow: hidden;
  animation: onam-gir .26s cubic-bezier(.22, .61, .36, 1) both;
}

.onam-modal__kutu:focus { outline: none; }

.onam-modal__bas {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--kenar);
}

.onam-modal__baslik {
  margin: 0;
  font-size: 1.05rem;
  font-family: var(--baslik-yazi);
  color: var(--lacivert, #17324d);
}

.onam-modal__kapat {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gri);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.onam-modal__kapat svg { width: 18px; height: 18px; }
.onam-modal__kapat:hover { background: var(--seftali-zem); color: var(--turuncu); }

/* Metin KAYDIRILIR, alt şerit sabit kalır: uzun bir aydınlatma metninde
   "kabul ediyorum" düğmesini aramak zorunda kalınmamalı. tabindex="0" ile
   klavyeyle de kaydırılabilir. */
.onam-modal__govde {
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: .93rem;
  line-height: 1.7;
}
.onam-modal__govde:focus-visible { outline: 2px solid var(--turuncu); outline-offset: -4px; }

.onam-modal__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--kenar);
  background: var(--krem, #fdf8f3);
}

@keyframes onam-perde { from { opacity: 0; } to { opacity: 1; } }
@keyframes onam-gir {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Modal açıkken arka plan kaymasın. */
body.kilitli { overflow: hidden; }

@media (max-width: 620px) {
  .onam-modal { padding: 0; place-items: end center; }
  .onam-modal__kutu {
    width: 100%;
    max-height: 88dvh;
    border-radius: var(--r) var(--r) 0 0;
  }
  .onam-modal__alt > * { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .onam-modal__perde,
  .onam-modal__kutu { animation: none; }
  .adim,
  .adim__no,
  .adimlar::before { transition: none; }
  .adimlar::before { transform: scaleX(1); }
}

/* =========================================================================
   MOBİL MENÜ — GÖRSEL DÜZEN (çekmecenin iskeleti ~890. satırda)

   NEDEN DOSYANIN SONUNDA: buradaki kurallar `.mega__bag`, `.mega__grup h4`,
   `.mega__alt`, `.acilir a` gibi MASAÜSTÜ tanımlarını eziyor ve o tanımlar
   yukarıdaki mobil bloktan DAHA AŞAĞIDA duruyor (988+ ve 1182+). Medya
   sorgusu özgüllük katmadığı için aynı yerde yazılsalardı alttaki tanım
   kazanırdı — bu tuzak bu dosyada üç kez ısırdı. Sona alınca sıra bizden
   yana; yine de hedefin çekmece içi olduğunu söylemek için kurallar
   `.gezinti` önekiyle yazıldı.
   ========================================================================= */
@media (max-width: 1040px) {

  /* --- çekmece başlığı: logo + ad --------------------------------------- */
  .gezinti__marka { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
  .gezinti__marka img { width: 38px; height: 38px; flex: none; }

  /* --- üst düzey satırlar ------------------------------------------------
     Kalemler arası boşluk yerine ince ayraç: dokunmatikte satır listesi,
     düğme kümesinden daha okunur. `scroll-margin-top` site.js'teki
     `basaGetir()` için — yapışkan başlık satırı örtmesin. */
  .gezinti { gap: 0; }
  .gezinti > .gezinti__kalem { padding-inline: 12px; scroll-margin-top: 80px; }
  .gezinti > .gezinti__kalem + .gezinti__kalem { border-top: 1px solid var(--kenar); }

  .gezinti .gezinti__bag {
    min-height: 54px; padding: 12px 12px; gap: 10px;
    border-radius: 14px; font-size: 1rem;
  }
  /* Chevron yumuşak bir madalyon içinde: dokunulacak yeri işaret ediyor.
     Döndürme kuralı (`[aria-expanded="true"] svg`) yukarıda, korunuyor. */
  .gezinti .gezinti__bag > svg {
    width: 28px; height: 28px; padding: 5px; flex: none;
    border-radius: 50%; background: var(--krem); color: var(--turuncu);
    transition: transform .18s ease, background-color .18s ease;
  }
  /* Açık kalem ile altındaki panel TEK blok okunsun: aynı zemin, üstte
     yuvarlak, altta düz. */
  .gezinti .gezinti__bag[aria-expanded="true"] {
    background: var(--seftali-zem); color: var(--turuncu-koy);
    border-radius: 14px 14px 0 0;
  }
  .gezinti .gezinti__bag[aria-expanded="true"] > svg { background: var(--beyaz); }

  /* Genel odak halkası 3px + 3px kaçıklık; çekmecede satırın altındaki
     panelin başlığına biniyordu (kullanıcının bildirdiği görüntü). Halka
     içeri alındı: görünürlük aynı, taşma yok. */
  .gezinti :focus-visible { outline-width: 2px; outline-offset: -2px; border-radius: 14px; }

  /* --- açılan panel ------------------------------------------------------ */
  .gezinti .acilir {
    margin: 0 0 6px; padding: 8px 8px 10px;
    background: var(--krem); border-radius: 0 0 14px 14px;
    animation: cekmece-panel .22s cubic-bezier(.22,.61,.36,1) both;
  }
  .gezinti .mega > .mega__gruplar { grid-template-columns: 1fr; padding: 0; gap: 12px; }

  /* Grup başlığı: küçük etiket, turuncu, ikonlu. */
  .gezinti .mega__grup h4 {
    font-size: .68rem; letter-spacing: .14em; margin: 0 0 2px; padding: 0 8px;
  }
  .gezinti .mega__grup ul { gap: 0; }
  /* Kalemler arası saç teli ayraç — kart yığını yerine sakin bir liste. */
  .gezinti .mega__grup li + li { border-top: 1px solid color-mix(in srgb, var(--kenar) 62%, transparent); }
  .gezinti .mega__bag {
    padding: 11px 8px; border-radius: 10px; min-height: 48px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .gezinti .mega__bag strong { font-size: .95rem; }
  .gezinti .mega__bag small { font-size: .76rem; margin-top: 1px; }
  .gezinti .mega__bag:active { background: var(--beyaz); }

  /* Alt şerit: Kurumsal'ınki yalnız "Randevu Oluştur" taşıyor ve aynı düğme
     çekmecenin ayağında zaten var — yineleme kaldırıldı. Faaliyet
     Alanları'nınki gerçek bir gezinme bağlantısı ("tümünü gör"), kalıyor;
     yanındaki düz cümle ise dar ekranda yalnız satır uzatıyor. */
  .gezinti .mega--kurumsal > .mega__alt { display: none; }
  .gezinti .mega > .mega__alt {
    background: none; margin-top: 10px; padding: 10px 8px 0;
    border-top: 1px solid var(--kenar); font-size: .86rem;
  }
  .gezinti .mega > .mega__alt > span { display: none; }
  .gezinti .mega > .mega__alt a { color: var(--turuncu-koy); }

  /* --- çekmece ayağı: konum kartı ---------------------------------------- */
  .gezinti__ayak { gap: 12px; }
  .gezinti__konum { display: grid; gap: 9px; }
  .gezinti__harita {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 16 / 10; border-radius: 14px;
    border: 1px solid var(--kenar); background: var(--krem);
  }
  /* Harita dokunuş ALMIYOR: çekmece kaydırılan bir yüzey, parmak çerçevenin
     içine düşerse kaydırma orada ölürdü. Dokunuş saran bağlantıya gider ve
     yol tarifi açılır (gerekçenin tamamı `by_gezinti_konum()` başlığında). */
  .gezinti__harita iframe {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; pointer-events: none;
  }
  .gezinti__harita-etiket {
    position: absolute; right: 8px; bottom: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .94); color: var(--lacivert);
    font-size: .78rem; font-weight: 700;
    box-shadow: 0 6px 16px rgba(22, 55, 92, .18);
  }
  .gezinti__harita:hover .gezinti__harita-etiket { color: var(--turuncu-koy); }
  .gezinti__adres {
    display: flex; align-items: flex-start; gap: 8px; margin: 0;
    font-size: .82rem; line-height: 1.5; color: var(--gri);
  }
  .gezinti__adres svg { flex: none; margin-top: 2px; color: var(--turuncu); }

  /* Alçak ekranda (katlanabilir, küçük telefon) harita bastırılır: menünün
     kendisi kaydırmadan görünmeli. */
  @media (max-height: 700px) {
    .gezinti__harita { aspect-ratio: 16 / 7; }
  }
}

@keyframes cekmece-panel {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gezinti .acilir { animation: none; }
  .gezinti .gezinti__bag > svg { transition: none; }
}