/* Gezinme menüsü stilleri bölümü başlangıcı */
:root {
  --teal: #087f7a;
  --teal-dark: #075b5a;
  --teal-deep: #063f40;
  --mint: #29c8ae;
  --gold: #d8a83e;
  --gold-light: #f5dd97;
  --ivory: #fbf9f4;
  --paper: #fff;
  --ink: #182625;
  --muted: #6d7b79;
  --line: #dde6e3;
  --shadow: 0 18px 50px rgba(20, 55, 52, 0.11);
  --radius: 22px;
}

* {
  box-sizing: border-box;
}
html {
  /* Bootstrap 3 (mevcut sitede yüklü) html{font-size:10px} zorluyor — bizim rem tabanlı
     tüm ölçülerimiz (mockup 16px kök varsayıyor) bu yüzden %37.5 küçük render oluyordu.
     Kökü gerçek 16px'e sabitliyoruz, tüm rem değerleri artık doğru hesaplanır. */
  font-size: 16px;
  scroll-behavior: auto;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.75;
}
/* Site genelinde (eski, redesign-öncesi) yüklenen ar|tr|fr|.../iskelet2.css
   dosyasında "* { font-family: "Cairo", sans-serif; }" gibi EVRENSEL bir
   kural var — bu, doğrudan HER elemente atanmış bir değer olduğu için,
   body{font-family:...}'den MİRAS YOLUYLA gelen değeri (miras her zaman
   doğrudan atanmış bir değerden daha düşük önceliklidir, seçici özgüllüğü
   fark etmeksizin) eziyor. AR'da linkler/başlıklar gibi TÜM alt elemanlar
   sessizce "Cairo" ile render oluyordu (müşteri fark etti, tasarımın
   gerçek fontu "Noto Kufi Arabic" — bkz. webrev2/navbar,ana sayfa,proje
   detayi/styles.css). "body *" (0,0,2) iskelet2.css'in "*" kuralından
   (0,0,0) daha spesifik olduğu için garanti kazanıyor. */
body,
body * {
  font-family: Poppins, "Noto Kufi Arabic", system-ui, sans-serif;
}
a,
a:hover,
a:focus {
  /* Bootstrap 3 (sitede yüklü) a:hover{text-decoration:underline} tanımlıyor, bizim
     düz "a" sıfırlamamızdan daha spesifik olduğu için hover'da alt çizgi çıkıyordu */
  color: inherit;
  text-decoration: none;
}
.breadcrumb {
  /* Bootstrap 3 .breadcrumb{padding;background-color:#f5f5f5;border-radius;margin-bottom}
     tanımlıyor — her sayfanın kendi -yeni.css dosyasındaki .breadcrumb kuralı bu
     özellikleri hiç ELE ALMADIĞI için gri kutu/boşluk her yerde sızıyordu.
     Tasarımda hiçbir sayfada breadcrumb kutusu yok, tek noktadan sıfırlanıyor. */
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
}
/* [hidden] attribute'u tarayıcının UA stylesheet'inde display:none verir, AMA
   .button{display:inline-flex}, .auth-form{display:grid} gibi component'lere
   özel display tanımlayan HERHANGİ bir yazar kuralı (specificity/dosya sırası
   fark etmeksizin, yazar stilleri UA stilinden her zaman önceliklidir) bunu
   sessizce ezip elemanı GÖRÜNÜR bırakabiliyordu (bkz. Hesabım sayfası: İptal
   butonu ve Kayıt Ol formu düzenleme/sekme dışıyken de görünüyordu). Tek
   noktadan, sitede JS ile hidden yapılan HER eleman için kalıcı çözüm. */
[hidden] {
  display: none !important;
}
/* Fare ile tıklamada tarayıcının varsayılan mavi outline'ı bastırılıyor, ama
   klavye ile gezinirken (:focus-visible) erişilebilirlik için korunuyor
   (aşağıdaki :where(...):focus-visible kuralı altın renkli outline veriyor). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
select:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
}
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}
.button {
  /* appearance/font/cursor reset: bu class artık hem <a> hem <button type="button">
     (bkz. .btn-volunteer, genel/header.php) üzerinde kullanılıyor — reset
     olmadan native <button> görünümü (özellikle Safari/macOS) ince özel
     border'ı (örn. .btn-volunteer'in gold border'ı) bastırıyor/eksik gösteriyordu. */
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  min-height: 46px;
  padding: 10px 22px;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.button:hover {
  transform: translateY(-2px);
}
.button svg {
  width: 20px;
}

