/* =========================================================
   Adil Paylaşım Derneği — Public Site
   Kurumsal · sade · ferah · animasyonlu
   ========================================================= */

:root {
  --bg: #f6f8fc;
  --bg-2: #eef2f9;
  --white: #ffffff;
  --navy-1: #0b3d80;
  --navy-2: #082f60;
  --navy-3: #051a3a;
  --ink: #0d1f3c;
  --text: #1c2e4a;
  --muted: #5d6e87;
  --muted-2: #8595ad;
  --line: #e4ebf4;
  --line-2: #f0f4fa;
  --red: #e11d36;
  --red-2: #b81529;
  --red-soft: #fde7ea;
  --blue-soft: #ebf2fc;
  --yellow: #f5a623;
  --yellow-soft: #fff3dc;
  --green: #1f9c5d;
  --green-soft: #e2f7ec;
  --gold: #c8a96a;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-xs: 0 1px 2px rgba(11, 38, 78, 0.05);
  --shadow-sm: 0 4px 14px rgba(11, 38, 78, 0.06);
  --shadow-md: 0 12px 30px rgba(11, 38, 78, 0.10);
  --shadow-lg: 0 24px 60px rgba(11, 38, 78, 0.16);
  --shadow-xl: 0 40px 80px rgba(11, 38, 78, 0.22);
  --container: 1280px;
  --hairline: 1px solid var(--line);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;

  /* Type scale (modular, 1.25 ratio) */
  --fs-xs: 0.75rem;     /* 12px — labels, eyebrows */
  --fs-sm: 0.85rem;     /* 13.6px — small body */
  --fs-base: 0.95rem;   /* 15.2px — body */
  --fs-md: 1.05rem;     /* 16.8px — lead/intro */
  --fs-lg: 1.25rem;     /* 20px — h4 */
  --fs-xl: 1.55rem;     /* 24.8px — h3 */
  --fs-2xl: 2rem;       /* 32px — h2 */
  --fs-3xl: 2.55rem;    /* 40.8px — section h2 large */
  --fs-display: 3rem;   /* 48px — hero h1 */

  /* Spacing scale (8pt grid) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* Motion tokens */
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 360ms;
  --dur-slower: 600ms;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
/* HTML background'ı header gradient'inin ortalama lacivertine eşitle —
   scroll sırasında üstte/altta belirebilecek beyaz "overscroll" alanı
   görünmesin (kullanıcı QA bulgusu). */
html {
  scroll-behavior: smooth;
  background: #082f60;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  position: relative;
}

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

h1, h2, h3, h4 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

p {
  margin: 0 0 0.85rem;
  color: var(--muted);
  line-height: 1.72;
  font-size: 0.97rem;
  font-weight: 400;
}

a { color: var(--navy-1); }

input, textarea, button, select { font: inherit; }

/* A11y: visible focus on keyboard navigation */
:focus-visible {
  outline: 2px solid var(--navy-1);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--navy-1);
}
.main-nav a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 4px;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 99;
  background: #fff; padding: 0.5rem 0.75rem; border-radius: 8px;
}

.container {
  width: min(calc(100% - 2.5rem), var(--container));
  margin: 0 auto;
}

/* ============ SCROLL PROGRESS BAR ============ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--red), #ff5b6e);
  z-index: 200;
  transition: width 120ms linear;
  box-shadow: 0 0 12px rgba(226, 29, 54, 0.6);
}

/* ============ SCROLL TOP ============ */
.scroll-top {
  position: fixed;
  right: 1.5rem;
  bottom: 5.5rem;
  z-index: 49;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--navy-1);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease;
  box-shadow: 0 10px 24px rgba(10, 58, 120, 0.40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scroll-top:hover { background: var(--red); transform: translateY(-3px); }
.scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top svg { width: 20px; height: 20px; }

/* ============ COOKIE BANNER ============ */
.cookie-banner {
  position: fixed;
  left: auto;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(11, 38, 78, 0.20);
  width: min(440px, calc(100vw - 2rem));
  max-width: 440px;
  margin: 0;
}
.cookie-banner.out { opacity: 0; transform: translateY(20px); transition: opacity 400ms ease, transform 400ms ease; }
.cookie-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem;
  flex-wrap: wrap;
}
.cookie-text { flex: 1; min-width: 0; }
.cookie-text strong { display: block; color: var(--ink); margin-bottom: 0.25rem; font-size: 0.95rem; }
.cookie-text p { margin: 0; font-size: 0.85rem; line-height: 1.45; }
.cookie-text a { color: var(--navy-1); font-weight: 700; }
.cookie-actions { display: flex; justify-content: flex-end; gap: 0.5rem; width: 100%; }
.cookie-actions .btn { padding: 0.62rem 0.95rem; font-size: 0.8rem; }

/* ============ EYEBROW ============ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}
.eyebrow .line {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
}
.eyebrow.center .line { width: 32px; }
.eyebrow.light { color: rgba(255,255,255,0.92); }
.eyebrow.light .line { background: var(--red); }

.section-head.center { justify-content: center; text-align: center; }
.section-head.center > div { display: flex; flex-direction: column; align-items: center; }
.section h2.center-title { padding-bottom: 0.65rem; }
.section h2.center-title::after { left: 50%; transform: translateX(-50%); }

section[id],
#donation,
#contact,
#projects,
#news,
#gallery,
#about,
#volunteer {
  scroll-margin-top: 98px;
}

/* ============ PARTNERS BELT ============ */
.partners-belt {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.4rem 0;
  overflow: hidden;
}
.partners-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.partners-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  border-right: 1px solid var(--line);
  padding-right: 1.5rem;
}
.partners-marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners-track {
  display: flex;
  gap: 3rem;
  width: fit-content;
  animation: marqueeScroll 32s linear infinite;
}
.partners-marquee:hover .partners-track { animation-play-state: paused; }
.partner-logo {
  display: inline-flex;
  align-items: center;
  height: 36px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #94a4c0;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color 220ms ease;
}
.partner-logo:hover { color: var(--navy-1); }
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============ HERO SCROLL HINT ============ */
.hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: 24px;
  height: 38px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  z-index: 5;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 220ms ease, opacity 220ms ease;
  opacity: 0.7;
  display: none;
}
.hero-scroll-hint:hover { border-color: #fff; opacity: 1; }
.hero-scroll-hint span {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  background: #fff;
  border-radius: 2px;
  animation: scrollHint 1.6s ease-in-out infinite;
}
@keyframes scrollHint {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}

/* ============ FLOATING BADGE (about) ============ */
.floating-badge {
  position: absolute;
  right: -16px;
  top: 24px;
  z-index: 5;
  background: #fff;
  border-radius: 14px;
  padding: 0.7rem 0.9rem 0.7rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 16px 36px rgba(11, 38, 78, 0.18);
  animation: floatY 4.5s ease-in-out infinite;
}
.floating-badge .fb-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd64a, #f5a623);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.floating-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--ink);
  line-height: 1;
}
.floating-badge span {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============ IMPACT / TESTIMONIALS ============ */
.impact-section {
  background: linear-gradient(135deg, #082f60 0%, #0a3a78 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.impact-section::before {
  content: '';
  position: absolute;
  right: -120px;
  top: -120px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(226, 29, 54, 0.18), transparent 60%);
  border-radius: 50%;
}
.impact-section::after {
  content: '';
  position: absolute;
  left: -100px;
  bottom: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 65%);
  border-radius: 50%;
}
.impact-grid {
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  gap: 3.5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}
.impact-quote h2 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  line-height: 1.02;
  margin-bottom: 1.4rem;
  padding-bottom: 0;
  font-weight: 600;
  letter-spacing: -0.028em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.impact-quote h2::after { display: none; }
.impact-quote p {
  color: rgba(231, 239, 255, 0.82);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 1.8rem;
}
.impact-stat {
  display: inline-flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
}
.impact-stat strong {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: #fff;
  line-height: 1;
}
.impact-stat span {
  font-size: 0.82rem;
  color: rgba(231, 239, 255, 0.72);
  margin-top: 0.35rem;
  font-weight: 500;
}

.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.testimonial-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  transition: transform 280ms ease, background 280ms ease, border-color 280ms ease;
}
.testimonial-card:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateX(6px);
}
.t-stars {
  color: #ffc83d;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.6rem;
}
.t-quote {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.t-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.t-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #ff5b6e);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
}
.t-author strong {
  display: block;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 700;
}
.t-author span {
  color: rgba(231, 239, 255, 0.68);
  font-size: 0.78rem;
}

/* ============ PROJECT TAG ============ */
.project-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--red);
  color: #fff;
  padding: 0.32rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 6px;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(226, 29, 54, 0.35);
}

/* ============ NEWS HEAD ============ */
.news-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.3rem;
}
.news-tag {
  display: inline-block;
  background: var(--blue-soft);
  color: var(--navy-1);
  padding: 0.22rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 5px;
  text-transform: uppercase;
}

/* ============ DONATION ENHANCEMENTS ============ */
.donation-heading {
  font-family: var(--font-display);
  font-size: 1.65rem;
  color: var(--ink);
  margin: 0 0 0.75rem;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.donation-perks {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0;
  display: grid;
  gap: 0.55rem;
}
.donation-perks li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.9rem;
  font-family: var(--font-sans);
}
.donation-perks .check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.donation-trust-grid {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
.donation-trust-item {
  border: 1px solid #e7edf7;
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.55rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.donation-trust-item .icon {
  width: 16px;
  height: 16px;
  color: var(--navy-1);
}
.donation-trust-item strong {
  font-size: 0.8rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* ============ VOLUNTEER FORM ENHANCEMENTS ============ */
.form-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 0 0.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.form-sub {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 1.3rem;
}
.consent-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.55rem !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
}
.consent-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--red);
}

/* ============ CONTACT HEADING ============ */
.contact-heading {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: #fff;
  margin: 0 0 0.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.contact-sub {
  font-size: 0.95rem;
  color: rgba(231, 239, 255, 0.78);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* ============ FOOTER BOTTOM RIGHT ============ */
.footer-bottom-right {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

/* ============ FORM SUCCESS STATE ============ */
.form-status.success {
  background: var(--green-soft);
  color: var(--green);
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  border-left: 3px solid var(--green);
  animation: fadeUp 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ============ REVEAL ANIMATIONS ============
   JS adds .reveal-pending class via IntersectionObserver only when element
   is below-the-fold AND not yet visible. Above-the-fold remains visible immediately.
   This prevents "empty section" feeling on first paint. */
.reveal { opacity: 1; transform: none; }
.reveal-pending {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal-pending.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left.reveal-pending { transform: translateX(-20px); }
.reveal-left.reveal-pending.in-view { transform: translateX(0); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes floatRot {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ============ BUTTONS ============ */
.btn {
  position: relative;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  border-radius: 10px;
  padding: 0.88rem 1.4rem;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), background 250ms var(--ease), color 250ms var(--ease);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
}
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent);
  transform: translateX(-150%) skewX(-20deg);
  transition: transform 800ms var(--ease);
  z-index: -1;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translateX(350%) skewX(-20deg); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn .icon svg { width: 100%; height: 100%; }

.btn-danger {
  background: linear-gradient(180deg, #ea2740, var(--red-2));
  color: #fff;
  box-shadow: 0 8px 20px rgba(225, 29, 54, 0.28), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-danger:hover {
  background: linear-gradient(180deg, #f23149, var(--red));
  box-shadow: 0 14px 30px rgba(225, 29, 54, 0.42), inset 0 1px 0 rgba(255,255,255,0.22);
}

.btn-primary {
  background: linear-gradient(180deg, #0d4793, #0a3a78);
  color: #fff;
  box-shadow: 0 8px 20px rgba(11, 61, 128, 0.30), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover { box-shadow: 0 14px 30px rgba(11, 61, 128, 0.45), inset 0 1px 0 rgba(255,255,255,0.22); }

.btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.85);
}

.btn-outline-blue {
  border: 1.5px solid #c8d6ea;
  color: var(--navy-1);
  background: #fff;
}
.btn-outline-blue:hover {
  background: var(--navy-1);
  border-color: var(--navy-1);
  color: #fff;
}

/* ============ HEADER ============ */
/* KÖKLÜ FIX (kullanıcı QA): "scroll ederken üstte beyaz şerit beliriyor".
   Üç katmanlı koruma:
   1) public-body bg lacivert → body üstünde/altında overscroll'da beyaz çıkmaz.
   2) Header scrolled state SOLID (alpha 1.0 + backdrop-filter YOK).
      Alpha 0.92 + backdrop blur, transition sırasında ve repaint anlarında
      arkadaki beyaz section'ı sızdırıyordu — tek seferlik beyaz flash kaynağıydı.
   3) html bg lacivert (önceki fix korunur). */
.public-body {
  background: #082f60;
}
/* Section'lar kendi bg'sini taşıyor; gerekli yerlere "sayfa" tonu */
.public-body .section.about-section,
.public-body .section.news-section,
.public-body .section.donation-section,
.public-body .section.contact-section {
  background: var(--bg);
}
.public-body .section.projects-section,
.public-body .section.gallery-section,
.public-body .section.volunteer-section {
  background: #fff;
}

.public-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(180deg, #0a3a78 0%, #082f60 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: box-shadow 260ms var(--ease);
}
/* Scrolled durumda SADECE shadow ekle, bg'i değiştirme — beyaz sızıntı sebebi
   alpha 0.92 + backdrop-filter idi, kaldırıldı. */
.public-header.scrolled {
  box-shadow: 0 6px 24px rgba(6, 24, 56, 0.28);
}

.nav-shell {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  transition: transform 240ms var(--ease);
}
.brand:hover { transform: scale(1.02); }
.brand img {
  height: 56px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* ============ BRAND CARD — Sol Şerit + Diagonal Şerit + Alt Highlight ============
   Kullanıcı QA v5: "sadece SOL'dan yukarıya kırmızı şerit, EĞİK çizgiyi
   kırmızı şeritle çiz, altlarına yarı saydam beyaz çizgi". Üst+sağ-alt
   kırmızı çerçeve YOK.

   3 katman:
   1) PARENT: beyaz arka plan + SOL 4px kırmızı dik şerit (background gradient)
      + clip-path (sağ üst diagonal kesim)
   2) ::before: diagonal kesim hattı BOYUNCA 4px kırmızı şerit
      → `linear-gradient(to bottom right, ...)` ile kesim alanı içinde köşegen
      şerit oluşturulur — clip-path nedeniyle dışı zaten kesik
   3) ::after: alt kenarda yarı saydam beyaz ince highlight çizgisi
      (premium "kabartma" hissi, hafif iç parlama) */
.public-header .brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.85rem 0.55rem 1.15rem;
  background: linear-gradient(
    90deg,
    var(--red) 0,
    var(--red) 4px,
    #ffffff 4px,
    #ffffff 100%
  );
  clip-path: polygon(
    0 0,
    calc(100% - 22px) 0,
    100% 100%,
    0 100%
  );
  border-radius: 0;
  filter:
    drop-shadow(0 4px 10px rgba(3, 14, 36, 0.32))
    drop-shadow(0 16px 32px rgba(3, 14, 36, 0.22));
  transition: transform 220ms var(--ease), filter 220ms var(--ease);
}

/* Diagonal kesim hattı boyunca KIRMIZI şerit
   (kesim alanı içinde köşegen gradient ile) */
.public-header .brand::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 100%;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 2.5px),
    var(--red) calc(50% - 2.5px),
    var(--red) calc(50% + 2.5px),
    transparent calc(50% + 2.5px)
  );
  pointer-events: none;
  z-index: 0;
}

/* Alt kenarda yarı saydam beyaz highlight çizgisi — premium dolgu */
.public-header .brand::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 16px;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.85) 25%,
    rgba(255, 255, 255, 0.85) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.public-header .brand:hover {
  transform: translateY(-1px);
  filter:
    drop-shadow(0 6px 14px rgba(3, 14, 36, 0.36))
    drop-shadow(0 20px 40px rgba(3, 14, 36, 0.26));
}
.public-header .brand:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.public-header .brand img {
  filter: none;
  position: relative;
  z-index: 2;
}
@media (max-width: 980px) {
  .brand img { height: 48px; }
}
@media (max-width: 420px) {
  .brand img { height: 42px; max-width: 220px; }
}

.mobile-menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
}
.mobile-menu-btn span {
  display: none;
}
.mobile-menu-btn::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
}

