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

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: auto;
  overflow-x: hidden;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  /* bkz. css/navbar-yeni.css — AR yazı tipi "Cairo"dan "Noto Kufi Arabic"ye
     düzeltildi (mockup'ın gerçek font seçimi). */
  font-family: Poppins, "Noto Kufi Arabic", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
}
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.banner-slot {
  position: relative;
  height: clamp(310px, 31vw, 480px);
  overflow: hidden;
  background-color: #22174d;
}
.hero-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-carousel .slide {
  position: absolute;
  inset: 0;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1s ease,
    filter 0.3s ease;
}
.hero-carousel .slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.hero-carousel .slide:hover {
  filter: brightness(1.04);
}
.hero-carousel .slide.banner-1 {
  background-image: var(--banner-image);
}
.hero-carousel .slide.banner-2 {
  background-image: var(--banner-image-2);
}
.banner-slot .slider-arrow.prev {
  left: 20px;
}
.banner-slot .slider-arrow.next {
  right: 20px;
}
[dir="rtl"] .banner-slot .slider-arrow.prev {
  left: auto;
  right: 20px;
}
[dir="rtl"] .banner-slot .slider-arrow.next {
  right: auto;
  left: 20px;
}
.banner-slot .slider-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}
.banner-slot .slider-dots button {
  background: rgba(255, 255, 255, 0.45);
}
.banner-slot .slider-dots button.active {
  background: var(--gold-light);
}