/* Üst bilgi çubuğu bölümü başlangıcı */
.topbar {
  background: var(--teal);
  color: rgba(255, 255, 255, 0.85);
}
.topbar .shell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 40px;
  font-size: 0.8rem; /* 2026-09-29: 0.9rem baskın duruyordu (müşteri talebi) */
}
.topbar a,
.topbar .topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease;
}
.topbar a:hover {
  color: #fff;
}
/* 2026-09-28: "Gönüllü Ol" topbar'a taşındı. Hedef sayfası (gonulluformu.php)
   henüz olmadığı için <a> değil <span> olarak basılıyor — görünüm diğer topbar
   öğeleriyle aynı, ama imleç değişmiyor ve hover rengi yok (tıklanabilir
   izlenimi vermesin). Sayfa hazır olunca header.php'de 'inert' => false. */
.topbar .topbar-inert {
  cursor: default;
}
.topbar svg {
  width: 13px; /* 2026-09-29: 15px → 13px, yazıyla birlikte küçültüldü */
}
.topbar-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.22);
}

/* Üst bilgi çubuğu bölümü bitişi */

/* Ana menü bölümü başlangıcı */
.mainbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  /* .mobile-menu (position:absolute; top:100%) buna göre konumlanıyor; sabit
     bırakıldı, offset vermediği için masaüstünde hiçbir görsel etkisi yok. */
  position: relative;
}
.mainbar .shell {
  /* 2026-09-23 EK düzeltme: müşteri "navbar sabit bir ölçüde kalmış, genişleme
     yok" dedi — sorun sadece 1080-1240px aralığında değilmiş, çünkü genel
     .shell kuralı (width: min(1280px, calc(100% - 48px))) navbar'ı GENİŞ
     monitörlerde bile 1280px'te sabitliyordu; TR'nin 8 öğesi + arama/hesap/
     bağış butonu (1240px üzerinde hepsi görünür) o sabit genişlikte hiç
     sığmıyordu. Navbar'ın shell'i artık HER genişlikte tam viewport'u
     kullanıyor (aşağıdaki .nav-links akıcı küçültmesiyle birlikte). */
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 72px;
  width: 100%;
  max-width: 100%;
  padding-inline: 24px;
}
.brand {
  display: flex;
  align-items: center;
  flex: none;
}
.brand-logo {
  /* 2026-09-22: logoy.png (563x673, kare/rozet) yerine yatay yazı-logo
     logo-fix-ar-green.png (205x32) kullanılıyor — webrev2/navbar/styles.css'teki
     gibi genişlik sabitleniyor, yükseklik oranla otomatik. */
  display: block;
  height: auto;
  width: 150px;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  /* 2026-09-22/23 düzeltme (3. deneme): TR/AR menüsünde 8 ana öğe var (EN'de 5).
     İlk iki deneme (akıcı vw formülü, sonra 1080-1240px'e özel SABİT küçültme)
     yetersiz kaldı — müşteri gerçek sorunun 1240px ÜZERİNDEKİ sıradan laptop
     genişliklerinde (1280-1600px) olduğunu bildirdi: o aralıkta arama/hesap/
     bağış butonu HÂLÂ görünür (.tablet-hide sadece ≤1240px'te devreye giriyor),
     üstüne 8 TR öğesi eklenince eski sabit 1rem/18px'te sığmıyordu, ve genel
     .shell kuralı navbar'ı geniş monitörlerde bile 1280px'te sabitleyip
     genişlemesini engelliyordu (.mainbar .shell'e ayrı düzeltme yukarıda).
     Artık font-size/gap 1080px'ten 1600px'e kadar TEK, sürekli akıcı formülle
     küçülüyor (dar laptop'ta ~12px/6px, geniş masaüstünde 16px/18px) — dar bir
     medya sorgusu aralığına sıkıştırılmış sabit değerler yerine. overflow-x
     teknik bir son-çare güvenlik ağı olarak duruyor. */
  /* 2026-09-29 (müşteri: "boşlukları araya ekleyelim, en sağda/solda
     bırakmayalım" + "alta açılan menüler div içinde kalıyor"):
     - Sabit gap yerine her öğe kalan alanı eşit paylaşıyor (aşağıda
       .nav-links > a / > .nav-dropdown: flex 1 1 auto) — boşluk kenarlarda
       değil öğelerin arasında. --nav-gap artık öğe başına minimum iç boşluk.
     - overflow-x: auto KALDIRILDI: CSS'te overflow-x auto olunca overflow-y de
       auto hesaplanıyor; .nav-dropdown-panel'ler 42px'lik bu div'in içinde
       kırpılıyordu (tarayıcıda ölçüldü: clientHeight 42, scrollHeight 367). */
  /* Değerler tarayıcıda 1090–1920px arası taranarak seçildi (TR 8 öğe): hiçbir
     genişlikte taşma yok, yazı–ayraç arası en dar ekranda ~5px. Eski değerler
     (6–18px / 0.231rem + 0.769vw) 1245–1366px'te 4–34px taşıyordu — overflow
     auto olduğu için son öğeler gizlice kırpılıyordu. */
  --nav-gap: clamp(8px, -1.692rem + 2.817vw, 18px);
  gap: 0;
  flex: 1;
  min-width: 0;
  overflow: visible;
  font-weight: 700;
  font-size: clamp(0.75rem, -0.071rem + 1.07vw, 1rem);
}
/* 1241–1300px: arama/hesap/bağış butonu hâlâ görünür, en dar aralık — logo, menü
   ve ikonlar arası boşluk 20px → 12px (menüye ~24px yer açıyor). */