.main-nav {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.05rem;
}
.main-nav a {
  position: relative;
  color: rgba(232, 239, 255, 0.78);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.7rem 0.7rem;
  border-radius: 6px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 200ms var(--ease);
}
.main-nav a:hover, .main-nav a:focus-visible { color: #fff; }
.main-nav a.active { color: #fff; }
.main-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.25rem;
  width: 0;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 260ms var(--ease);
}
.main-nav a.active::after,
.main-nav a:hover::after { width: calc(100% - 1.4rem); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #cfdcf2;
  font-weight: 700;
  font-size: 0.84rem;
}
.lang-btn {
  border: 0;
  background: transparent;
  color: #aab8d3;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color 180ms ease;
}
.lang-btn:hover { color: #fff; }
.lang-btn.active { color: #fff; }
.lang-sep { opacity: 0.45; color: #cfdcf2; }

#headerDonateBtn {
  padding: 0.7rem 1.25rem;
  font-size: 0.82rem;
}

/* ============ HERO — REFINED & COMPACT ============ */
/* Hero-section bg'i gradient: ÜST kısım lacivert (hero-shell ile birleşik
   görünür, sticky header'in arkasından beyaz "sızıntı" engellenir),
   ALT 80px soft beyaz (stats-ribbon'un arkası için yumuşak geçiş).
   Kullanıcı QA: "biraz aşağı kaydırdığımda kısa süre beyaz alan beliriyor". */
.hero-section {
  background: linear-gradient(
    180deg,
    #082f60 0%,
    #082f60 calc(100% - 86px),
    var(--bg) calc(100% - 86px),
    var(--bg) 100%
  );
  padding-bottom: 70px;
  position: relative;
  isolation: isolate;
}

.hero-shell {
  position: relative;
  display: grid;
  grid-template-columns: 0.56fr 0.44fr;
  height: clamp(620px, 72vh, 700px);
  background: var(--navy-2);
  overflow: hidden;
  width: 100%;
}

.hero-left {
  position: relative;
  z-index: 2;
  padding: 0;
  color: #fff;
  background:
    radial-gradient(ellipse 700px 500px at 22% 30%, rgba(225, 29, 54, 0.18), transparent 65%),
    radial-gradient(ellipse 900px 500px at 110% 110%, rgba(20, 87, 168, 0.42), transparent 70%),
    linear-gradient(135deg, #051a3a 0%, #082f60 55%, #0a3a78 100%);
  display: grid;
  place-items: center;
  animation: fadeUp 900ms var(--ease) both;
  clip-path: polygon(0 0, 100% 0, calc(100% - 90px) 100%, 0 100%);
  margin-right: -90px;
}
.hero-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 40% 60%, #000 30%, transparent 80%);
}

.hero-inner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 clamp(1.8rem, 4vw, 4.4rem);
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 0.42rem 0.85rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  margin-bottom: 1.1rem;
  animation: fadeUp 800ms 100ms var(--ease) both;
  backdrop-filter: blur(6px);
  width: max-content;
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(225,29,54,0.22);
  animation: blink 1.8s infinite;
}

.hero-left h1 {
  font-family: var(--font-display);
  font-size: clamp(2.55rem, 4.35vw, 3.8rem);
  line-height: 1.04;
  color: #fff;
  margin: 0 0 1.1rem;
  white-space: pre-line;
  font-weight: 600;
  letter-spacing: -0.028em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  animation: fadeUp 900ms 150ms var(--ease) both;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.hero-left p {
  color: rgba(231, 239, 255, 0.82);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 1.7rem;
  max-width: 480px;
  font-weight: 400;
  animation: fadeUp 900ms 250ms var(--ease) both;
}

.hero-cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  animation: fadeUp 900ms 350ms var(--ease) both;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  animation: fadeUp 900ms 500ms var(--ease) both;
}
.trust-avatars {
  display: flex;
}
.trust-avatars span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #082f60;
  margin-right: -10px;
  background: linear-gradient(135deg, #4a6fa5, #2e4f87);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.trust-avatars span:nth-child(2) { background: linear-gradient(135deg, #e76e83, #c0223a); }
.trust-avatars span:nth-child(3) { background: linear-gradient(135deg, #5e8fc3, #355d92); }
.trust-avatars span:nth-child(4) { background: linear-gradient(135deg, #f4a83d, #d88516); }
.trust-text { display: flex; flex-direction: column; line-height: 1.15; }
.trust-text strong {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
}
.trust-text span {
  color: rgba(231, 239, 255, 0.6);
  font-size: 0.75rem;
  margin-top: 1px;
}

.hero-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "big top"
    "big bot";
  gap: 8px;
  background: #051a3a;
  padding: 0 0 0 8px;
  animation: fadeIn 1000ms 200ms var(--ease) both;
}
.hero-collage::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, transparent, var(--red) 30%, var(--red) 70%, transparent);
  transform-origin: top;
  transform: skewX(-9deg);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(226, 29, 54, 0.55);
}
.hero-tile {
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #1c3a5f, #0a2f5c);
}
.hero-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms var(--ease);
}
.hero-tile:hover img { transform: scale(1.06); }
.hero-tile.tile-big { grid-area: big; }
.hero-tile.tile-top { grid-area: top; }
.hero-tile.tile-bot { grid-area: bot; }
.hero-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 26, 58, 0) 50%, rgba(5, 26, 58, 0.4));
  opacity: 0.6;
  transition: opacity 400ms var(--ease);
}
.hero-tile:hover::after { opacity: 0.15; }

/* Floating WhatsApp */
.wa-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.45);
  transition: transform 240ms var(--ease);
  animation: pulseRing 2.4s infinite;
}
.wa-float:hover { transform: scale(1.10); }
.wa-float svg { width: 30px; height: 30px; }
.wa-float span { display: none; }

/* ============ STATS RIBBON ============ */
.stats-ribbon {
  margin-top: -50px;
  position: relative;
  z-index: 20;
  border: var(--hairline);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(11, 38, 78, 0.12), 0 2px 8px rgba(11, 38, 78, 0.04);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  animation: fadeUp 800ms 250ms var(--ease) both;
}

.stat-item {
  padding: 1.5rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  border-right: 1px solid var(--line-2);
  transition: background var(--dur-base) ease;
  position: relative;
  min-height: 102px;
}
.stat-item:hover { background: linear-gradient(180deg, #fafcff, #f4f7fc); }
.stat-item:last-child { border-right: 0; }

.stat-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--blue-soft);
  color: var(--navy-1);
  flex-shrink: 0;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
  position: relative;
}
.stat-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent 50%);
  pointer-events: none;
}
.stat-item:hover .stat-icon {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(11, 61, 128, 0.14);
}
.stat-icon svg { width: 30px; height: 30px; position: relative; z-index: 1; }
.stat-icon.red {
  background: linear-gradient(135deg, #fde7ea, #fbd0d6);
  color: var(--red);
}
.stat-icon.blue {
  background: linear-gradient(135deg, #ebf2fc, #d4e4f8);
  color: var(--navy-1);
}
.stat-icon.green {
  background: linear-gradient(135deg, var(--green-soft), #c2eed4);
  color: var(--green);
}
.stat-icon.yellow {
  background: linear-gradient(135deg, var(--yellow-soft), #ffe2a8);
  color: #c97f0e;
}

.stat-copy {
  min-width: 0;
}
.stat-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.95rem;
  color: var(--ink);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 144;
}
.stat-copy span {
  display: block;
  color: var(--muted);
  font-size: 0.87rem;
  margin-top: 0.45rem;
  font-weight: 600;
}

/* ============ SECTION ============ */
.section { padding: 5.5rem 0; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 2.6rem;
}
.section-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.rail-controls {
  display: none;
  align-items: center;
  gap: 0.45rem;
}
.rail-controls.visible {
  display: inline-flex;
}
.rail-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease), opacity 220ms var(--ease);
}
.rail-btn svg {
  width: 15px;
  height: 15px;
}
.rail-btn:hover {
  transform: translateY(-2px);
  border-color: var(--navy-1);
  background: var(--navy-1);
  color: #fff;
}
.rail-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  background: #fff;
  color: var(--muted-2);
  border-color: var(--line);
}

.section h2 {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 3vw, 2.55rem);
  color: var(--ink);
  margin: 0;
  padding-bottom: 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.section h2::after { display: none; }

.head-link {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  text-decoration: none;
  border: 1.5px solid var(--line);
  color: var(--navy-1);
  padding: 0.68rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  transition: background 240ms var(--ease), border-color 240ms var(--ease), transform 240ms var(--ease), color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.head-link:hover {
  background: var(--navy-1);
  border-color: var(--navy-1);
  color: #fff;
  transform: translateX(4px);
  box-shadow: 0 8px 20px rgba(11, 61, 128, 0.25);
}
.head-link svg { width: 14px; height: 14px; }
.head-link .icon { width: 14px; height: 14px; }

/* ============ ABOUT ============ */
.about-section { background: var(--bg); overflow: hidden; }

.about-grid {
  display: grid;
  grid-template-columns: 0.48fr 0.52fr;
  gap: 3.5rem;
  align-items: center;
}

.about-text h2 { margin-bottom: 1.3rem; }
.about-text p { max-width: 540px; font-size: 1.02rem; line-height: 1.74; }

.about-bullets {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 2rem;
  display: grid;
  gap: 0.9rem;
}
.about-bullets li {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.98rem;
  transition: transform 220ms var(--ease);
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
}
.about-bullets li:hover { transform: translateX(4px); }
.about-bullets .bullet-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 240ms var(--ease), background 240ms ease;
}
.about-bullets li:hover .bullet-icon {
  transform: scale(1.08);
  background: var(--red);
  color: #fff;
}
.about-bullets .bullet-icon svg { width: 16px; height: 16px; }

.about-visual {
  position: relative;
}
.about-visual::before {
  content: '';
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 70%;
  height: 70%;
  border: 3px solid var(--red);
  border-radius: 18px;
  opacity: 0.22;
  z-index: 0;
}
.about-visual::after {
  content: '';
  position: absolute;
  left: -20px;
  top: -20px;
  width: 110px;
  height: 110px;
  background: linear-gradient(135deg, rgba(226,29,54,0.22), rgba(226,29,54,0.06));
  border-radius: 16px;
  z-index: 0;
}
.about-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 18px;
  height: 400px;
  object-fit: cover;
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, #cfd8e8, #e3e9f4);
  transition: transform 600ms var(--ease);
}
.about-visual:hover img { transform: scale(1.02); }

/* ============ MISSION / VISION ============ */
.mission-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.mission-card {
  border: var(--hairline);
  border-radius: 16px;
  background: #fff;
  padding: 1.8rem 1.9rem;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 1.3rem;
  align-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
  position: relative;
  overflow: hidden;
}
.mission-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, transparent 60%, rgba(226,29,54,0.04));
  opacity: 0;
  transition: opacity 360ms var(--ease);
}
.mission-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.mission-card:hover::before { opacity: 1; }

.mission-icon {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 320ms var(--ease);
  position: relative;
  z-index: 1;
}
.mission-card:hover .mission-icon {
  transform: scale(1.06);
}
.mission-icon svg { width: 30px; height: 30px; }

.mission-card h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.mission-card p { margin: 0; font-size: 0.94rem; line-height: 1.68; color: var(--muted); }

/* ============ PROJECTS ============ */
.projects-section { background: #fff; }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}

.project-card {
  border: var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 280ms ease;
}
.project-link-wrap {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.project-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(10, 58, 120, 0.18);
}
.project-card:focus-within {
  outline: 2px solid var(--navy-1);
  outline-offset: 3px;
}

.project-card .img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, #cfd8e8, #e3e9f4);
}
.project-card .img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 47, 96, 0.42));
  opacity: 0.7;
  transition: opacity 360ms var(--ease);
}
.project-card:hover .img-wrap::after { opacity: 0.3; }
.project-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease);
}
.project-card:hover .img-wrap img { transform: scale(1.10); }

.card-body {
  padding: 1.3rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}
.card-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #d6e1f1;
  background: #f7faff;
  color: var(--navy-1);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.52rem;
}
.card-body h3 {
  margin: 0.2rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.22;
}
.card-body p {
  font-size: 0.92rem;
  margin: 0 0 1.2rem;
  flex: 1;
  line-height: 1.62;
  color: var(--muted);
}

.card-link {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--navy-1);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  letter-spacing: 0.02em;
  align-self: flex-start;
  text-transform: uppercase;
}
.card-link::after {
  content: '→';
  font-size: 1rem;
  transition: transform 240ms var(--ease);
}
.card-link:hover { color: var(--red); }
.card-link:hover::after { transform: translateX(6px); }

/* ============ NEWS ============ */
.news-section { background: var(--bg); }

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}

.news-card {
  border: var(--hairline);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
  position: relative;
  overflow: hidden;
}
.news-link-wrap {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.news-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 380ms var(--ease);
}
.news-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.news-card:focus-within {
  outline: 2px solid var(--navy-1);
  outline-offset: 3px;
}
.news-card:hover::before { transform: scaleY(1); }
.news-cover {
  height: 178px;
  background: linear-gradient(135deg, #d2dced, #ebf0f8);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.news-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 720ms var(--ease);
}
.news-card:hover .news-cover img { transform: scale(1.08); }
.news-body {
  padding: 1.25rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.news-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0.6rem 0 0.62rem;
  letter-spacing: -0.022em;
  font-weight: 600;
  line-height: 1.25;
}
.news-card p {
  font-size: 0.92rem;
  margin: 0 0 1rem;
  flex: 1;
  line-height: 1.62;
  color: var(--muted);
}
.news-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-top: auto;
}
.news-readtime {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.news-readtime .icon {
  width: 14px;
  height: 14px;
}

.card-meta {
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.projects-grid.is-rail,
.news-grid.is-rail {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 1.1rem;
  padding-bottom: 0.2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.projects-grid.is-rail,
.news-grid.is-rail,
.gallery-grid.is-rail {
  cursor: grab;
}
.projects-grid.is-rail:active,
.news-grid.is-rail:active,
.gallery-grid.is-rail:active {
  cursor: grabbing;
}
.projects-grid.is-rail .project-card,
.news-grid.is-rail .news-card {
  flex: 0 0 clamp(290px, 28vw, 360px);
  scroll-snap-align: start;
}
.projects-grid.is-rail::-webkit-scrollbar,
.news-grid.is-rail::-webkit-scrollbar {
  display: none;
  height: 0;
}
.projects-grid.is-rail::-webkit-scrollbar-thumb,
.news-grid.is-rail::-webkit-scrollbar-thumb {
  background: #c6d2e5;
  border-radius: 999px;
}
.projects-grid.is-rail::-webkit-scrollbar-track,
.news-grid.is-rail::-webkit-scrollbar-track {
  background: #edf2fa;
  border-radius: 999px;
}

/* ============ GALLERY ============ */
.gallery-section { background: #fff; }

.gallery-filter {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
  width: 100%;
}

.gallery-pill {
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  font-size: 0.81rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 220ms var(--ease);
}
.gallery-pill:hover {
  border-color: var(--navy-1);
  color: var(--navy-1);
  transform: translateY(-2px);
}
.gallery-pill.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 10px 20px rgba(226, 29, 54, 0.32);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}
.gallery-grid.is-rail {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.35rem;
}
.gallery-grid.is-rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.gallery-grid.is-rail .gallery-item {
  flex: 0 0 clamp(250px, 27vw, 320px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.gallery-item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #cfd8e8, #e3e9f4);
  position: relative;
  cursor: pointer;
  animation: scaleIn 600ms var(--ease) both;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease);
}
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(8, 47, 96, 0.6));
  opacity: 0;
  transition: opacity 280ms var(--ease);
}
.gallery-item .gallery-zoom {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: var(--red);
  font-weight: 700;
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6) rotate(-90deg);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  z-index: 2;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.gallery-item:hover img { transform: scale(1.10); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item:hover .gallery-zoom {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* ============ DONATION ============ */
.donation-section {
  background: var(--bg);
}

.donation-shell {
  border: var(--hairline);
  border-radius: 24px;
  background: #fff;
  padding: 2.15rem;
  display: grid;
  grid-template-columns: minmax(320px, 0.34fr) minmax(0, 0.66fr);
  gap: 1.45rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.donation-shell::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 5px; height: 100%;
  background: linear-gradient(180deg, var(--red), var(--navy-1));
}

.donation-left h2 { margin-bottom: 1.1rem; }
.donation-left h2::after { display: none; }
.donation-left p { font-size: 0.96rem; margin-bottom: 1.6rem; }

.donation-btns {
  display: grid;
  gap: 0.7rem;
}
.donation-btns .btn { width: 100%; padding: 1.05rem 1.2rem; font-size: 0.88rem; }

.donation-right {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.92rem;
  align-items: stretch;
  align-content: start;
}

.account-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 1.04rem 1.02rem 0.98rem;
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  overflow: hidden;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms ease;
  min-height: 212px;
}
.account-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(11, 38, 78, 0.13);
  border-color: var(--bank-accent, var(--navy-1));
}
.account-card .bank-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--bank-accent, var(--navy-1));
}

.account-card .bank-head {
  display: flex;
  align-items: center;
  gap: 0.74rem;
  margin-bottom: 0.1rem;
  padding-bottom: 0.66rem;
  border-bottom: 1px dashed var(--line);
}
.account-card .bank-logo {
  width: 104px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(8, 47, 96, 0.09);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px 7px;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
  overflow: hidden;
}
.account-card:hover .bank-logo {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(11, 38, 78, 0.12);
}
.account-card .bank-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.account-card .bank-logo svg { width: 100%; height: 100%; }

.account-card h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.account-card .bank-sub {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.15rem;
  display: block;
}

.account-card code {
  font-family: var(--font-mono);
  font-size: 0.79rem;
  color: var(--ink);
  background: #f4f7fb;
  padding: 0.56rem 0.62rem;
  border-radius: 8px;
  letter-spacing: 0.008em;
  word-break: normal;
  overflow-wrap: anywhere;
  display: block;
  font-weight: 600;
  line-height: 1.34;
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 200ms ease, border-color 200ms ease;
}
.account-card code:hover {
  background: #ebf1f8;
  border-color: var(--bank-accent, var(--navy-1));
}
.account-card code::after {
  content: 'Kopyala';
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 0.66rem;
  background: var(--bank-accent, var(--navy-1));
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 180ms ease;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.account-card code:hover::after { opacity: 1; }
.account-card code.copied::after {
  content: '✓ Kopyalandı';
  opacity: 1;
  background: var(--green);
}

.account-card .acc-row { display: flex; flex-direction: column; gap: 0.22rem; }
.account-card .acc-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.account-card .label {
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.095em;
  font-weight: 700;
  margin: 0;
}
.account-card .holder {
  font-size: 0.8rem;
  color: var(--ink);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.008em;
  line-height: 1.32;
  word-break: break-word;
}
.account-card .desc {
  font-size: 0.8rem;
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}
/* Eski "tek sayıda kart son ortada büyük" kuralı kaldırıldı —
   yeni hizalı tasarımda tüm kartlar eşit genişlikte. */

.donation-note {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.donation-note .shield-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--green-soft);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.donation-note .shield-icon svg { width: 16px; height: 16px; }

/* ============ VOLUNTEER ============ */
.volunteer-section { background: #fff; }

.volunteer-shell {
  display: grid;
  grid-template-columns: 0.34fr 0.66fr;
  gap: 2.5rem;
  align-items: start;
}

.volunteer-info h2 { margin-bottom: 1.1rem; }
.volunteer-info p { font-size: 0.96rem; max-width: 370px; }
.volunteer-benefits {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  max-width: 430px;
}
.volunteer-benefits li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
}
.volunteer-benefits .icon-wrap {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #eaf1fc;
  color: var(--navy-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.volunteer-benefits .icon-wrap .icon {
  width: 14px;
  height: 14px;
}

.volunteer-illustration {
  margin-top: 1.8rem;
  min-height: 210px;
  background: linear-gradient(180deg, var(--blue-soft) 0%, #fff 100%);
  border-radius: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
  border: var(--hairline);
}
.volunteer-illustration svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  animation: floatY 4s ease-in-out infinite;
}

.volunteer-form-wrap {
  background: #fff;
  border: var(--hairline);
  border-radius: 18px;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.form-grid .full,
.form-grid .vol-full { grid-column: 1 / -1; }
.form-grid .vol-half { grid-column: span 1; }

.form-grid label,
.contact-form label {
  display: grid;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

input, textarea, select {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0.82rem 0.95rem;
  background: #fff;
  color: var(--ink);
  font-size: 0.93rem;
  font-family: inherit;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
input::placeholder, textarea::placeholder { color: #a3afc5; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--navy-1);
  box-shadow: 0 0 0 4px rgba(13, 71, 147, 0.13);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1l5 5 5-5' stroke='%236a7a91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.4rem;
}

.form-submit-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.form-status {
  min-height: 1.2rem;
  color: var(--green);
  font-weight: 700;
  margin-top: 0.9rem;
  font-size: 0.9rem;
}

/* ============ CONTACT ============ */
.contact-section {
  background: var(--bg);
  padding-bottom: 5rem;
}

.contact-shell {
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.62fr 0.38fr;
  box-shadow: var(--shadow-md);
}

.contact-left {
  background: linear-gradient(160deg, #0a3a78 0%, #082f60 100%);
  padding: 2.5rem 2.6rem;
  color: #e8efff;
  position: relative;
  overflow: hidden;
}
.contact-left::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(226,29,54,0.20), transparent 60%);
  border-radius: 50%;
}
.contact-left::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(13, 71, 147, 0.4), transparent 60%);
  border-radius: 50%;
}
.contact-left h2 {
  color: #fff;
  margin-bottom: 1.5rem;
  position: relative;
}
.contact-left h2::after { background: var(--red); }

.contact-meta {
  display: grid;
  gap: 0.95rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
}
.contact-meta .meta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.9rem;
  color: #d8e3f6;
  transition: transform 220ms var(--ease);
}
.contact-meta .meta-item:hover { transform: translateX(4px); }
.contact-meta .meta-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 220ms ease;
}
.contact-meta .meta-item:hover .meta-icon { background: var(--red); }
.contact-meta .meta-icon svg { width: 17px; height: 17px; }
.contact-meta .meta-text strong {
  display: block;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.62);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 0.2rem;
  font-family: var(--font-sans);
}
.contact-meta .meta-text,
.contact-meta .meta-text a {
  color: #fff;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}
.contact-meta .meta-text a:hover { text-decoration: underline; }

.contact-form {
  display: grid;
  gap: 0.85rem;
  position: relative;
}
.contact-form .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.contact-form .full { grid-column: 1 / -1; }
.contact-form label { color: #cfdcf2; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(231, 239, 255, 0.55); }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.10);
}
.contact-form select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
.contact-form button { justify-self: flex-start; margin-top: 0.4rem; }

.contact-map-wrap {
  position: relative;
  background: #f0f4fa;
  min-height: 500px;
}
.contact-map-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: 0;
  display: block;
}
.map-card {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  right: 1.1rem;
  background: #fff;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-md);
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}
.map-card .pin {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: floatY 3s ease-in-out infinite;
}
.map-card .pin svg { width: 17px; height: 17px; }
.map-card strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.map-card span {
  color: var(--muted);
  font-size: 0.8rem;
  display: block;
}
.map-card a {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--navy-1);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}
.map-card a:hover { text-decoration: underline; }

