/* ==========================================================================
   Türk Geriatri Derneği — arayüz stil dosyası
   Tasarım: 5b (krem üst bölüm · bordo paneller · kırmızı vurgu)
   ========================================================================== */

/* Mono yazı tipi Share Tech Mono'ydu; yalnızca 'latin' alt kümesini içeriyor
   (U+0000-00FF + ı). Türkçedeki İ, Ğ, Ş bu aralıkta olmadığı için tarayıcı
   onları sistem yazı tipinden çiziyor, "TÜRK GERİATRİ DERNEĞİ" gibi yazılarda
   harfler birbirine uymuyordu. IBM Plex Mono latin-ext taşıyor ve gerçek kalın
   kesimi var (öncekinde kalınlık taklit ediliyordu). */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Saira:wght@500;600;700&family=IBM+Plex+Mono:wght@400;600;700&display=swap');

:root {
  /* Renk */
  /* Üst bölüm artık --bordo tabanlı degrade kullanıyor; ayrı --bej rengi kalmadı. */
  --krem:         #EDEBE8;   /* sayfa zemini */
  --kart:         #FDFBF6;   /* kart zemini */
  --bordo:        #5E1620;   /* ana marka koyusu */
  --bordo-acik:   #7A2A2C;   /* ikinci panel tonu */
  --yesil:        #3F4A46;   /* üçüncü panel / kurslar bandı */
  --kirmizi:      #DA2128;   /* vurgu: üst sekme, alt çizgi, aktif menü */
  --murekkep:     #2A211B;   /* başlık metni */
  --govde:        #5B5049;   /* gövde metni */
  --soluk:        #8B7F73;   /* tarih, etiket */
  --koyu-mono:    #4A4038;   /* bej üzerinde küçük mono metin (AA) */
  --cizgi:        #E0D7C7;
  --footer:       #241E19;
  --pembe:        #F0B7B9;   /* koyu zeminde mono etiket */

  /* Tipografi */
  --f-govde: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --f-baslik: 'Saira', 'Helvetica Neue', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Ölçü */
  --kapsayici: 1280px;   /* içerik kolonu — iç sayfalar dar görünüyordu */
  --r-kart: 18px;
  --r-panel: 22px;
  --r-bant: 40px;   /* slayt + istatistik bandı + sayfa başlığı: ortak yumuşak köşe */
  --r-pill: 999px;
  --golge: 0 1px 2px rgba(42,33,27,.05), 0 8px 22px rgba(42,33,27,.07);
  --golge-yuksek: 0 12px 30px rgba(42,33,27,.2);
  --gecis: 180ms cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--krem);
  color: var(--murekkep);
  font-family: var(--f-govde);
  font-size: 15px;
  line-height: 1.7;
}

img { max-width: 100%; display: block; }

a { color: var(--bordo); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--kirmizi); }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; color: var(--murekkep); }

.kapsayici { max-width: var(--kapsayici); margin: 0 auto; padding: 0 20px; }
/* Başlık çubuğu: logo ve menü sayfa kenarına yaslanır, ortalanmış kolona sıkışmaz. */
.kapsayici--genis { max-width: none; padding: 0 44px; }
/* İçerik kolonu 1320px'in altında kendi de kenara dayanıyor (max 1280 + 2×20).
   Başlık çubuğu 44px'te kalınca logo/menü, altındaki başlık ve kartlardan
   dışarıda başlıyor; bu genişliklerde ikisi aynı kenardan başlasın. */
@media (max-width: 1320px) {
  .kapsayici--genis { padding: 0 20px; }
}

/* Yardımcılar ------------------------------------------------------------- */
.mono { font-family: var(--f-mono); letter-spacing: .12em; }
.etiket { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--soluk); }
.etiket--kirmizi { color: var(--kirmizi); }
.etiket--pembe { color: var(--pembe); }

.bolum { padding: 32px 0 34px; }   /* bölümler arası boşluk: 136px → 92px → 66px */
.bolum-basligi { text-align: center; margin-bottom: 42px; }
.bolum-basligi h2 { font-size: 28px; font-weight: 700; }
.bolum-basligi p { margin: 18px auto 0; max-width: 66ch; color: var(--govde); text-wrap: pretty; }
/* Başlık altı çizgisi bordo. Sınıf adı işaretlemede kullanıldığı için
   değişmedi. Bordo bandın içindekiler istisna: orada zemin zaten bordo,
   çizgi kaybolurdu — aşağıda kırmızıya döndürülüyor. */
