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

:root {
  /* Palet kurumsal kimlik kılavuzundan (v1.0, 2026):
     kırmızı #B00408 (kalp/atardamar), lacivert #02265E (başlık/metin),
     mavi #00468E (ikincil), pembe #EAA2A0 (yumuşak vurgu).
     Kılavuzdaki oran: beyaz %55, lacivert %22, kırmızı %15 — geniş
     alanlar lacivert ve beyaz, kırmızı eylem çağrısı ve vurgu için. */

  --logo-kirmizi: #B00408;   /* beyazda 7.37:1 */
  --logo-mavi:    #00468E;   /* beyazda 9.87:1 */
  --logo-pembe:   #EAA2A0;   /* yalnızca dekor */
  --logo-yesil:   var(--logo-kirmizi); /* eski adla yazılmış kurallar için */

  --marka:        #02265E;   /* lacivert: metin, bağlantı, şerit */
  --marka-koyu:   #011838;
  --marka-soft:   #EEF2F9;

  --ikincil:      #B00408;   /* kırmızı: düğme, vurgu */
  --ikincil-koyu: #8A0306;
  --ikincil-soft: #FCEFEE;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- alt ---------- */
.alt {
  background: var(--zemin-alt);
  border-block-start: 1px solid var(--cizgi);
  margin-block-start: 4rem;
}
.alt-ic {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  padding-block: 2.5rem;
}
.alt-baslik { font-weight: 600; margin: 0 0 0.5rem; }
.alt-metin { color: var(--metin-2); font-size: var(--olcek-2); margin: 0 0 0.25rem; }
.alt-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.alt-menu a { color: var(--metin-2); text-decoration: none; font-size: var(--olcek-2); }
.alt-menu a:hover { color: var(--marka); }

/* Yararlı linkler bloğu üçüncü sütun; dar ekranda alt alta düşüyor.
   Dış bağlantı işareti yalnızca görsel, ekran okuyucudan gizli. */
.alt-ic > nav { min-width: 12rem; }
.dis-isaret {
  font-size: 0.75em;
  margin-inline-start: 0.3em;
  opacity: 0.55;
}
.alt-telif {
  border-block-start: 1px solid var(--cizgi);
  padding-block: 1rem;
  color: var(--metin-3);
  font-size: var(--olcek-1);
}
.alt-telif p { margin: 0; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Görsel yüksekliği sınırlı: kaynak görseller 2800x1150 (2,4:1) ve tam
   genişlikte 500 pikselden yüksek çıkıyordu — altındaki metin bloğuyla
   birlikte ekranı dolduruyor, slider'ın kaydırılabilir olduğu
   anlaşılmıyordu.

   Şu anki görsellerde üst ve alt kısımlar kırpılıyor. Kalıcı çözüm
   görselleri bu orana (yaklaşık 4:1) yeniden hazırlamak; o zaman
   içlerindeki logo ve ikon şeritleri de tam görünür. */
.slayt-gorsel {
  max-height: 400px;
  overflow: hidden;
  display: flex;
}
.slayt-gorsel picture { display: block; width: 100%; }
.slayt-gorsel img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 700px) {
  /* Dar ekranda daha da alçak: görsel sayfayı kapatmasın */
  .slayt-gorsel, .slayt-gorsel img { max-height: 210px; height: 210px; }
}

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

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

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

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

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

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

.konu-kart { display: flex; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================
   Kalp Hastalıkları Derneği — marka katmanı
   Kılavuz: lacivert başlık/metin, kırmızı eylem çağrısı,
   EKG çizgisi görsel dilin imzası.
   ========================================================== */

h1, h2, h3 { color: var(--marka); font-weight: 700; letter-spacing: -0.005em; }

h1 em, h2 em, h3 em, .hero em {
  font-style: normal;
  font-weight: 700;
  font-size: 1em;
  color: var(--ikincil);
}

.dugme { background: var(--ikincil); }
.dugme:hover { background: var(--ikincil-koyu); }
:focus-visible { outline-color: var(--logo-mavi); }

/* Üst şerit lacivert, altında ince kırmızı çizgi */
.ust-serit { background: var(--marka); border-block-end: 3px solid var(--ikincil); }
.ust { background: #fff; box-shadow: 0 1px 0 var(--cizgi); position: sticky; top: 0; z-index: 50; }
.ust-serit { position: relative; }

/* Kahraman alanı: yumuşak lacivert zemin + EKG çizgisi */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(234,162,160,.35), transparent 60%),
    linear-gradient(180deg, var(--marka-soft), #fff);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 1.25rem;
  height: 60px;
  background: url("/assets/img/ekg.svg") repeat-x center / auto 60px;
  opacity: .5;
  pointer-events: none;
}

/* Altbilgi lacivert, ters (beyaz) logo */
.alt { background: var(--marka); color: #DCE3F0; border-block-start: 4px solid var(--ikincil); }
.alt a { color: #fff; }
.alt a:hover { color: var(--logo-pembe); }
.alt .alt-baslik { color: #fff; }
.alt .alt-metin, .alt .alt-telif { color: #C5CFE2; }
.alt-telif { border-block-start: 1px solid rgba(255,255,255,.12); }
.sosyal { display: flex; gap: .625rem; list-style: none; padding: 0; margin: .75rem 0 0; }
.sosyal a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.1); text-decoration: none;
}
.sosyal a:hover { background: var(--ikincil); color: #fff; }
.sosyal svg { width: 18px; height: 18px; fill: currentColor; }
.alt-logo { display: block; margin-block-end: 1rem; }

/* Bağış kutusu (IBAN) */
.bagis-kutu {
  background: var(--ikincil-soft);
  border: 1px solid #F2CFCD;
  border-radius: var(--yuvarlak);
  padding: 1.25rem 1.5rem;
}
.bagis-kutu code { font-size: 1.125rem; font-weight: 600; color: var(--marka); letter-spacing: .03em; }

.logo-yazi { display: block; max-width: 17rem; line-height: 1.15; color: var(--marka); font-size: .9375rem; }
.logo-yazi strong { display: block; color: var(--ikincil); font-size: 1.0625rem; }
.logo img { height: 56px; width: auto; }
.logo, .logo:hover { text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
.bulten + .alt, .alt { margin-block-start: 0; }
.hero { padding-block: 5rem 7rem; } .hero h2 { font-size: var(--olcek-7); line-height: 1.05; max-width: 18ch; margin: 0 0 1rem; }

/* ==========================================================
   Kırmızı ağırlıklı düzen (2026-10 geri bildirimi):
   lacivert yalnızca gövde metni ve küçük ayrıntılarda,
   geniş alanlar ve vurgu kırmızı.
   ========================================================== */
:root {
  --kirmizi:       #B00408;
  --kirmizi-koyu:  #8A0306;
  --kirmizi-derin: #6E0205;
}
a { color: var(--kirmizi); }
a:hover { color: var(--kirmizi-koyu); }
h1, h2 { color: var(--kirmizi); }
h3 { color: var(--metin); }
h1 em, h2 em, h3 em, .hero em { color: var(--marka); }

.ust-serit { background: var(--kirmizi); border-block-end: 0; }
.ust { box-shadow: 0 1px 0 var(--cizgi), 0 3px 0 -1px rgba(176,4,8,.15); }
.menu a { color: var(--metin); }
.menu a:hover, .menu a[aria-current] { color: var(--kirmizi); }

.hero {
  background:
    radial-gradient(1000px 420px at 90% -10%, rgba(176,4,8,.14), transparent 60%),
    linear-gradient(180deg, var(--ikincil-soft), #fff);
}
.hero::after { opacity: .7; }

.alt { background: var(--kirmizi-derin); color: #F6DCDB; border-block-start: 4px solid var(--kirmizi); }
.alt .alt-metin, .alt .alt-telif { color: #EBC4C2; }
.sosyal a:hover { background: #fff; color: var(--kirmizi); }
.alt a:hover { color: #FFD9D7; }

.atla { background: var(--kirmizi); }
.logo-yazi { color: var(--metin); }

/* ==========================================================
   Canlı siteye uyum (kalphastaliklari.com, GoDaddy sürümü):
   ortada logo + büyük harfli aralıklı menü, kırmızı #C94242
   düğmeler, açık pembe #FBF1F1 kartlar, ortalı altbilgi.
   ========================================================== */
:root {
  --kirmizi:       #C94242;   /* canlı sitenin düğme kırmızısı — beyazda 4.63:1 */
  --kirmizi-koyu:  #A83232;
  --kirmizi-derin: #B00408;   /* kurumsal kırmızı: vurgu ve EKG */
  --pembe-zemin:   #FBF1F1;
  --ikincil:       #C94242;
  --ikincil-koyu:  #A83232;
  --ikincil-soft:  #FBF1F1;
}

/* Üst: ortalı logo, altında menü */
.ust-serit { display: none; }
.ust.ust-ortali { position: sticky; top: 0; background: #fff; box-shadow: 0 1px 0 var(--cizgi); }
.ust-ortali .ust-ana {
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding-block: 1.25rem .5rem;
}
.ust-ortali .logo img { width: 85px; height: 85px; object-fit: contain; display: block; }
.ust-ortali .menu > ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .25rem 2rem; list-style: none; margin: 0; padding: 0;
}
.ust-ortali .menu > ul > li { position: relative; }
.ust-ortali .menu > ul > li > a,
.menu-ust {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .75rem 0;
  font: inherit; font-size: .875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  color: #1B1B1B; text-decoration: none;
  background: none; border: 0; cursor: pointer;
  border-block-end: 2px solid transparent;
}
.ust-ortali .menu > ul > li.aktif > a,
.ust-ortali .menu > ul > li.aktif > .menu-ust { border-block-end-color: var(--kirmizi); }
.ust-ortali .menu > ul > li > a:hover, .menu-ust:hover { color: var(--kirmizi); }
.menu-ust .ok {
  width: 0; height: 0; border-inline: 5px solid transparent; border-block-start: 6px solid currentColor;
  transition: transform .15s ease;
}
.menu-ust[aria-expanded="true"] .ok { transform: rotate(180deg); }

.alt-liste {
  list-style: none; margin: 0; padding: .5rem 0;
  position: absolute; inset-inline-start: 50%; top: 100%; transform: translateX(-50%);
  min-width: 14rem; background: #fff; border-radius: 8px;
  box-shadow: 0 12px 32px rgba(20,20,20,.14); z-index: 60;
  display: none;
}
.menu-acilir:hover > .alt-liste,
.menu-acilir:focus-within > .alt-liste,
.menu-ust[aria-expanded="true"] + .alt-liste { display: block; }
.alt-liste a {
  display: block; padding: .55rem 1.25rem; color: #1B1B1B; text-decoration: none; white-space: nowrap;
}
.alt-liste a:hover, .alt-liste a[aria-current] { color: var(--kirmizi); background: var(--pembe-zemin); }

@media (max-width: 900px) {
  .ust-ortali .ust-ana { flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
  .ust-ortali .logo img { width: 60px; height: 60px; }
  .ust-ortali .menu > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .ust-ortali .menu > ul > li > a, .menu-ust { width: 100%; justify-content: space-between; padding: .9rem 1.25rem; border: 0; }
  .alt-liste { position: static; transform: none; box-shadow: none; display: block; padding: 0 0 .5rem 1.25rem; }
}

/* Tipografi ve renkler */
h1, h2 { color: var(--kirmizi); }
.dugme {
  background: var(--kirmizi); border-radius: 4px;
  text-transform: uppercase; letter-spacing: .14em; font-size: .8125rem; font-weight: 700;
  padding: .9rem 1.75rem;
}
.dugme:hover { background: var(--kirmizi-koyu); }
a { color: var(--kirmizi); }

/* Kahraman: büyük görsel + metin kutusu */
.hero {
  background: var(--pembe-zemin);
}
.hero::after { background-image: url("/assets/img/ekg.svg"); opacity: .55; }

/* Altbilgi: beyaz, ortalı, büyük harfli küçük metin */
.alt {
  background: #fff; color: #5E5E5E;
  border-block-start: 1px solid var(--cizgi);
  margin-block-start: 0;
}
.alt-ortali { text-align: center; padding-block: 3rem 2.5rem; display: grid; justify-items: center; gap: 1rem; }
.alt-logo { width: 56px; height: 56px; }
.alt .sosyal { margin: 0; justify-content: center; }
.alt .sosyal a { background: var(--pembe-zemin); color: var(--kirmizi); }
.alt .sosyal a:hover { background: var(--kirmizi); color: #fff; }
.alt a { color: var(--kirmizi); }
.alt a:hover { color: var(--kirmizi-koyu); }
.alt-iletisim { margin: 0; font-size: .9375rem; }
.alt-telif, .alt-uyari {
  margin: 0; max-width: 70rem;
  text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; line-height: 1.7;
  color: #5E5E5E; border: 0;
}
.alt-telif { font-weight: 700; color: #1B1B1B; }
.alt .alt-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; list-style: none; padding: 0; margin: 0; }

/* Bülten şeridi */
.bulten { background: var(--pembe-zemin); }

/* PDF görüntüleyici */
.pdf-kutu { margin-block: 2rem; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; }
.pdf-kutu > summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; color: var(--kirmizi); }
.pdf-gorunum { display: block; width: 100%; height: 80vh; border: 0; border-block-start: 1px solid var(--cizgi); }
.pdf-indir { margin-block: 1rem 2rem; }
.alt .alt-telif { color: #1B1B1B; } .alt .alt-uyari { color: #5E5E5E; }

/* Açılır menüler varsayılan kapalı (çekirdekteki .menu ul kuralını ez) */
.ust-ortali .menu .alt-liste { display: none; }
.ust-ortali .menu-acilir:hover > .alt-liste,
.ust-ortali .menu-acilir:focus-within > .alt-liste,
.ust-ortali .menu-ust[aria-expanded="true"] + .alt-liste { display: block; }
.ust-ortali .alt-liste li { display: block; }

/* Dil seçici sağ üst köşede */
.ust-ortali .ust-ana { position: relative; }
.ust-ortali .dil { position: absolute; inset-inline-end: 1.25rem; top: 1.25rem; }
.dil-dugme { background: #fff; border: 1px solid var(--cizgi); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }

/* Kapak: solda görsel, sağda pembe zeminli metin kutusu (canlı sitedeki gibi) */
.slayt-metin { background: var(--pembe-zemin); color: #1B1B1B; }
.slayt-metin h2 { color: #1B1B1B; }
.slayt-metin p { color: #3D3D3D; }
.slayt-metin .dugme { background: var(--kirmizi); color: #fff; }
.slayt-metin .dugme:hover { background: var(--kirmizi-koyu); color: #fff; }
@media (min-width: 900px) {
  .slayt { display: grid !important; grid-template-columns: 62% 38%; align-items: stretch; }
  .slayt-gorsel { height: 100%; }
  .slayt-gorsel img { height: 100%; width: 100%; object-fit: cover; }
  .slayt-metin { padding: 2.5rem; text-align: center; }
  .slayt-metin h2 { font-size: var(--olcek-6); line-height: 1.1; }
}

/* Tanıtım blokları: görsel yoksa ortalı (Neden Varız?, Bilgi Merkezi) */
.tanitim-ic:not(:has(img)) { display: block; text-align: center; }
.tanitim-ic:not(:has(img)) .tanitim-metin { max-width: 46rem; margin-inline: auto; }
.tanitim-ic:not(:has(img)) .tanitim-metin p { font-size: var(--olcek-4); color: #5E5E5E; margin-inline: auto; }
.tanitim + .tanitim { background: var(--pembe-zemin); }
.slider-noktalar { background: transparent; }
.slider:has(.slayt:only-child) .slider-noktalar { display: none; }
.tanitim-ic:not(:has(img)) h2 { margin-inline: auto; max-width: none; }

/* SSS akordeonu (Bilgi Merkezi) */
.sss { border-block-end: 1px solid var(--cizgi); max-width: 46rem; margin-inline: auto; }
.sss > summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-size: 1.125rem; letter-spacing: .02em; color: #1B1B1B;
}
.sss > summary::-webkit-details-marker { display: none; }
.sss > summary::after {
  content: ""; position: absolute; inset-inline-end: .25rem; top: 1.6rem;
  border-inline: 5px solid transparent; border-block-start: 6px solid var(--kirmizi);
  transition: transform .15s ease;
}
.sss[open] > summary::after { transform: rotate(180deg); }
.sss > summary:hover { color: var(--kirmizi); }
.sss-cevap { padding-block-end: 1.25rem; color: #3D3D3D; }

/* Kart ızgarası (Bilgi Merkezi kategorileri) */
.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.5rem; margin-block: 3rem; }
.kart {
  background: var(--pembe-zemin); border-radius: 6px; padding: 1.75rem 1.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.kart img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.kart h3 { margin: 0; font-weight: 500; letter-spacing: .04em; color: #1B1B1B; }
.kart p { margin: 0; color: #5E5E5E; font-size: .9375rem; }
.kart p:last-child { margin-block-start: auto; padding-block-start: .5rem; }
.kart .dugme, .eylem .dugme, a.dugme, a.dugme:hover { color: #fff; text-decoration: none; }

/* ==========================================================
   Modernleştirme katmanı (2026-10): düzen aynı; daha yumuşak
   köşeler, katmanlı gölgeler, ferah boşluklar, hafif hareket.
   ========================================================== */
:root {
  --golge-1: 0 1px 2px rgba(27,27,27,.06), 0 2px 8px rgba(27,27,27,.05);
  --golge-2: 0 4px 12px rgba(27,27,27,.06), 0 16px 40px rgba(27,27,27,.08);
  --yuvarlak-b: 16px;
  --koyu: #1B1B1B;
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Üst: yarı saydam, kaydırınca ince gölge */
.ust.ust-ortali { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); }
.alt-liste { border-radius: 12px; padding: .5rem; box-shadow: var(--golge-2); border: 1px solid var(--cizgi); }
.alt-liste a { border-radius: 8px; }

/* Düğmeler: biraz daha yuvarlak, kalkışlı */
.dugme { border-radius: 999px; padding: .95rem 1.9rem; box-shadow: 0 6px 18px rgba(201,66,66,.25); }
.dugme:hover { box-shadow: 0 10px 24px rgba(201,66,66,.32); }
.dugme-cizgi { background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.55); box-shadow: none; }
.dugme-cizgi:hover { background: rgba(255,255,255,.1); border-color: #fff; box-shadow: none; }

/* Kapak: köşeleri yumuşatılmış kart gibi */
@media (min-width: 900px) {
  .slider { max-width: var(--kenar); margin: 1.5rem auto 0; padding-inline: 1.25rem; }
  .slider-ray, .slayt { border-radius: var(--yuvarlak-b); overflow: hidden; }
  .slayt { box-shadow: var(--golge-2); }
  .slayt-metin { text-align: start; padding: 3rem; }
  .slayt-metin h2 { font-size: clamp(2.25rem, 3.4vw, 3.25rem); letter-spacing: -.01em; }
}

/* Etiket (bölüm üst yazısı) */
.etiket-ust {
  display: inline-block; text-transform: uppercase; letter-spacing: .16em;
  font-size: .75rem; font-weight: 700; color: var(--kirmizi); margin: 0 0 .75rem;
}

/* ── Kitle kartları ─────────────────────────────── */
.kitle { padding-block: 2.5rem 1rem; }
.kitle-izgara { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.kitle-kart {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.75rem; border-radius: var(--yuvarlak-b);
  background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--golge-1);
  color: var(--koyu); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kitle-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-2); border-color: transparent; color: var(--koyu); }
.kitle-kart strong { font-size: 1.375rem; line-height: 1.2; }
.kitle-metin { color: #5E5E5E; font-size: .9688rem; }
.kitle-etiket { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: var(--kirmizi); }
.kitle-ikon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: var(--pembe-zemin); color: var(--kirmizi); margin-block-end: .5rem;
}
.kitle-ikon svg, .kitle-git svg, .acil-ikon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kitle-git { margin-block-start: auto; padding-block-start: .75rem; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--kirmizi); }
.kitle-git svg { width: 18px; height: 18px; transition: transform .2s ease; }
.kitle-kart:hover .kitle-git svg { transform: translateX(4px); }
/* Hasta kartı öne çıkıyor: sitenin asıl ziyaretçisi */
.kitle-hasta { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.kitle-hasta:hover { color: #fff; }
.kitle-hasta .kitle-metin { color: rgba(255,255,255,.88); }
.kitle-hasta .kitle-etiket, .kitle-hasta .kitle-git { color: #fff; }
.kitle-hasta .kitle-ikon { background: rgba(255,255,255,.16); color: #fff; }
.kitle-hasta .kitle-kart strong { color: #fff; }

/* ── Acil uyarı şeridi ──────────────────────────── */
.acil-serit { padding-block: 1rem; }
.acil-ic {
  display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
  background: #FFF6F5; border: 1px solid #F3D2D0; border-radius: var(--yuvarlak-b);
  padding: 1.25rem 1.5rem;
}
.acil-ikon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--kirmizi); color: #fff; }
.acil-metin { flex: 1 1 22rem; display: grid; gap: .15rem; }
.acil-metin strong { color: var(--koyu); font-size: 1.0625rem; }
.acil-metin span { color: #5E5E5E; }
.acil-tel {
  font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; color: #fff !important; text-decoration: none;
  background: var(--kirmizi-derin); padding: .4rem 1.25rem; border-radius: 999px;
}
.acil-bag { font-weight: 600; }

/* ── Rakamlar ──────────────────────────────────── */
.rakamlar { padding-block: 3.5rem; }
.rakam-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin: 0; }
.rakam {
  display: flex; flex-direction: column-reverse; gap: .25rem; padding: 1.5rem;
  border-radius: var(--yuvarlak-b); background: var(--pembe-zemin); text-align: center;
}
.rakam dd { margin: 0; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; line-height: 1; color: var(--kirmizi); font-variant-numeric: tabular-nums; }
.rakam dt { color: #5E5E5E; font-size: .9375rem; }

/* ── Kurumsal iş birliği ───────────────────────── */
.kurumsal { padding-block: clamp(3.5rem, 8vw, 6rem); background: linear-gradient(135deg, #1E1E22 0%, #2A1416 100%); color: #fff; position: relative; overflow: hidden; }
.kurumsal::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 2rem; height: 60px;
  background: url("/assets/img/ekg.svg") repeat-x center / auto 60px; opacity: .18; pointer-events: none;
}
.kurumsal-ic { display: grid; gap: 3rem; grid-template-columns: 1fr; position: relative; }
@media (min-width: 960px) { .kurumsal-ic { grid-template-columns: 1.05fr 1fr; align-items: center; } }
.kurumsal h2 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.12; margin: 0 0 1rem; }
.kurumsal .etiket-ust { color: #F0A3A0; }
.kurumsal-giris { color: rgba(255,255,255,.8); font-size: 1.125rem; max-width: 36rem; }
.kurumsal-islem { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.75rem; }
.kurumsal-alanlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.kurumsal-alanlar li {
  display: grid; gap: .35rem; padding: 1.25rem 1.35rem; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: background .2s ease, border-color .2s ease;
}
.kurumsal-alanlar li:hover { background: rgba(255,255,255,.08); border-color: rgba(240,163,160,.4); }
.kurumsal-alanlar strong { color: #fff; font-size: 1.0625rem; }
.kurumsal-alanlar strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kirmizi); margin-inline-end: .6rem; vertical-align: middle; }
.kurumsal-alanlar span { color: rgba(255,255,255,.7); font-size: .9375rem; }

/* Diğer kartların yumuşatılması */
.kart, .yan-iletisim, .yaklasan-ic, .pdf-kutu { border-radius: var(--yuvarlak-b); }
.kart { box-shadow: var(--golge-1); transition: transform .2s ease, box-shadow .2s ease; }
.kart:hover { transform: translateY(-3px); box-shadow: var(--golge-2); }
.sss > summary { transition: color .15s ease; }
.bulten input[type="email"] { border-radius: 999px; padding-inline: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
.slider, .slider-ray { background: transparent !important; }
.yaklasan-etkinlik { background: transparent; border: 0; padding-block: 1.5rem; }
.yaklasan-ic { background: var(--pembe-zemin); padding: 2rem; box-shadow: var(--golge-1); }
@media (max-width: 600px) { .rakam-izgara { grid-template-columns: 1fr 1fr; } .rakam { padding: 1.1rem .75rem; } }

/* Duyuru şeridi (panel → Ayarlar): sayfanın en üstünde tek satır */
.duyuru-serit { background: var(--kirmizi); color: #fff; text-align: center; font-size: .95rem; padding: .5rem 0; }
.duyuru-serit a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.duyuru-serit a:hover, .duyuru-serit a:focus-visible { text-decoration-thickness: 2px; }