.quick-donate {
  min-height: 96px;
  margin-top: -24px;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 170px auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid rgba(8, 127, 122, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow);
}
.quick-donate .amounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.7fr);
  min-width: 0;
  align-items: stretch;
}
.quick-donate .amounts button {
  min-width: 0;
  padding: 10px 8px;
}
.quick-donate .amounts button[aria-pressed="true"] {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
}
.quick-donate .quick-project-select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.quick-donate .quick-project-select:focus-visible {
  outline: none;
}
.quick-donate .donate-input {
  flex: 0 0 145px;
  margin-top: 0;
  min-width: 0;
}
.quick-donate .donate-input input {
  width: 100%;
  min-height: 48px;
  padding: 0 10px;
  font-size: 0.76rem;
}
.quick-trust {
  display: flex;
  align-items: center;
  gap: 13px;
}
.quick-trust span:last-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.quick-trust strong {
  font-size: 0.94rem;
}
.recurring-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.recurring-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex: none;
  accent-color: var(--teal);
  cursor: pointer;
}
.icon-box {
  width: 50px;
  height: 50px;
  border: 1px solid #cfe4e0;
  color: var(--teal);
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex: none;
}
.quick-trust .quick-donate-icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}
.quick-donate-icon-accent {
  stroke: var(--gold);
}
.amounts {
  display: flex;
  gap: 10px;
}
.amounts button {
  min-width: 86px;
  padding: 10px 14px;
  border: 1px solid #d6dfdd;
  border-radius: 9px;
  color: var(--ink);
  background: #fff;
  transition: 0.2s ease;
}
.amounts button:hover,
.amounts button:focus-visible {
  color: #fff;
  border-color: var(--teal);
  background: var(--teal);
  outline: none;
}
.button {
  min-height: 48px;
  padding: 10px 26px;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.button:hover {
  transform: translateY(-2px);
}

/* Navbar/header (gezinme menüsü, topbar, ana menü, dil/arama panelleri, mobil
   menü) stilleri BURADAN TAMAMEN KALDIRILDI — css/navbar-yeni.css ile satır
   satır (%84 benzerlik) birebir kopyaydı; navbar-yeni.css zaten HER SAYFADA
   (header.php üzerinden) sitewide yükleniyor. Bu dosyadaki eski/senkron-
   olmayan kopya, aynı seçicilerde media'sız (her zaman aktif) kurallar
   taşıdığı için — stylesheet sırası bu dosyayı navbar-yeni.css'ten SONRA
   koyduğundan — navbar'ın media query'li (responsive breakpoint) kurallarını
   sessizce eziyordu (canlıda test edilirken bulundu: iki aşamalı navbar
   daralması ve sepet ikonu görünürlüğü ana sayfada bozuluyordu). */

/* Alt bilgi bölümü başlangıcı */
.site-footer {
  padding: 64px 0 24px;
  color: rgba(255, 255, 255, 0.72);
  background: #152423;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.45fr);
  gap: 40px;
}
.footer-grid h3 {
  margin: 0 0 15px;
  color: #fff;
  font-size: 0.86rem;
}
.footer-grid p,
.footer-grid a {
  margin: 0 0 8px;
  display: block;
  font-size: 0.72rem;
}
.footer-grid a:hover {
  color: var(--mint);
}
.logo-mark {
  display: grid;
}
.logo-mark img {
  width: 78px;
  height: auto;
}
.footer-brand > p {
  margin-top: 17px;
  max-width: 260px;
}
.socials {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.socials a {
  width: 32px;
  height: 32px;
  margin: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.socials a svg {
  width: 15px;
  height: 15px;
}
.socials a:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}
.socials a.social-fb:hover {
  background: #1877f2;
}
.socials a.social-x:hover {
  background: #fff;
  color: #000;
}
.socials a.social-ig:hover {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}
.socials a.social-yt:hover {
  background: #ff0000;
}
.newsletter form {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 15px;
}
.newsletter input {
  width: 100%;
  min-width: 0;
  padding: 7px 12px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  outline: none;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.72rem;
}
.tel-group {
  position: relative;
  display: flex;
  gap: 6px;
}
.tel-group .tel-number {
  width: auto;
  flex: 1;
}
.tel-group .country-select-btn {
  height: 100%;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.72rem;
}
.tel-group .country-select-panel {
  left: 0;
  right: auto;
  width: 270px;
}
.newsletter input:focus {
  border-color: var(--mint);
}
.newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.newsletter button[type="submit"] {
  padding: 8px 18px;
  color: #fff;
  border: 0;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.72rem;
  background: var(--teal);
  transition: background 0.2s ease;
}
.newsletter button[type="submit"]:hover {
  background: var(--teal-dark);
}
.phone-line a {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.phone-line svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.footer-legal {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-legal p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.62rem;
  line-height: 1.9;
  text-align: center;
}
.footer-bottom {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.63rem;
}

:where(a, button, input):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-brand,
  .newsletter {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    flex-direction: column;
  }
}
@media (max-width: 430px) {
  .footer-grid {
    gap: 20px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

.button-primary {
  color: #fff;
  background: var(--teal);
  box-shadow: 0 10px 25px rgba(8, 127, 122, 0.22);
}
.button-primary:hover {
  /* css/bootstrap.css'teki "a:hover, a:focus{color:#23527c}" kuralı (a+:hover,
     0-1-1 özgüllük) salt ".button-primary{color:#fff}" kuralından (sadece
     class, 0-1-0) daha spesifik — hover'da metin siyahımsı laciverte
     dönüyordu, bkz. .btn-donate:hover (css/navbar-yeni.css) aynı kök neden. */
  color: #fff;
}

.impact {
  padding: 74px 0 56px;
  background: linear-gradient(#fff, #fbfcfa);
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.impact article {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-inline-start: 1px solid var(--line);
}
.impact article:first-child {
  border-inline-start: 0;
}
.metric-icon {
  width: 52px;
  height: 52px;
  flex: none;
  color: var(--teal);
  display: grid;
  place-items: center;
  border: 1px solid #cfe1dc;
  border-radius: 50%;
  background: #fff;
}
.metric-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.8;
}
.impact-icon-accent {
  stroke: var(--gold);
}
.impact article div {
  display: grid;
}
.impact strong {
  color: var(--teal);
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  line-height: 1.2;
}
.impact article div > span:last-child {
  color: var(--muted);
  font-size: 0.85rem;
}

.section {
  padding: 44px 0;
}
.section-head {
  margin-bottom: 30px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.section-title {
  text-align: center;
  margin-bottom: 38px;
}
.eyebrow {
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 700;
}
h2 {
  margin: 6px 0 0;
  max-width: 100%;
  font-size: clamp(1.65rem, 2.7vw, 2.4rem);
  line-height: 1.38;
  letter-spacing: -0.035em;
  white-space: nowrap;
  overflow: hidden;
}
.section-head h2,
.section-title h2 {
  position: relative;
}
.section-head h2::after,
.section-title h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--gold);
}
.section-title h2::after {
  margin-inline: auto;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  font-size: 0.85rem;
  font-weight: 700;
}
.text-link svg {
  width: 17px;
  transition: transform 0.2s ease;
}
.text-link:hover svg {
  transform: translateX(-4px);
}

.campaigns {
  background: var(--ivory);
}
.slider-wrap {
  position: relative;
}
.slider-wrap .slider-arrow {
  display: none;
}
.campaign-grid {
  /* Kullanıcı isteği: her zaman 3 kart görünür kalsın, 4. ve sonrası kaydırarak
     gelsin (ekran genişliğinden bağımsız — mockup'ın "mobilde carousel, masaüstünde
     grid" varsayımının aksine, burada her boyutta carousel istendi). */
  display: flex;
  gap: 24px;
  align-items: start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* CSS'in bilinen bir davranışı: overflow-x:auto verilen bir elementte
     overflow-y de (visible bile bırakılsa) otomatik olarak "auto"ya (yani
     kırpma moduna) düşer. .campaign-card:hover/.featured translateY ile
     yukarı kalkıp güçlü bir box-shadow (--shadow: 0 18px 50px) kazanıyor —
     bu gölgenin alt kısmı, kartın normal (hover'sız) yüksekliğinin biraz
     dışına taşıyordu ve satırın kendi üstündeki bu zorunlu kırpma yüzünden
     kesiliyordu (müşteri: "kutu içeriği uzayınca gölge aşağıda kesiliyor").
     Çözüm: padding ile kırpma kutusunun içine gölgeye yetecek pay açılıyor,
     eşit ve ters bir margin ile bu payın SAYFA DÜZENİNDE (dots/sonraki
     içerik) görünür bir boşluk yaratması engelleniyor. */
  padding: 24px 0 70px;
  margin: -24px 0 -70px;
}
.campaign-grid::-webkit-scrollbar {
  display: none;
}
.campaign-grid > .campaign-card {
  flex: 0 0 calc((100% - 2 * 24px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}
.campaign-dots {
  display: flex;
  margin-top: 18px;
}

.trust-section {
  background: #fff;
}
.trust-grid {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(420px, 1.25fr);
  column-gap: 40px;
  align-items: stretch;
}
.trust-photo {
  min-height: 430px;
  background: #dbe1dd
    url("https://borgenproject.org/wp-content/uploads/global_orphan_crisis.jpg")
    center/cover no-repeat;
}
.trust-copy {
  padding: 0;
  align-self: center;
}
.trust-copy .lead {
  margin: 14px 0 28px;
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 580px;
}
.trust-features {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 18px;
}
.trust-features::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  inset-inline-start: 25px;
  width: 2px;
  background: rgba(8, 127, 122, 0.28);
}
.trust-features article {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: start;
  gap: 16px;
}
.trust-features article > span {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--teal);
  border-radius: 50%;
  color: var(--teal);
  background: #fff;
  box-shadow: 0 4px 12px rgba(8, 127, 122, 0.14);
  transition: color 0.2s ease;
}
.trust-features article:hover > span {
  color: var(--teal-dark);
}
.trust-features article > span svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}
.trust-icon-accent {
  stroke: var(--gold);
}
.trust-features h3 {
  margin: 0 0 4px;
  font-size: 0.92rem;
}
.trust-features p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.7;
}

.process-section {
  padding-top: 22px;
  background: var(--ivory);
}
.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.process-grid::before {
  content: "";
  position: absolute;
  top: 52px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.process-grid article {
  position: relative;
  z-index: 1;
  min-height: 235px;
  padding: 27px;
  border: 1px solid #e0e5e2;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
}
.process-grid b {
  position: absolute;
  top: 17px;
  left: 18px;
  color: #abc0bb;
  font-size: 0.72rem;
}
.process-grid article > span {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  color: var(--teal);
  border: 1px solid #cfe1dc;
  border-radius: 50%;
  background: #fff;
}
.process-grid article > span svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.8;
}
.process-icon-accent {
  stroke: var(--gold);
}
.process-grid h3 {
  margin: 18px 0 8px;
  font-size: 1rem;
}
.process-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.slide-carousel {
  position: relative;
}
.products-section .slide-carousel .slide {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.products-section .slide-carousel .slide:not(.active) {
  position: relative;
  pointer-events: none;
}
.products-section .slide-carousel .slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--teal);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow);
  transform: translateY(-50%);
}
.slider-arrow:hover {
  color: #fff;
  border-color: var(--teal);
  background: var(--teal);
}
.slider-arrow svg {
  width: 18px;
}
/* LTR (varsayılan — en/tr/fr): prev solda "‹", next sağda "›" */
.slider-arrow.prev {
  left: 14px;
}
.slider-arrow.next {
  right: 14px;
  transform: translateY(-50%) rotate(180deg);
}
/* RTL (ar): prev sağda "›", next solda "‹" — okuma yönüyle uyumlu */
[dir="rtl"] .slider-arrow.prev {
  left: auto;
  right: 14px;
  transform: translateY(-50%) rotate(180deg);
}
[dir="rtl"] .slider-arrow.next {
  right: auto;
  left: 14px;
  transform: translateY(-50%);
}
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.slider-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cfdad6;
  transition: 0.2s ease;
}
.slider-dots button.active {
  width: 22px;
  border-radius: 5px;
  background: var(--teal);
}