.cizgi-kirmizi { width: 64px; height: 3px; background: var(--bordo); border-radius: 2px; margin: 12px auto 0; }
.bordo-bant .cizgi-kirmizi { background: var(--kirmizi); }
.cizgi-kirmizi--sol { margin: 12px 0 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 28px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  cursor: pointer; transition: background var(--gecis), color var(--gecis);
}
.btn--kirmizi { background: var(--kirmizi); color: #fff; }
.btn--kirmizi:hover { background: #B81A20; color: #fff; }
.btn--bordo { background: var(--bordo); color: #fff; }
.btn--bordo:hover { background: #4A1019; color: #fff; }
.btn--ana-hat { border-color: rgba(255,255,255,.45); color: #fff; }
.btn--ana-hat:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--koyu-hat { border-color: rgba(42,33,27,.25); color: var(--murekkep); }
.btn--koyu-hat:hover { border-color: var(--kirmizi); color: var(--kirmizi); }

/* Görsel yer tutucu — geliştirici <img> ile değiştirir ------------------- */
.gorsel {
  position: relative; background: #E6DDCF; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gorsel::after {
  content: attr(data-not);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  color: #9A8E80; text-align: center; padding: 12px;
}
.gorsel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ÜST BÖLÜM (bej): şerit + menü + slayt + istatistik ---------------------- */
/* Bej bloğun tamamı tek parça; yuvarlak alt köşeler burada tanımlanır.
   İçerideki .istatistik / .sayfa-basligi kendi zeminini boyarsa köşeleri kapatır — boyamıyorlar. */
/* Zemin: krem üzerine yaprak deseni. Görsel doğrudan tasarımdan geliyor
   (tasarim/assets/header-bg-yaprak-kaynak.png); tek işlem zemin renginin
   #F8F0E6'dan temanın #FBF5EE'sine kaydırılması — böylece altta görsel, üstte
   düz renk kesintisiz birleşiyor (plx/yaprak-zemin.py).
   Dosya adı desen her değiştiğinde değişmeli: CSS sürümleniyor ama içindeki
   görsel adresi sabit kaldığı için tarayıcılar eskisini önbellekten
   göstermeye devam ediyordu.
   Görsel tam genişlikte ve alta yaslı: yapraklar arama çubuğu + istatistik
   bandının arkasında kalır, blok ne kadar uzarsa üstü düz renk devam eder.
   Metinler koyu; kontrast menüde 13.9:1, sayılarda 10.4:1 (AAA). */
.ust-bolum {
  background-color: #FBF5EE;
  /* İki kopya: biri üste (logo + menü arkası), biri alta (arama + istatistik arkası).
     Arada kalan boşluk görselin taban rengiyle aynı olduğu için geçiş görünmez. */
  background-image: url("../img/header-bg-yaprak.jpg");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0 0 var(--r-bant) var(--r-bant);
}

/* Üst şerit kaldırıldı; EN bağlantısı başlık çubuğuna taşındı. */
.baslik-cubugu {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  /* Satır arası boşluk 12'den 2'ye: menü maddelerinin kendi 10px dikey
     dolgusu zaten ayırıyordu, ikisi üst üste binince logo ile menü
     arasında gereksiz bir boşluk kalıyordu. */
  gap: 2px 28px; padding: 16px 0 6px;
}
/* Sağ üst araç sütunu: kısayol satırı üstte, arama altında. Anasayfa ve
   İletişim yatay menüden buraya taşındı — menü on bir maddeyle sıkışıktı. */
.ust-araclar { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; margin-left: auto; }
.kisayollar { display: flex; align-items: center; gap: 4px; }
.kisayollar > a {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em;
  color: var(--koyu-mono); padding: 6px 11px; border-radius: var(--r-pill);
  transition: background var(--gecis), color var(--gecis);
}
.kisayollar > a:hover { background: rgba(94,22,32,.09); color: var(--bordo); }

/* Dil bağlantısı kısayol satırının sonunda durur */
.dil {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--bordo);
  padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid rgba(94,22,32,.28);
}
.dil:hover { background: rgba(94,22,32,.08); color: var(--bordo); }
.logo { display: flex; align-items: center; gap: 20px; flex: none; }
/* Amblem saydam PNG ve dikey oval; arkasına disk veya multiply karışımı gerekmiyor. */
.logo__amblem { display: flex; }
.logo__amblem img { height: 112px; width: auto; }
/* Tek satır: HTML'deki <br> kaldırıldı, nowrap ile satır kırılması engellenir. */
.logo__ad {
  font-family: var(--f-baslik); font-weight: 700; font-size: 32px; line-height: 1.1;
  letter-spacing: .04em; color: var(--murekkep); white-space: nowrap;
}

/* Menü kendi satırında ama uçlara yayılmaz: sola toplanır, öğeler arası boşluk sabit.
   (space-between geniş ekranda öğeleri birbirinden çok uzaklaştırıyordu.) */
.menu {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center;
  /* Dar ekranda (sarma olduğunda) ortalanır; tek satıra sığdığı genişlikte
     aşağıdaki kural maddeleri satır boyunca eşit aralıkla dağıtır. */
  justify-content: center; gap: 2px;
}
/* Üst seviye maddeler (bağlantı ve açılır menü başlığı aynı görünür)
   Ölçüler on iki maddeyi 1440px'de tek satırda tutacak şekilde daraltıldı;
   dokunma hedefi dikeyde 40px'in altına inmiyor. Dar ekranda yine sarıyor. */
.menu__tek,
.menu__ust {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 10px; border: 0; border-radius: var(--r-pill);
  background: transparent; cursor: pointer; font: inherit;
  font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--murekkep);
  white-space: nowrap; transition: background var(--gecis);
}
/* Geniş ekranda maddeler arası daha ferah. Dar ölçüler taban olarak duruyor:
   maddeler tek satıra ancak sığıyor, boşluğu orada da artırmak menüyü iki
   satıra düşürüyordu. Eşik 1400'dü; "Bilimsel Yayınlar Hakkında" ve "Haberler
   ve Basın Bildirileri" adları uzayınca 1440px'te taşmaya başladı, 1560'a
   çekildi. */
/* Anasayfa kısayol satırına taşındıktan sonra menüde on madde kaldı; eşik
   1560'tan 1280'e indi ve boşluklar büyütüldü — başlıklar birbirine giriyordu.
   Bu genişlikten sonra menü tek satıra sığıyor ve maddeler satır boyunca
   dağıtılıyor: ilk madde logonun hizasında, son madde arama kutusunun
   hizasında bitiyor. gap artık en az aralık; asıl boşluğu space-between
   veriyor. Negatif kenar boşlukları maddelerin kendi iç dolgusunu geri alıyor,
   böylece YAZILAR kolonun kenarlarına yaslanıyor (dolguları değil). */
@media (min-width: 1380px) {
  .menu { justify-content: space-between; gap: 4px; }
  /* Yatay dolgu küçük: aradaki boşluğu artık space-between veriyor, dolgu
     yalnızca tıklama hedefini büyütüyor. Büyük dolgu maddeleri 1440px'in
     altında ikinci satıra düşürüyordu. */
  .menu__tek,
  .menu__ust { padding: 10px 9px; }
  .menu > :first-child { margin-left: -9px; }
  .menu > :last-child { margin-right: -9px; }
  /* Açılır menü, başlığının yazısıyla hizalansın (dolgu kadar sola kayar). */
  .menu__alt { left: 9px; }
  .menu > .menu__grup:first-child .menu__alt { left: 18px; }
}

.menu__tek:hover, .menu__ust:hover { background: rgba(94,22,32,.09); color: var(--bordo); }
.menu__tek.aktif, .menu__ust.aktif { background: var(--kirmizi); color: #fff; }
.menu__ok {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .8; transition: transform var(--gecis);
}

/* Açılır menü ---------------------------------------------------------- */
.menu__grup { position: relative; }
.menu__alt {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 232px;
  display: flex; flex-direction: column; padding: 8px;
  background: var(--kart); border-radius: 14px; box-shadow: var(--golge-yuksek);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.menu__alt a {
  padding: 10px 12px; border-radius: 9px; color: var(--murekkep);
  font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.menu__alt a:hover { background: rgba(94,22,32,.08); color: var(--bordo); }
/* Masaüstünde üzerine gelince veya klavyeyle odaklanınca açılır */
.menu__grup:hover .menu__alt,
.menu__grup:focus-within .menu__alt,
.menu__grup .menu__ust[aria-expanded="true"] + .menu__alt {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.menu__grup:hover .menu__ok,
.menu__ust[aria-expanded="true"] .menu__ok { transform: rotate(180deg); }
.menu-dugmesi { display: none; }

/* Slayt ------------------------------------------------------------------ */
/* Tam genişlik + yumuşak köşeler: uçtan uca uzanır, köşeler bant diline uygun yuvarlanır. */
.slayt-sarmal { padding: 0; }
.slayt {
  /* Üst köşeler düz: slayt menünün hemen altından başlıyor, yuvarlak üst
     köşeler krem bloktan kopmuş bir kart gibi duruyordu. Alt köşeler üst
     bloğun kendi yuvarlaklığıyla uyumlu kalıyor. */
  position: relative; height: 540px; overflow: hidden;
  border-radius: 0 0 var(--r-bant) var(--r-bant);
  background: var(--yesil);
  /* Kil zeminden hafifçe ayrılsın diye yumuşak gölge */
  box-shadow: 0 16px 38px rgba(28,15,11,.30), 0 4px 12px rgba(28,15,11,.18);
}
/* Her slayt bir sayfa; yalnızca .aktif olan görünür */
.slayt__sayfa {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; transition: opacity .5s ease;
}
.slayt__sayfa.aktif { opacity: 1; visibility: visible; }

/* Afiş slaytı: görsel kendi başlığını taşır, üstüne perde/metin binmez.
   Görsel kırpılmadan (contain) ortalanır; boşluk aynı görselin bulanık kopyasıyla dolar. */
.slayt__sayfa--afis { background: #EFEDE9; }
.slayt__afis { position: absolute; inset: 0; display: block; }
.slayt__afis-fon {
  position: absolute; inset: -8%;
  /* Zemin görseli satır içi style ile verilir (slayt CMS'ten geldiği için). */
    background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: blur(42px) saturate(.28) brightness(1.14);
  opacity: .8;
}
.slayt__afis img {
  position: relative; width: 100%; height: 100%; object-fit: contain;
}

/* Fotoğraf slaytı — fotoğraf öne çıkar, perde yalnızca metnin okunduğu yerde koyudur.
   Gerçek fotoğrafı koyarken: <div class="slayt__gorsel gorsel"><img src="..." alt="..."></div> */
.slayt__gorsel { position: absolute; inset: 0; }
/* Fotoğraf gelene kadar yer tutucu: paletteki --yesil ailesinden sakin arduvaz tonu.
   Turuncu zemin bordo blokla çakışıyordu; bu ton onu tamamlıyor. */
.slayt__sayfa--foto .slayt__gorsel {
  background: linear-gradient(158deg, #5C6A63 0%, #4A574F 34%, #3F4A46 66%, #313A36 100%);
}
/* Yer tutucu notu başlığın altında kalmasın diye köşeye alınır; fotoğraf gelince kaybolur. */
.slayt__sayfa--foto .slayt__gorsel::after {
  position: absolute; left: 22px; bottom: 18px; padding: 0;
  color: rgba(255,255,255,.42); text-align: left;
}
.slayt__perde {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(38,22,16,.62) 0%, rgba(38,22,16,.34) 34%,
    rgba(38,22,16,.10) 60%, rgba(38,22,16,.34) 100%);
}
.slayt__icerik {
  position: absolute; inset: 54px 120px auto; display: flex; flex-direction: column;
  align-items: center; gap: 20px; text-align: center;
}
.slayt__baslik {
  font-size: 52px; font-weight: 700; color: #fff; letter-spacing: .01em;
  max-width: 24ch; text-wrap: balance;
  text-shadow: 0 2px 22px rgba(28,15,9,.55), 0 1px 3px rgba(28,15,9,.4);
}
.slayt__kural { width: 76px; height: 4px; background: var(--kirmizi); border-radius: var(--r-pill); }
.slayt__ozet {
  margin: 0; color: rgba(255,255,255,.92); max-width: 62ch; font-size: 16px; text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(28,15,9,.6);
}
.slayt__butonlar { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.slayt__noktalar {
  position: absolute; z-index: 4; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; gap: 8px;
}
.slayt__noktalar button {
  width: 30px; height: 3px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-pill); background: rgba(36,22,25,.3);
}
.slayt__noktalar button.aktif { background: var(--kirmizi); }
.slayt__ok {
  position: absolute; z-index: 4; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; background: rgba(36,22,25,.55);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px;
  border: 0; cursor: pointer;
}
/* [hidden] tek başına yetmez: yazar kaynaklı display:flex onu ezer. */
.slayt__ok[hidden] { display: none; }
.slayt__ok--sol { left: 26px; }
.slayt__ok--sag { right: 26px; }

/* Arama — başlık çubuğunda, dil bağlantısının solunda ------------------- */
/* Eskiden slaytın altına binen tam genişlikte bir pastildi ve yalnızca ana
   sayfada vardı. Başlık çubuğuna alınınca her sayfadan erişiliyor; ölçüler de
   dil bağlantısı ve menü düğmesiyle aynı yükseklikte olacak şekilde küçüldü. */
.arama {
  display: flex; align-items: center; gap: 8px;
  /* .ust-araclar bir SÜTUN esnek kutusu: flex-basis burada yüksekliğe
     uygulanıyor, 320px'lik taban çubuğu 320px boyunda bir daireye çeviriyordu.
     Ölçü doğrudan genişlikten veriliyor. */
  flex: none; min-width: 0; width: 320px; max-width: 100%;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-pill);
  padding: 0 6px 0 16px;
}
/* 'SİTEDE ARA' etiketi bu boyutta yer kaplıyor; yer tutucu aynı bilgiyi
   veriyor. Görsel olarak gizlenir, ekran okuyucuda kalır. */
.arama__etiket {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.arama input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px;
  color: var(--murekkep); padding: 9px 0;
}
.arama input::placeholder { color: #A79C90; }
.arama input:focus { outline: none; }
.arama:focus-within { border-color: var(--bordo); box-shadow: 0 0 0 3px rgba(218,33,40,.14); }
.arama__dugme {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: var(--bordo); color: #fff; cursor: pointer;
  transition: background var(--gecis);
}
.arama__dugme:hover { background: var(--kirmizi); }
.arama__dugme svg { width: 16px; height: 16px; }

/* İstatistik bandı ------------------------------------------------------- */
/* Bant üst bloktan (slaytın altından) ana sayfada yayın/kongre kutularının
   altına indi. Artık krem sayfa zemininin üstünde duruyor; kendi kartını
   çizmezse havada asılı kalıyordu. */
.istatistik { padding: 26px 20px 0; }
.istatistik__satir {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r-bant); box-shadow: var(--golge);
  padding: 40px 26px 44px;
}
/* Bant üç kutuya indi (yıl dönümü · Halk Sağlığı Merkezi · tütünsüz bildirimi);
   kalan kutular ortalanmış dar bir kolonda toplanıyor, aksi hâlde geniş ekranda
   birbirinden kopuk üç ada gibi duruyorlardı. */
.istatistik__satir.kapsayici--genis { max-width: 1300px; }
/* Üç kutu eşit genişlikte: farklı ağırlıklar verildiğinde yıl dönümü kutusu
   diğer ikisinin yanında sıkışık kalıyordu. Genişlik en uzun içeriğe
   (tütünsüz cümlesi) göre belirleniyor, üçü de onu alıyor. */
/* Bandın İKİ paylaşılan satırı var: üst öbek (logo+başlık / daire / simge) ve
   açıklama. Kutular alt ızgara (subgrid) ile bu satırlara oturuyor; böylece
   Halk Eğitim Merkezi'nin açıklaması ile tütünsüz cümlesi aynı satırda
   başlıyor. Kutular ayrı ayrı ortalanınca üst öbekler farklı boyda olduğu
   için (logo+başlık 128px, simge 84px) açıklamalar farklı yükseklikte
   kalıyordu. Üst öbek satırın altına, açıklama satırın üstüne yaslı: ikisi
   ortada buluşuyor. */
.istatistik__satir {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  row-gap: 12px;
  /* stretch (varsayılan) şart: ayırıcılar kutuların sol kenarlığı, dolayısıyla
     boyları kutu boyu kadar. */
}
.istatistik__kutu {
  display: grid; grid-template-rows: subgrid; grid-row: span 2;
  justify-items: center; align-content: center; row-gap: 12px; padding: 0 26px;
  text-align: center;
}
.istatistik__kutu > :first-child { align-self: end; }
.istatistik__kutu > :last-child  { align-self: start; }
/* Yıl dairesi tek öğe: iki satırı birden kaplar, ortada durur. */
.istatistik__kutu--yil > .yil-dairesi { grid-row: 1 / -1; align-self: center; }
/* Logo + başlık öbeği */
.istatistik__ust { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Üst hizalama: kutular tepeye yaslanır, ilk öğelerin (sayı / logo / simge)
   üst kenarları tek çizgide. Açıklamalar kendi öğelerinin hemen altında durur —
   sabit yuva denendi ama açıklamayı sayıdan koparıyordu. */
/* Koyu bordo blok üzerinde: ayırıcı ve metinler açık tonlara çevrildi. */
.istatistik__kutu + .istatistik__kutu { border-left: 1px solid rgba(94,22,32,.16); }
.istatistik__sayi { font-family: var(--f-baslik); font-size: 38px; font-weight: 700; color: var(--bordo); line-height: 1; }
/* Eskiden altı kutu tek satırdaydı ve 10.5px'e sıkıştırılmıştı; üç kutu kaldı,
   kutular geniş ama yazılar minicikti. Etiket başlık boyuna çıkarıldı. */
.istatistik__ad {
  font-family: var(--f-mono); font-size: 15px; font-weight: 700;
  letter-spacing: .1em; line-height: 1.35; color: var(--murekkep);
}
/* Yıl dairesinin içindekiler daire boyuna göre ölçekli kalsın. */
.yil-dairesi .istatistik__ad { font-size: 12.5px; letter-spacing: .08em; }
/* Yıl dönümü kutusunda etiketin sayıdan ÖNCE gelen parçası. */
.istatistik__ad--ust { margin-bottom: 0; }
/* Yıl dönümü daire içinde ve diğer kutulardan büyük: bandın ortasındaki
   vurgu noktası. Daire çemberi bordo, içi zeminin kendisi. */
.yil-dairesi {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 156px; height: 156px; border-radius: 50%;
  border: 2px solid rgba(94, 22, 32, .3);
}
.yil-dairesi .istatistik__sayi { font-size: 50px; }
/* Sayının harf eki (İngilizce "22nd"): rakamlar iki dilde de aynı boyda kalsın
   diye ek küçük ve üstte. Türkçedeki nokta ("22.") noktalama olduğu için
   sayının parçası olarak kalıyor — küçültülmüş bir nokta hata gibi görünür. */
.istatistik__sayi-ek { font-size: .38em; vertical-align: .95em; margin-left: 2px; letter-spacing: 0; }

/* Kart ızgarası ---------------------------------------------------------- */
.izgara { display: grid; gap: 30px; align-items: stretch; }
.izgara--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.izgara--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.kart {
  display: flex; flex-direction: column; background: var(--kart);
  border-radius: var(--r-kart); overflow: hidden; box-shadow: var(--golge);
  color: var(--murekkep); transition: transform var(--gecis), box-shadow var(--gecis);
}
.kart:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(42,33,27,.06), 0 14px 30px rgba(42,33,27,.12); color: var(--murekkep); }
/* Kart şeridi ve 'devamı' bağlantısı bordo: krem zeminde kırmızı, kartın
   kendi sakin diliyle uyuşmuyordu. Kırmızı vurgu menü/başlık altı gibi
   noktalarda kalıyor. */
.kart__sekme { height: 4px; background: var(--bordo); }
.kart__gorsel { height: 170px; }

/* Haber şeridi ----------------------------------------------------------
   Dörder kart yan yana; oklarla bir sayfa kaydırılır. Kartlarda görsel yok. */
.haber-serit { position: relative; }
.haber-serit__ray {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 24px) / 4);   /* tam 4 kart + 3 boşluk */
  gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 4px 12px;                            /* gölge kırpılmasın */
  scrollbar-width: none;
}
.haber-serit__ray::-webkit-scrollbar { display: none; }
.haber-serit__ray > .kart { scroll-snap-align: start; }
.haber-serit__ray:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 4px; border-radius: var(--r-kart); }

.haber-serit__ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--cizgi); background: var(--kart); color: var(--bordo);
  display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
  box-shadow: var(--golge); transition: background var(--gecis), color var(--gecis), opacity var(--gecis);
}
.haber-serit__ok:hover { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }
/* Geniş ekranda oklar kartların dışında durur; yer daralınca kenara yaklaşır. */
.haber-serit__ok--sol { left: -54px; }
.haber-serit__ok--sag { right: -54px; }
/* Oklar kart kolonunun 54px dışında duruyor; kolon ortalanana ve iki yanda
   o kadar boşluk kalana kadar (1280 + 2×54) içeri alınıyorlar. Eşik 1300'dü,
   1301-1400 arasında sağdaki ok görünüm alanının dışına taşıyordu. */
@media (max-width: 1400px) {
  .haber-serit__ok--sol { left: -10px; }
  .haber-serit__ok--sag { right: -10px; }
}
/* Şeridin başındayken/sonundayken ilgili ok soluklaşır */
.haber-serit__ok[disabled] { opacity: .25; pointer-events: none; }
/* display:flex, [hidden] öntanımlı display:none'unu eziyor — açıkça yazılmalı. */
.haber-serit__ok[hidden] { display: none; }

/* Ekran daraldıkça görünen kart sayısı azalır */
@media (max-width: 1080px) { .haber-serit__ray { grid-auto-columns: calc((100% - 2 * 24px) / 3); } }
@media (max-width: 820px)  { .haber-serit__ray { grid-auto-columns: calc((100% - 24px) / 2); } }
/* Telefonda tek kart. %84'teyken bir sonraki kartın kenarı görünüyor, kartlar
   yarım kalmış gibi duruyordu.
   Kart genişliği tam %100 DEĞİL, "%100 eksi boşluk": adım aralığı (kart +
   boşluk) tam olarak şeridin genişliğine eşit olsun diye. Betik bir tıklamada
   ray.clientWidth kadar kaydırıyor; kart %100 olunca her adımda 24px'lik
   boşluk kadar kayıyor ve kartlar giderek ortadan çıkıyordu.
   Yan dolgu + scroll-padding ikilisi de kartı iki yandan eşit boşlukla,
   ortalanmış bırakıyor. */
@media (max-width: 560px) {
  .haber-serit__ray {
    /* Buradaki %100 şeridin İÇ kutusu (yan dolgular düşülmüş hâli); kart
       tam o kadar, adım aralığı da kart + boşluk = şeridin dış genişliği. */
    grid-auto-columns: 100%;
    padding-left: 12px; padding-right: 12px;
    scroll-padding-left: 12px;
  }
}
.kart__govde { display: flex; flex-direction: column; gap: 9px; padding: 24px 26px 28px; flex: 1; }
.kart__baslik { font-size: 18px; font-weight: 700; line-height: 1.35; }
.kart__ozet { display: block; font-size: 13.5px; color: var(--govde); margin: 0; }
/* Tarih, "DEVAMI" ve "TÜM HABERLERİ GÖR" 10.5–11px mono ve soluk renkteydi;
   okunmuyor, dikkat çekmiyorlardı. Üçü de büyütülüp koyulaştırıldı. */
.kart .etiket { font-size: 12px; letter-spacing: .1em; color: var(--koyu-mono); font-weight: 700; }
.kart__devam {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--bordo);
}
.kart__devam::after { content: "\2192"; font-size: 15px; transition: transform var(--gecis); }
.kart:hover .kart__devam { color: var(--kirmizi); }
.kart:hover .kart__devam::after { transform: translateX(4px); }
.merkez-baglanti { display: flex; justify-content: center; margin-top: 34px; }
/* Düz alt çizgili bir bağlantı yerine dolgulu düğme: bölümün kapanışı. */
.merkez-baglanti a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  color: #fff; background: var(--bordo);
  padding: 14px 30px; border-radius: var(--r-pill);
  transition: background var(--gecis), transform var(--gecis);
}
.merkez-baglanti a::after { content: "\2192"; font-size: 15px; }
.merkez-baglanti a:hover { background: var(--kirmizi); color: #fff; transform: translateY(-2px); }

/* Dolu renkli paneller (Dergi / Kitap / Kongreler) ----------------------- */
/* Paneller kutulara ayrıldı: dergi + kitap tek kutuda yan yana, kongreler
   kendi kutusunda. Kutu genişlikleri içindeki panel sayısına göre pay alır,
   böylece bütün paneller aynı genişlikte kalıyor. Ortak bölüm başlığı yok;
   kutunun çerçevesi iki grubu birbirinden ayırıyor. */
/* Üç panel eşit genişlikte ve EŞİT aralıkta (22px). Kutu yapısı ayardan
   geldiği için duruyor ama görünürde bir gruplama yok: önce arkalarına açık
   zeminli kart çizildi (başıboş beyaz levha gibi durdu), sonra gruplar arası
   boşluk büyütüldü (66px) — o da ortadaki kartı kaydırılmış gösteriyordu.
   Esnek kutu ölçüleri: büyüme payı panel sayısıyla orantılı, taban genişlik de
   kutunun KENDİ iç boşluklarını karşılıyor. İkisi birlikte olmadan tek panelli
   kutu, iki panelli kutunun panellerinden 11px geniş çıkıyordu. */
/* Kart şeridi — haber şeridiyle aynı mekanizma (bkz. .haber-serit).
   Aynı anda 3 kart görünür, fazlası oklarla gezilir. Kartlar yönetim
   panelinden eklendiği için sayı sabit değil; üç veya daha az kart varsa
   betik okları gizliyor ve bölüm eskisi gibi duruyor. */
.panel-serit { position: relative; }
.panel-serit__ray {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 22px) / 3);   /* tam 3 kart + 2 boşluk */
  gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* Kart üzerine gelince %5 büyüyor; dolgu olmazsa şerit onu kırpıyor. */
  padding: 16px 16px 20px;
  margin: -16px -16px -20px;                        /* dolgu bölümü şişirmesin */
  /* scroll-padding olmadan yaslama motoru ilk kartı hizalamak için rayı
     dolgu kadar (16px) kaydırıyor: şerit başta "kaydırılmış" sayılıyor,
     sol ok pasife geçmiyordu. */
  scroll-padding-left: 16px;
  scrollbar-width: none;
}
.panel-serit__ray::-webkit-scrollbar { display: none; }
.panel-serit__ray > .panel { scroll-snap-align: start; }
.panel-serit__ray:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 4px; border-radius: var(--r-panel); }

