İhya Vakfı
:root {
–yesil: #2e9e6b;
–yesil-koyu: #1e7a50;
–yesil-acik: #e8f7f1;
–lacivert: #1e3a5f;
–lacivert-lt:#2a4f82;
–beyaz: #ffffff;
–krem: #f9f8f5;
–text: #1a1a1a;
–text-soft: #5a6070;
–cizgi: #e8e4dc;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: ‘Nunito’, sans-serif; background: var(–beyaz); color: var(–text); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
/* ── NAV ── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 999;
height: 70px; display: flex; align-items: center; justify-content: space-between;
padding: 0 48px;
background: var(–beyaz);
border-bottom: 2px solid var(–yesil);
box-shadow: 0 2px 20px rgba(46,158,107,0.1);
}
.nav-logo img { height: 44px; }
.nav-logo-fallback { font-family: ‘Merriweather’, serif; font-size: 1.4rem; font-weight: 700; color: var(–yesil); }
.nav-logo-fallback span { color: var(–lacivert); }
.nav-menu { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-menu a { font-size: 0.88rem; font-weight: 700; color: var(–lacivert); text-decoration: none; letter-spacing: 0.3px; transition: color 0.2s; position: relative; }
.nav-menu a::after { content: ”; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(–yesil); transform: scaleX(0); transition: transform 0.25s; }
.nav-menu a:hover { color: var(–yesil); }
.nav-menu a:hover::after { transform: scaleX(1); }
.nav-bagis { background: var(–yesil) !important; color: var(–beyaz) !important; padding: 10px 24px !important; border-radius: 50px !important; font-weight: 800 !important; transition: background 0.2s, transform 0.2s !important; box-shadow: 0 4px 15px rgba(46,158,107,0.35); }
.nav-bagis::after { display: none !important; }
.nav-bagis:hover { background: var(–yesil-koyu) !important; transform: translateY(-1px) !important; }
/* ── HERO ── */
.hero { min-height: 100vh; padding-top: 70px; position: relative; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #0d2e1e 0%, #1a4a30 40%, #2e9e6b 100%); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,46,30,0.92) 0%, rgba(13,46,30,0.6) 55%, transparent 100%); }
.hero-content { position: relative; z-index: 2; padding: 80px 80px 80px 80px; max-width: 680px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(46,158,107,0.25); border: 1px solid rgba(46,158,107,0.5); color: #7ee8b8; font-size: 0.75rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: 7px 18px; border-radius: 50px; margin-bottom: 28px; animation: fadeUp 0.8s ease both; }
.hero-title { font-family: ‘Merriweather’, serif; font-size: clamp(2.4rem, 4vw, 3.8rem); font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 20px; animation: fadeUp 0.8s 0.1s ease both; }
.hero-title em { font-style: italic; color: #7ee8b8; }
.hero-desc { font-size: 1.05rem; font-weight: 400; color: rgba(255,255,255,0.78); line-height: 1.85; margin-bottom: 40px; animation: fadeUp 0.8s 0.2s ease both; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; animation: fadeUp 0.8s 0.3s ease both; }
.btn-yesil { background: var(–yesil); color: #fff; padding: 14px 34px; border-radius: 50px; font-weight: 800; font-size: 0.95rem; text-decoration: none; transition: all 0.2s; box-shadow: 0 6px 24px rgba(46,158,107,0.4); display: inline-block; }
.btn-yesil:hover { background: var(–yesil-koyu); transform: translateY(-2px); }
.btn-beyaz { background: rgba(255,255,255,0.12); color: #fff; padding: 14px 34px; border-radius: 50px; font-weight: 700; font-size: 0.95rem; text-decoration: none; border: 2px solid rgba(255,255,255,0.4); transition: all 0.2s; backdrop-filter: blur(4px); }
.btn-beyaz:hover { background: rgba(255,255,255,0.22); }
.hero-stats { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(255,255,255,0.07); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,0.1); animation: fadeUp 0.8s 0.45s ease both; }
.hero-stat { padding: 28px 40px; border-right: 1px solid rgba(255,255,255,0.1); text-align: center; }
.hero-stat:last-child { border-right: none; }
.hero-stat-num { font-family: ‘Merriweather’, serif; font-size: 2.2rem; font-weight: 700; color: #7ee8b8; margin-bottom: 4px; }
.hero-stat-label { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.6); letter-spacing: 0.5px; text-transform: uppercase; }
/* ── KAMPANYA ŞERİDİ ── */
.kampanya-serit { background: var(–lacivert); }
.kampanya-inner { display: flex; align-items: stretch; }
.kampanya-label { background: var(–yesil); color: #fff; padding: 24px 32px; font-size: 0.78rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; display: flex; align-items: center; }
.kampanya-content { flex: 1; padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.kampanya-title { font-size: 1rem; font-weight: 800; color: #fff; }
.kampanya-title span { color: #7ee8b8; }
.kampanya-prog { flex: 1; max-width: 360px; }
.kampanya-prog-bar { height: 8px; background: rgba(255,255,255,0.12); border-radius: 100px; overflow: hidden; margin-bottom: 8px; }
.kampanya-prog-fill { height: 100%; width: 68%; border-radius: 100px; background: linear-gradient(90deg, var(–yesil), #7ee8b8); animation: grow 1.5s 0.5s ease both; }
@keyframes grow { from { width: 0 } to { width: 68% } }
.kampanya-prog-info { display: flex; justify-content: space-between; font-size: 0.75rem; }
.kampanya-prog-info .topla { color: #7ee8b8; font-weight: 700; }
.kampanya-prog-info .hedef { color: rgba(255,255,255,0.45); }
.kampanya-btn { background: var(–yesil); color: #fff; padding: 10px 24px; border-radius: 50px; font-weight: 800; font-size: 0.82rem; text-decoration: none; white-space: nowrap; transition: background 0.2s; }
.kampanya-btn:hover { background: var(–yesil-koyu); }
/* ── BÖLÜM GENEL ── */
.bolum { padding: 88px 80px; }
.bolum-krem { background: var(–krem); }
.bolum-yesil { background: var(–yesil); }
.bolum-lacivert { background: var(–lacivert); }
.bolum-baslik-wrap { margin-bottom: 56px; }
.bolum-etiket { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(–yesil); margin-bottom: 12px; }
.bolum-etiket::before { content: ”; display: block; width: 20px; height: 3px; background: var(–yesil); border-radius: 2px; }
.bolum-etiket-beyaz { color: rgba(255,255,255,0.7); }
.bolum-etiket-beyaz::before { background: rgba(255,255,255,0.5); }
.bolum-h2 { font-family: ‘Merriweather’, serif; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 700; color: var(–lacivert); line-height: 1.3; }
.bolum-h2-beyaz { color: #fff; }
.bolum-alt { margin-top: 14px; font-size: 1rem; color: var(–text-soft); line-height: 1.8; max-width: 540px; }
.bolum-alt-beyaz { color: rgba(255,255,255,0.7); }
/* ── FAALİYETLER — Eşit grid, hover büyüme ── */
.faal-ust { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
.btn-kucuk { background: transparent; color: var(–yesil); padding: 10px 24px; border: 2px solid var(–yesil); border-radius: 6px; font-weight: 800; font-size: 0.82rem; text-decoration: none; white-space: nowrap; transition: all 0.2s; font-family: ‘Nunito’, sans-serif; }
.btn-kucuk:hover { background: var(–yesil); color: #fff; }
.faal-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.faal-item {
display: block;
text-decoration: none;
color: inherit;
background: var(–beyaz);
border: 1px solid var(–cizgi);
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.faal-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 48px rgba(46,158,107,0.15);
border-color: var(–yesil);
}
.faal-foto {
width: 100%;
height: 180px;
position: relative;
overflow: hidden;
}
.faal-foto-bg {
position: absolute; inset: 0;
transition: transform 0.4s ease;
}
.faal-item:hover .faal-foto-bg { transform: scale(1.07); }
.faal-foto-ph {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 8px;
color: rgba(255,255,255,0.3);
font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase;
}
.faal-foto-ph svg { width: 24px; opacity: 0.35; }
/* Her faaliyet farklı renk */
.faal-item:nth-child(1) .faal-foto-bg { background: linear-gradient(140deg, #1a5c38, #2e9e6b); }
.faal-item:nth-child(2) .faal-foto-bg { background: linear-gradient(140deg, #1a3d5c, #2a6a9e); }
.faal-item:nth-child(3) .faal-foto-bg { background: linear-gradient(140deg, #4a3010, #8a6020); }
.faal-item:nth-child(4) .faal-foto-bg { background: linear-gradient(140deg, #3a1010, #8a2020); }
.faal-item:nth-child(5) .faal-foto-bg { background: linear-gradient(140deg, #103a3a, #207a7a); }
.faal-item:nth-child(6) .faal-foto-bg { background: linear-gradient(140deg, #3a3010, #7a7020); }
.faal-item:nth-child(7) .faal-foto-bg { background: linear-gradient(140deg, #10104a, #2020a0); }
.faal-item:nth-child(8) .faal-foto-bg { background: linear-gradient(140deg, #2a1040, #6a2090); }
.faal-icerik {
padding: 22px 24px 26px;
border-top: 3px solid transparent;
transition: border-color 0.3s;
}
.faal-item:hover .faal-icerik { border-top-color: var(–yesil); }
.faal-kategori {
font-size: 0.65rem; font-weight: 800;
letter-spacing: 2px; text-transform: uppercase;
color: var(–yesil); margin-bottom: 8px;
}
.faal-icerik h4 {
font-family: ‘Merriweather’, serif;
font-size: 0.95rem; font-weight: 700;
color: var(–lacivert); margin-bottom: 8px;
line-height: 1.35;
}
.faal-icerik p {
font-size: 0.8rem; color: var(–text-soft);
line-height: 1.7;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.faal-devam {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 14px;
font-size: 0.75rem; font-weight: 800;
color: var(–yesil);
opacity: 0; transition: opacity 0.3s;
}
.faal-item:hover .faal-devam { opacity: 1; }
/* ── PROJELER ── */
.proj-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; }
.proj-ana { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.1); }
.proj-ana-foto { height: 280px; background: linear-gradient(135deg, #1e7a50, #2e9e6b); display: flex; align-items: center; justify-content: center; position: relative; }
.proj-ana-foto-ph { text-align: center; color: rgba(255,255,255,0.3); font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.proj-ana-foto-ph svg { width: 32px; opacity: 0.35; }
.proj-ana-etiket { position: absolute; top: 20px; left: 20px; background: var(–yesil); color: #fff; font-size: 0.67rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 16px; border-radius: 50px; }
.proj-ana-body { padding: 32px; }
.proj-ana-body h3 { font-family: ‘Merriweather’, serif; font-size: 1.4rem; font-weight: 700; color: var(–lacivert); margin-bottom: 10px; }
.proj-ana-body p { font-size: 0.88rem; color: var(–text-soft); line-height: 1.75; margin-bottom: 24px; }
.proj-prog-bar { background: var(–cizgi); border-radius: 100px; height: 10px; overflow: hidden; margin-bottom: 10px; }
.proj-prog-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(–yesil), #7ee8b8); animation: grow2 1.5s 0.3s ease both; }
@keyframes grow2 { from { width: 0 } to { width: 42% } }
.proj-prog-info { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 700; margin-bottom: 24px; }
.proj-prog-info .toplanan { color: var(–yesil); }
.proj-prog-info .hedef { color: var(–text-soft); font-weight: 400; }
.proj-liste { display: flex; flex-direction: column; gap: 16px; }
.proj-kart { background: #fff; border-radius: 16px; padding: 24px 28px; border: 2px solid var(–cizgi); display: flex; align-items: flex-start; gap: 16px; transition: all 0.25s; cursor: pointer; }
.proj-kart:hover { border-color: var(–yesil); box-shadow: 0 8px 24px rgba(46,158,107,0.12); transform: translateX(4px); }
.proj-kart-dot { width: 10px; height: 10px; border-radius: 50%; background: var(–yesil); flex-shrink: 0; margin-top: 6px; }
.proj-kart-dot.lacivert { background: var(–lacivert); }
.proj-kart-dot.acik { background: var(–yesil-acik); border: 2px solid var(–yesil); }
.proj-kart-tag { font-size: 0.67rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(–yesil); margin-bottom: 4px; }
.proj-kart h4 { font-size: 0.95rem; font-weight: 800; color: var(–lacivert); margin-bottom: 4px; }
.proj-kart p { font-size: 0.8rem; color: var(–text-soft); line-height: 1.6; }
/* ── BAĞIŞ ── */
.bagis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.bagis-sol p { font-size: 1rem; color: rgba(255,255,255,0.75); line-height: 1.85; margin-bottom: 32px; font-weight: 400; }
.guvence-listesi { display: flex; flex-direction: column; gap: 12px; }
.guvence-item { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; color: rgba(255,255,255,0.8); font-weight: 600; }
.guvence-item::before { content: ”; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); flex-shrink: 0; }
.bagis-form { background: #fff; border-radius: 24px; padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.bagis-form h3 { font-family: ‘Merriweather’, serif; font-size: 1.4rem; font-weight: 700; color: var(–lacivert); margin-bottom: 8px; }
.bagis-form-alt { font-size: 0.82rem; color: var(–text-soft); margin-bottom: 28px; }
.tutar-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
.tutar-btn { padding: 12px; background: var(–krem); border: 2px solid var(–cizgi); border-radius: 10px; font-size: 0.95rem; font-weight: 800; color: var(–lacivert); cursor: pointer; font-family: ‘Nunito’, sans-serif; transition: all 0.2s; text-align: center; }
.tutar-btn:hover, .tutar-btn.aktif { background: var(–yesil); border-color: var(–yesil); color: #fff; }
.form-alan { width: 100%; padding: 13px 16px; background: var(–krem); border: 2px solid var(–cizgi); border-radius: 10px; font-size: 0.9rem; font-family: ‘Nunito’, sans-serif; color: var(–text); margin-bottom: 12px; outline: none; transition: border-color 0.2s; }
.form-alan:focus { border-color: var(–yesil); }
.form-alan::placeholder { color: #aab; }
.form-gonder { width: 100%; padding: 15px; background: var(–yesil); color: #fff; border: none; border-radius: 50px; font-size: 1rem; font-weight: 800; font-family: ‘Nunito’, sans-serif; cursor: pointer; transition: all 0.2s; box-shadow: 0 6px 20px rgba(46,158,107,0.4); }
.form-gonder:hover { background: var(–yesil-koyu); transform: translateY(-2px); }
.form-guvenlik { text-align: center; font-size: 0.75rem; color: var(–text-soft); margin-top: 12px; }
/* ── HESAP NUMARALARI ── */
.hesap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px; }
.hesap-kart { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; padding: 24px 28px; transition: background 0.2s; }
.hesap-kart:hover { background: rgba(255,255,255,0.13); }
.hesap-banka { font-size: 0.72rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #7ee8b8; margin-bottom: 8px; }
.hesap-iban { font-size: 0.82rem; color: rgba(255,255,255,0.6); font-family: monospace; letter-spacing: 0.5px; margin-bottom: 4px; }
.hesap-ad { font-size: 0.75rem; color: rgba(255,255,255,0.35); }
/* ── FOOTER ── */
footer { background: #0b1f12; padding: 64px 80px 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-logo-wrap { margin-bottom: 18px; }
.footer-logo-text { font-family: ‘Merriweather’, serif; font-size: 1.2rem; font-weight: 700; color: var(–yesil); }
.footer-logo-text span { color: var(–lacivert-lt); }
.footer-aciklama { font-size: 0.84rem; color: rgba(255,255,255,0.38); line-height: 1.8; font-weight: 400; margin-bottom: 24px; }
.sosyal { display: flex; gap: 10px; }
.sosyal-link { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); text-decoration: none; font-size: 0.75rem; font-weight: 700; transition: all 0.2s; }
.sosyal-link:hover { border-color: var(–yesil); color: var(–yesil); background: rgba(46,158,107,0.1); }
.footer-col h5 { font-size: 0.7rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.28); margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 0.84rem; color: rgba(255,255,255,0.48); text-decoration: none; font-weight: 400; transition: color 0.2s; }
.footer-col ul a:hover { color: var(–yesil); }
.footer-alt { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: rgba(255,255,255,0.2); }
/* ── ANİMASYON ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.goster { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.goster.acik { opacity: 1; transform: translateY(0); }
/* ── MOBİL ── */
@media (max-width: 1100px) {
nav { padding: 0 20px; }
.hero-content { padding: 60px 24px 120px; }
.hero-stats { position: relative; grid-template-columns: 1fr; }
.bolum { padding: 60px 24px; }
.faal-grid { grid-template-columns: repeat(2,1fr); }
.proj-grid { grid-template-columns: 1fr; }
.bagis-grid { grid-template-columns: 1fr; gap: 40px; }
.hesap-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.kampanya-inner { flex-direction: column; }
.kampanya-content { flex-direction: column; align-items: flex-start; }
}
İHYA VAKFI
Hayra Vesile Ol
İnsana dokunan
her hayır
kalıcıdır.
Zekât, yetim desteği, eğitim bursu ve insani yardım faaliyetleriyle ihtiyaç sahiplerine ulaşıyor; toplumsal dönüşüme öncülük ediyoruz.
Acil Kampanya
Gazze’ye Umut Ol — Yardımlarınız hayat kurtarıyor
₺2.380.000 toplandı
Hedef: ₺3.500.000
Destek Ol →
Ne Yapıyoruz
Faaliyetlerimiz
İnsan onurunu merkeze alan çalışmalarımızla ihtiyaç sahiplerine el uzatıyoruz.
Tümünü Gör
<!–
–>
Proje Fotoğrafı
Öne Çıkan Proje
Yetim Köy Projesi
Yetim ve öksüz çocuklar için eğitim, barınma ve sosyal gelişim imkânı sunan kapsamlı bir yaşam alanı. Çocukların hem akademik hem de manevi gelişimlerini kalıcı biçimde destekliyoruz.
₺2.100.000 toplandı · %42
Hedef: ₺5.000.000
Projeye Destek Ver
Devam Ediyor
Su Kuyusu Kampanyası
Afrika’da temiz suya erişimi olmayan bölgelerde su kuyuları açıyoruz.
Planlama
Hafızlık Okulu
Gençlerimiz için yatılı Kur’an eğitim okulu projemiz planlanıyor.
Devam Ediyor
Engelli Destek Fonu
Engelli bireylerin tedavi ve cihaz masraflarını karşılıyoruz.
Yeni
Meslek Edindirme
Dar gelirli vatandaşlara ücretsiz meslek kursları açıyoruz.
Destek Ol
Her bağış bir hayat dokunuşudur.
Güvenli ödeme altyapımız ve tam şeffaflık ilkemizle bağışınızın doğru ellere ulaştığından emin olabilirsiniz.
Tüm bağışlar yasal güvence altındadır
Yıllık faaliyet raporları yayınlanır
Vergi muafiyetine sahip vakıf statüsü
256-bit SSL şifreli güvenli ödeme
Havale / EFT ile Bağış
Açıklama kısmına adınızı soyadınızı yazmayı unutmayın.
Ziraat Bankası
TR00 0000 0000 0000 0000 0000 00
Türkiye İhya Vakfı
Vakıfbank
TR00 0000 0000 0000 0000 0000 00
Türkiye İhya Vakfı
Halkbank
TR00 0000 0000 0000 0000 0000 00
Türkiye İhya Vakfı
function secTutar(btn) {
document.querySelectorAll(‘.tutar-btn’).forEach(b => b.classList.remove(‘aktif’));
btn.classList.add(‘aktif’);
}
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add(‘acik’); obs.unobserve(e.target); } });
}, { threshold: 0.07 });
document.querySelectorAll(‘.goster’).forEach(el => obs.observe(el));
–>
Site Title 