@media (min-width: 1241px) and (max-width: 1300px) {
  .mainbar .shell {
    gap: 12px;
  }
}
/* AR: Noto Kufi Arabic belirgin şekilde daha geniş — aynı değerlerle 1245px'te
   88px, 1440px'te bile 49px taşıyordu (eski overflow:auto bunu gizliyordu, son
   öğeler görünmüyordu). Arapçaya özel biraz daha küçük ölçek + dar aralıkta
   logo 128px. Tarayıcıda 1090–1920px taşmasız doğrulandı. */
.site-header[dir="rtl"] .nav-links {
  font-size: clamp(0.7rem, -0.19rem + 1.07vw, 0.95rem);
}
@media (max-width: 1300px) {
  .site-header[dir="rtl"] .mainbar .shell {
    gap: 10px;
  }
  .site-header[dir="rtl"] .mainbar .shell > .brand .brand-logo {
    width: 128px;
  }
}
.nav-links::-webkit-scrollbar {
  display: none;
}
.nav-links a {
  position: relative;
  padding: 8px 0;
  color: var(--ink);
  transition: color 0.2s ease;
}
/* 2026-09-22: satır-içi metin kırma (nowrap kaldırılmıştı) üst satırdaki ana menü
   öğelerinin 2 satıra düşmesine neden oluyordu. nowrap SADECE ana bardaki
   doğrudan öğelere (.nav-links > a ve .nav-dropdown tetikleyicisi) geri eklendi
   — .nav-dropdown-panel İÇİNDEKİ flyout alt menü linklerine BİLEREK uygulanmadı,
   o sabit 240px genişlikli dikey listede satır kırma zaten istenen/doğru davranış
   (bkz. .nav-dropdown-panel, css/navbar-yeni.css). Sığdırma artık yukarıdaki
   .nav-links font-size/gap akıcı küçülmesiyle ve gerekirse yatay kaydırmayla
   sağlanıyor. */
.nav-links > a,
.nav-dropdown > a {
  white-space: nowrap;
  flex: none;
}
/* 2026-09-29: öğeler (üst seviye) kalan genişliği eşit paylaşır, metin hücrede ortalı */
.nav-links > a,
.nav-links > .nav-dropdown {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  padding-inline: calc(var(--nav-gap) / 2);
}
.nav-links > :not(:first-child)::before {
  content: "";
  position: absolute;
  /* hücreler bitişik olduğu için ayraç tam aradaki boşluğun ortasında */
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--line);
}
.nav-links a:hover {
  color: var(--teal);
}
.nav-links a.is-active {
  color: var(--teal);
}
.nav-links a.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
}

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.dropdown-toggle {
  display: grid;
  place-items: center;
  padding: 4px 0;
  color: var(--teal);
}
.dropdown-toggle svg {
  width: 15px;
  height: 20px;
}
.nav-dropdown-panel {
  position: absolute;
  top: 100%;
  /* 2026-09-29: hücre genişlediği için hücrenin ortasına hizalı (fiziksel left +
     negatif yarım genişlik: RTL'de de doğru) — eski: inset-inline-start: -14px */
  left: 50%;
  margin-left: -120px;
  z-index: 50;
  width: 240px;
  padding: 10px;
  display: grid;
  gap: 3px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
}
.nav-dropdown-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-dropdown-panel a {
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 0.76rem;
  font-weight: 500;
}
.nav-dropdown-panel > a + a {
  border-top: 1px solid rgba(8, 127, 122, 0.09);
  border-radius: 0;
}
.nav-dropdown-panel a::after {
  content: none;
}
.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible {
  background: #eef7f5;
  color: var(--teal);
}
.mobile-project-sections summary {
  list-style: none;
  cursor: pointer;
}
.mobile-project-sections summary::-webkit-details-marker {
  display: none;
}
.mobile-project-sections summary::marker {
  content: "";
}
.mobile-project-sections summary .chevron {
  transition: transform 0.2s ease;
}
.mobile-project-sections[open] summary .chevron {
  transform: rotate(180deg);
}
.mobile-submenu {
  margin: 6px 46px 12px 14px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--line);
}
.mobile-submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
}
.mobile-submenu a:hover {
  background: #eef7f5;
  color: var(--teal);
}

