/* ============================================================================
   PREMIUM EKLENTİLERİ — tasarımda karşılığı olmayan, CMS'in ihtiyaç duyduğu
   bileşenler.
   ============================================================================
   NEDEN AYRI DOSYA: style.css tasarımın kendi çıktısı. Buraya kural yazmak,
   tasarım güncellendiğinde eklentilerin silinmesi demek olurdu. Bu dosya
   style.css'TEN SONRA yüklenir ve yalnız aşağıdaki başlıkları kapsar:

     · Sayfalama            (statik tasarım her listeyi tek sayfada gösteriyordu)
     · Bildirim / uyarı     (form gönderimi sonrası flash mesajları)
     · Form hata metinleri  (sunucu doğrulaması)
     · Boş durum            (panelde henüz kayıt yokken)
     · Dar ekran düzeltmesi (tasarımda olmayan reCAPTCHA + gerçek adres verisi)

   Tümü tasarımın kendi jetonlarını (--color-*, --radius-*, --fs-*) kullanır;
   yeni renk/ölçü TANIMLANMAZ, böylece panelden renk değişince bunlar da değişir.
   ========================================================================= */

/* ── Sayfalama ────────────────────────────────────────────────────────────── */
.pager {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin-top: 40px;
}
.pager__num,
.pager__nav {
  display: grid; place-items: center;
  min-width: 42px; height: 42px; padding-inline: 12px;
  border-radius: var(--radius-sm);
  border: var(--border-width, 1px) solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-body);
  color: var(--color-heading);
  transition: background var(--motion-dur) var(--motion-ease),
              color var(--motion-dur) var(--motion-ease),
              border-color var(--motion-dur) var(--motion-ease);
}
.pager__num:hover,
.pager__nav:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pager__num.is-active {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-primary-text);
}
.pager__nav.is-off { opacity: .38; pointer-events: none; }
.pager__nav .icon { font-size: var(--icon-md); }

/* ── Bildirimler ──────────────────────────────────────────────────────────── */
.notice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; margin-bottom: 20px;
  border-radius: var(--radius-sm);
  border: var(--border-width, 1px) solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-heading);
  font-size: var(--fs-body); line-height: 1.5;
}
.notice .icon { flex: none; font-size: var(--icon-md); margin-top: 2px; }
.notice--ok  { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }
.notice--ok .icon { color: var(--color-accent); }
.notice--err { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.notice--err .icon { color: var(--color-primary-dark); }
.notice ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; }

/* ── Form hata metni ──────────────────────────────────────────────────────── */
.field-error {
  display: block; margin-top: 6px;
  font-size: var(--fs-sm); color: var(--color-primary-dark);
}
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid { border-color: var(--color-primary-dark); }

/* ── Dar ekranda ödeme formu ──────────────────────────────────────────────── */
/*
   Tasarımın ödeme sayfasında reCAPTCHA YOKTU; premium'da var ve Google'ın
   pencere öğesi SABİT 304px genişlikte bir <iframe> basıyor (CSS ile
   daraltılamaz, seçenek de sunmuyor).

   Sonuç ölçüldü: kartın 28+28px iç boşluğuyla birlikte `.checkout__card`
   öğesinin min-content genişliği 360px oluyor; `1fr` ızgara rayının
   otomatik alt sınırı min-content olduğu için ray 360px'e kilitleniyor ve
   375px'lik ekranda kap 327px iken sayfa 9px yatay kayıyordu.

   İki adımda çözülür:
     1) Izgara/esnek kutu çocuklarındaki varsayılan `min-width: auto`
        zincirini kırıp rayın daralmasına izin ver.
     2) reCAPTCHA'yı sığacağı orana küçült. Kart iç genişliği
        `görünüm - 48 (kap boşluğu) - 56 (kart boşluğu)`; 304px ancak 408px
        ve üstünde sığıyor, o yüzden eşik 420px. 375px'te 304×.86 = 261px.

   `transform-origin: 0 0` ile sola yaslanır, `height` küçülen yüksekliğe
   (78×.86 ≈ 68px) sabitlenir; aksi halde altta 10px boşluk kalırdı.

   Şehir/ilçe/mahalle seçicileri de aynı korumadan yararlanır: tasarımda üçer
   demo seçenek vardı, premium'da 81 il / 972 ilçe / 73 bin mahalle var ve
   <select> doğal genişliğini EN UZUN seçeneğe göre alır.
*/
.checkout__grid > *,
.checkout__main,
.checkout__summary,
.checkout__card { min-width: 0; }

