/* ── Widget'larımız hangi Elementor konteynerine (Section/Container/Column)
   düşerse düşsün her zaman tam genişlik alsın — dar/sıkışık görünmesinler. */
.paylas-hero-wrapper, .paylas-activity, .paylas-donation, .paylas-blog,
.paylas-support, .paylas-cta-wrap, .paylas-stats, .paylas-video, .paylas-shop {
  width: 100% !important;
  flex: 1 1 100% !important;
  max-width: 100% !important;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); padding: 14px var(--space-md);
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { max-height: 56px; width: auto; }
.site-header__logo, .site-header__login, .site-header__cta { flex-shrink: 0; }
.site-header__logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; color: var(--color-primary); white-space: nowrap; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; }
.site-header__login { font-weight: 600; font-size: 0.88rem; color: var(--color-fg); white-space: nowrap; }
.site-header__login:hover { color: var(--color-primary); }
.site-header__cta { white-space: nowrap; }
.site-header__cart {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; color: var(--color-fg);
  flex-shrink: 0; transition: all 150ms ease;
}
.site-header__cart:hover { background: var(--color-bg-alt); color: var(--color-primary); }
.site-header__cart-count {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px;
  border-radius: 50%; background: var(--color-primary); color: #fff;
  font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}

@media (max-width: 480px) {
  .site-header__inner { padding: 12px var(--space-sm); gap: 8px; }
  .site-header__cta { padding: 10px 14px; font-size: 0.82rem; }
  .site-header__logo-text { font-size: 1.05rem; }
}

/* -- Mobile header: cap logo render width -------------------------------
   Root cause fix: .site-header__logo img was only constrained by
   max-height (width:auto). The uploaded logo file is ~4.83:1 (w:h), so
   at 56px max-height it actually rendered ~270px wide. On a 390px mobile
   row this starved the right column (cart/account/CTA), all of which
   default to flex-shrink:1; the account link (just an SVG + hidden text,
   the "cheapest" flex item) collapsed toward zero width and effectively
   disappeared -- this was never a display/cascade problem. */
@media (max-width: 991px) {
  .site-header--mobile .site-header__logo img { max-width: 140px; max-height: 40px; }
}

.site-header__menu-toggle {
  background: none; border: none; padding: 8px; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.site-header__burger, .site-header__burger::before, .site-header__burger::after {
  display: block; width: 22px; height: 2px; background: var(--color-fg); position: relative; transition: 200ms ease;
}
.site-header__burger::before, .site-header__burger::after { content: ''; position: absolute; }
.site-header__burger::before { top: -7px; }
.site-header__burger::after { top: 7px; }

/* ── Tam ekran menü (soldan açılır) ─────────────────────────────────────── */
body.no-scroll { overflow: hidden; }

.site-menu-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--color-fg);
  transform: translateX(-100%);
  transition: transform 280ms ease;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.site-menu-overlay--open { transform: translateX(0); }

.site-menu-overlay__top {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 14px var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-menu-overlay__top-left { display: flex; align-items: center; gap: 10px; }
.site-menu-overlay__logo .site-header__logo-text { color: #fff; }
.site-menu-overlay__logo img { max-height: 40px; width: auto; }
.site-menu-overlay__close {
  background: none; border: none; color: #fff; font-size: 1.8rem; line-height: 1;
  cursor: pointer; padding: 4px 8px; min-width: 44px; min-height: 44px;
}
.site-menu-overlay__top-actions { display: flex; align-items: center; gap: 14px; }
.site-menu-overlay__login { font-weight: 600; font-size: 0.9rem; color: #fff; }
.site-menu-overlay__login:hover { text-decoration: underline; }

.site-menu-overlay__body { display: flex; flex: 1; flex-wrap: wrap; }

.site-menu-overlay__nav { flex: 1 1 320px; padding: var(--space-md) var(--space-lg) var(--space-xl); max-width: 480px; }
.site-menu-overlay__list { list-style: none; margin: 0; padding: 0; }
.site-menu-overlay__list > li { border-bottom: 1px solid rgba(255,255,255,0.12); }
.site-menu-overlay__list > li > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px; font-size: 1.3rem; font-weight: 600; color: #fff;
}
.site-menu-overlay__list > li.menu-item-has-children > a::after {
  content: ''; width: 9px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg); transition: transform 200ms ease; flex-shrink: 0; margin-left: 12px;
}
.site-menu-overlay__list > li.site-menu-overlay__item--open > a::after { transform: rotate(-135deg); }

.site-menu-overlay__list .sub-menu {
  list-style: none; margin: 0; padding: 0;
  max-height: 0; overflow: hidden;
  transition: max-height 250ms ease, padding-bottom 250ms ease;
}
/* KÖK NEDEN (2026-08-13): padding-bottom eskiden HER ZAMAN uygulanıyordu
   (kapalıyken bile) — max-height:0 yalnızca içerik yüksekliğini sıfırlar,
   padding otomatik küçülmez; overflow:hidden de padding'i gizlemez (taşma
   değil, kutunun kendi boyutu). Sonuç: "kapalı" alt menü hep 12px'lik
   kalıcı bir şerit bırakıyordu — aylardır "iOS boyama artefaktı" sanılan
   şey buymuş. Padding artık yalnızca AÇIK durumda ekleniyor. */
.site-menu-overlay__item--open > .sub-menu { max-height: 400px; padding-bottom: 12px; }
.site-menu-overlay__list .sub-menu a {
  display: block; padding: 10px 4px 10px 16px; font-size: 1rem; color: rgba(255,255,255,0.75);
}
.site-menu-overlay__list .sub-menu a:hover { color: #fff; }

/* Sağ: Öne Çıkanlar ızgarası (Vuslat referansı) — sadece geniş ekranlarda */
.site-menu-overlay__featured {
  display: none;
  flex: 1 1 480px; padding: var(--space-lg) var(--space-lg) var(--space-xl);
  border-left: 1px solid rgba(255,255,255,0.1);
}
.site-menu-overlay__featured-title {
  display: block; color: rgba(255,255,255,0.6); font-weight: 700; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-md);
}
.site-menu-overlay__featured-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm);
  max-width: 760px;
}
.site-menu-overlay__featured-card {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden;
  display: block;
}
.site-menu-overlay__featured-card img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease;
}
.site-menu-overlay__featured-card:hover img { transform: scale(1.08); }
.site-menu-overlay__featured-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65) 100%);
}
.site-menu-overlay__featured-card span {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1;
  color: #fff; font-weight: 700; font-size: 0.78rem; line-height: 1.25;
}

@media (min-width: 960px) {
  .site-menu-overlay__featured { display: block; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28, 36, 20,0.55) 0%, rgba(28, 36, 20,0.75) 100%);
}
.hero__content { position: relative; padding: var(--space-xl) var(--space-md); max-width: 720px; }
.hero__content h1 { color: #fff; }
.hero__content p { color: #f5ede4; font-size: 1.125rem; max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.btn-outline--light { border-color: #fff; color: #fff; }
.btn-outline--light:hover { background: #fff; color: var(--color-fg); }

/* ── Paylaş Hero Slider (özel Elementor widget'ı) ──────────────────────── */
/* ── Hero Slider (Yeni Tasarım) ────────────────────────────────────────── */
.paylas-hero-wrapper {
  position: relative;
  background: var(--color-bg-alt);
  padding: 40px 5vw 20px;
  overflow: hidden;
}

.paylas-hero-main-slider {
  /* Diğer widget'lar gibi tam genişlik — artık 1200px'de sınırlanmıyor.
     .paylas-hero-wrapper'ın 5vw yatay dolgusu köşeleri yuvarlak/gölgeli
     kart için makul bir kenar boşluğu bırakıyor, tamamen kaldırılmadı. */
  max-width: none;
  margin: 0 auto;
  position: relative;
}

.paylas-hero-slides {
  position: relative;
}

.paylas-hero-slide {
  display: none;
}

.paylas-hero-slide--active {
  display: block;
  animation: paylas-hero-slide-in 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Yalnızca solma yerine hafif yukarı süzülme + ölçek: geçişin yönü olunca
   slayt değişimi "atlama" değil, akıcı bir hareket gibi okunuyor. */
@keyframes paylas-hero-slide-in {
  from { opacity: 0; transform: translateY(14px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Slayt içeriği (başlık/metin/butonlar) görselden bir tık sonra gelsin. */
.paylas-hero-slide--active .paylas-hero-content {
  animation: paylas-hero-content-in 560ms cubic-bezier(0.22, 0.61, 0.36, 1) 90ms both;
}
@keyframes paylas-hero-content-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.paylas-hero-slide-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  /* Satır yüksekliğini "auto + stretch" varsayımına bırakmak yerine
     doğrudan 480px olarak tanımlıyoruz — bazı tarayıcı/render
     bağlamlarında (Elementor önizlemesi dahil) tek satırlı grid'lerde
     align-content:normal'ın stretch'e çözülmesi güvenilir olmayabiliyor,
     bu da görselin kutuyu tam doldurmamasına yol açıyordu. */
  grid-template-rows: 480px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 32px -12px rgba(28, 36, 20,0.25);
  height: 480px;
}
@media (max-width: 820px) {
  .paylas-hero-slide-inner { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
}

.paylas-hero-content {
  flex: 1 1 400px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.paylas-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--color-fg);
}

.paylas-hero-desc {
  font-size: 1.1rem;
  color: var(--color-fg-muted);
  margin: 0 0 32px;
  max-width: 480px;
  line-height: 1.6;
}

.paylas-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.paylas-hero-actions .paylas-btn {
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  text-decoration: none;
  /* Paylaşılan .btn hover efektinin (büyüyen nokta + kayan metin) burada da
     çalışabilmesi için gereken konumlandırma/kırpma. */
  position: relative;
  overflow: hidden;
  --btn-accent: var(--color-primary);
}

.paylas-hero-actions .paylas-btn--primary {
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
}

.paylas-hero-actions .paylas-btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.paylas-hero-actions .paylas-btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.paylas-hero-actions .paylas-btn--outline:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.paylas-hero-image {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.paylas-hero-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* Mobil tarayıcıların (iOS Safari / Android Chrome) tıklanabilir öğelere
   dokununca bastığı grimsi tap-highlight kutusunu kaldır. Görsel geri bildirim
   :hover / :active ile zaten sağlanıyor. Yalnızca mobil davranışı etkiler. */
html,
a, button, input, select, textarea, label,
[role="button"], [onclick], .btn, .paylas-btn {
  -webkit-tap-highlight-color: transparent;
}

/* Thumbnail Navigasyon */
.paylas-hero-thumbs-wrapper {
  max-width: var(--container-max);
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.paylas-hero-thumbs-slider {
  flex: 1;
  overflow: hidden; /* Hide scrollbar, we will use JS or CSS scroll */
}

.paylas-hero-thumbs-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Thumbnail'ları iki navigasyon oku ARASINDA ortala (sığdığında). 'safe'
     anahtarı, thumbnail'lar taşarsa ortalamanın ilk öğeyi erişilemez kılma
     hatasını önleyip başa hizalar. Yan + üst padding, kenardaki aktif
     (scale 1.04 + iç çerçeve) thumbnail'ın slider overflow'unda solundan
     kırpılmasını engeller. */
  justify-content: safe center;
  padding: 4px 8px 8px;
  scrollbar-width: none; /* Firefox */
}
.paylas-hero-thumbs-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.paylas-hero-thumb {
  flex: 0 0 160px;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  scroll-snap-align: start;
  /* Aktif thumbnail değişince solma/renk/ölçek yumuşak geçsin — önceden
     hiç transition yoktu, geçişler sertçe "zıplıyordu". */
  transition: opacity 300ms ease;
}

.paylas-hero-thumb img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transition: transform 300ms;
}

.paylas-hero-thumb:not(.paylas-hero-thumb--active):hover img {
  transform: scale(1.05);
}

/* Inactive thumbs are slightly faded and desaturated */
.paylas-hero-thumb:not(.paylas-hero-thumb--active) {
  opacity: 0.6;
  filter: grayscale(40%);
}

/* Çerçeve için border yerine inset box-shadow: border kutu ölçüsünü
   değiştirip geçiş sırasında görseli sıçratıyordu, box-shadow ise
   yumuşakça animasyon edilebiliyor. */
.paylas-hero-thumb--active {
  box-shadow: inset 0 0 0 3px var(--color-primary);
  opacity: 1;
  filter: none;
  transform: scale(1.04);
}

.paylas-hero-nav-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-fg);
  transition: all 200ms;
  flex-shrink: 0;
}

.paylas-hero-nav-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

@media (max-width: 820px) {
  /* Mobilde görsel üstte, metin altta */
  .paylas-hero-image { order: -1; }

  .paylas-hero-content {
    padding: 36px 24px 28px;
    /* Slaytlar arası geçişte başlık/açıklama uzunluğu farklı olduğunda
       kutunun boyu değişip sayfanın yukarı-aşağı zıplamasına yol
       açmasın diye sabit bir minimum yükseklik + satır sınırlaması. */
    min-height: 340px;
  }

  .paylas-hero-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .paylas-hero-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Görselin altında boşluk kalmaması için sabit yükseklik yerine
     kendi en-boy oranına göre boyutlansın. */
  .paylas-hero-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 16/10;
  }

  .paylas-hero-thumb {
    flex: 0 0 96px;
  }

  /* İlk (ikincil/outline) buton mobilde çok büyük durmasın */
  .paylas-hero-actions {
    gap: 10px;
  }
  .paylas-hero-actions .paylas-btn {
    padding: 10px 18px;
    font-size: 0.92rem;
  }
}

/* ── Bağış Popup (hero slider "Bağış Yap" butonu) ─────────────────────── */
body.paylas-popup-open { overflow: hidden; }

.paylas-donate-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* [hidden] ve .paylas-donate-popup class selektörü aynı özgüllükte olduğu
   için, sıradaki (author) kural olarak bizim display:flex kuralımız
   tarayıcının varsayılan "[hidden] { display:none }" kuralını eziyordu —
   bu yüzden popup, JS ile hiç tıklanmadan sayfa yüklenir yüklenmez
   görünür kalıyordu. Bu kural o çakışmayı açıkça çözer. */
.paylas-donate-popup[hidden] {
  display: none;
}

.paylas-donate-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 36, 20, 0.55);
}

.paylas-donate-popup__box {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.35);
  animation: paylasPopupIn 200ms ease-out;
}

@keyframes paylasPopupIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.paylas-donate-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.paylas-donate-popup__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.paylas-donate-popup__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paylas-donate-popup__body {
  padding: 20px 24px 24px;
}

.paylas-donate-popup__body h3 {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-family: var(--font-heading);
}

/* Popup açık renkli bir kutu — .paylas-donate-qty__stepper/unit-price gibi
   paylaşılan sınıflar varsayılan olarak KOYU (renkli kart overlay'i)
   arka planlara göre beyaz metin kullanıyor; burada açık zemine uygun
   koyu renk paletiyle override ediyoruz. */
.paylas-donate-popup__body .paylas-donate-price-row {
  margin-bottom: 16px;
}
.paylas-donate-popup__body .paylas-donate-unit-price { color: var(--color-primary); font-size: 1.1rem; }
.paylas-donate-popup__body .paylas-donate-qty__stepper {
  border: 2px solid var(--color-border);
}
.paylas-donate-popup__body .paylas-donate-qty__btn {
  background: var(--color-bg-alt); color: var(--color-fg);
}
.paylas-donate-popup__body .paylas-donate-qty__btn:hover { background: var(--color-border); }
/* NOT (2026-08-01): .paylas-donate-popup .paylas-donate-popup__body ile
   özgüllük artırıldı — .paylas-donate-qty__stepper input[type="number"]
   (koyu-zeminli kart overlay'i için varsayılan BEYAZ metin) dosyada bu
   kuraldan SONRA geliyor ve aynı özgüllüğe sahipti, bu yüzden kaynak
   sırasına göre O kazanıp popup'ta adet rakamını (açık zeminde beyaz
   metin) görünmez kılıyordu. */
.paylas-donate-popup .paylas-donate-popup__body input[type="number"] {
  color: var(--color-fg); font-size: 1.1rem;
}

.paylas-donate-popup__submit {
  width: 100%;
  border: none;
  cursor: pointer;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--radius-sm);
}

.paylas-donate-popup__error {
  color: #c0392b;
  font-size: 0.85rem;
  margin: 10px 0 0;
}

/* ── Grids & Cards ──────────────────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Bağış Kartları ızgarası da .container'ın sınırlı genişliğinden kurtulup
   ekranın tam genişliğine yayılır (mobil + masaüstü).
   NOT (2026-08-01): width:100vw + negative margin tekniği, viewport
   genişliği .container'ın kendi genişliğini aşana kadar (yani .container
   max-width'e çarpana kadar, ~1200px'in altında) gereksiz — ve iOS
   Safari'de gerçek görünür genişlikle 100vw'nin birebir örtüşmemesi
   yüzünden sayfa genelinde yatay "kayma" (rubber-band) bug'ına yol
   açıyordu. Bu yüzden .container hâlâ tam genişlikteyken (≤1200px, yani
   pratikte TÜM mobil cihazlar) vw hiç kullanılmıyor; sadece .container'ın
   kendi padding'i iptal ediliyor. vw tabanlı gerçek viewport-breakout
   sadece .container'ın gerçekten daraldığı geniş masaüstünde devreye
   giriyor (aşağıdaki media query). */
