/* =====================================================================
   hl-site.css — Hilal tasarımının (hilal.css, derlenmiş, DEĞİŞTİRİLMEZ)
   üstüne panel entegrasyonunun küçük ekleri. Her grup kendi başlığı altında.
   ===================================================================== */

/* ---- Yerleşim (Ajan C) -------------------------------------------- */
/* LOGO KARARI (10 Ekim 2026): "Kubbe ve Eller" ≈2.12:1, iki satırlı kelime
   işareti — eski yatay logodan daha kare. Header'da 60px (okunur), dar
   ekranda 44px; footer beyaz sürüm 72px. */
@media (max-width: 575.98px) {
   .hl-header .hl-brand__mark { block-size: min(var(--hl-logo-h, 46px), 44px); }
}

/* Manşet ay rayı: tasarım 5 slayt için ölçüldü; panelde slayt sayısı serbest.
   Çok slaytta (≥6, .hl-hero__ray--cok) dar ekranda rayın dışarı taşmaması için
   aylar daralır, ray kaydırılabilir, yinelenen sayaç (aria-hidden) gizlenir. */
.hl-hero__aylar { min-inline-size: 0; }
@media (max-width: 575.98px) {
   .hl-hero__ray--cok { max-inline-size: 100%; }
   .hl-hero__ray--cok .hl-hero__aylar { flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
   .hl-hero__ray--cok .hl-hero__aylar::-webkit-scrollbar { display: none; }
   .hl-hero__ray--cok .hl-hero__ay { flex: none; inline-size: 30px; }
   .hl-hero__ray--cok .hl-hero__sayac { display: none; }
}

/* ---- Kurumsal + medya (Ajan C · alt grup) -------------------------- */
/* İletişim: şube listesi tasarımda yok — konum bölümünde haritanın altına,
   bölüm başlığıyla ayrılır (sayfa ritmi: bölüm içi büyük boşluk). */
.hl-ct-subeler { margin-block-start: clamp(48px, 2.5rem + 2.5vw, 88px); }
.hl-ct-subeler .hl-kayit p + p { margin-block-start: 4px; }

/* ---- Manşet yan okları (dernek isteği, 10 Ekim 2026) ---------------
   Kaydırmanın yanında açık bir geçiş kontrolü. Manşetin iki yanında dikey
   ortada; beyaz taş daire + gölge (Hilal'in hap/daire dili). Sağdaki ok
   dairenin üstüne düşer → yarı saydam beyaz zemin + bulanıklık, fotoğraf
   üstünde de okunur. Mobilde küçülür ve görselin ortasına hizalanır. */
.hl-hero__yan {
   position: absolute; z-index: 6; inset-block-start: 50%;
   inline-size: 56px; block-size: 56px; border-radius: 50%;
   display: grid; place-items: center;
   border: 1px solid color-mix(in srgb, var(--hl-murekkep, #14204A) 10%, transparent);
   background: color-mix(in srgb, #fff 88%, transparent);
   -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
   color: var(--hl-murekkep, #14204A); font-size: 26px; cursor: pointer;
   box-shadow: 0 10px 28px -12px rgba(20, 32, 74, .45);
   transform: translateY(-50%);
   transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.hl-hero__yan--onceki { inset-inline-start: clamp(8px, 1.6vw, 28px); }
.hl-hero__yan--sonraki { inset-inline-end: clamp(8px, 1.6vw, 28px); }
@media (hover: hover) and (pointer: fine) {
   .hl-hero__yan:hover { background: var(--hl-cta, #1F6CB4); color: #fff; transform: translateY(-50%) scale(1.06); }
}
.hl-hero__yan:active { transform: translateY(-50%) scale(.96); }
.hl-hero__yan:focus-visible { outline: 3px solid var(--hl-cta, #1F6CB4); outline-offset: 3px; }
@media (max-width: 991.98px) {
   /* Mobilde metin altta, görsel üstte: oklar görselin dikey ortasına. */
   .hl-hero__yan { inline-size: 44px; block-size: 44px; font-size: 20px; inset-block-start: calc(var(--hl-header-full, 72px) + min(78vw, 380px) * .42); }
}
@media (prefers-reduced-motion: reduce) { .hl-hero__yan { transition: none; } }
@media (min-width: 992px) {
   /* JS (hl-motion.js "YAN OKLAR") dairenin sol kenarını --hl-yan-x, dikey
      ortasını --hl-yan-y olarak yazar. Önceki ok dairenin sol kenarına, sonraki
      ok sağ kenara (ekran içinde) oturur; JS yoksa eski konum (yanlar) kalır. */
   .hl-hero__yan { inset-block-start: var(--hl-yan-y, 50%); }
   .hl-hero__yan--onceki { inset-inline-start: calc(var(--hl-yan-x, 56px) - 28px); }
}
/* Haber/blog detayı: panel gövdesindeki YouTube perdesi (facade) ve fotoğraflar —
   tasarımın yer tutucu gövdesinde yoktu; okuma kolonunda nefesli dursun. */
.hl-nd-metin .hl-nd-video { margin: 28px 0; }
.hl-nd-metin .hl-nd-video .hl-facade { border-radius: var(--hl-r-lg); }
.hl-nd-galeri { margin-block-start: clamp(32px, 2rem + 1vw, 48px); }
.hl-nd-galeri h2 { margin-block-end: 16px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }

/* ---- Araçlar + hesap grubu (zekât · hesap no · gönüllü · üyelik · hesabım · 404) ---- */
/* Form durum satırı (giriş/kayıt/şifre/profil) — iletişim formunun .hl-ct-form__durum
   diliyle aynı: nötr gri, başarı gök mürekkep, hata nar mürekkep (AA). */
.hl-hs-durum {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   margin: 0;
   color: var(--hl-muted);
   font-size: 0.9375rem;
   line-height: 1.45;
}
.hl-hs-durum[hidden] { display: none; }
.hl-hs-durum i { font-size: 1.3em; flex: none; }
.hl-hs-durum.is-ok { color: var(--hl-gok-metin); font-weight: 650; }
.hl-hs-durum.is-hata { color: var(--hl-nar-metin); font-weight: 650; }
.hl-ac-panel__eylem .hl-hs-durum { flex: 1 1 240px; align-self: center; }

/* ---- Bağış grubu (bağış kalemleri · detaylar · projeler · ödeme · sonuç · makbuz · takip) ---- */
/* Ödeme: sunucu sepeti işlem yaparken satırlar kısa süre soluk (çift tık engeli). */
.hl-pm-liste.is-mesgul { opacity: .6; transition: opacity var(--hl-dur-fast) ease; }
.hl-pm-satir__ad a { color: inherit; text-decoration: none; }
.hl-pm-satir__ad a[href]:hover { text-decoration: underline; }
.hl-pm-hata { margin-block-end: clamp(16px, 1rem + .5vw, 24px); }
/* Kart ödemesi kapalıyken (posHazirMi false) seçenek görünür ama seçilemez. */
.hl-pm-yontem__sec.is-kapali { opacity: .55; cursor: not-allowed; }
.hl-pm-yontem__sec.is-kapali:hover { border-color: var(--hl-cizgi-strong); }
.hl-pm-recaptcha { margin-block: 16px 0; }
.hl-btn.is-loading { pointer-events: none; opacity: .75; }
/* Detay: panel editöründen gelen gövde (stil öznitelikleri atılmış). */
.hl-dd-govde > * + * { margin-block-start: .8em; }
.hl-dd-govde img { max-inline-size: 100%; block-size: auto; border-radius: var(--hl-r-md); }
.hl-dd-govde + .hl-dd-liste, .hl-dd-blok > p + p { margin-block-start: 1em; }
.hl-dd-panel__eylem .hl-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
/* Teslim edilen proje başlıkları detaya bağlanır; görünüm tasarımdaki düz başlık. */
.hl-pr-tmm__baslik a, .hl-pd-tmm__tx h3 a { color: inherit; text-decoration: none; }
.hl-pr-tmm__baslik a:hover, .hl-pd-tmm__tx h3 a:hover { text-decoration: underline; text-underline-offset: .2em; }
/* Tamamlanan proje detayı: tek kayıt (karuselsiz). */
.hl-pj .hl-tmm__oge { display: grid; gap: clamp(24px, 1rem + 3vw, 64px); align-items: center; }
@media (min-width: 992px) { .hl-pj .hl-tmm__oge { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.hl-pj__eylem { margin-block-start: 24px; }
.hl-pj__govde { max-inline-size: 68ch; }
/* Bağış sonucu (başarılı / tamamlanamadı). */
.hl-ob__levha { display: grid; gap: 16px; align-content: start; }
.hl-ob__levha--tek { max-inline-size: 760px; margin-inline: auto; }
.hl-ob__levha h2 { margin: 8px 0 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.hl-ob__metin { margin: 0; color: var(--hl-muted); }
.hl-ob__bankalar { margin-block-start: 8px; }
.hl-ob__eylem { display: grid; gap: 10px; margin-block-start: 20px; justify-items: stretch; }
.hl-ob__levha .hl-ob__eylem { display: flex; flex-wrap: wrap; justify-items: start; }
.hl-ob__eylem .hl-btn--link { justify-self: center; }
.hl-ob__yardim { margin: 0; color: var(--hl-muted); font-size: .9375rem; }
.hl-ob__sirada .hl-dd-akis { max-inline-size: 720px; }
.hl-ob__paylas { margin-block-start: clamp(28px, 1.5rem + 1vw, 40px); max-inline-size: 720px; }
/* Takip. */
.hl-tk .hl-container { display: grid; gap: clamp(20px, 1rem + 1vw, 32px); max-inline-size: 860px; }
.hl-tk__form { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 640px) { .hl-tk__form { grid-template-columns: minmax(0, 1fr) auto; } .hl-tk__form .hl-btn { margin-block-end: 30px; } }
.hl-tk__kayit { display: grid; gap: 20px; }
.hl-tk__bas { display: grid; gap: 10px; }
.hl-tk__bas h2 { margin: 0; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); }
.hl-tk__ara { margin: 8px 0 0; font-size: 1.15rem; }
/* Makbuz (layout blank) — ekranda ortalı kâğıt, yazdırırken yalnız kâğıt. */
.hl-mk { max-inline-size: 820px; padding-block: clamp(24px, 1rem + 2vw, 56px); display: grid; gap: 20px; }
.hl-mk__arac { justify-content: flex-end; }
.hl-mk__kagit { max-inline-size: none; display: grid; gap: 18px; }
.hl-mk__bas { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block-end: 18px; border-block-end: 1px solid var(--hl-cizgi); }
.hl-mk__no { display: grid; text-align: end; }
.hl-mk__no small { color: var(--hl-muted); }
.hl-mk__baslik { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.hl-mk__dolunay { margin: 0; }
.hl-mk__toplam dt, .hl-mk__toplam dd { font-weight: 750; color: var(--hl-ink); font-size: 1.125rem; }
.hl-mk__kurum { display: grid; gap: 4px; padding-block-start: 18px; border-block-start: 1px solid var(--hl-cizgi); color: var(--hl-muted); font-size: .9375rem; }
.hl-mk__kurum b { color: var(--hl-ink); }
.hl-mk__dipnot { margin: 10px 0 0; }
@media print {
   .hl-mk-sayfa { background: #fff; }
   .hl-mk__arac { display: none !important; }
   .hl-mk { padding: 0; max-inline-size: none; }
   .hl-mk__kagit { box-shadow: none; padding: 0; }
}
/* Tek banka varsa IBAN kartı tam genişlik (tasarım iki bankayla iki kolon kurgular; tek kolonda IBAN kırılıyordu). */
.hl-pm-bankalar:has(> .hl-iban:only-child) { grid-template-columns: minmax(0, 1fr); }

/* ---- Ödeme sayfası mobil alt çubuklar (Ajan F) -------------------------
   Ödeme sayfasında alt sekme çubuğu (Ana Sayfa · Projeler · Bağış Yap · Sepetim ·
   Menü) gizlenir: sayfa zaten sepetin kendisi, asıl eylem toplam çubuğundaki
   "Bağışı tamamla". Toplam çubuğu tabbar'ın yerine ekranın dibine oturur.
   Eskiden ikisi üst üste ~170px kaplıyor, tabbar'ın kalp dairesi toplam
   çubuğunun altına ~7px biniyordu (390px). */
@media (max-width: 1199.98px) { .hl-pm-sayfa .hl-tabbar { display: none; } }
@media (max-width: 991.98px) { .hl-pm-sayfa .hl-pm-mbar { inset-block-end: calc(10px + env(safe-area-inset-bottom)); } }

/* ---- Haber detayı: bağış kalemleri okuma kolonunda (Ajan F) ----------
   Tasarımda "Bağışınız burada ne yapıyor" yazının ara başlığı (.hl-prose h2);
   ilgili kalem kartları onun altında, okuma kolonu genişliğinde. */
.hl-nd-bagis { margin-block-start: clamp(28px, 2rem + 1vw, 48px); }
.hl-nd-bagis__kalemler { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); max-inline-size: 66ch; margin-block-start: 20px; }