.field, .field-row > .field { min-width: 0; }
.field .select,
.field .input { min-width: 0; max-width: 100%; }
.field .select { text-overflow: ellipsis; }

@media (max-width: 420px) {
  .checkout__card .g-recaptcha { transform: scale(.86); transform-origin: 0 0; height: 68px; }
}

/* ── Kartın tamamı tıklanabilir (uzatılmış bağlantı) ─────────────────────── */
/*
   Tasarımda kartların yalnız alt köşesindeki küçük düğme bağlantılıydı;
   görsele ya da başlığa basmak hiçbir şey yapmıyordu. Ziyaretçi doğal olarak
   önce görsele/başlığa basıyor ve tepki alamıyordu.

   NEDEN <a> İLE SARMALAMADIK: kartların içinde "Sepete Ekle" gibi DÜĞMELER
   var. Bir bağlantının içine düğme koymak geçersiz HTML'dir ve tarayıcılar
   tıklamayı öngörülemez biçimde ele alır.

   Çözüm: başlık gerçek bir bağlantı olur, `::after` ile kartın tamamına
   yayılır. İç düğmeler üst katmanda kalır, kendi işlerini yapar. Ekran
   okuyucu bağlantıyı başlık metniyle okur — erişilebilirlik korunur.
*/
.mt-kart { position: relative; }
.mt-kart-link { color: inherit; text-decoration: none; }
.mt-kart-link:hover { color: var(--color-primary); }
.mt-kart-link::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
}
/* Kart içindeki gerçek etkileşimli ögeler bağlantı katmanının ÜSTÜNDE kalır. */
.mt-kart a:not(.mt-kart-link),
.mt-kart button,
.mt-kart input,
.mt-kart select { position: relative; z-index: 2; }