.paylas-donation-grid.grid-3 {
  width: auto;
  margin-left: calc(-1 * var(--space-md));
  margin-right: calc(-1 * var(--space-md));
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  justify-content: safe center;
}
@media (min-width: 1201px) {
  .paylas-donation-grid.grid-3 {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    padding-left: max(var(--space-md), calc((100vw - var(--container-max)) / 2 + var(--space-md)));
    padding-right: var(--space-md);
  }
}

.activity-card__placeholder, .donate-card__media {
  aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--color-bg-alt), var(--color-border));
}
.activity-card img { aspect-ratio: 4/3; object-fit: cover; }
.activity-card__body, .donate-card__body { padding: var(--space-md); }
.donate-card__body { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.donate-card__body h3 { margin: 0; font-size: 1.1rem; }

/* ── Stats ──────────────────────────────────────────────────────────────── */
.stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); text-align: center; }
@media (min-width: 720px) { .stats-row { grid-template-columns: repeat(4, 1fr); } }
.stat__number { display: block; font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; color: var(--color-primary); }
.stat__label { color: var(--color-fg-muted); font-size: 0.9rem; }

/* ── CTA banner ─────────────────────────────────────────────────────────── */
.cta-banner { background: var(--color-accent); color: #fff; padding: var(--space-lg) 0; }
.cta-banner__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.cta-banner h2 { color: #fff; margin: 0; }
.cta-banner .btn-primary { background: #fff; color: var(--color-accent-dark); }
.cta-banner .btn-primary:hover { background: var(--color-bg); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* Açık zemin — sitenin diğer bölümleriyle aynı sıcak krem tonu
   (--color-bg-alt), koyu-zemin varsayımıyla yazılmış eski renkler
   (beyaz/#d8ccc0/rgba(255,255,255,...)) okunaklı koyu tonlarla değiştirildi. */
.site-footer { margin-top: var(--space-xl); background: var(--color-bg-alt); color: var(--color-fg-muted); }

.site-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-lg);
  padding: var(--space-xl) var(--space-md);
}
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

/* flex-direction: column ŞART — varsayılan (row) yönünde logo ile altına
   eklenen para birimi seçici yan yana flex item'ları oluyordu; seçicinin
   geniş içeriği (uzun para birimi isimleri) flex-shrink ile logoyu neredeyse
   sıfır genişliğe (4px'e) sıkıştırıyordu. Dikey yığın + net bir min-width:0
   koruması olmadan bu tekrar olabilir, o yüzden ayrıca img'e flex-shrink:0
   veriyoruz. */
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.site-footer__brand .site-header__logo-text { font-size: 1.3rem; font-weight: 700; color: var(--color-fg); }
.site-footer__brand img { max-height: 56px; width: auto; flex-shrink: 0; }

/* Başlıklar marka vurgu rengiyle (referans tasarımdaki nane yeşili başlıklara
   karşılık gelir) — açık zeminde de yeterli kontrastı koruyor. */
.site-footer h4 { font-size: 1rem; font-weight: 700; margin: 0 0 var(--space-sm); color: var(--color-accent-dark); }

.site-footer__contact-list { list-style: none; margin: 0 0 var(--space-sm); padding: 0; }
.site-footer__contact-list li { font-size: 0.9rem; margin: 0 0 6px; padding: 0; line-height: 1.5; }

.site-footer__socials { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
/* NOT: .site-footer__col a { display:block; ... } (aşağıda) eşit özgüllükte
   ve dosyada sonra geldiği için display:flex'i eziyordu — align-items/
   justify-content flexbox'a özgü olduğundan display:block'ta hiçbir etkisi
   olmuyor, ikon SVG'si kutunun içinde ortalanmayıp sol-üste kayık duruyordu.
   Ek bir ata seçiciyle (.site-footer__col) özgüllüğü artırıp kalıcı olarak
   kazanmasını sağlıyoruz. */
.site-footer__col .site-footer__socials a {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; border: 1.5px solid var(--color-border); font-size: 0.75rem; font-weight: 700;
  color: var(--color-fg-muted);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
/* Her platformun kendi marka rengi kullanılıyor — hepsi aynı tek tip yeşilde
   olunca ("tek düze") ikonlar birbirinden ayırt edilemiyor ve hover ile
   tutarsız duruyordu. Artık dinginken de, hover'da da AYNI platform rengi
   kullanılıyor (uyumlu), ama üç ikon birbirinden görsel olarak farklı. */
.site-footer__socials a[aria-label="Instagram"] { color: #E4405F; border-color: #E4405F33; }
.site-footer__socials a[aria-label="Instagram"]:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  border-color: transparent; color: #fff; transform: translateY(-2px);
}
.site-footer__socials a[aria-label="Facebook"] { color: #1877F2; border-color: #1877F233; }
.site-footer__socials a[aria-label="Facebook"]:hover {
  background: #1877F2; border-color: #1877F2; color: #fff; transform: translateY(-2px);
}
.site-footer__socials a[aria-label="WhatsApp"] { color: #25D366; border-color: #25D36633; }
.site-footer__socials a[aria-label="WhatsApp"]:hover {
  background: #25D366; border-color: #25D366; color: #fff; transform: translateY(-2px);
}

.site-footer__col ul, .site-footer__col li { margin: 0; }
.site-footer__col a, .site-footer__col li { display: block; padding: 4px 0; font-size: 0.9rem; }
.site-footer__col a { text-decoration: none; color: var(--color-fg-muted); }
.site-footer__col a:hover { color: var(--color-primary); }

/* "Bize Ulaşın" kolonu — WhatsApp ve e-posta artık gerçek, tıklanabilir
   linkler (öncesinde WhatsApp düz metindi, e-posta hiç görünmüyordu). */
.site-footer__reach-list { list-style: none; margin: 0; padding: 0; }
.site-footer__reach-list li { margin: 0 0 10px; }
.site-footer__reach-list a {
  display: flex !important; align-items: center; gap: 8px;
  padding: 0 !important; color: var(--color-fg-muted); text-decoration: none; font-size: 0.9rem;
}
.site-footer__reach-list a:hover { color: var(--color-primary); }
.site-footer__reach-list svg { flex: 0 0 auto; color: var(--color-accent-dark); }
.site-footer__reach-icon--whatsapp { color: #25D366; }
.site-footer__reach-icon--email { color: var(--color-primary); }

.site-footer__bottom { padding: var(--space-sm) 0; border-top: 1px solid var(--color-border); }
.site-footer__bottom-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px;
  font-size: 0.8rem; color: var(--color-fg-muted); padding: 0 var(--space-md);
}

/* Masaüstünde footer yazıları biraz daha okunaklı/büyük — mobildeki kompakt
   boyutlar (dar ekranda yer kazanmak için) korunuyor, sadece geniş ekranda
   büyütülüyor. */
@media (min-width: 900px) {
  .site-footer h4 { font-size: 1.1rem; }
  .site-footer__contact-list li,
  .site-footer__col a,
  .site-footer__reach-list a { font-size: 1rem; }
  .site-footer__contact-list li { line-height: 1.6; }
  .site-footer__bottom-inner { font-size: 0.9rem; }
}

/* ── Generic page content (non-Elementor fallback) ─────────────────────── */
.page-content { padding: var(--space-lg) var(--space-md) var(--space-md); max-width: 800px; margin: 0 auto; }
.woocommerce-page .page-content { max-width: var(--container-max); padding: 0; }
.page-content .entry-content:empty::after {
  content: 'İçerik hazırlanıyor...'; display: block; color: var(--color-fg-muted);
  font-style: italic; padding: var(--space-sm) 0;
}

/* ── Paylaş Destek Ol (Bağış Formu) ────────────────────────────────────── */
.paylas-support { padding: var(--space-xl) 0; }
.paylas-support-body {
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
  align-items: flex-start; max-width: 1200px; margin: 0 auto;
}

/* Sol: dikey kategori listesi (masaüstü) */
.paylas-support-tabs {
  flex: 0 0 240px;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 520px; overflow-y: auto; padding: 0 16px 0 0;
  background: transparent; border-radius: 0;
}
.paylas-support-tab {
  text-align: left; padding: 12px 0; border-radius: 0;
  border: none; background: transparent; font-size: 1.05rem; font-weight: 500;
  color: var(--color-fg-muted); transition: color 300ms ease; cursor: pointer;
  position: relative;
}
.paylas-support-tab::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px;
  background: var(--color-primary); transition: width 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
.paylas-support-tab:hover { color: var(--color-fg); background: transparent; }
.paylas-support-tab--active {
  background: transparent !important;
  color: var(--color-fg) !important; font-weight: 700; box-shadow: none;
}
.paylas-support-tab--active::after { width: 100%; }
.paylas-support-group-label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-fg-muted); padding: 14px 16px 4px;
}
.paylas-support-group-label:first-child { padding-top: 4px; }

/* Sağ: görsel + tutar + buton, dikey */
.paylas-support-right { flex: 1 1 400px; display: flex; flex-direction: column; gap: var(--space-md); }
.paylas-support-media { aspect-ratio: 16/10; position: relative; border-radius: var(--radius-md); overflow: hidden; }
.paylas-support-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.paylas-support-action { display: flex; flex-wrap: wrap; gap: 16px; }
.paylas-support-amount {
  flex: 1 1 220px; display: flex; align-items: stretch;
  border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden;
  background: var(--color-bg-alt); transition: all 300ms ease;
}
.paylas-support-amount:focus-within {
  border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.1); background: #fff;
}
.paylas-support-input {
  flex: 1; border: none; outline: none; text-align: left;
  font-size: 1.15rem; font-weight: 700; font-family: var(--font-body);
  padding: 14px 24px; appearance: textfield; -moz-appearance: textfield;
  background: transparent; color: var(--color-fg);
}
/* Tutar kutularındaki tarayıcı yukarı/aşağı okları (number spinner) her
   yerde gizlenir — bağış tutarı serbestçe yazılan bir değer, ok tuşlarıyla
   1'er artırmak anlamsız ve kutunun içinde görsel kirlilik yaratıyordu. */
.paylas-support-input,
.paylas-donate-amount__input,
.paylas-shop-card__input,
#paylas-donate-popup-amount {
  appearance: textfield; -moz-appearance: textfield;
}
.paylas-support-input::-webkit-outer-spin-button,
.paylas-support-input::-webkit-inner-spin-button,
.paylas-donate-amount__input::-webkit-outer-spin-button,
.paylas-donate-amount__input::-webkit-inner-spin-button,
.paylas-shop-card__input::-webkit-outer-spin-button,
.paylas-shop-card__input::-webkit-inner-spin-button,
#paylas-donate-popup-amount::-webkit-outer-spin-button,
#paylas-donate-popup-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.paylas-support-currency {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  padding: 0 24px; background: transparent; color: var(--color-primary-dark); font-weight: 800; font-size: 1.15rem;
}
.paylas-support-btn { 
  flex: 1 1 220px; text-align: center; justify-content: center; border: none; cursor: pointer;
  border-radius: 999px !important; font-weight: 700; font-size: 1.1rem;
  background: var(--color-primary); color: #fff; padding: 14px 32px;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.2);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.paylas-support-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(4, 120, 87, 0.3);
}

@media (max-width: 700px) {
  .paylas-support-body { flex-direction: column; }
  .paylas-support-tabs {
    flex: 0 0 auto; flex-direction: row; width: 100%; overflow-x: auto; overflow-y: visible;
    max-height: none; scroll-snap-type: x proximity; gap: 24px; padding-bottom: 12px; scrollbar-width: none;
    -ms-overflow-style: none; padding-left: var(--space-md); padding-right: var(--space-md);
  }
  .paylas-support-tabs::-webkit-scrollbar { display: none; }
  .paylas-support-tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; padding: 8px 0; }
  .paylas-support-group-label {
    flex: 0 0 auto; white-space: nowrap; align-self: center;
    padding: 0 4px; border-right: 1px solid var(--color-border); margin-right: 4px;
  }
  .paylas-support-group-label:first-child { padding-top: 0; }
  .paylas-support-action { flex-direction: column; }
}

/* ── Paylaş Faaliyet Kartları (kaydırmalı kart döngüsü) ────────────────── */
.paylas-activity { padding: var(--space-xl) 0; }
.paylas-activity-grid {
  --paylas-cols: 3;
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-behavior: auto !important;
  padding: 16px 4px 24px;
  margin-top: -16px; margin-bottom: -16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.paylas-activity-grid::-webkit-scrollbar { display: none; }
/* Görselden tutup sürüklerken tarayıcının kendi "resmi sürükle" (ghost image
   drag) davranışı devreye giriyor, bizim kaydırma script'imizle çakışıyordu.
   Kaydırılabilir tüm şeritlerdeki görsellerde bunu kapatıyoruz. */
.paylas-activity-grid img,
.paylas-donation-grid img,
.paylas-blog-grid img {
  -webkit-user-drag: none;
  user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-select: none;
}
/* Kart şeridi .container'ın sınırlı genişliğinden kurtulup ekranın tam
   genişliğine yayılır (mobil + masaüstü). vw yerine .container'ın kendi
   padding'inin iptali kullanılıyor — bkz. .paylas-donation-grid.grid-3
   üzerindeki not (iOS'ta yatay "kayma" bug'ının kök nedeni). */
.paylas-activity-grid {
  width: auto;
  margin-left: calc(-1 * var(--space-md));
  margin-right: calc(-1 * var(--space-md));
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  justify-content: safe center;
}
@media (min-width: 1201px) {
  .paylas-activity-grid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    padding-left: max(var(--space-md), calc((100vw - var(--container-max)) / 2 + var(--space-md)));
    padding-right: var(--space-md);
  }
}
.paylas-activity-grid.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.paylas-activity-grid.is-dragging .paylas-activity-card { pointer-events: none; }
.paylas-activity-grid .paylas-activity-card {
  flex: 0 0 auto;
  width: min(320px, 82vw);
}
@media (min-width: 720px) {
  .paylas-activity-grid .paylas-activity-card {
    width: calc((100% - (var(--paylas-cols, 3) - 1) * var(--space-md)) / var(--paylas-cols));
  }
}
.paylas-activity-card {
  background: #fff; border-radius: 16px;
  box-shadow: var(--shadow-card);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Kart dikey flex konteyner: başlık/açıklama ne kadar uzun olursa olsun
     (satır sayısı değişse bile) buton her kartta aynı alt hizada kalsın.
     NOT: height:100% KULLANMAYIN — üst grid'in align-items:stretch'i zaten
     kartları eşit yüksekliğe geriyor; height:100% bununla çakışıp tam tersi
     etki yapıyor (kartlar EŞİT OLMAYAN yüksekliklere düşüyor). */
  display: flex; flex-direction: column;
}
/* transform buradan kaldırıldı — @media(hover:hover) bloğu (aşağıda,
   "Premium Card Hovers") bunu güvenli şekilde yönetiyor; burada bırakmak
   dokunmatik cihazlarda korumasız kalırdı. */
.paylas-activity-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
.paylas-activity-card__media { aspect-ratio: 4/3; overflow: hidden; flex-shrink: 0; }
.paylas-activity-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.paylas-activity-card:hover .paylas-activity-card__media img { transform: scale(1.05); }
/* Üst dolgu, görselle başlık arasındaki mesafeyi belirliyor — yan/alt
   dolgudan daha az tutuyoruz ki görsel ile metin görsel olarak yakın dursun.
   Gövde de dikey flex: açıklama esner, buton en altta hizalı kalır. */
.paylas-activity-card__body { padding: 14px var(--space-md) var(--space-md); display: flex; flex-direction: column; flex: 1; }
.paylas-activity-card__body h3 { font-size: clamp(1.05rem, 4vw, 1.1rem); margin-bottom: 8px; }
.paylas-activity-card__body p { font-size: clamp(0.88rem, 3.5vw, 0.9rem); color: var(--color-fg-muted); margin-bottom: 12px; flex: 1; }
.paylas-activity-link {
  font-weight: 600; font-size: 0.88rem; color: var(--color-primary);
  transition: color 150ms;
}
.paylas-activity-link:hover { color: var(--color-primary-dark); }
.paylas-activity-card__btn,
.paylas-activity-card__btn:hover {
  /* !important: Elementor'ın bu widget için ürettiği sayfa-özel CSS
     (link_color kontrolü .paylas-activity-link'i hedefliyor) aynı özgüllükte
     ama sonradan yükleniyor ve varsayılan olarak arkaplanla birebir aynı
     turuncu rengi basıyor — metni görünmez kılıyordu. */
  color: #fff !important; width: auto; font-size: 0.9rem;
}
.paylas-activity-footer { text-align: center; margin-top: var(--space-md); }

/* ── Paylaş Rakamlar (İstatistik Sayaçları) ────────────────────────────── */
.paylas-stats { padding: var(--space-xl) 0; }
.paylas-stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md);
  text-align: center;
}
@media (min-width: 720px) { .paylas-stats-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .paylas-stats-grid { grid-template-columns: repeat(8, 1fr); gap: var(--space-md); } }
.paylas-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.paylas-stat__icon { font-size: 2rem; color: var(--color-accent); margin-bottom: 4px; }
.paylas-stat__number {
  font-family: var(--font-heading); font-size: 2rem; font-weight: 700;
  color: var(--color-primary); line-height: 1;
}
.paylas-stat__suffix {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 600;
  color: var(--color-primary); margin-left: 2px;
}
.paylas-stat__label { font-size: 0.8rem; color: var(--color-fg-muted); }