/* ============ FOOTER ============ */
.public-footer {
  background: linear-gradient(180deg, #082f60 0%, #061f44 100%);
  color: #cfddf3;
  margin-top: 0;
  position: relative;
}
.public-footer {
  border-top: 3px solid var(--red);
}
.public-footer::before { display: none; }

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 2.2rem;
  padding: 3.6rem 0 2.4rem;
}

.footer-brand img {
  height: 56px;
  width: auto;
  max-width: 240px;
  margin-bottom: 1.1rem;
  display: block;
}
.footer-brand p {
  color: rgba(207, 221, 243, 0.78);
  font-size: 0.9rem;
  max-width: 300px;
  margin-bottom: 1.2rem;
  line-height: 1.65;
}

.footer-socials {
  display: flex;
  gap: 0.55rem;
}
.footer-socials a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cfddf3;
  text-decoration: none;
  transition: background 240ms var(--ease), color 240ms var(--ease), transform 240ms var(--ease), border-color 240ms ease;
}
.footer-socials a:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  transform: translateY(-3px) scale(1.06);
}
.footer-socials svg { width: 16px; height: 16px; }

.footer-links h4 {
  font-family: var(--font-sans);
  margin: 0 0 1rem;
  color: #fff;
  font-size: 0.97rem;
  font-weight: 700;
}
.footer-links a {
  display: block;
  color: rgba(207, 221, 243, 0.8);
  text-decoration: none;
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  transition: color 200ms ease, padding-left 220ms var(--ease);
}
.footer-links a:hover { color: #fff; padding-left: 6px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding: 1.3rem 0 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.footer-bottom p {
  margin: 0;
  color: rgba(189, 211, 247, 0.7);
  font-size: 0.83rem;
}
.footer-bottom a {
  color: #d6e4fb;
  font-size: 0.83rem;
  text-decoration: none;
}
.footer-bottom a:hover { color: #fff; }

/* =========================================================
   ADMIN PANEL — Professional CMS Interface
   ========================================================= */
.admin-body { background: #f2f5fb; min-height: 100vh; }

/* ============ LOGIN ============ */
.admin-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(circle at 20% 30%, rgba(226, 29, 54, 0.10), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(10, 58, 120, 0.12), transparent 50%),
    linear-gradient(135deg, #f5f7fb, #eaf0f7);
}
.admin-login-card {
  width: 100%;
  max-width: 440px;
  padding: 2.2rem 2.2rem 1.8rem;
  border: var(--hairline);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(11, 38, 78, 0.18), 0 4px 16px rgba(11, 38, 78, 0.06);
  animation: fadeUp 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.admin-login-card.shake { animation: shakeX 460ms ease-in-out; }
@keyframes shakeX {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-8px); }
  40%,80% { transform: translateX(8px); }
}
.admin-login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 1.4rem;
}
.admin-login-brand img {
  height: 64px;
  width: auto;
  max-width: 280px;
  display: block;
}
.admin-login-card h1 {
  font-family: var(--font-sans);
  margin: 0 0 0.4rem;
  color: var(--ink);
  text-align: center;
  font-size: 1.55rem;
  font-weight: 800;
}
.admin-login-sub {
  text-align: center;
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.admin-login-form {
  display: grid;
  gap: 0.8rem;
}
.admin-login-form .field label {
  font-size: 0.78rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.admin-login-form input {
  padding: 0.9rem 1rem;
  font-size: 1rem;
}
.admin-login-form .btn {
  width: 100%;
  padding: 0.95rem 1rem;
  font-size: 0.92rem;
}
.admin-login-hint {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--line);
}
.admin-login-hint code {
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.8rem;
  color: var(--navy-1);
  font-weight: 700;
}
/* ============ ADMIN APP LAYOUT ============ */
.admin-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(272px, 286px) minmax(0, 1fr);
}
@media (min-width: 981px) {
  .admin-app {
    display: block;
  }
  .admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 286px;
    height: 100dvh;
    z-index: 40;
  }
  .admin-main {
    margin-left: 286px;
    min-height: 100vh;
  }
}

/* =========================================================
   V8 - Senior UI board refinement
   Header haze kaldırma, hero bitişini temizleme, IBAN panelini
   finansal bilgi kartı gibi yeniden düzenleme.
   ========================================================= */
.public-header,
.public-header.scrolled {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.public-header::before {
  display: none !important;
}

.nav-shell {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 18px 48px rgba(9, 26, 53, 0.16) !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
}

.lang-switch {
  min-height: 42px !important;
  padding: 0.22rem !important;
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(214, 225, 239, 0.9) !important;
}

.lang-btn {
  min-width: 38px !important;
  height: 34px !important;
  color: #4d607a !important;
}

.lang-btn.active {
  background: #fff !important;
  color: var(--v7-blue) !important;
  box-shadow: 0 1px 0 rgba(9, 26, 53, 0.04), 0 6px 14px rgba(9, 26, 53, 0.08) !important;
}

.lang-btn:focus-visible,
.mobile-menu-btn:focus-visible,
.iban-copy-btn:focus-visible {
  outline: 3px solid rgba(10, 86, 163, 0.28) !important;
  outline-offset: 2px !important;
}

.hero-section {
  padding-bottom: 0 !important;
  background:
    linear-gradient(90deg, #171b43 0%, #083a78 56%, #0a4386 100%) !important;
}

.hero-section::after {
  content: "" !important;
  display: block !important;
  height: 74px !important;
  background: #f5f8fc !important;
  margin-top: 0 !important;
}

.hero-shell {
  min-height: min(700px, calc(100vh - 18px)) !important;
}

.donation-section {
  background: #f5f8fc !important;
}

.donation-shell {
  grid-template-columns: minmax(320px, 0.38fr) minmax(0, 0.62fr) !important;
  grid-template-areas: "intro accounts" !important;
  align-items: start !important;
  gap: clamp(1.5rem, 2.4vw, 2.25rem) !important;
  padding: clamp(1.6rem, 2.6vw, 2.25rem) !important;
}

.donation-left {
  grid-area: intro !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  padding: 0 !important;
  border: 0 !important;
  position: sticky !important;
  top: 104px !important;
}

.donation-left p {
  max-width: 42ch !important;
  margin: 0 !important;
}

.donation-btns {
  margin: 0.35rem 0 0 !important;
  width: 100% !important;
}

.donation-perks {
  grid-column: auto !important;
  margin-top: 0.25rem !important;
  gap: 0.45rem !important;
}

.donation-trust-grid {
  grid-template-columns: 1fr !important;
  gap: 0.65rem !important;
  margin-top: 0.2rem !important;
}

.donation-trust-item {
  min-height: 52px !important;
  background: #f8fbff !important;
}

.donation-right {
  grid-area: accounts !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.accounts-panel-head {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 0.25rem !important;
  padding: 0.95rem 1rem !important;
  border: 1px solid #dce7f3 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #f8fbff, #fff) !important;
}

.accounts-panel-head span {
  color: var(--v7-red) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.accounts-panel-head strong {
  color: var(--v7-ink) !important;
  font-size: 1.05rem !important;
}

.accounts-panel-head p {
  margin: 0 !important;
  color: #60748f !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
}

.account-card {
  min-height: 236px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  gap: 0.9rem !important;
  padding: 1rem !important;
  border-radius: 14px !important;
  background: #fff !important;
}

.account-card .bank-head {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  min-height: 48px !important;
  gap: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px dashed #dbe5f1 !important;
}

.account-card .bank-logo {
  width: 88px !important;
  height: 32px !important;
  border-radius: 8px !important;
}

.account-card h4 {
  margin: 0 !important;
  font-size: 1rem !important;
}

.account-card .bank-sub {
  color: #60748f !important;
  font-size: 0.78rem !important;
}

.account-card .label {
  margin: 0 0 0.35rem !important;
  color: #6b7c95 !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

.iban-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: 0.55rem !important;
}

.account-card code,
.account-card code.iban-copy {
  min-height: 48px !important;
  padding: 0.7rem 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  background: #f4f7fb !important;
  border: 1px solid #e3ebf5 !important;
  border-radius: 10px !important;
  color: #0c2443 !important;
  font-size: 0.76rem !important;
  line-height: 1.35 !important;
}

.account-card code::after,
.account-card code.iban-copy::after {
  display: none !important;
}

.iban-copy-btn {
  min-width: 76px !important;
  min-height: 48px !important;
  padding: 0 0.75rem !important;
  border: 1px solid color-mix(in srgb, var(--bank-accent) 38%, #cfdceb) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--bank-accent) 9%, #fff) !important;
  color: var(--v7-blue) !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.iban-copy-btn:hover {
  background: var(--bank-accent) !important;
  color: #fff !important;
}

.acc-meta-grid {
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}

.account-card .holder,
.account-card .desc {
  margin: 0 !important;
  color: #10233f !important;
  font-size: 0.86rem !important;
}

.admin-logo {
  width: auto !important;
  min-height: 86px !important;
  margin: 0 0 1rem !important;
  padding: 0.9rem 1rem !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-left: 4px solid var(--v7-red) !important;
  border-radius: 0 18px 18px 0 !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16) !important;
}

.admin-logo::before,
.admin-logo::after {
  display: none !important;
}

.admin-logo img {
  width: min(100%, 172px) !important;
  height: 58px !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 1180px) {
  .donation-shell {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "accounts" !important;
  }

  .donation-left {
    position: static !important;
  }

  .donation-right {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .main-nav {
    left: 1rem !important;
    right: 1rem !important;
    width: auto !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(18px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.14) !important;
    box-shadow: 0 24px 70px rgba(5, 26, 58, 0.24) !important;
  }

  .main-nav.open {
    display: grid !important;
  }

  .main-nav a {
    min-height: 52px !important;
    border-radius: 12px !important;
  }

  .donation-right {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .nav-shell {
    background: rgba(255, 255, 255, 0.94) !important;
  }

  .lang-btn {
    min-width: 36px !important;
    height: 34px !important;
  }

  .mobile-menu-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .main-nav {
    left: 0.75rem !important;
    right: 0.75rem !important;
    top: 76px !important;
  }

  body.nav-menu-open .mobile-action-dock,
  body.nav-menu-open .cookie-banner {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .hero-section::after {
    height: 52px !important;
  }

  .donation-shell {
    padding: 1rem !important;
  }

  .donation-right {
    grid-template-columns: 1fr !important;
  }

  .accounts-panel-head {
    padding: 0.85rem !important;
  }

  .iban-line {
    grid-template-columns: 1fr !important;
  }

  .iban-copy-btn {
    width: 100% !important;
  }
}

/* ============ SIDEBAR ============ */
.admin-sidebar {
  background: linear-gradient(180deg, #0a3a78 0%, #061f44 100%);
  color: #e3efff;
  padding: 1.4rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.admin-sidebar::-webkit-scrollbar { width: 0; height: 0; }
/* Admin sidebar marka kartı — public brand ile aynı tasarım dili:
   sol 4px kırmızı şerit + diagonal kesim hattı kırmızı + alt beyaz highlight */
.admin-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.6rem 1.7rem 0.6rem 1rem;
  background: linear-gradient(
    90deg,
    var(--red) 0,
    var(--red) 4px,
    #ffffff 4px,
    #ffffff 100%
  );
  clip-path: polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 100%,
    0 100%
  );
  border-radius: 0;
  filter:
    drop-shadow(0 4px 10px rgba(3, 14, 36, 0.36))
    drop-shadow(0 16px 32px rgba(3, 14, 36, 0.26));
  align-self: flex-start;
}
.admin-logo::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 2.5px),
    var(--red) calc(50% - 2.5px),
    var(--red) calc(50% + 2.5px),
    transparent calc(50% + 2.5px)
  );
  pointer-events: none;
  z-index: 0;
}
.admin-logo::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 14px;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.85) 25%,
    rgba(255, 255, 255, 0.85) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
.admin-logo img {
  height: 52px;
  width: auto;
  max-width: 100%;
  display: block;
  filter: none;
  position: relative;
  z-index: 2;
}
.admin-logo > div { display: none; } /* logo already contains brand text */
.admin-logo strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.admin-logo span {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.65);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 2px;
}
.admin-menu {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding-top: 0.55rem;
  padding-right: 0.22rem;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.admin-menu::-webkit-scrollbar {
  width: 7px;
}
.admin-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
}
.admin-menu::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
}
.admin-menu button {
  text-align: left;
  border: 0;
  background: transparent;
  color: rgba(231, 239, 255, 0.78);
  border-radius: 11px;
  padding: 0.76rem 0.92rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 160ms ease;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  position: relative;
  min-height: 44px;
}
.admin-menu button:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  transform: translateX(3px);
}
.admin-menu button.active {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 22px rgba(226, 29, 54, 0.34);
}
.admin-menu button.active::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: #fff;
  border-radius: 0 4px 4px 0;
}
.adm-ico {
  font-size: 1rem;
  width: 22px;
  text-align: center;
}
.adm-count {
  margin-left: auto;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 0.72rem;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 700;
  min-width: 24px;
  height: 22px;
  line-height: 22px;
  text-align: center;
}
.adm-count.badge-red { background: var(--red); }
.admin-menu button.active .adm-count { background: rgba(255,255,255,0.25); }

.admin-sidebar-bottom {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.85rem;
  margin-top: 0.2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.admin-quick-actions {
  flex-shrink: 0;
}
.admin-scroll-hint {
  display: none !important;
}
.admin-sidebar-bottom button,
.admin-sidebar-bottom .adm-link {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #e8f0ff;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
  transition: background 180ms ease, transform 160ms ease;
}
.admin-sidebar-bottom button:hover,
.admin-sidebar-bottom .adm-link:hover {
  background: rgba(255,255,255,0.10);
  transform: translateY(-1px);
}
.admin-sidebar-bottom #logoutBtn {
  background: rgba(226, 29, 54, 0.15);
  border-color: rgba(226, 29, 54, 0.30);
}
.admin-sidebar-bottom #logoutBtn:hover { background: rgba(226, 29, 54, 0.30); }

/* ============ MAIN ============ */
.admin-main {
  padding: 1.3rem 1.35rem;
  min-width: 0;
}

.admin-topbar {
  border: var(--hairline);
  border-radius: 14px;
  background: #fff;
  padding: 0.86rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(11, 38, 78, 0.04);
}
.adm-search {
  position: relative;
  flex: 1;
  min-width: 280px;
  max-width: 480px;
}
.adm-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.92rem;
}
.adm-search input {
  width: 100%;
  padding-left: 2.4rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fafcff;
}
.adm-search input:focus { background: #fff; }

.admin-toolbar {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
}
.admin-toolbar .btn { padding: 0.62rem 1rem; font-size: 0.82rem; }

.adm-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--green);
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  background: var(--green-soft);
  border-radius: 999px;
}
.adm-saved .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.adm-saved.saving { color: var(--yellow); background: var(--yellow-soft); }
.adm-saved.saving .dot { background: var(--yellow); animation: blink 1s infinite; }

