/*
 * Sağlıklı Türkiye — temel stil
 *
 * Marka kimliği korunuyor (yeşil), ama tek tonla çalışmak yerine iki
 * dereceli bir yeşil ve düzgün bir nötr skala kuruluyor. Eski sitede
 * metin/zemin kontrastlarının bir kısmı WCAG AA eşiğinin altındaydı.
 *
 * Yön bağımlı özellikler yerine mantıksal özellikler kullanılıyor
 * (margin-inline-start vb.), böylece Arapça sağdan sola düzende
 * ayrı bir stil dosyası gerekmiyor.
 */

:root {
  /* Palet logodan türetildi: yeşil #50B070, mavi #5080B0.
     İkisi de aynı doygunluk ve açıklıkta (S38/L50) — bilinçli bir çift.

     Ham logo yeşili beyaz üzerinde 2.70:1 kontrast verir; gövde metni ve
     düğmeler için yetersiz. Bu yüzden kimlik rengi olarak logo tonu
     korunuyor, okunması gereken her yerde koyulaştırılmış tonu kullanılıyor. */

  --logo-yesil:   #50B070;   /* kimlik: ikon, dekor, gradyan */
  --logo-mavi:    #5080B0;

  /* Ana ton logo yeşilinin tonunda (H=140), doygunluk sonuna kadar
     açık: %94. Logonun kendisi %38 doygunlukta ve beyazla 2.70:1
     veriyor — düğmede okunmaz. Açıklık %27'ye indirilince ton korunuyor
     ve 4.74:1 oluyor.

     Bu, tonu bozmadan gidilebilecek en canlı yer: doygunluğu daha da
     artırmak renkliliği kayda değer ölçüde değiştirmiyor, açıklığı
     yükseltmek ise kontrastı 4.5'in altına düşürüyor. Denenen ara
     tonlar: #238042 (S%57), #17823B (S%70). */
  --marka:        #04862F;   /* metin ve düğme — beyazda 4.74:1  AA */
  --marka-koyu:   #035E21;   /* hover ve rozet — 7.99:1  AAA */
  --marka-soft:   #E7FBEE;   /* yumuşak zemin  — koyu yazı 15.39:1 */

  /* Logo mavisi ikincil renk: bilgi kutuları, etkinlik bloğu ve yan
     panelde kullanılıyor — yeşille birlikte iki katmanlı bir düzen
     kuruyor, tek renge boğulmuyor. */
  --ikincil:      #31577C;   /* mavi vurgu     — 7.54:1  AA */
  --ikincil-koyu: #24405B;
  --ikincil-soft: #EDF2F7;

  --zemin:        #FFFFFF;
  --zemin-alt:    #F7FBF8;
  --cizgi:        #E1EAE4;
  --metin:        #18201B;   /* 16.65:1 */
  --metin-2:      #4C5750;   /*  7.54:1 */
  /* Bu ton iz, tarih, unvan ve telif gibi küçük metinlerde kullanılıyor;
     "yalnız büyük metin" varsayımı doğru değildi — en açık zeminde bile
     4.5:1'i geçecek kadar koyulaştırıldı. */
  --metin-3:      #5A7262;   /*  5.22:1 beyazda, 4.78:1 soft zeminde */

  --olcek-1: 0.8125rem;
  --olcek-2: 0.9375rem;
  --olcek-3: 1rem;
  --olcek-4: 1.25rem;
  --olcek-5: 1.75rem;
  --olcek-6: 2.5rem;
  --olcek-7: 3.25rem;

  --bosluk: 1rem;
  --kenar: 1200px;
  --yuvarlak: 10px;

  --yazi: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Başlıklarda vurgu için italik serif. Sans ile birlikte kullanılır:
     serifin x-yüksekliği daha düşük olduğu için optik denge amacıyla
     biraz büyütülür (aşağıdaki `em` kuralına bakınız). */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}

[dir="rtl"] {
  --yazi: "IBM Plex Sans Arabic", "Figtree", system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi);
  font-size: var(--olcek-3);
  line-height: 1.65;
}

/* Arapçada satır yüksekliği Latin'den fazla olmalı */
[dir="rtl"] body { line-height: 1.85; }

img { max-width: 100%; height: auto; }

a { color: var(--marka); text-underline-offset: 2px; }
a:hover { color: var(--marka-koyu); }

:focus-visible {
  outline: 3px solid var(--logo-yesil);
  outline-offset: 2px;
}

.atla {
  position: absolute;
  inset-inline-start: -9999px;
  background: var(--marka);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 100;
}
.atla:focus { inset-inline-start: 0; top: 0; }

.kap {
  max-width: var(--kenar);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ---------- üst ---------- */
.ust-serit {
  background: var(--marka);   /* koyu ton: beyaz metin 6.50:1 */
  color: #fff;
  font-size: var(--olcek-1);
}
.ust-serit .kap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-block: 0.5rem;
}
.ust-bilgi { color: #fff; text-decoration: none; opacity: 0.95; }
.ust-bilgi:hover { color: #fff; text-decoration: underline; }

.ust-ana {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1rem;
  flex-wrap: wrap;
}
.logo { flex: 0 0 auto; }
.logo img { display: block; width: 150px; height: auto; }

/* Metin içindeki uzun bağlantılar (bağlantı metni URL'nin kendisi olan
   kaynakçalar) dar ekranda satıra sığmayıp sayfayı yatay kaydırıyordu.
   Kelime arası yoksa bağlantı kırılabilsin. */
.govde a,
.yazi-ana a,
.bolum-giris a { overflow-wrap: anywhere; }

/* ---------- katlanır menü ---------- */
/* Dar ekranda <details> olarak katlanıyor, geniş ekranda özet gizlenip
   liste açıkta bırakılıyor. Tarayıcılar <details> içeriğini kapalıyken
   gizler; display'i açıkça vermek bu davranışı geçersiz kılıyor. */
.menu-katlanir { flex: 1 1 auto; min-width: 0; }
/* Görünürlüğü tarayıcının <details> davranışına bırakmıyoruz: özet
   gizlendiğinde tarayıcılar içeriği açık/kapalı fark etmeksizin
   çizebiliyor. Geniş ekranda menü hep açık, dar ekranda kuralı biz
   veriyoruz — davranış her tarayıcıda aynı olsun. */
/* Geniş ekranda <details> açık duruyor (işaretlemede `open`), o yüzden
   içeriği göstermek için hileye gerek yok — yalnızca düğmeyi gizliyoruz.
   Kapalı <details> içeriğini CSS ile göstermeye çalışmak işe yaramıyor:
   tarayıcı kutuyu hesaplıyor ama boyamıyor. */
.menu-katlanir > summary { display: none; }

.menu-dugme {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .875rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  background: var(--zemin);
  color: var(--metin);
  font-size: var(--olcek-2);
  font-weight: 600;
  cursor: pointer;
  list-style: none;         /* varsayılan üçgeni gizle */
  min-height: 44px;
}
.menu-dugme::-webkit-details-marker { display: none; }
.menu-dugme:hover { border-color: var(--marka); color: var(--marka-koyu); }

/* Hamburger: üç çizgi, açıkken çarpıya dönüyor */
.menu-cizgi,
.menu-cizgi::before,
.menu-cizgi::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.menu-cizgi { position: relative; }
.menu-cizgi::before,
.menu-cizgi::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu-cizgi::before { inset-block-start: -6px; }
.menu-cizgi::after  { inset-block-start: 6px; }

.menu-katlanir[open] > summary .menu-cizgi { background: transparent; }
.menu-katlanir[open] > summary .menu-cizgi::before { transform: translateY(6px) rotate(45deg); }
.menu-katlanir[open] > summary .menu-cizgi::after  { transform: translateY(-6px) rotate(-45deg); }

.menu { flex: 1 1 auto; }
.menu ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}
.menu a {
  color: var(--metin);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--olcek-2);
  padding-block: 0.5rem;
  display: inline-block;
}
.menu a:hover { color: var(--marka); }

/* ---------- açılır menü ---------- */
/* Eski sitedeki gibi: üst başlığın üstüne gelince alt başlıklar iniyor.
   Açılma yalnızca CSS ile — :hover fare için, :focus-within klavye için.
   JavaScript yok, çünkü menü sayfanın ilk çizilen parçası ve betik
   gecikmesi menüyü tıklanamaz bırakıyordu. */
.menu > ul > li { position: relative; }

.menu .ok {
  display: inline-block;
  width: 0; height: 0;
  margin-inline-start: 0.3rem;
  border: 4px solid transparent;
  border-top-color: currentColor;
  vertical-align: 0.1em;
}