/* ── Paylaş Bağış Kartları (Fonlanan Projeler) ─────────────────────────── */
.paylas-donation { padding: var(--space-xl) 0; }
.paylas-donation-filters {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; margin-bottom: var(--space-xl);
  background: transparent; padding: 0;
}
@media (max-width: 768px) {
  .paylas-donation-filters {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 12px; gap: 20px;
    padding-left: var(--space-md); padding-right: var(--space-md);
  }
  .paylas-donation-filters::-webkit-scrollbar { display: none; }
}

.paylas-donation-filter {
  padding: 8px 0; border-radius: 0; border: none; flex: 0 0 auto;
  background: transparent; font-size: 1.1rem; font-weight: 600;
  color: var(--color-fg-muted); cursor: pointer; position: relative;
  transition: color 300ms ease;
}
.paylas-donation-filter::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px;
  background: var(--color-primary); transition: width 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
.paylas-donation-filter:hover { color: var(--color-fg); }
.paylas-donation-filter--active {
  color: var(--color-fg); font-weight: 700;
}
.paylas-donation-filter--active::after {
  width: 100%;
}
.paylas-donate-card {
  position: relative; overflow: hidden; border-radius: 16px;
  aspect-ratio: 3/4; min-height: 380px;
  box-shadow: var(--shadow-card);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.paylas-donate-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.08); }

/* Mobilde kaydırmalı kart döngüsü, masaüstünde 3'lü grid (grid-3 korunur) */
@media (max-width: 719px) {
  .paylas-donation-grid.grid-3 {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: var(--space-md);
    /* scroll-snap-type KASITLI OLARAK YOK: bunun scroll-snap-align:start ile
       birlikte bazı tarayıcılarda sayfa ilk yüklendiğinde scrollLeft'i 0
       yerine doğrudan sol dolgu kadar (24px) başlatmasına yol açtığı ölçüldü
       — ilk kart sol dolguyu "yiyerek" ekran kenarına yapışmış görünüyordu.
       Faaliyet/Blog şeritleri zaten scroll-snap kullanmadan (serbest kaydırma)
       sorunsuz çalışıyor, burada da aynı yaklaşıma geçildi. */
    justify-content: flex-start;
    padding: 4px 4px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    cursor: grab;
    /* Kart şeridi .container'ın dolgusundan (padding) taşıp ekranın tam
       genişliğine yayılır — sol kenar başlıkla hizalı kalır. Bu blok zaten
       max-width:719px media query içinde olduğundan .container hiçbir
       zaman max-width'e çarpmaz — vw kullanmadan sadece .container'ın
       kendi padding'i iptal ediliyor (iOS Safari'de width:100vw'nin
       gerçek görünür genişlikle örtüşmemesinden kaynaklanan yatay
       "kayma" bug'ının kök nedeni buydu). */
    width: auto;
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  .paylas-donation-grid.grid-3 .paylas-donate-card {
    flex: 0 0 auto;
    width: min(280px, 82vw);
  }
  .paylas-donation-grid.grid-3.is-dragging {
    cursor: grabbing;
    user-select: none;
  }
  .paylas-donation-grid.grid-3.is-dragging .paylas-donate-card { pointer-events: none; }
}
.paylas-donate-card__media { position: absolute; inset: 0; }
/* ── Sabit Birim Fiyat + Adet Artırma — Kompakt 2 Satırlı Tasarım (2026-08-01) ─
   Ana sayfa kartları, /bagis/, tekil ürün sayfası ve hero slider popup'ının
   HEPSİ bu ortak görsel dili paylaşıyor: satır 1 = birim fiyat + adet stepper,
   satır 2 = "Bağış Yap" butonu. Eskiden 4 ayrı blok halinde alt alta
   diziliyordu (çok yer kaplıyordu); artık 2 satıra sığdırılıyor. "Toplam"
   satırı kullanıcı isteğiyle kaldırıldı, sadece buton kaldı. */
.paylas-donate-action-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.paylas-donate-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 6px;
}
.paylas-donate-btn-row {
  display: flex;
  align-items: center;
  /* .paylas-shop-card__btn'in margin-top:auto'su, buton artık bu wrapper
     div'in İÇİNDE olduğundan (.paylas-shop-card__body'nin DOĞRUDAN çocuğu
     değil) body'nin flex-column boşluğuna erişemiyor — buton bottom-align
     olmuyordu, bu yüzden fiyat metni tek bir kartta biraz daha uzun/geniş
     olduğunda (ör. "₺ 2.500,00") o karttaki buton diğer kartlara göre
     hizasız görünüyordu (grid'deki tüm kartlar eşit yükseklikte olsa
     bile). margin-top:auto'yu buradaki wrapper'a taşıyoruz — o zaman
     .paylas-shop-card__body'nin doğrudan çocuğu bu row olduğundan auto
     margin doğru şekilde kalan boşluğu yiyip butonu her kartta aynı alt
     hizaya sabitliyor. */
  margin-top: auto;
}
/* NOT (2026-08-01): white-space:nowrap + min-width kaldırıldı — önceden
   fiyat kutusu esnek (flex-shrink) davranıp dar alanda "/ adet" etiketini
   alt satıra kaydırıyordu (ör. "₺ 2.500,00" gibi uzun rakamlarda), bu da
   aynı ızgara satırındaki diğer kartlara göre adet stepper'ının dikey
   hizasını bozuyordu. Artık fiyat metni asla kelime ortasından kırılmıyor;
   gerçekten yer yoksa TÜM satır (.paylas-donate-price-row'un flex-wrap'i
   sayesinde) stepper'ı temiz şekilde alt satıra düşürüyor. */
.paylas-donate-unit-price {
  font-size: 0.95rem; font-weight: 800; white-space: nowrap;
}
.paylas-donate-unit-price .woocommerce-Price-amount { color: inherit; }
.paylas-donate-unit-price__label {
  font-size: 0.7rem; font-weight: 500; opacity: 0.75; text-transform: none;
}
.paylas-donate-qty__stepper {
  display: inline-flex; align-items: stretch; border-radius: var(--radius-sm);
  overflow: hidden; border: 1.5px solid rgba(255,255,255,0.4); flex-shrink: 0;
}
.paylas-donate-qty__btn {
  flex: 0 0 auto; width: 24px; border: none; background: rgba(255,255,255,0.15);
  color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms ease;
}
.paylas-donate-qty__btn:hover { background: rgba(255,255,255,0.3); }
.paylas-donate-qty__stepper input[type="number"] {
  width: 36px; flex: 0 0 auto; border: none; outline: none; background: transparent;
  padding: 5px 0; font-size: 0.9rem; font-weight: 700; text-align: center;
  font-family: var(--font-body); color: #fff;
  appearance: textfield; -moz-appearance: textfield;
}
.paylas-donate-qty__stepper input[type="number"]::-webkit-outer-spin-button,
.paylas-donate-qty__stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.paylas-donate-card__btn {
  width: 100%; white-space: nowrap; padding: 10px 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: #fff !important; 
  color: var(--paylas-donate-overlay-color, var(--color-primary)) !important;
  border: none !important; border-radius: 999px;
  font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.paylas-donate-card__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.paylas-donate-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Alt kısımda yükselen, yumuşak-kavisli üst kenarlı renkli overlay panel —
   referans (Lifeline "Causes Style 7") gibi başlangıçta yarı saydam,
   kart hover'ında tam opak renge dönüyor. */
.paylas-donate-card__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  background: color-mix(in srgb, var(--paylas-donate-overlay-color, var(--color-primary)) 75%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 50% 50% 0 0 / 56px 56px 0 0;
  padding: 52px var(--space-md) var(--space-md);
  color: #fff;
  transition: background 400ms ease;
}
.paylas-donate-card:hover .paylas-donate-card__overlay {
  background: var(--paylas-donate-overlay-color, var(--color-primary));
}
.paylas-donate-card__eyebrow {
  display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; opacity: 0.85; margin-bottom: 4px;
}
.paylas-donate-card__overlay h3 {
  font-size: 1.15rem; line-height: 1.3; color: #fff; margin: 0 0 16px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Referanstaki gibi ilerleme çubuğu + hedef tutarı yan yana (tek satır). */
.paylas-donate-card__meta {
  display: flex; align-items: center; gap: 14px; margin-bottom: 4px;
}
.paylas-donate-progress { flex: 0 0 60%; display: flex; align-items: center; gap: 8px; }
.paylas-donate-progress__track {
  flex: 1; height: 10px; border-radius: 999px; background: #fff; overflow: hidden; padding: 2px;
}
.paylas-donate-progress__fill {
  height: 100%; border-radius: 999px; background: var(--paylas-donate-overlay-color, var(--color-primary));
  transition: width 400ms ease;
}
.paylas-donate-progress__pct { font-size: 0.75rem; font-weight: 700; flex: 0 0 auto; }
.paylas-donate-card__need {
  flex: 1; min-width: 0; text-align: right; display: flex; flex-direction: column;
}
.paylas-donate-card__need-label { font-size: 0.7rem; opacity: 0.85; }
.paylas-donate-card__need-amount { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.paylas-donate-card__raised {
  display: block; font-size: 0.75rem; color: rgba(255,255,255,0.85); margin-bottom: 14px;
}


.paylas-donation-more { text-align: center; margin-top: var(--space-lg); }

/* ── Paylaş Blog Kartları (noktalı, kaydırmalı sayfalar) ────────────────── */
.paylas-blog { padding: var(--space-xl) 0; }

.paylas-blog__header {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  margin-bottom: 32px;
}
.paylas-blog__header h2 { margin: 0; font-family: var(--font-heading); color: var(--color-fg); font-size: 2rem; font-weight: 600; }
.paylas-blog__view-more {
  font-weight: 600; font-size: 1rem; color: var(--color-primary);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; white-space: nowrap;
}
.paylas-blog__view-more:hover { color: var(--color-primary-dark); }

.paylas-blog-grid {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-behavior: auto !important;
  padding: 16px 4px 48px;
  margin-top: -16px; margin-bottom: -40px;
  scrollbar-width: none;
  cursor: grab;
}
.paylas-blog-grid.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.paylas-blog-grid.is-dragging .paylas-blog-card { pointer-events: none; }
.paylas-blog-grid::-webkit-scrollbar { display: none; }
.paylas-blog-grid .paylas-blog-card {
  flex: 0 0 82%;
}
@media (min-width: 640px) {
  /* Sabit (yüzde değil) kart genişliği — referans tasarımdaki gibi kartlar
     büyük kalır ve satıra kaç tane sığdığından bağımsız çalışır: yeterince
     yazı olduğunda konteyneri taşıp bir sonraki kart sağdan kısmen görünür
     (kaydırılabilir olduğunun işareti), az yazıda da küçülüp sıkışmaz. */
  .paylas-blog-grid .paylas-blog-card {
    flex: 0 0 420px;
    width: 420px;
  }
}
@media (min-width: 1024px) {
  .paylas-blog-grid .paylas-blog-card {
    flex: 0 0 520px;
    width: 520px;
  }
}

/* Kart şeridi .container'ın sınırlı genişliğinden kurtulup ekranın tam
   genişliğine yayılır (mobil + masaüstü) — sol kenar başlıkla hizalı
   kalır, sağ tarafta kartlar ekranın kenarına kadar gidip taşabilir;
   sola/başa doğru kaydırıldığında da başlığın hizasına geri döner.
   Bu widget'a özel: Faaliyetlerimiz ve Bağış Kartları widget'ları
   bilinçli olarak masaüstünde boxed (container içinde) bırakıldı. */
.paylas-blog-grid {
  width: auto;
  margin-left: calc(-1 * var(--space-md));
  margin-right: calc(-1 * var(--space-md));
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  justify-content: safe center;
}
@media (min-width: 1201px) {
  .paylas-blog-grid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    padding-left: max(var(--space-md), calc((100vw - var(--container-max)) / 2 + var(--space-md)));
    padding-right: var(--space-md);
  }
}

/* ── Scroll ile beliren (reveal) animasyonu ───────────────────────────────
   .paylas-reveal class'ını JS ekler (main.js) — böylece JS çalışmazsa hiçbir
   şey gizli kalmaz. Görünür alana girince .is-revealed eklenir; geçiş
   bitince JS her iki class'ı da kaldırır, böylece kartların kendi
   :hover transform'larıyla çakışma olmaz. */
.paylas-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.paylas-reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* Global reduced-motion kuralı yalnızca süreleri kısıyor, gecikmeleri değil —
   gecikme kalırsa içerik kısa süre görünmez kalırdı. Burada reveal ve hero
   geçiş gecikmelerini tamamen sıfırlıyoruz. */
@media (prefers-reduced-motion: reduce) {
  .paylas-reveal { opacity: 1; transform: none; transition-delay: 0ms !important; }
  .paylas-hero-slide--active,
  .paylas-hero-slide--active .paylas-hero-content { animation-delay: 0ms !important; }
  /* pointer-events'in 800ms geciken transition-delay'i burada da sıfırlanmazsa,
     içerik anında görünür hale gelir ama bir süre tıklanamaz kalırdı. */
  .paylas-animate-up, .paylas-animate-fade, .paylas-animate-zoom {
    opacity: 1; transform: none; pointer-events: auto; transition-delay: 0ms !important;
  }
}

/* Kartlar satırı taşmadan tam dolduruyorsa (main.js .paylas-grid--fits
   ekler), yukarıdaki asimetrik bleed-padding (sağa-kaydırma/peek için
   tasarlandı) yerine simetrik, gerçekten ortalanmış bir dolgu kullanılır. */
.paylas-activity-grid.paylas-grid--fits,
.paylas-donation-grid.grid-3.paylas-grid--fits,
.paylas-blog-grid.paylas-grid--fits {
  padding-left: var(--space-md);
  justify-content: center;
}

/* İnce kaydırma ilerleme çubuğu — nokta sayfalama yerine, kaydırma
   pozisyonuna göre genişliği/konumu JS ile güncellenen tek bir çizgi. */
.paylas-blog-progress {
  position: relative;
  height: 2px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 40px;
}
.paylas-blog-progress:empty, .paylas-blog-progress.is-hidden { display: none; }
.paylas-blog-progress__thumb {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: left 100ms linear, width 100ms linear;
}

.paylas-blog-card {
  /* height:100% burada da (activity-card'daki gibi) grid'in align-items:stretch'iyle
     çakışıp kartları eşitsiz yüksekliğe düşürüyordu — kaldırıldı. */
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--color-bg-alt);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.paylas-blog-card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
.paylas-blog-card__media { aspect-ratio: 16/9; overflow: hidden; background: var(--color-border); border-radius: 12px 12px 0 0; }
.paylas-blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.paylas-blog-card:hover .paylas-blog-card__media img { transform: scale(1.05); }
.paylas-blog-card__body { padding: 16px; display: flex; flex-direction: column; flex-grow: 1; }
@media (min-width: 1024px) {
  .paylas-blog-card__body { padding: 24px; }
}
.paylas-blog-card__body h3 {
  margin: 0 0 16px; font-size: 1.25rem;
  color: var(--color-fg);
  font-weight: 700; line-height: 1.3;
}
.paylas-blog-card__meta {
  margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.paylas-blog-badge {
  background: var(--color-primary); color: #ffffff;
  padding: 4px 12px; border-radius: 30px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap; flex-shrink: 0;
}
.paylas-blog-date { color: var(--color-fg-muted); font-weight: 500; font-size: 0.75rem; white-space: nowrap; }

/* ── Paylaş Video Galeri ───────────────────────────────────────────────── */
.paylas-video { padding: var(--space-xl) 0; }
.paylas-video-main { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-bottom: var(--space-md); }
@media (min-width: 720px) { .paylas-video-main { grid-template-columns: 1fr 1fr; } }
.paylas-video-card { 
  border-radius: 16px; overflow: hidden; background: var(--color-surface); 
  box-shadow: var(--shadow-card);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.paylas-video-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
.paylas-video-card__media {
  position: relative; aspect-ratio: 16/9; overflow: hidden; cursor: pointer;
}
.paylas-video-card__media img { width: 100%; height: 100%; object-fit: cover; }
.paylas-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; background: rgba(220,38,38,0.9);
  border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 200ms, background 200ms;
  z-index: 2;
}
.paylas-video-play:hover { transform: translate(-50%, -50%) scale(1.1); background: rgba(220,38,38,1); }
.paylas-video-play--sm { width: 40px; height: 40px; }
.paylas-video-card__info { padding: 12px 16px; }
.paylas-video-card__title { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 4px; }
.paylas-video-yt-link { font-size: 0.78rem; color: var(--color-fg-muted); }
.paylas-video-yt-link:hover { color: var(--color-primary); }
.paylas-video-thumbs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm);
}
@media (min-width: 720px) { .paylas-video-thumbs { grid-template-columns: repeat(6, 1fr); } }
.paylas-video-thumb {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius-sm);
  overflow: hidden; display: block;
}
.paylas-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.paylas-video-thumb { border: none; padding: 0; background: none; cursor: pointer; }
.paylas-video-footer { text-align: center; margin-top: var(--space-md); }

/* ── Video Popup (Lightbox) ────────────────────────────────────────────────
   Büyük/küçük video oynat butonlarının ortak paylaşılan popup'ı. Kapatma
   kontrolü HER ZAMAN görünür kalsın diye (masaüstü/mobil fark etmeksizin)
   dialog'un içine, sağ üst köşeye sabitlendi — ekran boyutuna göre ayrı bir
   konumlandırma kuralına gerek kalmıyor. */