.products-panel {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr);
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}
.products-copy {
  padding: 55px;
  align-self: center;
  text-align: center;
}
.products-dome {
  display: block;
  width: 96px;
  height: 80px;
  margin: 0 auto 16px;
  color: var(--teal);
  stroke-width: 2;
  overflow: visible;
}
.products-dome-crescent {
  animation: dome-crescent-glow 5s ease-in-out infinite;
}
@keyframes dome-crescent-glow {
  0%, 10%, 100% {
    fill: var(--gold);
    filter: drop-shadow(0 0 0 rgba(216, 168, 62, 0))
      drop-shadow(0 0 0 rgba(216, 168, 62, 0));
  }
  35%, 70% {
    fill: #fff0b3;
    filter: drop-shadow(0 0 4px rgba(216, 168, 62, 1))
      drop-shadow(0 0 9px rgba(216, 168, 62, 0.85));
  }
}
@media (prefers-reduced-motion: reduce) {
  .products-dome-crescent {
    animation: none;
  }
}
.products-copy h2 {
  margin: 0;
}
.products-copy p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.85;
  text-align: start;
}
.products-section .slide-carousel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 20px 8px;
  min-width: 0;
  padding: 36px 12px;
  background: var(--ivory);
}
.products-section .slide-carousel .slide {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 340px;
  min-width: 0;
  transform: none;
}
.products-section .slide-carousel .slider-arrow {
  position: relative;
  inset: auto;
  grid-row: 1;
  transform: none;
}
.products-section .slide-carousel .slider-arrow.prev {
  grid-column: 1;
}
.products-section .slide-carousel .slider-arrow.next {
  grid-column: 3;
  transform: rotate(180deg);
}
[dir="rtl"] .products-section .slide-carousel .slider-arrow.prev {
  transform: rotate(180deg);
}
[dir="rtl"] .products-section .slide-carousel .slider-arrow.next {
  transform: none;
}
.products-section .slide-carousel .slider-dots {
  grid-column: 2;
  grid-row: 2;
}