/* Klavyeyle gezerken odak kartın tamamında görünsün. */
.mt-kart:focus-within { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.mt-kart-link:focus-visible { outline: none; }

/* Görsel üzerinde imleç bağlantı olduğunu belli etsin. */
.mt-kart img { cursor: pointer; }

/* ── Manşette seçili küpür ────────────────────────────────────────────────── */
/*
   Tasarımda küpüre basmak kalemi doğrudan sepete atıyordu; bu yüzden bir
   "seçili" durumu hiç tanımlanmamıştı. Davranış değiştirildi (bkz.
   anasayfa/hero.php): küpür artık yalnız seçiliyor, sepete ekleme işini
   altındaki düğme yapıyor.

   Seçili küpür, tasarımın kendi hover görünümünün kalıcı hâli olarak
   biçimlendirildi — yeni bir görsel dil eklenmedi, jetonlar ortak.
*/
.hamt.is-active {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  border-color: var(--color-primary);
}
.hamt.is-active strong { color: var(--color-primary); }
.hamt.is-active small  { color: color-mix(in srgb, var(--color-primary) 78%, #fff); }

.hero--v3 .hamt.is-active {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: var(--color-primary);
}
.hero--v3 .hamt.is-active strong { color: var(--color-primary-dark); }
.hero--v3 .hamt.is-active small  { color: var(--color-primary-dark); }

/* Koyu zeminli manşette (arka planı fotoğraf olan slayt) metin beyaz kalmalı. */
@media (min-width: 861px) {
  .hero--v3 .hero__panel .hamt.is-active strong,
  .hero--v3 .hero__panel .hamt.is-active small { color: var(--color-primary); }
}

/* Küpür grubunun altındaki düğme, küpürlerle aynı kutunun içinde durduğu için
   üstten biraz nefes alsın. */
.hero__quick .hero__cta { margin-top: 14px; }

/* ── Uzun yazı gövdesi: ara başlık ve liste ───────────────────────────────── */
/*
   Tasarımın haber/blog gövdesi (.ndetail__content) yalnız `> p` seçicisiyle
   biçimlendirilmişti; demo metni üç paragraftı, ara başlığa ihtiyaç yoktu.

   Gerçek yazılar 2.000–6.000 karakter. Bu uzunlukta ara başlıksız metin
   okunmuyor ve editörün başlık düğmesi biçimsiz <h2> üretiyordu (genel
   sıfırlama nedeniyle üst boşluksuz, paragrafa yapışık çıkıyordu).

   Aşağıdaki kurallar tasarımın KENDİ tipografi jetonlarını kullanır
   (--font-heading, --fs-h3, --color-heading); yeni bir ölçü tanımlanmaz,
   panelden punto değişince bunlar da değişir.
*/
.ndetail__content > h2,
.ndetail__content > h3,
.detail__body > h2,
.detail__body > h3 {
  font-family: var(--font-heading), sans-serif;
  color: var(--color-heading);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 38px 0 14px;
}
.ndetail__content > h2,
.detail__body > h2 { font-size: var(--fs-h3); font-weight: 800; }
.ndetail__content > h3,
.detail__body > h3 { font-size: var(--fs-h4); font-weight: 700; }
.ndetail__content > h2:first-child,
.detail__body > h2:first-child { margin-top: 0; }

/* Ara başlıktan sonraki ilk paragrafta gömme harf uygulanmaz — yalnız yazının
   ilk paragrafında olmalı. */
.ndetail__content > h2 + p::first-letter,
.ndetail__content > h3 + p::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; color: inherit; font-weight: inherit; }

.ndetail__content > ul,
.ndetail__content > ol,
.detail__body > ul,
.detail__body > ol {
  margin: 18px 0; padding-left: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px; max-width: 68ch;
}
.ndetail__content > ul > li,
.detail__body > ul > li {
  position: relative; padding-left: 22px;
  color: var(--color-text); line-height: var(--body-leading, 1.75);
}
.ndetail__content > ul > li::before,
.detail__body > ul > li::before {
  content: ""; position: absolute; left: 4px;
  top: calc(var(--body-leading, 1.75) * .5em - 2px);
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary);
}
.ndetail__content > ol,
.detail__body > ol { counter-reset: mtsira; }
.ndetail__content > ol > li,
.detail__body > ol > li {
  position: relative; padding-left: 30px; counter-increment: mtsira;
  color: var(--color-text); line-height: var(--body-leading, 1.75);
}
.ndetail__content > ol > li::before,
.detail__body > ol > li::before {
  content: counter(mtsira) "."; position: absolute; left: 0;
  font-family: var(--font-heading), sans-serif; font-weight: 700;
  color: var(--color-primary);
}

/* ── Hukuki metin içindeki listeler ───────────────────────────────────────── */
/*
   Tasarımda madde içi listeler `<ul class="legal__list">` olarak yazılmıştı.
   Premium'da metni yönetici CKEditor ile yazıyor ve editörün liste düğmesi
   düz `<ul>` üretiyor — sınıf ekleyemez. Yöneticiden HTML bilmesini istemek
   yerine, madde içindeki düz listeler tasarımın kendi görünümüne bağlandı.
   Kurallar style.css'teki .legal__list ile birebir aynı; jetonlar ortak.
*/
.legal__art ul {
  list-style: none; margin-top: 14px;
  display: flex; flex-direction: column; gap: 9px; max-width: 72ch;
  padding-left: 0;
}
.legal__art ul li {
  position: relative; padding-left: 22px;
  color: var(--color-text); line-height: var(--body-leading);
}
.legal__art ul li::before {
  content: ""; position: absolute; left: 4px;
  top: calc(var(--body-leading) * .5em - 2px);
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary);
}

/* ── Metin içi alıntı (pull-quote) ────────────────────────────────────────── */
/*
   Tasarımın haber detayında ortaya yaslı, üstü turuncu çizgili bir alıntı
   bloğu var (.ndetail__quote). Tasarımda bu blok HTML'e elle yazılmıştı.

   Premium'da yönetici metni CKEditor ile yazıyor ve editörün kendi "alıntı"
   düğmesi <blockquote> üretiyor. Yeni bir panel alanı eklemek yerine o düğme
   tasarımın alıntı görünümüne bağlandı: yönetici alıntıyı metnin İSTEDİĞİ
   yerine koyabiliyor — pull-quote'un doğası da bu.

   Kaynak satırı için <cite> ya da <footer> kullanılır; ikisi de aynı biçimi alır.
   Jetonlar tasarımın kendi jetonları, panelden renk değişince bu da değişir.
*/
.ndetail__content blockquote,
.detail__body blockquote {
  max-width: 620px; margin: 38px auto; padding: 26px 0 24px; text-align: center;
  border-top: 2px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  border-left: 0; background: none;
}
.ndetail__content blockquote p,
.detail__body blockquote p {
  font-family: var(--font-heading); font-style: italic;
  font-size: var(--fs-h3); line-height: 1.4; color: var(--color-heading);
  margin: 0;
}
.ndetail__content blockquote cite,
.ndetail__content blockquote footer,
.detail__body blockquote cite,
.detail__body blockquote footer {
  display: block; margin-top: 14px;
  font-style: normal; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary);
}