.nav-utility {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.icon-btn {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: #fff;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.icon-btn:hover,
.icon-btn.is-active {
  color: var(--teal);
  border-color: var(--teal);
  background: #eef7f5;
}
.icon-btn svg {
  width: 24px;
}
.cart-badge {
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid #fff;
}
/* Sepete ekleme sonrası eski jQuery kodu (genel/footer.php) sayfa yenilenmeden
   rozeti güncelliyor; sepet boşken ilk eklemede ".cart-badge" değil ham
   Bootstrap ".badge.badge-success" span'ı ekliyor (bkz. footer.php ~1300) —
   bu da aynı görünümde çıksın diye ".cart-badge" ile aynı stil burada tekrarlanıyor. */
#sepetbolum .badge,
#sepetbolum2 .badge {
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid #fff;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.nav-actions .button {
  min-height: 46px;
  padding: 9px 16px;
  font-size: 0.95rem;
}
.btn-volunteer {
  color: var(--gold);
  background: #fff;
  border: 1.5px solid var(--gold-light);
}
.btn-volunteer:hover {
  color: var(--gold);
  background: #fdf8ec;
}
.btn-donate {
  color: #fff;
  background: var(--teal);
  box-shadow: 0 10px 22px rgba(8, 127, 122, 0.25);
}

/* Ana menü bölümü bitişi */

/* Dil ve arama menüleri bölümü başlangıcı */
.lang-menu,
.search-menu {
  position: relative;
}
.lang-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
  pointer-events: none;
}
.lang-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.lang-panel {
  width: 160px;
  padding: 8px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}
.lang-option {
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.15s ease;
}
.lang-option:hover {
  background: var(--ivory);
}
.lang-option.is-active {
  color: var(--teal);
  font-weight: 800;
}

/* Dil ve arama menüleri bölümü bitişi */

/* Mobil menü çubuğu bölümü başlangıcı */
.mobile-bar {
  display: none;
}
.hamburger-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.hamburger-btn:hover,
.hamburger-btn[aria-expanded="true"] {
  color: var(--teal);
  background: #eef7f5;
}
.hamburger-btn svg {
  width: 22px;
}
/* Orta genişlik (BP2 < genişlik <= BP1) için: .mobile-bar henüz devrede değil,
   ama arama/hesap/nav-actions .tablet-hide ile gizlendiği için onların yerine
   #mobileMenu panelini açan ayrı bir tetikleyici gerekiyor. Aynı JS (.hamburger-btn
   seçicisiyle) otomatik olarak bağlanır, sadece görünürlüğü media query ile kontrol
   edilir (bkz. aşağıdaki BP1/BP2 medya sorguları). */
.hamburger-btn--tablet {
  display: none;
}

/* Mobil menü çubuğu bölümü bitişi */

/* Mobil açılır menü bölümü başlangıcı */
.mobile-menu {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 40;
  max-height: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 40px rgba(6, 20, 19, 0.18);
  transition: max-height 0.3s ease;
}
.mobile-menu.is-open {
  max-height: 80vh;
  overflow-y: auto;
}
.mobile-menu-list {
  padding: 12px;
  display: grid;
  gap: 6px;
}
/* Ana menü linkleri (nav-links) + ardından gelen ayraç bu sarmalayıcı içinde.
   Orta genişlikte (BP2 < genişlik <= BP1) nav-links zaten ana barda göründüğü
   için panelde TEKRARLANMASIN diye gizleniyor (bkz. BP1 medya sorgusu);
   display:contents sayesinde varsayılan/dar (<=BP2) durumda .mobile-menu-list'in
   grid gap'ini bozmadan linkler doğrudan grid öğesi gibi davranır. */