.paylas-video-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: none; align-items: center; justify-content: center;
  padding: 56px 16px 16px;
}
.paylas-video-modal.is-open { display: flex; }
.paylas-video-modal__backdrop {
  position: absolute; inset: 0; background: rgba(10, 14, 6, 0.88);
  cursor: pointer;
}
.paylas-video-modal__dialog {
  position: relative; width: 100%; max-width: 960px; z-index: 1;
}
.paylas-video-modal__media {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.paylas-video-modal__close {
  position: absolute; top: -48px; right: 0; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 200ms, transform 200ms;
}
.paylas-video-modal__close:hover { background: rgba(255,255,255,0.28); transform: scale(1.08); }
@media (max-width: 640px) {
  /* Dar ekranda video geniş genişliği kaplıyor, üstte kapatma butonu için
     yeterli boşluk kalmayabiliyor — bu yüzden butonu videonun SAĞ ÜST
     köşesinin üzerine, yarı saydam koyu bir daire olarak bindiriyoruz. */
  .paylas-video-modal { padding: 16px; }
  .paylas-video-modal__close { top: 8px; right: 8px; background: rgba(0,0,0,0.6); }
}
body.paylas-modal-open { overflow: hidden; }

/* ── Paylaş CTA Banner (konteynerli, tam genişlik değil) ────────────────── */
.paylas-cta-wrap { padding: var(--space-lg) 0; }
.paylas-cta {
  display: flex; flex-wrap: wrap; align-items: stretch;
  background-color: var(--color-accent); color: #fff; overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 12px 32px -14px rgba(28, 36, 20,0.3);
}
.paylas-cta__media { flex: 0 0 320px; min-height: 180px; position: relative; }
.paylas-cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.paylas-cta__inner {
  flex: 1 1 320px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}
.paylas-cta__text h2 { color: #fff; margin: 0 0 4px; font-size: 1.4rem; }
.paylas-cta__text p { color: rgba(255,255,255,0.85); margin: 0; font-size: 1rem; }
.paylas-cta__btn {
  font-weight: 700; padding: 14px 32px; border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap;
}
.paylas-cta__btn:hover { 
  opacity: 1; filter: brightness(0.95);
  transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); 
}

.paylas-cta--centered .paylas-cta__inner {
  flex-direction: column; text-align: center; justify-content: center;
}
.paylas-cta--centered .paylas-cta__text { max-width: 600px; }

@media (max-width: 700px) {
  .paylas-cta { border-radius: 16px; }
  .paylas-cta__media { flex-basis: 100%; height: 160px; min-height: 0; }
  .paylas-cta__inner { flex-direction: column; align-items: flex-start; text-align: left; padding: var(--space-md); }
  .paylas-cta__btn { width: 100%; text-align: center; }
}

/* ── Paylaş Bağış Sayfası (WooCommerce mağaza şablonu yerine) ──────────── */
.paylas-shop { padding: var(--space-xl) 0 var(--space-xl); }
.paylas-shop-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-lg); }
.paylas-shop-header h1 { margin: 0 0 8px; }
.paylas-shop-header p { color: var(--color-fg-muted); margin: 0 0 var(--space-sm); }
.paylas-shop-header__cart-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; font-size: 0.88rem; max-width: 100%;
}

/* Mission-tabs ile aynı çerçevesiz metin + büyüyen alt çizgi deseni, burada
   marka rengiyle (--color-primary). Her buton kendi çizgisini yönettiği için
   çok sayıda kategori satır sarsa (flex-wrap) bile hizalama sorunu olmaz. */
.paylas-shop-filters {
  display: flex; flex-wrap: wrap; gap: 4px 26px; justify-content: center;
  margin-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
}
.paylas-shop-filter {
  position: relative;
  padding: 8px 2px 12px; border: none; border-radius: 0;
  background: transparent; font-size: 0.85rem; font-weight: 600;
  color: var(--color-fg-muted); cursor: pointer; transition: color 250ms ease; white-space: nowrap;
}
.paylas-shop-filter::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--color-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform 380ms cubic-bezier(0.65, 0, 0.35, 1);
}
.paylas-shop-filter:hover { color: var(--color-fg); }
.paylas-shop-filter--active { color: var(--color-fg); }
.paylas-shop-filter--active::after { transform: scaleX(1); }

.paylas-shop-body { display: flex; gap: var(--space-lg); align-items: flex-start; }
.paylas-shop-grid {
  flex: 1 1 auto; display: grid; gap: var(--space-md);
  /* Mobilde tek kolon (satır başına 1 ürün) — önceden 640px altında bile
     2 kolondu, dar ekranda kartlar sıkışık görünüyordu. */
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .paylas-shop-grid { grid-template-columns: repeat(3, 1fr); } }

.paylas-shop-card {
  background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 4px 16px -8px rgba(28, 36, 20,0.18); display: flex; flex-direction: column;
}
.paylas-shop-card[hidden] { display: none; }
.paylas-shop-card__media { aspect-ratio: 4/3; overflow: hidden; }
.paylas-shop-card__media img { width: 100%; height: 100%; object-fit: cover; }
.paylas-shop-card__body { padding: var(--space-sm) var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.paylas-shop-card__body h3 { font-size: 0.95rem; margin: 0; line-height: 1.3; min-height: 2.4em; }
/* .paylas-shop-card (ve popup) açık renkli — paylaşılan qty/fiyat/total
   sınıflarını (varsayılan olarak koyu-zeminli kart overlay'i için beyaz
   metinli) açık zemine göre override ediyoruz. */
.paylas-shop-card .paylas-donate-unit-price { color: var(--color-primary); }
.paylas-shop-card .paylas-donate-qty__stepper { border: 2px solid var(--color-border); }
.paylas-shop-card .paylas-donate-qty__btn { background: var(--color-bg-alt); color: var(--color-fg); }
.paylas-shop-card .paylas-donate-qty__btn:hover { background: var(--color-border); }
.paylas-shop-card .paylas-donate-qty__stepper input[type="number"] { color: var(--color-fg); }
.paylas-shop-card__btn { width: 100%; text-align: center; justify-content: center; border: none; cursor: pointer; font-size: 0.85rem; padding: 10px 12px; }

/* "Detaylı Bilgi →" — ana sayfa ve /bagis/ kartlarında, ürünün tekil
   sayfasına giden düşük vurgulu link (paylas-video-yt-link ile tutarlı). */
.paylas-donate-card__detail-link {
  display: inline-block; font-size: 0.78rem; color: rgba(255,255,255,0.75);
  text-decoration: underline; text-underline-offset: 2px; margin: 2px 0 4px;
}
.paylas-donate-card__detail-link:hover { color: #fff; }
.paylas-shop-card__detail-link {
  display: inline-block; font-size: 0.78rem; color: var(--color-fg-muted);
  text-decoration: underline; text-underline-offset: 2px; margin-top: -4px;
}
.paylas-shop-card__detail-link:hover { color: var(--color-primary); }

/* ── Tekil Bağış Kategorisi Sayfası (woocommerce/single-product.php) ──────── */
.paylas-single-product__breadcrumb {
  padding: var(--space-md) 0 0; font-size: 0.85rem; color: var(--color-fg-muted);
}
.paylas-single-product__breadcrumb a { color: var(--color-fg-muted); }
.paylas-single-product__breadcrumb a:hover { color: var(--color-primary); }
.paylas-single-product__breadcrumb span:not(:last-child) { margin: 0 6px; }

.paylas-single-product__layout {
  display: grid; grid-template-columns: 1fr; gap: var(--space-lg);
  padding: var(--space-md) 0 var(--space-xl);
}
@media (min-width: 860px) {
  .paylas-single-product__layout { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

.paylas-single-product__main-image {
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card);
  aspect-ratio: 4/3; background: var(--color-bg-alt);
}
.paylas-single-product__main-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paylas-single-product__thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.paylas-single-product__thumbs img {
  width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card); cursor: pointer;
}

.paylas-single-product__info h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 var(--space-sm); }
.paylas-single-product__desc { color: var(--color-fg-muted); line-height: 1.7; margin-bottom: var(--space-md); }
.paylas-single-product__desc p:last-child { margin-bottom: 0; }

.paylas-single-product__tags { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--space-md); }
.paylas-product-tag-group__label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--color-fg); margin-bottom: 8px; }
.paylas-product-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.paylas-product-tag {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary-dark); font-size: 0.8rem; font-weight: 600;
}

/* NOT: .paylas-single-product__action, .paylas-shop-card'ın kendisi ama
   .paylas-shop-card__body SARMALAYICISI (flex-column + gap:10px veren)
   burada YOK — price-row ve btn-row doğrudan bu kutunun çocukları, bu
   yüzden aralarında hiç boşluk kalmıyor, buton adet kutusuna yapışık
   duruyordu. Kendi flex-column + gap'ini burada tanımlıyoruz. */
.paylas-single-product__action {
  padding: var(--space-md); max-width: 360px;
  display: flex; flex-direction: column; gap: 16px;
}
.paylas-single-product__action .paylas-shop-card__btn { font-size: 0.95rem; padding: 12px 16px; }
@media (max-width: 859px) {
  .paylas-single-product__action { max-width: none; }
}

/* Elementor ile düzenlenebilir serbest içerik bölümü (bkz. single-product.php
   the_content() çağrısı) — galeri/adet kutusunun altında, tam genişlikte. */
.paylas-single-product__content {
  padding: var(--space-lg) 0 var(--space-xl);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-md);
  color: var(--color-fg-muted); line-height: 1.75;
}
.paylas-single-product__content > *:first-child { margin-top: 0; }
.paylas-single-product__content h2,
.paylas-single-product__content h3 { color: var(--color-fg); margin: var(--space-lg) 0 var(--space-sm); }
.paylas-single-product__content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* Mobil: tekil bağış sayfasındaki fazla dikey boşlukları sıkılaştır. Masaüstünde
   ferah dursun diye bırakılan değerler (--space-xl=96px) mobilde üst üste binip
   (layout alt 96 + içerik margin 24 + içerik üst 48 ≈ 168px) kocaman boşluklar
   oluşturuyordu; galeri/bağış kutusu ile açıklama arası ve açıklama altı kırpılır. */
@media (max-width: 859px) {
  .paylas-single-product__layout { padding: var(--space-sm) 0 var(--space-sm); }
  .paylas-single-product__content { padding: var(--space-md) 0 var(--space-md); margin-top: var(--space-sm); }
}

.paylas-shop-sidebar { flex: 0 0 300px; position: sticky; top: 90px; }
.paylas-shop-cart-panel {
  background: var(--color-surface); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: 0 8px 28px -10px rgba(28, 36, 20,0.22);
  border: 1px solid var(--color-border);
}
.paylas-shop-cart-panel h4 {
  margin: 0; padding: 16px var(--space-md);
  background: var(--color-fg); color: #fff; font-size: 1rem;
}
.paylas-shop-cart-panel__body { padding: var(--space-md); }
/* Kalem satırları .paylas-cart-drawer__item* sınıflarını (cart-drawer.css)
   yeniden kullanıyor — sepet çekmecesiyle aynı görünüm/mantık. */
.paylas-shop-cart-panel__list { padding: 0; margin: 0 0 var(--space-sm); }
.paylas-shop-cart-panel__list .paylas-cart-drawer__item { padding: 10px 0; }
.paylas-shop-cart-panel__total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 700; font-size: 1.05rem; padding-top: var(--space-sm);
  border-top: 2px solid var(--color-bg-alt); margin: 0 0 var(--space-sm);
}
.paylas-shop-cart-panel__buttons { display: flex; flex-direction: column; gap: 10px; }
.paylas-shop-cart-panel__buttons a {
  display: block; text-align: center; padding: 12px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: all 150ms ease;
  border: 2px solid var(--color-border); background: transparent; color: var(--color-fg);
}
.paylas-shop-cart-panel__buttons a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.paylas-shop-cart-panel__buttons a.checkout {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.paylas-shop-cart-panel__buttons a.checkout:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.paylas-shop-cart-panel__empty {
  color: var(--color-fg-muted); font-size: 0.9rem; margin: 0; padding: var(--space-md); text-align: center;
}

@media (max-width: 900px) {
  .paylas-shop-body { flex-direction: column; }
  .paylas-shop-sidebar { flex-basis: auto; width: 100%; position: static; }
  /* align-items:flex-start yukarıda (satır 1537) masaüstü satır düzeni için;
     sütun düzenine (mobil) geçince cross-axis dikeyden yataya döner ve aynı
     flex-start artık .paylas-shop-grid'i konteyner genişliğine GERMİYOR —
     grid kendi içeriğine göre büzülüp (ör. 342px yerine 252px) sağda boşluk
     bırakıyor, kartlar dar/kaymış görünüyor. Genişliği elle tam yap. */
  .paylas-shop-grid { width: 100%; }
}

/* ── Paylaş Flow — Sepet & Kasa ortak yapı ──────────────────────────────── */
.paylas-flow {
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}

/* Sepet/Checkout sayfalarında page title ve entry-content padding'i sıfırla */
.woocommerce-cart .page-content,
.woocommerce-cart article,
.woocommerce-checkout .page-content,
.woocommerce-checkout article { padding-top: var(--space-md); padding-bottom: 0; }
.woocommerce-cart .page-content > h1,
.woocommerce-cart h1.entry-title,
.woocommerce-checkout .page-content > h1,
.woocommerce-checkout h1.entry-title { display: none; }

/* ── Progress Bar ────────────────────────────────────────────────────────── */
.paylas-progress {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: var(--space-lg);
  padding: var(--space-md) 0;
}
.paylas-progress__step {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; z-index: 1; min-width: 120px;
}
.paylas-progress__icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-alt); color: var(--color-fg-muted);
  border: 2px solid var(--color-border);
  transition: all 300ms ease;
}
.paylas-progress__step--active .paylas-progress__icon,
.paylas-progress__step--done .paylas-progress__icon {
  background: var(--woo-checkout-accent); color: #fff; border-color: var(--woo-checkout-accent);
  box-shadow: 0 4px 14px -4px var(--woo-checkout-accent-shadow);
}
.paylas-progress__label {
  font-size: 0.82rem; font-weight: 600; color: var(--color-fg-muted);
  text-align: center; white-space: nowrap;
}
.paylas-progress__step--active .paylas-progress__label,
.paylas-progress__step--done .paylas-progress__label { color: var(--woo-checkout-accent); }
.paylas-progress__line {
  flex: 1; height: 3px; background: var(--color-border);
  min-width: 60px; margin: 0 -8px; margin-top: -20px;
  position: relative; z-index: 0;
}
.paylas-progress__line--done { background: var(--woo-checkout-accent); }

/* ── Bağışçı Bilgileri ───────────────────────────────────────────────────── */
.paylas-donor { margin-bottom: var(--space-md); }
.paylas-donor__title {
  font-size: 1.05rem; font-weight: 600; margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.paylas-donor__info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #e0f2fe; color: #0284c7; font-size: 0.75rem;
  cursor: help; font-style: normal;
}
.paylas-donor__fields {
  display: flex; gap: 12px; flex-wrap: wrap;
  max-width: 100%; box-sizing: border-box;
}
.paylas-donor__input {
  padding: 12px 16px; border: 2px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.95rem; color: var(--color-fg);
  background: var(--color-surface); transition: border-color 200ms ease;
  outline: none; box-sizing: border-box; max-width: 100%;
}
.paylas-donor__input:focus { border-color: var(--woo-checkout-accent); }
.paylas-donor__input--name { flex: 1 1 300px; min-width: 0; }
.paylas-donor__input--country {
  flex: 1 1 220px; min-width: 0; width: 100%; cursor: pointer;
  background-image: none; appearance: auto; -webkit-appearance: menulist;
}
.paylas-donor__input--email { flex: 1 1 300px; min-width: 0; }
.paylas-donor__phone-group {
  display: flex; align-items: center; position: relative;
  border: 2px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); flex: 0 1 280px;
  transition: border-color 200ms ease; box-sizing: border-box; max-width: 100%;
}
.paylas-donor__phone-group:focus-within { border-color: var(--woo-checkout-accent); }
.paylas-donor__flag {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 12px; font-size: 0.9rem; color: var(--color-fg-muted);
  background: var(--color-bg-alt); border: none; border-right: 2px solid var(--color-border);
  white-space: nowrap; flex-shrink: 0;
  border-radius: calc(var(--radius-sm) - 2px) 0 0 calc(var(--radius-sm) - 2px);
  font-family: inherit; cursor: default;
}
.paylas-donor__flag--picker { cursor: pointer; }
.paylas-donor__flag--picker:hover { background: var(--color-border); }
.paylas-donor__input--phone {
  border: none; flex: 1; min-width: 0; padding: 12px;
}
.paylas-donor__input--phone:focus { outline: none; }

/* ── Ülke Kodu Seçici (dropdown) ─────────────────────────────────────── */
.paylas-country-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 280px;
  max-width: 80vw;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.paylas-country-picker__search {
  padding: 10px;
  border-bottom: 1px solid var(--color-border);
}
.paylas-country-picker__search input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--color-border);
  border-radius: 6px; font-size: 0.9rem; outline: none;
}
.paylas-country-picker__search input:focus { border-color: var(--woo-checkout-accent); }
.paylas-country-picker__list {
  max-height: 260px; overflow-y: auto;
}
.paylas-country-picker__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 14px; border: none; background: none; cursor: pointer;
  font-size: 0.88rem; text-align: left; color: var(--color-fg);
}
.paylas-country-picker__item:hover { background: var(--color-bg-alt); }
.paylas-country-picker__flag { font-size: 1.1rem; flex-shrink: 0; }
.paylas-country-picker__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paylas-country-picker__dial { color: var(--color-fg-muted); flex-shrink: 0; }

