/* =====================================================================
   İSAR — kurumsal efektler, bütün sayfalar (26.10.2026, Kadir: "web sitesinin etrafına kurumsal düzeyde efektler")
   Hepsi süsleme: bu dosya ve efekt.js hiç yüklenmese de site aynen çalışır.
   Hareket azaltma açık ziyaretçide hiçbir şey kaymaz/büyümez; yalnız renk ve gölge değişir.
   Vitrinin (slayt) kendi efektleri ana.css'in sonunda.
   ===================================================================== */

/* ---------- 1) Kaydırınca beliren bölümler (efekt.js işaretler; ilk ekranda görünenler hiç gizlenmez) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.efekt [data-belir] { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.2, .65, .3, 1), transform .9s cubic-bezier(.2, .65, .3, 1); transition-delay: var(--gecik, 0s); }
  html.efekt [data-belir].belirdi { opacity: 1; transform: none; }
}
@media print {
  html.efekt [data-belir] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 2) Bölüm başlıklarının altında marka renginde çizgi (Projeler, Kalıcı Eserler, Bülten) ---------- */
.ana-bolum__baslik { position: relative; }
.ana-bolum__baslik::after { content: ""; position: absolute; left: 50%; bottom: -18px; width: 64px; height: 4px; margin-left: -32px; border-radius: 4px; background: linear-gradient(90deg, var(--mavi), var(--turkuaz)); }
.ana-slogan h1 { position: relative; }
.ana-slogan h1::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 88px; height: 3px; margin-left: -44px; border-radius: 3px; background: linear-gradient(90deg, rgba(253, 188, 19, 0), var(--sari), rgba(253, 188, 19, 0)); }
@media (prefers-reduced-motion: no-preference) {
  html.efekt .ana-bolum__baslik[data-belir]::after, html.efekt .ana-slogan h1[data-belir]::after { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .65, .3, 1) .35s; }
  html.efekt .ana-bolum__baslik.belirdi::after, html.efekt .ana-slogan h1.belirdi::after { transform: scaleX(1); }
}
@media (max-width: 767px) {
  .ana-bolum__baslik::after { bottom: -12px; width: 48px; height: 3px; margin-left: -24px; }
  .ana-slogan h1::after { bottom: -10px; }
}

/* ---------- 3) Üst menü: alt çizgi soldan sağa kayarak gelir (masaüstü; telefondaki açılır menü olduğu gibi) ---------- */
@media (min-width: 1024px) {
  .ana-menu a { position: relative; }
  .ana-menu a:hover, .ana-menu a[aria-current="page"] { text-decoration: none; }
  .ana-menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .3s ease; }
  .ana-menu a:hover::after, .ana-menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
}

/* ---------- 4) Düğmeler: üstüne gelince hafifçe kalkar ve gölge alır ---------- */
.dugme, .dugme-hap, .ana-hap, .bagis-kart__dugme, .bant-dugme, .ana-tum { transition: filter .15s, transform .25s ease, box-shadow .25s ease, border-color .2s, color .2s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dugme:not(:disabled):hover, .dugme-hap:hover, .ana-hap:hover, .bagis-kart__dugme:hover, .bant-dugme:hover, .ana-tum:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(0, 35, 90, .55); }
  .dugme:not(:disabled):active, .dugme-hap:active, .ana-hap:active, .bagis-kart__dugme:active, .bant-dugme:active, .ana-tum:active { transform: none; box-shadow: none; }
  /* "Online Bağış" kalbi ara ara hafifçe atar */
  .dugme-hap--kirmizi img { animation: kalp-at 3.2s ease-in-out infinite; transform-origin: center; }
}
@keyframes kalp-at { 0%, 70%, 100% { transform: none; } 78% { transform: scale(1.18); } 86% { transform: scale(.96); } 93% { transform: scale(1.1); } }

/* ---------- 5) Kartlar: üstüne gelince kalkar, gölge alır; fotoğraf kartın içinde hafifçe yakınlaşır ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .urun, .proje-kart { transition: transform .35s cubic-bezier(.2, .65, .3, 1), box-shadow .35s ease, border-color .35s ease; }
  .urun:hover, .proje-kart:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(0, 35, 90, .45); border-color: var(--gri-cizgi); }
  .bagis-kart__gorsel, .ana-haber__gorsel { transition: transform .6s cubic-bezier(.2, .65, .3, 1); }
  .bagis-kart:hover .bagis-kart__gorsel, .ana-haber:hover .ana-haber__gorsel { transform: scale(1.06); }
  .ana-haber { transition: box-shadow .3s ease; }
  .ana-haber:hover { box-shadow: 0 10px 22px -12px rgba(0, 35, 90, .4); }
}
/* geniş ekranda hızlı bağış kartları ızgarada durur (kaydırma şeridi değil): kartın kendisi de kalkabilir */
@media (hover: hover) and (prefers-reduced-motion: no-preference) and (min-width: 1240px) {
  .bagis-kart { transition: transform .35s cubic-bezier(.2, .65, .3, 1), box-shadow .35s ease, border-color .35s ease; }
  .bagis-kart:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(0, 35, 90, .45); border-color: var(--gri-cizgi); }
}

/* ---------- 6) Kalıcı Eserler: ilerleme çubuğu soldan dolar (efekt.js), dolu kısmın üstünden ışık geçer ---------- */
.ana-ilerleme__cubuk i { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .ana-ilerleme__cubuk i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 65%) no-repeat; background-size: 250% 100%; animation: cubuk-parla 3.2s ease-in-out infinite; }
  html.efekt .ana-ilerleme__cubuk.dolacak i { clip-path: inset(0 100% 0 0 round 19px); }
  html.efekt .ana-ilerleme__cubuk.doldu i { clip-path: inset(0 0 0 0 round 19px); transition: clip-path 1.6s cubic-bezier(.2, .65, .3, 1) .2s; }
}
@keyframes cubuk-parla { from { background-position: 150% 0; } to { background-position: -150% 0; } }

/* ---------- 7) Alt kısım: üstte marka renklerinde ince şerit, bağlantılar ve sosyal simgeler canlanır ---------- */
.alt { background-image: linear-gradient(90deg, var(--mavi), var(--turkuaz) 55%, var(--sari)); background-size: 100% 4px; background-repeat: no-repeat; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .alt__sutun a { display: inline-block; transition: transform .25s ease, color .25s ease; }
  .alt__sutun a:hover { transform: translateX(4px); color: #fff; }
  .sosyal a { transition: transform .25s ease, filter .25s ease; }
  .sosyal a:hover { transform: translateY(-3px); filter: drop-shadow(0 4px 6px rgba(0, 35, 90, .35)); }
}

/* ---------- 8) Seçilen yazı marka renginde ---------- */
::selection { background: rgba(5, 89, 208, .2); }