.mobile-menu-primary-links {
  display: contents;
}
.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}
.mobile-menu-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-menu-search-row .mobile-search-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.86rem;
}
.mobile-menu-search-row .icon-btn {
  flex: none;
}
.mobile-menu-link svg:first-child {
  color: var(--teal);
}
.mobile-menu-link span {
  flex: 1;
}
.mobile-menu-link .chevron {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--muted);
}
.mobile-menu-link.is-active {
  color: var(--teal);
  background: var(--ivory);
}
.mobile-menu-divider {
  margin: 8px 4px;
  border-top: 1px solid var(--line);
}
.mobile-menu-link--gold {
  color: #7a5c0f;
  background: #fdf4de;
}
.mobile-menu-link--gold svg:first-child {
  color: var(--gold);
}
.mobile-menu-link--teal {
  color: #fff;
  background: var(--teal);
}
.mobile-menu-link--teal svg:first-child,
.mobile-menu-link--teal .chevron {
  color: #fff;
}

/* AŞAMA 2 — BP1 (1240px, mevcut/eski tek breakpoint korunuyor): genişlik BP2'nin
   üstünde olduğu sürece logo + nav-links + dil seçici + sepet ANA BARDA görünür
   kalır; sadece arama/hesap/nav-actions (.tablet-hide) gizlenir ve onların
   yerine geçen ayrı bir hamburger (.hamburger-btn--tablet) gösterilir.
   .mobile-bar burada HENÜZ devreye girmez (o BP2'de, aşağıda). */
@media (max-width: 1240px) {
  .tablet-hide {
    display: none;
  }
  .hamburger-btn--tablet {
    display: flex;
  }
  .mobile-menu-primary-links {
    /* nav-links ana barda zaten görünür olduğu için panelde tekrarlanmasın */
    display: none;
  }
  .mainbar .shell {
    gap: 14px;
    /* 2026-09-23 düzeltme: müşteri "hiçbir menü öğesi arkada/kaydırmada
       kalmasın, hepsi görünsün, navbar gerekirse sağa sola genişlesin" dedi.
       Genel .shell kuralı (width: min(1280px, calc(100% - 48px))) bu dar
       aralıkta menüye gereksiz yere kenarlardan alan çaldırıyordu — sadece
       navbar'ın shell'i burada tam genişliğe (minimum kenar boşluğuyla)
       çekildi, .nav-links'e daha fazla yer kalsın diye. */
    width: 100%;
    max-width: 100%;
    padding-inline: 12px;
  }
  .mobile-menu {
    border-radius: 0 0 20px 20px;
  }
}

/* AŞAMA 3 — BP2 (aşağıda tanımlı, BP1'den küçük): burada mevcut "mobile-bar"
   mimarisine geçiliyor; nav-links de ana bardan kalkıp #mobileMenu panelinin
   içine taşınıyor (.mobile-menu-primary-links tekrar görünür yapılıyor). */
@media (max-width: 1080px) {
  .mainbar .nav-links,
  [data-desktop-only] {
    display: none;
  }
  .hamburger-btn--tablet {
    /* .mobile-bar kendi hamburger-btn'ini gösteriyor, ikisi birden görünmesin */
    display: none;
  }
  .mobile-menu-primary-links {
    display: contents;
  }
  .mainbar .shell {
    min-height: 72px;
    gap: 14px;
  }
  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }
  .mobile-bar .brand-logo {
    width: 150px;
    height: auto;
  }
  .mobile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transform: translateY(0);
  transition: transform 0.24s ease;
}
.site-header.is-topbar-hidden {
  transform: translateY(calc(-1 * var(--topbar-height, 40px)));
}
.header-spacer {
  height: var(--header-height, 113px);
}
.mainbar {
  background: rgba(255, 255, 255, 0.96);
  transition:
    box-shadow 0.25s ease,
    background 0.25s ease;
}
.site-header.is-scrolled .mainbar {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 30px rgba(6, 63, 64, 0.1);
}
.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.22s ease;
}
.nav-links a:hover::after,
.nav-links a.is-active::after {
  transform: scaleX(1);
}
/* 2026-09-29 (müşteri: "hover sırasında içe doğru genişliyordu"): üst menüde alt
   çizgi artık scaleX ile sağdan içe doğru uzamıyor; metin genişliğinde, yerinde
   renk geçişiyle beliriyor. Hücre (a) artık metinden geniş olduğu için ::after
   yerine text-decoration kullanılıyor — çizgi her zaman yalnızca metnin altında. */
.nav-links > a::after,
.nav-links > a.is-active::after,
.nav-dropdown > a::after,
.nav-dropdown > a.is-active::after {
  content: none;
}
.nav-links > a,
.nav-dropdown > a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
  text-decoration-color: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.nav-links > a:hover,