/* Seçici `.menu ul`'dan güçlü olmak zorunda: o kural display:flex veriyor
   ve tek sınıflı `.alt-liste` altta kalıyordu — açılır listeler sürekli
   açık görünüyordu. */
.menu .alt-liste {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  display: none;
  flex-direction: column;
  gap: 0;
  min-width: 260px;
  max-width: 340px;
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: 0 8px 28px rgba(22, 36, 31, 0.14);
  padding: 0.25rem;
  z-index: 50;
}
.menu > ul > li.alt-var:hover > .alt-liste,
.menu > ul > li.alt-var:focus-within > .alt-liste { display: flex; }

.menu .alt-liste a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-weight: 400;
  line-height: 1.35;
}
.menu .alt-liste a:hover,
.menu .alt-liste a:focus-visible { background: var(--marka-soft); color: var(--marka-koyu); }

/* ---------- dil seçici ---------- */
.dil { position: relative; flex: 0 0 auto; }
.dil-dugme {
  font: inherit;
  font-size: var(--olcek-2);
  background: var(--marka-soft);
  color: var(--marka-koyu);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  min-height: 44px;
}
.dil-liste {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.25rem);
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: 0 6px 24px rgba(22, 36, 31, 0.12);
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  min-width: 170px;
  z-index: 40;
}
.dil-liste a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--metin);
  min-height: 44px;
}
.dil-liste a:hover { background: var(--marka-soft); }
.dil-liste a[aria-current="true"] { font-weight: 600; color: var(--marka); }

/* ---------- içerik ---------- */
main { display: block; min-height: 50vh; }

.yazi { padding-block: 2.5rem 4rem; }

h1 {
  font-size: var(--olcek-6);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
h2 { font-size: var(--olcek-5); line-height: 1.25; margin: 2.25rem 0 0.75rem; text-wrap: balance; }
h3 { font-size: var(--olcek-4); line-height: 1.3; margin: 1.75rem 0 0.5rem; }

/* Başlık içindeki vurgu: italik serif.
   1.08 çarpanı iki yazı tipini optik olarak aynı boyda gösterir —
   çarpansız bırakılırsa serif küçük durur ve karışım yamalı görünür. */
h1 em, h2 em, h3 em, .hero em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.08em;
  letter-spacing: -0.01em;
}

/* Arapçada Latin serif italik karşılığı yok; vurgu sans olarak kalır. */
[dir="rtl"] h1 em, [dir="rtl"] h2 em, [dir="rtl"] h3 em, [dir="rtl"] .hero em {
  font-family: inherit;
  font-size: 1em;
  font-weight: 600;
  font-style: normal;
}

.govde { max-width: 68ch; }
.govde-dar { max-width: 62ch; }
.govde p { margin: 0 0 1.125rem; color: var(--metin-2); }
.govde ul, .govde ol { color: var(--metin-2); padding-inline-start: 1.25rem; }
.govde li { margin-bottom: 0.5rem; }
.govde b, .govde strong { color: var(--metin); font-weight: 600; }
.govde img { border-radius: var(--yuvarlak); margin-block: 1rem; }

.iz {
  font-size: var(--olcek-1);
  color: var(--metin-3);
  margin-bottom: 1rem;
}
.iz a { color: var(--metin-3); }
.iz span { margin-inline: 0.375rem; }

.etiket {
  display: inline-block;
  font-size: var(--olcek-1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* 13px ve tonlu zemin üzerinde: canlı ton burada 4.5'i geçmiyor,
     koyusu geçiyor. Rozet küçük olduğu için renk farkı göze çarpmıyor. */
  color: var(--marka-koyu);
  background: var(--marka-soft);
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  margin: 0 0 0.75rem;
}

.tarih { color: var(--metin-3); font-size: var(--olcek-2); margin: 0 0 1.5rem; }

/* ---------- bölüm listesi ---------- */
.bolum-bas { padding-block: 2.5rem 1.5rem; }

.etiket-ust {
  font-size: var(--olcek-1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marka-koyu);   /* 13px — tonlu zeminlerde de AA */
  margin: 0 0 0.5rem;
}

.kartlar {
  list-style: none;
  margin: 0 0 4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.kart {
  position: relative;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  background: var(--zemin);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
/* Üstteki ince yeşil şerit kartı sayfadan ayırıyor */
.kart::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--logo-yesil);
  border-radius: var(--yuvarlak) var(--yuvarlak) 0 0;
  z-index: 1;
}
.kart:hover {
  box-shadow: 0 12px 28px rgba(22, 36, 31, 0.14);
  transform: translateY(-4px);
}
.kart a {
  display: block;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.kart-baslik {
  font-size: var(--olcek-4);
  line-height: 1.3;
  margin: 0 0 0.5rem;
  color: var(--metin);
}
.kart-ozet { color: var(--metin-2); font-size: var(--olcek-2); margin: 0 0 0.75rem; }
.kart-devam { color: var(--marka); font-weight: 600; font-size: var(--olcek-2); }

.bos { color: var(--metin-3); padding-block: 2rem 4rem; }

/* ---------- SSS ---------- */
.sss { margin-top: 3rem; max-width: 68ch; }
.sss-oge {
  border-block-end: 1px solid var(--cizgi);
  padding-block: 0.875rem;
}
.sss-oge summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.sss-oge div { color: var(--metin-2); padding-block-start: 0.5rem; }

/* ---------- düğme ---------- */
/* Düğmeler hafifçe kalkıyor: tıklanabilir olduğu belli olsun */
.dugme { transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease; }
.dugme:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(22,36,31,.16); }
.dugme:active { transform: translateY(0); }

.dugme {
  display: inline-block;
  background: var(--marka);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--yuvarlak);
  min-height: 44px;
}
.dugme:hover { background: var(--marka-koyu); color: #fff; }

.hata { text-align: center; padding-block: 5rem; }

/* ---------- alt ---------- */
.alt {
  background: var(--zemin-alt);
  border-block-start: 1px solid var(--cizgi);
  margin-block-start: 4rem;
}
/* Üç sütun: kurum, yararlı linkler, iş birlikleri. Yasal bağlantılar
   telif satırında. */
.alt-ic {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 2rem 3rem;
  padding-block: 2.5rem 2rem;
}
.alt-baslik { font-weight: 600; margin: 0 0 0.5rem; }
.alt-metin { color: var(--metin-2); font-size: var(--olcek-2); margin: 0 0 0.25rem; }
.alt-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.alt-menu a { color: var(--metin-2); text-decoration: none; font-size: var(--olcek-2); }
.alt-menu a:hover { color: var(--marka); }

/* Sosyal medya simgeleri. Dokunma hedefi 44x44'ün altına düşmesin diye
   simge 20px ama bağlantı kutusu 40px + boşluk. */
.sosyal-baslik { margin-top: 1.125rem; }
.sosyal {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0;
  display: flex;
  gap: 0.375rem;
}
.sosyal a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--metin-2);
  transition: color .2s ease, background-color .2s ease;
}
.sosyal a:hover,
.sosyal a:focus-visible { color: var(--marka); background: var(--marka-soft); }
.sosyal svg { display: block; }

/* Yararlı linkler bloğu üçüncü sütun; dar ekranda alt alta düşüyor.
   Dış bağlantı işareti yalnızca görsel, ekran okuyucudan gizli. */