.admin-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1.2rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.admin-page-head h1 {
  font-family: var(--font-sans);
  font-size: 1.7rem;
  color: var(--ink);
  margin: 0.3rem 0 0;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.adm-breadcrumb {
  font-size: 0.78rem;
  color: var(--muted);
}
.adm-breadcrumb a {
  color: var(--navy-1);
  text-decoration: none;
  font-weight: 600;
}
.adm-breadcrumb span { margin: 0 0.4rem; color: #c2cee0; }
.adm-breadcrumb strong { color: var(--ink); font-weight: 700; }
.adm-status-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.status-chip {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.status-chip.green {
  background: var(--green-soft);
  color: var(--green);
}
.status-chip.light {
  background: var(--bg);
  color: var(--muted);
  font-weight: 600;
}

.admin-tabs {
  margin-top: 1rem;
  border: var(--hairline);
  border-radius: 12px;
  background: #fff;
  padding: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  box-shadow: 0 2px 8px rgba(11, 38, 78, 0.04);
}
.admin-tabs button {
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 0.6rem 1rem;
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  transition: background 180ms ease, color 180ms ease;
}
.admin-tabs button:hover { color: var(--ink); background: var(--bg); }
.admin-tabs button.active {
  background: var(--navy-1);
  color: #fff;
  box-shadow: 0 6px 14px rgba(10, 58, 120, 0.22);
}

.admin-grid {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
  gap: 1.1rem;
  align-items: start;
}
.admin-col { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.admin-sidecol { position: sticky; top: 1rem; }

/* Focus mode: when project/news item editor is open, remove right rail and expand builder */
.admin-grid.builder-mode {
  grid-template-columns: minmax(0, 1fr);
}
.admin-grid.builder-mode .admin-sidecol {
  display: none;
}
.admin-grid.builder-mode #editorColumn {
  gap: 0.95rem;
}
.admin-grid.builder-mode .panel.cms-panel {
  padding: 1.1rem 1.15rem 1.2rem;
}

/* ============ PANEL ============ */
.panel {
  border: var(--hairline);
  border-radius: 15px;
  background: #fff;
  padding: 1.35rem 1.4rem;
  box-shadow: 0 4px 14px rgba(11, 38, 78, 0.06);
  animation: fadeUp 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.panel h3 {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
}
.panel-tag {
  background: var(--blue-soft);
  color: var(--navy-1);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.32rem 0.7rem;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.panel-help {
  background: var(--bg);
  color: var(--muted);
  font-size: 0.84rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  margin: 0.7rem 0 1rem;
  border-left: 3px solid var(--navy-1);
  line-height: 1.55;
}
.panel-divider {
  height: 1px;
  background: var(--line);
  margin: 1.2rem 0;
}
.panel-subhead {
  font-family: var(--font-sans);
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
}

.row2, .row3 { display: grid; gap: 0.8rem; }
.row2 { grid-template-columns: 1fr 1fr; }
.row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: grid; gap: 0.35rem; }
.field label {
  font-size: 0.78rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.field input, .field textarea, .field select {
  border: 1.5px solid var(--line);
  border-radius: 9px;
  padding: 0.65rem 0.8rem;
  font-size: 0.9rem;
  line-height: 1.45;
  background: #fff;
  color: var(--ink);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.admin-menu button:focus-visible,
.admin-sidebar-bottom button:focus-visible,
.admin-sidebar-bottom .adm-link:focus-visible,
.btn:focus-visible,
.btn-mini:focus-visible,
.ed-tab:focus-visible {
  outline: 2px solid #a6c5ef;
  outline-offset: 2px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--navy-1);
  box-shadow: 0 0 0 3px rgba(10, 58, 120, 0.12);
}

/* ============ IMAGE FIELD ============ */
.img-input-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0.6rem;
  align-items: stretch;
}
.img-thumb {
  background: linear-gradient(135deg, #cfd8e8, #e3e9f4);
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  border: 1.5px solid var(--line);
  min-height: 42px;
}

/* ============ REPEATER ============ */
.repeater { display: grid; gap: 0.85rem; }
.rep-item {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fafcff;
  padding: 1rem 1.1rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.rep-item:hover {
  border-color: #b9cce5;
  box-shadow: 0 4px 12px rgba(11, 38, 78, 0.06);
}
.rep-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed #cbd5e6;
}
.rep-head strong {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.92rem;
}
.rep-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.rep-move {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--navy-1);
  font-weight: 700;
  font-size: 0.82rem;
  transition: background 180ms ease;
}
.rep-move:hover { background: var(--blue-soft); }

.btn-danger-mini {
  border: 1px solid #f3c6cd;
  color: var(--red);
  background: #fff;
  border-radius: 7px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.78rem;
  transition: background 180ms ease, color 180ms ease;
}
.btn-danger-mini:hover { background: var(--red); color: #fff; }

.btn-add {
  margin-top: 0.7rem;
  border: 1.5px dashed #a8bfdf;
  color: var(--navy-1);
  background: #f7fbff;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.86rem;
  width: 100%;
  transition: background 180ms ease, border-color 180ms ease;
}
.btn-add:hover {
  background: var(--blue-soft);
  border-color: var(--navy-1);
  border-style: solid;
}

/* ============ PREVIEW CARD ============ */
.preview-card {
  border: var(--hairline);
  border-radius: 14px;
  background: #fff;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 2px 8px rgba(11, 38, 78, 0.04);
}
.preview-card h3 {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 800;
}
.preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.preview-open {
  font-size: 0.78rem;
  color: var(--navy-1);
  font-weight: 700;
  text-decoration: none;
}
.preview-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fafcff;
}
.preview-toolbar {
  background: linear-gradient(180deg, #f4f7fb, #ebeff6);
  padding: 0.55rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.preview-toolbar .dot-r,
.preview-toolbar .dot-y,
.preview-toolbar .dot-g {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.preview-toolbar .dot-r { background: #ff5f57; }
.preview-toolbar .dot-y { background: #ffbd2e; }
.preview-toolbar .dot-g { background: #28c940; }
.preview-url {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted);
  background: #fff;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.preview-frame iframe { width: 100%; min-height: 640px; border: 0; display: block; }

.quick-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.qs-item {
  background: var(--bg);
  border-radius: 10px;
  padding: 0.8rem;
  text-align: center;
  transition: background 200ms ease, transform 200ms ease;
}
.qs-item:hover { background: var(--blue-soft); transform: translateY(-2px); }
.qs-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.65rem;
  color: var(--ink);
  font-weight: 700;
}
.qs-item span {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.muted-sm { font-size: 0.82rem; color: var(--muted); margin: 0; }
.stats-card { background: linear-gradient(180deg, #ffffff, #f7faff); }

.admin-status { min-height: 1.2rem; color: var(--green); font-weight: 700; padding: 0.5rem 0; font-size: 0.88rem; }

/* ============ SUBMISSIONS ============ */
.adm-tabs-mini {
  display: flex;
  gap: 0.4rem;
  margin: 0.4rem 0 1rem;
  border-bottom: 1px solid var(--line);
}
.adm-tabs-mini button {
  border: 0;
  background: transparent;
  padding: 0.7rem 1rem;
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
  position: relative;
  transition: color 180ms ease;
}
.adm-tabs-mini button:hover { color: var(--ink); }
.adm-tabs-mini button.active { color: var(--navy-1); }
.adm-tabs-mini button.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--navy-1);
  border-radius: 2px 2px 0 0;
}

.adm-toolbar-row {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.adm-toolbar-row input[type=search] {
  flex: 1;
  min-width: 220px;
  border-radius: 9px;
  border: 1.5px solid var(--line);
  padding: 0.6rem 0.8rem;
}

.sub-list { display: grid; gap: 0.65rem; }
.submission-item {
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: #fff;
  padding: 0.85rem 1rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.submission-item:hover { border-color: var(--navy-1); box-shadow: var(--shadow-sm); }
.sub-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.55rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px dashed var(--line);
}
.sub-num {
  background: var(--red);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
}
.submission-item time {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}
.sub-del {
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.5;
  transition: opacity 180ms ease;
}
.sub-del:hover { opacity: 1; }
.sub-body { display: grid; gap: 0.4rem; }
.sub-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.6rem;
  font-size: 0.86rem;
}
.sub-row span {
  color: var(--muted);
  font-weight: 600;
  text-transform: capitalize;
}
.sub-row strong { color: var(--ink); font-weight: 600; word-break: break-word; }

.sub-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
}
.sub-empty span { font-size: 2.4rem; display: block; margin-bottom: 0.4rem; }
.sub-empty p { margin: 0; font-size: 0.9rem; }

.hidden { display: none !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1360px) and (min-width: 1181px) {
  .donation-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .projects-grid, .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item:nth-child(2) { border-right: 0; }
  .stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 1px solid var(--line-2); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .donation-shell { grid-template-columns: 1fr; }
  .donation-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-top > div:nth-child(5) { display: none; }
  .admin-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .partners-row { grid-template-columns: 1fr; gap: 0.8rem; }
  .partners-label { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 0.6rem; }
}

@media (max-width: 980px) {
  .hero-shell {
    grid-template-columns: 1fr;
    min-height: auto;
    height: auto;
  }
  .hero-left {
    padding: 2.8rem 0 2.4rem;
    clip-path: none;
    margin-right: 0;
  }
  .hero-inner { padding: 0 1.25rem; max-width: 100%; }
  .hero-collage {
    min-height: 240px;
    height: 240px;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "big top"
      "big bot";
  }
  .hero-collage::before { display: none; }
  .hero-trust { margin-top: 1.2rem; padding-top: 1rem; }
  .about-grid, .mission-grid, .volunteer-shell, .contact-shell, .footer-top {
    grid-template-columns: 1fr;
  }
  .donation-right { grid-template-columns: 1fr; }
  .account-card { min-height: 0; }
  .account-card .bank-logo { width: 96px; height: 32px; }
  .account-card .acc-meta-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .admin-app { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: relative;
    height: auto;
  }
  .admin-sidebar-bottom { grid-template-columns: 1fr 1fr 1fr; }
  .admin-sidecol { position: relative; top: 0; }
  .admin-topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.78rem 0.85rem;
  }
  .adm-search {
    min-width: 0;
    max-width: none;
    grid-column: 1 / -1;
    order: 4;
  }
  .admin-toolbar {
    justify-self: end;
    flex-wrap: nowrap;
    gap: 0.45rem;
  }
  .admin-toolbar .btn {
    padding: 0.58rem 0.82rem;
    font-size: 0.77rem;
  }
  .adm-saved {
    padding: 0.33rem 0.62rem;
    font-size: 0.74rem;
  }
}

/* Compact nav at intermediate sizes (981-1099) */
@media (min-width: 981px) and (max-width: 1099px) {
  .main-nav a { padding: 0.5rem 0.4rem; font-size: 0.7rem; letter-spacing: 0.03em; }
  .nav-shell { gap: 0.5rem; }
  .brand img { height: 44px; }
  #headerDonateBtn { padding: 0.55rem 0.9rem; font-size: 0.74rem; }
  .lang-switch { font-size: 0.78rem; gap: 0.35rem; }
}

/* Tablet & below — collapse nav into mobile menu at 980px */
@media (max-width: 980px) {
  .nav-shell {
    display: flex;
    align-items: center;
    min-height: 72px;
    gap: 0.55rem;
  }
  .brand {
    margin-right: auto;
    justify-self: auto;
  }
  .header-actions {
    margin-left: auto;
    order: 2;
    justify-self: auto;
    gap: 0.4rem;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 3;
    margin-left: 0.2rem;
    flex-shrink: 0;
  }
  .main-nav {
    position: absolute;
    left: 1rem; right: 1rem; top: 76px;
    background: #082f60;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 0.75rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    z-index: 30;
    box-shadow: 0 18px 40px rgba(5, 26, 58, 0.35);
  }
  .main-nav.open { display: flex; }
  .main-nav a {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    color: rgba(255,255,255,0.92);
    font-size: 0.82rem;
  }
  .main-nav a:hover, .main-nav a.active {
    background: rgba(255,255,255,0.08);
  }
  .main-nav a::after { display: none; }
  .brand img {
    height: 42px;
    max-width: 198px;
    padding: 4px 8px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
  }
  #headerDonateBtn { padding: 0.55rem 0.9rem; font-size: 0.76rem; }
}

@media (max-width: 720px) {
  #headerDonateBtn { display: none; }
  .scroll-progress { display: none; }
  .nav-shell {
    min-height: 66px;
    gap: 0.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }
  .brand {
    min-width: 0;
    max-width: 160px;
  }
  .brand img {
    height: 38px;
    max-width: 160px;
    padding: 2px 6px;
  }
  .header-actions {
    gap: 0.18rem;
    margin-left: 0;
    justify-content: flex-end;
    min-width: 74px;
  }
  .lang-switch {
    font-size: 0.79rem;
    gap: 0.32rem;
    white-space: nowrap;
    line-height: 1;
  }
  .lang-sep { opacity: 0.38; }
  .lang-btn { padding: 0.35rem; min-width: 30px; }
  .mobile-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-left: 0;
  }

  .section { padding: 3rem 0; }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.45rem;
  }
  .section-tools {
    width: 100%;
    justify-content: flex-start;
    gap: 0.55rem;
  }
  .section-head.center {
    align-items: center;
    text-align: center;
  }
  .section-head.center > div {
    width: 100%;
    align-items: center;
  }
  .section h2.center-title {
    width: 100%;
    text-align: center;
  }
  .section-tools .head-link {
    margin-left: auto;
  }
  .rail-btn { width: 40px; height: 40px; }
  .projects-grid.is-rail,
  .news-grid.is-rail {
    gap: 0.75rem;
    scroll-padding-left: 0;
    scroll-padding-right: 0;
  }
  .projects-grid.is-rail .project-card,
  .news-grid.is-rail .news-card {
    flex-basis: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .project-card .img-wrap { height: 178px; }
  .news-cover { height: 172px; }
  .project-card { min-height: 352px; }
  .news-card { min-height: 332px; }
  .gallery-filter {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    gap: 0.5rem;
    padding: 0.1rem 0 0.35rem;
    margin-bottom: 1.05rem;
  }
  .gallery-filter::-webkit-scrollbar { display: none; }

  .stats-ribbon { grid-template-columns: 1fr; margin-top: 1rem; }
  .stat-item { border-right: 0 !important; border-bottom: 1px solid var(--line-2); }
  .stat-item:last-child { border-bottom: 0; }

  .projects-grid, .news-grid,
  .form-grid, .contact-form .row2, .row2, .row3 {
    grid-template-columns: 1fr;
  }

  .hero-collage {
    display: block;
    height: 206px;
    min-height: 206px;
    padding: 0;
    margin-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: #051a3a;
  }
  .hero-collage .hero-tile { display: none; }
  .hero-collage .hero-tile.tile-big {
    display: block;
    height: 206px;
  }
  .hero-collage .hero-tile.tile-big img {
    object-position: center 42%;
  }

  .gallery-grid.is-rail .gallery-item {
    flex: 0 0 min(84vw, 322px);
    border-radius: 14px;
  }
  .gallery-item img {
    aspect-ratio: 4 / 3;
  }

  .hero-left h1 { font-size: 2.35rem; }
  .donation-shell { padding: 1.1rem; gap: 1rem; }
  .donation-left p { margin-bottom: 1rem; }
  .donation-btns .btn { padding: 0.95rem 1rem; }
  .donation-perks { gap: 0.45rem; }
  .volunteer-form-wrap { padding: 1.4rem; }
  .contact-left { padding: 1.6rem; }
  .contact-map-wrap iframe { min-height: 340px; }
  .contact-map-wrap { min-height: 340px; }
  .map-card { position: static; margin: 0.9rem; }

  .footer-top { padding: 2.4rem 0 1.5rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .admin-login-row { grid-template-columns: 1fr; }
  .admin-topbar input { min-width: 0; width: 100%; }
  .admin-topbar {
    grid-template-columns: 1fr auto;
    gap: 0.55rem;
  }
  .admin-toolbar {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .adm-saved span:last-child { display: none; }
  .admin-mobile-toggle { justify-self: end; margin-left: auto; }
  .admin-sidebar-bottom { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .wa-float { animation: none !important; }
  .volunteer-illustration svg { animation: none !important; }
  .map-card .pin { animation: none !important; }
  .partners-track { animation: none !important; }
  .hero-eyebrow .dot { animation: none !important; }
}

/* Admin repeater view/preview link */
.rep-view {
  border: 1px solid #c8d6ea;
  background: #fff;
  color: var(--navy-1);
  border-radius: 7px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.76rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: background 180ms ease, color 180ms ease;
}
.rep-view:hover {
  background: var(--navy-1);
  color: #fff;
  border-color: var(--navy-1);
}

/* ============ ADMIN — Form validation ============ */
.req-star { color: var(--red); font-weight: 700; }
.field-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.3rem;
  letter-spacing: 0.01em;
  min-height: 14px;
}
.field-hint.error {
  color: var(--red);
  font-weight: 600;
}
.field-invalid {
  border-color: var(--red) !important;
  background: #fff8f9 !important;
}
.field-invalid:focus {
  box-shadow: 0 0 0 4px rgba(225, 29, 54, 0.12) !important;
}

/* Hide cookie banner inside admin preview iframe to avoid clutter */
.preview-frame iframe { background: #fff; }

/* ============ Map fallback ============ */
.contact-map-wrap { position: relative; }
.map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f1f4f9, #e6ecf5);
  z-index: 1;
  pointer-events: none;
  transition: opacity var(--dur-slow) ease;
}
.contact-map-wrap iframe.loaded ~ .map-fallback { opacity: 0; visibility: hidden; }
.map-fallback-inner {
  text-align: center;
  padding: 1.5rem;
  pointer-events: auto;
}
.map-fallback-inner svg {
  width: 40px;
  height: 40px;
  color: var(--red);
  margin-bottom: 0.5rem;
}
.map-fallback-inner strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.map-fallback-inner span {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
  margin-bottom: 0.7rem;
}
.map-fallback-inner a {
  display: inline-block;
  background: var(--navy-1);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}

/* ============ Cookie banner — non-intrusive ============ */
@media (max-width: 720px) {
  .cookie-banner {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    border-radius: 12px;
  }
  .cookie-inner { padding: 0.85rem 1rem; gap: 0.7rem; }
  .cookie-text p { font-size: 0.8rem; }
  .cookie-actions .btn { padding: 0.55rem 0.85rem; font-size: 0.76rem; }
}
.wa-float, .scroll-top {
  bottom: calc(1.5rem + var(--cookie-offset, 0px));
  transition: bottom 240ms ease;
}
body.cookie-shown { --cookie-offset: 100px; }
@media (max-width: 720px) { body.cookie-shown { --cookie-offset: 130px; } }

/* =========================================================
   V2+ Production polish
   ========================================================= */

/* B1: Mobile menu backdrop + body lock */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 26, 58, 0.45);
  backdrop-filter: blur(4px);
  z-index: 25;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease), visibility 220ms;
}
.mobile-menu-backdrop.visible {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 981px) {
  .mobile-menu-backdrop { display: none; }
}
body.nav-locked {
  overflow: hidden;
}
html.nav-menu-open,
body.nav-menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* B2: Hero clamp normalize - already clamp() set, just make sure */
@media (max-width: 720px) {
  .hero-shell { height: auto; min-height: 520px; }
  .projects-grid.is-rail .project-card,
  .news-grid.is-rail .news-card {
    flex-basis: 100%;
    max-width: 100%;
  }
  .gallery-grid.is-rail .gallery-item {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* B4: Card line-clamp normalize */
.project-card .card-body p,
.news-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-card .card-body h3,
.news-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.news-card { min-height: 280px; }
.project-card { min-height: 380px; }

/* B5: Toast feedback */
.toast {
  position: fixed;
  bottom: 7rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 0.85rem 1.4rem;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(11, 38, 78, 0.30);
  opacity: 0;
  visibility: hidden;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
  pointer-events: none;
}
.toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }

/* B6: Form UX */
.form-grid input:invalid:not(:placeholder-shown),
.form-grid textarea:invalid:not(:placeholder-shown),
.form-grid select:invalid:not(:placeholder-shown),
.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown),
.contact-form select:invalid:not(:placeholder-shown) {
  border-color: var(--red);
}
.field-error-msg {
  display: none;
  font-size: 0.78rem;
  color: var(--red);
  margin-top: 0.25rem;
  font-weight: 500;
}
.field-error-msg.visible { display: block; }

/* B7: Cookie banner — prevent layout shift, fixed position is already isolated */
.cookie-banner[hidden] { display: none !important; }

/* E3: Disabled link state */
a.is-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.footer-link-inactive {
  display: block;
  color: rgba(207, 221, 243, 0.4);
  margin-bottom: 0.55rem;
  font-size: 0.87rem;
  cursor: default;
}

/* =========================================================
   V3 — Mobile-first refinement + a11y polish
   ========================================================= */

/* 360px breakpoint hardening */
@media (max-width: 420px) {
  .hero-left h1 { font-size: clamp(1.7rem, 8vw, 2rem); }
  .hero-left p { font-size: 0.94rem; }
  .hero-trust .trust-text strong { font-size: 0.82rem; }
  .hero-trust .trust-text span { font-size: 0.7rem; }
  .hero-inner { padding: 0 1rem; }
  .hero-eyebrow { font-size: 0.66rem; padding: 0.35rem 0.7rem; }
  .container { width: min(calc(100% - 1.5rem), var(--container)); }
  .section { padding: 2.4rem 0; }
  .section h2 { font-size: 1.55rem; }
  .stats-ribbon { margin-top: 0.8rem; }
  .stat-item { padding: 1.1rem 1rem; gap: 0.85rem; min-height: 86px; }
  .stat-icon { width: 50px; height: 50px; }
  .stat-icon svg { width: 24px; height: 24px; }
  .stat-copy strong { font-size: 1.65rem; }
  .stat-copy span { font-size: 0.8rem; }
  .news-body, .project-card .card-body { padding: 1rem 1.1rem; }
  .donation-shell { padding: 0.95rem; }
  .volunteer-form-wrap { padding: 1.2rem; }
  .contact-left { padding: 1.3rem; }
}

/* Touch target a11y — min 44px on mobile */
@media (max-width: 720px) {
  .btn { min-height: 44px; }
  .main-nav a { min-height: 44px; }
  .lang-btn { padding: 0.5rem; min-width: 32px; }
  .gallery-pill { min-height: 36px; padding: 0.52rem 1rem; }
  .share-btn { min-width: 40px; min-height: 40px; }
  .card-link, .head-link { min-height: 36px; display: inline-flex; align-items: center; }
}

/* Visible focus for keyboard users (WCAG 2.4.7) */
*:focus-visible {
  outline: 2px solid var(--navy-1);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible {
  outline-color: #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--navy-1);
}
.btn-outline-light:focus-visible {
  outline-color: var(--ink);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Desktop admin shell hard-lock:
   keep sidebar visually persistent while scrolling long editor content. */
@media (min-width: 981px) {
  .admin-app {
    display: block !important;
  }
  .admin-sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: 286px;
    height: 100dvh;
    z-index: 40;
  }
  .admin-main {
    margin-left: 286px !important;
    min-height: 100vh;
  }
}

/* Hidden state must always win (login/admin view switch). */
#adminView.hidden,
#loginView.hidden {
  display: none !important;
}


/* =========================================================
   V4 — Mobile + UI hardening
   ========================================================= */
.public-body,
.listing-page,
.detail-body-page,
.admin-body {
  overflow-x: clip;
}
@supports not (overflow: clip) {
  .public-body,
  .listing-page,
  .detail-body-page,
  .admin-body {
    overflow-x: hidden;
  }
}

.hero-shell,
.hero-inner,
.main-nav,
.projects-grid,
.news-grid,
.gallery-grid,
.donation-shell,
.donation-right,
.nav-shell {
  min-width: 0;
}

.account-card {
  min-height: 0;
}

.account-card .bank-logo {
  image-rendering: -webkit-optimize-contrast;
}

/* NOT: donation-right için tek geçerli desktop kuralı satır ~4530'da
   (2 sütun + 3. kart full-width). Bu noktadaki eski "3 sütun" kuralı
   kasıtlı tasarımla çakıştığı için kaldırıldı. */

@media (max-width: 980px) {
  .hero-section {
    padding-bottom: 52px;
  }

  .hero-shell {
    height: auto;
    min-height: 0;
  }

  .hero-left {
    padding: 2.05rem 0 1.15rem;
    clip-path: none;
    margin-right: 0;
  }

  .hero-inner {
    max-width: min(100%, 560px);
    margin-inline: auto;
    padding-inline: 1.1rem;
  }

  .hero-left h1 {
    font-size: clamp(2.05rem, 7.2vw, 2.9rem);
    margin-bottom: 0.9rem;
  }

  .hero-left p {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 1.15rem;
    max-width: 34ch;
  }

  .hero-cta-row {
    gap: 0.62rem;
  }

  .hero-trust {
    margin-top: 1rem;
    padding-top: 0.9rem;
  }

  .hero-collage {
    height: 194px;
    min-height: 194px;
    gap: 6px;
    padding-left: 6px;
  }

  .hero-collage .hero-tile img {
    object-position: center;
  }

  .account-card {
    padding: 0.95rem;
  }

  .account-card .bank-logo {
    width: 98px;
    height: 34px;
  }
}

@media (max-width: 720px) {
  .public-header {
    top: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .nav-shell {
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.34rem;
  }

  .brand {
    min-width: 0;
    max-width: 146px;
    margin-right: 0;
  }

  .brand img {
    height: 34px;
    max-width: 146px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .header-actions {
    order: 2;
    margin-left: 0;
    min-width: auto;
    gap: 0.2rem;
    justify-content: flex-end;
  }

  .lang-switch {
    font-size: 0.78rem;
    gap: 0.28rem;
    padding: 0.24rem 0.34rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
  }

  .lang-btn {
    min-width: 30px;
    min-height: 30px;
    padding: 0.22rem;
  }

  .mobile-menu-btn {
    order: 3;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    margin-left: 0;
  }

  .main-nav {
    left: 0.75rem;
    right: 0.75rem;
    top: calc(64px + env(safe-area-inset-top, 0px));
    padding: 0.55rem;
    max-height: calc(100dvh - 80px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overflow-x: hidden;
  }

  .main-nav a {
    font-size: 0.82rem;
    padding: 0.8rem 0.86rem;
  }

  .hero-left {
    padding: 1.68rem 0 1.02rem;
  }

  .hero-inner {
    padding-inline: 1rem;
  }

  .hero-eyebrow {
    margin-bottom: 0.85rem;
  }

  .hero-left h1 {
    font-size: clamp(1.95rem, 9.2vw, 2.45rem);
    line-height: 1.06;
    margin-bottom: 0.75rem;
    max-width: 12ch;
  }

  .hero-left p {
    font-size: 0.98rem;
    margin-bottom: 0.95rem;
    max-width: 33ch;
  }

  .hero-cta-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.52rem;
  }

  .hero-cta-row .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 0.6rem;
    font-size: 0.82rem;
  }

  .hero-trust {
    margin-top: 0.82rem;
    padding-top: 0.74rem;
    gap: 0.55rem;
  }

  .trust-avatars span {
    width: 28px;
    height: 28px;
    margin-right: -9px;
  }

  .hero-collage {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "big top"
      "big bot";
    height: 176px;
    min-height: 176px;
    margin-top: 0.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    gap: 4px;
    padding-left: 4px;
  }

  .hero-collage .hero-tile {
    display: block;
  }

  .hero-collage .hero-tile img {
    object-position: center;
  }

  .stats-ribbon {
    margin-top: 0.75rem;
    border-radius: 16px;
  }

  .projects-grid.is-rail,
  .news-grid.is-rail,
  .gallery-grid.is-rail {
    padding-bottom: 0;
    gap: 0.82rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .projects-grid.is-rail::-webkit-scrollbar,
  .news-grid.is-rail::-webkit-scrollbar,
  .gallery-grid.is-rail::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .projects-grid.is-rail .project-card,
  .news-grid.is-rail .news-card,
  .gallery-grid.is-rail .gallery-item {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .project-card,
  .news-card {
    min-height: 0;
  }

  .project-card .img-wrap,
  .news-cover {
    height: 196px;
  }

  .gallery-section {
    overflow: hidden;
  }

  .gallery-filter {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.46rem;
    padding: 0.1rem 0 0.25rem;
    margin-bottom: 0.95rem;
    scrollbar-width: none;
  }

  .gallery-filter::-webkit-scrollbar {
    display: none;
  }

  .gallery-pill {
    min-height: 38px;
    padding: 0.54rem 0.96rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .gallery-grid.is-rail .gallery-item {
    border-radius: 14px;
  }

  .gallery-item img {
    aspect-ratio: 4 / 3;
  }

  .donation-shell {
    border-radius: 18px;
    padding: 1rem;
    gap: 0.9rem;
  }

  .donation-right {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .account-card {
    border-radius: 14px;
    padding: 0.92rem 0.88rem;
    gap: 0.55rem;
  }

  .account-card .bank-head {
    gap: 0.62rem;
    padding-bottom: 0.58rem;
    margin-bottom: 0;
  }

  .account-card .bank-logo {
    width: 92px;
    height: 32px;
    padding: 3px 6px;
  }

  .account-card h4 {
    font-size: 0.95rem;
  }

  .account-card code {
    font-size: 0.76rem;
    line-height: 1.3;
  }

  .account-card .label {
    font-size: 0.64rem;
  }

  .account-card .holder,
  .account-card .desc {
    font-size: 0.78rem;
  }

  .account-card .acc-meta-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .wa-float {
    right: 0.8rem;
    bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px) + var(--cookie-offset, 0px));
    width: 54px;
    height: 54px;
  }

  .scroll-top {
    right: 0.82rem;
    bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px) + var(--cookie-offset, 0px));
  }
}

@media (max-width: 420px) {
  .hero-left h1 {
    font-size: clamp(1.82rem, 9.8vw, 2.2rem);
  }

  .hero-collage {
    height: 162px;
    min-height: 162px;
  }

  .project-card .img-wrap,
  .news-cover {
    height: 182px;
  }
}

/* =========================================================
   V4.1 — Final mobile polish + robust visibility
   ========================================================= */
.reveal-pending {
  opacity: 1 !important;
  transform: none !important;
}

@media (min-width: 1181px) {
  .donation-shell {
    /* Sol panel biraz daha dar — sağ tarafa 3 eşit kart sığsın */
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.85fr);
    gap: 1.1rem;
  }

  /* 3 banka kartı yan yana eşit boyutta (kullanıcı QA: simetrik hizalama) */
  .donation-right {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.85rem;
  }
  .donation-right .account-card:nth-child(3) {
    grid-column: auto !important;
    max-width: none;
    width: 100%;
    justify-self: stretch;
  }

  /* 3 sütunda kart içeriği kompakt */
  .donation-right .account-card {
    padding: 0.95rem 0.92rem 0.85rem;
    gap: 0.55rem;
  }
  .donation-right .account-card .bank-logo {
    width: 88px;
    height: 30px;
    padding: 3px 6px;
  }
  .donation-right .account-card h4 {
    font-size: 0.92rem;
  }
  .donation-right .account-card .bank-sub {
    font-size: 0.68rem;
  }
  .donation-right .account-card .label {
    font-size: 0.6rem;
  }
  .donation-right .account-card .holder,
  .donation-right .account-card .desc {
    font-size: 0.74rem;
  }
  /* IBAN: 3 sütunda dar alan. Kopya butonunu mini bir ikon olarak sağa al,
     IBAN'a daha fazla yer ver ve tek satıra düşür. */
  .donation-right .account-card code {
    font-size: 0.66rem;
    letter-spacing: 0.005em;
    padding: 0.55rem 0.55rem 0.55rem 0.6rem;
    padding-right: 2.2rem;
    line-height: 1.4;
    text-align: left;
  }
  .donation-right .account-card code::after {
    content: '⧉';            /* clipboard ikonu (Unicode) — yer kapmaz */
    font-size: 0.85rem;
    padding: 2px 4px;
    right: 3px;
    line-height: 1;
    background: transparent;
    color: var(--bank-accent, var(--navy-1));
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0;
  }
  .donation-right .account-card code:hover::after {
    background: var(--bank-accent, var(--navy-1));
    color: #fff;
    border-radius: 4px;
  }
  .donation-right .account-card code.copied::after {
    content: '✓';
    background: var(--green);
    color: #fff;
    border-radius: 4px;
    padding: 2px 5px;
  }
  /* AD SOYAD + AÇIKLAMA tek sütuna düşsün — 3'lü dar grid için */
  .donation-right .account-card .acc-meta-grid {
    grid-template-columns: 1fr;
    gap: 0.42rem;
  }
}

@media (max-width: 720px) {
  .public-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .nav-shell {
    min-height: 66px !important;
    gap: 0.45rem !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .brand {
    max-width: 172px !important;
    min-width: 0;
  }

  .brand img {
    height: 40px !important;
    max-width: 170px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  .header-actions {
    min-width: 74px;
    gap: 0.24rem !important;
  }

  .lang-switch {
    border-radius: 10px !important;
    padding: 0.26rem 0.4rem !important;
    gap: 0.34rem !important;
  }

  .lang-btn {
    min-width: 30px;
    min-height: 30px;
    padding: 0.26rem !important;
  }

  .mobile-menu-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
  }

  .main-nav {
    top: calc(66px + env(safe-area-inset-top, 0px)) !important;
  }

  .hero-section {
    padding-bottom: 34px;
  }

  .hero-left {
    padding: 1.84rem 0 1.08rem !important;
  }

  .hero-left h1 {
    font-size: clamp(2.02rem, 9.5vw, 2.58rem) !important;
    max-width: 11.8ch;
  }

  .hero-left p {
    font-size: 1rem !important;
    max-width: 31ch;
  }

  .hero-collage {
    height: 188px !important;
    min-height: 188px !important;
    gap: 5px !important;
    padding-left: 5px !important;
  }

  .stats-ribbon {
    margin-top: 0.65rem !important;
  }

  .section {
    padding: 2.35rem 0 !important;
  }

  .section-head {
    margin-bottom: 1.05rem !important;
  }

  .projects-grid.is-rail,
  .news-grid.is-rail,
  .gallery-grid.is-rail {
    gap: 0.75rem !important;
    padding-bottom: 0.25rem;
    scroll-padding-left: 0.25rem;
    scroll-padding-right: 0.25rem;
  }

  .projects-grid.is-rail .project-card,
  .news-grid.is-rail .news-card {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .gallery-grid.is-rail .gallery-item {
    flex: 0 0 88% !important;
    min-width: 88% !important;
    max-width: 88% !important;
  }

  .project-card .img-wrap,
  .news-cover {
    height: 190px !important;
  }

  .gallery-item img {
    aspect-ratio: 4 / 3;
  }

  .donation-shell {
    padding: 1rem !important;
    gap: 0.82rem !important;
  }

  .account-card {
    min-height: 0 !important;
  }

  .account-card .bank-logo {
    width: 106px !important;
    height: 36px !important;
    padding: 4px 8px !important;
  }
}

/* =========================================================
   V4.2 — Brand readability + mobile polish
   ========================================================= */
/* backdrop-filter kaldırıldı — sticky header transition'larında beyaz
   sızıntıya katkı yapıyordu (kullanıcı QA). Brand zaten kendi bg'sini
   taşıyor, blur'a ihtiyaç yok. */

.gallery-filters,
.lp-pills {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-filters::-webkit-scrollbar,
.lp-pills::-webkit-scrollbar {
  display: none;
}

@media (max-width: 980px) {
  .public-header .brand {
    padding: 0.45rem 1.4rem 0.45rem 0.95rem;
    /* Mobil clip-path: kesim biraz daha küçük (16px), kart daha kompakt */
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
    filter:
      drop-shadow(0 3px 8px rgba(3, 14, 36, 0.30))
      drop-shadow(0 10px 22px rgba(3, 14, 36, 0.18));
  }

  .public-header .brand img {
    max-width: 168px !important;
  }
}

@media (max-width: 720px) {
  .public-header .brand {
    padding: 0.42rem 1.25rem 0.42rem 0.85rem !important;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%) !important;
  }

  .public-header .brand img {
    height: 36px !important;
    max-width: 156px !important;
  }

  .gallery-filters {
    gap: 0.52rem !important;
    padding-bottom: 0.15rem;
    padding-right: 0.25rem;
  }

  .gallery-pill {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* =========================================================
   V5 — Sprint 1: 404 + IBAN + Donation flash + Touch a11y
   ========================================================= */

/* ----- 404 sayfası ----- */
.err-body {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.err-body .public-header {
  position: static;
}
.err-wrap {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: 4rem 0 5rem;
  background:
    radial-gradient(900px 460px at 80% 10%, rgba(226, 29, 54, 0.07), transparent 60%),
    radial-gradient(700px 360px at 0% 100%, rgba(11, 61, 128, 0.07), transparent 65%),
    var(--bg);
}
.err-card {
  background: #fff;
  border: var(--hairline);
  border-radius: 22px;
  padding: 3rem 2.6rem;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 22px 48px rgba(11, 38, 78, 0.10);
  animation: fadeUp 540ms var(--ease) both;
}
.err-card .err-code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 14vw, 7.5rem);
  color: var(--red);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0 0 0.4rem;
}
.err-card h1 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.2vw, 2.1rem);
  color: var(--ink);
  margin: 0 0 0.7rem;
  font-weight: 600;
}
.err-card > p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto 1.6rem;
}
.err-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
.err-suggestions {
  border-top: 1px solid var(--line);
  padding-top: 1.8rem;
  text-align: left;
}
.err-suggestions h2 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 1rem;
  text-align: center;
}
.err-suggestion-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.err-suggestion-grid li { margin: 0; }
.err-suggestion-grid a {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms ease;
}
.err-suggestion-grid a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(11, 38, 78, 0.10);
  border-color: rgba(11, 61, 128, 0.20);
}
.err-suggestion-grid strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--ink);
}
.err-suggestion-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
.err-footer {
  margin-top: 0;
}
@media (max-width: 720px) {
  .err-wrap { padding: 2rem 0 3rem; }
  .err-card { padding: 2rem 1.3rem; border-radius: 18px; }
  .err-suggestion-grid { grid-template-columns: 1fr; gap: 0.55rem; }
  .err-actions .btn { flex: 1 1 140px; }
}

/* ----- IBAN okunabilirlik (mobile + desktop) ----- */
.account-card code {
  font-size: 0.82rem;
  letter-spacing: 0.015em;
  word-break: keep-all;
  overflow-wrap: normal;
  padding-right: 3.8rem;
  line-height: 1.45;
}
.account-card code::after {
  opacity: 1;
  pointer-events: none;
  background: var(--bank-accent, var(--navy-1));
  font-size: 0.66rem;
  padding: 3px 8px;
  border-radius: 6px;
  top: 50%;
  letter-spacing: 0.04em;
}
.account-card code:focus-visible {
  outline: 2px solid var(--navy-1);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .account-card code {
    font-size: 0.78rem;
    padding: 0.6rem 0.6rem;
    padding-right: 4.2rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
  }
  .account-card code::after {
    font-size: 0.66rem;
    padding: 3px 7px;
    right: 6px;
  }
}
@media (max-width: 430px) {
  .account-card code {
    font-size: 0.72rem;
    padding-right: 3.7rem;
    letter-spacing: 0.012em;
  }
  .account-card code::after {
    font-size: 0.62rem;
    padding: 3px 6px;
    right: 5px;
  }
}
@media (max-width: 380px) {
  .account-card code {
    font-size: 0.66rem;
    padding-right: 3.4rem;
    letter-spacing: 0.01em;
  }
}

/* ----- Donation flash (bağış butonu -> IBAN kartı highlight) ----- */
@keyframes donationHighlight {
  0%, 100% { box-shadow: var(--shadow-sm); border-color: var(--line); transform: translateY(0); }
  35%      { box-shadow: 0 0 0 4px rgba(226, 29, 54, 0.18), 0 18px 38px rgba(226, 29, 54, 0.18); border-color: var(--red); transform: translateY(-4px); }
  70%      { box-shadow: 0 0 0 2px rgba(226, 29, 54, 0.12), 0 14px 28px rgba(226, 29, 54, 0.10); border-color: var(--red); transform: translateY(-2px); }
}
.account-card.is-flashing {
  animation: donationHighlight 1800ms var(--ease);
  border-color: var(--red);
}
.donation-shell.is-flashing::before {
  background: linear-gradient(180deg, var(--red), var(--red));
  box-shadow: 0 0 22px rgba(226, 29, 54, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .account-card.is-flashing {
    animation: none;
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(226, 29, 54, 0.22);
  }
}

/* ----- Touch target a11y düzeltmeleri ----- */
.lang-btn { min-width: 44px; min-height: 44px; padding: 0.55rem 0.4rem; }
@media (max-width: 720px) {
  .lang-btn { min-width: 40px; min-height: 40px; padding: 0.46rem 0.35rem; }
}
.contact-meta .meta-text a {
  display: inline-block;
  padding: 0.18rem 0;
  min-height: 32px;
}
.map-card a {
  padding: 0.4rem 0;
  min-height: 36px;
}

/* ----- Map fallback iyileştirmesi ----- */
.map-fallback {
  padding: 1.5rem;
}
.contact-map-wrap .map-fallback {
  background: linear-gradient(135deg, #f1f5fb, #e6edf6);
}
.map-fallback-inner {
  background: #fff;
  border-radius: 14px;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--line);
  box-shadow: 0 12px 26px rgba(11, 38, 78, 0.08);
  max-width: 320px;
}
.map-fallback-inner a {
  background: var(--navy-1);
  color: #fff;
  padding: 0.62rem 1.1rem;
  border-radius: 9px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.86rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background 220ms var(--ease);
}
.map-fallback-inner a:hover { background: var(--navy-3); }

/* =========================================================
   V5.1 - Responsive brand + mobile navigation
   ========================================================= */
.public-header .brand {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  padding-right: 1.15rem;
  clip-path: none !important;
}

.public-header .brand::before {
  display: none;
}

@media (max-width: 980px) {
  .public-header .brand {
    padding-right: 0.95rem;
  }

  body.nav-menu-open .public-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }

  .mobile-menu-backdrop {
    touch-action: none;
  }

  .mobile-menu-btn {
    isolation: isolate;
    transition: background-color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
  }

  .mobile-menu-btn::before,
  .mobile-menu-btn::after {
    content: '';
    position: absolute;
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
  }

  .mobile-menu-btn::before {
    box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
  }

  .mobile-menu-btn::after {
    transform: scaleX(0);
  }

  .mobile-menu-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.38);
  }

  .mobile-menu-btn[aria-expanded="true"]::before {
    box-shadow: none;
    transform: rotate(45deg);
  }

  .mobile-menu-btn[aria-expanded="true"]::after {
    transform: rotate(-45deg) scaleX(1);
  }

  .main-nav {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav a {
    display: flex;
    align-items: center;
    gap: 0.78rem;
  }

  .main-nav a::before {
    content: '';
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: currentColor;
    opacity: 0.82;
    -webkit-mask: var(--nav-icon) center / contain no-repeat;
    mask: var(--nav-icon) center / contain no-repeat;
  }

  .main-nav a:is([data-nav="home"], [data-page-nav="home"], [data-route="home"]) {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3 2.5 11h2.4v9h5.2v-5.6h3.8V20h5.2v-9h2.4L12 3Z'/%3E%3C/svg%3E");
  }
  .main-nav a:is([data-nav="about"], [data-page-nav="about"], [data-route="about"]) {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10ZM4 22v-2a7 7 0 0 1 14 0v2H4Z'/%3E%3C/svg%3E");
  }
  .main-nav a:is([data-nav="mission"], [data-route="mission"]) {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 10 10h-3a7 7 0 1 1-7-7V2Zm2 0v8h8A10 10 0 0 0 14 2Zm0 12-5-5-2 2 7 7 8-8-2-2-6 6Z'/%3E%3C/svg%3E");
  }
  .main-nav a:is([data-nav="projects"], [data-page-nav="projects"], [data-route="projects"]) {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm10 0h6v6h-6v-6Z'/%3E%3C/svg%3E");
  }
  .main-nav a:is([data-nav="news"], [data-page-nav="news"], [data-route="news"]) {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a3 3 0 0 1-3-3V5a2 2 0 0 1 2-2Zm2 4v4h10V7H6Zm0 7v2h10v-2H6Zm0 4v1h10v-1H6Z'/%3E%3C/svg%3E");
  }
  .main-nav a:is([data-nav="gallery"], [data-page-nav="gallery"], [data-route="gallery"]) {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 3h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm1 15h14l-4.4-5.5-3.2 4-2.1-2.5L5 18Zm11-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E");
  }
  .main-nav a:is([data-nav="contact"], [data-route="contact"]) {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm8 8.2L20 7H4l8 5.2ZM4 9.4V18h16V9.4l-8 5.2-8-5.2Z'/%3E%3C/svg%3E");
  }
}

@media (max-width: 720px) {
  .public-header .brand {
    padding-right: 0.85rem !important;
  }
}

/* Copy state keeps a fixed footprint, so it never expands over the IBAN. */
.account-card code.iban-copy {
  padding-right: 7.2rem;
}

.account-card code.iban-copy::after {
  box-sizing: border-box;
  width: 6.35rem;
  padding-inline: 0.35rem;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .account-card code.iban-copy {
    padding-right: 6.75rem;
  }

  .account-card code.iban-copy::after {
    width: 5.95rem;
    font-size: 0.61rem;
  }
}

/* ----- Filter dropdown ayrıştırma (projeler) ----- */
.lp-topbar-controls {
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(150px, 200px)) auto;
}
@media (max-width: 980px) {
  .lp-topbar-controls {
    grid-template-columns: 1fr 1fr;
  }
  .lp-topbar-controls .lp-search { grid-column: 1 / -1; }
  .lp-topbar-controls .lp-count { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 480px) {
  .lp-topbar-controls {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   V6 — Corporate responsive uplift
   Satışa sunulabilir kurumsal görünüm + mobil dönüşüm katmanı
   ========================================================= */

:root {
  --corp-bg: #f4f7fb;
  --corp-surface: #ffffff;
  --corp-ink: #07172f;
  --corp-text: #233655;
  --corp-muted: #62728a;
  --corp-border: #dbe5f1;
  --corp-blue: #063a78;
  --corp-blue-2: #092b5e;
  --corp-red: #d91f35;
  --corp-teal: #0f8b7d;
  --corp-gold: #b78a35;
  --corp-shadow: 0 18px 45px rgba(7, 23, 47, 0.10);
  --corp-shadow-soft: 0 8px 22px rgba(7, 23, 47, 0.07);
  --corp-radius: 8px;
}

h1,
h2,
h3,
h4 {
  letter-spacing: 0;
}

.public-body {
  color: var(--corp-text);
  background:
    linear-gradient(180deg, #f8fbff 0, var(--corp-bg) 34rem),
    var(--corp-bg);
}

.public-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 58, 120, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(6, 58, 120, 0.028) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 48rem);
}

.public-header {
  border-bottom: 1px solid rgba(219, 229, 241, 0.9);
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 28px rgba(7, 23, 47, 0.06);
}

.nav-shell {
  min-height: 78px;
}

.public-header .brand {
  border-radius: var(--corp-radius);
}

.main-nav a {
  letter-spacing: 0;
  border-radius: var(--corp-radius);
}

.main-nav a.active {
  background: rgba(6, 58, 120, 0.09);
  color: var(--corp-blue);
}

.btn,
.lp-hero-btn,
.card-link,
.detail-back,
.map-fallback-actions a,
.map-load-btn {
  border-radius: var(--corp-radius);
  letter-spacing: 0;
}

.btn-danger,
.lp-hero-btn.primary {
  background: linear-gradient(135deg, var(--corp-red), #b91529);
  box-shadow: 0 14px 30px rgba(217, 31, 53, 0.24);
}

.btn-danger:hover,
.lp-hero-btn.primary:hover {
  box-shadow: 0 18px 36px rgba(217, 31, 53, 0.30);
}

.hero-section {
  background:
    linear-gradient(135deg, #062a59 0%, #0a4388 54%, #0f6d79 100%);
}

.hero-left {
  min-height: 620px;
}

.hero-inner {
  max-width: 660px;
}

.hero-section h1,
.hero-inner h1 {
  letter-spacing: 0;
  line-height: 1.02;
}

.hero-inner p {
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.86);
}

.hero-trust,
.stats-ribbon,
.mission-card,
.project-card,
.news-card,
.donation-shell,
.volunteer-form-wrap,
.contact-left,
.contact-map-wrap,
.lp-card,
.lp-premium-card,
.sidebar-card {
  border-radius: var(--corp-radius);
  box-shadow: var(--corp-shadow-soft);
}

.hero-collage {
  filter: saturate(1.02) contrast(1.03);
}

.hero-tile {
  border-radius: var(--corp-radius);
  border: 1px solid rgba(255, 255, 255, 0.20);
}

.stats-ribbon {
  border: 1px solid rgba(219, 229, 241, 0.95);
}

.section {
  padding-block: clamp(3.4rem, 6vw, 5.6rem);
}

.section-head {
  align-items: end;
  gap: 1.4rem;
}

.eyebrow {
  letter-spacing: 0.10em;
}

.projects-grid.is-rail,
.news-grid.is-rail,
.gallery-grid.is-rail {
  scroll-padding-inline: 20px;
}

.project-card,
.news-card,
.lp-premium-card {
  border: 1px solid rgba(219, 229, 241, 0.95);
  background: #fff;
}

.project-card:hover,
.news-card:hover,
.lp-premium-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--corp-shadow);
}

.img-wrap,
.news-cover,
.lp-gallery-item {
  border-radius: var(--corp-radius) var(--corp-radius) 0 0;
}

.project-tag,
.card-chip,
.news-cat,
.detail-tag,
.detail-tag-chip,
.status-chip,
.lp-kicker {
  border-radius: 6px;
  letter-spacing: 0.06em;
}

.donation-section {
  background:
    linear-gradient(180deg, #fff 0%, #f3f7fc 100%);
}

.donation-shell {
  border: 1px solid rgba(219, 229, 241, 0.95);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,249,253,0.96)),
    #fff;
}