.nav-links > a.is-active,
.nav-dropdown > a:hover,
.nav-dropdown > a.is-active {
  text-decoration-color: var(--teal);
}
:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.icon-btn[aria-expanded="true"] {
  color: var(--teal);
  border-color: var(--teal);
  background: #eef7f5;
}
.lang-btn,
.mobile-lang-btn {
  width: auto;
  min-height: 40px;
  padding: 0 9px;
  display: flex;
  gap: 5px;
  border-radius: 24px;
  direction: ltr;
}
.current-language-code {
  font:
    700 11px system-ui,
    sans-serif;
  letter-spacing: 0.04em;
}
.current-language-icon {
  display: grid;
  place-items: center;
}

.icon-btn .language-chevron {
  width: 12px;
  height: 12px;
}

.lang-panel {
  width: 244px;
  padding: 10px;
  border-radius: 18px;
  box-shadow: 0 18px 60px #063f4020;
}
.lang-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: start;
  min-height: 0;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
.lang-option:hover {
  background: #f1f7f5;
}
.lang-option.is-active {
  background: #eaf6f2;
}
.language-flag {
  display: block;
  width: 29px;
  height: 20px;
  object-fit: cover;
  border-radius: 4px;
  flex: none;
  box-shadow: 0 0 0 1px #18262512;
}

.language-name {
  flex: 1;
}
.language-check {
  opacity: 0;
  font:
    700 15px system-ui,
    sans-serif;
}
.is-active > .language-check {
  opacity: 1;
}

.current-language-icon .language-flag {
  width: 20px;
  height: 15px;
}

.mobile-menu {
  visibility: hidden;
  transition:
    max-height 0.3s ease,
    visibility 0.3s ease;
}
.mobile-menu.is-open {
  visibility: visible;
  max-height: calc(100dvh - 120px);
  overscroll-behavior: contain;
}
.mobile-menu-link {
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.mobile-menu-link:hover {
  transform: translateX(-3px);
  background: #eef7f5;
  color: var(--teal-dark);
}
.btn-donate:hover {
  /* css/bootstrap.css'teki "a:hover, a:focus { color: #23527c; }" kuralı,
     eleman+pseudo-class (a:hover) içerdiği için salt ".btn-donate{color:#fff}"
     kuralından (sadece class) daha yüksek özgüllükte — dosya sırası fark etmez.
     Rengi burada AÇIKÇA ".btn-donate:hover" ile tekrar beyaz yapıyoruz. */
  color: #fff;
  background: var(--teal-dark);
  box-shadow: 0 12px 26px #087f7a40;
}
.button:active {
  transform: translateY(0) scale(0.98);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .site-header {
    top: 0;
  }
  .nav-utility,
  .lang-menu,
  .search-menu {
    position: static;
  }
  .nav-utility {
    width: 0;
  }
  .mainbar .shell {
    gap: 0;
  }
  .lang-btn[data-desktop-only] {
    display: none;
  }
  .lang-panel {
    top: calc(100% + 8px);
    inset-inline-end: 20px;
    max-width: calc(100vw - 40px);
  }
  .mobile-lang-btn {
    min-height: 44px;
  }
  .mobile-menu {
    border-radius: 0 0 20px 20px;
  }
}

@media (max-width: 380px) {
  .shell {
    width: calc(100% - 24px);
  }
  .mobile-actions {
    gap: 4px;
  }
  .mobile-lang-btn {
    padding: 0 6px;
    gap: 3px;
  }
  .mobile-lang-btn .language-chevron {
    display: none;
  }
}
@media (max-width: 480px) {
  .mobile-bar .brand {
    min-width: 0;
  }
  .mobile-bar .brand-logo {
    width: 100%;
    max-width: 124px;
    height: auto;
  }
  .mobile-actions {
    flex: none;
    gap: 8px;
  }
  .hamburger-btn {
    width: 44px;
    min-height: 44px;
    padding-inline: 2px;
    font-size: 0.62rem;
  }
  .mobile-lang-btn {
    padding-inline: 6px;
  }
  .mobile-lang-btn .language-chevron {
    display: none;
  }
}
.search-panel {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 25;
  margin: 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 20px 32px rgba(6, 63, 64, 0.12);
  max-height: calc(100dvh - 114px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 0.28s ease,
    transform 0.28s ease,
    opacity 0.2s ease,
    visibility 0.28s;
}
.search-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  clip-path: inset(-10px -50px -50px);
}
.search-inner {
  padding-block: 24px 26px;
}
.search-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.search-heading label {
  color: var(--teal-dark);
  font-size: 0.83rem;
  font-weight: 600;
}
.search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 4px 8px;
  color: var(--muted);
  border-radius: 8px;
}
.search-close:hover {
  color: var(--teal);
  background: #eef7f5;
}
.search-close svg {
  width: 18px;
  height: 18px;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 66px;
  padding: 8px 12px;
  border: 1px solid #dce7e3;
  border-radius: 12px;
  background: #f7faf8;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.search-field:focus-within {
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px #087f7a0c;
}
.search-field-icon {
  width: 23px;
  height: 23px;
  color: var(--teal);
  margin-inline-start: 5px;
}
.search-field input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
}
.search-field input::placeholder {
  color: #7a8984;
  font-weight: 400;
}
.search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: none;
  min-height: 46px;
  padding: 8px 24px;
  border-radius: 8px;
  color: #fff;
  background: var(--teal);
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.2s ease;
}
.search-submit:hover {
  background: var(--teal-dark);
}
.search-submit svg {
  width: 17px;
  height: 17px;
}