.panel-serit__ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--cizgi); background: var(--kart); color: var(--bordo);
  display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
  box-shadow: var(--golge); transition: background var(--gecis), color var(--gecis), opacity var(--gecis);
}
.panel-serit__ok:hover { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }
.panel-serit__ok[disabled] { opacity: .25; pointer-events: none; }
.panel-serit__ok[hidden] { display: none; }
.panel-serit__ok--sol { left: -54px; }
.panel-serit__ok--sag { right: -54px; }
@media (max-width: 1400px) {
  .panel-serit__ok--sol { left: -10px; }
  .panel-serit__ok--sag { right: -10px; }
}
/* Şeritte aynı anda görünen kart sayısı ekran daraldıkça azalır. */
@media (max-width: 980px) {
  .panel-serit__ray { grid-auto-columns: calc((100% - 22px) / 2); }
}
/* Telefonda tek kart. Kart genişliği tam %100 DEĞİL: betik bir tıklamada
   ray.clientWidth kadar kaydırıyor; adım aralığı (kart + boşluk) şeridin dış
   genişliğine eşit olsun diye yan dolgu veriliyor — haber şeridindeki ile
   aynı düzeltme. */
@media (max-width: 620px) {
  .panel-serit__ray {
    grid-auto-columns: 100%;
    padding-left: 12px; padding-right: 12px;
    margin-left: -12px; margin-right: -12px;
    scroll-padding-left: 12px;
  }
  .panel-serit__ok { width: 36px; height: 36px; font-size: 17px; }
  .panel-serit__ok--sol { left: -12px; }
  .panel-serit__ok--sag { right: -12px; }
}
/* Bölümler arası boşluk: başlık kalktığı için üst dolgu kısaldı. */
.bolum--sik { padding-top: 10px; }
.paneller { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; align-items: stretch; }
.panel {
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  padding: 0 32px 38px; position: relative; border-radius: var(--r-panel); overflow: hidden;
  color: #fff; margin: 0; text-align: center;
  /* Paneller eşit boyda; büyüme yalnızca üzerine gelince. */
  transition: transform 280ms cubic-bezier(.22,.61,.36,1), box-shadow 280ms ease;
  will-change: transform;
}
/* Gölge YOK: kartlar kaydırılabilir bir şeritte duruyor, şerit de içeriğini
   kırpıyor. Gölge 44px bulanıklık + 20px kayma istiyor, şeridin dolgusu ise
   16px — gölge tam kenarda kesilip kartın arkasında düz kenarlı gri bir kare
   olarak görünüyordu. Büyüme etkisi tek başına yeterli. */
.panel:hover,
.panel:focus-visible {
  transform: scale(1.05);
  z-index: 2;                 /* büyüyen panel komşularının üstünde kalsın */
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
  .panel:hover, .panel:focus-visible { transform: none; }
}
.panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--kirmizi); }
.panel--bordo { background: var(--bordo); }
.panel--bordo-acik { background: var(--bordo-acik); }
.panel--yesil { background: var(--yesil); }
.panel__baslik {
  display: flex; align-items: center; justify-content: center; min-height: 88px;
  padding-top: 34px; font-size: 23px; font-weight: 700; color: #fff;
}
/* Kapak görselleri farklı oranlarda (dergi dikey, kongre yatay, halk çok geniş);
   sabit kutu yerine yüksekliği sabit, genişliği serbest — contain ile kırpılmaz. */
.panel__kapak {
  display: flex; align-items: center; justify-content: center;
  height: 300px; width: 100%; margin: 6px 0 4px;   /* özet kalktı, kapağa yer açıldı */
}
.panel__kapak img {
  max-height: 100%; max-width: 100%; width: auto; height: auto;
  object-fit: contain;
  /* box-shadow DEĞİL: saydam PNG'lerde (kongre kolajı) görselin kutusunu
     gölgeleyip arkasında hayalet bir kart oluşturuyordu. drop-shadow alfayı
     izler, opak JPG kapaklarda görünüm aynı kalır. */
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.38));
}
.panel__ozet { font-size: 14px; color: rgba(255,255,255,.78); margin: 0; }
.panel__eylem { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--pembe); margin-top: auto; }
/* Butonun kendi bağlantısı varsa kart <a> değil <div>: iç içe bağlantı
   geçersiz HTML. Kartın hedefine giden bağlantı gövdenin üzerine yayılıyor,
   buton kendi bağlantısıyla onun üstünde duruyor. */