.donation-heading::after {
  content: 'IBAN ile güvenli destek';
  display: inline-flex;
  margin-left: 0.65rem;
  padding: 0.28rem 0.55rem;
  vertical-align: middle;
  border-radius: 6px;
  background: rgba(15, 139, 125, 0.10);
  color: var(--corp-teal);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
}

.donation-trust-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.donation-trust-item {
  border: 1px solid rgba(219, 229, 241, 0.95);
  border-radius: var(--corp-radius);
  background: #fff;
}

.account-card {
  border-radius: var(--corp-radius);
  border-color: rgba(219, 229, 241, 0.95);
  box-shadow: 0 10px 24px rgba(7, 23, 47, 0.08);
}

.account-card code.iban-copy {
  border-radius: 6px;
}

.volunteer-shell,
.contact-shell {
  align-items: stretch;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.contact-form input,
.contact-form textarea,
.lp-search,
.lp-select {
  border-radius: var(--corp-radius);
  border-color: var(--corp-border);
}

.public-footer {
  background:
    linear-gradient(135deg, #061d42 0%, #082f60 55%, #0a3e62 100%);
}

.footer-link-inactive {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.92rem;
  line-height: 1.9;
  cursor: default;
}

.footer-socials:empty {
  display: none;
}

.mobile-action-dock {
  display: none;
}

@media (max-width: 1180px) {
  .main-nav {
    gap: 0.12rem;
  }

  .main-nav a {
    padding-inline: 0.62rem;
    font-size: 0.76rem;
  }
}

@media (max-width: 980px) {
  .public-header .header-actions {
    display: flex;
  }

  .public-header #headerDonateBtn {
    display: none;
  }

  .main-nav.open {
    border-radius: 0 0 14px 14px;
    border: 1px solid rgba(219, 229, 241, 0.95);
    box-shadow: var(--corp-shadow);
  }

  .main-nav.open a {
    min-height: 48px;
    font-size: 0.9rem;
  }

  .hero-shell,
  .about-grid,
  .contact-shell,
  .volunteer-shell {
    grid-template-columns: 1fr;
  }

  .hero-left {
    min-height: auto;
  }

  .hero-inner {
    padding-block: 4rem 2.5rem;
  }
}

@media (max-width: 720px) {
  body.public-body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .container {
    width: min(calc(100% - 1.5rem), var(--container));
  }

  .public-header {
    min-height: 66px;
  }

  .nav-shell {
    min-height: 66px;
  }

  .hero-inner {
    padding: 2.2rem 1rem 1.1rem;
  }

  .hero-section h1,
  .hero-inner h1 {
    font-size: clamp(2rem, 9vw, 2.65rem);
    line-height: 1.04;
  }

  .hero-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }

  .hero-cta-row .btn {
    min-width: 0;
    width: 100%;
    padding-inline: 0.65rem;
    justify-content: center;
  }

  .stats-ribbon {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .stat-item:last-child {
    grid-column: 1 / -1;
  }

  .section-head {
    display: grid;
    align-items: start;
  }

  .section-tools {
    width: 100%;
    justify-content: space-between;
  }

  .projects-grid.is-rail,
  .news-grid.is-rail,
  .gallery-grid.is-rail {
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
  }

  .projects-grid.is-rail .project-card,
  .news-grid.is-rail .news-card {
    flex-basis: 88% !important;
    min-width: 88% !important;
    max-width: 88% !important;
  }

  .gallery-grid.is-rail .gallery-item {
    flex-basis: 82% !important;
    min-width: 82% !important;
    max-width: 82% !important;
  }

  .donation-shell {
    padding: 1rem;
  }

  .donation-heading::after {
    display: flex;
    width: max-content;
    margin: 0.45rem 0 0;
  }

  .donation-trust-grid {
    grid-template-columns: 1fr;
  }

  .donation-btns {
    display: grid;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .footer-bottom,
  .footer-bottom-right {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .mobile-action-dock {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 95;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 0.45rem;
    padding: 0.5rem;
    border: 1px solid rgba(219, 229, 241, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 44px rgba(7, 23, 47, 0.18);
    backdrop-filter: blur(16px);
  }

  .mobile-action {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 10px;
    color: var(--corp-blue);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 800;
    background: #f2f6fb;
  }

  .mobile-action.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--corp-red), #b91529);
  }

  .mobile-action svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  .wa-float {
    display: none;
  }

  .scroll-top {
    bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 430px) {
  .hero-cta-row {
    grid-template-columns: 1fr;
  }

  .mobile-action span {
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card:hover,
  .news-card:hover,
  .lp-premium-card:hover {
    transform: none;
  }
}

/* =========================================================
   V6.1 — Live visual QA fixes
   Header contrast, donation readability, contact alignment
   ========================================================= */

.public-header,
.public-header.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #dbe5f1 !important;
  box-shadow: 0 10px 26px rgba(7, 23, 47, 0.08) !important;
}

.nav-shell {
  min-height: 76px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(1rem, 2vw, 1.8rem) !important;
}

.public-header .brand {
  width: clamp(148px, 10vw, 178px) !important;
  height: 58px !important;
  padding: 0.5rem 0.7rem !important;
  background: #fff !important;
  border: 1px solid #dbe5f1 !important;
  border-left: 4px solid var(--corp-red) !important;
  box-shadow: 0 8px 22px rgba(7, 23, 47, 0.10) !important;
  clip-path: none !important;
}

.public-header .brand::before,
.public-header .brand::after {
  display: none !important;
}

.public-header .brand img,
.brand img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}

.main-nav {
  justify-content: center !important;
  gap: 0.15rem !important;
}

.main-nav a {
  color: #0b2348 !important;
  opacity: 1 !important;
  background: transparent !important;
  min-height: 42px !important;
  padding: 0.65rem 0.72rem !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--corp-blue) !important;
  background: #eef4fb !important;
}

.main-nav a.active {
  color: var(--corp-blue) !important;
  background: #e8f0fa !important;
}

.main-nav a::after {
  background: var(--corp-red) !important;
  height: 3px !important;
}

.header-actions {
  justify-self: end !important;
  gap: 0.8rem !important;
}

.lang-switch,
.lang-switch .lang-btn,
.lang-sep {
  color: #526985 !important;
  opacity: 1 !important;
}

.header-actions .btn {
  min-height: 44px !important;
  padding: 0.85rem 1.1rem !important;
  font-size: 0.86rem !important;
  white-space: nowrap !important;
}

@media (min-width: 981px) and (max-width: 1240px) {
  .nav-shell {
    gap: 0.7rem !important;
  }

  .public-header .brand {
    width: 144px !important;
    height: 54px !important;
  }

  .main-nav a {
    padding-inline: 0.45rem !important;
    font-size: 0.71rem !important;
  }

  .header-actions .btn {
    padding-inline: 0.85rem !important;
  }
}

.donation-section {
  overflow: hidden !important;
}

.donation-shell {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: clamp(1.25rem, 2vw, 1.6rem) !important;
  min-height: 0 !important;
  padding: clamp(1.5rem, 2.5vw, 2rem) !important;
  background: #fff !important;
}

.donation-left {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  grid-template-areas:
    "heading actions"
    "copy actions"
    "trust trust" !important;
  align-items: start !important;
  gap: 0.9rem clamp(1.5rem, 2.5vw, 2.4rem) !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 1px solid #e2eaf4 !important;
}

.donation-heading {
  grid-area: heading !important;
  margin-bottom: 0 !important;
}

.donation-left p {
  grid-area: copy !important;
  max-width: 36ch !important;
  color: #526985 !important;
  font-size: 1rem !important;
}

.donation-btns {
  grid-area: actions !important;
  display: grid !important;
  gap: 0.75rem !important;
  margin-block: 1rem !important;
}

.donation-perks {
  grid-column: 2 !important;
  margin-top: 0.6rem !important;
}

.donation-trust-grid {
  grid-area: trust !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  margin-top: 1rem !important;
}

.donation-trust-item {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.6rem !important;
  min-height: 58px !important;
  padding: 0.72rem 0.85rem !important;
  text-align: left !important;
}

.donation-trust-item svg {
  width: 20px !important;
  height: 20px !important;
}

.donation-trust-item strong {
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}

.donation-right {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
  align-content: start !important;
  gap: 1rem !important;
}

.account-card {
  min-width: 0 !important;
  min-height: 292px !important;
  padding: 1.08rem !important;
}

.account-card .bank-head {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 0.75rem !important;
  align-items: center !important;
}

.account-card .bank-logo {
  width: 96px !important;
  height: 36px !important;
}

.account-card h4 {
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

.account-card .bank-sub,
.account-card .label,
.account-card .holder,
.account-card .desc {
  letter-spacing: 0 !important;
}

.account-card code,
.account-card code.iban-copy {
  display: block !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 0.75rem 3rem 0.75rem 0.75rem !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.account-card code::after,
.account-card code.iban-copy::after {
  width: 2rem !important;
  right: 0.65rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 0 !important;
  color: transparent !important;
  background-color: currentColor !important;
}

.contact-section {
  overflow: hidden !important;
  background: #f4f7fb !important;
}

.contact-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr) !important;
  align-items: stretch !important;
  gap: clamp(1.25rem, 2vw, 2rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.contact-left {
  min-width: 0 !important;
  transform: none !important;
  margin: 0 !important;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) !important;
  background: #fff !important;
  border: 1px solid #dbe5f1 !important;
  color: var(--corp-text) !important;
  overflow: hidden !important;
}

.contact-left::before,
.contact-left::after {
  display: none !important;
}

.contact-left h2,
.contact-left h3,
.contact-heading {
  color: var(--corp-ink) !important;
  font-size: clamp(1.45rem, 2vw, 2rem) !important;
  line-height: 1.2 !important;
}

.contact-left p,
.contact-sub,
.meta-text,
.meta-text a {
  color: #526985 !important;
}

.meta-item {
  background: #f7fafc !important;
  border: 1px solid #e2eaf4 !important;
  border-radius: 8px !important;
  padding: 0.85rem !important;
}

.meta-text strong {
  color: #6b7c95 !important;
  letter-spacing: 0.04em !important;
}

.contact-form {
  border-top: 1px solid #e2eaf4 !important;
  margin-top: 1.25rem !important;
  padding-top: 1.25rem !important;
}

.contact-form input,
.contact-form textarea {
  background: #f8fbff !important;
  color: #10233f !important;
  border: 1px solid #cfdceb !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #7b8ca4 !important;
}

.form-grid label > span,
.contact-form label > span,
.field label,
.volunteer-form-wrap label > span {
  color: #5f718a !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.contact-map-wrap {
  min-width: 0 !important;
  min-height: 520px !important;
  background: #eaf0f7 !important;
  border: 1px solid #dbe5f1 !important;
  overflow: hidden !important;
}

.map-fallback {
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 1.5rem !important;
}

.map-fallback-inner {
  max-width: 360px !important;
  width: min(100%, 360px) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 44px rgba(7, 23, 47, 0.12) !important;
}

@media (max-width: 1180px) {
  .donation-shell {
    grid-template-columns: 1fr !important;
  }

  .donation-left p {
    max-width: 68ch !important;
  }

  .donation-right {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .nav-shell {
    grid-template-columns: auto auto auto !important;
  }

  .public-header .brand {
    width: 154px !important;
    height: 50px !important;
  }

  .main-nav.open {
    background: #fff !important;
  }

  .main-nav.open a {
    color: #0b2348 !important;
    font-size: 0.9rem !important;
  }

  .contact-shell {
    grid-template-columns: 1fr !important;
  }

  .contact-map-wrap {
    min-height: 420px !important;
  }

  .donation-left {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "heading"
      "copy"
      "actions"
      "trust" !important;
  }

  .donation-perks {
    grid-column: auto !important;
  }

  .donation-trust-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .donation-right {
    grid-template-columns: 1fr !important;
  }

  .account-card {
    min-height: 0 !important;
  }
}

@media (max-width: 720px) {
  .public-header .brand {
    width: 140px !important;
    height: 46px !important;
    padding: 0.42rem 0.58rem !important;
  }

  .mobile-menu-btn {
    justify-self: end !important;
  }

  .donation-shell {
    padding: 1rem !important;
  }

  .donation-left p {
    max-width: none !important;
  }

  .contact-left {
    padding: 1rem !important;
  }

  .contact-map-wrap {
    min-height: 360px !important;
  }

  .cookie-banner {
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)) !important;
    max-width: none !important;
  }

  .cookie-inner {
    padding: 0.85rem !important;
  }
}

/* =========================================================
   V7 - UI/UX Pro Max + Frontend Design kurumsal yenileme
   Amaç: satışa sunulabilir, güven veren, temiz ve ölçülü arayüz.
   ========================================================= */
:root {
  --v7-ink: #091a35;
  --v7-text: #233b5f;
  --v7-muted: #60748f;
  --v7-blue: #063a78;
  --v7-blue-2: #0a56a3;
  --v7-red: #d71934;
  --v7-red-2: #ef3149;
  --v7-green: #0f766e;
  --v7-bg: #f5f8fc;
  --v7-surface: rgba(255, 255, 255, 0.94);
  --v7-line: #dbe5f1;
  --v7-shadow: 0 22px 70px rgba(9, 26, 53, 0.14);
  --v7-soft-shadow: 0 12px 34px rgba(9, 26, 53, 0.09);
  --v7-radius: 14px;
  --v7-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-padding-top: 104px !important;
}

body.public-body {
  background:
    radial-gradient(circle at 10% 0%, rgba(215, 25, 52, 0.06), transparent 28rem),
    radial-gradient(circle at 90% 12%, rgba(6, 58, 120, 0.07), transparent 32rem),
    var(--v7-bg) !important;
  color: var(--v7-text) !important;
}

.public-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 90 !important;
  height: auto !important;
  padding: 0.8rem clamp(0.85rem, 2vw, 1.6rem) 0 !important;
  background: linear-gradient(180deg, rgba(245, 248, 252, 0.96), rgba(245, 248, 252, 0)) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.public-header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--v7-red), var(--v7-blue), var(--v7-green)) !important;
}