.swipe-hint {
  display: none;
}
@keyframes fields-swipe {
  0%, 15%, 100% { transform: translateX(1.25px); }
  50%, 65% { transform: translateX(-1.25px); }
}
@media (max-width: 760px) {
  .swipe-hint:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    color: var(--muted);
  }
  .swipe-hint svg {
    width: 36px;
    height: 34px;
    flex: none;
    color: var(--teal);
    fill: currentColor;
    stroke: none;
  }
  .swipe-hand {
    animation: fields-swipe 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-hint .swipe-hand {
    animation: none;
  }
}
.fields-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}
.fields-grid a {
  min-height: 140px;
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  text-align: center;
  transition: 0.23s ease;
}
.fields-grid a:hover {
  color: #fff;
  border-color: var(--teal);
  background: var(--teal);
}
.fields-grid a > span {
  width: 60px;
  height: 60px;
  margin: 0 0 16px;
  display: grid;
  place-items: center;
  color: var(--teal);
  border-radius: 17px;
  background: #e9f6f3;
  transition: 0.23s ease;
}
.fields-grid a:hover > span {
  color: var(--gold-light);
  background: rgba(255, 255, 255, 0.14);
}
.fields-grid .field-icon {
  width: 42px;
  height: 42px;
  stroke-width: 1.8;
}
.field-icon-accent {
  fill: var(--gold);
  stroke: var(--gold);
}
.fields-grid h3 {
  margin: 0;
  font-size: 0.95rem;
  transition: transform 0.23s ease;
}
.fields-grid a:hover > span,
.fields-grid a:hover > h3 {
  transform: translateY(-5px);
}