/* ── Sepetim başlık ──────────────────────────────────────────────────────── */
.paylas-cart__title {
  font-size: 1.05rem; font-weight: 600; margin: 0 0 var(--space-sm);
  padding-bottom: 12px; border-bottom: 1px solid var(--color-border);
}

/* ── Sepet Form — tablo yerine kart tabanlı ──────────────────────────────── */
.woocommerce-cart .woocommerce-cart-form {
  background: transparent !important; box-shadow: none !important; padding: 0 !important;
}

/* ── Sepet Ürün Kartları ─────────────────────────────────────────────────── */
.paylas-cart-items { display: flex; flex-direction: column; gap: 0; }

.paylas-cart-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.paylas-cart-item__thumb {
  flex: 0 0 100px; width: 100px; height: 100px;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-alt);
}
.paylas-cart-item__thumb img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  max-width: 100% !important;
}
.paylas-cart-item__info { flex: 1; min-width: 0; }
.paylas-cart-item__name {
  font-size: 1rem; font-weight: 700; margin: 0 0 4px;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.paylas-cart-item__name a { color: var(--color-fg); text-decoration: none; }
.paylas-cart-item__meta {
  font-size: 0.85rem; color: var(--color-primary);
  margin-bottom: 6px; font-weight: 500;
}
.paylas-cart-item__options { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.paylas-cart-item__option {
  font-size: 0.82rem; color: var(--color-fg-muted);
  display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.paylas-cart-item__option input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--color-primary); cursor: pointer;
}
.paylas-cart-item__on-behalf-input {
  margin-top: 2px; padding: 8px 10px; max-width: 320px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.85rem; color: var(--color-fg);
  background: var(--color-surface); outline: none; transition: border-color 200ms ease;
}
.paylas-cart-item__on-behalf-input:focus { border-color: var(--woo-checkout-accent); }
.paylas-cart-item__price {
  flex: 0 0 auto; font-size: 1.1rem; font-weight: 700;
  color: var(--color-fg); white-space: nowrap; text-align: right;
  padding-top: 2px;
  /* Kaldır (×) butonu .paylas-cart-item'a göre position:absolute; right:0
     ile kartın en sağına oturuyor — fiyat da flex akışında en sağda
     bittiğinden ikisi üst üste biniyor, tutarın son hanesi × ile
     kapanıyordu (masaüstünde fark ediliyordu). Fiyat kutusunun sağına
     butonun genişliği kadar boşluk bırakıyoruz. */
  padding-right: 36px;
}
.paylas-cart-item__remove {
  position: absolute; top: var(--space-sm); right: 0;
}
.paylas-cart-item__remove-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fef2f2; color: var(--color-destructive);
  text-decoration: none; font-size: 1.3rem; line-height: 1;
  transition: all 150ms ease; border: 1px solid #fecaca;
}
.paylas-cart-item__remove-btn:hover {
  background: var(--color-destructive); color: #fff;
}

/* WC varsayılan cart_totals ve collaterals gizle (kendi footer'ımız var) */
.woocommerce-cart .cart-collaterals { display: none !important; }

/* ── Bağış Notu ──────────────────────────────────────────────────────────── */
.paylas-donation-note { margin-top: var(--space-md); }
.paylas-donation-note__title {
  font-size: 1.05rem; font-weight: 600; margin: 0 0 8px;
}
.paylas-donation-note__textarea {
  width: 100%; padding: 12px 16px;
  border: 2px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.92rem; color: var(--color-fg);
  background: var(--color-surface); resize: vertical;
  transition: border-color 200ms ease; outline: none;
}
.paylas-donation-note__textarea:focus { border-color: var(--woo-checkout-accent); }

/* ── Sepet Alt Kısmı (Toplam + Devam Et) ─────────────────────────────────── */
.paylas-cart-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-md); margin-top: var(--space-md);
  flex-wrap: wrap;
}
.paylas-cart-footer__total {
  font-size: 1.1rem; color: var(--color-fg);
  display: flex; align-items: center; gap: 8px;
}
.paylas-cart-footer__total strong { font-size: 1.3rem; }
.paylas-cart-footer__btn {
  background: var(--color-primary) !important; border-color: var(--color-primary) !important;
  color: #fff !important; padding: 14px 32px !important; font-size: 0.95rem !important;
  border-radius: var(--radius-sm) !important; text-decoration: none !important;
  letter-spacing: 0.02em;
}
.paylas-cart-footer__btn:hover {
  background: var(--color-primary-dark) !important; border-color: var(--color-primary-dark) !important;
}

/* WooCommerce Bildirimleri (Sepet + Checkout ortak) — önceden sadece
   checkout'ta özel stil vardı; sepet sayfası WooCommerce'in ham/varsayılan
   görünümünü kullanıyordu. Artık tek bir ortak bileşen. */
.woocommerce-cart .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-NoticeGroup { margin-bottom: var(--space-sm); }
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info {
  --woo-notice-color: var(--color-accent-dark);
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--woo-notice-color);
  border-radius: var(--radius-md);
  padding: 14px 18px; margin: 0 0 var(--space-sm);
  list-style: none; color: var(--color-fg);
  box-shadow: 0 4px 16px -10px rgba(28, 36, 20,0.16);
  animation: paylas-notice-in 320ms ease both;
}
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .woocommerce-info::before {
  content: ''; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  background-color: var(--woo-notice-color);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.woocommerce-cart .woocommerce-message::before,
.woocommerce-checkout .woocommerce-message::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.woocommerce-cart .woocommerce-error::before,
.woocommerce-checkout .woocommerce-error::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='16.5' r='0.5' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='16.5' r='0.5' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
.woocommerce-cart .woocommerce-info::before,
.woocommerce-checkout .woocommerce-info::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='7.5' r='0.5' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='7.5' r='0.5' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
.woocommerce-cart .woocommerce-error ul,
.woocommerce-checkout .woocommerce-error ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.woocommerce-cart .woocommerce-error li,
.woocommerce-checkout .woocommerce-error li { margin: 0; }
.woocommerce-cart .woocommerce-message a.button,
.woocommerce-checkout .woocommerce-message a.button {
  margin-left: auto; flex: 0 0 auto;
}
@keyframes paylas-notice-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Boş Sepet */
.paylas-empty-cart {
  text-align: center; padding: var(--space-xl) var(--space-md);
}
.paylas-empty-cart .woocommerce-info,
.paylas-empty-cart .cart-empty {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md); padding: var(--space-md); margin: 0 auto var(--space-md);
  max-width: 480px; color: var(--color-fg); font-weight: 500;
  box-shadow: 0 4px 16px -10px rgba(28, 36, 20,0.16);
}
.paylas-empty-cart .woocommerce-info::before { display: none; }
.paylas-empty-cart__action { margin-top: var(--space-md); }

/* ── Checkout (Kasa) — Ödeme Formu ───────────────────────────────────────── */
.paylas-checkout-form { max-width: 100%; }

/* WC billing alanları gizli (form-checkout.php'de display:none ile sarılı) */
.paylas-wc-payment-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
  padding: 0 !important; margin: -1px !important;
}

/* Ödeme bölümü */
.paylas-payment { margin-top: 0; }
.paylas-payment__header {
  display: flex; gap: 8px; margin-bottom: var(--space-md);
}
.paylas-payment__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border: 2px solid var(--color-border); border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.92rem; color: var(--color-fg);
  background: var(--color-surface); cursor: default;
}
.paylas-payment__tab svg { color: var(--color-fg-muted); }

.paylas-payment__title {
  font-size: 1.05rem; font-weight: 600; margin: 0 0 var(--space-md);
}

.paylas-wc-payment { width: 100%; }
.paylas-wc-payment ul.payment_methods {
  list-style: none; padding: 0; margin: 0 0 var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); overflow: hidden;
}
.paylas-wc-payment ul.payment_methods li.wc_payment_method {
  border-bottom: 1px solid var(--color-border);
}
.paylas-wc-payment ul.payment_methods li.wc_payment_method:last-child {
  border-bottom: none;
}
.paylas-wc-payment ul.payment_methods li > label {
  display: block; padding: 16px 20px; cursor: pointer;
  font-weight: 600; font-size: 1.05rem; color: var(--color-fg);
  display: flex; align-items: center; gap: 12px;
}
.paylas-wc-payment ul.payment_methods li > input[type="radio"] {
  accent-color: var(--color-primary); width: 18px; height: 18px;
}
.paylas-wc-payment .payment_box {
  padding: 16px 20px; background: var(--color-bg-alt);
  font-size: 0.95rem; color: var(--color-fg-muted); line-height: 1.6;
  border-top: 1px solid var(--color-border);
}
.paylas-wc-payment .payment_box p:last-child { margin-bottom: 0; }

/* Ödeme Yap butonu */
.paylas-payment__submit {
  display: block !important; width: auto !important;
  margin-top: var(--space-md) !important;
  background: var(--color-primary) !important; border-color: var(--color-primary) !important;
  color: #fff !important; padding: 14px 36px !important; font-size: 0.95rem !important;
  border-radius: var(--radius-sm) !important; font-weight: 700 !important;
  cursor: pointer; letter-spacing: 0.02em;
  transition: background 150ms ease;
}
.paylas-payment__submit:hover {
  background: var(--color-primary-dark) !important; border-color: var(--color-primary-dark) !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .paylas-progress__step { min-width: 80px; }
  .paylas-progress__label { font-size: 0.72rem; }
  .paylas-progress__icon { width: 42px; height: 42px; }
  .paylas-progress__line { min-width: 30px; }

  .paylas-donor__fields { flex-direction: column; }
  .paylas-donor__input--name { flex-basis: auto; }
  .paylas-donor__input--country { flex-basis: auto; }
  .paylas-donor__phone-group { flex-basis: auto; }
  .paylas-donor__input--email { flex-basis: auto; }

  .paylas-cart-item { flex-wrap: wrap; }
  .paylas-cart-item__thumb { flex: 0 0 80px; width: 80px; height: 80px; }
  .paylas-cart-item__price { flex-basis: 100%; text-align: left; margin-top: 8px; padding-left: 96px; }

  .paylas-cart-footer { justify-content: space-between; }
  .paylas-cart-footer__btn { width: 100%; text-align: center; justify-content: center; }

  .paylas-payment__body { flex-direction: column; }
}

@media (max-width: 480px) {
  .paylas-flow { padding: var(--space-md) var(--space-sm) var(--space-lg); }
  .paylas-progress { gap: 0; }
  .paylas-progress__step { min-width: 60px; }
  .paylas-progress__label { font-size: 0.65rem; }
  .paylas-progress__icon { width: 36px; height: 36px; }
  .paylas-progress__icon svg { width: 18px; height: 18px; }
  .paylas-progress__line { min-width: 20px; }

  .paylas-cart-item__thumb { flex: 0 0 64px; width: 64px; height: 64px; }
  .paylas-cart-item__price { padding-left: 80px; }
  .paylas-cart-item__name { font-size: 0.9rem; }
}


/* ── Sipariş/Bağış Alındı (Thankyou) Sayfası ────────────────────────────── */
.paylas-thankyou-flow { width: 100%; max-width: 1050px !important; margin: 0 auto; box-sizing: border-box; }
.paylas-thankyou-content { width: 100%; box-sizing: border-box; background: var(--color-surface); padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-top: var(--space-lg); }
.paylas-thankyou-success { text-align: center; margin-bottom: var(--space-lg); }
.paylas-thankyou-success__icon { margin-bottom: var(--space-md); }
.paylas-thankyou-success h2 { font-size: 1.8rem; font-weight: 700; color: var(--color-fg); margin-bottom: var(--space-sm); }
.paylas-thankyou-success p { font-size: 1.05rem; color: var(--color-fg-muted); max-width: 600px; margin: 0 auto; line-height: 1.6; }
.paylas-thankyou-details-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-lg); align-items: start; width: 100%; box-sizing: border-box; }

.paylas-thankyou-overview { background: var(--color-bg-alt); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); box-sizing: border-box; }
.paylas-thankyou-overview h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: var(--space-md); padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.paylas-thankyou-overview ul.woocommerce-order-overview { display: block !important; list-style: none !important; padding: 0 !important; margin: 0 !important; border: none !important; width: 100% !important; }
.paylas-thankyou-overview ul.woocommerce-order-overview li { float: none !important; display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 8px !important; border: none !important; padding: 0 !important; margin-bottom: 12px !important; font-size: 0.95rem !important; color: var(--color-fg-muted) !important; text-transform: none !important; line-height: 1.5 !important; }
.paylas-thankyou-overview ul.woocommerce-order-overview li strong { color: var(--color-fg) !important; font-size: 0.9rem !important; font-weight: 600 !important; text-align: right !important; word-break: normal !important; white-space: nowrap !important; }

.paylas-thankyou-bacs { box-sizing: border-box; min-width: 0; }
.paylas-thankyou-bacs h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: var(--space-md); }
.paylas-bacs-instructions { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius-sm); padding: var(--space-md); color: var(--color-accent-dark); width: 100%; box-sizing: border-box; }
.paylas-bacs-instructions section.woocommerce-bacs-bank-details { margin-bottom: var(--space-md) !important; float: none !important; width: 100% !important; max-width: 100% !important; padding-bottom: var(--space-md); border-bottom: 1px solid #bbf7d0; clear: both; display: block !important; }
.paylas-bacs-instructions section.woocommerce-bacs-bank-details:last-child { margin-bottom: 0 !important; padding-bottom: 0; border-bottom: none; }

.paylas-bacs-instructions ul.wc-bacs-bank-details { display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border: none !important; }
.paylas-bacs-instructions ul.wc-bacs-bank-details li { float: none !important; display: flex !important; flex-direction: column !important; gap: 4px !important; margin-bottom: 16px !important; font-size: 0.95rem !important; color: var(--color-fg-muted) !important; border: none !important; padding: 0 !important; text-transform: none !important; line-height: 1.4 !important; }
.paylas-bacs-instructions ul.wc-bacs-bank-details li strong { color: var(--color-fg) !important; font-weight: 600 !important; }
.paylas-bacs-instructions li.has-copy-btn strong { font-size: 0.85rem !important; letter-spacing: 0.5px !important; display: block !important; margin-top: 4px !important; line-height: 1.8 !important; }
/* iOS Safari flex bug fix: use inline-block instead of flex for text/button */
.paylas-bacs-value-text { display: inline-block; word-break: normal; overflow-wrap: break-word; margin-right: 12px; vertical-align: middle; }

.paylas-copy-btn { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 0.75rem; color: var(--color-fg-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s; flex-shrink: 0; vertical-align: middle; margin-top: -2px; }
.paylas-copy-btn:hover { background: var(--color-bg-alt); color: var(--color-fg); }
.paylas-bacs-instructions h3 { font-size: 1.05rem; margin-bottom: var(--space-sm); color: var(--color-accent-dark); }
.paylas-bacs-instructions ul { list-style: none; padding: 0; margin: 0; display: block; }
.paylas-bacs-instructions ul li { margin-bottom: 10px; font-size: 0.95rem; display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: start; }
.paylas-bacs-instructions ul li strong { font-weight: 600; color: var(--color-accent-dark); word-break: break-word; }

/* Varsayılan WooCommerce sipariş detaylarını gizle (çünkü kendi özet kutumuzu yaptık) */
.paylas-thankyou-flow .woocommerce-order-details,
.paylas-thankyou-flow .woocommerce-customer-details,
.paylas-thankyou-flow section.woocommerce-order-details,
.paylas-thankyou-flow section.woocommerce-customer-details,
.woocommerce-order > h2,
.woocommerce-order-details {
  display: none !important;
}

@media (max-width: 768px) {
  .paylas-thankyou-details-row { grid-template-columns: 1fr; }
  .paylas-thankyou-overview, .paylas-thankyou-bacs { width: 100%; }
}
.paylas-donor-error {
  background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-sm);
  padding: 12px 16px; color: var(--color-destructive); font-size: 0.9rem;
  margin-top: var(--space-sm);
}

/* ── "Hero Banner" sayfa şablonu (Hakkımızda vb. kurumsal sayfalar) ──── */
.paylas-hb-hero {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: var(--color-fg);
}
.paylas-hb-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.paylas-hb-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.88) 100%);
}
.paylas-hb-hero__share {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  display: flex; gap: 8px;
}
.paylas-hb-share-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--color-fg);
  transition: transform 150ms ease, background 150ms ease;
}
.paylas-hb-share-btn:hover { background: #fff; transform: translateY(-2px); }
.paylas-hb-hero__title-card {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 32px 5vw 28px;
  max-width: 900px;
}
.paylas-hb-eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  margin-bottom: 10px;
}
.paylas-hb-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9rem; color: rgba(255,255,255,0.85);
}
.paylas-hb-breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.paylas-hb-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.paylas-hb-breadcrumb span:first-of-type { color: var(--color-primary); font-weight: 700; }

.paylas-hb-content {
  padding: var(--space-xl) var(--space-md);
  max-width: 900px;
}
.paylas-hb-content p { line-height: 1.75; color: var(--color-fg); margin: 0 0 1.2em; }
.paylas-hb-content h2, .paylas-hb-content h3 { font-family: var(--font-heading); margin: 1.5em 0 0.6em; }

@media (max-width: 720px) {
  .paylas-hb-hero { height: 280px; }
  .paylas-hb-hero__title-card { padding: 24px 20px 20px; }
}

/* ── Blog tarzı kategori arşivi (Faaliyet Alanlarımız / Haberler) ────── */
.paylas-archive { padding: var(--space-xl) 0; }
.paylas-archive-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-lg); }
.paylas-archive-header h1 { font-family: var(--font-heading); margin: 0 0 10px; }
.paylas-archive-header p { color: var(--color-fg-muted); margin: 0; }