.nav-shell {
  width: min(100%, 1288px) !important;
  min-height: 70px !important;
  margin-inline: auto !important;
  padding: 0.46rem 0.58rem 0.46rem 0.52rem !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.65rem, 1.35vw, 1.15rem) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(219, 229, 241, 0.95) !important;
  border-radius: 18px !important;
  box-shadow: var(--v7-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}

.public-header .brand {
  width: 172px !important;
  height: 54px !important;
  padding: 0.45rem 0.7rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid #e4ecf6 !important;
  border-left: 4px solid var(--v7-red) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(9, 26, 53, 0.09) !important;
  transform: none !important;
}

.public-header .brand::before,
.public-header .brand::after {
  display: none !important;
}

.public-header .brand img,
.brand img {
  width: 100% !important;
  height: 100% !important;
  max-width: 146px !important;
  object-fit: contain !important;
  filter: none !important;
}

.main-nav {
  justify-self: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.15rem !important;
  padding: 0.28rem !important;
  background: #f3f7fc !important;
  border: 1px solid #e1eaf5 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.main-nav a {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0.7rem !important;
  border-radius: 999px !important;
  color: #102845 !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(0.7rem, 0.78vw, 0.78rem) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  transition: background 180ms var(--v7-ease), color 180ms var(--v7-ease), box-shadow 180ms var(--v7-ease) !important;
}