.search-results {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}
.search-results-status {
  margin: 14px 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.search-results-list a {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
}
.search-results-list a:hover,
.search-results-list a:focus-visible {
  background: #eef7f5;
}
.search-results-list strong {
  font-size: 0.9rem;
  color: var(--teal-dark);
}
.search-results-list span {
  font-size: 0.75rem;
  color: var(--muted);
}
@media (max-width: 600px) {
  .search-inner {
    padding-block: 16px 20px;
  }
  .search-heading {
    margin-bottom: 10px;
  }

  .search-close {
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
  }
  .search-field {
    min-height: 58px;
    gap: 8px;
    padding: 6px 8px;
  }
  .search-field input {
    font-size: 16px;
  }
  .search-field-icon {
    width: 18px;
    height: 18px;
    margin: 0;
  }
  .search-submit {
    gap: 6px;
    min-height: 42px;
    padding-inline: 14px;
  }
  .search-submit svg {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Mobil açılır menü bölümü bitişi */
/* Gezinme menüsü stilleri bölümü bitişi */

/* 2026-09-30 (revizeler30-09 md.2, müşteri: "bu kadar dağınık olmasın, fazla
   boşluk var, flex'in boşluklarını kenarlara verelim"): 29-09'daki "öğeler kalan
   genişliği eşit paylaşsın" (flex 1 1 auto) geri alındı. Öğeler metin + sabit
   aralık genişliğinde, grup ortada; artan alan menünün iki KENARINA gidiyor.
   Aralık 1280px'te ~9px → 1600px ve üzerinde 26px (tarayıcıda TR/AR/FR/EN
   1090–2560px taşmasız ölçüldü). */
.nav-links {
  --nav-gap: clamp(8px, -3.6875rem + 5.3125vw, 26px);
}
.nav-links > a,
.nav-links > .nav-dropdown {
  flex: none;
}
/* AR (Noto Kufi daha geniş) 1241–1260px'te 1px taşıyordu → aralık 7px */
@media (min-width: 1241px) and (max-width: 1260px) {
  .site-header[dir="rtl"] .nav-links {
    --nav-gap: 7px;
  }
}

/* 2026-09-30 (md.2 düzeltme, kullanıcı açıklaması): artan boşluk menünün kenarına
   değil, TÜM grubun (logo + menü + ikonlar + Bağış Yap) dışına gider — yarısı
   logonun soluna, yarısı Bağış Yap butonunun sağına (RTL'de ayna). Menü kalan
   alanı doldurmuyor (0 1 auto; gerekirse küçülebilir), grup auto marjlarla
   ortalanıyor; yer yoksa auto marjlar 0'a iner. ≥1681px'te logo–menü ve
   menü–ikonlar arasına +16px. TR/AR/FR/EN 1100–2560px sol = sağ, taşmasız ölçüldü. */
@media (min-width: 1081px) {
  .mainbar .shell .nav-links {
    flex: 0 1 auto;
  }
  .mainbar .shell > .brand {
    margin-inline-start: auto;
  }
  .mainbar .shell > .nav-actions {
    margin-inline-end: auto;
  }
}
@media (min-width: 1081px) and (max-width: 1240px) {
  .mainbar .shell > .hamburger-btn--tablet {
    margin-inline-end: auto;
  }
}
@media (min-width: 1681px) {
  .mainbar .shell > .brand {
    margin-inline-end: 16px;
  }
  .mainbar .shell > .nav-utility {
    margin-inline-start: 16px;
  }
}

/* 2026-10-12 (müşteri revizesi) ------------------------------------------
   1) #i-arrow sola bakıyor: LTR dillerde (TR/EN/FR) arama düğmesindeki ve mobil
      menü satırlarındaki ok ters görünüyordu → aynalanır (faaliyetler/sepet ile aynı yöntem).
   2) Üst çubuk mobilde: TR'deki üç öğe ("Hesap Numaralarımız | Gönüllü Ol | İletişim")
      ikişer satıra bölünüp çubuğu 45 px'e uzatıyordu → tek satır, dar ekranda ikonsuz. */
[dir="ltr"] .search-submit svg,
[dir="ltr"] .mobile-menu-link .chevron {
  transform: scaleX(-1);
}
@media (max-width: 560px) {
  .topbar .shell {
    width: calc(100% - 24px);
    gap: 12px;
    flex-wrap: nowrap;
  }
  .topbar a,
  .topbar .topbar-item {
    white-space: nowrap;
    font-size: 0.74rem;
    gap: 5px;
  }
}
@media (max-width: 400px) {
  .topbar .shell {
    gap: 9px;
  }
  .topbar svg {
    display: none;
  }
}
@media (max-width: 360px) {
  .topbar .shell {
    width: calc(100% - 16px);
    gap: 6px;
  }
  .topbar a,
  .topbar .topbar-item {
    font-size: 0.7rem;
  }
}
/* 2026-10-12 bitişi */

/* 2026-10-12 (müşteri): mobil hamburger ikonu kutunun ortasında değildi — düğme dikey sütun (ikon + altında
   "Menü" metni için) ama metin boş olduğundan ikon üstte kalıyordu (üst 6 / alt 18 px). İçerik ortalanır. */
.hamburger-btn {
  justify-content: center;
}

/* 2026-10-12 — navbar "Bağış Yap": düğme içinde süzülen minik kalpler (yalnız .btn-donate--kalpli) ------------
   8 dolu kalp farklı konum/boy/gecikmeyle aşağıdan yukarı süzülüp söner (6 sn döngü). Renk: yarı saydam beyaz +
   altın (marka). Yazı ve ikon üstte kalır; hareket azaltma tercihi olanlarda kapalı. */
.btn-donate--kalpli {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-donate--kalpli > :not(.kalp-yuzen) {
  position: relative;
  z-index: 1;
}
.btn-donate--kalpli .kalp-yuzen {
  position: absolute;
  left: var(--x);
  bottom: -12px;
  z-index: 0;
  width: var(--s);
  height: var(--s);
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  pointer-events: none;
  animation: kalp-suzul 6s linear infinite;
  animation-delay: var(--d);
}
.btn-donate--kalpli .kalp-yuzen:nth-of-type(3n) {
  color: var(--gold);
}
.btn-donate--kalpli .kalp-yuzen svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}
@keyframes kalp-suzul {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15% { opacity: var(--o); }
  50% { transform: translate(var(--dx), -28px) scale(1); }
  80% { opacity: var(--o); }
  100% { transform: translate(0, -58px) scale(0.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-donate--kalpli .kalp-yuzen { display: none; }
}

/* 2026-10-12 (kullanıcı, revize): fare üstündeyken küçük kalpler AYNI akışla süzülmeye devam eder ama daha soluk;
   büyük kalp beyazla dolup atar. Fare çekilince kalpler yumuşakça eski belirginliğine döner; büyük kalp o anki
   atışını bitirip durur ve dolgusu yavaşça söner (durma zamanlaması js/navbar-yeni.js — .kalp-atiyor sınıfı). */
.btn-donate--kalpli .kalp-yuzen {
  filter: opacity(1);
  transition: filter 0.5s ease;
}
.btn-donate--kalpli:hover .kalp-yuzen,
.btn-donate--kalpli:focus-visible .kalp-yuzen {
  filter: opacity(0.35);
}
.btn-donate--kalpli .kalp-buyuk {
  fill: rgba(255, 255, 255, 0);
  transform-origin: center;
  transition: fill 0.6s ease;
}
.btn-donate--kalpli.kalp-dolu .kalp-buyuk {
  fill: rgba(255, 255, 255, 1);
  transition-duration: 0.25s;
}
.btn-donate--kalpli.kalp-atiyor .kalp-buyuk {
  animation: kalp-atisi 1s ease-in-out infinite;
}
@keyframes kalp-atisi {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.28); }
  30% { transform: scale(1); }
  45% { transform: scale(1.18); }
  60% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-donate--kalpli.kalp-atiyor .kalp-buyuk { animation: none; }
}