.story-section {
  color: #fff;
  background: var(--teal);
}
.story-grid {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  min-height: 390px;
}
.story-photo {
  min-height: 390px;
  background: url("https://static.wixstatic.com/media/c54b10_b0997c9c4d92490190caecf7bb1eeb3c~mv2.jpg/v1/fill/w_2000%2Ch_1125%2Cal_c/c54b10_b0997c9c4d92490190caecf7bb1eeb3c~mv2.jpg")
    center/cover no-repeat;
}
.story-grid blockquote {
  margin: 0;
  padding: 58px clamp(40px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(4, 57, 57, 0.9),
    rgba(8, 127, 122, 0.93)
  );
}
.quote {
  color: var(--gold-light);
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 0.65;
}
.story-grid blockquote > p {
  max-width: 660px;
  margin: 0 0 20px;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.8;
}
.story-grid footer {
  display: grid;
}
.story-grid footer span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
}
.story-grid blockquote a {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-light);
  font-size: 0.8rem;
  font-weight: 700;
}

/* 2026-09-29 — "Her Katkı Bir Hayatı Değiştirir" (footer .donation-cta) kutusunun
   ana sayfada yukarı kayması / hizasızlığı. Kök neden: eski iskelet2.css'teki
   "#faaliyetrapor { float:left; width:100% }" kuralı. Haber bölümü hâlâ bu id'yi
   taşıyor (#faaliyetrapor çapası için), float olduğu için yer kaplamıyor; bir
   sonraki blok olan .donation-cta haberlerin ARKASINDAN başlıyor, içindeki grid de
   float'ın altına itiliyordu (tarayıcıda ölçüldü: bölüm 853px, içerik 188px).
   İç sayfalarda bu bölüm yok — sorun yalnızca ana sayfada görünüyordu. */
#faaliyetrapor.news-section {
  float: none;
}
.news-section {
  background: #fbfcfa;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.news-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 55, 52, 0.06);
}
.news-photo {
  height: 210px;
  position: relative;
  overflow: hidden;
  background-color: #d8dedb;
}
.news-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-card > div:last-child {
  padding: 22px;
}
.news-card time {
  color: var(--teal);
  font-size: 0.68rem;
}
.news-card h3 {
  margin: 5px 0 5px;
  font-size: 0.98rem;
}
.news-card p {
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 0.75rem;
}
.news-card > div:last-child a {
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 700;
}
.news-dots {
  display: none;
}