.main-nav a::after {
  display: none !important;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  background: #fff !important;
  color: var(--v7-blue) !important;
  box-shadow: 0 8px 18px rgba(9, 26, 53, 0.08) !important;
}

.main-nav a.active {
  background: linear-gradient(135deg, var(--v7-blue), #092c5c) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(6, 58, 120, 0.22) !important;
}

.header-actions {
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  min-width: max-content !important;
}

.lang-switch {
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.25rem !important;
  background: #f4f8fc !important;
  border: 1px solid #e1eaf5 !important;
  border-radius: 999px !important;
}

.lang-btn {
  min-width: 38px !important;
  height: 32px !important;
  border-radius: 999px !important;
  color: #425775 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.lang-btn.active {
  background: #fff !important;
  color: var(--v7-blue) !important;
  box-shadow: 0 6px 16px rgba(9, 26, 53, 0.08) !important;
}

.lang-sep {
  display: none !important;
}

#headerDonateBtn {
  min-height: 46px !important;
  padding: 0 1.15rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--v7-red), #bd142b) !important;
  box-shadow: 0 14px 30px rgba(215, 25, 52, 0.25) !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.mobile-menu-btn {
  width: 46px !important;
  height: 46px !important;
  display: none !important;
  place-items: center !important;
  border: 1px solid #d8e4f1 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(9, 26, 53, 0.08) !important;
  cursor: pointer !important;
}

.mobile-menu-btn span {
  width: 20px !important;
  height: 2px !important;
  border-radius: 99px !important;
  background: var(--v7-blue) !important;
}

.hero-section {
  padding-top: 92px !important;
  background:
    linear-gradient(90deg, rgba(12, 18, 52, 0.96) 0%, rgba(6, 58, 120, 0.96) 58%, rgba(6, 58, 120, 0.84) 100%),
    radial-gradient(circle at 18% 22%, rgba(215, 25, 52, 0.28), transparent 22rem) !important;
}

.hero-shell {
  height: auto !important;
  min-height: min(720px, calc(100vh - 18px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.94fr) minmax(420px, 0.86fr) !important;
  align-items: stretch !important;
}

.hero-left {
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(3.8rem, 6vw, 6.4rem) clamp(2rem, 5vw, 6.8rem) clamp(5.8rem, 8vw, 7.5rem) !important;
}

.hero-left::before {
  opacity: 0.42 !important;
}

.hero-inner {
  max-width: 650px !important;
  padding: 0 !important;
}

.hero-eyebrow {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #e7efff !important;
  letter-spacing: 0.08em !important;
  box-shadow: none !important;
}

.hero-left h1 {
  max-width: 11ch !important;
  margin-top: 1.1rem !important;
  color: #fff !important;
  font-size: clamp(3.15rem, 5vw, 5.35rem) !important;
  line-height: 0.94 !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
}

.hero-left p {
  max-width: 58ch !important;
  color: rgba(235, 243, 255, 0.88) !important;
  font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
  line-height: 1.68 !important;
}

.hero-cta-row .btn {
  min-height: 54px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.hero-cta-row .btn-danger {
  background: linear-gradient(135deg, var(--v7-red), #bd142b) !important;
  box-shadow: 0 18px 42px rgba(215, 25, 52, 0.28) !important;
}

.hero-trust {
  width: min(100%, 560px) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  padding: 0.8rem 1rem !important;
}

.hero-collage {
  padding: 0.7rem 0.7rem 0.7rem 0 !important;
  gap: 0.7rem !important;
}

.hero-tile {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22) !important;
}

.hero-tile::after {
  opacity: 0.1 !important;
}

.section {
  padding-block: clamp(4.5rem, 7vw, 7rem) !important;
}

.section-head,
.section-head.center {
  margin-bottom: clamp(2rem, 3vw, 3rem) !important;
}

.section h2,
.center-title,
.lp-title {
  color: var(--v7-ink) !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
}

.donation-section,
.contact-section,
.volunteer-section {
  background:
    radial-gradient(circle at 12% 12%, rgba(15, 118, 110, 0.055), transparent 28rem),
    linear-gradient(180deg, #f6f9fd, #eef4fa) !important;
}

.donation-shell,
.contact-left,
.contact-map-wrap,
.volunteer-form-wrap,
.panel,
.admin-page-head,
.admin-topbar,
.admin-login-card {
  border-radius: 16px !important;
  border: 1px solid #dce7f3 !important;
  box-shadow: var(--v7-soft-shadow) !important;
}

.donation-shell {
  padding: clamp(1.8rem, 3vw, 2.6rem) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 253, 255, 0.98)) !important;
}

.donation-heading {
  color: var(--v7-ink) !important;
}

.donation-trust-item {
  min-height: 58px !important;
  background: #fff !important;
  border-color: #dce7f3 !important;
  border-radius: 12px !important;
}

.account-card {
  border-radius: 14px !important;
  border: 1px solid #dbe6f2 !important;
  box-shadow: 0 12px 30px rgba(9, 26, 53, 0.08) !important;
  transition: transform 180ms var(--v7-ease), box-shadow 180ms var(--v7-ease), border-color 180ms var(--v7-ease) !important;
}

.account-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(6, 58, 120, 0.28) !important;
  box-shadow: 0 20px 44px rgba(9, 26, 53, 0.12) !important;
}

.contact-shell {
  align-items: stretch !important;
}

.contact-left {
  background: rgba(255, 255, 255, 0.98) !important;
}

