/* ==========================================================================
   YEÇED — Tasarım Sistemi
   Marka: kurumsal yeşil, sıcak nötr zeminler, yüksek kontrast
   Erişilebilirlik: WCAG AA kontrast, görünür odak, hareket azaltma
   Kırılımlar: ≥1200 masaüstü · 992–1199 küçük masaüstü · 768–991 tablet · <768 mobil
   ========================================================================== */

/* ── 1. Değişkenler ───────────────────────────────────────────────────── */
:root {
  /* Renk */
  --brand:        #0e7a45;
  --brand-600:    #0c6a3c;
  --brand-700:    #0a5732;
  --brand-900:    #063d23;
  --brand-50:     #eaf5ef;
  --brand-100:    #d3ebde;
  --accent:       #f0a02c;
  --accent-600:   #d78a1c;

  --ink:          #16221d;
  --ink-2:        #3d4d46;
  --ink-3:        #66756e;
  --line:         #e2eae5;
  --line-2:       #cfdbd4;
  --bg:           #ffffff;
  --bg-alt:       #f5f9f7;
  --bg-warm:      #fbfaf7;

  --danger:       #b3261e;
  --danger-bg:    #fdecea;
  --ok:           #0a5732;

  /* Tipografi */
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Taban boyut panelden yönetilir; diğer kademeler ONDAN TÜRETİLİR.
     Sabit bırakılsalardı taban büyütüldüğünde sitenin çoğu aynı kalır ve
     tipografi orantısız görünürdü. */
  --fs-base: 1rem;
  --fs-xs:   calc(var(--fs-base) * .8125);
  --fs-sm:   calc(var(--fs-base) * .9);
  --fs-lg:   calc(var(--fs-base) * 1.0625);
  /* Başlıklar da taban boyutu izler: clamp'in sabit kısımları --fs-base ile
     çarpılır, akışkan (vw) kısmı ekran genişliğine bağlı kalır. */
  --fs-h3:   clamp(calc(var(--fs-base) * 1.05), calc(var(--fs-base) * .95 + .4vw), calc(var(--fs-base) * 1.25));
  --fs-h2:   clamp(calc(var(--fs-base) * 1.5),  calc(var(--fs-base) * 1.2 + 1.2vw), calc(var(--fs-base) * 2.15));
  --fs-h1:   clamp(calc(var(--fs-base) * 1.9),  calc(var(--fs-base) * 1.4 + 2.4vw), calc(var(--fs-base) * 3.25));

  /* Ölçü */
  --wrap: 1240px;
  --gap: 1.5rem;
  /* Köşe yuvarlaklığı panelden yönetilir; küçük ve büyük kademeler türetilir,
     yoksa --radius 0 yapıldığında butonlar ve kutular yuvarlak kalırdı. */
  --radius: 14px;
  --radius-sm: calc(var(--radius) * .715);
  --radius-lg: calc(var(--radius) * 1.57);
  --shadow-sm: 0 1px 3px rgba(22,34,29,.07), 0 1px 2px rgba(22,34,29,.04);
  --shadow:    0 6px 20px rgba(22,34,29,.09);
  --shadow-lg: 0 18px 45px rgba(22,34,29,.16);
  --header-h: 76px;
  --adminbar-h: 32px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ── 2. Temel ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh, 1.65);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

/* Başlık yazı tipi ve kalınlığı panelden yönetilir; tanımlı değilse gövdeninki */
h1, h2, h3, h4 {
  font-family: var(--font-head, var(--font));
  line-height: 1.2; margin: 0 0 .6rem;
  font-weight: var(--head-weight, 750); letter-spacing: -.015em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand); }

ul, ol { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }

/* Erişilebilirlik */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-700); color: #fff; padding: .7rem 1.2rem;
  border-radius: 0 0 10px 0; font-weight: 600;
}
/* Yalnızca KLAVYE odağında görünür.
   Üç kural bir arada bilinçli bir aşamalı geliştirmedir:
     1) :focus            → :focus-visible desteklemeyen eski tarayıcılarda
                            bağlantı yine de görünür (erişilebilirlik kaybı yok)
     2) :focus:not(:focus-visible) → modern tarayıcıda fare/dokunma odağında
                            tekrar gizler. "Yukarı çık" düğmesine tıklandığında
                            odak buraya taşınıyor ve kutu sol üstte beliriyordu.
     3) :focus-visible    → klavye (Tab, Enter) odağında göster */
