/* =====================================================================
   İFYAD — premium.css
   Tema (theme.css) üzerine site-özel küçük düzenlemeler / override slotu.
   Not: Ana tasarım theme.css'te; buraya yalnızca İFYAD'a özel ince
   dokunuşlar ve dinamik sayfaların boş-durum (empty-state) stilleri girer.
   ===================================================================== */

/* Boş durum (içerik henüz eklenmemiş dinamik listeler) */
.empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 14px;
   text-align: center;
   padding: 56px 24px;
   margin: 24px auto;
   max-width: 560px;
   border: 1px dashed var(--line, #e3e8ef);
   border-radius: 18px;
   background: var(--surface-2, #f7f9fc);
   color: var(--muted, #64748b);
}
.empty-state i,
.empty-state .es-ic {
   font-size: 2.4rem;
   line-height: 1;
   color: var(--brand, #203b80);
   opacity: .85;
}
.empty-state h3,
.empty-state .es-title {
   margin: 0;
   font-size: 1.15rem;
   font-weight: 700;
   color: var(--ink, #1a2340);
}
.empty-state p { margin: 0; font-size: .98rem; }
.empty-state .btn { margin-top: 6px; }

/* Dinamik kampanya kartı kısa açıklaması (homepage + bağışlar) */
.hm1-dk__desc {
   margin: 2px 0 8px;
   font-size: .88rem;
   line-height: 1.45;
   color: var(--muted, #64748b);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   MAVİ VURGU — KONTRAST DÜZELTMESİ  (theme.css'ten SONRA yüklenir)
   Vurgu rengi mavi (#4A7CDF). Koyu bir ton olduğu için, arka planı vurgu
   rengi olan tüm etkileşimli öğelerde (butonlar, aktif tutar çipleri,
   rozetler, aktif sekmeler, açık akordeon numaraları, hover ikonları)
   yazı/ikon rengi BEYAZ (--c-white) yapılır.
   ══════════════════════════════════════════════════════════════════════ */
.theme-v3 .btn--accent,
.theme-v3 .hm1-hs__amt.is-active,
.theme-v3 .hm1-qcard__amts button.is-active,
.theme-v3 .hm1-proj__badge,
.theme-v3 .mega-all, .theme-v3 .mega-all i,
.theme-v3 .vid-feature .vid-tag,
.theme-v3 .hs-media .hs-pill,
.theme-v3 .vd-card .tag,
.theme-v3 .nw-tab.is-active .n,
.theme-v3 .cpx-amt.is-active,
.theme-v3 .hm1-qa.is-open .acc-head .no,
.theme-v3 .fq-qa.is-open .acc-head .no,
.theme-v3 .cpx-qa.is-open .acc-head .no,
.theme-v3 .hm1-prow:hover .go, .theme-v3 .hm1-prow:hover .go i,
.theme-v3 .hm1-way--mid:hover .ic, .theme-v3 .hm1-way--mid:hover .ic i,
.theme-v3 .hm1-trust__iban .row button:hover,
.theme-v3 .ab-step:hover .no,
.theme-v3 .fa-step:hover .no,
.theme-v3 .ct-tile:hover .ic, .theme-v3 .ct-tile:hover .ic i,
.theme-v3 .md-mrow:hover .go, .theme-v3 .md-mrow:hover .go i {
   color: var(--c-white) !important;
}

/* ============================================================
   MOBİL HEADER + HERO "DETAYLI BİLGİ" + DRAWER KATEGORİLER (v013)
   ============================================================ */

/* Hero: "Bağış Yap" + "Detaylı Bilgi" ikili buton grubu */
.hm1-hs__cta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hm1-hs__donate .hm1-hs__info {
   background: rgba(255, 255, 255, .14);
   border: 1px solid rgba(255, 255, 255, .6);
   color: #fff;
   box-shadow: none;
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
}
.hm1-hs__donate .hm1-hs__info:hover { background: #fff; color: var(--c-ink); border-color: #fff; }

/* Mobil header (≤767px): sepet + arama gizli, ikonlar sağa yaslı, büyük "Bağış Yap" */
.site-header .hdr-donate-m { display: none; }
@media (max-width: 767.98px) {
   .site-header .header-actions .hide-sm { display: none !important; }
   .site-header .header-actions { gap: 8px; }
   .site-header .hdr-donate-m {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 42px;
      padding: 0 15px;
      font-size: .86rem;
      white-space: nowrap;
   }
}

/* Drawer: dropdown-parent butonları (Bağışlar / Kurumsal) düz linklerle tutarlı olsun */
.drawer .d-parent {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
   padding: 14px 6px;
   border: 0;
   border-bottom: 1px solid var(--c-line);
   background: transparent;
   font-family: inherit;
   font-weight: 600;
   font-size: 1rem;
   color: var(--c-ink);
   text-align: left;
   cursor: pointer;
}
.drawer .d-parent:hover { color: var(--c-teal-800); }
.drawer .d-parent .d-caret {
   margin-left: auto;
   font-size: .8rem;
   color: var(--c-gray);
   transition: transform .25s ease;
}
.drawer .d-parent.is-open .d-caret { transform: rotate(180deg); }
.drawer .d-cat span { line-height: 1.2; }

/* ============================================================
   YUKARI ÇIK + FOOTER YASAL LİNKLER + BAĞIŞLAR HIZLI BAĞIŞ (v014)
   ============================================================ */

/* Yukarı çık butonu (.side-btn.up): düzgün yuvarlak stil, aşağı kaydırınca görün, mobilde tabbar üstünde */
/* style.css yüklenmediği için .side-btn'in temel (flex-ortala) stili de yok → burada veriyoruz */
.side-buttons .side-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
}
.side-buttons .side-btn.up {
   width: 46px; height: 46px; border-radius: 50%;
   background: var(--c-primary-900); color: #fff;
   box-shadow: 0 8px 22px rgba(7, 29, 64, .28);
   font-size: 1.15rem;
   opacity: 0; visibility: hidden; transform: translateY(12px);
   transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.side-buttons .side-btn.up > i { display: block; line-height: 1; }

/* Mobil menü (drawer) açılınca HER ŞEYİN üstünde olsun (tabbar dahil).
   .site-header sticky+z-index:90 olduğu için içindeki drawer (z:210) header'ın
   bağlamına hapsoluyor ve tabbar (z:150) üstte kalıyordu. Menü açıkken header'ı
   en üste taşıyoruz → drawer + overlay her şeyin üstünde. */
.site-header.nav-open { z-index: 99999; }

/* ============================================================
   BAĞIŞLAR KART MOBİL DİZİLİM + ÖDEME BUTON KONUMU (v019)
   ============================================================ */

/* Kart aksiyon sarmalayıcı — masaüstü: mevcut dikey görünüm korunur */
.dnx-tk__act { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }

/* Mobil: tutar çipleri ÜSTTE yan yana (kendi içinde yatay scroll, taşmaz),
   Sepete Ekle + İncele ALTTA yan yana */
@media (max-width: 767.98px) {
   .dnx-tk__stub { min-width: 0; align-items: stretch; gap: 8px; }
   .dnx-tk__amts {
      flex-direction: row;
      overflow-x: auto;
      gap: 6px;
      padding-bottom: 3px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
   }
   .dnx-tk__amts .qa { flex: 0 0 auto; min-width: 82px; }
   .dnx-tk__act { flex-direction: row; align-items: center; gap: 10px; }
   .dnx-tk__act .give { flex: 1 1 auto; }
   .dnx-tk__act .more { flex: 0 0 auto; white-space: nowrap; }
}

/* Ödeme sayfası: mobil/tablette özet paneli (Bağışı Tamamla butonu) formun
   ÜSTÜNE çıkmasın (theme.css'te order:-1 vardı) → form doldurulduktan SONRA en altta */
@media (max-width: 1199.98px) {
   .pm2-side { order: 0 !important; }
}

/* Bağış detay alt sabit dock (.cpx-dock) — mobilde tabbar'ın (bottom:0) ÜSTÜnde
   dursun (çakışmasın) + uzun açıklamayı gizle → kompakt: isim + Bağış Yap */
@media (max-width: 767.98px) {
   .cpx-dock { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
   .cpx-dock__in { gap: 10px; padding: 9px 0; }
   .cpx-dock__info small { display: none; }
   .cpx-dock .btn { padding: 10px 15px; font-size: .84rem; white-space: nowrap; }
}
.side-buttons .side-btn.up.is-visible { opacity: 1; visibility: visible; transform: none; }
.side-buttons .side-btn.up:hover { background: var(--c-teal-800, #0e7c66); color: #fff; }
@media (max-width: 767.98px) {
   .side-buttons { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; right: 14px; }
   .side-buttons .side-btn.up { width: 44px; height: 44px; }
}

/* Footer yasal linkler (.f-legal) */
.f-legal {
   display: flex; flex-wrap: wrap; justify-content: center;
   gap: 8px 20px; padding: 18px 20px 6px;
   border-top: 1px solid var(--c-line, rgba(0, 0, 0, .08));
}
.f-legal a {
   font-size: .8rem; font-weight: 600; color: currentColor; opacity: .72;
   transition: opacity .18s ease, color .18s ease;
}
.f-legal a:hover { opacity: 1; color: var(--c-teal-800, #0e7c66); }

/* Bağışlar kart hızlı bağış (.dnx-tk__amts / .qa) — slider gibi tutar + 2×/3× kat */
.dnx-tk__stub { min-width: 134px; gap: 7px; }
.dnx-tk__amts { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.dnx-tk__amts .qa {
   width: 100%; padding: 6px 8px;
   border-radius: var(--r-xs); border: 1px solid var(--c-line);
   background: #fff; color: var(--c-ink);
   font-family: var(--ff-display); font-weight: 700; font-size: .74rem;
   text-align: center; cursor: pointer; transition: all .15s ease;
}
.dnx-tk__amts .qa:hover { border-color: var(--c-teal); color: var(--c-teal-800); }
.dnx-tk__amts .qa.is-active { background: var(--c-secondary); border-color: var(--c-secondary); color: #fff; }
.dnx-tk__stub button.give { width: 100%; justify-content: center; border: 0; cursor: pointer; }

/* ============================================================
   MOBİL FIXED DÜZELTMELERİ (v015)
   ============================================================ */
/* KÖK SORUN: theme.css'te body{overflow-x:hidden} mobil tarayıcılarda
   position:fixed'i bozuyor → tabbar + yukarı-çık butonu sayfa sonuna kayıyordu.
   overflow-x:clip yatay taşmayı yine engeller AMA fixed'i BOZMAZ. */
html, body { overflow-x: clip; }

/* Mobil header: nav gizlenince header-actions sağa dayalı kalsın */
@media (max-width: 1199.98px) {
   .site-header .header-actions { margin-left: auto; }
}

/* KÖK SORUN 2: .side-buttons'ı fixed yapan kural style.css'teydi ve style.css
   frontend'de YÜKLENMİYOR → buton static kalıp footer içinde solda görünüyordu.
   Konumlandırmayı burada tanımlıyoruz. WhatsApp widget'ı sağ-altta olduğu için
   yukarı-çık butonunu SOL-alta alıyoruz (çakışma olmasın). */
.side-buttons {
   position: fixed !important;
   left: 20px !important;
   right: auto !important;
   bottom: 26px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   z-index: 9800;
}
@media (max-width: 767.98px) {
   .side-buttons {
      left: 14px !important;
      right: auto !important;
      bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
   }
}

/* ============================================================
   BAĞIŞ SEÇENEKLERİ (admin > Ürün > "Bağışları Göster") — v022
   ------------------------------------------------------------
   Detay sayfası tutar şeridi (.cpx-strip__pick / .cpx-cat) ve bağışlar
   listesi kartı (.dnx-tk__opts / .qo). Her iki yerde de seçilen seçenek
   hem tutarı hem sepete eklenecek ürün id'sini değiştirir.
   NOT: .cpx-cat hiçbir CSS dosyasında tanımlı değildi → seçenekler
   detay sayfasında düz yazı olarak görünüyordu.
   ============================================================ */

/* --- detay sayfası: seçenek satırı (tutar şeridinin üstünde, kendi satırında) --- */
.cpx-strip__pick {
   flex: 1 1 100%;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px 16px;
   padding-bottom: 14px;
   border-bottom: 1.5px dashed var(--c-line);
}
.cpx-strip__cats { display: flex; flex-wrap: wrap; gap: 8px; }

.cpx-cat {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
   padding: 9px 14px;
   border: 1px solid var(--c-line);
   border-radius: var(--r-xs);
   background: #fff;
   text-align: left;
   cursor: pointer;
   transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.cpx-cat .n {
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: .86rem;
   line-height: 1.25;
   color: var(--c-ink);
}
.cpx-cat .t { font-size: .76rem; font-weight: 700; color: var(--c-gray); }
.cpx-cat:hover { border-color: var(--c-teal); }
.cpx-cat:hover .n { color: var(--c-teal-800); }
.cpx-cat.is-active { background: var(--c-secondary); border-color: var(--c-secondary); }
.cpx-cat.is-active .n,
.cpx-cat.is-active .t { color: #fff; }

@media (max-width: 575.98px) {
   /* dar ekranda seçenekler tam genişlik — isim kırpılmasın */
   .cpx-strip__cats { width: 100%; }
   .cpx-cat { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
}

/* --- bağışlar listesi kartı: seçenek pilleri --- */
.dnx-tk__opts { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.dnx-tk__opts .qo {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1px;
   width: 100%;
   padding: 6px 8px;
   border: 1px solid var(--c-line);
   border-radius: var(--r-xs);
   background: #fff;
   cursor: pointer;
   transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dnx-tk__opts .qo .n {
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: .68rem;
   line-height: 1.2;
   color: var(--c-ink);
   text-align: center;
   /* uzun ürün adları kartı bozmasın */
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.dnx-tk__opts .qo .t { font-size: .72rem; font-weight: 700; color: var(--c-gray); }
.dnx-tk__opts .qo:hover { border-color: var(--c-teal); }
.dnx-tk__opts .qo:hover .n { color: var(--c-teal-800); }
.dnx-tk__opts .qo.is-active { background: var(--c-secondary); border-color: var(--c-secondary); }
.dnx-tk__opts .qo.is-active .n,
.dnx-tk__opts .qo.is-active .t { color: #fff; }

@media (max-width: 767.98px) {
   /* Mobilde .dnx-tk__stub yatay bir satır (çipler | tutar | buton). Seçenek pilleri
      ürün ADI taşıdığı için o dar sütuna sığmıyordu (isim kırpılıyordu) → seçenek
      olan kartlarda pilleri KENDİ tam-genişlik satırına alıyoruz. */
   .dnx-tk__stub--opts { flex-wrap: wrap; }
   .dnx-tk__opts { flex: 1 1 100%; width: 100%; gap: 6px; }
   /* tam genişlikte satır: ad solda, tutar sağda (detay sayfasıyla aynı okuma düzeni) */
   .dnx-tk__opts .qo { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; }
   .dnx-tk__opts .qo .n { text-align: left; font-size: .76rem; }
   .dnx-tk__opts .qo .t { white-space: nowrap; font-size: .76rem; }
}