/* ── Bağış türü hapları (proje detayı) ────────────────────────────────────── */
/*
   Tasarımda bu haplar ÜÇ KISA DEMO ETİKETİYDİ ("Genel Katkı", "Bir Derslik",
   "Su & Altyapı") ve tek satıra sığdıkları için `flex-wrap: nowrap` +
   `white-space: nowrap` yeterliydi.

   Premium'da her hap PANELDEN BAĞLANAN GERÇEK BİR BAĞIŞ ÜRÜNÜDÜR ve adı uzun
   olabiliyor ("Tam Su Kuyusu (Sadaka-i Câriye)"). Kırpma kapalı + satır kaydırma
   kapalı olunca haplar 380px'lik yan sütunda üst üste biniyordu.

   Çözüm tasarımın kendi görünümünü bozmuyor: kısa etiketlerde haplar yine tek
   satırda eşit paylaşır (flex: 1 1 auto + wrap, tek satıra sığdıkça sarmaz),
   uzun etiketlerde alt satıra iner ve metin sarılır.
*/
.daside__pills { flex-wrap: wrap; }
.daside__pills .pill {
  flex: 1 1 auto;
  white-space: normal;
  line-height: 1.25;
  word-break: break-word;
}

/* ── Boş durum ────────────────────────────────────────────────────────────── */
.empty-state {
  display: grid; place-items: center; gap: 10px;
  padding: clamp(36px, 6vw, 72px) 24px; text-align: center;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
  background: var(--color-bg-alt);
}
.empty-state__ico {
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: var(--radius); background: var(--color-tag-bg); color: var(--color-primary);
}
.empty-state__ico .icon { font-size: var(--icon-lg); }
.empty-state h3 { font-size: var(--fs-h4); }
.empty-state p { color: var(--color-text-muted); font-size: var(--fs-body); max-width: 46ch; }

/* ══════════════════════════════════════════════════════════════════════
   DETAY İÇİ FOTOĞRAF IZGARASI  ·  .dgal
   Eski sitedeki `[galeri]…[/galeri]` kısa kodu bir jssor slider'ı
   açıyordu. Yeni tasarımda ayrı bir slider kütüphanesi yok; göç sırasında
   bu bloklar sade bir ızgaraya çevrildi. Tasarımın kendi jetonlarını
   (--radius, --color-border, --shadow-card) kullanır, yeni görsel dil
   getirmez.
   ══════════════════════════════════════════════════════════════════════ */