.paylas-archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .paylas-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .paylas-archive-grid { grid-template-columns: repeat(3, 1fr); }
}
.paylas-archive-grid .paylas-blog-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}

.paylas-archive-empty { text-align: center; color: var(--color-fg-muted); padding: var(--space-lg) 0; }

.paylas-archive-pagination {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
  margin-top: var(--space-lg);
}
.paylas-archive-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--color-border); border-radius: 8px;
  color: var(--color-fg); text-decoration: none; font-size: 0.9rem;
}
.paylas-archive-pagination .page-numbers.current {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.paylas-archive-pagination .page-numbers:hover:not(.current) { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Blog tarzı yazı detayı (single.php) ──────────────────────────────── */
.paylas-single-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
  padding-top: var(--space-lg);
}
@media (min-width: 900px) {
  .paylas-single-body { grid-template-columns: 2fr 1fr; }
}
.paylas-single-body .paylas-hb-content { padding: 0; max-width: none; }

.paylas-single-sidebar {
  background: var(--color-bg-alt);
  border-radius: 14px;
  padding: var(--space-md);
}
.paylas-single-sidebar h3 {
  font-family: var(--font-heading); font-size: 1.05rem; margin: 0 0 var(--space-sm);
}
.paylas-single-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.paylas-single-related a {
  display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit;
}
.paylas-single-related__media {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
}
.paylas-single-related__media img { width: 100%; height: 100%; object-fit: cover; }
.paylas-single-related__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paylas-single-related__title {
  font-size: 0.88rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.paylas-single-related a:hover .paylas-single-related__title { color: var(--color-primary); }
.paylas-single-related__date { font-size: 0.78rem; color: var(--color-fg-muted); }

/* ── Sekmeli Görev Tanıtımı (InnoTheme Mission Tabs) ──────────────────── */
.paylas-mt { padding: var(--space-xl) 0; overflow: hidden; }
.paylas-mt-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 960px) {
  .paylas-mt-grid { grid-template-columns: 1fr 1.15fr; }
}

.paylas-mt-content h2 {
  font-family: var(--font-heading); font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.2; margin: 8px 0 24px;
}

/* Çerçevesiz metin sekmeleri, altlarında aktif olanda büyüyen bir çizgi —
   her butonun kendi ::after'ı bağımsız animasyon olduğu için (paylaşılan bir
   "indicator" elemanını ölçüp taşımak gerekmiyor) hizalama/zamanlama sorunu
   yaşanmıyor; aynı desen homepage'deki .paylas-donation-filter'da da var. */
.paylas-mt-tabs {
  display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 28px;
  border-bottom: 1px solid var(--color-border);
}
.paylas-mt-tab {
  position: relative;
  padding: 10px 2px 14px; border: none; border-radius: 0;
  background: transparent; color: var(--color-fg-muted); font-weight: 600; font-size: 0.92rem;
  cursor: pointer; transition: color 250ms ease;
}
.paylas-mt-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 380ms cubic-bezier(0.65, 0, 0.35, 1);
}
.paylas-mt-tab:hover { color: var(--color-fg); }
.paylas-mt-tab--active { color: var(--color-fg); }
.paylas-mt-tab--active::after { transform: scaleX(1); }

.paylas-mt-panel { display: none; }
.paylas-mt-panel--active { display: block; animation: paylasMtFade 250ms ease; }
@keyframes paylasMtFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.paylas-mt-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 14px;
  background: var(--color-bg-alt); color: var(--color-accent-dark);
}
.paylas-mt-icon svg { width: 26px; height: 26px; }
.paylas-mt-icon img { width: 28px; height: 28px; object-fit: contain; }

.paylas-mt-panel h3 { font-family: var(--font-heading); font-size: 1.3rem; margin: 0 0 12px; }
.paylas-mt-panel p { color: var(--color-fg-muted); line-height: 1.7; margin: 0 0 20px; max-width: 480px; }

/* Bu buton artık paylaşılan .btn sistemine bağlı (hover efektini oradan
   alıyor); burada sadece widget'a özel yeşil tonu ve hap formu kalıyor.
   --btn-accent, .btn'in büyüyen nokta efektinin rengini bu yeşile çeker. */
.paylas-mt-btn {
  --btn-accent: var(--color-accent-dark);
  padding: 12px 28px; border-radius: 999px; background: var(--color-accent);
  font-weight: 700; font-size: 0.92rem; text-decoration: none;
  transition: background 200ms, transform 200ms;
}
.paylas-mt-btn:hover { background: var(--color-accent-dark); transform: translateY(-2px); }

/* Sağ taraf: üst üste binen görseller + dekoratif ikonlar */
.paylas-mt-media {
  position: relative;
  padding: 20px 30px 50px 0;
  max-width: 460px;
  margin: 0 auto;
}
@media (min-width: 960px) {
  .paylas-mt-media { max-width: 620px; }
}
.paylas-mt-media__primary {
  border-radius: 20px; overflow: hidden; aspect-ratio: 4/5;
  box-shadow: var(--shadow-card);
}
.paylas-mt-media__primary img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paylas-mt-media__secondary {
  position: absolute; right: 0; bottom: 0; width: 45%; aspect-ratio: 1/1;
  border-radius: 16px; overflow: hidden; border: 6px solid var(--color-bg);
  box-shadow: 0 16px 36px -12px rgba(28, 36, 20,0.3);
}
.paylas-mt-media__secondary img { width: 100%; height: 100%; object-fit: cover; display: block; }

.paylas-mt-deco {
  position: absolute; color: var(--color-accent); opacity: 0.55; z-index: 0;
  pointer-events: none;
}
.paylas-mt-deco svg { width: 100%; height: 100%; }
.paylas-mt-deco--hands { width: 70px; height: 70px; top: -10px; left: -20px; }
.paylas-mt-deco--hearts { width: 60px; height: 60px; top: 40%; right: -24px; color: var(--color-primary); }
.paylas-mt-deco--gift { width: 70px; height: 70px; bottom: -10px; right: 8%; color: var(--color-fg); }
.paylas-mt-deco--flower { width: 56px; height: 56px; top: 6%; left: -30px; color: var(--color-accent-dark); }

@media (max-width: 719px) {
  .paylas-mt-media { padding: 10px 16px 40px 0; margin-top: 20px; }
  .paylas-mt-deco { opacity: 0.35; }
}

/* ─────────────────────────────────────────────────────────
   💎 PREMIUM SCROLL ANIMATIONS & MICRO-INTERACTIONS
───────────────────────────────────────────────────────── */

/* 1. Scroll Reveals (Fallback CSS Animation)
   NOT: translateY(30px)→0 kayması sırasında (ilk 800ms) içindeki bir buton
   tıklanırsa, mousedown/mouseup arasında kart konumu kaydığı için tıklama
   butona değil kartın eski/yeni konumu arasındaki boşluğa denk gelip
   yönlendirme yapmayabiliyordu. pointer-events'i geçişin süresi kadar
   geciktirerek animasyon görsel olarak TAMAMLANMADAN öğe tıklanamaz hale
   getiriliyor — kayma efekti aynen kalıyor, sadece "hareket halindeyken
   tıklanabilme" riski ortadan kalkıyor. */
.paylas-animate-up, .paylas-animate-fade, .paylas-animate-zoom {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1), pointer-events 0s 800ms;
  will-change: transform, opacity;
}
.paylas-animate-up.is-visible, .paylas-animate-fade.is-visible, .paylas-animate-zoom.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Saf-CSS scroll-driven reveal yedeği (CSS Scroll-Driven Animations API,
   "animation-timeline: view()") — GSAP herhangi bir sebeple yüklenemezse
   (kütüphane engellenir/bozulursa) bu devreye girer, hiçbir JS'e ihtiyaç
   duymadan elemanlar viewport'a girince görünür olur. GSAP başarıyla
   çalışırsa animations.js <html>'e "paylas-gsap-ready" class'ı ekliyor ve
   bu kural :not() ile devre dışı kalıyor — iki sistem asla aynı anda aynı
   elemanı animasyonlamıyor. Desteklemeyen tarayıcılarda (@supports
   sağlamazsa) bu blok tamamen atlanır, üstteki statik opacity:0 kalır —
   GSAP'ın normal şekilde devreye girmesini bekler. */
@supports (animation-timeline: view()) {
  :root:not(.paylas-gsap-ready) .paylas-animate-up,
  :root:not(.paylas-gsap-ready) .paylas-animate-fade,
  :root:not(.paylas-gsap-ready) .paylas-animate-zoom {
    animation: paylas-view-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }
}
@keyframes paylas-view-reveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    :root:not(.paylas-gsap-ready) .paylas-animate-up,
    :root:not(.paylas-gsap-ready) .paylas-animate-fade,
    :root:not(.paylas-gsap-ready) .paylas-animate-zoom {
      animation: none; opacity: 1; transform: none;
    }
  }
}

/* Stagger (gecikme) efektleri için (Kartlar vb.) */
.paylas-animate-delay-1 { transition-delay: 100ms; }
.paylas-animate-delay-2 { transition-delay: 200ms; }
.paylas-animate-delay-3 { transition-delay: 300ms; }
.paylas-animate-delay-4 { transition-delay: 400ms; }
.paylas-animate-delay-5 { transition-delay: 500ms; }

/* 2. Premium Card Hovers
   NOT: Tıklama sorununun asıl kökü (main.js'teki is-dragging class'ının her
   mousedown'da erken eklenip pointer-events:none yapması) artık JS'te kalıcı
   olarak düzeltildi (bkz. makeDraggable) — o yüzden hover'da kaldırma
   (translateY) efektini güvenle geri getiriyoruz. Burada !important
   kullanmamızın sebebi farklı: .paylas-animate-up.is-visible kuralı da
   (scroll-reveal'ın "yerleşti" hâli) transform:none basıyor ve bu iki kural
   eşit özgüllükte olduğu için sıradaki (dosyada sonraki) kazanıyordu — hover
   hiç görünmüyordu. !important ile hover her zaman kazanır. Video kartlarda
   (.paylas-animate-up class'ı taşımadıkları için) bu çakışma yoktu ama
   transition'dan transform eksik olduğu için sert bir sıçrama oluyordu;
   şimdi transform da transition listesinde, tüm kart tiplerinde tutarlı ve
   yumuşak.
   ÖNEMLİ: Bu efekt sadece GERÇEK fare/hover desteği olan cihazlarda çalışır
   (@media hover:hover + pointer:fine). Mobilde dokunmatik tarayıcılar bir
   kartın üzerinden parmakla kaydırırken/dokunurken :hover durumunu geçici
   olarak tetikleyebiliyor — bu da kaydırma sırasında kartların "esneyerek"
   yukarı/aşağı zıplaması gibi görünüyordu. Dokunmatik cihazlarda hover hiç
   uygulanmadığı için bu sorun artık oluşamaz. */
@media (hover: hover) and (pointer: fine) {
  .paylas-activity-card, .paylas-blog-card, .paylas-donate-card, .paylas-video-card {
    transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1) !important;
  }
  .paylas-activity-card:hover, .paylas-blog-card:hover, .paylas-video-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
    z-index: 2;
  }
  .paylas-donate-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 24px 48px rgba(var(--color-primary-rgb, 156, 183, 59), 0.2) !important;
  }
}

/* 3. CTA Button Shine Effect */
.paylas-cta__btn {
  position: relative;
  overflow: hidden;
}
.paylas-cta__btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  animation: shine 4s infinite;
}
@keyframes shine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

/* ── Mobilde bölümler arası boşluğu azalt ──────────────────────────────────
   Her widget sarmalayıcısı ayrı ayrı "padding: var(--space-xl) 0" (96px)
   kullanıyordu — iki widget arasında ~192px boş alan oluşuyordu, küçük
   ekranda içerikten fazla yer kaplıyordu. Global --space-xl token'ını
   değiştirmek yerine (20+ farklı yerde kullanılıyor, yan etkisi büyük
   olurdu) sadece bu üst-seviye sarmalayıcıların mobil dolgusunu hedefliyoruz. */
@media (max-width: 767px) {
  .paylas-support,
  .paylas-activity,
  .paylas-stats,
  .paylas-donation,
  .paylas-blog,
  .paylas-video,
  .paylas-mt,
  .paylas-archive {
    padding: var(--space-lg) 0;
  }
  .paylas-shop { padding: var(--space-lg) 0; }
}

/* Öne çıkan görseli olmayan sayfalarda (page-hero-banner.php) hero banner
   bölümü hiç basılmıyordu — bu da sayfada hiçbir başlık görünmemesine yol
   açıyordu (yalnızca <title> etiketinde vardı). Basit bir metin başlık +
   breadcrumb fallback'i ekliyoruz. */
.paylas-hb-plain-header { padding-top: var(--space-xl); }
.paylas-hb-breadcrumb--plain { margin-bottom: var(--space-sm); font-size: 0.85rem; color: var(--color-fg-muted); }
.paylas-hb-breadcrumb--plain a { color: var(--color-fg-muted); }
.paylas-hb-breadcrumb--plain a:hover { color: var(--color-primary); }
.paylas-hb-breadcrumb--plain span:first-of-type { margin: 0 6px; }
.paylas-hb-plain-title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; color: var(--color-fg); margin: 0; }

/* WordPress'in yerleşik "Dosya" (core/file) bloğu — gerçek PDF belgelerimiz
   için kullanılıyor (Tüzüğümüz, Belgelerimiz). Admin panelden "dosyayı
   değiştir" ile güncelleyebiliyor, bu yüzden ham <a> yerine bunu tercih
   ettik. Kart görünümüne (--shadow-card, radius, hover) uyacak şekilde
   yeniden stillendirildi. */
.paylas-doc-file-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.paylas-doc-file-grid .wp-block-file {
  background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: 18px; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.wp-block-file > a:first-child { font-weight: 700; color: var(--color-fg); text-decoration: none; flex: 1 1 auto; }
.wp-block-file > a:first-child:hover { color: var(--color-primary); }
.wp-block-file__button {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem; padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--color-primary); color: #fff !important; text-decoration: none !important;
  transition: background var(--transition-base) ease;
}
.wp-block-file__button:hover { background: var(--color-primary-dark); }
.paylas-doc-file-featured .wp-block-file {
  background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-md); margin: var(--space-md) 0 0; display: flex; align-items: center; gap: 14px;
}

/* WordPress'in Group bloğu, "layout" attribute'u belirtilmediğinde render
   sırasında içeriği otomatik olarak bir ".wp-block-group__inner-container"
   sarmalayıcısına sarıyor (geriye dönük uyumluluk shim'i). Bu yüzden
   ".paylas-board-grid" gibi CSS Grid/Flex konteynerlerimizin GERÇEK DOM
   çocuğu tek bir sarmalayıcıydı (kartların hepsi onun İÇİNDEYDİ), grid
   sadece TEK item görüp tüm genişliği ona veriyor, diğer sütunlar 0px'e
   çöküyordu (Yönetim Kurulu'na Görsel bloğu eklenince bu görünür hale
   geldi). display:contents bu sarmalayıcıyı layout ağacından kaldırıp
   kartları gerçek grid item'ları haline getiriyor. */
.paylas-value-grid > .wp-block-group__inner-container,
.paylas-board-grid > .wp-block-group__inner-container,
.paylas-doc-grid > .wp-block-group__inner-container,
.paylas-doc-file-grid > .wp-block-group__inner-container,
.paylas-mv-split > .wp-block-group__inner-container,
.paylas-timeline > .wp-block-group__inner-container {
  display: contents;
}
.paylas-value-grid > *, .paylas-board-grid > *, .paylas-doc-grid > *, .paylas-doc-file-grid > * {
  min-width: 0;
}

/* ── Kurumsal İçerik Sayfaları ──────────────────────────────────────────────
   Misyon ve Vizyon / Yönetim Kurulu / Tüzüğümüz / Belgelerimiz / Tarihçe gibi
   page-hero-banner.php şablonunu kullanan sayfaların içerik alanında (plain
   post_content, WP blok editörüyle düzenlenebilir) kullanılan ortak kart/
   bölüm stilleri. */
.paylas-hb-content { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.paylas-page-lead {
  font-size: 1.1rem; color: var(--color-fg-muted); max-width: 780px;
  margin: 0 auto var(--space-xl); text-align: center; line-height: 1.7;
}
.paylas-page-section { margin-bottom: var(--space-xl); }
.paylas-page-section:last-child { margin-bottom: 0; }
.paylas-page-section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: var(--space-sm);
}
.paylas-page-section > p { color: var(--color-fg-muted); line-height: 1.7; margin-bottom: 0; max-width: 760px; }

.paylas-value-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md); margin-top: var(--space-md);
}
.paylas-value-card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-md); }
.paylas-value-card__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.paylas-value-card__icon svg { width: 24px; height: 24px; }
.paylas-value-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.paylas-value-card p { font-size: 0.9rem; color: var(--color-fg-muted); margin: 0; line-height: 1.6; }

.paylas-mv-split { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 720px) { .paylas-mv-split { grid-template-columns: 1fr 1fr; } }
.paylas-mv-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); }
.paylas-mv-card h3 { font-size: 1.3rem; font-weight: 800; color: var(--color-primary); margin-bottom: 12px; }
.paylas-mv-card p { color: var(--color-fg); line-height: 1.75; margin: 0; }