.contact-map-wrap {
  background: linear-gradient(145deg, #edf4fb, #dfeaf6) !important;
}

.cookie-banner {
  width: min(360px, calc(100vw - 2rem)) !important;
  max-width: 360px !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 52px rgba(9, 26, 53, 0.16) !important;
}

.cookie-inner {
  gap: 0.7rem !important;
  padding: 0.9rem !important;
}

.cookie-text strong {
  font-size: 0.9rem !important;
}

.cookie-text p {
  font-size: 0.8rem !important;
}

.cookie-actions .btn {
  min-height: 38px !important;
  padding-inline: 0.85rem !important;
}

.mobile-action-dock {
  border: 1px solid rgba(219, 229, 241, 0.98) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 50px rgba(9, 26, 53, 0.18) !important;
}

.mobile-action {
  border-radius: 14px !important;
  font-weight: 900 !important;
}

.admin-body {
  background:
    radial-gradient(circle at 12% 0%, rgba(6, 58, 120, 0.08), transparent 28rem),
    radial-gradient(circle at 95% 18%, rgba(215, 25, 52, 0.06), transparent 28rem),
    #f4f7fb !important;
}

.admin-sidebar {
  background: linear-gradient(180deg, #0a2347, #071a35) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.admin-menu button {
  border-radius: 12px !important;
  min-height: 44px !important;
  cursor: pointer !important;
}

.admin-menu button.active {
  background: linear-gradient(135deg, #fff, #eef5ff) !important;
  color: var(--v7-blue) !important;
}

.admin-topbar {
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(16px) !important;
}

.admin-page-head {
  background:
    linear-gradient(135deg, #fff, #f3f8ff) !important;
}

@media (max-width: 1180px) {
  .nav-shell {
    gap: 0.55rem !important;
  }

  .public-header .brand {
    width: 158px !important;
  }

  .main-nav a {
    padding-inline: 0.54rem !important;
    font-size: 0.68rem !important;
  }

  #headerDonateBtn {
    padding-inline: 0.9rem !important;
  }

  .hero-shell {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr) !important;
  }
}

@media (max-width: 980px) {
  html {
    scroll-padding-top: 92px !important;
  }

  .public-header {
    padding: 0.65rem 0.75rem 0 !important;
  }

  .nav-shell {
    min-height: 64px !important;
    grid-template-columns: auto 1fr auto !important;
    border-radius: 16px !important;
  }

  .public-header .brand {
    width: 152px !important;
    height: 48px !important;
  }

  .mobile-menu-btn {
    display: grid !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin-right: 0.35rem !important;
  }

  #headerDonateBtn {
    display: none !important;
  }

  .lang-switch {
    height: 40px !important;
  }

  .main-nav {
    position: fixed !important;
    top: 82px !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - 104px) !important;
    padding: 0.6rem !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.35rem !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: var(--v7-shadow) !important;
    overflow: auto !important;
  }

  .main-nav.open {
    display: flex !important;
  }

  .main-nav a {
    min-height: 48px !important;
    justify-content: flex-start !important;
    padding-inline: 1rem !important;
    font-size: 0.92rem !important;
  }

  .hero-section {
    padding-top: 80px !important;
  }

  .hero-shell {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .hero-left {
    padding: clamp(2.4rem, 8vw, 4rem) clamp(1rem, 5vw, 2rem) clamp(2rem, 7vw, 3rem) !important;
  }

  .hero-inner {
    max-width: 760px !important;
  }

  .hero-left h1 {
    max-width: 12ch !important;
  }

  .hero-collage {
    min-height: 330px !important;
    padding: 0 1rem 1rem !important;
  }

}

@media (max-width: 720px) {
  .public-header {
    padding-inline: 0.55rem !important;
  }

  .nav-shell {
    min-height: 60px !important;
    padding: 0.38rem !important;
    gap: 0.35rem !important;
  }

  .public-header .brand {
    width: 134px !important;
    height: 44px !important;
    padding: 0.36rem 0.52rem !important;
    border-radius: 12px !important;
  }

  .public-header .brand img,
  .brand img {
    max-width: 116px !important;
  }

  .mobile-menu-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  .header-actions {
    margin-right: 0.2rem !important;
  }

  .lang-switch {
    height: 36px !important;
    padding: 0.18rem !important;
  }

  .lang-btn {
    min-width: 32px !important;
    height: 28px !important;
    font-size: 0.76rem !important;
  }

  .main-nav {
    top: 72px !important;
    left: 0.55rem !important;
    right: 0.55rem !important;
  }

  .hero-section {
    padding-top: 68px !important;
  }

  .hero-left {
    padding: 2.25rem 1rem 1.55rem !important;
  }

  .hero-left h1 {
    font-size: clamp(2.1rem, 11.5vw, 3rem) !important;
    line-height: 0.98 !important;
  }

  .hero-left p {
    font-size: 0.98rem !important;
    line-height: 1.58 !important;
  }

  .hero-cta-row {
    gap: 0.65rem !important;
  }

  .hero-cta-row .btn {
    width: 100% !important;
    min-height: 50px !important;
  }

  .hero-collage {
    min-height: 250px !important;
    padding-inline: 0.85rem !important;
  }

  .section {
    padding-block: 3.5rem !important;
  }

  .cookie-banner {
    width: calc(100vw - 1.1rem) !important;
    left: 0.55rem !important;
    right: 0.55rem !important;
    bottom: calc(5.1rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .cookie-inner {
    padding: 0.78rem !important;
  }

  .cookie-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

/* V7.1 - Agent critique refinement: calmer institutional header */
.nav-shell {
  min-height: 64px !important;
  padding: 0.42rem 0.58rem !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 38px rgba(9, 26, 53, 0.12) !important;
}

.public-header .brand {
  width: 152px !important;
  height: 48px !important;
  padding: 0.35rem 0.45rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.public-header .brand img,
.brand img {
  max-width: 138px !important;
}

.main-nav {
  height: 44px !important;
  gap: 0.32rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.main-nav a {
  position: relative !important;
  min-height: 40px !important;
  padding: 0 0.42rem !important;
  border-radius: 8px !important;
  color: #112846 !important;
  font-size: clamp(0.7rem, 0.78vw, 0.76rem) !important;
  font-weight: 760 !important;
}

.main-nav a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0.45rem !important;
  right: 0.45rem !important;
  bottom: 0.1rem !important;
  width: auto !important;
  height: 2px !important;
  border-radius: 99px !important;
  background: var(--v7-red) !important;
  opacity: 0 !important;
  transform: scaleX(0.55) !important;
  transform-origin: center !important;
  transition: opacity 180ms var(--v7-ease), transform 180ms var(--v7-ease) !important;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  background: #f4f8fc !important;
  color: var(--v7-blue) !important;
  box-shadow: none !important;
}

.main-nav a.active {
  background: transparent !important;
  color: var(--v7-blue) !important;
  box-shadow: none !important;
}

.main-nav a.active::after,
.main-nav a:hover::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

.lang-switch {
  height: 38px !important;
  background: transparent !important;
  border-color: #dce7f3 !important;
}

.lang-btn {
  min-width: 34px !important;
  height: 30px !important;
}

#headerDonateBtn {
  min-height: 42px !important;
  padding-inline: 1rem !important;
  box-shadow: 0 10px 24px rgba(215, 25, 52, 0.22) !important;
}

.mobile-menu-btn {
  position: relative !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--v7-blue) !important;
}

.mobile-menu-btn span {
  display: block !important;
  position: static !important;
  width: 20px !important;
  height: 2px !important;
  margin: 2.5px 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: var(--v7-blue) !important;
  color: var(--v7-blue) !important;
}

.cookie-banner {
  width: min(320px, calc(100vw - 2rem)) !important;
  max-width: 320px !important;
}

.cookie-inner {
  padding: 0.78rem !important;
}

.cookie-text p {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

.admin-topbar,
.admin-page-head,
.panel {
  box-shadow: 0 8px 24px rgba(9, 26, 53, 0.07) !important;
}

.panel {
  padding: clamp(1rem, 1.6vw, 1.25rem) !important;
}

@media (max-width: 1180px) {
  .main-nav {
    gap: 0.12rem !important;
  }

  .main-nav a {
    padding-inline: 0.32rem !important;
    font-size: 0.66rem !important;
  }
}

@media (max-width: 980px) {
  .nav-shell {
    min-height: 60px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .mobile-menu-btn {
    display: flex !important;
    flex-direction: column !important;
  }

  .main-nav {
    top: 78px !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 104px) !important;
    padding: 0.58rem !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-content: start !important;
    gap: 0.35rem !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #dce7f3 !important;
    border-radius: 16px !important;
    box-shadow: var(--v7-shadow) !important;
    overflow: auto !important;
  }

  .main-nav.open {
    display: grid !important;
  }

  .main-nav a {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-size: 0.9rem !important;
    padding-inline: 0.95rem !important;
    color: #0b2348 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: 1 !important;
  }

  .main-nav a.active {
    background: #eef5ff !important;
    color: var(--v7-blue) !important;
  }

  .main-nav a::after {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .public-header .brand {
    width: 126px !important;
    height: 42px !important;
  }

  .public-header .brand img,
  .brand img {
    max-width: 112px !important;
  }

  .cookie-banner {
    width: calc(100vw - 1.1rem) !important;
    max-width: none !important;
  }

  .cookie-text p {
    display: none !important;
  }

  .cookie-actions .btn {
    min-height: 36px !important;
  }

  .admin-body {
    background: #f4f7fb !important;
  }

  .admin-main {
    padding: 0.75rem !important;
    gap: 0.75rem !important;
  }

  .admin-topbar {
    padding: 0.7rem !important;
    gap: 0.55rem !important;
    border-radius: 14px !important;
  }

  .admin-toolbar {
    gap: 0.45rem !important;
  }

  .admin-toolbar .btn {
    min-height: 42px !important;
    padding: 0.55rem 0.75rem !important;
    font-size: 0.78rem !important;
  }

  .admin-topbar input,
  #topSearch {
    min-height: 44px !important;
    font-size: 0.9rem !important;
  }

  .admin-page-head {
    padding: 1rem !important;
    border-radius: 14px !important;
  }

  .admin-page-head h1 {
    font-size: 1.45rem !important;
  }

  .panel {
    padding: 1rem !important;
    border-radius: 14px !important;
  }

  .panel-help {
    padding: 0.75rem !important;
    font-size: 0.84rem !important;
  }
}

/* =========================================================
   FINAL UI LOCK - after all historical overrides
   This block intentionally sits at EOF so older V-layers cannot
   reintroduce header haze, hero bands, or donation overlap.
   ========================================================= */
.public-header,
.public-header.scrolled,
body.nav-menu-open .public-header {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.public-header::before,
.public-header::after {
  display: none !important;
  content: none !important;
}

.nav-shell {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 18px 48px rgba(9, 26, 53, 0.16) !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
}

.lang-switch {
  min-height: 42px !important;
  padding: 0.22rem !important;
  background: rgba(255, 255, 255, 0.48) !important;
  border: 1px solid rgba(214, 225, 239, 0.9) !important;
  border-radius: 999px !important;
}

.lang-btn {
  min-width: 38px !important;
  height: 34px !important;
  border-radius: 999px !important;
}

.lang-btn.active {
  background: #fff !important;
  color: var(--v7-blue) !important;
  box-shadow: 0 1px 0 rgba(9, 26, 53, 0.04), 0 6px 14px rgba(9, 26, 53, 0.08) !important;
}

.hero-section {
  background: linear-gradient(90deg, #171b43 0%, #083a78 56%, #0a4386 100%) !important;
  padding-bottom: 0 !important;
}

.hero-section::after {
  content: "" !important;
  display: block !important;
  height: 64px !important;
  margin: 0 !important;
  background: #f5f8fc !important;
}

.hero-shell {
  min-height: min(690px, calc(100vh - 32px)) !important;
}

.donation-section {
  background: #f5f8fc !important;
}

.donation-shell {
  display: grid !important;
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) !important;
  grid-template-areas: "intro accounts" !important;
  gap: clamp(1.5rem, 2.2vw, 2.25rem) !important;
  align-items: start !important;
  padding: clamp(1.6rem, 2.5vw, 2.2rem) !important;
  min-height: 0 !important;
  background: #fff !important;
}

.donation-left {
  grid-area: intro !important;
  grid-column: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  position: sticky !important;
  top: 104px !important;
  z-index: 1 !important;
}

.donation-left p {
  max-width: 42ch !important;
  margin: 0 !important;
}

.donation-btns {
  width: 100% !important;
  margin: 0.25rem 0 0 !important;
}

.donation-perks {
  grid-column: auto !important;
  margin-top: 0.25rem !important;
}

.donation-trust-grid {
  grid-template-columns: 1fr !important;
  gap: 0.65rem !important;
  margin-top: 0 !important;
}

.donation-right {
  grid-area: accounts !important;
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  align-content: start !important;
}

.accounts-panel-head {
  grid-column: 1 / -1 !important;
}

.account-card {
  min-width: 0 !important;
  min-height: 236px !important;
  height: 100% !important;
}

.iban-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.55rem !important;
  align-items: stretch !important;
}

.account-card code,
.account-card code.iban-copy {
  padding: 0.7rem 0.75rem !important;
}

.iban-copy-btn {
  min-width: 76px !important;
  min-height: 48px !important;
}

.admin-logo {
  min-height: 86px !important;
  padding: 0.9rem 1rem !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-left: 4px solid var(--v7-red) !important;
  border-radius: 0 18px 18px 0 !important;
}

.admin-logo img {
  width: min(100%, 172px) !important;
  height: 58px !important;
  object-fit: contain !important;
}

@media (max-width: 1180px) {
  .donation-shell {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "accounts" !important;
  }

  .donation-left {
    position: static !important;
  }

  .donation-right {
    grid-column: 1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .main-nav {
    left: 1rem !important;
    right: 1rem !important;
    width: auto !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(18px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.14) !important;
    box-shadow: 0 24px 70px rgba(5, 26, 58, 0.24) !important;
  }

  .main-nav.open {
    display: grid !important;
  }

  .main-nav a {
    min-height: 52px !important;
    border-radius: 12px !important;
  }

  .donation-right {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .nav-shell {
    background: rgba(255, 255, 255, 0.94) !important;
  }

  .main-nav {
    top: 76px !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
  }

  body.nav-menu-open .mobile-action-dock,
  body.nav-menu-open .cookie-banner {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .hero-section::after {
    height: 50px !important;
  }

  .donation-shell {
    padding: 1rem !important;
  }

  .donation-right {
    grid-template-columns: 1fr !important;
  }

  .iban-line {
    grid-template-columns: 1fr !important;
  }

  .iban-copy-btn {
    width: 100% !important;
  }
}

/* TRUE EOF POLISH LOCK - keep this as the final override layer. */
.admin-logo {
  clip-path: none !important;
  filter: none !important;
}

.admin-logo::before,
.admin-logo::after {
  display: none !important;
  content: none !important;
}

.admin-topbar-brand {
  display: none;
}

@media (max-width: 720px) {
  .public-body .main-nav,
  .public-body .main-nav.open {
    top: 84px !important;
    left: 16px !important;
    right: 16px !important;
    width: calc(100vw - 32px) !important;
    max-width: none !important;
    padding: 0.75rem !important;
    gap: 0.35rem !important;
    border-radius: 18px !important;
    border: 1px solid rgba(215, 226, 241, 0.95) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 254, 0.96)) !important;
    box-shadow: 0 22px 64px rgba(5, 26, 58, 0.28) !important;
  }

  .public-body .main-nav.open {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .public-body .main-nav a {
    width: 100% !important;
    min-height: 54px !important;
    justify-content: flex-start !important;
    padding: 0 1rem 0 3.1rem !important;
    border-radius: 14px !important;
    color: var(--v7-ink) !important;
    font-size: 0.92rem !important;
    letter-spacing: 0 !important;
  }

  .public-body .main-nav a::before {
    left: 1rem !important;
    color: var(--v7-blue) !important;
  }

  .public-body .main-nav a.active {
    background: #eaf2ff !important;
    color: var(--v7-blue) !important;
  }

  .public-body .mobile-menu-backdrop.visible {
    background: rgba(7, 20, 42, 0.22) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  body.nav-menu-open .mobile-action-dock,
  body.nav-menu-open .cookie-banner {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 980px) {
  .admin-topbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    min-height: 42px !important;
    padding: 0.35rem 0.7rem !important;
    border: 1px solid #d9e5f4 !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 10px 24px rgba(9, 26, 53, 0.08) !important;
  }

  .admin-topbar-brand img {
    width: 82px !important;
    height: 28px !important;
    object-fit: contain !important;
  }

  .admin-topbar-brand span {
    color: var(--ink) !important;
    font-weight: 900 !important;
    font-size: 0.78rem !important;
  }

  .admin-sidebar.open .admin-logo {
    border-radius: 16px !important;
    clip-path: none !important;
  }
}

/* TARGETED QA FIX LOCK - hero band, floating actions, IBAN density, language/menu polish. */
.hero-section {
  padding-bottom: 0 !important;
}

.hero-section::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
  background: transparent !important;
}

.stats-ribbon {
  margin-top: -56px !important;
  position: relative !important;
  z-index: 12 !important;
}

.wa-float {
  right: 1.35rem !important;
  bottom: 1.35rem !important;
  width: 54px !important;
  height: 54px !important;
  box-shadow: 0 12px 26px rgba(37, 211, 102, 0.34) !important;
}

.scroll-top {
  right: 1.35rem !important;
  bottom: 6.15rem !important;
  width: 44px !important;
  height: 44px !important;
  box-shadow: 0 12px 26px rgba(9, 26, 53, 0.18) !important;
}

.donation-shell {
  align-items: start !important;
}

.account-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 1rem !important;
}

.account-card .bank-head {
  margin-bottom: 0.8rem !important;
}

.iban-line {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.45rem !important;
  align-items: center !important;
}

.account-card code,
.account-card code.iban-copy {
  min-height: 56px !important;
  padding: 0.62rem 0.72rem !important;
  font-size: 0.78rem !important;
  line-height: 1.65 !important;
}

.iban-copy-btn {
  min-width: 62px !important;
  width: 62px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.account-card [data-label],
.account-card .account-meta {
  margin-top: 0.7rem !important;
}

.map-fallback-inner {
  padding: 1.6rem !important;
}

.map-fallback-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  flex-wrap: wrap !important;
}

.map-load-btn,
.map-fallback-actions a {
  appearance: none !important;
  border: 1px solid #0b4a94 !important;
  border-radius: 10px !important;
  min-height: 42px !important;
  padding: 0 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0b4a94 !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(11, 74, 148, 0.18) !important;
}

.map-load-btn {
  background: #fff !important;
  color: #0b4a94 !important;
}

.map-load-btn:hover,
.map-fallback-actions a:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(11, 74, 148, 0.22) !important;
  text-decoration: none !important;
}

.lang-switch {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(36px, 1fr)) !important;
  align-items: center !important;
  gap: 2px !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 3px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #eaf1f8 !important;
  border: 1px solid #d5e2f0 !important;
}

.lang-sep {
  display: none !important;
}

.lang-btn {
  min-width: 0 !important;
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 0.55rem !important;
  border-radius: 10px !important;
  color: #526985 !important;
  box-shadow: none !important;
}

.lang-btn.active {
  background: #0b4a94 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.main-nav a::after,
.main-nav a.active::after,
.main-nav a:hover::after {
  display: none !important;
  width: 0 !important;
}

.main-nav a.active {
  background: #eaf2ff !important;
  color: var(--v7-blue) !important;
}

.mobile-menu-btn {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid #d5e2f0 !important;
  box-shadow: none !important;
}

.mobile-menu-btn span {
  position: absolute !important;
  left: 12px !important;
  width: 20px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #0b4a94 !important;
  transform-origin: center !important;
  transition: transform 180ms ease, opacity 180ms ease, top 180ms ease, width 180ms ease, left 180ms ease !important;
}

.mobile-menu-btn span:nth-child(1) { top: 14px !important; }
.mobile-menu-btn span:nth-child(2) { top: 21px !important; }
.mobile-menu-btn span:nth-child(3) {
  top: 28px !important;
  left: 17px !important;
  width: 15px !important;
}

.mobile-menu-btn[aria-expanded="true"] span:nth-child(1) {
  top: 21px !important;
  transform: rotate(45deg) !important;
}

.mobile-menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0 !important;
}

.mobile-menu-btn[aria-expanded="true"] span:nth-child(3) {
  top: 21px !important;
  left: 12px !important;
  width: 20px !important;
  transform: rotate(-45deg) !important;
}

.mobile-menu-backdrop,
.mobile-menu-backdrop.visible,
.public-body .mobile-menu-backdrop.visible {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.public-header {
  z-index: 1200 !important;
}

.mobile-menu-btn {
  z-index: 1202 !important;
}

.mobile-menu-backdrop.visible {
  z-index: 1090 !important;
}

.public-body .main-nav.open {
  z-index: 1190 !important;
  background: #fff !important;
}

@media (max-width: 720px) {
  .stats-section {
    padding-top: 0.85rem !important;
  }

  .stats-ribbon {
    margin-top: 0 !important;
  }

  .scroll-top {
    right: 1rem !important;
    bottom: calc(5.65rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .wa-float {
    display: none !important;
  }

  .iban-line {
    grid-template-columns: 1fr auto !important;
  }

  .iban-copy-btn {
    width: 68px !important;
    min-width: 68px !important;
  }
}

/* =========================================================
   V8 - Final visual QA lock
   ========================================================= */

.hero-section {
  margin-bottom: 0 !important;
  padding-bottom: clamp(1.4rem, 3vw, 2.4rem) !important;
  background: linear-gradient(90deg, #171b43 0%, #083a78 56%, #0a4386 100%) !important;
}

.hero-section::after {
  display: none !important;
  content: none !important;
}

.stats-section {
  position: relative !important;
  z-index: 11 !important;
  margin: 0 !important;
  padding: clamp(1rem, 2vw, 1.35rem) 0 clamp(2.8rem, 5vw, 4.6rem) !important;
  background: #f5f8fc !important;
}

.stats-section .stats-ribbon {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 720px) {
  .hero-section {
    padding-bottom: 1rem !important;
  }

  .stats-section {
    padding: 0.85rem 0 2.4rem !important;
  }
}

/* =========================================================
   V9 - Hero media + spacing correction
   ========================================================= */

.hero-section {
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

.hero-shell {
  align-items: stretch !important;
}

.hero-collage {
  align-self: stretch !important;
  min-height: 100% !important;
  padding: 0 !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

.hero-collage::before,
.hero-collage::after {
  display: none !important;
  content: none !important;
}

.hero-tile {
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
  transform: none !important;
}

.hero-tile img,
.hero-tile:hover img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  transform: none !important;
  transition: none !important;
}

.hero-tile::after,
.hero-tile:hover::after {
  opacity: 0 !important;
  display: none !important;
  content: none !important;
}

.stats-section {
  padding: 1rem 0 1.1rem !important;
}

.about-section {
  padding-top: clamp(0.35rem, 1vw, 0.8rem) !important;
}

.gallery-card,
.gallery-card img,
.lp-gallery-item,
.lp-gallery-item img {
  object-fit: cover !important;
}

.gallery-card,
.lp-gallery-item {
  padding: 0 !important;
}

.gallery-card img,
.lp-gallery-item img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.gallery-item {
  padding: 0 !important;
}

.gallery-item img,
.gallery-item:hover img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  transform: none !important;
  transition: none !important;
}

.gallery-item:hover {
  transform: none !important;
}

.footer-brand {
  min-width: 0;
}

.footer-brand img {
  width: min(240px, 100%) !important;
  height: auto !important;
  max-height: 72px !important;
  padding: 0.75rem 0.95rem !important;
  margin-bottom: 1rem !important;
  display: block !important;
  object-fit: contain !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(219, 229, 241, 0.88) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16) !important;
}

@media (max-width: 980px) {
  .hero-collage {
    padding: 0 !important;
  }
}

@media (max-width: 720px) {
  .hero-section {
    padding-bottom: 0 !important;
  }

  .hero-collage {
    padding: 0 !important;
    gap: 8px !important;
  }

  .stats-section {
    padding: 0.75rem 0 1rem !important;
  }

  .about-section {
    padding-top: 0.55rem !important;
  }
}