/* 2026-09-23 düzeltme: .donation-cta/.cta-grid/.cta-box/.cta-action-row/
   .button-gold'un burada duran ESKİ, TERKEDİLMİŞ bir kopyası vardı (muhtemelen
   footer.php'nin ilk entegrasyonundan kalma) — sayfa-özel bu dosya
   footer-yeni.css'ten SONRA yüklendiği için eşit özgüllükte SESSİZCE
   kazanıyordu, ve kendi arka plan resmi yolu ("../footer/assets/mescidi
   aksa.jpg") GERÇEKTE HİÇ VAR OLMAYAN bir yola işaret ediyordu (gerçek dosya:
   css/assets/mescidi-aksa.jpg). Bu yüzden SADECE ana sayfada hızlı bağış
   bandının zemin resmi hiç yüklenmiyor ve boyutu (h2 font-size vb.) footer.php
   dahil TÜM diğer sayfalardaki (gerçek/doğru) footer-yeni.css halinden hafifçe
   farklı görünüyordu — müşteri "ana sayfada hatalı, detay sayfasında doğru"
   diye bildirdi. Kanonik/doğru versiyon SADECE css/footer-yeni.css'te kalmalı
   (footer.php her sayfada dahil edildiği için zaten evrensel). Aşağıdaki
   1070px ve 760px/430px medya sorgularındaki AYNI bileşenin duplike responsive
   kuralları da (footer-yeni.css'te zaten birebir aynı breakpoint'lerde var)
   kaldırıldı. */