.dgal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 28px 0;
}
.dgal__item { margin: 0; }
.dgal__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--color-border);
    display: block;
}
@media (max-width: 520px) {
    .dgal { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* Paneldeki zengin metne eklenen saha videoları dar ekranda taşmamalı. */
.so-nw-prose__video {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 28px 0 34px;
    border-radius: var(--so-r-md, var(--radius-sm));
    background: var(--so-deep, #08161f);
}
.so-nw-prose__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Göçten gelen gövdelerdeki tekil <figure> resimleri. */
.detail__body figure,
.ndetail__content figure { margin: 28px 0; }
.detail__body figure img,
.ndetail__content figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--color-border);
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   ŞEFFAFLIK · dağılım ya da kart bloğu panelden boşaltıldığında
   ─────────────────────────────────────────────────────────────────────────
   Tasarımın v3 düzeni .container'ı iki kolona böler (style.css:1566):
   solda `.tr__alloc`, sağda `.tr__cards`. Statik tasarımda ikisi de hep
   basılıydı; CMS'te biri boş bırakılabiliyor ve o zaman ekranın yarısı
   bomboş kalıyordu. View, eksik blok varsa section'a `.transparency--tek`
   ekler: tek kolona düşüp kalan blok tam genişliği kullanır. */
.transparency--v3.transparency--tek > .container { grid-template-columns: 1fr; }
.transparency--v3.transparency--tek .tr__alloc,
.transparency--v3.transparency--tek .tr__cards { grid-column: 1 / -1; }
/* Kartlar tam genişlikte: tasarımın v1/v2 varyantlarındaki üçlü sıra düzeni */
.transparency--v3.transparency--tek .tr__cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.transparency--v3.transparency--tek .tr__alloc { max-width: 900px; margin-inline: auto; width: 100%; }
@media (max-width: 900px) {
  .transparency--v3.transparency--tek .tr__cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ─────────────────────────────────────────────────────────────────────────
   ÖDEME · reCAPTCHA kutusu
   ─────────────────────────────────────────────────────────────────────────
   Doğrulama kutusu, "Bağışı Tamamla" düğmesinin hemen üstüne taşındı
   (bkz. odeme.php). Google'ın iframe'i sabit 304px genişliğinde; dar özet
   sütununda taşmasın diye ölçeklenip ortalanıyor. */
.csum__recaptcha { display: flex; justify-content: center; margin: 0 0 14px; }
.csum__recaptcha .g-recaptcha { transform-origin: center top; }
@media (max-width: 1180px) {
  /* Özet sütunu daraldığında 304px sığmıyor — orantılı küçült. */
  .csum__recaptcha .g-recaptcha { transform: scale(.92); }
}

/* ─────────────────────────────────────────────────────────────────────────
   MAKBUZ · Bağışçı bilgileri listesi
   ─────────────────────────────────────────────────────────────────────────
   Bu liste eskiden `.footer__contact-list` kullanıyordu; o sınıf KOYU zeminli
   alt bilgi için yazılmış ve metnini beyaza (%72) boyuyor. Makbuz sayfası
   beyaz kart üzerinde olduğu için bağışçının adı, e-postası ve telefonu
   görünmez oluyordu. Kendi sınıfı: aynı düzen, sayfanın metin rengiyle. */
.rinfo { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; }
.rinfo li { display: flex; align-items: flex-start; gap: 10px; color: var(--color-text); font-size: var(--fs-body); }
.rinfo a { color: var(--color-text); }
.rinfo a:hover { color: var(--color-primary); }
.rinfo__ic { color: var(--color-primary); flex: none; margin-top: 2px; }
.rinfo__ic .icon { font-size: var(--icon-md); }

/* ─────────────────────────────────────────────────────────────────────────
   ÖDEME · statik payment.html tasarımına bağlanan dinamik alanlar
   ───────────────────────────────────────────────────────────────────────── */
.so-pm-alert { margin-bottom: 18px; }
.so-pm-line__sum {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-height: 38px;
  padding: 8px 30px 8px 12px;
  text-align: right;
  color: var(--so-ink);
  background: var(--so-paper);
  border: 1px solid var(--so-line);
  border-radius: var(--so-r-btn);
}
.so-pm-line__sum .cur { right: 11px; }
.so-pm-note-field,
.so-pm-consents { margin-top: 18px; }
.so-pm-consents { display: grid; gap: 14px; }
.so-pm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.so-pm-share-location { max-width: 520px; margin-bottom: 20px; }
.so-pm-share {
  padding: 18px 0;
  border-top: 1px solid var(--so-line-soft);
}
.so-pm-share__no {
  display: block;
  margin-bottom: 12px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--so-brand-text);
}
.so-pm-recaptcha { display: flex; justify-content: center; min-height: 78px; }

@media (max-width: 767.98px) {
  .so-pm-grid--3 { grid-template-columns: 1fr; }
  .so-pm-line__sum { width: 112px; }
}
@media (max-width: 575.98px) {
  .so-pm-line { grid-template-columns: minmax(0, 1fr) auto; }
  .so-pm-line__tx { grid-column: 1 / -1; }
  .so-pm-line__mode { justify-self: start; }
  .so-pm-line__qty { justify-self: end; }
  .so-pm-line__sum { width: 100%; grid-column: 1; }
  .so-pm-line__del { grid-column: 2; grid-row: 3; align-self: center; }
  .so-pm-methods { grid-template-columns: 1fr; }
  .so-pm-bank__iban .no { overflow-wrap: anywhere; }
  .so-pm-recaptcha { justify-content: flex-start; overflow: hidden; }
  .so-pm-recaptcha .g-recaptcha { transform: scale(.88); transform-origin: left top; }
}