/* İş birlikleri içinde Türkiye / Uluslararası ara başlıkları */
.alt-grup {
  margin: 1rem 0 0.375rem;
  font-size: var(--olcek-1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--metin-3);
}
.alt-baslik + .alt-grup { margin-top: 0.25rem; }
.dis-isaret {
  font-size: 0.75em;
  margin-inline-start: 0.3em;
  opacity: 0.55;
}
.alt-telif {
  border-block-start: 1px solid var(--cizgi);
  padding-block: 1rem;
  color: var(--metin-3);
  font-size: var(--olcek-1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.alt-telif p { margin: 0; }
.alt-yasal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.alt-yasal a { color: var(--metin-3); text-decoration: none; }
.alt-yasal a:hover { color: var(--marka); text-decoration: underline; }

@media (max-width: 900px) {
  .alt-ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .alt-kurum { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .alt-ic { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- ana sayfa ---------- */
.hero {
  background: linear-gradient(180deg, var(--marka-soft), var(--zemin));
  border-block-end: 1px solid var(--cizgi);
  padding-block: 4rem 3rem;
}
.hero h1 { font-size: var(--olcek-7); max-width: 20ch; }
.hero p { font-size: var(--olcek-4); color: var(--metin-2); max-width: 56ch; margin-block: 0 1.75rem; }

@media (max-width: 900px) {
  /* Dar ekranda açılır liste kavramı yok: hamburger açıldığında tüm
     başlıklar alt alta akıyor, alt başlıklar girintili görünüyor. */
  .menu .alt-liste {
    display: flex;
    position: static;
    border: 0;
    box-shadow: none;
    min-width: 0;
    max-width: none;
    padding: 0 0 0 0.875rem;
    background: transparent;
  }
  .menu .ok { display: none; }

  /* Menü katlanıyor: düğme logonun sağında, liste altında tam genişlikte */
  .menu-katlanir { flex: 0 0 auto; order: 3; }
  .menu-katlanir > summary { display: inline-flex; }

  .menu-katlanir:not([open]) > .menu { display: none; }

  .menu-katlanir[open] > .menu {
    display: block;
    position: absolute;
    inset-inline: 0;
    z-index: 20;
    margin-block-start: .75rem;
    padding: .5rem 1.25rem 1rem;
    background: var(--zemin);
    border-block: 1px solid var(--cizgi);
    box-shadow: 0 12px 24px rgba(22, 36, 31, .10);
  }

  .menu-katlanir > .menu ul { flex-direction: column; gap: 0; }
  .menu-katlanir > .menu li + li { border-block-start: 1px solid var(--cizgi); }
  .menu-katlanir > .menu a {
    display: block;
    padding-block: .875rem;
    font-size: var(--olcek-3);
    min-height: 44px;
  }

  .ust-ana { position: relative; gap: .75rem; }
  .logo { flex: 1 1 auto; }
  .dil { order: 2; }
}

@media (max-width: 900px) {
  /* Dokunma hedefleri: iz ve alt menü bağlantıları satır yüksekliği
     kadar inceydi (16-18px), parmakla isabet ettirmek zordu. */
  .iz a,
  .alt-menu a,
  .alt-yasal a {
    display: inline-block;
    padding-block: .5rem;
    min-height: 24px;
  }
  .alt-menu { gap: .25rem; }
}

@media (max-width: 720px) {
  :root { --olcek-6: 2rem; --olcek-7: 2.25rem; }
  .ust-ana { gap: 0.75rem; }
  .menu ul { gap: 0.875rem; }
  .ust-serit .kap { gap: .5rem; padding-block: .375rem; }
  .ust-bilgi { font-size: var(--olcek-1); }
  .menu-dugme-metin { display: none; }   /* dar ekranda yalnızca ikon */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- kart görseli ---------- */
.kart-gorsel {
  /* Sabit en-boy oranı: görseller yüklenirken sayfa zıplamaz (CLS) */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--yuvarlak) var(--yuvarlak) 0 0;
  background: var(--zemin-alt);
  margin: -1.25rem -1.25rem 1rem;
}
.kart-gorsel picture,
.kart-gorsel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- taslak önizleme şeridi ---------- */
.onizleme-serit {
  background: #8A5A0B;
  color: #fff;
  padding: 0.625rem 1.25rem;
  font-size: var(--olcek-2);
  text-align: center;
}
.onizleme-serit a { color: #fff; text-decoration: underline; margin-inline-start: 0.5rem; }

/* ---------- slider ---------- */
/* Metin görselin üzerine binmiyor, altındaki renkli bloğa geçiyor.
   Sebebi: slayt görsellerinin içinde metin için hazırlanmış şeritler var
   ama her görselde farklı yerdeler (kimi ortada, kimi üstte) — üzerine
   yazmak hem şeritle hem görseldeki logo/ikonlarla çakışıyordu. */
.slider { position: relative; background: var(--marka-koyu); }

.slider-ray {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.slider-ray::-webkit-scrollbar { display: none; }

.slayt {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.slayt-gorsel { background: var(--zemin-alt); }
.slayt-gorsel picture, .slayt-gorsel img {
  display: block; width: 100%; height: auto;
}

.slayt-metin {
  background: linear-gradient(135deg, var(--marka) 0%, var(--marka-koyu) 100%);
  color: #fff;
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  flex: 1;
  /* Slaytlar eşit yükseklikte olmak zorunda (kaydırma hizası bozulmasın),
     en uzun slayt hepsinin boyunu belirliyor. Kısa slaytlarda 80-160px
     artıyordu ve hepsi içeriğin altında birikip kocaman bir boşluk gibi
     duruyordu. Ortalayınca fazlalık ikiye bölünüyor, dolgu gibi okunuyor. */
  display: flex;
  align-items: center;
}
.slayt-metin > .kap { width: 100%; }
.slayt-metin h2 {
  color: #fff;
  font-size: clamp(1.375rem, 3.2vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.375rem;
  max-width: 24ch;
  text-wrap: balance;
}
.slayt-metin p {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.9375rem, 1.6vw, 1.1875rem);
  max-width: 52ch;
  margin: 0 0 1.25rem;
}
.slayt-metin .dugme { background: #fff; color: var(--marka-koyu); }
.slayt-metin .dugme:hover { background: var(--marka-soft); color: var(--marka-koyu); }

/* Gösterge: nokta yerine çizgi — hangi slaytta olduğunuz daha okunur */
.slider-noktalar {
  display: flex;
  gap: 0.375rem;
  padding: 0 1.25rem clamp(1.25rem, 3vw, 1.75rem);
  background: var(--marka-koyu);
  justify-content: center;
}
.slider-noktalar a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 24px;
}
.slider-noktalar span {
  display: block;
  width: 28px; height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.2s ease;
}
.slider-noktalar a:hover span,
.slider-noktalar a[aria-current="true"] span { background: #fff; }

/* Kutu, kaynak görsellerin oranında: 2800x1150. Görselin tamamı her ekran
   genişliğinde görünüyor, hiçbir yerinden kırpılmıyor.

   Önceden 400px sabit yükseklik + object-fit: cover vardı. 1280px'te
   görselin dörtte biri, 700px'te yaklaşık üçte biri üstten ve alttan
   kesiliyordu; kesilen yer de çoğunlukla alt şerideki iş birliği
   logolarıydı — yani slaydın anlamını taşıyan kısım. Metin görselin
   üstüne binmediği için (bkz. .slayt-metin) kırpmaya gerek yok. */
.slayt-gorsel {
  aspect-ratio: 2800 / 1150;
  overflow: hidden;
  display: flex;
}
.slayt-gorsel picture { display: block; width: 100%; }
.slayt-gorsel img {
  width: 100%;
  height: 100%;
  /* contain: oranı farklı bir görsel yüklenirse kırpmak yerine
     zemin rengiyle boşluk bırakır. Mevcut beşi tam oturuyor. */
  object-fit: contain;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .slider-ray { scroll-behavior: auto; }
}

/* ═══════════ ANA SAYFA BÖLÜMLERİ ═══════════ */

/* Bölümler arası nefes: eski sitede bloklar sıkışıktı */
.tanitim, .liste-bolum { padding-block: clamp(3rem, 7vw, 5.5rem); }
/* Aralarında liste bölümü olduğu için nth-of-type işe yaramıyor;
   ters yerleşimli ikinci blok zeminiyle de ayrışsın. */
.tanitim { background: var(--zemin); }
.tanitim-ters { background: var(--zemin-alt); }

.tanitim-ic {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* İkinci tanıtım bloğu ters yerleşir — sayfa tek düze görünmesin */
.tanitim-ters .tanitim-ic { direction: rtl; }
.tanitim-ters .tanitim-ic > * { direction: ltr; }
[dir="rtl"] .tanitim-ters .tanitim-ic { direction: ltr; }
[dir="rtl"] .tanitim-ters .tanitim-ic > * { direction: rtl; }

.tanitim-metin h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  max-width: 20ch;
}
.tanitim-metin p { color: var(--metin-2); margin: 0 0 1rem; max-width: 60ch; }
.tanitim-metin .dugme { margin-top: 0.75rem; }

/* Odak alanı kartları. Görseller çizim; fotoğraf gibi kırpılmamaları
   için contain ile yumuşak bir zemine oturuyorlar. 2×2 ızgara metin
   sütununun yanında dengeli duruyor, dar ekranda kart küçülüyor. */
.konu-kartlari {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.konu-kart { display: flex; }

.konu-kart a {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  text-decoration: none;
  color: inherit;
  padding: 0.875rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  background: var(--zemin);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.konu-kart a:hover,
.konu-kart a:focus-visible {
  border-color: var(--marka);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 36, 31, .10);
}

/* Kaynak görsellerin oranı karışık (300x175 ve 250x275). Ortak bir
   4:3 kutuda contain ile oturuyorlar; kalan boşluk görselin kendi zemin
   rengiyle doluyor, böylece dördü de kutuyu kaplıyormuş gibi duruyor. */
.konu-gorsel {
  display: block;
  background: var(--konu-zemin, var(--zemin-alt));
  border-radius: calc(var(--yuvarlak) / 1.5);
  overflow: hidden;
}

.konu-gorsel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
  /* Zemini sarmalayıcıya vermek yetmiyor: görselin kendi hesaplanan
     zemini beyaz çıkıyor ve contain'in bıraktığı boşluğu o dolduruyor.
     Rengi doğrudan görsele veriyoruz — değişken üst elemandan miras. */
  background: var(--konu-zemin, var(--zemin-alt));
}

.konu-ad {
  font-weight: 600;
  font-size: var(--olcek-2);
  line-height: 1.3;
  margin-block-start: auto;
}

/* Ters yerleşimli blokta kartın zemini değişiyor ki kaybolmasın.
   Görselin zeminine dokunmuyoruz: her görselin kendi rengi var ve bunu
   sabit bir renkle ezmek contain'in bıraktığı boşluğu beyaza çeviriyordu
   — kartlar bu yüzden çerçeveli görünüyordu. */
.tanitim-ters .konu-kart a { background: var(--zemin-alt); }

@media (max-width: 560px) {
  .konu-kartlari { gap: 0.75rem; }
  .konu-ad { font-size: var(--olcek-1); }
}

.tanitim-gorseller {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.tanitim-gorseller picture:first-child { grid-column: 1 / -1; }
.tanitim-gorseller img {
  width: 100%;
  /* Kapak görsellerindeki gibi: doğal genişliğin ötesine büyütmüyoruz */
  max-width: var(--gorsel-en, 100%);
  margin-inline: auto;
  border-radius: var(--yuvarlak);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.tanitim-gorseller picture:first-child img { aspect-ratio: 16 / 9; }

/* ---------- istatistik şeridi ---------- */
.istatistik-serit {
  background: var(--zemin-alt);
  border-block: 1px solid var(--cizgi);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.istatistik-bas { max-width: 68ch; margin-bottom: 2.5rem; }
.istatistik-serit h2 {
  color: var(--metin);
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 0.25rem;
  letter-spacing: -0.02em;
}
.istatistik-alt {
  color: var(--marka);
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  margin: 0 0 1.25rem;
}
.istatistik-aciklama {
  color: var(--metin-2);
  font-size: var(--olcek-2);
  line-height: 1.7;
  margin: 0;
}

.istatistikler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.75rem 1.5rem;
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
/* Her rakam kendi kutusunda; sol kenardaki logo yeşili işaret ediyor */
.istatistik {
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-inline-start: 4px solid var(--logo-yesil);
  border-radius: var(--yuvarlak);
  padding: 1.125rem 1.25rem 1.25rem;
}
.istatistik dt {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--marka);
}
.istatistik dd {
  margin: 0.375rem 0 0;
  color: var(--metin-2);
  font-size: var(--olcek-2);
  line-height: 1.5;
}

/* ---------- liste bölümü ---------- */
.bolum-bas-satir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.bolum-bas-satir h2 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  margin: 0;
}
.tumu {
  font-weight: 600;
  font-size: var(--olcek-2);
  text-decoration: none;
  white-space: nowrap;
}
.tumu:hover { text-decoration: underline; }
/* Etkinlik bloğunun zemini mavi tonlu; canlı yeşil orada 4.34:1 kalıyor */
.yaklasan-etkinlik .tumu { color: var(--marka-koyu); }

@media (max-width: 860px) {
  .tanitim-ic { grid-template-columns: 1fr; }
  .tanitim-ters .tanitim-ic { direction: ltr; }
  .tanitim-gorseller { grid-template-columns: 1fr 1fr; }
}

/* ═══════════ ETKİNLİKLER ═══════════ */

/* Takvim yaprağı: tarih bir blok olarak okunsun, satır içinde kaybolmasın */
.etkinlik-tarih {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.0625rem;
  width: 74px;
  padding: 0.625rem 0.25rem;
  background: var(--ikincil-soft);
  border-radius: var(--yuvarlak);
  line-height: 1.1;
}
.etkinlik-tarih .gun {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--ikincil-koyu);
  font-variant-numeric: tabular-nums;
}
.etkinlik-tarih .ay {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ikincil);
}
.etkinlik-tarih .yil,
.etkinlik-tarih .saat { font-size: 0.6875rem; color: var(--metin-3); }

.etkinlik-tarih-genis {
  width: 104px;
  padding: 1rem 0.5rem;
  background: #fff;
}
.etkinlik-tarih-genis .gun { font-size: 2.5rem; }
.etkinlik-tarih-genis .ay  { font-size: 0.875rem; }

/* ---------- liste ---------- */
.etkinlik-grup { margin-bottom: 3rem; }
.etkinlik-grup h2 { font-size: var(--olcek-5); margin: 0 0 1.25rem; }

.etkinlik-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.etkinlik-satir {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  background: var(--zemin);
  transition: box-shadow 0.18s ease;
}
.etkinlik-satir:hover { box-shadow: 0 6px 22px rgba(22, 36, 31, 0.08); }
/* Geçmiş etkinlikler arşiv; görsel olarak geri planda kalsın */
.etkinlik-gecmis { opacity: 0.72; background: var(--zemin-alt); }

.etkinlik-bilgi { flex: 1 1 auto; min-width: 0; }
.etkinlik-bilgi h3 { font-size: var(--olcek-4); margin: 0 0 0.25rem; line-height: 1.3; }
.etkinlik-bilgi h3 a { color: var(--metin); text-decoration: none; }
.etkinlik-bilgi h3 a:hover { color: var(--marka); }
.etkinlik-yer { margin: 0 0 0.375rem; color: var(--ikincil); font-size: var(--olcek-2); font-weight: 500; }
.etkinlik-ozet { margin: 0; color: var(--metin-2); font-size: var(--olcek-2); }
.etkinlik-islem { flex: 0 0 auto; align-self: center; }

.rozet-dolu {
  display: inline-block;
  font-size: var(--olcek-1);
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: var(--zemin-alt);
  color: var(--metin-3);
}

/* ---------- ana sayfa bloğu ---------- */
/* Etkinlik bloğu da mavi: takvim bilgisi içerikten ayrı bir katman */
.yaklasan-etkinlik {
  background: var(--ikincil-soft);
  border-block: 1px solid var(--cizgi);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.yaklasan-ic { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.yaklasan-metin { flex: 1 1 300px; }
.yaklasan-metin h2 { font-size: clamp(1.375rem, 2.8vw, 1.875rem); margin: 0 0 0.375rem; }
.yaklasan-metin h2 a { color: var(--metin); text-decoration: none; }
.yaklasan-metin h2 a:hover { color: var(--marka); }
.yaklasan-islem { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 0.875rem; }

@media (max-width: 640px) {
  .etkinlik-satir { flex-wrap: wrap; }
  .etkinlik-islem { flex-basis: 100%; }
}

/* Etkinlik detay sayfası kutusu */
.etkinlik-kutu {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  background: var(--marka-soft);
  border-radius: var(--yuvarlak);
  padding: 1.25rem;
  margin-block: 1.25rem 2rem;
  max-width: 68ch;
}
.etkinlik-kutu .etkinlik-yer { margin-bottom: 0.75rem; }

/* ═══════════ İÇ SAYFALAR ═══════════ */

/* Bölüm giriş alanı: liste ile görsel olarak ayrışsın */
.bolum-hero {
  background: var(--zemin-alt);
  border-block-end: 1px solid var(--cizgi);
  padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.bolum-hero .iz { margin-bottom: 0.75rem; }
.bolum-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 0.75rem;
  max-width: 18ch;
}
.bolum-giris { max-width: 66ch; color: var(--metin-2); }
.bolum-giris p { margin: 0 0 0.75rem; }
.bolum-giris p:last-child { margin-bottom: 0; }
.bolum-sayi {
  margin: 1.25rem 0 0;
  font-size: var(--olcek-2);
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}
.bolum-govde { padding-bottom: 4rem; }

.yazi-cta { margin: 1.5rem 0 0; }

/* ---------- kart ---------- */
.kart { overflow: hidden; }
.kart a { padding: 0; display: flex; flex-direction: column; }
.kart-gorsel { aspect-ratio: 16 / 9; overflow: hidden; background: var(--zemin-alt); }
.kart-gorsel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
/* Görsel kartın içinde hafifçe yaklaşıyor — kart canlanıyor */
.kart:hover .kart-gorsel img { transform: scale(1.04); }
.kart-govde { padding: 1.125rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.kart-baslik { margin: 0 0 0.5rem; }
.kart-ozet { flex: 1; }
.kart-devam { margin-top: auto; }
.kartlar-uc { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ---------- yazı sayfası ---------- */
.yazi-kapak {
  margin: 0 0 1.75rem;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  max-width: 68ch;
}
/* Görseli doğal genişliğinin ötesine büyütmüyoruz. Eski sitede
   çalışmaların çoğunun yalnızca 400x300 küçük hâli var; düzen genişliğine
   yaymak iki kat büyütmek demekti ve gözle görülür şekilde bulanıktı.
   Küçük ama net, büyük ama bulanıktan iyi. */
.yazi-kapak img {
  width: 100%;
  max-width: var(--gorsel-en, 100%);
  display: block;
}

/* Gövde metni: satır uzunluğu ve dikey ritim okumaya göre ayarlı */
.govde p { line-height: 1.75; }
.govde h2 { margin-top: 2.5rem; }
.govde h2:first-child { margin-top: 0; }
.govde blockquote {
  margin: 1.5rem 0;
  padding-inline-start: 1.125rem;
  border-inline-start: 3px solid var(--logo-yesil);
  color: var(--metin-2);
  font-size: var(--olcek-4);
}

/* ---------- ilgili içerikler ---------- */
.ilgili-bolum {
  background: var(--zemin-alt);
  border-block-start: 1px solid var(--cizgi);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.ilgili-bolum h2 { font-size: var(--olcek-5); margin: 0 0 1.5rem; }
.ilgili-bolum .kartlar { margin-bottom: 0; }

/* ═══════════ FORMLAR ═══════════ */

.iletisim-form {
  max-width: 640px;
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}
.form-alan { display: grid; gap: 0.375rem; }
.form-alan-genis { grid-column: 1 / -1; }

.iletisim-form label { font-weight: 500; font-size: var(--olcek-2); }
.zorunlu { color: #A03636; margin-inline-start: 0.125rem; }

.iletisim-form input,
.iletisim-form textarea {
  font: inherit;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--cizgi-koyu, #C9D3CD);
  border-radius: var(--yuvarlak);
  background: var(--zemin);
  color: var(--metin);
  min-height: 44px;
}
.iletisim-form textarea { min-height: 130px; resize: vertical; }
.iletisim-form input:focus-visible,
.iletisim-form textarea:focus-visible {
  outline: 3px solid var(--logo-yesil);
  outline-offset: 1px;
  border-color: var(--marka);
}
/* Hatalı alan yalnızca renkle değil, kenar kalınlığıyla da ayrışsın */
.iletisim-form [aria-invalid="true"] { border-color: #A03636; border-width: 2px; }
.alan-hata { margin: 0; color: #A03636; font-size: var(--olcek-1); }

.form-not { grid-column: 1 / -1; margin: 0; color: var(--metin-3); font-size: var(--olcek-1); }
.iletisim-form .dugme { grid-column: 1 / -1; justify-self: start; }

/* Bal küpü: ekrandan ve ekran okuyucudan gizli, ama görüntülenmiyor
   diye tarayıcı otomatik doldurmasın diye off-screen bırakılıyor */
.bal-kupu {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-sonuc {
  border-radius: var(--yuvarlak);
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
  max-width: 640px;
}
.form-basarili { background: var(--marka-soft); border: 1px solid #BFE0CB; }
.form-basarili h2 { margin: 0 0 0.375rem; font-size: var(--olcek-4); color: var(--marka-koyu); }
.form-basarili p { margin: 0; color: var(--metin-2); }
.form-hata { background: #FBEDED; border: 1px solid #E6C9C9; color: #8C2F2F; }

@media (max-width: 600px) {
  .iletisim-form { grid-template-columns: 1fr; }
}

/* ═══════════ BÜLTEN ═══════════ */
.bulten {
  background: var(--ikincil-soft);
  border-block-start: 1px solid var(--cizgi);
  padding-block: clamp(2rem, 5vw, 3rem);
}
.bulten-ic {
  display: flex;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.bulten-metin { flex: 1 1 320px; }
.bulten-metin h2 { font-size: var(--olcek-5); margin: 0 0 0.375rem; }
.bulten-metin p { margin: 0; color: var(--metin-2); max-width: 52ch; }

.bulten-form { display: flex; gap: 0.5rem; flex: 1 1 340px; flex-wrap: wrap; }
.bulten-form input[type="email"] {
  flex: 1 1 200px;
  font: inherit;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--cizgi-koyu, #C9D3CD);
  border-radius: var(--yuvarlak);
  background: var(--zemin);
  min-height: 46px;
}
.bulten-form .dugme { min-height: 46px; }

.bulten-sonuc {
  flex: 1 1 340px;
  margin: 0;
  padding: 0.875rem 1rem;
  border-radius: var(--yuvarlak);
  font-size: var(--olcek-2);
}
.bulten-ok   { background: var(--marka-soft); color: var(--marka-koyu); border: 1px solid #BFE0CB; }
.bulten-hata { background: #FBEDED; color: #8C2F2F; border: 1px solid #E6C9C9; }

/* Ekran okuyucuya görünür, ekranda gizli */
.gorsel-gizli {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Bilgilendirme sayfası */
.mesaj-kutu {
  max-width: 60ch;
  padding-block: 2rem 3rem;
}
.mesaj-kutu h1 { margin-bottom: 0.75rem; }
.mesaj-kutu p { color: var(--metin-2); margin-bottom: 1.5rem; }

/* ---------- dil seçici (details) ---------- */
/* <details> varsayılan üçgen işaretini gizle; kendi okumuzu kullanıyoruz */
.dil > summary { list-style: none; }
.dil > summary::-webkit-details-marker { display: none; }
.dil > summary::marker { content: ''; }

.dil { position: relative; flex: 0 0 auto; }
.dil-dugme {
  font-size: var(--olcek-2);
  background: var(--marka-soft);
  color: var(--marka-koyu);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  user-select: none;
}
.dil-dugme::after {
  content: '▾';
  font-size: 0.75em;
  transition: transform 0.15s ease;
}
.dil[open] .dil-dugme::after { transform: rotate(180deg); }
.dil-dugme:hover { background: var(--zemin-alt); }
.dil > summary:focus-visible { outline: 3px solid var(--logo-yesil); outline-offset: 2px; }

.dil[open] .dil-liste { display: block; }

/* ---------- alt çalışmalar ---------- */
.alt-calismalar {
  background: var(--marka-soft);
  border-block-start: 1px solid var(--cizgi);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.alt-calismalar h2 { font-size: var(--olcek-5); margin: 0 0 1.5rem; }
.alt-calismalar .kartlar { margin-bottom: 0; }
.alt-calismalar .kart { background: var(--zemin); }

/* ═══════════ İÇ SAYFA: İKİ SÜTUN ═══════════ */
/* Metin okuma genişliğinde kalıyor ama sağdaki boşluk yan panelle
   doluyor: sayfa dengeleniyor ve okuyucu bölümün diğer içeriklerine
   sayfayı terk etmeden ulaşıyor. */
.yazi-govde-alan { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }

@media (min-width: 1000px) {
  .yazi-govde-alan { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .yazi-yan { position: sticky; top: 1.5rem; }
}

.yazi-ana { min-width: 0; }
.yazi-ana .govde,
.yazi-ana .yazi-kapak { max-width: none; }

.yan-blok {
  background: var(--zemin-alt);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 1.125rem 1.25rem;
  margin-bottom: 1rem;
}
.yan-blok h2 {
  font-size: var(--olcek-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--metin-3);
  margin: 0 0 .75rem;
  font-weight: 700;
}
.yan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; }
.yan-liste a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .5rem .625rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--metin);
  font-size: var(--olcek-2);
  line-height: 1.35;
  min-height: 40px;
  transition: background-color .15s ease, transform .15s ease;
}
.yan-liste a:hover { background: var(--zemin); color: var(--marka); transform: translateX(3px); }
.yan-sayi {
  flex: 0 0 auto;
  background: var(--marka-soft);
  color: var(--marka);
  font-size: .6875rem;
  font-weight: 700;
  padding: .0625rem .375rem;
  border-radius: 999px;
}

/* İletişim kutusu mavi: yeşil içerik akışından ayrışıyor */
.yan-iletisim { background: var(--ikincil-soft); border-color: #CFDCE8; }
.yan-iletisim h2 { color: var(--ikincil); }
.yan-iletisim .dugme { background: var(--ikincil); }
.yan-iletisim .dugme:hover { background: var(--ikincil-koyu); }
.yan-iletisim p { margin: 0 0 .875rem; color: var(--metin-2); font-size: var(--olcek-2); }
.yan-iletisim .dugme { width: 100%; text-align: center; }

/* ---------- bölüm giriş alanı ---------- */
/* Editoryal düzen: ilk paragraf tam genişlikte giriş cümlesi, kalanı iki
   sütun. Tek sütunda metin 68ch'de kesiliyor ve sayfanın sağı boş
   kalıyordu; sütunlara bölünce hem genişlik doluyor hem satır uzunluğu
   okunur kalıyor. Giriş metni olmayan bölümlerde blok hiç basılmıyor. */
.bolum-hero-ic { max-width: none; }

.bolum-giris {
  /* Yukarıdaki tek sütun kuralının 66ch sınırını kaldırıyoruz: genişliği
     artık sütunlar paylaşıyor, satır uzunluğu yine okunur kalıyor. */
  max-width: none;
  columns: 2;
  column-gap: clamp(2rem, 5vw, 3.5rem);
  orphans: 2;
  widows: 2;
}

/* Giriş cümlesi sütunları aşıyor ve biraz daha iri — okuma buradan başlıyor */
.bolum-giris > p:first-child {
  column-span: all;
  font-size: var(--olcek-4);
  line-height: 1.5;
  color: var(--yazi);
  max-width: 60ch;
  margin-block-end: 1.5rem;
}

.bolum-giris p { break-inside: avoid-column; }

/* Dar ekranda sütun bölmek okumayı zorlaştırıyor */
@media (max-width: 900px) {
  .bolum-giris { columns: 1; }
  .bolum-giris > p:first-child { font-size: var(--olcek-3); }
}

/* ---------- video galerisi ---------- */
/* Tıkla-oynat: küçük resim kendi sunucumuzda, YouTube'a istek ancak
   ziyaretçi düğmeye basınca gidiyor. Düğme görsel olarak karta benziyor
   ama gerçekten <button>, klavyeyle de açılıyor. */
.video-galeri {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.video-oynat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  width: 100%;
  height: 100%;
  padding: 0 0 .875rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  background: var(--zemin);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.video-oynat:hover,
.video-oynat:focus-visible {
  border-color: var(--marka);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 36, 31, .10);
}

.video-oynat img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Oynat üçgeni: ayrı bir görsel yüklemeden, katıksız CSS ile */
.video-oynat::after {
  content: "";
  position: absolute;
  inset-block-start: calc(28.125% - 1.5rem);
  inset-inline-start: calc(50% - 1.5rem);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(22, 36, 31, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 1.5rem;
  transition: background-color .16s ease;
}

.video-oynat:hover::after,
.video-oynat:focus-visible::after { background-color: var(--marka); }

.video-ad {
  padding-inline: .875rem;
  font-weight: 600;
  font-size: var(--olcek-2);
  line-height: 1.35;
}

.video-cerceve {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--yuvarlak);
  display: block;
}

/* ---------- yayın dosyası indirme ---------- */
/* Yayınlarda tek dosya var, o yüzden liste değil tek kutu. Biçim ve
   boyut düğmenin yanında: 148 MB'lık bir arşivi tıklamadan önce
   bilmek gerekiyor. */
.dokuman-indir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .875rem;
  margin: 1.75rem 0;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  background: var(--marka-soft);
}

.dokuman-indir .dugme { margin: 0; }

.dokuman-bilgi {
  color: var(--metin-2);
  font-size: var(--olcek-2);
  font-weight: 600;
}

/* ---------- indirilebilir belgeler ---------- */
/* Kapak görselleri rapor kapağı: dik dikdörtgen, kırpılmadan oturuyorlar.
   İndirme olduğu belli olsun diye dosya türü ve boyutu da yazıyor. */
.belge-listesi {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.belge-listesi a {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  height: 100%;
  padding: .875rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  background: var(--zemin);
  text-decoration: none;
  color: inherit;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.belge-listesi a:hover,
.belge-listesi a:focus-visible {
  border-color: var(--marka);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 36, 31, .10);
}

.belge-listesi img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--zemin-alt);
  border-radius: calc(var(--yuvarlak) / 2);
  display: block;
}

.belge-ad {
  font-weight: 600;
  font-size: var(--olcek-2);
  line-height: 1.35;
}

.belge-indir {
  margin-block-start: auto;
  color: var(--marka-koyu);
  font-size: var(--olcek-1);
  font-weight: 600;
  letter-spacing: .03em;
}

/* ---------- işleyiş adımları ---------- */
/* Akademilerin çalışma yöntemi altı adım; sıra anlamlı olduğu için
   numaralar gizlenmiyor, kartın köşesinde iri bir rakam olarak duruyor. */
.adim-listesi {
  /* Giriş metni iki sütuna bölünüyor; adımlar o sütunların içinde
     sıkışmasın diye tüm genişliği aşıyorlar. */
  column-span: all;
  list-style: none;
  counter-reset: adim;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.adim-listesi li {
  counter-increment: adim;
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  background: var(--zemin);
}

.adim-listesi li::before {
  content: counter(adim);
  position: absolute;
  inset-block-start: -0.75rem;
  inset-inline-start: 1.25rem;
  min-width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marka);
  color: #fff;
  font-size: var(--olcek-1);
  font-weight: 700;
}

.adim-listesi h3 {
  margin: 0 0 .5rem;
  font-size: var(--olcek-3);
  line-height: 1.25;
}

.adim-listesi p {
  margin: 0;
  color: var(--metin-2);
  font-size: var(--olcek-2);
  line-height: 1.55;
}

/* ---------- akademi çalışmaları ve ekibi ---------- */
/* Çalışmalar ana sayfadaki "Son Çalışmalar" ile aynı .kartlar düzenini
   kullanıyor; ayrı bir satır düzeni vardı, kaldırıldı. */
.akademi-calismalar,
.akademi-ekip { margin-block-start: clamp(2.5rem, 6vw, 3.5rem); }

.akademi-calismalar > h2,
.akademi-ekip > h2 {
  font-size: var(--olcek-4);
  margin: 0 0 1.25rem;
  padding-block-end: .625rem;
  border-block-end: 2px solid var(--marka-soft);
}

.ekip-kartlari { list-style: none; margin: 0; padding: 0; display: grid; }

/* Ekip kartları: fotoğraf yoksa da hizalı kalsınlar diye sabit ızgara */
.ekip-kartlari {
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.ekip-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .4rem;
}

.ekip-gorsel img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--zemin-alt);
  display: block;
}

.ekip-ad { font-weight: 600; font-size: var(--olcek-2); line-height: 1.3; }
.ekip-unvan { color: var(--metin-3); font-size: var(--olcek-1); line-height: 1.35; }

@media (max-width: 560px) {
  .calisma-kart a { grid-template-columns: 84px minmax(0, 1fr); }
  .calisma-gorsel img { width: 84px; }
  .ekip-kartlari { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .ekip-gorsel img { width: 76px; height: 76px; }
}

/* Bölümler arası geçiş şeridi — kartların altında, tam genişlikte */
.bolum-serit {
  background: var(--zemin-alt);
  border-block-start: 1px solid var(--cizgi);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  margin-block-start: clamp(2.5rem, 6vw, 4rem);
}

.serit-baslik {
  font-size: var(--olcek-1);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--metin-3);
  font-weight: 700;
  margin: 0 0 .875rem;
}

.serit-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
}

.serit-liste a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: var(--zemin);
  color: var(--yazi);
  text-decoration: none;
  font-size: var(--olcek-2);
  font-weight: 500;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}

.serit-liste a:hover,
.serit-liste a:focus-visible {
  border-color: var(--marka);
  color: var(--marka-koyu);
  transform: translateY(-1px);
}

.serit-sayi {
  background: var(--marka-soft);
  color: var(--marka-koyu);
  border-radius: 999px;
  padding: .05rem .45rem;
  font-size: var(--olcek-1);
  font-weight: 700;
}

/* ── Kurumsal logo indirme listesi ───────────────────────────────────────
   Logolar farklı en-boy oranlarında; sabit yükseklikli bir kutu içinde
   contain ile ortalanıyorlar ki hiçbiri kırpılmasın. Zemin açık gri,
   çünkü setin bir kısmı beyaz üzerine beyaz alan içeriyor. */
.logo-listesi {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.logo-oge {
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 1rem;
  text-align: center;
  background: #fff;
}

.logo-oge img {
  width: 100%;
  height: 130px;
  object-fit: contain;
  background: var(--zemin-alt);
  border-radius: calc(var(--yuvarlak) / 2);
  padding: 0.75rem;
}

.logo-ad {
  margin: 0.75rem 0 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
}

.logo-indir {
  margin: 0;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.logo-indir a {
  flex: 1;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--marka);
  border-radius: calc(var(--yuvarlak) / 2);
  color: var(--marka-koyu);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.logo-indir a:hover,
.logo-indir a:focus-visible {
  background: var(--marka);
  color: #fff;
}

/* ═══════════ TASARIM TURU (Eylül 2026) ═══════════ */

/* Köşeler: kartlar, görseller, kutular, form alanları ve düğmeler köşeli
   (Halpes referansı, Ayşe'nin kararı 10 Eylül 2026). Düğmeler kendi
   değişkeninde duruyor; ileride yeniden yuvarlatmak tek satır. Çember
   olanlar (sosyal ikonlar, ekip fotoğrafları) olduğu gibi kalıyor. */
:root {
  --yuvarlak: 0;
  --yuvarlak-dugme: 0;
}
.dugme,
.menu-dugme,
.dil-dugme,
.logo-indir a { border-radius: var(--yuvarlak-dugme); }

.menu .alt-liste a,
.dil-liste a,
.yan-liste a { border-radius: 0; }

/* Hareket: kaydırınca belirme (hareket.js). İçerik varsayılan görünür;
   yalnızca betiğin ekranın altında bulup işaretlediği öğeler gizleniyor. */
.belir-bekle {
  opacity: 0;
  transform: translateY(24px);
}
.belir-bekle.belir {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
@media print {
  .belir-bekle { opacity: 1 !important; transform: none !important; }
}

/* Kart üzerine gelme: biraz daha belirgin kalkma ve gölge */
.kart:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(22, 36, 31, .16); }
.konu-kart a:hover,
.konu-kart a:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(22, 36, 31, .13); }

@media (prefers-reduced-motion: reduce) {
  .belir-bekle { opacity: 1; transform: none; }
  .kart:hover,
  .konu-kart a:hover,
  .konu-kart a:focus-visible { transform: none; }
}

.yazi-cta { margin: 1.75rem 0 0; }

/* Form: seçim alanları (ön kayıt formuyla geldi). Metin kutusuyla aynı görünüm. */
.iletisim-form select {
  font: inherit;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--cizgi-koyu, #C9D3CD);
  border-radius: var(--yuvarlak);
  background: var(--zemin);
  color: var(--metin);
  min-height: 44px;
}
.iletisim-form select:focus-visible {
  outline: 3px solid var(--logo-yesil);
  outline-offset: 1px;
  border-color: var(--marka);
}

.form-grup {
  grid-column: 1 / -1;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.form-grup legend {
  font-weight: 500;
  font-size: var(--olcek-2);
  padding: 0;
  margin-bottom: 0.25rem;
}
.form-grup[aria-invalid="true"] legend { color: #A03636; }

.iletisim-form .secenek {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.5rem 0;
  cursor: pointer;
  font-weight: 400;
}
/* `.iletisim-form input` metin kutusu kuralı (genişlik %100, dolgu)
   onay kutusuna da uyuyor; burada geri alınıyor. */
.iletisim-form .secenek input {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  margin: 0.15rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--marka);
}
.form-onay { grid-column: 1 / -1; }
.form-onay a { color: var(--marka-koyu); }


/* ═══════════ ANA SAYFA — HOME 2 DÜZENİ (Eylül 2026) ═══════════ */
/* Referans: Halpes Home 2. Bölüm başlıkları üst etiket + büyük kalın
   başlık; zeminler beyaz / açık / koyu sırasıyla değişiyor. Footer koyu. */

:root { --koyu: #14211B; }

.etiket-ust { display: inline-flex; align-items: center; gap: 0.625rem; }
.etiket-ust::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  background: currentColor;
}

h2.bolum-baslik {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
h2.bolum-baslik-kucuk { font-size: clamp(1.5rem, 3vw, 2rem); }
.bolum-bas-orta { text-align: center; max-width: 46rem; margin: 0 auto 2.5rem; }
.odak-giris { color: var(--metin-2); margin: 0 auto; max-width: 62ch; }
.bolum-alt-baglanti { text-align: center; margin: 2rem 0 0; }
.bolum-bas-satir { align-items: flex-end; }
.bolum-bas-satir h2.bolum-baslik { margin: 0; }

/* ---------- hızlı erişim şeridi ---------- */
.hizli-serit { background: var(--koyu); color: #fff; }
.hizli-liste {
  list-style: none;
  margin: 0 auto;
  padding-block: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hizli-oge + .hizli-oge { border-inline-start: 1px solid rgba(255, 255, 255, .12); }
.hizli-oge a {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 100%;
  padding: 2rem 1.5rem;
  color: #fff;
  text-decoration: none;
  transition: background-color .2s ease;
}
.hizli-oge a:hover,
.hizli-oge a:focus-visible { background: rgba(255, 255, 255, .05); }
.hizli-ikon { flex: 0 0 auto; color: var(--logo-yesil); }
.hizli-ikon .ikon { display: block; width: 40px; height: 40px; }
.hizli-metin { display: grid; gap: 0.25rem; }
.hizli-metin strong { font-size: var(--olcek-4); font-weight: 700; transition: color .2s ease; }
.hizli-metin span { color: rgba(255, 255, 255, .72); font-size: var(--olcek-2); line-height: 1.5; }
.hizli-oge a:hover strong { color: var(--logo-yesil); }

/* ---------- tanıtım ---------- */
.tanitim-h2 .tanitim-ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
.tanitim-gorsel img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.tanitim-vurgu {
  margin: 0;
  padding: 1.75rem 2rem;
  background: var(--zemin-alt);
  border-inline-start: 4px solid var(--logo-yesil);
  font-size: var(--olcek-4);
  font-weight: 700;
  line-height: 1.4;
  color: var(--metin);
}

/* ---------- odak alanları: renkli panel bandı ---------- */
/* Başlık açık zeminde, paneller kenardan kenara. Fotoğraf eklenirse
   panelin renginin altında soluk (luminosity) görünüyor; yazı her durumda
   düz renk üstünde okunuyor. */
/* Altta boşluk: paneller doğrudan koyu rakamlar bandına dayanınca iki
   doygun renk bloğu tek parça gibi görünüyordu. Araya sayfanın açık
   zemini giriyor — ince bir çizgi bu kontrastta kaybolurdu. */
.odak-bolum { background: var(--zemin-alt); padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.odak-paneller { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.odak-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  min-height: 380px;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
  background: var(--panel, var(--marka));
  color: #fff;
}
.odak-panel-foto,
.odak-panel-foto picture,
.odak-panel-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fotoğraf panelin rengiyle çarpılıyor (multiply): rengin canlılığı duruyor,
   fotoğraf tek renk tonunda görünüyor ve beyaz yazı her fotoğrafta okunuyor.
   Gri tonlama + parlaklık artışı, koyu fotoğrafların paneli karartmasını
   engelliyor. Luminosity denendi: rengi soldurup paneli grileştiriyordu. */
.odak-panel-foto { z-index: -1; opacity: .9; mix-blend-mode: multiply; filter: grayscale(1) brightness(1.2); }
.odak-panel-ikon .ikon { display: block; width: 52px; height: 52px; }
.odak-panel h3 { margin: 0; font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 800; line-height: 1.2; color: #fff; }
.odak-panel p { flex: 1 1 auto; margin: 0; color: rgba(255, 255, 255, .92); font-size: var(--olcek-3); line-height: 1.6; }
.odak-panel .dugme { margin-top: 0.5rem; background: #fff; color: var(--panel, var(--marka)); border-color: #fff; }
.odak-panel .dugme:hover,
.odak-panel .dugme:focus-visible { background: var(--koyu); color: #fff; border-color: var(--koyu); }

/* ---------- rakamlar: koyu yeşil bant ---------- */
.istatistik-serit { background: var(--marka-koyu); border: 0; color: #fff; }
.istatistik-serit .etiket-ust { color: #CDEFD8; }
.istatistik-serit h2.bolum-baslik { color: #fff; }
.istatistik-alt { color: #CDEFD8; }
.istatistik-aciklama { color: rgba(255, 255, 255, .85); }
.istatistik {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  border-inline-start-color: var(--logo-yesil);
}
.istatistik dt { color: #fff; }
.istatistik dd { color: rgba(255, 255, 255, .82); }

/* ---------- yaklaşan etkinlikler ---------- */
.etkinlik-bolum { padding-block: clamp(3rem, 7vw, 5.5rem); }
.etkinlik-bolum-ic {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.etkinlik-bolum-metin > p:not(.etiket-ust) { color: var(--metin-2); margin: 0 0 1.5rem; }
.etkinlik-kartlari {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.etkinlik-kart a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  /* Kapak görseli olmayan etkinlikte de kart boş durmasın */
  background: linear-gradient(160deg, var(--marka) 0%, var(--koyu) 100%);
  box-shadow: 0 10px 30px rgba(22, 36, 31, .14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.etkinlik-kart a:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(22, 36, 31, .2); }
.etkinlik-kart-gorsel,
.etkinlik-kart-gorsel picture,
.etkinlik-kart-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.etkinlik-kart a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 18, 14, 0) 35%, rgba(10, 18, 14, .85) 100%);
}
.etkinlik-kart .etkinlik-tarih {
  position: absolute;
  top: 0;
  inset-inline-start: 1.25rem;
  z-index: 1;
  width: 64px;
  padding: 0.625rem 0.25rem;
  background: var(--marka);
  border-radius: 0;
}
.etkinlik-kart .etkinlik-tarih .gun { font-size: 1.5rem; color: #fff; }
.etkinlik-kart .etkinlik-tarih .ay { color: #fff; }
.etkinlik-kart .etkinlik-tarih .yil { display: none; }
.etkinlik-kart .etkinlik-tarih .saat { color: rgba(255, 255, 255, .85); }
.etkinlik-kart-govde { position: relative; z-index: 1; display: grid; gap: 0.375rem; padding: 1.25rem; }
.etkinlik-kart-yer { font-size: var(--olcek-1); color: rgba(255, 255, 255, .85); }
.etkinlik-kart-baslik { margin: 0; font-size: var(--olcek-4); line-height: 1.25; color: #fff; }

/* ---------- gönüllü bandı ---------- */
.gonullu-bant { background: var(--marka); color: #fff; padding-block: clamp(3rem, 6vw, 4.5rem); }
.gonullu-bant-ic { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.gonullu-bant-metin { flex: 1 1 520px; }
.gonullu-bant .etiket-ust { color: #fff; }
.gonullu-bant h2.bolum-baslik { color: #fff; max-width: 24ch; }
.gonullu-bant-metin > p:not(.etiket-ust) { margin: 0; color: rgba(255, 255, 255, .92); max-width: 62ch; }
.gonullu-bant .dugme { background: #fff; color: var(--marka-koyu); border-color: #fff; }
.gonullu-bant .dugme:hover,
.gonullu-bant .dugme:focus-visible { background: var(--koyu); color: #fff; border-color: var(--koyu); }

/* ---------- liste bölümleri ---------- */
/* İlk liste: başlık açık bandın üstünde, kartlar bandın sınırına taşıyor.
   Sınır yüzde değil sabit: kart satırı sarınca bölüm uzuyor ve yüzdeli
   sınır kartların ortasına kayıyordu. */
.liste-bant { background: linear-gradient(180deg, var(--zemin-alt) 0, var(--zemin-alt) 20rem, var(--zemin) 20rem); }
/* Ana sayfadaki listeler tek satıra sığsın: dört akademi dört sütun,
   üç çalışma üç sütun. Genel .kartlar ızgarası (280px) dördüncü kartı
   tek başına alt satıra düşürüyordu. */
.liste-bolum .kartlar { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- iş birlikleri şeridi ---------- */
.isbirligi-serit { padding-block: clamp(2.5rem, 6vw, 4rem); border-block-start: 1px solid var(--cizgi); }
/* Izgara yerine esnek satır: son satır eksik kalınca boş gri hücre çıkmıyor */
.isbirligi-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border-block-start: 1px solid var(--cizgi);
  border-inline-start: 1px solid var(--cizgi);
}
.isbirligi-oge {
  flex: 1 1 150px;
  border-inline-end: 1px solid var(--cizgi);
  border-block-end: 1px solid var(--cizgi);
}
.isbirligi-oge a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 104px;
  padding: 1rem;
  color: var(--metin-2);
  font-weight: 700;
  font-size: var(--olcek-2);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.isbirligi-oge a:hover,
.isbirligi-oge a:focus-visible { color: var(--marka); background: var(--zemin-alt); }
/* Logolar renkli: gri tonlama dokunmatik ekranda hiç kalkmıyordu ve kurumların
   kimliğini siliyordu. Yuvarlak amblemle yatay yazılı logo aynı kutuda
   dengeli dursun diye hem yükseklik hem genişlik sınırlı. */
.isbirligi-oge img { display: block; width: auto; height: auto; max-height: 64px; max-width: min(100%, 150px); object-fit: contain; transition: transform .2s ease; }
.isbirligi-oge a:hover img,
.isbirligi-oge a:focus-visible img { transform: scale(1.05); }

/* ---------- bülten ve koyu footer ---------- */
.bulten { scroll-margin-top: 6rem; }
.alt { background: var(--koyu); border-block-start: 0; margin-block-start: 0; color: rgba(255, 255, 255, .72); }
.alt-baslik { color: #fff; }
.alt-metin { color: rgba(255, 255, 255, .72); }
.alt-metin a { color: #9FDCB3; }
.alt-menu a { color: rgba(255, 255, 255, .72); }
.alt-menu a:hover,
.alt-menu a:focus-visible { color: #fff; }
.alt-grup { color: rgba(255, 255, 255, .55); }
.sosyal a { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .06); }
.sosyal a:hover,
.sosyal a:focus-visible { color: #fff; background: var(--marka); }
.alt-telif { border-block-start-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); }
.alt-yasal a { color: rgba(255, 255, 255, .6); }
.alt-yasal a:hover { color: #fff; }

@media (max-width: 900px) {
  .hizli-liste { grid-template-columns: minmax(0, 1fr); }
  .hizli-oge + .hizli-oge { border-inline-start: 0; border-block-start: 1px solid rgba(255, 255, 255, .12); }
  .hizli-oge a { padding: 1.25rem 0; }
  .tanitim-h2 .tanitim-ic,
  .etkinlik-bolum-ic { grid-template-columns: minmax(0, 1fr); }
  .etkinlik-kartlari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .etkinlik-kartlari { grid-template-columns: minmax(0, 1fr); }
  .etkinlik-kart a { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .etkinlik-kart a:hover { transform: none; }
}

@media (max-width: 1100px) { .odak-paneller { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .odak-paneller { grid-template-columns: minmax(0, 1fr); } .odak-panel { min-height: 0; } }


/* ═══════════ HARİTA (Bize Ulaşın) ═══════════ */
.harita { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.harita h2 { font-size: var(--olcek-5); margin: 0 0 0.5rem; }
.harita-adres { font-style: normal; color: var(--metin-2); line-height: 1.7; margin: 0 0 1rem; }
.harita-cerceve {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--zemin-alt);
  border: 1px solid var(--cizgi);
}
.harita-cerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.harita-baglantilar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1rem 0 0; }
@media (max-width: 560px) { .harita-cerceve { aspect-ratio: 4 / 5; } }


/* ═══════════ AKADEMİ EKİBİ ═══════════ */
/* Akademi sayfasındaki ekip kartı, kişinin biyografisi yayındaysa bağlantı */
.ekip-bag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: inherit;
  text-decoration: none;
}
.ekip-bag .ekip-ad { transition: color .2s ease; }
.ekip-bag:hover .ekip-ad,
.ekip-bag:focus-visible .ekip-ad { color: var(--marka); text-decoration: underline; }
.ekip-bag .ekip-gorsel img { transition: transform .2s ease; }
.ekip-bag:hover .ekip-gorsel img { transform: scale(1.04); }

/* Akademi Ekibi bölüm sayfası: portreler kare, yüz yukarıda */
.kartlar-kisi { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kartlar-kisi .kart-gorsel { aspect-ratio: 1 / 1; }
.kartlar-kisi .kart-gorsel img { object-position: 50% 20%; }

/* Kişi sayfası başlığı: portre + ad + unvan */
.kisi-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-bottom: 2rem; }
.kisi-portre { flex: 0 0 auto; }
.kisi-portre img { display: block; width: 160px; height: 160px; object-fit: cover; object-position: 50% 25%; border-radius: 50%; }
.kisi-bas-metin { flex: 1 1 280px; min-width: 0; }
.kisi-bas-metin h1 { margin: 0; }
.kisi-unvan { margin: 0.5rem 0 0; color: var(--metin-2); font-size: var(--olcek-4); line-height: 1.4; }
@media (max-width: 560px) { .kisi-portre img { width: 120px; height: 120px; } }