@media (max-width: 1070px) {
  .quick-donate {
    grid-template-columns: minmax(0, 1fr) 170px auto;
  }
  .quick-trust {
    grid-column: 1 / -1;
  }
  .quick-trust .icon-box,
  .quick-trust strong {
    display: none;
  }
  .trust-grid {
    grid-template-columns: 1fr 1.25fr;
  }
  .products-panel {
    grid-template-columns: 1fr;
  }
  .fields-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 760px) {
  body {
    font-size: 15px;
  }
  .shell {
    width: min(100% - 28px, 620px);
  }
  .banner-slot {
    height: 260px;
  }
  .quick-donate {
    min-height: 0;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
  }
  .quick-donate .amounts {
    display: contents;
  }
  .quick-donate .amounts button {
    display: none;
  }
  .quick-donate .donate-input {
    order: 1;
    flex: none;
    width: 100%;
    margin-top: 0;
  }
  .quick-donate .quick-project-select {
    order: 2;
  }
  .quick-donate .quick-trust {
    order: 3;
  }
  .quick-donate .quick-trust .icon-box,
  .quick-donate .quick-trust strong {
    display: none;
  }
  .quick-donate .button-primary {
    order: 4;
    width: 100%;
    min-height: 48px;
    padding: 9px 14px;
    gap: 5px;
    font-size: 0.74rem;
    white-space: nowrap;
  }
  .quick-donate .button-primary svg {
    width: 14px;
    height: 14px;
  }
  .impact {
    padding: 30px 0 35px;
  }
  .impact-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .impact article {
    border-inline-start: 0;
    flex-direction: column;
    padding: 9px 5px;
    gap: 10px;
    text-align: center;
    border-bottom: 1px solid var(--line);
  }
  .impact article:last-child {
    border-bottom: 0;
  }
  .metric-icon {
    width: 38px;
    height: 38px;
  }
  .metric-icon svg {
    width: 26px;
    height: 26px;
  }
  .impact strong {
    font-size: 1.45rem;
  }
  .section {
    padding: 28px 0;
  }
  .fields-section:has(.swipe-hint:not([hidden])) {
    padding-bottom: 4px;
  }
  .fields-section:has(.swipe-hint:not([hidden])) + .campaigns {
    padding-top: 12px;
  }
  .process-section {
    padding-top: 14px;
  }
  .process-section:has(.swipe-hint:not([hidden])) {
    padding-bottom: 8px;
  }
  .section-head {
    align-items: flex-start;
  }
  .section-head .text-link {
    display: none;
  }
  .trust-grid {
    display: block;
  }
  .trust-photo {
    min-height: 300px;
  }
  .trust-copy {
    margin-top: 12px;
    padding: 0;
  }

  .slider-arrow {
    width: 34px;
    height: 34px;
  }
  .slider-arrow svg {
    width: 15px;
  }
  .slider-arrow.prev {
    left: 4px;
  }
  .slider-arrow.next {
    right: 4px;
  }
  [dir="rtl"] .slider-arrow.prev {
    left: auto;
    right: 4px;
  }
  [dir="rtl"] .slider-arrow.next {
    right: auto;
    left: 4px;
  }
  .slider-wrap {
    padding: 0;
  }
  .slider-wrap .slider-arrow {
    display: none;
  }

  .campaign-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    padding: 16px 12px 32px;
    margin: -16px -12px -32px;
  }
  .campaign-grid::-webkit-scrollbar {
    display: none;
  }
  .campaign-grid > .campaign-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .campaign-dots {
    display: flex;
    margin-top: 18px;
  }
  main .section .campaign-card,
  main .section .campaign-card:hover {
    box-shadow: none;
  }
  .campaign-card.featured,
  .campaign-card.featured:hover {
    transform: none;
  }

  .process-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    padding-bottom: 4px;
  }
  .process-grid::-webkit-scrollbar {
    display: none;
  }
  .process-grid article {
    flex: 0 0 62%;
    min-height: 0;
    padding: 20px;
    scroll-snap-align: start;
  }
  .process-grid article > span {
    width: 44px;
    height: 44px;
  }
  .process-grid article > span svg {
    width: 28px;
    height: 28px;
  }
  .process-grid::before {
    display: none;
  }

  .products-section .slide-carousel {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 8px;
  }
  .products-section .slide-carousel .slide {
    grid-column: 1;
  }
  .products-section .slide-carousel .slider-dots {
    grid-column: 1;
  }
  .products-section .slide-carousel .slider-arrow {
    display: none;
  }
  .products-copy {
    padding: 40px 22px;
  }

  .fields-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .fields-grid::-webkit-scrollbar {
    display: none;
  }
  .fields-grid > a {
    flex: 0 0 32%;
    min-height: 108px;
    padding: 16px 10px;
    scroll-snap-align: start;
  }
  .fields-grid a > span {
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
  }
  .fields-grid .field-icon {
    width: 34px;
    height: 34px;
  }

  .news-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    padding: 16px 12px 32px;
    margin: -16px -12px -32px;
  }
  .news-grid::-webkit-scrollbar {
    display: none;
  }
  .news-grid > .news-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .news-dots {
    display: flex;
    margin-top: 18px;
  }

  .story-grid {
    display: block;
  }
  .story-photo {
    min-height: 310px;
  }
  .story-grid blockquote {
    padding: 52px 25px;
  }
}