.panel__ortu { position: absolute; inset: 0; z-index: 1; }
.panel--baglantili .panel__eylem--dugme { position: relative; z-index: 2; text-decoration: none; }
.panel--baglantili .panel__eylem--dugme:hover,
.panel--baglantili .panel__eylem--dugme:focus-visible { color: #fff; text-decoration: underline; }
/* <div> klavyeyle odaklanmıyor; büyüme etkisi içindeki bağlantılardan gelsin. */
.panel--baglantili:focus-within {
  transform: scale(1.05);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .panel--baglantili:focus-within { transform: none; }
}

/* Koyu bant (Kurslar) ---------------------------------------------------- */
.koyu-bant {
  background: var(--yesil); border-radius: var(--r-bant);
  margin: 0 20px; padding: 66px 48px 72px; color: #fff;
}
.koyu-bant .bolum-basligi h2 { color: #fff; }
.koyu-bant .bolum-basligi p { color: rgba(255,255,255,.72); }
.kurs-kart { display: flex; flex-direction: column; background: var(--kart); border-radius: var(--r-kart); overflow: hidden; color: var(--murekkep); }
.kurs-kart:hover { color: var(--murekkep); }
.kurs-kart__govde { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 30px; flex: 1; }
.bant-baglantilari { display: flex; justify-content: center; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.bant-baglantilari a {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 4px;
}

/* Bordo iki sütunlu bant (Dernek Hakkında) ------------------------------ */
.bordo-bant {
  background: var(--bordo); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  /* Üstteki panel bölümü yalnızca 34px'lik .bolum dolgusuyla bitiyordu; bant
     yukarıya yapışık, aşağıya (altbilgi 64px) ferah duruyordu. Üst boşluk
     altbilgininkiyle eşitlendi: 34 + 30 = 64px. */
  margin: 30px 20px 0; border-radius: var(--r-bant); overflow: hidden; color: #fff;
}
.bordo-bant__metin { padding: 76px 48px; display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.bordo-bant__metin h2 { color: #fff; font-size: 30px; }
.bordo-bant__metin p { margin: 0; color: rgba(255,255,255,.78); max-width: 56ch; text-wrap: pretty; }
.bordo-bant__cizgi { width: 64px; height: 3px; background: var(--kirmizi); border-radius: 2px; }
.bordo-bant__gorsel { position: relative; min-height: 460px; }
.bordo-bant__gorsel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--kirmizi); z-index: 2; }
/* Bordo bandın içindeki dolgulu düğmeler beyaz zemin + bordo yazı. Kırmızı
   düğme bordo zeminin üstünde iki koyu rengin yan yana durması gibi okunuyordu.
   Kural yalnızca bu bölüme kapsanıyor: .btn--kirmizi bir de slayttaki DETAY
   düğmesinde kullanılıyor, o fotoğrafın üstünde duruyor ve kırmızı kalıyor. */
.bordo-bant .btn--kirmizi { background: #fff; color: var(--bordo); }
.bordo-bant .btn--kirmizi:hover { background: var(--krem); color: var(--bordo); }

.buton-satiri { display: flex; gap: 14px; flex-wrap: wrap; }

/* Alt sayfa başlığı ----------------------------------------------------- */
.sayfa-basligi { padding: 0 0 56px; }
.sayfa-basligi__ic { padding-top: 40px; }
/* İç sayfa başlığı da üst bloğun içinde; krem zeminde metinler koyu tonda. */
/* Ölçü sınırı 26ch'ti: "Information of Scientific Publications" gibi normal
   uzunlukta bir başlık bile yer varken iki satıra düşüyordu. 50ch, sayfa
   başlıklarının tamamını (en uzunu 49 karakter) tek satırda tutuyor; çok uzun
   haber başlıkları hâlâ okunur bir genişlikte sarıyor. */
.sayfa-basligi h1 { font-size: 38px; font-weight: 700; letter-spacing: -.01em; max-width: 50ch; text-wrap: pretty; color: var(--murekkep); }
.sayfa-basligi p { color: var(--govde); max-width: 70ch; margin: 16px 0 0; text-wrap: pretty; }
/* Açık krem zeminde --soluk (#8B7F73) 3.4:1'de kalıyordu, iz yolu okunmuyordu.
   Bağlantılar bordo, bulunulan sayfa koyu mono (8.3:1), ayraç silik. */
.iz-yolu {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em;
  color: var(--koyu-mono); margin-bottom: 18px;
}
.iz-yolu a { color: var(--bordo); }
.iz-yolu a:hover { color: var(--kirmizi); text-decoration: underline; }
.iz-yolu span { color: var(--koyu-mono); }
.iz-yolu__ayrac { color: #B3A99D; }

/* İçerik + kenar sütunu ------------------------------------------------- */
.iki-sutun { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 44px; align-items: start; }

.yan-kutu { background: var(--kart); border-radius: var(--r-kart); overflow: hidden; box-shadow: var(--golge); }
/* Kart şeridiyle aynı dil: ikisi de bordo. */
.yan-kutu__sekme { height: 4px; background: var(--bordo); }
.yan-kutu__ic { padding: 22px 24px 26px; }
.yan-kutu h3 { font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.yan-liste { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; }
.yan-liste li { border-top: 1px solid var(--cizgi); }
.yan-liste li:first-child { border-top: 0; }
.yan-liste a { display: block; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--murekkep); }
.yan-liste a:hover { color: var(--kirmizi); }
.yan-liste .tarih { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--soluk); margin-bottom: 3px; }

/* Haber listesi (satır düzeni) ------------------------------------------ */
.haber-satiri {
  display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 26px; align-items: center;
  padding: 22px 0; border-top: 1px solid var(--cizgi); color: var(--murekkep);
}
.haber-satiri:last-child { border-bottom: 1px solid var(--cizgi); }
.haber-satiri:hover { color: var(--murekkep); }
.haber-satiri:hover .haber-satiri__baslik { color: var(--kirmizi); }
.haber-satiri__gorsel { height: 140px; border-radius: 12px; }
.haber-satiri__baslik { font-size: 19px; font-weight: 700; line-height: 1.35; transition: color var(--gecis); }
.haber-satiri__ozet { display: block; margin: 6px 0 0; font-size: 14px; color: var(--govde); }

/* flex-wrap şart: sayfa numaraları + dört yön oku telefonda tek satıra
   sığmıyor, sonuncusu görünüm alanının dışında kalıyordu. */
.sayfalama { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.sayfalama a {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 12px; color: var(--murekkep);
  background: var(--kart); box-shadow: var(--golge);
}
.sayfalama a:hover { background: var(--krem); color: var(--bordo); }
.sayfalama a.aktif { background: var(--bordo); color: #fff; }
/* Gezinme düğmeleri: "Önceki/Sonraki" yazıları 40px'lik daireye zor sığıyordu,
   yerlerini chevron aldı (bkz. app/View/proje/parca/sayfalama.php). */
.sayfalama__ok { color: var(--bordo); }
.sayfalama__ok svg { width: 16px; height: 16px; display: block; }

/* Makale (haber detay) -------------------------------------------------- */
.makale { background: var(--kart); border-radius: var(--r-kart); overflow: hidden; box-shadow: var(--golge); }
.makale__sekme { height: 4px; background: var(--kirmizi); }
.makale__gorsel { height: 380px; }
.makale__ic { padding: 40px 48px 48px; }
.makale__ust { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.makale h1 { font-size: 32px; font-weight: 700; letter-spacing: -.01em; text-wrap: pretty; }
.makale__spot { font-size: 17px; color: var(--govde); margin: 18px 0 0; font-weight: 600; text-wrap: pretty; }
.makale__metin { color: var(--govde); }
.makale__metin p { margin: 18px 0 0; text-wrap: pretty; }
.makale__metin h2 { font-size: 21px; margin-top: 32px; }
.makale__ekler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--cizgi); }
.ek {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: var(--r-pill);
  background: var(--krem); font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--bordo);
}
.ek:hover { background: #EFE7D9; }

/* Tablo (kurs / kongre arşivi) ----------------------------------------- */
.tablo-sarmal { background: var(--kart); border-radius: var(--r-kart); overflow: hidden; box-shadow: var(--golge); }
table.liste { width: 100%; border-collapse: collapse; }
table.liste th, table.liste td { text-align: left; padding: 16px 22px; border-top: 1px solid var(--cizgi); }
table.liste thead th {
  border-top: 0; background: var(--bordo); color: #fff;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; font-weight: 400;
}
table.liste td { font-size: 14px; color: var(--govde); }
table.liste td.ad { font-size: 15px; font-weight: 600; color: var(--murekkep); }
table.liste td.tarih { font-family: var(--f-mono); font-size: 12px; color: var(--soluk); white-space: nowrap; }

/* Form (iletişim) ------------------------------------------------------- */
.form { display: grid; gap: 16px; }
.form__ikili { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.alan { display: flex; flex-direction: column; gap: 7px; }
.alan label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--soluk); }
.alan input, .alan textarea {
  font: inherit; font-size: 14.5px; color: var(--murekkep); background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: 14px; padding: 13px 16px;
}
.alan textarea { min-height: 150px; resize: vertical; }
.alan input:focus, .alan textarea:focus { outline: 2px solid rgba(218,33,40,.3); outline-offset: 2px; border-color: #C9BBA6; }

.iletisim-kutu { background: var(--kart); border-radius: var(--r-kart); box-shadow: var(--golge); overflow: hidden; }
.iletisim-kutu__sekme { height: 4px; background: var(--kirmizi); }
.iletisim-kutu__ic { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 18px; }
.iletisim-satir { display: flex; flex-direction: column; gap: 3px; }
.iletisim-satir .ad { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--kirmizi); }
.iletisim-satir .deger { font-size: 15px; font-weight: 600; }

/* Alt bilgi ------------------------------------------------------------- */
.alt-bilgi {
  background: var(--footer); color: rgba(255,255,255,.62);
  margin-top: 64px; border-radius: var(--r-bant) var(--r-bant) 0 0; padding: 56px 0 30px;
}
/* Beş kolon: marka bloğu + menüden gelen üç kolon + iletişim. Dört kolonken
   menü tamamı basılınca iletişim alt satıra düşüyordu. */
.alt-bilgi__izgara { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(4, minmax(0,1fr)); gap: 40px 32px; }
.alt-bilgi__ad { font-family: var(--f-baslik); font-weight: 700; font-size: 16px; letter-spacing: .05em; color: #fff; }
.alt-bilgi__alt-ad { display: block; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--pembe); margin-top: 6px; }
.alt-bilgi p { font-size: 13px; max-width: 42ch; margin: 16px 0 0; }
.alt-bilgi__kolon { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.alt-bilgi__kolon a { color: rgba(255,255,255,.8); }
.alt-bilgi__kolon a:hover { color: #fff; }
.alt-bilgi__baslik { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em; color: var(--pembe); }
/* Bir kolonda birden fazla grup olabiliyor (menünün tamamı üç kolona
   bölünüyor); araya gelen başlık öncekinden ayrılsın. */
.alt-bilgi__kolon a + .alt-bilgi__baslik { margin-top: 10px; }
.alt-bilgi__rozetler { display: flex; gap: 8px; margin-top: 8px; }
.alt-bilgi__rozetler .gorsel { width: 64px; height: 26px; background: rgba(255,255,255,.12); border-radius: 4px; }
.alt-bilgi__rozetler .gorsel::after { color: rgba(255,255,255,.5); font-size: 8.5px; letter-spacing: .06em; }
.alt-bilgi__son {
  display: flex; justify-content: space-between; gap: 24px; margin-top: 44px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12); font-size: 11.5px; color: rgba(255,255,255,.5);
}
.alt-bilgi__son a { color: rgba(255,255,255,.5); }

/* Duyarlı düzen --------------------------------------------------------- */
@media (max-width: 1024px) {
  .izgara--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .paneller { grid-template-columns: 1fr; }
  .panel { margin: 0; }
  .bordo-bant { grid-template-columns: 1fr; }
  .bordo-bant__gorsel { min-height: 300px; }
  /* minmax(0,1fr) şart: yalın '1fr' en küçük genişliği içeriğe göre alıyor,
     uzun bir başlık ya da geniş bir öğe kolonu görünüm alanının dışına
     taşırıyordu (haber listesi telefonda 375px yerine 424px'e çıkıyordu). */
  .iki-sutun { grid-template-columns: minmax(0, 1fr); }
  .slayt__icerik { inset: 40px 40px auto; }
  .slayt__baslik { font-size: 34px; }
  .alt-bilgi__izgara { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px) {
  /* İçerik kolonu (.kapsayici) 20px dolguda; başlık çubuğu 16px'te kalınca
     logo ve menü, altındaki başlık/kartlardan 4px dışarıda başlıyordu. */
  .kapsayici--genis { padding: 0 20px; }

  /* Dar ekranda blok ≈900px, görsel 3:1. Masaüstündeki gibi yüksekliğe
     yaymak yaprakları yedi katına uzatıp ahşap damarına çeviriyor; kırpmak
     (cover) ise görselin boş orta bölgesini getiriyor. Bu yüzden görsel doğal
     oranında, üste yaslı duruyor: yapraklar logo ve menünün arkasında kalıyor,
     altta düz krem devam ediyor. */
  .ust-bolum { background-size: 100% auto; background-position: center top; }
  /* Esnek kutu düzeninde tarayıcı, logoyu daraltmak yerine menü düğmesini alt
     satıra sarıyordu. Izgara sütun genişliklerini kesin belirliyor: logo kalan
     alanı alır ve gerekirse başlığını iki satıra sarar, EN ile düğme yerinde kalır. */
  .baslik-cubugu {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center; gap: 10px 12px; padding: 12px 0 10px;
  }

  /* Amblem küçülür; başlık masaüstünde tek satır kalır ama burada sarılabilir,
     böylece EN ve menü düğmesine yer açılır. */
  /* flex-grow 0: logo boşluğu doldurup EN ile menü düğmesini alt satıra itmesin */
  /* Başlık çubuğu ile içerik aynı ölçekte olsun: amblem 48 ve site adı 15px'e
     inerken bölüm başlığı 28px'te kalıyordu — başlık çubuğu sayfadaki en
     küçük şey oluyor, "Haberler ve Basın Bildirileri" ondan iki kat büyük
     duruyordu. Çubuk biraz büyüdü, bölüm/panel başlıkları biraz küçüldü. */
  .logo { gap: 12px; min-width: 0; }
  .logo__amblem img { height: 60px; flex: none; }
  .logo__ad { font-size: 18px; white-space: normal; line-height: 1.15; min-width: 0; }
  .bolum-basligi h2 { font-size: 22px; }
  .bolum-basligi { margin-bottom: 28px; }
  .panel__baslik { font-size: 20px; min-height: 72px; padding-top: 26px; }
  .dil { padding: 6px 12px; font-size: 11px; }

  /* Hamburger: 10 maddelik menüyü yatay kaydırmak yerine açılır panel */
  .menu-dugmesi {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 0 11px; cursor: pointer;
    background: transparent; border: 1px solid rgba(94,22,32,.3); border-radius: 13px;
  }
  .menu-dugmesi span {
    display: block; height: 2px; background: var(--bordo); border-radius: 2px;
    transition: transform var(--gecis), opacity var(--gecis);
  }
  .menu-dugmesi[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-dugmesi[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-dugmesi[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .menu {
    grid-column: 1 / -1; order: 2; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; justify-content: flex-start; gap: 2px;
    max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;
    transition: max-height .3s ease, opacity .2s ease;
  }
  .menu.acik { max-height: 860px; opacity: 1; visibility: visible; padding-bottom: 10px; overflow-y: auto; }
  .menu__tek, .menu__ust {
    width: 100%; justify-content: space-between;
    padding: 12px 14px; border-radius: 12px; font-size: 14px;
  }

  /* Açılır menü mobilde açılır kapanır liste; kayan pencere değil */
  .menu__grup { width: 100%; }
  .menu__alt {
    position: static; min-width: 0; box-shadow: none; background: rgba(94,22,32,.06);
    border-radius: 12px; margin: 4px 0 6px; padding: 6px;
    transform: none; max-height: 0; overflow: hidden;
    transition: max-height .25s ease, opacity var(--gecis);
  }
  .menu__grup:hover .menu__alt { opacity: 0; visibility: hidden; }   /* dokunmada hover tuzağı */
  .menu__ust[aria-expanded="true"] + .menu__alt {
    opacity: 1; visibility: visible; max-height: 320px;
  }
  .menu__alt a { color: var(--murekkep); font-size: 13.5px; padding: 11px 12px; }
  .menu__alt a:hover { background: rgba(94,22,32,.1); color: var(--bordo); }

  .slayt { height: 480px; }
  .slayt__baslik { font-size: 27px; }
  .slayt__ozet { font-size: 14.5px; }
  /* Dar ekranda arama başlık satırına sığmıyor; menü gibi tam satır alıyor.
     order şart: işaretlemede arama dil bağlantısından önce geliyor, ızgara da
     onu ikinci sıraya yerleştirip EN ile menü düğmesini alttaki satıra itiyordu
     (EN o satırda 1fr sütununa düşüp koca bir pastile dönüşüyordu). */
  /* Araç sütunu kendi satırına iner: kısayollar solda, arama tam genişlikte.
     Aynı satırda kalırsa 320px'lik arama logoyu eziyordu. */
  .ust-araclar { grid-column: 1 / -1; order: 1; align-items: stretch; margin-left: 0; gap: 8px; }
  .kisayollar { justify-content: flex-start; }
  .kisayollar > a { padding: 5px 9px; font-size: 11px; }
  .arama { width: 100%; }
  .istatistik { padding: 20px 12px 0; }
  .istatistik__satir { padding: 26px 16px 30px; }
  /* Üç kutu alt alta. Dikey ayırıcı bu düzende anlamsız; yerini yatay ince
     çizgi alıyor — çizgisiz hâlde üç blok birbirinden kopuk duruyordu. */
  .istatistik__satir { grid-template-columns: minmax(0,1fr); grid-template-rows: none; gap: 0; }
  /* Alt alta dizilince paylaşılan satır yok; her kutu kendi içeriği kadar. */
  .istatistik__kutu {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    grid-row: auto; padding: 16px 16px 18px;
  }
  .istatistik__kutu > :first-child, .istatistik__kutu > :last-child { align-self: center; }
  .istatistik__kutu + .istatistik__kutu {
    border-left: 0; border-top: 1px solid rgba(94,22,32,.13);
  }
  /* Dar ekranda ortak yuva gerekmez: kutular alt alta satırlarda, üst hizalama
     zaten satır başında. */
  /* İki sütunlu düzen: dört kutu (2×2, DOM sırası), sonra tam genişlikte
     rozet ve tütünsüz cümlesi. */
  .istatistik__kutu--rozet { grid-column: 1 / -1; border-left: 0; }
  .istatistik__kutu--tutunsuz { grid-column: 1 / -1; border-left: 0; }
  .istatistik__sayi { font-size: 32px; }
  .istatistik__ad { font-size: 13px; letter-spacing: .09em; }
  .istatistik__logo { height: 72px; }
  .tutunsuz__simge { width: 62px; height: 62px; }
  .yil-dairesi { width: 132px; height: 132px; }
  .yil-dairesi .istatistik__sayi { font-size: 42px; }

  /* Haber şeridi: oklar masaüstündeki gibi kartın iki yanında, dikeyde
     ortada. Önce şeridin altına, ortaya alınmışlardı; iki yanda istendi.
     Kartın dışında 32px yer var (20 kolon + 12 şerit dolgusu); 36px'lik ok
     ekran kenarına yaslanıp kartın kenarına 12px biniyor — kart metni 26px
     içeriden başladığı için yazıyı örtmüyor. */
  .haber-serit__ok { width: 36px; height: 36px; font-size: 17px; }
  .haber-serit__ok--sol { left: -12px; }
  .haber-serit__ok--sag { right: -12px; }
  .izgara--3, .izgara--2 { grid-template-columns: 1fr; }
  .haber-satiri { grid-template-columns: 1fr; }
  .haber-satiri__gorsel { height: 190px; }
  .makale__ic { padding: 28px 22px 34px; }
  .makale h1 { font-size: 25px; }
  .koyu-bant { padding: 48px 22px 54px; margin: 0 12px; }
  .bordo-bant { margin: 24px 12px 0; }
  .bordo-bant__metin { padding: 48px 24px; }
  .form__ikili { grid-template-columns: 1fr; }
  .alt-bilgi__izgara { grid-template-columns: 1fr; gap: 30px; }
  .sayfa-basligi h1 { font-size: 28px; }
}

/* Form alanları --------------------------------------------------------
   CMS'in Form yardımcısı Bootstrap sınıfları basıyor (form-label, form-control,
   mb-3). Bunları tasarımın diline çeviriyoruz; alan adları ve doğrulama
   sınıfları değişmediği için form işleyişi etkilenmiyor. */
.form { display: grid; gap: 18px; margin-top: 26px; }
.form__ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .mb-3 { margin: 0; }
.form .form-label {
  display: block; margin-bottom: 7px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--soluk); text-transform: uppercase;
}
.form .form-label.required::after { content: " *"; color: var(--kirmizi); }
.form .form-control {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 14.5px;
  color: var(--murekkep); background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: 12px;
}
.form textarea.form-control { min-height: 150px; resize: vertical; }
.form .form-control:focus {
  outline: 2px solid rgba(218,33,40,.28); outline-offset: 2px; border-color: var(--bordo);
}
.form .g-recaptcha { margin: 2px 0; }

/* İletişim yan sütunu */
.yan-sutun { align-self: start; }
.yan-kutu {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r-panel); padding: 26px 24px;
}
.yan-kutu__baslik { font-size: 16px; margin: 0 0 12px; }
.yan-kutu__baslik + p { margin-top: 0; }
.yan-kutu p { color: var(--govde); font-size: 14px; }

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

/* Kişi kartları (kurucular, yönetim kurulu) ----------------------------
   Eski site bunları tabloyla diziyordu ve satırlar kaydığı için isimler
   yanlış fotoğrafın yanına düşüyordu. Artık ızgara: iki sütun, dar ekranda tek. */
.kisiler {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin: 22px 0 6px;
}
.kisi {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: var(--r-kart);
  border-left: 3px solid var(--kirmizi);
}
.kisi__foto {
  flex: none; width: 76px; height: 76px; border-radius: 50%;
  overflow: hidden; background: #ece5db;
}
.kisi__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.kisi__bilgi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kisi__gorev {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--kirmizi);
}
.kisi__ad { font-size: 15px; font-weight: 700; color: var(--murekkep); line-height: 1.3; }
.kisi__uzmanlik { font-size: 13px; color: var(--govde); line-height: 1.4; }

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

/* Fotoğraf ızgarası ----------------------------------------------------
   Eski sayfalar fotoğrafları tabloya diziyordu: hücre genişlikleri sabit,
   dar ekranda taşıyordu. Otomatik ızgara sütun sayısını genişliğe göre
   kendisi seçiyor; görseller ortak orana kırpıldığı için satırlar hizalı. */
.galeri {
  display: grid; gap: 12px; margin: 22px 0 6px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.galeri__oge {
  margin: 0; overflow: hidden; border-radius: var(--r-kart);
  background: #ece5db; border: 1px solid var(--cizgi);
}
.galeri__oge img {
  display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; transition: transform .35s ease;
}
.galeri__oge:hover img { transform: scale(1.04); }

/* Tek fotoğraflı galeri ızgara olmasın — doğal oranında ve ortalı dursun. */
.galeri:has(> .galeri__oge:only-child) { grid-template-columns: minmax(0, 460px); }
.galeri__oge:only-child img { aspect-ratio: auto; }

/* Görsel + açıklama bloğu ---------------------------------------------
   Eski işaretlemede iki hücreli tabloydu; dar ekranda alt alta iner. */
.medya {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 20px; align-items: start; margin: 22px 0 6px;
  padding: 16px; background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: var(--r-kart);
}
.medya__gorsel img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--r-kart) - 6px);
}
.medya__metin { color: var(--govde); font-size: 14.5px; line-height: 1.6; }
.medya__metin > :first-child { margin-top: 0; }

/* Kenar sütunundaki listeye dönüş bağlantısı -------------------------- */
.geri-baglanti {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px; background: var(--kart);
  border: 1px solid var(--cizgi); border-left: 3px solid var(--kirmizi);
  border-radius: var(--r-kart); color: var(--murekkep); text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.geri-baglanti:hover { background: var(--krem); transform: translateX(-2px); }
.geri-baglanti__ok { font-size: 20px; line-height: 1; color: var(--kirmizi); }
.geri-baglanti__ad {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.4;
}

/* Kapak kartı ızgarası (yayınlar, kongreler, yarışmalar) ----------------
   Eski liste her öğeyi tam genişlikte alt alta diziyordu: kapak solda küçük,
   sağı bomboş, aralarında başlığı tekrarlayan bir cümle. Kartlarda kapak
   ortak orana kırpılıyor, açıklama yerine tek eylem etiketi var. */
/* Sütun genişliği ALT VE ÜST sınırla tanımlı. Yalnızca 1fr verilince üç kartlı
   sayfalarda (Yarışmalar, Competitions) kartlar 399px'e şişiyor, on kartlı
   sayfada 232px kalıyordu; aynı bileşen sayfadan sayfaya farklı boyuttaydı.
   Üst sınır + ortalama ile her sayfada aynı ölçü, artan boşluk iki yana
   eşit dağılıyor. */
.kapak-izgara {
  display: grid; gap: 18px; margin: 24px 0 6px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 250px));
  justify-content: center;
}
.kapak-kart {
  /* Kartın köşeleri yuvarlak, İÇİNDEKİ kapak görseli keskin (aşağıda
     .kapak-kart__gorsel img). Kapaklar dikdörtgen basılı nesneler; onları
     yuvarlatmak kart gibi gösteriyordu, kartın kendisinin köşeli olması ise
     sayfadaki diğer kartlarla (haber, kurs) uyuşmuyordu.
     Beyaz görsel alanının üst köşeleri overflow:hidden ile kartın yarıçapına
     göre kırpılıyor — bu yüzden alanın kendi yarıçapı da aşağıda ayrıca
     tanımlı: yalnızca kırpmaya bırakılınca kenarlıkla arasında ince bir
     tırtık kalıyordu. */
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r-kart); color: inherit; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kapak-kart:hover {
  transform: translateY(-3px); box-shadow: var(--golge); border-color: var(--kirmizi);
}
/* Kapak görselleri kırpılmadan, eşit boşlukla gösterilir.
   Önce object-fit: cover vardı: kaynak kapakların bir bölümünde beyaz kenar
   zaten baskılı olduğu için bazı kartlar boşluklu, bazıları uçtan uca
   görünüyordu. contain + sabit dolgu ile hepsi aynı çerçevede duruyor ve
   kapak kırpılmıyor. */
.kapak-kart__gorsel {
  display: block; background: #fff;
  padding: 16px; border-bottom: 1px solid var(--cizgi);
  /* Kartın üst köşeleriyle aynı yarıçap (kenarlık kalınlığı kadar içeride). */
  border-radius: calc(var(--r-kart) - 1px) calc(var(--r-kart) - 1px) 0 0;
}
.kapak-kart__gorsel img {
  display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4;
  object-fit: contain; object-position: center;
  /* Kapakların bir bölümü şeffaf zeminli üç boyutlu kitap görseli (%29 saydam),
     bir bölümü düz taranmış dikdörtgen. Yan yana durunca bazıları köşeli,
     bazıları gölgeli görünüyordu.
     drop-shadow (box-shadow değil) saydamlığı izler: mockup'ta kitabın
     silüetini, düz taramada dikdörtgeni gölgeler. Küçük yarıçap yalnızca düz
     olanlarda görünür, mockup'ların köşeleri zaten saydam. */
  /* Köşeler keskin: kapaklar dikdörtgen basılı nesneler, yuvarlatmak
     onları kart gibi gösteriyordu. Gölge kalıyor ki hepsi zeminden aynı
     şekilde ayrılsın. */
  filter: drop-shadow(0 3px 8px rgba(42, 33, 27, .22));
}
.kapak-kart__govde {
  display: flex; flex-direction: column; gap: 8px; flex: 1;
  padding: 16px 18px 18px;
}
.kapak-kart__ad {
  font-size: 15px; font-weight: 700; line-height: 1.35;
  color: var(--murekkep); text-wrap: pretty;
}
.kapak-kart__not { font-size: 13px; color: var(--govde); line-height: 1.5; }
.kapak-kart__eylem {
  margin-top: auto; padding-top: 4px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--kirmizi);
}

/* Kurum logosu kartları (Linkler sayfası): logolar farklı oranlarda ve
   kapaklar gibi dikey değil; kutuyu yatay tutup logoyu içine sığdırıyoruz. */
.kapak-izgara--logo { grid-template-columns: repeat(auto-fit, minmax(210px, 250px)); }
.kapak-izgara--logo .kapak-kart__gorsel { padding: 22px; }
.kapak-izgara--logo .kapak-kart__gorsel img { aspect-ratio: 16 / 10; }

/* Bağlantı listesi (halk eğitimi notları) -------------------------------
   Yirmi bağlantı alt alta paragraf olarak duruyordu; sıralı bir listeye
   dönünce hem taranabilir hem de dokunma hedefleri büyüyor. */
/* grid-template-columns şart: örtük sütun 'auto' olduğu için satırlar
   içeriklerine göre genişleyip kapsayıcıyı aşıyordu — dar ekranda satırın sağ
   kenarı ve oku makalenin taşma sınırında kesiliyordu. */
.baglanti-liste { list-style: none; margin: 22px 0 6px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.baglanti-liste li { margin: 0; }
.baglanti-liste a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; border-radius: var(--r-kart);
  background: var(--kart); border: 1px solid var(--cizgi);
  border-left: 3px solid var(--kirmizi);
  color: var(--murekkep); text-decoration: none; font-size: 14.5px; line-height: 1.4;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.baglanti-liste__ad { min-width: 0; overflow-wrap: anywhere; }
/* PDF / site dışı işareti — bağlantının nereye gittiğini önceden belli eder. */
.baglanti-liste__etiket {
  flex: none; margin-left: auto; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--krem); color: var(--bordo);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
}
/* Okla yön belli olsun; süs olduğu için ekran okuyucudan gizli. */
.baglanti-liste a::after {
  content: "›"; margin-left: auto; color: var(--kirmizi);
  font-size: 19px; line-height: 1; opacity: .55; transition: opacity .2s ease, transform .2s ease;
}
/* Etiket varsa boşluğu o dolduruyor; ok yalnızca yanına gelsin. */
.baglanti-liste a:has(.baglanti-liste__etiket)::after { margin-left: 10px; }
.baglanti-liste a:hover {
  background: var(--krem); transform: translateX(2px); box-shadow: var(--golge);
}
.baglanti-liste a:hover::after { opacity: 1; transform: translateX(2px); }

@media (max-width: 720px) {
  .medya { grid-template-columns: 1fr; }
  .galeri { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .kapak-izgara { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .kapak-kart__gorsel { padding: 10px; }
}

/* Yalnızca afiş slaytı varsa: alan afişin oranını alır -----------------
   Sabit 540px yükseklikte afiş ya kırpılır (cover, 1440px'de %44 yan kayıp)
   ya da üst/alt boşluk kalır (contain). Oranı alana verince ikisi de olmaz. */
.slayt--afis-tam {
  height: auto;
  width: 100%;
  aspect-ratio: var(--masaustu-oran, 1520 / 319);   /* oran afişten gelir; yedek: eski sabit */
  /* min-height KULLANMA: aspect-ratio ile birlikte tarayıcı genişliği
     yükseklikten türetir ve öğe kapsayıcısından taşar (220px → 1047px genişlik). */
}
.slayt--afis-tam .slayt__afis img { object-fit: cover; }   /* oran eşit → kırpma yok */
.slayt--afis-tam .slayt__afis-fon { display: none; }        /* boşluk kalmadı, bulanık zemin gereksiz */

/* Telefonda afiş KIRPILMIYOR. Önce sabit 190px yükseklik + sola hizalı kırpma
   vardı; afişin yalnızca sol şeridi görünüyor, geri kalanı kesiliyordu.
   Afişler 4.8:1 oranında tasarlanmış — dar ekranda doğal oranıyla, tamamı
   görünecek şekilde duruyorlar (canlı sitedeki davranışın aynısı).
   Ok ve noktalar da bu ince şeride göre küçülüyor. */
@media (max-width: 720px) {
  /* Telefon için ayrı afiş yüklendiyse bant onun oranını alıyor: görsel tam,
     kırpma yok, boşluk yok. Oran denetleyiciden geliyor (--mobil-oran). */
  .slayt--mobil-afis { aspect-ratio: var(--mobil-oran); }
  /* Telefonda slaytın altı düz: yuvarlak köşeler afişin iki alt ucunu kesiyor,
     dar ekranda o kesik bant genişliğinin belirgin bir kısmı oluyor. */
  .slayt { border-radius: 0; }
  .ust-bolum { border-radius: 0; }
  /* Mobil afişi olmayan slayt bu bantta kendi oranıyla ortalanıyor; artan yer
     kendi bulanık kopyasıyla doluyor. */
  .slayt--mobil-afis .slayt__afis img { object-fit: contain; }
  .slayt--mobil-afis .slayt__afis-fon { display: block; }
  .slayt--afis-tam .slayt__ok { width: 30px; height: 30px; font-size: 15px; }
  .slayt--afis-tam .slayt__ok--sol { left: 8px; }
  .slayt--afis-tam .slayt__ok--sag { right: 8px; }
  .slayt--afis-tam .slayt__noktalar { bottom: 8px; gap: 6px; }
  .slayt--afis-tam .slayt__noktalar button { width: 20px; height: 2px; }
  /* Dikey afişte ok ve noktalar normal boyuna dönüyor — ince şerit değil. */
  .slayt--mobil-afis .slayt__ok { width: 38px; height: 38px; font-size: 18px; }
  .slayt--mobil-afis .slayt__noktalar { bottom: 14px; gap: 8px; }
  .slayt--mobil-afis .slayt__noktalar button { width: 26px; height: 3px; }
}

/* Makale içi görseller ---------------------------------------------------
   İçerik yönetimden geldiği için tam boy bir görsel yüklenebiliyor; global
   img{max-width:100%} kuralı onu kapsayıcı genişliğine yayıp devasa gösteriyordu
   (kongre 2010 afişi 855×1200 → ~1200px yükseklik). Yükseklik sınırı bunu keser,
   normal boydaki görsellere dokunmaz. */
/* Sayfa başındaki geniş kart (kongreler sayfası). Aşağıdaki kapak
   kartlarıyla aynı çerçeve — beyaz zemin, kenarlık, yuvarlak köşe ve aynı
   üzerine gelme etkisi — ama gövde genişliğinde. Başlık görselin içinde
   basılı olduğu için ayrıca yazılmıyor; altta yalnızca "İNCELE" duruyor. */
.makale__ic .sayfa-afis {
  display: block; overflow: hidden; text-decoration: none;
  /* Izgaranın İÇİNDE, bütün sütunları kaplayan tek bir satır: sağ ve sol
     sınırı altındaki kartlarla birebir aynı hizada kalıyor, ekran daralıp
     sütun sayısı değiştiğinde de kendiliğinden eşleşiyor. Dış boşluğu
     ızgaranın kendi gap değeri veriyor, bu yüzden margin yok.
     min-width: 0 — ızgara ögesinin öntanımlı min-width: auto değeri,
     içindeki 1376px'lik görselin sütunu şişirmesine izin veriyordu. */
  grid-column: 1 / -1; min-width: 0;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r-kart); color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.makale__ic .sayfa-afis:hover,
.makale__ic .sayfa-afis:focus-visible {
  transform: translateY(-3px); box-shadow: var(--golge); border-color: var(--kirmizi);
}
@media (prefers-reduced-motion: reduce) {
  .makale__ic .sayfa-afis { transition: none; }
  .makale__ic .sayfa-afis:hover, .makale__ic .sayfa-afis:focus-visible { transform: none; }
}
/* Görsel, alttaki kapak kartlarındaki beyaz çerçevenin (.kapak-kart__gorsel)
   içinde duruyor; oradan gelen zemin, boşluk, alt çizgi ve gölgeyi aynen
   kullanıyor. Tek fark: o kartlardaki 3/4 oran zorlaması burada geçersiz —
   afiş yatık (1.94:1). Yükseklik sınırlanıp ortalanıyor ki görsel kartı
   boydan boya kaplamasın, alttakilerle aynı ölçekte dursun. */
/* Boşluk alttaki kartlarla aynı: 16px. Görsel çerçeveyi enine dolduruyor —
   yükseklik sınırı konunca kartın ortasında küçücük kalıyordu. */
.makale__ic .sayfa-afis .kapak-kart__gorsel { padding: 16px; }
.makale__ic .sayfa-afis .kapak-kart__gorsel img {
  aspect-ratio: auto;
  width: 100%; height: auto; max-height: none;
  margin: 0; border-radius: 0;
}
@media (max-width: 560px) {
  .makale__ic .sayfa-afis .kapak-kart__gorsel { padding: 12px; }
}
.makale__ic .sayfa-afis__eylem {
  display: block; padding: 13px 18px 15px; text-align: center;
  border-top: 1px solid var(--cizgi);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--kirmizi);
}
@media (max-width: 560px) {
  .makale__ic .sayfa-afis__eylem { padding: 11px 14px 13px; font-size: 10.5px; }
}

.makale__ic img {
  max-height: 420px;
  width: auto;
  height: auto;
  margin: 14px 0;
  /* Galeri kutularındaki görseller yuvarlak köşeliydi, metnin arasına serbest
     konanlar köşeliydi; aynı sayfada iki farklı biçim görünüyordu. */
  border-radius: var(--r-kart);
}

/* Galeri ve medya bloklarındaki görseller kendi kutularını doldurur —
   yukarıdaki serbest görsel kuralı bunlara uygulanmamalı (aynı özgüllükte
   olduğu ve sonra geldiği için burada geri alınıyor). */
.makale__ic .galeri__oge img,
.makale__ic .medya__gorsel img,
.makale__ic .kapak-kart__gorsel img,
.makale__ic .uye__foto img,
.makale__ic .kisi__foto img { max-height: none; width: 100%; height: 100%; margin: 0; }
/* Kapak görselleri KESKİN köşeli. Serbest makale görsellerine verilen 18px
   yarıçap (yukarıdaki .makale__ic img) dosyada bu bileşenlerin kendi
   kurallarından SONRA geldiği için kapakları da yuvarlıyordu — kaynak
   dosyaların köşeleri düz olduğu hâlde sitede yuvarlak görünüyorlardı. */
.makale__ic .kapak-kart__gorsel img { border-radius: 0; }
.makale__ic .galeri__oge img { height: 100%; }
.makale__ic .kisi__foto img { height: 100%; }
.makale__ic .galeri__oge:only-child img { height: auto; max-height: 420px; }

/* İçerikten gelen ara başlıklar — eski sayfalarda <p><strong> idi. */
.makale__ic h3 {
  font-size: 19px; font-weight: 700; color: var(--murekkep);
  margin: 32px 0 0; text-wrap: pretty;
}
.makale__ic > h3:first-child { margin-top: 0; }
.makale__ic p { margin: 14px 0 0; }
/* :not() — bağlantı listesi kendi yerleşimini kurar, madde girintisi almasın. */
.makale__ic ul:not(.baglanti-liste), .makale__ic ol { margin: 14px 0 0; padding-left: 22px; }
.makale__ic li { margin-top: 6px; }
.makale__ic blockquote {
  margin: 22px 0 0; padding: 14px 20px;
  border-left: 3px solid var(--kirmizi); background: var(--krem);
  border-radius: 0 var(--r-kart) var(--r-kart) 0; color: var(--govde);
}

/* Haber satırı: görseli olmayan kayıtlar tek sütun olur, metin dar kalmasın.
   (İçe aktarılan haberlerin çoğunda görsel yok.) */
.haber-satiri:not(:has(.haber-satiri__gorsel)) { grid-template-columns: minmax(0, 1fr); }

/* Sabit içerik sayfaları (Dernek, Kurucular, Yönetim Kurulu, Kongreler…) ------
   Genel kolondan daha geniş: kişi kartları ve afiş ızgaraları için yer açar.
   Geniş ekranda kenarda boşluk kalsın diye min() ile sınırlanıyor. */
.kapsayici--sayfa { max-width: min(1420px, 100% - 56px); }

/* Paragraf genişlik sınırı kaldırıldı: 92ch, 1420px'lik sabit sayfa kartında
   metni sola yaslı bırakıp sağda geniş bir boşluk oluşturuyordu. Bu sayfalarda
   paragraflar zaten kısa; kartın tamamını kullanıyorlar. */

/* Panel özetleri kaldırıldı; kapak ve eylem arasındaki ritim yeniden ayarlandı. */
.panel { gap: 22px; padding-bottom: 30px; }
.panel__kapak img { max-height: 300px; }

/* Tütünsüz politika bildirimi (altbilgi) -------------------------------- */
/* Tütünsüz politika bildirimi — istatistik bandının beşinci kutusu.
   Sayının yerini simge alıyor; yüksekliği .istatistik__sayi ile aynı (38px)
   tutuluyor ki alttaki metin diğer açıklamalarla aynı hizada başlasın. */
.tutunsuz__simge {
  flex: none; width: 84px; height: 84px;
  color: var(--kirmizi);
  opacity: .8;
}
/* Kutunun kendi metni: diğer kutuların mono/versal açıklamalarından farklı,
   çünkü tam bir cümle — okunabilirlik için normal yazı tipi ve satır aralığı. */
.istatistik__kutu--tutunsuz { padding: 0 6px 0 12px; }
.tutunsuz__metin {
  margin: 0; max-width: none;
  font-size: 14px; line-height: 1.6; color: var(--govde);
  text-wrap: pretty;
}
.tutunsuz__metin strong { color: var(--bordo); font-weight: 700; }

/* Dar ekranda cümle kutuyu doldursun. Bu blok temel kuralın ardında olmalı:
   yukarıdaki mobil bölüm dosyada daha önce geldiği için 52ch sınırını ezemiyordu.
   Yalnızca max-width de yetmiyor — kutu flex sütun ve ortalanmış olduğundan
   paragraf içeriği kadar daralıyor. */
@media (max-width: 720px) {
  .tutunsuz__metin { max-width: none; width: 100%; }
  .istatistik__kutu--tutunsuz { padding: 0 4px; }
}

/* Rozet kutusu: sayının yerini logo alıyor, yüksekliği sayılarla aynı hizada. */
.istatistik__kutu--rozet { color: inherit; text-decoration: none; }
.istatistik__logo {
  /* Kaynak 199×200 (halk-sagligi-simge.png), yani 96px'e kadar büyütmek
     bulanıklaştırmıyor. 46px'te bandın genişliği yanında minicik kalıyordu;
     yıl dairesiyle aynı görsel ağırlığa çıkarıldı. Logodaki "Halk Sağlığı
     Merkezi" yazısı kırpıldı: altındaki etiketle aynıydı. */
  height: 96px; width: auto; margin: 0 auto;
  /* Logo, bağlantının içinde kendi başına bir hedef olmasın: uzun basınca
     "görseli yeni sekmede aç" menüsü çıkıyor, sürüklenebiliyor ve
     seçilebiliyordu. pointer-events kapalıyken tıklama üstteki <a>'ya
     gidiyor, bağlantı çalışmaya devam ediyor. */
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.istatistik__kutu--rozet:hover .istatistik__logo { transform: translateY(-2px); transition: transform var(--gecis); }

/* Ana sayfa hızlı iletişim formu (bordo bandın sağ tarafı) ---------------- */
.bordo-bant__form {
  background: rgba(255,255,255,.06);
  padding: 40px 44px; display: flex; flex-direction: column; gap: 6px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.bordo-bant__form h3 { color: #fff; font-size: 21px; margin: 0 0 10px; }
/* Çapayla gelindiğinde bant üstten biraz nefes alsın. */
.bordo-bant[id] { scroll-margin-top: 24px; }
/* Formun içindeki doğrudan e-posta satırı: ayrı iletişim sayfası kalmadığı
   için derneğin adresi burada duruyor. */
.hizli-form__adres {
  margin: 14px 0 0; font-size: 14px; color: rgba(255,255,255,.82);
}
.hizli-form__adres a {
  color: #fff; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45);
}
.hizli-form__adres a:hover { color: var(--pembe); text-decoration-color: var(--pembe); }
.hizli-form { display: grid; gap: 14px; margin-top: 20px; }
.hizli-form__ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hizli-form label {
  display: block;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  color: rgba(255,255,255,.65);
}
.hizli-form input, .hizli-form textarea {
  width: 100%; margin-top: 6px; padding: 11px 13px;
  font: inherit; font-size: 14.5px; color: #fff;
  background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; letter-spacing: normal;
}
.hizli-form input::placeholder, .hizli-form textarea::placeholder { color: rgba(255,255,255,.4); }
.hizli-form input:focus, .hizli-form textarea:focus {
  outline: 2px solid rgba(255,255,255,.35); outline-offset: 1px;
  border-color: rgba(255,255,255,.45); background: rgba(0,0,0,.26);
}
.hizli-form textarea { resize: vertical; min-height: 96px; }
.hizli-form button { justify-self: start; }
/* reCAPTCHA kutucuğu. Google'ın iframe'i sabit 304px genişlikte; form kolonu
   390px ekranda tam 304px kaldığı için sığıyor, daha darlarda taşmasın diye
   küçültülüyor. */
.hizli-form__captcha { margin: 2px 0 2px; }
@media (max-width: 360px) {
  .hizli-form__captcha { transform: scale(.85); transform-origin: left top; height: 66px; }
}
.hizli-form__yanit { margin: 0; font-size: 13.5px; min-height: 1em; color: rgba(255,255,255,.8); }
.hizli-form__yanit--ok    { color: #9fe0b0; }
.hizli-form__yanit--hata  { color: #ffb4b4; }

@media (max-width: 1024px) {
  .bordo-bant__form { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 32px 24px; }
}
@media (max-width: 560px) { .hizli-form__ikili { grid-template-columns: 1fr; } }

/* Uluslararası üyelik logoları (altbilgi) ------------------------------- */
.alt-bilgi__uyelikler { margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
/* Logolar ÇİPSİZ: doğrudan altbilginin üstünde duruyorlar.
   Önce üçü de beyaz birer levhanın içindeydi ve koyu zeminde üç ayrı yama gibi
   duruyorlardı — çünkü her logonun KENDİ gömülü zemini farklı (IAGG'ninki
   #303030, INIA'nınki beyaz, IAGG-ER'inki renkli fotoğraf). Düz zeminli iki
   dosya saydamlaştırıldı (plx/uyelik-logolari.py): IAGG'nin yazısı zaten açık
   renkli, INIA kurumun kendi saydam dosyasından tek tona çevrildi. IAGG-ER'in
   zemini fotoğraf olduğu için kendi afişi olarak kalıyor; yumuşak köşe onu
   kazara kalmış bir kutu değil, bilinçli bir rozet gibi gösteriyor. */
/* Üçü satıra yayılır: ilk logo altbilgi kolonlarının sol kenarıyla, son logo
   sağ kenarıyla hizalı. Sola toplandığında sağ taraf boş kalıyordu. */
.alt-bilgi__logolar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 22px 40px; margin-top: 20px;
}
.alt-bilgi__logolar a {
  display: flex; align-items: center;
  opacity: .88; transition: opacity var(--gecis), transform var(--gecis);
}
.alt-bilgi__logolar a:hover { opacity: 1; transform: translateY(-2px); }
/* Ortak yükseklik: farklı oranlardaki üç logo aynı optik ağırlıkta dursun. */
.alt-bilgi__logolar img { height: 46px; width: auto; max-width: 100%; object-fit: contain; display: block; }
/* Renkli afiş kendi zeminini taşıdığı için köşeleri yumuşatılıyor. Ayrıca
   biraz daha uzun: kendi iç boşluğu olduğundan aynı kutu yüksekliğinde yazısı
   diğer ikisinden küçük kalıyordu. */
.alt-bilgi__logolar img[src*="iagg-er"] { height: 58px; border-radius: 6px; }
@media (max-width: 720px) {
  /* Telefonda üçü alt alta ve AYNI GENİŞLİKTE. Masaüstündeki gibi yükseklikle
     ölçeklenince (34px) genişlikleri 182–224px arasında değişiyor, sütun
     kırık duruyordu. Burada genişlik ortak, yükseklik her logonun kendi
     oranından geliyor — yükseklik sınırı KOYMUYORUZ, koyarsak geniş oranlı
     logo erken durup yine dar kalır. */
  /* Genişlik sınırı: sütun tam genişlikte olunca logolar altbilgiyi eziyordu
     (720px'e yaklaşınca 665px'e kadar çıkıyordu). 260px, eski görünüme yakın
     bir ölçü — aradaki fark artık üçünün de AYNI genişlikte olması. Sütun
     ortalanıyor. */
  .alt-bilgi__logolar {
    flex-direction: column; align-items: center; gap: 16px;
    max-width: 260px; margin-left: auto; margin-right: auto;
  }
  .alt-bilgi__logolar a { width: 100%; }
  .alt-bilgi__logolar img,
  .alt-bilgi__logolar img[src*="iagg-er"] { width: 100%; height: auto; max-height: none; }
}

/* Menü altı rozet şeridi ------------------------------------------------
   İnce, dikkat dağıtmayan bir sıra. Logoların saydamlığı olmadığı için
   (zeminleri dolu) beyaz çip içinde gösteriliyorlar. */
.rozet-serit { padding: 0 0 14px; }
.rozet-serit__ic { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rozet {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 6px;
  background: rgba(255,255,255,.94); border-radius: var(--r-pill);
  color: var(--murekkep); transition: background var(--gecis), transform var(--gecis);
}
.rozet:hover { background: #fff; color: var(--murekkep); transform: translateY(-1px); }
.rozet img { height: 28px; width: auto; display: block; }   /* logo, avatar değil — yuvarlatma yok */
.rozet__ad {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bordo); white-space: nowrap;
}
@media (max-width: 720px) {
  .rozet-serit { padding-bottom: 10px; }
  .rozet { padding: 4px 12px 4px 5px; }
  .rozet img { height: 22px; }
  .rozet__ad { font-size: 9px; letter-spacing: .1em; }
}

/* Işık kutusu — içerik görsellerinin büyük hâli (geriatri.js kurar) -------- */
.isik-kutusu-hedef { cursor: zoom-in; }
.isik-kutusu {
  position: fixed; inset: 0; z-index: 90;
  display: none; align-items: center; justify-content: center;
  background: rgba(20, 12, 10, .88); padding: 40px;
}
.isik-kutusu.acik { display: flex; }
.isik-kutusu > img {
  max-width: min(92vw, 1200px); max-height: 86vh;
  width: auto; height: auto; border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default;
}
.isik-kutusu__kapat,
.isik-kutusu__ok {
  position: absolute; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--gecis);
}
.isik-kutusu__kapat:hover,
.isik-kutusu__ok:hover { background: rgba(255,255,255,.3); }
.isik-kutusu__kapat { top: 18px; right: 18px; }
.isik-kutusu__ok--sol { left: 18px; top: 50%; transform: translateY(-50%); }
.isik-kutusu__ok--sag { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 720px) {
  .isik-kutusu { padding: 12px; }
  .isik-kutusu > img { max-width: 96vw; max-height: 80vh; }
}

/* Eski şablon köprüsü ------------------------------------------------------
   Üyelik/galeri/etkinlik/tüm-haberler görünümleri çerçevenin özgün Bootstrap
   işaretlemesiyle geliyor ama Bootstrap CSS'i hiç yüklenmiyor — sınıflar çıplak
   kalıp sayfayı stilsiz bırakıyordu. Bu bölüm o sınıfları tasarımın diline
   çevirir; işaretleme ve JS (validationEngine, FullCalendar, reCAPTCHA)
   değişmediği için işleyiş aynı kalır. Kendi bileşen adlarımız Türkçe olduğu
   için çakışma yok. */

/* Yerleşim */
.container, .container-fluid {
  max-width: min(1100px, 100% - 40px); margin: 26px auto 40px;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r-panel); box-shadow: var(--golge);
  padding: 34px 38px 42px;
}
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
[class*="col-"] { grid-column: span 12; min-width: 0; }
@media (min-width: 768px) {
  .col-md-3 { grid-column: span 3; }
  .col-md-4 { grid-column: span 4; }
  .col-md-6 { grid-column: span 6; }
  .col-md-8 { grid-column: span 8; }
  .col-md-12 { grid-column: span 12; }
}

/* Kart */
.card {
  background: var(--krem); border: 1px solid var(--cizgi);
  border-radius: var(--r-kart); overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
}
.card-img-top { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card-body { padding: 16px 18px 18px; flex: 1; }
.card-body h5, .card-title { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; }
.card-text { font-size: 13.5px; color: var(--govde); margin: 0; }

/* Uyarı kutuları */
.alert { padding: 14px 18px; border-radius: var(--r-kart); margin: 14px 0; font-size: 14.5px; border: 1px solid; }
.alert-success { background: #EFF5EC; border-color: #C6D9BD; color: #3F5A33; }
.alert-warning { background: #FBF3E2; border-color: #E8D5A8; color: #7A5B1D; }
.alert-danger  { background: #FBEAEA; border-color: #EBC2C2; color: #7A2A2C; }
.alert-info    { background: var(--krem); border-color: var(--cizgi); color: var(--govde); }

/* Form (bu görünümler .form sarmalı olmadan basıyor) */
.form-label {
  display: block; margin-bottom: 7px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--soluk); text-transform: uppercase;
}
.form-label.required::after { content: " *"; color: var(--kirmizi); }
.form-control {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 14.5px;
  color: var(--murekkep); background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: 12px;
}
textarea.form-control { min-height: 150px; resize: vertical; }
.form-control:focus { outline: 2px solid rgba(218,33,40,.28); outline-offset: 2px; border-color: var(--bordo); }
.input-group { display: flex; }
.input-group .form-control { flex: 1; border-radius: 12px 0 0 12px; }
.input-group .btn { border-radius: 0 12px 12px 0; }

/* Düğme çeşitleri (taban .btn bizde tanımlı) */
.btn-custom-1, .btn-primary { background: var(--bordo); color: #fff; }
.btn-custom-1:hover, .btn-primary:hover { background: #4A1019; color: #fff; }
.btn-outline-secondary { border-color: var(--cizgi); color: var(--govde); background: var(--kart); }
.btn-outline-secondary:hover { border-color: var(--bordo); color: var(--bordo); }

/* Parola göster/gizle simgesi — Bootstrap Icons yazı tipi yüklü değil */
.bi-eye::before { content: "👁"; font-style: normal; }
.bi-eye-slash::before { content: "🙈"; font-style: normal; }

/* Sayfalama (tüm-haberler/galeri) */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 26px 0 0; justify-content: center; }
.page-link {
  display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
  padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--cizgi);
  background: var(--kart); color: var(--murekkep); font-size: 13.5px;
}
.page-item.active .page-link, .page-link:hover { background: var(--bordo); border-color: var(--bordo); color: #fff; }

/* İçerik haritası (breadcrumb) */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; font-size: 12.5px; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; margin-right: 6px; color: var(--soluk); }
.breadcrumb-item, .breadcrumb-item a { color: var(--soluk); }
.breadcrumb-item.active { color: var(--murekkep); font-weight: 600; }

/* Yardımcılar */
.d-flex { display: flex; } .flex-column { flex-direction: column; }
.align-items-center { align-items: center; } .justify-content-center { justify-content: center; }
.text-center { text-align: center; } .d-grid { display: grid; } .gap-2 { gap: 10px; }
.w-100 { width: 100%; } .img-fluid { max-width: 100%; height: auto; }
.mb-2 { margin-bottom: 10px; } .mb-3 { margin-bottom: 16px; } .mb-5 { margin-bottom: 40px; }
.mt-2 { margin-top: 10px; } .mt-3 { margin-top: 16px; } .my-2 { margin: 10px 0; } .my-4 { margin: 24px 0; }
.py-2 { padding-top: 10px; padding-bottom: 10px; } .py-3 { padding-top: 16px; padding-bottom: 16px; }
.p-0 { padding: 0; } .m-0 { margin: 0; }
.font-roboto-bold { font-weight: 700; }
.event-detail-sub-title { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--soluk); text-transform: uppercase; }

/* İç içe container çift kart oluşturuyordu; içtekiler düz bloğa döner. */
.container .container, .container .container-fluid,
.container-fluid .container, .container-fluid .container-fluid {
  max-width: none; margin: 0; padding: 0;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
/* Başlık bandı zaten iz yolu gösteriyor (main.php .iz-yolu); eski görünümlerin
   kendi breadcrumb'ı aynı bilgiyi yineliyordu — gizli. */
nav[aria-label="breadcrumb"] { display: none; }

/* .row ızgarasında col- sınıfı olmayan çocuklar (uyarı kutusu, breadcrumb)
   tek sütuna düşüyordu; tam satır kaplasınlar. */
.row > :not([class*="col-"]) { grid-column: 1 / -1; }
.alert { width: 100%; }

/* Kurul şeması (Yönetim Kurulu, Kurucular) ------------------------------
   Kart ızgarası yerine canlı sitedeki şematik düzen: ortalanmış sütunlar,
   dairesel fotoğraf, üstte görev altta ad. Bölümler <h3> ile ayrılır. */
.uyeler {
  display: grid; gap: 30px 22px; margin: 20px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  justify-items: center;
}
.uye { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 200px; }
/* Dikey kart. Daire denendi ama bu fotoğraflara uymuyor: hepsi klasik
   vesikalık, kenarlarında stüdyo zemini ve omuz var; yuvarlak maske onları
   kesiyor ve her kare farklı görünüyordu. Kaynakların oranı zaten 3:4 —
   fotoğrafı çekildiği biçimde göstermek en doğrusu. */
.uye__foto {
  /* display:block şart: .uye__foto bir <span>. Esnek kutu içinde blok gibi
     ölçülüyor ama içindeki görsel satır kutusuna oturuyordu; satır yüksekliği
     kadar (14px) bir boşluk üstte kalıp kart zemini görünüyor, görsel de o
     kadar aşağı taşıyordu. */
  display: block; line-height: 0;
  width: 172px; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
  /* Görseller sıcak tek tona indirildiği için kart zemini de o tonun açık
     ucuyla aynı; yükleme bitene kadar boşluk göze çarpmıyor. */
  background: #efe7dc;
  /* Çerçeve yok: vesikalıkların çoğunda baskıdan gelen açık bir kenar zaten
     var, üstüne kart çerçevesi koyunca çift çizgi gibi duruyor. Kartı
     zeminden ayırmak için yalnızca yumuşak gölge. */
  box-shadow: 0 3px 12px rgba(42,33,27,.16);
}
/* Kadraj artık görselin kendisinde: portreler yüz konumuna göre kare kırpıldı
   (plx/portre-kirp.py, '-daire.jpg'). Bu yüzden üstten hizalamaya gerek yok;
   ortalamak, kırpılmamış eski bir görsel kalırsa da daha güvenli. */
.uye__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.uye__bilgi { display: flex; flex-direction: column; gap: 4px; margin-top: 13px; }
/* Görev etiketi (BAŞKAN, GENEL SEKRETER…) 10.5px mono ile çok siliktı;
   ada bakan göz onu atlıyordu. Büyütüldü ve kalınlaştırıldı. */
.uye__gorev {
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kirmizi);
}
.uye__ad { font-size: 14.5px; font-weight: 700; color: var(--murekkep); line-height: 1.35; }
.uye__uzmanlik { font-size: 12.5px; color: var(--govde); line-height: 1.45; }

/* Bölüm başlıkları grupların üstünde nefes alsın */
.makale__ic > h3 + .uyeler { margin-top: 14px; }

@media (max-width: 560px) {
  .uyeler { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 24px 14px; }
  .uye__foto { width: 132px; }
}

/* Rozet kutusundaki açıklama — canlı sitede logonun altında duran cümle.
   Tütünsüz kutusundaki cümleyle aynı boy ve renkte: ikisi bandın iki ucunda
   simetrik duruyor. */
.istatistik__rozet-not {
  /* max-width yok: cümle sütunun tamamını kullanıp iki satırda bitiyor.
     34ch sınırı onu dört satıra bölüyordu. */
  /* Üst boşluk yok: tütünsüz cümlesiyle aynı satırda başlıyor, 2px bile
     iki metni farklı hizada gösteriyordu. */
  margin: 0; max-width: none;
  font-size: 14px; line-height: 1.6; color: var(--govde); text-wrap: pretty;
}