.skip-link:focus { left: 0; color: #fff; }
.skip-link:focus:not(:focus-visible) { left: -9999px; }
.skip-link:focus-visible { left: 0; color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── 3. Butonlar ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 650; font-size: var(--fs-sm); line-height: 1.3;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

.btn-lg { padding: .85rem 1.9rem; font-size: var(--fs-lg); }
.btn-sm { padding: .38rem 1rem; font-size: var(--fs-xs); }
.btn-block { display: flex; width: 100%; }

/* Marka zeminli düğmelerde yazı rengi SABİT BEYAZ OLAMAZ: açık bir marka
   rengi seçildiğinde etiket okunmaz olur. --on-brand, marka rengine göre
   beyaz ya da koyu seçilir (Theme::guard). */
.btn-primary { background: var(--brand); color: var(--on-brand, #fff); box-shadow: 0 4px 14px rgba(14,122,69,.25); }
.btn-primary:hover { background: var(--brand-600); color: var(--on-brand-600, #fff); box-shadow: 0 6px 18px rgba(14,122,69,.32); }

.btn-outline { border-color: var(--line-2); color: var(--brand-700); background: #fff; }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); }

.btn-ghost { color: var(--brand-700); background: transparent; }
.btn-ghost:hover { background: var(--brand-50); }

.btn-light { background: #fff; color: var(--brand-700); }
.btn-light:hover { background: var(--brand-50); color: var(--brand-700); }

.btn-outline-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

.btn-donate svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.link-more {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 650; font-size: var(--fs-sm); text-decoration: none;
  color: var(--kicker-ink, var(--brand-600));
}
.link-more::after { content: "→"; transition: transform .18s var(--ease); }
.link-more:hover::after { transform: translateX(3px); }

.kicker {
  margin: 0 0 .35rem; font-size: var(--fs-xs); font-weight: 750;
  letter-spacing: .09em; text-transform: uppercase;
  /* --kicker-ink, marka renginin açık zeminde okunur hâle getirilmiş
     karşılığıdır (Theme::guard). Doğrudan --brand kullanılırsa, açık bir
     marka rengi seçildiğinde bu satır okunamaz olur. */
  color: var(--kicker-ink, var(--brand));
}
.kicker.light { color: var(--brand-100); }

/* ── 4. Üst şerit ─────────────────────────────────────────────────────── */
/* Renkler panelden yönetilir; ayar yoksa marka renklerine düşer */
.topbar { background: var(--topbar-bg, var(--brand-900)); color: var(--topbar-ink, #cfe3d8); font-size: var(--fs-xs); }
.topbar a { color: var(--topbar-ink, #cfe3d8); text-decoration: none; }
/* Sabit beyaz yazılamaz: üst şerit açık bir renge çekildiğinde beyaz kaybolur */
.topbar a:hover { color: var(--topbar-hover, #fff); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; flex-wrap: wrap; }
.topbar-left { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.tb-item { display: inline-flex; align-items: center; gap: .4rem; }
.tb-item svg { width: 14px; height: 14px; fill: currentColor; opacity: .8; }

/* ── Üst şerit: cihaz bazlı görünürlük ────────────────────────────────────
   Her öğe panelden masaüstü ve mobil için AYRI açılıp kapanır. İkisi de
   kapalıysa öğe zaten hiç basılmaz (bkz. head.php $tbCls).
   Kırılma noktası 767px; sınıf adları "yalnızca büyük / yalnızca küçük". */
/* ul.tb-only-sm ŞART: .tb-social { display:flex } bu kuraldan SONRA tanımlı
   olduğu için tek sınıflı bir seçici onu ezemiyor ve "yalnızca mobil" seçeneği
   masaüstünde de görünüyordu. .topbar.tb-only-sm ise mobil bloktaki
   display:block karşılığıyla simetri için burada duruyor. */
.tb-only-sm,
ul.tb-only-sm,
.topbar.tb-only-sm { display: none; }
@media (max-width: 767px) {
  .tb-only-lg { display: none !important; }
  .tb-only-sm { display: inline-flex; }
  ul.tb-only-sm { display: flex; }
  /* Şeridin kendisi blok kalmalı; inline-flex olursa tam genişlik zemin
     kaybolur ve .container içerik genişliğine büzülür. */
  .topbar.tb-only-sm { display: block; }
}

/* ── Üst şerit: yapışkan ──────────────────────────────────────────────────
   Açıkken şerit en üstte kalır ve site başlığı ONUN ALTINA yapışır.
   Yükseklik main.js ile ölçülür: şerit dar ekranda satır kaydırabildiği için
   sabit bir değer başlığı yanlış yere koyardı. */
.topbar.is-sticky {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 101;
}
/* Yedek 0px DEĞİL 38px: JS çalışmazsa iki yapışkan katman aynı noktaya
   oturur ve şerit (z-index 101) başlığın üstünü örterek logoyu kırpar. */
.site-header.has-sticky-topbar { top: var(--topbar-h, 38px); }
.has-adminbar .topbar.is-sticky { top: var(--adminbar-h, 34px); }
/* Şerit geniş ekranda kapatıldığında başlığa düşen yedek dil anahtarı.
   Dar ekranda çekmecedeki .drawer-lang zaten var, bu yüzden gizlenir. */
.header-cta .lang-fallback { display: none; }
@media (min-width: 992px) { .header-cta .lang-fallback { display: flex; } }
/* Beyaz başlık zemininde: şeritteki açık renk hover'ı ve genel bağlantı
   alt çizgisi burada görünmez/yabancı kalıyordu. */
.header-cta .lang-fallback a { color: var(--ink-2, #46505c); text-decoration: none; }
.header-cta .lang-fallback a:hover { background: rgba(0, 0, 0, .07); }
.header-cta .lang-fallback a.on { color: var(--brand-700, #0b5f4a); }
.has-adminbar .site-header.has-sticky-topbar {
  top: calc(var(--adminbar-h, 34px) + var(--topbar-h, 38px));
}
/* IBAN'ın kısa hâli yalnızca dar ekranda görünür. Bu kural mobil kırılımdan
   ÖNCE gelmelidir: sonra yazılsaydı aynı özgüllükte olduğu için medya
   sorgusunu ezer ve kısa hâl hiç görünmezdi. */
.tb-iban-short { display: none; }

/* "Kopyalandı" geri bildirimi: düğmenin kendi içeriği KORUNUR, üstüne geçici
   bir etiket biner. İçeriği textContent ile ezmek ikonu ve duyarlı IBAN
   yapısını kalıcı olarak siliyordu. */
.copy-flash { display: none; }
.is-copied { position: relative; }
.is-copied > *:not(.copy-flash) { visibility: hidden; }
.is-copied .copy-flash {
  position: absolute; inset: 0;
  display: grid; place-items: center; visibility: visible;
  font-weight: 700;
}
.topbar-right { display: flex; align-items: center; gap: 1rem; }

.tb-social { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.tb-social a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.tb-social svg { width: 15px; height: 15px; fill: currentColor; }
.tb-social a:hover { background: rgba(255,255,255,.14); }

.lang-switch { display: flex; gap: .2rem; }
/* min-height + inline-flex ŞART: satır içi <a> yüksekliği yazı tipi metriğine
   göre ~20 px kalıyordu ve WCAG 2.5.8'in 24 px dokunma hedefini geçmiyordu.
   Mobil çekmecedeki ikizi (.drawer-lang a) zaten dolgu sayesinde geçiyordu. */
.lang-switch a {
  display: inline-flex; align-items: center; min-height: 24px;
  padding: .2rem .55rem; border-radius: 999px; font-weight: 650; letter-spacing: .03em;
}
.lang-switch a:hover { background: rgba(255,255,255,.14); }
.lang-switch a.on { background: var(--brand); color: var(--on-brand, #fff); }

/* ── 5. Başlık + mega menü ────────────────────────────────────────────── */
/* Başlık masaüstü, tablet ve mobilde yapışkandır */
.site-header {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 100;
  background: var(--header-bg, #fff); border-bottom: 1px solid var(--line);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow); }
/* Yönetim çubuğu açıkken başlık tam onun altına yapışır.
   --adminbar-h değeri main.js tarafından gerçek yükseklikle güncellenir. */
.has-adminbar .site-header { top: var(--adminbar-h, 34px); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }

.brand { display: flex; align-items: center; flex: none; }
.brand img { width: auto; max-height: 52px; object-fit: contain; }

.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav-item { position: static; }

/* Menü tipografisi ve renkleri panelden yönetilir (Ayarlar → Görünüm) */
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .6rem .85rem; border: 0; background: none; border-radius: 10px;
  font: inherit;
  font-size: var(--nav-size, var(--fs-sm));   /* rem: tarayıcı yazı boyutu tercihine saygılı */
  font-weight: var(--nav-weight, 650);
  letter-spacing: var(--nav-spacing, 0);
  text-transform: var(--nav-upper, none);
  color: var(--nav-ink, var(--ink));
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav-link:hover, .nav-item.is-open > .nav-link { background: var(--brand-50); color: var(--nav-hover, var(--brand-700)); }

/* Bulunulan bölüm */
.nav-item.is-current > .nav-link { color: var(--nav-hover, var(--brand-700)); }
.nav-item.is-current > .nav-link::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .15rem;
  height: 2px; border-radius: 2px; background: var(--brand);
}
.nav-link .caret { width: 16px; height: 16px; fill: currentColor; opacity: .6; transition: transform .18s var(--ease); }
.nav-item.is-open .caret { transform: rotate(180deg); }

/* Mega panel */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 3px solid var(--brand);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 90;
}
.nav-item.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-in {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(230px, 270px);
  gap: 1.75rem 2.25rem; padding-block: 2rem 2.25rem;
  max-height: calc(100vh - var(--header-h) - var(--topbar-h, 0px) - 60px); overflow-y: auto;
}
.mega-col { min-width: 0; }
.mega-title {
  margin: 0 0 .75rem; font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--kicker-ink, var(--brand));
  padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
/* Yalnızca liste bağlantıları — buton stillerini ezmemesi için `ul` ile sınırlı */
.mega-col ul a {
  display: block; padding: .45rem .6rem; margin-inline: -.6rem; border-radius: 8px;
  font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); text-decoration: none;
  overflow-wrap: anywhere; hyphens: auto;   /* uzun başlıklar sütunu taşırmaz */
}
.mega-col ul a:hover { background: var(--brand-50); color: var(--brand-700); }
.mega-col ul a.is-strong {
  font-weight: 700; color: var(--brand-700);
  margin-top: .35rem; padding-top: .7rem; border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
}

.mega-promo {
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--radius); padding: 1.25rem;
  display: flex; flex-direction: column; gap: .55rem; align-self: start;
}
.mega-promo-kicker { margin: 0; font-size: var(--fs-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--kicker-ink, var(--brand)); }
.mega-promo-title { margin: 0 0 .5rem; font-weight: 700; line-height: 1.4; font-size: var(--fs-sm); color: var(--ink); }
/* Promo butonları: renkleri her koşulda korunur */
.mega-promo .btn-primary { color: var(--on-brand, #fff); background: var(--brand); }
.mega-promo .btn-primary:hover { color: var(--on-brand-600, #fff); background: var(--brand-600); }
.mega-promo .btn-outline { color: var(--brand-700); background: #fff; border-color: var(--line-2); }
.mega-promo .btn-outline:hover { color: var(--brand-700); background: #fff; border-color: var(--brand); }

.header-cta { display: flex; align-items: center; gap: .6rem; flex: none; }

/* Hamburger */
.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── 6. Mobil çekmece ─────────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(6,61,35,.45);
  z-index: 150; opacity: 0; transition: opacity .25s var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 88vw);
  background: #fff; z-index: 160; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s var(--ease);
  box-shadow: var(--shadow-lg);
}
/* Kapalıyken DOM dışı davranmalı: klavye ve ekran okuyucu erişmesin */
.drawer[hidden], .drawer-backdrop[hidden] { display: none !important; }
[dir="rtl"] .drawer { right: auto; left: 0; transform: translateX(-100%); }
.drawer.is-open { transform: translateX(0); }

.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.drawer-head img { max-height: 40px; width: auto; object-fit: contain; }
.drawer-close { width: 40px; height: 40px; font-size: 1.9rem; line-height: 1; background: none; border: 0; color: var(--ink-2); cursor: pointer; border-radius: 10px; }
.drawer-close:hover { background: var(--bg-alt); }

.drawer-nav { flex: 1; overflow-y: auto; padding: .5rem 0; -webkit-overflow-scrolling: touch; }
.drawer-nav > ul { list-style: none; margin: 0; padding: 0; }
.drawer-link {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .9rem 1.25rem; background: none; border: 0; border-bottom: 1px solid var(--line);
  font: inherit; font-size: var(--fs-base); font-weight: 650; color: var(--ink);
  text-decoration: none; text-align: start; cursor: pointer;
}
.drawer-link .caret { width: 20px; height: 20px; fill: var(--ink-3); transition: transform .2s var(--ease); }
.drawer-acc[aria-expanded="true"] { color: var(--brand-700); background: var(--brand-50); }
.drawer-acc[aria-expanded="true"] .caret { transform: rotate(180deg); }
.drawer-panel { display: none; padding: .5rem 1.25rem 1rem; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.drawer-group.is-open .drawer-panel { display: block; }
.drawer-subtitle { margin: .8rem 0 .3rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kicker-ink, var(--brand)); }
.drawer-panel ul { list-style: none; margin: 0; padding: 0; }
.drawer-panel a { display: block; padding: .5rem 0; font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; border-bottom: 1px dashed var(--line-2); }
.drawer-panel a:hover { color: var(--brand-700); }

.drawer-foot { padding: 1rem 1.25rem 1.5rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.drawer-lang { display: flex; gap: .5rem; justify-content: center; margin-top: .3rem; }
.drawer-lang a { padding: .35rem .9rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--fs-sm); text-decoration: none; color: var(--ink-2); }
.drawer-lang a.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }

/* ── 7. Kampanya slider ───────────────────────────────────────────────── */
/* Manşet görsellerinde metin gömülü olduğu için KIRPILMAZ:
   görsel doğal oranında, tam olarak gösterilir. */
.hero-slider { position: relative; background: var(--brand-900); overflow: hidden; }
/* min-height KALDIRILDI. Amacı görseller yüklenmeden düzenin çökmesini
   önlemekti, ama <img> etiketlerinde width/height nitelikleri var ve tarayıcı
   oradan en-boy oranını hesaplayıp yeri zaten ayırıyor. Buna karşılık geniş
   ve alçak manşetlerde (dar ekranda görsel ~98px oluyor) altta kalıcı bir
   yeşil şerit bırakıyordu. */
.hero-slider .slides { position: relative; }
.slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease), visibility .55s;
}
.slide.is-active { position: relative; opacity: 1; visibility: visible; }
.slide a { display: block; }
.slide img {
  width: 100%; height: auto; max-height: 74vh;
  object-fit: contain; object-position: center;
  background: var(--brand-900);
}

.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  background: rgba(255,255,255,.9); border: 0; border-radius: 50%;
  cursor: pointer; box-shadow: var(--shadow); z-index: 3;
  transition: background-color .18s var(--ease);
}
.slider-arrow:hover { background: #fff; }

/* ── Ok stilleri (panelden seçilir) ──────────────────────────────────────
   Varsayılan "circle" yukarıdaki kuraldır; diğerleri onu ezer. */
.arrows-square .slider-arrow { border-radius: 10px; }
.arrows-ghost .slider-arrow {
  background: rgba(0,0,0,.32); box-shadow: none; backdrop-filter: blur(4px);
}
.arrows-ghost .slider-arrow:hover { background: rgba(0,0,0,.5); }
.arrows-ghost .slider-arrow svg { stroke: #fff; }
/* "edge": oklar kenara yapışır, yarısı dışarıda kalır — görseli en az örter */
.arrows-edge .slider-arrow {
  border-radius: 0; box-shadow: none; width: 34px; height: 64px;
  background: rgba(6,61,35,.45); backdrop-filter: blur(3px);
}
.arrows-edge .slider-arrow:hover { background: rgba(6,61,35,.7); }
.arrows-edge .slider-arrow svg { stroke: #fff; }
.arrows-edge .slider-arrow.prev { left: 0; border-radius: 0 8px 8px 0; }
.arrows-edge .slider-arrow.next { right: 0; border-radius: 8px 0 0 8px; }

.no-arrows .slider-arrow { display: none; }
.slider-arrow svg { width: 24px; height: 24px; fill: none; stroke: var(--brand-700); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.slider-arrow.prev { left: clamp(.5rem, 2vw, 1.5rem); }
.slider-arrow.next { right: clamp(.5rem, 2vw, 1.5rem); }

.slider-controls {
  position: absolute; left: 50%; bottom: clamp(.6rem, 1.6vw, 1.25rem); transform: translateX(-50%);
  display: flex; align-items: center; gap: .75rem; z-index: 3;
  background: rgba(6,61,35,.55); backdrop-filter: blur(6px);
  padding: .4rem .7rem; border-radius: 999px;
}

/* ── Kontrol stilleri (panelden seçilir) ─────────────────────────────────
   overlay : varsayılan, görselin üzerinde yüzen kapsül (yukarıdaki kural)
   bar     : görselin altına yapışık tam genişlik şerit
   below   : görselin DIŞINDA, altında; görseli hiç örtmez
   minimal : kapsül yok, yalnızca noktalar (duraklat gizlenir) */
.ctrl-bar .slider-controls {
  left: 0; right: 0; bottom: 0; transform: none;
  width: 100%; justify-content: center; border-radius: 0;
  background: linear-gradient(to top, rgba(6,61,35,.72), rgba(6,61,35,0));
  padding: 1.4rem .7rem .55rem; backdrop-filter: none;
}
.ctrl-below { padding-bottom: 0; }
/* Kontrol şeridi akışa girdiği için bölümün yüksekliği artar; oklar
   "görselin" değil bölümün ortasına hizalanır. Ok konumu şerit kadar yukarı
   çekilerek görsel merkezde tutulur. */
.ctrl-below .slider-arrow { top: calc(50% - 24px); }
.ctrl-below .slider-controls {
  position: static; transform: none; width: 100%;
  justify-content: center; border-radius: 0;
  background: var(--bg-alt); backdrop-filter: none;
  padding: .6rem .7rem; border-top: 1px solid var(--line);
}
.ctrl-below .slider-dots button::before { background: var(--line-2); }
/* Hover kuralı açık zeminde noktayı beyaza çevirip kaybediyordu */
.ctrl-below .slider-dots button:hover::before { background: var(--ink-3); }
/* Etkin nokta hover'da da marka renginde kalmalı: bu kural hover'dan SONRA
   gelmezse eşit özgüllük yüzünden hover onu ezer. */
.ctrl-below .slider-dots button.is-active::before { background: var(--brand); }
.ctrl-below .slider-pause svg { fill: var(--ink-2); }
.ctrl-minimal .slider-controls { background: none; backdrop-filter: none; padding: .2rem; }
.ctrl-minimal .slider-pause { display: none; }
.ctrl-minimal .slider-dots button::before { box-shadow: 0 1px 3px rgb(0 0 0 / .5); }

.no-ctrl .slider-controls { display: none; }
/* Slider noktaları.
   Görsel nokta küçüktür ama DOKUNMA HEDEFİ değildir: düğmenin kendisi en az
   26×26 px'tir ve nokta ::before ile içine çizilir. Daha önce düğme 9×9 px idi
   ve Lighthouse "dokunma hedefleri yetersiz" uyarısı veriyordu — parmakla
   isabet ettirmek gerçekten zordu. WCAG 2.5.8 asgarisi 24×24 px'tir. */
.slider-dots { display: flex; gap: 2px; }
.slider-dots button {
  min-width: 26px; height: 26px; padding: 0 5px; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.slider-dots button::before {
  content: ""; display: block; width: 9px; height: 9px; border-radius: 999px;
  background: rgba(255,255,255,.5);
  transition: width .25s var(--ease), background-color .25s var(--ease);
}
.slider-dots button:hover::before { background: rgba(255,255,255,.8); }
.slider-dots button.is-active { min-width: 36px; }
.slider-dots button.is-active::before { width: 26px; background: #fff; }
.slider-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-radius: 6px; }
.slider-pause { width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; border-radius: 50%; }
.slider-pause svg { width: 15px; height: 15px; fill: #fff; }
.slider-pause .ic-play { display: none; }
.slider-pause[aria-pressed="true"] .ic-pause { display: none; }
.slider-pause[aria-pressed="true"] .ic-play { display: block; }

/* ── 8. Hızlı destek şeridi ───────────────────────────────────────────── */
.quick-strip { background: #fff; border-bottom: 1px solid var(--line); }
.quick-row {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .5rem; padding-block: 1.1rem;
}
.quick-item {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .85rem .4rem; border-radius: var(--radius-sm); text-decoration: none;
  color: var(--ink-2); text-align: center; transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.quick-item:hover { background: var(--brand-50); color: var(--brand-700); transform: translateY(-2px); }
.qi-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--brand-50); }
.quick-item:hover .qi-icon { background: #fff; }
.qi-icon img { width: 32px; height: 32px; object-fit: contain; }
.qi-label { font-size: var(--fs-xs); font-weight: 650; line-height: 1.3; }

/* ── Hızlı destek şeridi — otomatik kayma ────────────────────────────────
   Yalnızca "scroll" modunda ve panelden açıkken çalışır. Şerit iki kez
   basılmaz; kaydırma JS ile scrollLeft üzerinden yapılır (bkz. main.js).
   Bunun kopyalama/marquee hilesine tercih edilmesinin sebebi: ekran
   okuyucular bağlantıları iki kez okumasın ve dokunma her an araya
   girebilsin. */
/* scroll-snap KAPATILIR: otomatik kayma her karede scrollLeft yazıyor,
   yaslama ise onu en yakın öğeye geri çekiyordu — şerit titriyordu. */
.quick-strip[data-autoscroll="1"] .quick-row {
  scroll-behavior: auto; scroll-snap-type: none;
}

/* ── 9. Giriş bölümü ──────────────────────────────────────────────────── */
.intro { padding-block: clamp(2.5rem, 5vw, 4.5rem); background:
  radial-gradient(120% 90% at 0% 0%, var(--brand-50) 0%, transparent 60%), var(--bg); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.intro-text h1 { margin-bottom: 1rem; }
.intro-text .lead { font-size: var(--fs-lg); color: var(--ink-2); max-width: 36em; }

.trust-row { list-style: none; margin: 1.25rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.trust-row li { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.trust-row svg { width: 18px; height: 18px; fill: var(--brand); flex: none; }

.impact-card { background: var(--brand-700); color: #fff; border-radius: var(--radius-lg); padding: clamp(1.25rem, 2.5vw, 2rem); box-shadow: var(--shadow); }
.impact-card h2 { color: #fff; font-size: var(--fs-h3); margin-bottom: 1rem; }
.impact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.impact-list li { display: grid; gap: .1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.16); }
.impact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
/* tabular-nums: sayaç animasyonu sırasında rakam genişliği sabit kalır,
   böylece 0'dan hedefe sayarken kart içinde zıplama olmaz. */
.im-value {
  font-size: 2rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.im-label { font-weight: 650; font-size: var(--fs-sm); }
.im-src { font-size: .72rem; color: #b9d5c6; }
.im-note { margin: 1rem 0 0; font-size: .72rem; color: #b9d5c6; }

/* ── 10. Bölümler + ızgara ────────────────────────────────────────────── */
.section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section-alt { background: var(--bg-alt); }
.section-title { margin: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.25rem, 3vw, 2rem); }

/* ── Alt bölüm başlığı ────────────────────────────────────────────────────
   Detay sayfalarının altındaki ilgili içerik blokları ("Öne Çıkan
   Projelerimiz", "Diğer Haberler"). Ana bölüm başlıklarından iki farkı var:

   1) İNCE ÇİZGİ. Bunlar kendi arka planı olan bir <section> içinde değil,
      yazının aktığı sütunun devamındadır ve hemen üstlerinde bağış kutusu
      durur. Çizgi olmadan "yazının bir parçası" gibi görünüp bölüm olduğu
      anlaşılmıyordu.
   2) DAHA KÜÇÜK BAŞLIK. Sayfanın asıl H1'iyle aynı ağırlıkta olurlarsa
      okuyucuya "burada yeni bir konu başlıyor" der; oysa bunlar yardımcı
      içerik. Görsel hiyerarşi anlam hiyerarşisini izlemeli. */
.section-head.is-sub {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.section-head.is-sub .section-title { font-size: var(--fs-h3); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── 11. Kartlar ──────────────────────────────────────────────────────── */
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }

.card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-50); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.card:hover .card-media img { transform: scale(1.045); }
.media-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--brand-100), var(--brand-50));
}
.card-badge {
  position: absolute; inset-inline-start: .75rem; top: .75rem;
  background: rgba(255,255,255,.94); color: var(--brand-700);
  font-size: .72rem; font-weight: 750; padding: .2rem .65rem; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.25rem 1.25rem; flex: 1; }
.card-title { margin: 0; font-size: var(--fs-h3); line-height: 1.32; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--brand-600); }
.card-body p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.card-body .meta { color: var(--ink-3); font-size: var(--fs-xs); }
.card-actions { margin-top: auto; padding-top: .75rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }

.badge {
  display: inline-block; align-self: flex-start; margin: 0;
  background: var(--brand-50); color: var(--brand-700);
  font-size: .74rem; font-weight: 750; padding: .18rem .7rem; border-radius: 999px;
}
.meta { color: var(--ink-3); font-size: var(--fs-sm); }

/* ── 11b. Eylem kutuları ──────────────────────────────────────────────── */
.action-band {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 60%, var(--brand-900) 100%);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.action-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.action-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .85rem; padding: 1.6rem 1rem; text-align: center; text-decoration: none;
  color: var(--on-brand, #fff); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius);
  transition: background-color .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.action-tile:hover {
  background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.45);
  color: #fff; transform: translateY(-3px);
}
.at-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.12); }
.at-icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.at-label { font-weight: 700; font-size: var(--fs-sm); line-height: 1.35; }

/* Üst şeritte IBAN kopyalama */
.tb-copy {
  background: none; border: 0; color: inherit; font: inherit;
  padding: .12rem .5rem; margin-inline: -.5rem; border-radius: 6px; cursor: pointer;
  transition: background-color .15s var(--ease);
}
.tb-copy:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ── 12. Şeritler ─────────────────────────────────────────────────────── */
.transparency-strip {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%);
  color: #fff; padding-block: clamp(2rem, 4vw, 3.25rem);
}
.transparency-strip h2 { color: #fff; }
.transparency-strip p { color: #c8dfd3; max-width: 52ch; }
.transparency-in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

.volunteer-strip { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.volunteer-strip .lead { color: var(--ink-2); max-width: 54ch; }

.final-cta {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 55%, var(--brand-900) 100%);
  /* Gradyanın EN AÇIK ucu --brand'dir; okunabilirlik ona göre garanti edilir */
  color: var(--on-brand, #fff); padding-block: clamp(2.5rem, 5vw, 4rem); text-align: center;
}
.final-cta h2 { color: var(--on-brand, #fff); margin-bottom: 1.5rem; max-width: 22ch; margin-inline: auto; }
/* Marka gradyanı üzerinde soluk üst başlık. --brand-100 sabit kullanılırsa
   marka rengiyle arasındaki kontrast 4,3:1'e düşüyordu (AA altı). */
.fc-kicker { margin: 0 0 .5rem; font-size: var(--fs-xs); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--on-brand-soft, var(--brand-100)); }
.final-cta .cta-row { justify-content: center; }

/* ── 13. İçerik sayfaları ─────────────────────────────────────────────── */
.page-header { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding-block: 1.25rem 2rem; }
.page-title { margin: .35rem 0 .75rem; }
.lead { font-size: var(--fs-lg); color: var(--ink-2); }
.page-narrow { max-width: 820px; margin-inline: auto; }

.prose { max-width: 72ch; font-size: var(--fs-lg); }
.prose h2 { margin-top: 2.25rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.prose h3 { margin-top: 1.75rem; }
.prose img { border-radius: var(--radius); margin-block: 1.5rem; }
.prose ul, .prose ol { padding-inline-start: 1.4rem; }
.prose li { margin-bottom: .4rem; }
.prose a { font-weight: 600; }
.prose blockquote {
  margin: 1.5rem 0; padding: .75rem 0 .75rem 1.25rem;
  border-inline-start: 4px solid var(--brand-100); color: var(--ink-2); font-style: italic;
}
.hero-figure { margin: 0 0 1.75rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.hero-figure img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

.cta-box {
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem);
  margin-block: 2.5rem; text-align: center;
}
.cta-box h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.cta-box .cta-row { justify-content: center; }

.progress-wrap { background: var(--line); border-radius: 999px; height: 12px; overflow: hidden; margin: 1.25rem 0 .4rem; }
.progress-bar { background: linear-gradient(90deg, var(--accent), var(--accent-600)); height: 100%; border-radius: 999px; }

/* Breadcrumb */
.breadcrumb { font-size: var(--fs-xs); padding-block: 1rem .25rem; color: var(--ink-3); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-inline-end: .4rem; color: var(--line-2); }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-600); }
.breadcrumb [aria-current] { color: var(--ink-2); font-weight: 600; }
[dir="rtl"] .breadcrumb li + li::before { content: "‹"; }

/* ── 13b. İç sayfa yan sütunu ─────────────────────────────────────────── */
/* İçerik DOM'da önce gelir (erişilebilirlik/SEO), görselde sidebar solda durur */
.with-sidebar {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.with-sidebar > .main-col { order: 2; min-width: 0; }
/* --topbar-h yalnızca yapışkan üst şerit açıkken main.js tarafından yazılır;
   kapalıyken tanımsız olduğu için 0px yedeği devreye girer ve davranış değişmez. */
.with-sidebar > .side-col { order: 1; position: sticky; top: calc(var(--header-h) + var(--topbar-h, 0px) + 1rem); display: grid; gap: 1rem; }
/* Yönetim çubuğu açıkken sabitlenme noktası aşağı kayar */
.has-adminbar .with-sidebar > .side-col { top: calc(var(--header-h) + var(--adminbar-h, 34px) + var(--topbar-h, 0px) + 1rem); }

.side-box, .side-contact {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm);
}
.side-title {
  margin: 0 0 .75rem; font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--kicker-ink, var(--brand));
  padding-bottom: .55rem; border-bottom: 1px solid var(--line);
}
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.side-list a {
  display: block; padding: .5rem .65rem; margin-inline: -.65rem; border-radius: 8px;
  font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); text-decoration: none;
  border-inline-start: 3px solid transparent;
}
.side-list a:hover { background: var(--brand-50); color: var(--brand-700); }
.side-list a.on {
  background: var(--brand-50); color: var(--brand-700); font-weight: 700;
  border-inline-start-color: var(--brand);
}

.side-cta {
  background: linear-gradient(150deg, var(--brand-50), #fff);
  border: 1px solid var(--brand-100); border-radius: var(--radius);
  padding: 1.25rem; display: grid; gap: .5rem;
}
.side-cta-kicker { margin: 0; font-size: var(--fs-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--kicker-ink, var(--brand)); }
.side-cta-title { margin: 0 0 .5rem; font-weight: 700; font-size: var(--fs-sm); line-height: 1.4; }
.side-contact p { margin: 0; font-size: var(--fs-sm); line-height: 1.8; }

@media (max-width: 991px) {
  .with-sidebar { grid-template-columns: 1fr; }
  .with-sidebar > .main-col { order: 1; }
  .with-sidebar > .side-col { order: 2; position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .with-sidebar > .side-col { grid-template-columns: 1fr; }
}

/* ── 13d. Galeri + ışık kutusu ────────────────────────────────────────── */
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem;
}
.gallery-item {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 1 / 1;
  background: var(--brand-50); text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
  content: ""; position: absolute; inset: 0;
  /* Perde, altındaki FOTOĞRAFIN rengini bilmediğimiz için yeterince koyu
     olmalı: .65 opaklıkta açık bir görselde beyaz alt yazı 4,3:1'e düşüyordu. */
  background: linear-gradient(to top, rgba(6,61,35,.86) 0%, rgba(6,61,35,.72) 25%, transparent 62%);
  opacity: 0; transition: opacity .22s var(--ease);
}
.gallery-item:hover::after, .gallery-item:focus-visible::after { opacity: 1; }
.gi-caption {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: .7rem .8rem; color: #fff; font-size: var(--fs-xs); font-weight: 650;
  line-height: 1.35; opacity: 0; transform: translateY(6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.gallery-item:hover .gi-caption, .gallery-item:focus-visible .gi-caption { opacity: 1; transform: translateY(0); }

/* Işık kutusu */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 61, 35, .94); padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; transition: opacity .22s var(--ease);
}
.lightbox[hidden] { display: none !important; }
.lightbox.is-open { opacity: 1; }
.lb-figure { margin: 0; max-width: min(1100px, 92vw); max-height: 88vh; display: flex; flex-direction: column; gap: .75rem; }
.lb-image { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius); background: #000; }
.lb-caption { color: #d7e8de; font-size: var(--fs-sm); text-align: center; }
.lb-close {
  position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 3;
  width: 46px; height: 46px; font-size: 1.9rem; line-height: 1;
  background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; cursor: pointer;
}
.lb-close:hover { background: rgba(255,255,255,.25); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 0; border-radius: 50%; cursor: pointer;
}
.lb-nav:hover { background: rgba(255,255,255,.25); }
.lb-nav[hidden] { display: none !important; }   /* tek görselde oklar gizlenir */
.lb-nav svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lb-prev { inset-inline-start: clamp(.5rem, 2vw, 1.5rem); }
.lb-next { inset-inline-end: clamp(.5rem, 2vw, 1.5rem); }
[dir="rtl"] .lb-nav svg { transform: scaleX(-1); }

@media (max-width: 991px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .gi-caption { display: none; }
  .lb-nav { width: 40px; height: 40px; }
}

/* ── 13c. Paylaşım çubuğu ─────────────────────────────────────────────── */
.share-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.share-label {
  font-size: var(--fs-xs); font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin-inline-end: .35rem;
  flex: none;
}
.share-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line-2); border-radius: 50%; background: #fff;
  color: var(--ink-2); cursor: pointer; text-decoration: none; padding: 0;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.share-btn svg { width: 18px; height: 18px; fill: currentColor; }
.share-btn:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.share-whatsapp:hover { background: #25d366; }
.share-x:hover        { background: #16221d; }
.share-facebook:hover { background: #1877f2; }
.share-linkedin:hover { background: #0a66c2; }
.share-email:hover    { background: var(--brand); }
.share-copy svg, .share-native svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-copy:hover, .share-native:hover { background: var(--brand); }
.share-copy.is-done { background: var(--brand); color: #fff; border-color: transparent; }
.share-note { font-size: var(--fs-xs); color: var(--brand-700); font-weight: 650; }

/* ── 14. SSS ──────────────────────────────────────────────────────────── */
.faq-list { display: grid; gap: .75rem; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq-item[open] { border-color: var(--brand-100); box-shadow: var(--shadow-sm); }
.faq-item summary {
  position: relative; padding: 1.05rem 3rem 1.05rem 1.25rem;
  font-weight: 650; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; inset-inline-end: 1.25rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--kicker-ink, var(--brand)); border-radius: 50%; font-size: 1.15rem; line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-body { padding: 0 1.25rem 1.25rem; color: var(--ink-2); }

/* ── 15. Formlar ──────────────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }
.form-card h2 { margin-top: 0; font-size: var(--fs-h3); }
.form-card label { display: block; font-weight: 650; font-size: var(--fs-sm); margin: 1rem 0 .3rem; }
.form-card input[type=text], .form-card input[type=email], .form-card input[type=tel],
.form-card select, .form-card textarea {
  width: 100%; padding: .7rem .85rem; font: inherit; font-size: var(--fs-sm);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); outline: none;
}
.form-card textarea { resize: vertical; min-height: 110px; }
.form-card fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 1.25rem 0 0; padding: .85rem 1.1rem 1rem; }
.form-card legend { font-weight: 650; font-size: var(--fs-sm); padding-inline: .4rem; }
.check { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; font-size: var(--fs-xs) !important; margin: .7rem 0 !important; color: var(--ink-2); line-height: 1.5; }
.check input { margin-top: .2rem; width: 17px; height: 17px; accent-color: var(--brand); flex: none; }
.form-card button[type=submit] { margin-top: 1.25rem; width: 100%; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: .85rem 1.1rem; border-radius: var(--radius-sm); font-size: var(--fs-sm); margin-bottom: 1rem; }
.alert-ok { background: var(--brand-50); color: var(--ok); border: 1px solid var(--brand-100); }
.alert-err { background: var(--danger-bg); color: var(--danger); border: 1px solid #f3c9c5; }

.contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .85rem; }
.contact-list li { padding-bottom: .85rem; border-bottom: 1px solid var(--line); }

/* İletişim kartları */
.contact-cards { margin-bottom: 0; }
.contact-card {
  display: flex; flex-direction: column; gap: .3rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
a.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-100); color: var(--ink); }
.contact-card.is-static { cursor: default; }
.cc-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-50); margin-bottom: .35rem; }
.cc-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cc-label { font-size: var(--fs-xs); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.cc-value { font-weight: 650; line-height: 1.45; font-size: var(--fs-sm); }
.cc-more { font-size: var(--fs-xs); font-weight: 650; color: var(--brand-600); margin-top: .2rem; }

/* Konu kartları */
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.topic-card {
  display: flex; align-items: center; gap: .75rem; width: 100%; text-align: start;
  padding: .85rem 1rem; background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
  color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}
.topic-card:hover, .topic-card.is-active {
  border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); transform: translateY(-1px);
}
.tc-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--brand-50); flex: none; }
.topic-card:hover .tc-icon, .topic-card.is-active .tc-icon { background: #fff; }
.tc-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.contact-note {
  display: flex; gap: .75rem; align-items: flex-start; margin-top: 1.25rem;
  padding: .9rem 1.1rem; background: var(--bg-warm); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent); border-radius: var(--radius-sm);
}
.contact-note svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--accent-600); stroke-width: 1.9; stroke-linecap: round; }
.contact-note p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

.contact-social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.contact-social a {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem;
  border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
}
.contact-social a:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); }
.contact-social svg { width: 16px; height: 16px; fill: currentColor; }

/* Harita */
.map-section { padding-block: 0 0; }
.map-section .container { padding-bottom: 1.25rem; }
.map-wrap { position: relative; }
.map-wrap #map-load { display: block; margin: 0 auto 2.5rem; }
.map-wrap #map-frame iframe { width: 100%; height: clamp(300px, 45vh, 460px); border: 0; display: block; }

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

/* ── 16. Banka / SMS / belgeler ───────────────────────────────────────── */
.bank-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.1rem, 2.5vw, 1.75rem); margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); }
.bank-card h2 { margin: 0 0 .25rem; font-size: var(--fs-h3); }
.table-scroll { overflow-x: auto; }
.iban-table { width: 100%; border-collapse: collapse; margin-top: 1rem; min-width: 520px; }
.iban-table th, .iban-table td { text-align: start; padding: .7rem .6rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.iban-table th { background: var(--bg-alt); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.iban-table .iban { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .01em; direction: ltr; unicode-bidi: embed; }

/* SMS bağış sayfası */
.sms-block { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.sms-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-bottom: .85rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--brand-100);
}
.sms-number { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800; color: var(--kicker-ink, var(--brand)); margin: 0; line-height: 1; letter-spacing: -.02em; }
.sms-amount {
  display: inline-block; padding: .35rem 1.1rem; background: var(--accent); color: #4a2f00;
  font-weight: 800; border-radius: 999px; font-size: var(--fs-lg); white-space: nowrap;
}
.sms-card { text-align: center; }
.sms-card .card-body { align-items: center; gap: .35rem; }
.sms-label { margin: 0; font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); }
.sms-code {
  margin: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.6rem; font-weight: 800; letter-spacing: .06em; color: var(--brand-700);
}
.sms-card .card-actions { justify-content: center; gap: .6rem; }
.sms-lines { list-style: none; padding: 0; margin: 0 0 1rem; }

.doc-section { margin-top: 2.5rem; }
.doc-section h2 { font-size: var(--fs-h3); padding-bottom: .6rem; border-bottom: 2px solid var(--brand-100); }
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.doc-list li { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .85rem .25rem; border-bottom: 1px solid var(--line); }
.doc-title { font-weight: 650; flex: 1; min-width: 200px; }
.doc-year { color: var(--ink-3); font-size: var(--fs-sm); }

.donate-card .card-body { gap: .75rem; }
.donate-card h2 { font-size: var(--fs-h3); margin: 0; }
.donate-card ul { margin: 0; padding-inline-start: 1.1rem; font-size: var(--fs-sm); color: var(--ink-2); }

.center-404 { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }

/* ── 17. Alt bilgi ────────────────────────────────────────────────────── */
/* Alt bilgi renkleri panelden yönetilir; ayar yoksa marka renklerine düşer */
.site-footer { background: var(--footer-bg, var(--brand-900)); color: var(--footer-ink, #b9d0c3); font-size: var(--fs-sm); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2.5rem, 5vw, 3.75rem) 2.5rem;
}
.site-footer h3 { color: var(--footer-head, #fff); font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 1rem; }
/* Başlıksız sütunlar ardışık <ul> üretir; aralarında nefes payı kalsın */
.site-footer ul + ul { margin-top: .55rem; }
/* Alt bilgi ara başlığı (panelden 2. seviye) */
.site-footer h4 {
  color: var(--footer-head, #fff); font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase; margin: 1.4rem 0 .6rem;
  /* opacity KULLANILMAZ: rengi zeminine göre 4,5:1'e ayarlanmış bir yazıyı
     %85 saydam yapmak onu tekrar eşiğin altına düşürür. Sönüklük gerekiyorsa
     --footer-muted kullanılmalıdır (o da AA'yı geçer). */
}
.site-footer h4:first-of-type { margin-top: 0; }
.site-footer h3 a { color: inherit; }
.site-footer h3 a:hover { text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.site-footer a { color: var(--footer-ink, #b9d0c3); text-decoration: none; }
.site-footer a:hover { color: var(--footer-link, #fff); text-decoration: underline; }
.footer-brand img { max-height: 62px; width: auto; object-fit: contain; margin-bottom: 1rem; }
.footer-slogan { font-style: italic; color: var(--footer-head, #d7e8de); margin-bottom: 1rem; }
.site-footer address { font-style: normal; line-height: 1.8; margin-bottom: 1rem; }
.footer-social { display: flex !important; gap: .5rem; }
.footer-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); }
.footer-social a:hover { background: var(--brand); }
.footer-social svg { width: 17px; height: 17px; fill: #fff; }
/* Rozetler (bağış platformu, şeffaflık damgası vb.) */
/* Ayraç çizgisi TAM GENİŞLİKTEKİ sarmalayıcıda durur; .container üzerinde
   olsaydı alt bilgi şeridinin çizgisiyle hizasız görünürdü. */
.footer-badges-band { border-top: 1px solid rgba(255,255,255,.12); }
.footer-badges {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap; padding-block: 1.25rem;
}
.fb-badge { display: inline-flex; align-items: center; }
.fb-badge img {
  max-height: 42px; width: auto; object-fit: contain;
  /* Rozetler renkli logolardır; koyu zeminde okunur kalsın diye hafif
     beyaz bir zemin verilir (logoyu boyamak marka kurallarını ihlal eder). */
  background: #fff; border-radius: 8px; padding: .35rem .6rem;
  opacity: .92; transition: opacity .15s var(--ease), transform .15s var(--ease);
}
a.fb-badge:hover img, a.fb-badge:focus-visible img { opacity: 1; transform: translateY(-2px); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-xs); }
.footer-bottom-in { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.1rem; }
.footer-bottom p { margin: 0; }
/* Soluk alt bilgi metinleri. Sabit bir renk yazılamaz: alt bilgi arka planı
   panelden değiştirilebiliyor ve o zaman bu satırlar okunmaz kalıyordu.
   --footer-muted, zeminine karşı AA eşiğini geçecek şekilde üretilir. */
.fb-meta { color: var(--footer-muted, #8fb3a1); }

/* Künye: telif ile güven satırının arasında, ikisinden bir tık soluk durur.
   Alt bilgi zaten flex olduğu için dar ekranda kendiliğinden alt satıra iner. */
.fb-credit { color: var(--footer-muted, #8fb3a1); }
.fb-credit a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.fb-credit a:hover, .fb-credit a:focus-visible {
  color: #fff; border-bottom-color: rgba(255,255,255,.6);
}

/* ── 16c. Çerez onay bandı ───────────────────────────────────────────── */
.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 130;
  background: #fff; border-top: 3px solid var(--brand);
  box-shadow: 0 -8px 30px rgba(22,34,29,.16);
  animation: consent-in .28s var(--ease) both;
}
@keyframes consent-in { from { transform: translateY(100%); } to { transform: none; } }
.consent-in {
  max-width: var(--wrap); margin-inline: auto;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap;
}
.consent-txt { flex: 1 1 26rem; min-width: 0; }
.consent-txt p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.consent-title { font-weight: 700; color: var(--ink); margin-bottom: .2rem !important; }
.consent-txt a { color: var(--kicker-ink, var(--brand-700)); }
/* Reddetme ve kabul düğmeleri EŞİT ağırlıkta olmalıdır (karanlık desen yok) */
.consent-actions { display: flex; gap: .6rem; flex: none; flex-wrap: wrap; }
.consent-actions .btn { min-width: 10.5rem; justify-content: center; }
@media (max-width: 600px) {
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1 1 0; min-width: 0; }
}
/* Mobil alt çubuk varken bandın altında kalmasın */
@media (max-width: 767px) {
  .consent { bottom: 0; }
  body:has(.mobilebar) .consent { bottom: 58px; }
}
/* Alt bilgideki "Çerez tercihleri" bağlantısı (düğme ama bağlantı görünümlü) */
.linkish {
  /* inline-flex + min-height: dolgusuz bir <button> ~21 px kalıyordu ve
     WCAG 2.5.8'in 24 px dokunma hedefini geçmiyordu. */
  display: inline-flex; align-items: center; min-height: 24px;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--footer-link, #fff); }

/* ── 17a. Çalıştığımız ülkeler haritası ──────────────────────────────── */
.section-map { background: var(--bg-alt); }
.section-note { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); max-width: 40ch; }

.ycmap {
  display: grid; gap: clamp(1rem, 3vw, 2.25rem);
  grid-template-columns: minmax(0, 1.9fr) minmax(220px, 1fr);
  align-items: start;
}
.ycmap-canvas {
  position: relative;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .75rem;
  box-shadow: var(--shadow-sm);
}
/* Zemin ayrı bir SVG dosyasıdır (gerçek kıyı çizgileri, ülke sınırı yoktur).
   İşaretçi katmanı onun ÜZERİNE bindirilir; zemin yoksa tek başına akar. */
.ycmap-base { display: block; width: 100%; height: auto; }
.ycmap-pins { display: block; width: 100%; height: auto; overflow: visible; }
.ycmap-base + .ycmap-pins {
  position: absolute; inset: .75rem; width: auto; height: auto;
}

.ycmap-pin { cursor: default; }
.ycmap-pin.is-link { cursor: pointer; }
/* Sayfası henüz yayımlanmamış ülke: işaretli ama sönük ve tıklanamaz */
.ycmap-pin:not(.is-link) .pin-dot  { fill: var(--ink-3); }
.ycmap-pin:not(.is-link) .pin-halo { fill: var(--ink-3); opacity: .12; }
.ycmap-pin:not(.is-link).is-on .pin-dot { fill: var(--ink-2); }
/* Kaydırılan işaretçiyi gerçek konumuna bağlayan ince çizgi.
   Her zaman hafifçe görünür: aksi hâlde ziyaretçi noktanın kaydırıldığını
   anlamaz ve ülkeyi yanlış yerde sanır. */
.pin-leader {
  stroke: var(--ink-3); stroke-width: 1; opacity: .3;
  transition: opacity .18s var(--ease);
}
.ycmap-pin.is-on .pin-leader { opacity: .7; }
/* Görünmez dokunma hedefi: küçük noktayı parmakla vurmayı kolaylaştırır */
.pin-hit { fill: transparent; }
.ycmap-pin .pin-halo {
  fill: var(--brand); opacity: .16;
  transform-box: fill-box; transform-origin: center;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.ycmap-pin .pin-dot {
  fill: var(--brand); stroke: #fff; stroke-width: 4;
  transition: fill .2s var(--ease);
}
.ycmap-pin .pin-label {
  /* NOT: text-anchor burada TANIMLANMAZ — kenardaki ülkelerin etiketi taşmasın
     diye worldmap.php her işaretçiye kendi hizasını öznitelik olarak yazar.
     Buraya bir text-anchor kuralı eklerseniz o hesabı ezersiniz. */
  font-size: 15px; font-weight: 700; fill: var(--ink);
  paint-order: stroke;
  stroke: #fff; stroke-width: 4; stroke-linejoin: round;
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease);
}
.ycmap-pin.is-on .pin-halo { opacity: .3; transform: scale(1.18); }
.ycmap-pin.is-on .pin-dot  { fill: var(--accent-600); }
.ycmap-pin.is-on .pin-label { opacity: 1; }

/* Metin listesi — JS kapalıyken de tam liste görünür (SEO + erişilebilirlik) */
.ycmap-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .15rem .75rem;
}
.ycmap-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .55rem; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-size: var(--fs-sm);
  transition: background .15s var(--ease), color .15s var(--ease);
}
a.ycmap-item:hover, a.ycmap-item:focus-visible { background: var(--brand-50); color: var(--brand-700); }
.ycmap-item.is-plain { color: var(--ink-2); cursor: default; }
.ycmap-item.is-on { background: var(--brand-50); }
.ycmap-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--brand); box-shadow: 0 0 0 3px var(--brand-100);
}
.ycmap-item.is-plain .ycmap-dot { background: var(--line-2); box-shadow: 0 0 0 3px var(--line); }

/* ── Döşeme (OpenStreetMap) modu ─────────────────────────────────────────
   SVG harita "önizleme + yedek" olarak altta kalır; üstündeki gizlilik kapısı
   ziyaretçi onaylayana kadar durur. Kapı JS tarafından kaldırılır. */
.ycmap-static { display: block; }
.ycmap-static[hidden] { display: none; }

.ycmap-gate {
  position: absolute; inset: .75rem;
  display: grid; place-items: center; padding: 1rem;
  /* Örtü YOK: alttaki SVG harita okunur ve kullanılabilir kalır. Yalnızca
     ortadaki kart tıklamayı alır; kenarlardaki işaretçiler hover edilebilir.
     (Tam ekran bulanık örtü, etiketleri yalnızca hover'da görünen SVG haritayı
     okunamaz bir nokta bulutuna çeviriyordu.) */
  pointer-events: none;
}
.ycmap-gate[hidden] { display: none; }
.ycmap-gate-in {
  max-width: 40ch; text-align: center; pointer-events: auto;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem;
  box-shadow: var(--shadow-lg);
}
.ycmap-gate-t { margin: 0 0 .35rem; font-weight: 700; color: var(--ink); }
.ycmap-gate-d { margin: 0 0 .9rem; font-size: var(--fs-sm); color: var(--ink-2); }

.ycosm {
  position: relative; overflow: hidden;
  height: clamp(320px, 44vw, 520px);
  border-radius: calc(var(--radius) - 4px);
  background: var(--line);
  /* pan-y: tek parmakla DİKEY hareket sayfayı kaydırır, yatay hareket haritayı
     gezdirir. "none" verilseydi uzun sayfada haritaya denk gelen parmak sayfayı
     kaydıramaz, ziyaretçi haritada sıkışırdı — masaüstünde tekerlek için de
     aynı gerekçeyle Ctrl şartı konmuştur. Dikey gezinme +/− düğmeleri, çift
     dokunma ve klavye ile yapılabilir. */
  touch-action: pan-y;
  cursor: grab;
}
.ycosm.is-dragging { cursor: grabbing; }
.ycosm:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ycosm-tiles, .ycosm-pins { position: absolute; inset: 0; }
.ycosm-pins { pointer-events: none; }
.ycosm-tile {
  position: absolute; top: 0; left: 0;
  width: 256px; height: 256px; max-width: none;
  will-change: transform; user-select: none; -webkit-user-drag: none;
}
.ycosm-tile.is-err { visibility: hidden; }

.ycosm-pin {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column; align-items: center;
  margin: -9px 0 0 -9px;       /* nokta tam koordinatın üzerinde dursun */
  pointer-events: auto; text-decoration: none; color: inherit;
  will-change: transform;
  /* Bağlantı sürükleme jesti haritayı kaydırmayı bozar */
  user-select: none; -webkit-user-drag: none;
}
.ycosm-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--brand); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / .35);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.ycosm-pin:not(.is-link) .ycosm-dot { background: var(--ink-3); cursor: default; }
.ycosm-label {
  margin-top: 3px; font-size: .78rem; font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 1px 3px rgb(0 0 0 / .18);
}
.ycosm-pin.is-link:hover .ycosm-dot,
.ycosm-pin.is-link:focus-visible .ycosm-dot,
.ycosm-pin.is-on .ycosm-dot { transform: scale(1.25); background: var(--accent-600); }
.ycosm-pin:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 8px; }

.ycosm-ctrl {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  display: grid; gap: .25rem;
}
.ycosm-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  font-size: 1.05rem; line-height: 1; font-weight: 700;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer;
  box-shadow: 0 1px 3px rgb(0 0 0 / .18);
}
.ycosm-btn:hover { background: var(--brand-50); }
.ycosm-btn-fit { font-size: .95rem; }

/* Atıf zorunludur (OpenStreetMap kullanım koşulları) — kaldırmayın */
.ycosm-attr {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  font-size: .68rem; line-height: 1.4;
  background: color-mix(in srgb, #fff 82%, transparent);
  padding: 1px 6px; border-radius: 6px 0 0 0;
}
.ycosm-attr a { color: var(--ink-2); }
.ycosm-hint { margin: .5rem 0 0; font-size: .74rem; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .ycosm-dot { transition: none; }
}

@media (max-width: 991px) {
  .ycmap { grid-template-columns: 1fr; }
  .ycosm { height: clamp(300px, 68vw, 420px); }
  .ycosm-label { font-size: .72rem; }
  /* Dar ekranda harita küçülür; işaretçi ve etiket okunur kalsın diye
     hepsi AYNI ORANDA büyütülür. Sabit değer verilseydi PHP'nin komşu
     yoğunluğuna göre hesapladığı yarıçaplar ezilir ve Lübnan gibi sıkışık
     ülkeler yine komşusunun altında kalırdı. */
  .ycmap-pin .pin-label { font-size: 24px; stroke-width: 6; }
  .ycmap-pin .pin-dot   { r: 7px; }
  .ycmap-pin .pin-halo  { r: 13px; }
  /* Dokunma hedefi BÜYÜTÜLMEZ: en yakın iki işaretçi 16 birim ayrıdır ve
     13'ten büyük bir yarıçap komşunun merkezini yutup onu seçilemez kılardı.
     Mobilde asıl etkileşim zaten haritanın altındaki ülke listesidir. */
}

/* ── 17b. Site üstü yönetim çubuğu (yalnızca yöneticiye görünür) ─────── */
.adminbar {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 120;
  background: #16221d; color: #d7e5de; font-size: .82rem;
  line-height: 1.5;
}
.adminbar-in {
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
  max-width: var(--wrap); margin-inline: auto; padding: .3rem clamp(1rem, 3vw, 2rem);
}
.ab-brand {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #fff; font-weight: 700; text-decoration: none; padding: .25rem .6rem .25rem 0;
}
.ab-brand svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.ab-item {
  color: #d7e5de; text-decoration: none; padding: .25rem .65rem; border-radius: 6px; white-space: nowrap;
}
.ab-item:hover { background: rgba(255,255,255,.12); color: #fff; }
.ab-accent { background: var(--accent); color: #3a2400; font-weight: 700; }
.ab-accent:hover { background: #ffb547; color: #3a2400; }
.ab-spacer { flex: 1; }
.ab-user { color: #90a89d; padding-inline: .5rem; }
/* NOT: Buraya `.has-adminbar .site-header { top: 0 }` YAZMAYIN.
   Aynı özgüllükte olduğu için 181. satırdaki doğru kuralı ezer ve
   başlık yönetim çubuğunun ALTINDA kalır. Konum kuralı 181. satırdadır. */

/* Bölüm düzenleme rozeti */
.has-edit { position: relative; }
.edit-chip {
  position: absolute; top: .6rem; inset-inline-end: .6rem; z-index: 40;
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(22,34,29,.88); color: #fff; text-decoration: none;
  font-size: .74rem; font-weight: 650; padding: .28rem .7rem; border-radius: 999px;
  opacity: .35; transition: opacity .15s var(--ease), background-color .15s var(--ease);
}
.edit-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.has-edit:hover .edit-chip, .edit-chip:focus { opacity: 1; background: var(--brand); color: #fff; }

@media (max-width: 767px) {
  .ab-hide-sm { display: none; }
  .edit-chip { display: none; }
}

/* ── 17c. Mobil alt çubuk + yukarı çık ────────────────────────────────── */
.mobilebar { display: none; }

.to-top {
  position: fixed; inset-inline-end: 1.1rem; bottom: 1.1rem; z-index: 95;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--brand); color: #fff; border: 0; border-radius: 50%;
  box-shadow: 0 6px 20px rgba(6, 61, 35, .3); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s, background-color .18s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--brand-700); }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 767px) {
  .mobilebar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 110;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(22, 34, 29, .1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mb-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    padding: .55rem .2rem .5rem; text-decoration: none; color: var(--ink-2);
    font-size: .66rem; font-weight: 650; line-height: 1.2; text-align: center;
    border-top: 3px solid transparent;
  }
  .mb-item:active { background: var(--brand-50); }
  .mb-item.is-primary { color: var(--kicker-ink, var(--brand)); border-top-color: var(--brand); }
  .mb-icon { display: grid; place-items: center; }
  .mb-item svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mb-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Alt çubuk içeriği kapatmasın */
  body.has-mobilebar { padding-bottom: 62px; }
  body.has-mobilebar .to-top { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .to-top { width: 42px; height: 42px; inset-inline-end: .8rem; }
}

/* ── 18. RTL ──────────────────────────────────────────────────────────── */
[dir="rtl"] .link-more::after { content: "←"; }
[dir="rtl"] .link-more:hover::after { transform: translateX(-3px); }
[dir="rtl"] .slider-arrow.prev { left: auto; right: clamp(.5rem, 2vw, 1.5rem); }
[dir="rtl"] .slider-arrow.next { right: auto; left: clamp(.5rem, 2vw, 1.5rem); }
/* "Kenara yapışık" stil RTL'de de kenara yapışmalı: yukarıdaki genel RTL
   kuralı aynı özgüllükte ve sonra geldiği için onu eziyordu. */
[dir="rtl"] .arrows-edge .slider-arrow.prev { left: auto; right: 0; border-radius: 8px 0 0 8px; }
[dir="rtl"] .arrows-edge .slider-arrow.next { right: auto; left: 0; border-radius: 0 8px 8px 0; }
[dir="rtl"] .slider-arrow svg { transform: scaleX(-1); }

/* ── 19. Duyarlı kırılımlar ───────────────────────────────────────────── */

/* Küçük masaüstü */
@media (max-width: 1199px) {
  .nav-link { padding: .55rem .6rem; font-size: .86rem; }
  .mega-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-promo { display: none; }
  .quick-row { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
  .qi-icon { width: 48px; height: 48px; }
}

/* Tablet — menü çekmeceye geçer */
@media (max-width: 991px) {
  :root { --header-h: 68px; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .brand img { max-height: 44px; }
  .intro-grid { grid-template-columns: 1fr; }
  .impact-card { order: 2; }
  .impact-list { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .impact-list li { border-bottom: 0; padding-bottom: 0; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two-col { grid-template-columns: 1fr; }
}

/* Mobil */
@media (max-width: 767px) {
  .topbar-in { justify-content: center; min-height: 34px; }
  .topbar-left { gap: .9rem; }
  /* NOT: ".tb-social { display: none }" ve ".tb-hide-sm/.tb-hide-md" kuralları
     KALDIRILDI. Üst şerit öğelerinin cihaz görünürlüğü artık panelden
     yönetiliyor (.tb-only-lg / .tb-only-sm); koşulsuz kurallar o ayarı
     sessizce eziyordu. */
  .site-header.has-sticky-topbar { top: var(--topbar-h, 34px); }
  .has-adminbar .site-header.has-sticky-topbar {
    top: calc(var(--adminbar-h, 34px) + var(--topbar-h, 34px));
  }
  .btn-donate span, .btn-donate { font-size: var(--fs-xs); padding: .55rem 1rem; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .impact-list { grid-template-columns: 1fr; gap: .85rem; }
  .impact-list li { padding-bottom: .85rem; border-bottom: 1px solid rgba(255,255,255,.16); }
  .quick-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-tile { padding: 1.15rem .75rem; gap: .6rem; }
  .at-icon { width: 46px; height: 46px; }
  .at-icon svg { width: 24px; height: 24px; }
  .qi-icon { width: 44px; height: 44px; }
  .qi-icon img { width: 26px; height: 26px; }
  .qi-label { font-size: .7rem; }
  .slide img { max-height: 60vh; }
  .slider-arrow { width: 38px; height: 38px; }
  .slider-arrow svg { width: 20px; height: 20px; }
  .arrows-edge .slider-arrow { width: 28px; height: 54px; }

  /* ── Slider: mobilde ayrı denetim ────────────────────────────────────
     Dar ekranda görselin üzerine binen oklar ve kontrol kapsülü manşeti
     okunmaz hâle getiriyordu; ikisi de panelden ayrıca kapatılabilir. */
  .no-arrows-m .slider-arrow { display: none; }
  .no-ctrl-m .slider-controls { display: none; }
  /* Kapsül biraz küçülür ve görselin alt kenarına yaklaşır */
  .ctrl-overlay .slider-controls { bottom: .5rem; padding: .3rem .5rem; gap: .45rem; }
  .ctrl-bar .slider-controls { padding: 1.1rem .5rem .45rem; }

  /* ── Hızlı destek şeridi: tek satır, parmakla kaydırılır ─────────────
     3'lü ızgarada 7 öğe üç sıra kaplıyor, ikonlar küçülüyor ve şerit
     sayfanın yarısını yiyordu. Yatay kaydırma hem yer kazandırır hem de
     "devamı var" bilgisini görsel olarak verir. */
  .qm-scroll .quick-row {
    display: flex; grid-template-columns: none;
    gap: .35rem; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Kenarlarda kesilen öğe "kaydırılabilir" olduğunu belli eder */
    padding-inline: 1rem; scroll-padding-inline: 1rem;
    /* Kaydırma çubuğu gizlenir ama kaydırma çalışır */
    scrollbar-width: none;
  }
  .qm-scroll .quick-row::-webkit-scrollbar { display: none; }
  .qm-scroll .quick-item {
    flex: 0 0 auto; width: 5.6rem; scroll-snap-align: start;
    padding: .7rem .3rem;
  }
  .qm-scroll .qi-label {
    /* İki satırdan uzun etiketler şeridin yüksekliğini zıplatıyordu */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── Paylaş çubuğu ───────────────────────────────────────────────────
     "PAYLAŞ" etiketi ikonların arasına sıkışıp tek başına alt satıra
     düşüyordu. Mobilde etiket kendi satırını alır, ikonlar tek sırada
     kaydırılabilir dizilir. */
  .share-row { gap: .45rem; }
  .share-label { flex: 0 0 100%; margin: 0 0 .15rem; }
  .share-btn { width: 38px; height: 38px; }

  /* ── Sayfa yolu (breadcrumb) ─────────────────────────────────────────
     Uzun başlıklarda üç satıra kadar kırılıyordu. Tek satırda kalır,
     taşan kısım kaydırılır; son öğe (aktif sayfa) gerekirse kısaltılır. */
  .breadcrumb ol {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: .15rem;
  }
  .breadcrumb ol::-webkit-scrollbar { display: none; }
  .breadcrumb li { white-space: nowrap; flex: none; }
  .breadcrumb li[aria-current] {
    flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis;
  }

  /* ── Üst şerit · IBAN ────────────────────────────────────────────────
     BAŞLANGIÇ DURUMU kısaltılmış hâldir; main.js şeritte yer olup
     olmadığını ölçer ve sığıyorsa .is-full ekleyerek tam IBAN'a geçer
     (örneğin telefon gizlendiğinde yer açılır). Ters sırada yapılsaydı,
     JS çalışana kadar şerit iki satıra düşüp sayfa zıplardı. */
  .tb-iban-txt { display: none; }
  .tb-iban-short { display: inline; }
  .tb-copy.is-full .tb-iban-txt { display: inline; }
  .tb-copy.is-full .tb-iban-short { display: none; }
  /* "IBAN:" ön eki dar ekranda gizlenir — ikon zaten alanı anlatıyor */
  .tb-iban-pre { display: none; }
  /* Rakamlar biraz daha sıkı dizilsin ki tam IBAN daha kolay sığsın */
  .tb-copy { letter-spacing: -.01em; }

  .section-head { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .transparency-in, .volunteer-strip { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .prose { font-size: var(--fs-base); }
  .cta-row .btn { flex: 1 1 auto; }
}

@media (max-width: 479px) {
  .quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr; }
  .sms-number { font-size: 2.1rem; }
  .slider-controls { gap: .5rem; padding: .35rem .55rem; }
}

/* ── 20. Hareket azaltma / yazdırma ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .card:hover { transform: none; }
  .card:hover .card-media img { transform: none; }
}

@media print {
  .topbar, .site-header, .drawer, .drawer-backdrop, .hero-slider,
  .quick-strip, .final-cta, .site-footer, .btn { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .container { max-width: none; }
}