.paylas-board-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md); margin-top: var(--space-md);
}
.paylas-board-card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-md); text-align: center; }
.paylas-board-card__avatar {
  width: 84px; height: 84px; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-weight: 800; font-size: 1.5rem;
}
/* Gerçek WordPress Görsel bloğu kullanan avatar — admin araç çubuğundaki
   "Değiştir" ile doğrudan fotoğraf yükleyebiliyor, ham HTML değil. */
.paylas-board-card__avatar-img { margin: 0 auto 14px; }
.paylas-board-card__avatar-img img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto; }
.paylas-board-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.paylas-board-card span { font-size: 0.85rem; color: var(--color-fg-muted); }
.paylas-page-note {
  background: var(--color-bg-alt); border: 1px dashed var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-md); color: var(--color-fg-muted); font-size: 0.9rem; text-align: center; margin-top: var(--space-md);
}

.paylas-doc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md); margin-top: var(--space-md);
}
.paylas-doc-card {
  display: flex; align-items: center; gap: 14px; background: var(--color-surface);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 18px;
  text-decoration: none; transition: all var(--transition-base) ease;
}
.paylas-doc-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.08); transform: translateY(-2px); }
.paylas-doc-card__icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.paylas-doc-card__body h3 { font-size: 0.95rem; font-weight: 700; color: var(--color-fg); margin: 0 0 2px; }
.paylas-doc-card__body span { font-size: 0.8rem; color: var(--color-fg-muted); }

.paylas-timeline { position: relative; margin-top: var(--space-lg); padding-left: 32px; border-left: 2px solid var(--color-border); }
.paylas-timeline-item { position: relative; padding-bottom: var(--space-lg); }
.paylas-timeline-item:last-child { padding-bottom: 0; }
.paylas-timeline-item::before {
  content: ''; position: absolute; left: -38px; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--color-primary); border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.paylas-timeline-item strong,
.paylas-timeline-item h4 { display: block; color: var(--color-primary); font-size: 1.1rem; font-weight: 800; margin: 0 0 4px; }
.paylas-timeline-item p { color: var(--color-fg-muted); margin: 0; line-height: 1.6; }

/* ── Footer Para Birimi Seçici (WPML/WCML Multicurrency) ───────────────────
   Eklentinin ürettiği ham HTML: .wcml_currency_switcher > ul > li.wcml-cs-
   active-currency > a.wcml-cs-item-toggle (aktif para birimi) + ul.wcml-cs-
   submenu (diğer seçenekler, ör. "Amerika Birleşik Devletleri (ABD) doları
   ($) - USD" gibi uzun etiketler). Bunu sitenin küçük pill/buton diline
   uyacak şekilde sadeleştiriyoruz; alt menü hover/focus ile açılıyor
   (eklentinin kendi JS'i varsa onunla çakışmaz, sadece ek bir CSS yolu). */
.site-footer__currency-switcher { margin-top: 0; }
/* Eklentinin kendi CSS'i (legacy-dropdown/style.css) ".wcml-dropdown{width:
   15.5em}", ".wcml-dropdown a{display:block}", ".wcml-dropdown li{border:
   1px solid #cdcdcd}" gibi kendi kutu/kenarlık kurallarını taşıyor ve
   sayfada BİZİM CSS'imizden SONRA yükleniyor — aynı özgüllükte bir kural
   sonradan gelince kazanıyordu, bu da seçicinin tam genişlikte, köşeli,
   gri kenarlıklı ("native select" gibi) görünmesine yol açıyordu. Tüm
   kritik özellikler burada !important ile kesin olarak eziliyor. */
.site-footer__currency-switcher .wcml-dropdown { width: auto !important; }
.site-footer__currency-switcher .wcml_currency_switcher ul { list-style: none; margin: 0 !important; padding: 0; }
.site-footer__currency-switcher li.wcml-cs-active-currency {
  position: relative; border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important; border-radius: 999px !important;
  transition: border-color 200ms ease;
}
.site-footer__currency-switcher li.wcml-cs-active-currency:hover { border-color: var(--color-primary) !important; }
.site-footer__currency-switcher .wcml-cs-item-toggle {
  display: inline-block !important; width: auto;
  padding: 8px 32px 8px 16px !important; margin: 0 !important;
  color: var(--color-fg); font-size: 0.8rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; line-height: 1.4 !important;
}
.site-footer__currency-switcher .wcml-cs-item-toggle:after {
  border-top-color: var(--color-fg-muted) !important;
}
.site-footer__currency-switcher li.wcml-cs-active-currency:hover .wcml-cs-item-toggle,
.site-footer__currency-switcher li.wcml-cs-active-currency:hover .wcml-cs-item-toggle:after {
  color: var(--color-primary);
}
.site-footer__currency-switcher .wcml-cs-submenu {
  min-width: 100%; background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-card); padding: 4px !important; margin-top: 6px !important;
  overflow: hidden;
}
.site-footer__currency-switcher .wcml-cs-submenu li {
  border: none !important; background: transparent !important; border-radius: 6px;
}
.site-footer__currency-switcher .wcml-cs-submenu li:hover { background: var(--color-bg-alt) !important; }
.site-footer__currency-switcher .wcml-cs-submenu a {
  padding: 8px 10px !important; font-size: 0.8rem; color: var(--color-fg-muted); text-decoration: none;
}
.site-footer__currency-switcher .wcml-cs-submenu a:hover { color: var(--color-primary); }

/* ── İş Birliği Yaptığımız Kurumlar (Marquee/Logo Döngüsü) Widget ─────────── */
.paylas-partners { padding: var(--space-lg) 0; overflow: hidden; }
.paylas-partners__track-wrap {
  width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.paylas-partners__track {
  display: flex; width: max-content;
  animation: paylas-marquee var(--paylas-marquee-duration, 30s) linear infinite;
}
.paylas-partners:hover .paylas-partners__track,
.paylas-partners__track.is-paused { animation-play-state: paused; }
@keyframes paylas-marquee { to { transform: translateX(-50%); } }
.paylas-partners__logo {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  margin: 0 var(--space-lg); height: 56px;
}
.paylas-partners__logo img {
  max-height: 100%; max-width: 160px; width: auto; object-fit: contain;
  filter: grayscale(1) opacity(0.55); transition: filter 250ms ease;
}
.paylas-partners__logo:hover img { filter: grayscale(0) opacity(1); }
.paylas-partners--color .paylas-partners__logo img { filter: none; }
.paylas-partners__logo a { display: flex; align-items: center; justify-content: center; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .paylas-partners__track { animation: none; overflow-x: auto; gap: var(--space-lg); }
}

/* ── Sık Sorulan Sorular (Akordeon) Widget ─────────────────────────────────── */
.paylas-faq { padding: var(--space-xl) 0; }
.paylas-faq__list { max-width: 820px; margin: var(--space-md) auto 0; display: flex; flex-direction: column; gap: 12px; }
.paylas-faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.paylas-faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: 18px 22px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--color-fg);
}
.paylas-faq-item__icon {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; transition: transform 300ms ease, background 300ms ease;
}
.paylas-faq-item__icon svg { width: 14px; height: 14px; transition: transform 300ms ease; }
.paylas-faq-item.is-open .paylas-faq-item__icon { background: var(--color-primary); color: #fff; }
.paylas-faq-item.is-open .paylas-faq-item__icon svg { transform: rotate(45deg); }
.paylas-faq-item__a {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease;
}
.paylas-faq-item.is-open .paylas-faq-item__a { grid-template-rows: 1fr; }
.paylas-faq-item__a-inner { overflow: hidden; }
.paylas-faq-item__a-inner p {
  margin: 0; padding: 0 22px 20px; color: var(--color-fg-muted); line-height: 1.7; font-size: 0.92rem;
}
.paylas-faq-item__a-inner p:has(> .btn) { padding-top: 4px; }
.paylas-faq-item__a-inner .btn { font-size: 0.85rem; padding: 10px 20px; min-height: auto; }
@media (prefers-reduced-motion: reduce) {
  .paylas-faq-item__a { transition: none; }
}

/* ── Contact Form 7 — Kurumsal Sayfalarımızdaki Form Stilleri ─────────────── */
.wpcf7-form {
  max-width: 640px; margin: var(--space-md) auto 0;
  background: var(--color-surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: var(--space-lg);
}
.wpcf7-form label { display: block; margin-bottom: var(--space-md); font-weight: 600; font-size: 0.92rem; color: var(--color-fg); }
.wpcf7-form label br { display: none; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
  display: block; width: 100%; margin-top: 8px;
  padding: 12px 14px; font-family: var(--font-body); font-size: 0.95rem; font-weight: 400;
  color: var(--color-fg); background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  transition: border-color var(--transition-base) ease, background var(--transition-base) ease;
}
.wpcf7-form textarea { min-height: 120px; resize: vertical; }
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none; border-color: var(--color-primary); background: var(--color-surface);
}
.wpcf7-form .wpcf7-list-item { display: inline-flex; align-items: center; gap: 6px; margin: 4px 12px 4px 0; font-weight: 400; }
.wpcf7-form .wpcf7-list-item input { width: auto; margin: 0; }
.wpcf7-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 0.88rem; color: var(--color-fg-muted); }
.wpcf7-form .wpcf7-acceptance input { width: auto; margin-top: 3px; flex-shrink: 0; }
.wpcf7-form input[type="file"] { margin-top: 8px; font-size: 0.85rem; }
.wpcf7-form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem; font-family: var(--font-body);
  padding: var(--btn-padding-y) var(--btn-padding-x); border-radius: var(--radius-sm);
  min-height: var(--btn-min-height); border: 1.5px solid var(--color-primary);
  background: var(--color-primary); color: #fff; cursor: pointer;
  transition: all var(--transition-base) ease; margin-top: 4px;
}
.wpcf7-form input[type="submit"]:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.wpcf7-form input[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
.wpcf7-spinner { margin: 0 0 0 8px; }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; color: var(--color-destructive); font-size: 0.8rem; font-weight: 500; }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output {
  border-color: var(--color-destructive); color: var(--color-destructive);
}
.wpcf7-form.sent .wpcf7-response-output { border-color: var(--color-primary); color: var(--color-primary-dark); }
.wpcf7-response-output {
  margin-top: var(--space-md); padding: 14px 18px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border); font-size: 0.9rem; font-weight: 500;
}
@media (max-width: 640px) {
  .wpcf7-form { padding: var(--space-md); }
}

/* ==========================================================================
   24. AUTHENTICATION PAGES (Giriş Yap, Kayıt Ol, Şifremi Unuttum)
   ========================================================================== */

.paylas-auth-page {
  padding: var(--space-xl) 0 var(--space-2xl);
  background: var(--color-bg-alt);
  min-height: calc(100vh - 280px);
  display: flex;
  align-items: center;
}

.paylas-auth-container {
  width: 100%;
  max-width: 1000px;
  margin: 60px auto;
}

/* Hesabım başlığını tamamen gizle (hem giriş yapmamış hem giriş yapmış) */
body.woocommerce-account h1.entry-title,
body.woocommerce-account .page-content > h1 {
  display: none !important;
}

/* Dashboard'ı ortala ve header'dan uzaklaştır */
body.woocommerce-account.logged-in .page-content {
  padding-top: 80px !important;
  padding-bottom: 120px !important;
}

body.woocommerce-account.logged-in .woocommerce {
  max-width: 1050px !important;
  margin: 0 auto !important;
  justify-content: center;
}

.paylas-auth-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.paylas-auth-card--single {
  grid-template-columns: 0.9fr 1.1fr;
}

/* Sol Taraf: Visual Banner */
.paylas-auth-banner {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-accent-dark) 100%),
              url('https://paylas.org.tr/wp-content/uploads/2026/07/IMG_8055_optimized.mp4');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.paylas-auth-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 50, 20, 0.82) 0%, rgba(20, 35, 12, 0.92) 100%);
  z-index: 1;
}

.paylas-auth-banner__content {
  position: relative;
  z-index: 2;
}

.paylas-auth-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.paylas-auth-banner__title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: var(--space-md);
}

.paylas-auth-banner__text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--space-xl);
}

.paylas-auth-banner__stats {
  display: flex;
  gap: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-md);
}

.paylas-auth-banner__stat strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
}

.paylas-auth-banner__stat span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

/* Sağ Taraf: Form Wrap */
.paylas-auth-form-wrap {
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-surface);
}

/* Remove default WooCommerce borders and padding */
.paylas-auth-form-wrap form.login,
.paylas-auth-form-wrap form.register,
.woocommerce form.login,
.woocommerce form.register {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.paylas-auth-header {
  margin-bottom: var(--space-lg);
}

.paylas-auth-header__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-fg);
  margin-bottom: 6px;
}

.paylas-auth-header__subtitle {
  font-size: 0.92rem;
  color: var(--color-fg-muted);
  line-height: 1.5;
}

/* Tab Switcher */
.paylas-auth-tabs {
  display: flex;
  gap: var(--space-md);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-xl);
  position: relative;
}

.paylas-auth-tabs__btn {
  background: none;
  border: none;
  padding: var(--space-xs) 4px var(--space-sm);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-fg-muted);
  cursor: pointer;
  position: relative;
  transition: color var(--transition-base) ease;
}

.paylas-auth-tabs__btn:hover {
  color: var(--color-primary-dark);
}

.paylas-auth-tabs__btn.is-active {
  color: var(--color-primary-dark);
}

.paylas-auth-tabs__btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-primary);
  border-radius: 999px;
  transform: scaleX(0);
  transition: transform var(--transition-base) ease;
}

.paylas-auth-tabs__btn.is-active::after {
  transform: scaleX(1);
}

/* Tab Panes */
.paylas-auth-tabs__pane {
  display: none;
}

.paylas-auth-tabs__pane.is-active {
  display: block;
  animation: paylasFadeIn 250ms ease forwards;
}

@keyframes paylasFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Form Controls */
.paylas-auth-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.paylas-auth-form__field {
  margin-bottom: var(--space-md);
}

.paylas-auth-form__field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-fg);
  margin-bottom: 6px;
}

.paylas-auth-form__input {
  width: 100%;
  padding: 14px 24px;
  font-size: 1.05rem;
  font-family: var(--font-body);
  color: var(--color-fg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px !important;
  transition: border-color var(--transition-base) ease, background var(--transition-base) ease, box-shadow var(--transition-base) ease;
}

.paylas-auth-form__input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.1);
}

.paylas-auth-password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.paylas-auth-password-wrap .paylas-auth-form__input {
  padding-right: 48px;
}

.paylas-auth-password-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--color-fg-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-base) ease;
}

.paylas-auth-password-toggle:hover {
  color: var(--color-fg);
}

.paylas-auth-password-toggle .paylas-eye-open { display: block; }
.paylas-auth-password-toggle .paylas-eye-closed { display: none; }

.paylas-auth-password-toggle.is-visible .paylas-eye-open { display: none; }
.paylas-auth-password-toggle.is-visible .paylas-eye-closed { display: block; }

/* Options (Remember me & Forgot password) */
.paylas-auth-form__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  font-size: 0.88rem;
}

.paylas-auth-form__checkbox-field {
  margin-bottom: var(--space-md);
}

.paylas-auth-form__checkbox-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--color-fg-muted);
  user-select: none;
}

.paylas-auth-form__checkbox-label input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.paylas-auth-form__forgot-link {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-base) ease;
}

.paylas-auth-form__forgot-link:hover {
  text-decoration: underline;
}

.paylas-auth-form__submit-wrap {
  margin-top: var(--space-md);
}

.paylas-auth-form__submit {
  width: 100% !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.2);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.paylas-auth-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(4, 120, 87, 0.3);
}

/* Footer Link */
.paylas-auth-footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-fg-muted);
}

.paylas-auth-footer__link {
  color: var(--color-primary-dark);
  font-weight: 700;
  margin-left: 6px;
  text-decoration: none;
}

.paylas-auth-footer__link:hover {
  text-decoration: underline;
}

/* WooCommerce Notices Styling inside Auth */
.paylas-auth-form-wrap .woocommerce-error,
.paylas-auth-form-wrap .woocommerce-message,
.paylas-auth-form-wrap .woocommerce-info {
  list-style: none;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
  font-size: 0.9rem;
  font-weight: 500;
}