@media (max-width: 430px) {
  .impact-grid {
    grid-template-columns: 1fr;
  }
  .impact article {
    border-inline-start: 0;
  }
  .fields-grid > a {
    flex: 0 0 46%;
    min-height: 100px;
  }
  .card-actions .button {
    padding-inline: 6px;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Alt bilgi bölümü bitişi */

/* Gerçek entegrasyon düzeltmeleri başlangıcı */
/* Mockup'taki harici stok fotoğraf hotlink'leri kaldırıldı (borgenproject.org / wixstatic.com,
   sitenin kendi malı değil) — gerçek bir fotoğraf eklenene kadar düz renk fallback kullanılıyor. */
.trust-photo {
  background: #dbe1dd;
}
.story-photo {
  background: #dbe1dd;
}
/* Gerçek entegrasyon düzeltmeleri bitişi */

/* Ana sayfa stilleri bölümü bitişi */

/* ========================================================
   VİDEO BÖLÜMÜ (2026-10-05 tasarım revizesi) — kaynak: websitesi revizeler/ana sayfa/styles.css
   Eski .story-section'ın yerini alır. yt eki: oynatıcı tıklanınca yüklenir (.video-poster).
   ======================================================== */
.video-section {
  background: #fff;
}
.video-section .section-title h2 {
  white-space: normal;
}
.video-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #9dcdc3 transparent;
  padding-bottom: 12px;
}
.video-card {
  min-width: 0;
  flex: 0 0 calc((100% - 60px) / 4);
  scroll-snap-align: start;
}
.video-controls { display:flex; justify-content:flex-end; gap:8px; margin-bottom:16px; }
.video-controls[hidden] { display:none; }
.video-controls button { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; color:var(--teal); background:#fff; font-size:23px; }
.video-controls button:hover:not(:disabled) { color:#fff; background:var(--teal); }
.video-controls button:disabled { opacity:.3; cursor:default; }
.video-controls button:focus-visible,.video-grid:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
@media (max-width: 1000px) {
  .video-card { flex-basis:calc((100% - 20px) / 2); }
}
@media (max-width: 600px) {
  .video-card { flex-basis:88%; }
  .video-grid { gap:14px; }
}
.video-player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #102a29;
}
.video-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #102a29;
  cursor: pointer;
}
.video-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.video-play svg {
  width: 62px;
  height: 44px;
  opacity: .9;
  transition: opacity .2s, transform .2s;
}
.video-poster:hover .video-play svg,
.video-poster:focus-visible .video-play svg {
  opacity: 1;
  transform: scale(1.06);
}
.video-poster:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}
.video-source {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: fit-content;
  margin-top: 12px;
  margin-inline-start: auto;
  color: var(--teal);
  font-size: 12px;
}
.video-source:hover {
  text-decoration: underline;
}
.video-source:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
}
@media (max-width: 600px) {
  .video-player { border-radius: 12px; }
}

/* 2026-10-05: mobilde uzun bölüm başlığı (ör. "Acil Destek Bekleyen Kampanyalar") sayfayı yatay taşırıyordu —
   başlığı saran esnek kutu içerik kadar genişlediği için fitHeading() taşmayı göremiyordu. min-width:0 ile
   kutu daralır, başlık js/anasayfa-yeni.js tarafından tek satıra sığacak şekilde küçültülür. */
.section-head > div { min-width: 0; }
/* Aynı sorun ana sayfadaki bağış çağrısı (footer üstü) başlığında: ızgara hücresi içerik kadar genişliyordu (EN/FR mobil) */
.donation-cta .cta-grid > * { min-width: 0; }

/* ========================================================
   2026-10-06 MÜŞTERİ REVİZELERİ (ana sayfa)
   ======================================================== */
/* "Tüm … gör / keşfet" okları: ikon sağdan sola için çizilmiş; TR/EN/FR'de ileri yönü (sağ) göstersin */
main[dir="ltr"] .text-link svg {
  transform: scaleX(-1);
}
main[dir="ltr"] .text-link:hover svg {
  transform: translateX(4px) scaleX(-1);
}
/* Hızlı bağış tutar alanı: TR/EN/FR'de yazı animasyonu soldan başlasın; taşan ifade kesilsin */
main[dir="ltr"] .quick-donate .donate-input input {
  text-align: left;
}
.quick-donate .donate-input input {
  text-overflow: ellipsis;
}
/* Tutar girilmeden "Bağış Yap"a basılırsa */
.quick-donate .donate-input.has-error input {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

/* 2026-10-12 — ana sayfa banner: masaüstü/mobil görsel (müşteri: geçiş 768 px) ----------------------
   Görsel CSS değişkeninden gelir; tarayıcı yalnız eşleşen kuraldaki görseli indirir.
   Mobilde alan kare (panel mobil görsellerinin çoğu 1:1, bir kısmı 1080×1244) ve görsel KIRPILMADAN sığar. */
.hero-carousel .slide {
  background-image: var(--bg);
}
@media (max-width: 768px) {
  .banner-slot {
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: #f3f3f0;
  }
  .hero-carousel .slide {
    background-size: contain;
  }
  .hero-carousel .slide.has-mobil {
    background-image: var(--bg-m, var(--bg));
  }
}