.paylas-auth-form-wrap .woocommerce-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.paylas-auth-form-wrap .woocommerce-message {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.paylas-auth-form-wrap .woocommerce-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

/* Responsive */
@media (max-width: 991px) {
  .paylas-auth-card,
  .paylas-auth-card--single {
    grid-template-columns: 1fr;
  }
  .paylas-auth-banner {
    display: none !important;
  }
  .paylas-auth-form-wrap {
    padding: 40px 24px;
  }
  .paylas-auth-container {
    margin: 20px auto;
  }
}

@media (max-width: 520px) {
  .paylas-auth-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .paylas-auth-page {
    padding: var(--space-md) 0 var(--space-xl);
  }
}

/* ==========================================================================
   Widget Spacing Overrides (Elementor Özelleştirme)
   ========================================================================== */
.innotheme-no-spacing.paylas-support,
.innotheme-no-spacing.paylas-activity,
.innotheme-no-spacing.paylas-stats,
.innotheme-no-spacing.paylas-donation,
.innotheme-no-spacing.paylas-blog,
.innotheme-no-spacing.paylas-video,
.innotheme-no-spacing.paylas-cta-wrap,
.innotheme-no-spacing.paylas-hero,
.innotheme-no-spacing.paylas-faq,
.innotheme-no-spacing.paylas-mission,
.innotheme-no-spacing.paylas-partners,
.innotheme-no-spacing.paylas-shop {
  padding: 0 !important;
}



/* ── Icon: Kalp (♥) ──────────────────────────────────────────────────
   "Bağış Yap" butonlarında ham Unicode ♥ karakteri (U+2665) yerine
   kullanılan inline SVG — bazı mobil OS/tarayıcı kombinasyonlarında
   (özellikle iOS/Android) niteliksiz U+2665 renkli emoji olarak render
   ediliyordu, masaüstünde ise düz metin glifi olarak görünüyordu. SVG
   currentColor kullanarak butonun metin rengini miras alır, böylece her
   platformda birebir aynı görünür. */
.icon-heart {
  width: 0.9em;
  height: 0.9em;
  display: inline-block;
  vertical-align: -0.1em;
  flex-shrink: 0;
}

/* === InnoTheme: Görsel X/Y Konum Kontrolü (Elementor object-position değişkenleri) === */
.paylas-cta__media img,
.paylas-support-media img,
.paylas-mt-media__primary img,
.paylas-mt-media__secondary img,
.paylas-donate-card__media img,
.paylas-activity-card__media img,
.paylas-blog-card__media img,
.paylas-video-card__media img,
.paylas-video-thumb img,
.paylas-partners__logo img {
  object-position: var(--ithp-x, 50%) var(--ithp-y, 50%);
}
/* === InnoTheme: Serbest Bağış Tutarı kutusu (Bağış Kartları) === */
.paylas-donate-price-row--free { width: 100%; }
.paylas-donate-free { display: flex; align-items: center; gap: 8px; width: 100%; }
.paylas-donate-free__input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 10px;
  font-size: 15px; font-weight: 600; background: #fff; color: #1f2937;
}
.paylas-donate-free__cur { font-weight: 700; color: #fff; font-size: 16px; }
/* === InnoTheme: Masaüstü header daha geniş içerik alanı === */
@media (min-width: 992px) {
  .site-header--desktop .site-header__inner { max-width: 1360px; }
}
/* === InnoTheme: Serbest tutar kutusu — mağaza (beyaz kart) bağlamı === */
.paylas-shop-card .paylas-donate-free__cur { color: var(--color-primary-dark, #3f6f27); }
.paylas-shop-card .paylas-donate-free { max-width: 220px; }
/* === InnoTheme: Faaliyet kartları soldan başlasın (#2) === */
.paylas-activity-grid { justify-content: flex-start; }

/* === InnoTheme: Kart görselleri kare (1:1) — kare/yatay foto dengeli otursun (#3) === */
.paylas-shop-card__media { aspect-ratio: 1 / 1; }
.paylas-activity-card__media { aspect-ratio: 1 / 1; }
/* === InnoTheme: #2/#3 düzeltme — Faaliyet 4:3'e geri, sol hiza pekiştir, alt boşluk === */
.paylas-activity-card__media { aspect-ratio: 4 / 3; }
.paylas-activity-grid { justify-content: flex-start !important; }
.paylas-shop-card__media img, .paylas-activity-card__media img, .paylas-donate-card__media img { display: block; }
/* === InnoTheme: Header daha geniş (1600) + hero popup serbest tutar input === */
@media (min-width: 992px) {
  .site-header--desktop .site-header__inner { max-width: min(1600px, 95vw) !important; }
}
.paylas-donate-popup--free .paylas-donate-price-row { flex-direction: column; align-items: stretch; gap: 8px; }
.paylas-donate-popup--free .paylas-donate-qty__stepper { width: 100%; border: 1px solid #d1d5db; border-radius: 10px; }
.paylas-donate-popup--free #paylas-donate-popup-amount { width: 100%; text-align: left; padding: 12px 14px; font-size: 16px; font-weight: 600; }
/* === InnoTheme: Bağış kartı — dikdörtgen görsel üstte + panel altta (beyaz boşluk yok) === */
.paylas-donate-card {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  display: flex; flex-direction: column;
}
.paylas-donate-card__media {
  position: relative !important; inset: auto !important;
  aspect-ratio: 4 / 3; width: 100%; flex: 0 0 auto;
}
.paylas-donate-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paylas-donate-card__overlay {
  position: relative !important; left: auto !important; right: auto !important; bottom: auto !important;
  margin-top: -34px;
  background: var(--paylas-donate-overlay-color, var(--color-primary));
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 28px 28px 0 0 / 34px 34px 0 0;
  padding: 42px var(--space-md) var(--space-md);
  flex: 1 1 auto;
}
/* === InnoTheme: Bağış (mağaza) grid mobilde tek kolon — sağda boşluk olmasın === */
@media (max-width: 899px) { .paylas-shop-grid { grid-template-columns: 1fr !important; } }
/* === InnoTheme: #1 Faaliyet başlığı sola, #2 hero popup görsel ortadan, #3 mobil logo büyük === */
.paylas-activity .section-header { text-align: left; max-width: none; margin-left: 0; margin-right: auto; }
.paylas-donate-popup__media img { object-position: center !important; }
.site-header--mobile .site-header__logo img { max-width: 185px !important; max-height: 56px !important; }
@media (max-width: 380px) { .site-header--mobile .site-header__logo img { max-width: 155px !important; } }
/* === InnoTheme: Faaliyet başlık ORTAYA geri + kartlar EKRAN SOLUNDAN + burger giriş gizle === */
.paylas-activity .section-header { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
@media (min-width: 1201px) { .paylas-activity-grid { padding-left: var(--space-md) !important; } }
.site-menu-overlay__login-wrapper { display: none !important; }
/* === InnoTheme: alt menü iOS repaint ipucu + hero popup görseli TAM göster === */
.site-menu-overlay__list .sub-menu { -webkit-transform: translateZ(0); transform: translateZ(0); }
.paylas-donate-popup__media { aspect-ratio: 4 / 3 !important; background: #f3f4f6 !important; }
.paylas-donate-popup__media img { object-fit: contain !important; object-position: center !important; }
/* === InnoTheme: alt menü translateZ geri alındı (ince bar artefaktı) — repaint JS ile === */
.site-menu-overlay__list .sub-menu { -webkit-transform: none !important; transform: none !important; }
/* === InnoTheme: Bağış kartları EŞİT boyut — sadece görsel (4:3) orantılı, panel kalanı doldurur === */
.paylas-donate-card { aspect-ratio: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; }
.paylas-donate-card__media { position: relative !important; inset: auto !important; aspect-ratio: 4 / 3 !important; width: 100% !important; height: auto !important; flex: 0 0 auto !important; }
.paylas-donate-card__overlay { position: relative !important; flex: 1 1 auto !important; }
@media (min-width: 720px) {
  .paylas-donation-grid.grid-3 { align-items: stretch !important; }
  .paylas-donation-grid.grid-3 .paylas-donate-card { height: 100% !important; }
}
/* === InnoTheme: Bağış kartı görseli TÜM kartlarda eşit DİKDÖRTGEN (3:2 yatay) === */
/* aspect-ratio'yu img'in KENDİSİNE koyuyoruz: medyaya koyunca flex-column içinde
   flex:0 0 auto + img height:100% döngüsel yükseklik yaratıp görselin DOĞAL
   boyutunu kullanıyordu (kartlar farklı yükseklikte). */
.paylas-donate-card__media { aspect-ratio: auto !important; height: auto !important; overflow: hidden !important; }
.paylas-donate-card__media img { aspect-ratio: 3 / 2 !important; width: 100% !important; height: auto !important; object-fit: cover !important; display: block !important; }
/* === InnoTheme: Bağış kartı panelinin "buğulu cam" (frosted) görünümünü geri getir === */
.paylas-donate-card__overlay {
  background: color-mix(in srgb, var(--paylas-donate-overlay-color, var(--color-primary)) 78%, transparent) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  margin-top: -56px !important;
  padding-top: 64px !important;
}
.paylas-donate-card:hover .paylas-donate-card__overlay {
  background: var(--paylas-donate-overlay-color, var(--color-primary)) !important;
}
/* === InnoTheme: Bağış kartı — mobilde panel padding-top 24 + görsel biraz yukarı (daha çok bindirme) === */
@media (max-width: 719px) {
  .paylas-donate-card__overlay { padding-top: 24px !important; margin-top: -40px !important; }
}
/* === InnoTheme: #1 Rakamlar ortala (eleman sayısından bağımsız) === */
@media (min-width: 720px) {
  .paylas-stats-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: var(--space-lg) var(--space-xl); }
  .paylas-stats-grid .paylas-stat { flex: 0 0 auto; min-width: 90px; }
}
/* === InnoTheme: #2 Mobilde bağış filtreleri margin azalt === */
@media (max-width: 768px) {
  .paylas-donation-filters { margin-bottom: 16px !important; }
}
/* === InnoTheme: #3 Hero popup görseli TAM göster + kutuyu görsele göre oranla === */
.paylas-donate-popup__media { aspect-ratio: auto !important; height: auto !important; overflow: hidden !important; background: #f3f4f6 !important; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; }
.paylas-donate-popup__media img { position: static !important; inset: auto !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 52vh !important; object-fit: contain !important; display: block !important; }
/* === InnoTheme: Thankyou (Bağış Alındı) — dar ekranda yatay taşma düzeltmesi === */
@media (max-width: 480px) {
  .paylas-progress__label { white-space: normal !important; line-height: 1.2; word-break: break-word; }
  .paylas-progress__step { min-width: 0 !important; max-width: 92px; }
}
.paylas-thankyou-flow, .paylas-thankyou-content, .paylas-thankyou-details-row,
.paylas-thankyou-overview, .paylas-thankyou-bacs, .paylas-bacs-instructions {
  max-width: 100% !important; overflow-wrap: break-word;
}
/* === InnoTheme: Bağış kartı filtre gizleme — display:flex !important'i yenmek için class === */
.paylas-donate-card.paylas-donate-card--hidden { display: none !important; }
/* === InnoTheme: Thankyou dar ekran KAYMA — kesin çözüm (v2) === */
@media (max-width: 480px) {
  .paylas-thankyou-flow { max-width: 100% !important; overflow-x: clip; }
  .paylas-thankyou-content, .paylas-thankyou-overview, .paylas-thankyou-bacs,
  .paylas-bacs-instructions { max-width: 100% !important; box-sizing: border-box; }
  /* Özet değerleri (telefon/isim vb.) gerekirse sarsın */
  .paylas-thankyou-overview ul li strong { white-space: normal !important; }
  /* Progress adımları eşit-esnek → asla toplam genişliği aşmaz */
  .paylas-progress { max-width: 100%; }
  .paylas-progress__step { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; }
}
/* === InnoTheme: Global yatay taşma/kayma önleme — sticky header'ı BOZMADAN (clip) === */
html, body { overflow-x: clip; max-width: 100%; }
/* === InnoTheme: Sepet çekmecesi (cart drawer) yatay taşma düzeltmesi ===
   Kapalıyken .paylas-cart-drawer__panel translateX(100%) ile ekran dışında
   duruyor; fixed ebeveyninde overflow olmadığı için tüm sayfalarda yatay
   taşma/kayma yaratıyordu. overflow:hidden ile kapalı panel kesilir; açılınca
   panel viewport içinde olduğundan kırpılmaz. */
.paylas-cart-drawer { overflow: hidden; }
/* === InnoTheme: Thankyou özet/BACS — dar ekranda grid büzülüp ortalanması sağa
   kayma+taşma yaratıyordu (details-row 245px'e büzülüp içerikte ortalanıyor,
   çocuklar 312px → R=377 > viewport). Grid'i blok akışına çevir: kutular %100
   genişlikte, sola hizalı, büzülme/ortalanma yok. === */
@media (max-width: 768px) {
  .paylas-thankyou-details-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .paylas-thankyou-overview,
  .paylas-thankyou-bacs {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .paylas-thankyou-overview { margin-bottom: var(--space-lg) !important; }
}

/* === InnoTheme: Thankyou — mobilde dış kutu padding'ini azalt (kutulara daha
   çok genişlik) === */
@media (max-width: 480px) {
  .paylas-thankyou-content { padding: var(--space-md) !important; }
}

/* === InnoTheme: Thankyou — sade + dinamik banka hesap listesi
   (paylas_render_bank_accounts). Hesap Sahibi/Banka bir kez, her para birimi
   için etiket + IBAN. === */
.paylas-bank { display: flex; flex-direction: column; gap: 18px; }
.paylas-bank__common { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid #bbf7d0; }
.paylas-bank__row { display: flex; flex-direction: column; gap: 2px; }
.paylas-bank__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; color: var(--color-fg-muted); text-transform: uppercase; }
.paylas-bank__value { font-size: 0.95rem; font-weight: 600; color: var(--color-fg); }
.paylas-bank__accounts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.paylas-bank__account { display: flex; flex-direction: column; gap: 4px; }
.paylas-bank__cur { font-size: 0.95rem; font-weight: 700; color: var(--color-accent-dark); }
.paylas-bank__acc-bank { font-size: 0.85rem; color: var(--color-fg-muted); }
.paylas-bank__iban { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.5px; color: var(--color-fg); }
/* Kopyalanabilir satır: metin + "Kopyala" butonu yan yana; dar ekranda sarar */
.paylas-copyable { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* === InnoTheme: Tekli ürün — resim büyütme (lightbox) === */
.paylas-single-product__main-image { position: relative; }
.paylas-single-product__main-image img { cursor: zoom-in; }
.paylas-single-product__zoom-hint {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.88); color: var(--color-fg);
  border: 1px solid var(--color-border); box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  pointer-events: none; /* tıklama alttaki resme geçsin */
}
.paylas-single-product__thumb { cursor: pointer; border: 2px solid transparent; border-radius: 8px; transition: border-color 0.15s; }
.paylas-single-product__thumb.is-active { border-color: var(--color-primary); }

.paylas-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.paylas-lightbox[hidden] { display: none; }
.paylas-lightbox__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.9); cursor: zoom-out; }
.paylas-lightbox__img { position: relative; max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.paylas-lightbox__close { position: absolute; top: 16px; right: 22px; z-index: 2; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; opacity: 0.85; }
.paylas-lightbox__close:hover { opacity: 1; }
.paylas-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.14); border: none; color: #fff;
  font-size: 34px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.paylas-lightbox__nav:hover { background: rgba(255,255,255,0.28); }
.paylas-lightbox__nav--prev { left: 16px; }
.paylas-lightbox__nav--next { right: 16px; }
@media (max-width: 600px) {
  .paylas-lightbox__nav { width: 42px; height: 42px; font-size: 26px; }
  .paylas-lightbox__img { max-width: 96vw; }
  .paylas-lightbox__close { top: 10px; right: 14px; }
}

/* === InnoTheme: Footer — WhatsApp/e-posta logonun altına taşındı === */
.site-footer__brand .site-footer__reach-list { margin-top: 18px; }

/* === InnoTheme: Footer — dinamik kolon sayısı (footer_builder → --footer-cols) === */
@media (min-width: 600px) and (max-width: 899px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: repeat(var(--footer-cols, 4), minmax(0, 1fr)); }
}
.site-footer__html { color: var(--color-fg-muted); font-size: 0.95rem; line-height: 1.6; }

/* === InnoTheme: Burger menü "tam kapanmıyor" — KÖK NEDEN ===
   .site-menu-overlay{display:flex} yazar (author) kuralı, tarayıcının
   varsayılan [hidden]{display:none} kuralını HER ZAMAN yeniyordu (CSS
   cascade'de origin, specificity'den önce gelir — UA varsayılanı en düşük
   önceliktedir). Yani JS overlay.setAttribute('hidden','') çağırınca aslında
   hiçbir şey değişmiyordu; overlay "kapandıktan" sonra bile display:flex
   olarak render edilmeye devam ediyor, yalnızca transform:translateX(-100%)
   ile ekran dışına kaydırılıyordu. iOS'ta kaydırılmış katmanın kenarında
   eski/boyanmamış ince bir şerit kalabiliyordu — "tam kapanmıyor" bug'ının
   kaynağı buydu. Artık [hidden] gerçekten devreye giriyor: geçiş bitip
   (250ms) attribute eklenince tüm alt ağaç render'dan tamamen çıkıyor,
   kalıntı bırakma ihtimali kalmıyor. (main.js closeMenu() ayrıca açık kalan
   alt menüleri de sıfırlıyor — bir sonraki açılışta yarım-açık görünmesin.) */
.site-menu-overlay[hidden] { display: none !important; }

/* === InnoTheme: Footer — ödeme rozetleri (güven işareti; site yalnızca
   havale/EFT kabul ediyor, bu rozet doğrudan kart tahsilatı ima etmez).
   Ayrı bir blok yerine alt bar'ın (telif hakkı ↔ kütük no) İÇİNE üçüncü
   flex öğesi olarak akar — mevcut space-between + flex-wrap düzenini
   miras alır, mobilde de aynı şekilde düzgün sarar. === */
/* Rozet, telif hakkı metniyle AYNI grupta (sol taraf) akar — bottom-inner
   yine yalnızca 2 flex öğesine sahip (sol grup / kütük no), böylece
   space-between eskisi gibi dengeli iki uçlu dağılım yapar; 3 bağımsız
   öğeyle dengesiz orta boşluk oluşmuyor. */
/* === InnoTheme: Footer altı slogan/yazı === */
.site-footer__tagline { text-align: center; padding-bottom: var(--space-sm); }
.site-footer__tagline p {
  margin: 0 auto; max-width: 680px; font-size: 0.85rem; line-height: 1.6;
  color: var(--color-fg-muted);
}

.site-footer__bottom-left { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.site-footer__payment-img { max-height: 20px; width: auto; display: block; flex: 0 0 auto; margin-left: 4px; }
@media (min-width: 900px) {
  .site-footer__payment-img { max-height: 24px; }
}