body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
}
a {
    transition: all 0.2s ease;
}
a:hover {
    opacity: 0.8;
}
.card {
    border: none;
    border-radius: 12px;
}
/* --- BREADCRUMB (SAYFA KONUMU) STİLLERİ --- */

/* Genel breadcrumb konteyneri */
.breadcrumb {
    background: none; /* Bootstrap'in varsayılan arkaplanını kaldırır */
    justify-content: center; /* Ortalanmasını sağlar */
    padding: 0;
    margin-top: 1rem;
    font-size: 0.95rem; /* Font boyutunu ayarlar */
}

/* Her bir breadcrumb öğesi */
.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8); /* Normal linkler için hafif soluk beyaz */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    font-weight: 500;
    transition: color 0.3s ease; /* Renk geçişini yumuşatır */
}

/* Linklerin üzerine gelindiğinde */
.breadcrumb-item a:hover {
    color: #fff; /* Tam beyaz yapar */
}

/* Aktif olan (mevcut) sayfa öğesi */
.breadcrumb-item.active {
    color: var(--brand-yellow); /* Marka kimliğinizdeki sarı renk */
    font-weight: 600; /* Daha belirgin olması için kalınlaştırır */
}

/* Öğeler arasındaki ayırıcı ('>' işareti) */
.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5); /* Ayırıcının rengini daha soluk yapar */
    content: ">"; /* İsterseniz '/' olarak da değiştirebilirsiniz */
    padding: 0 .8rem; /* Ayırıcıya boşluk verir */
}   


/* --- BANKA KARTI BAŞLIK ALANI --- */

/* Başlığın genel konteyneri */
.bank-header {
    background-color: #f8f9fa; /* Hafif kırık beyaz, nötr bir arkaplan */
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e9ecef; /* Başlığı gövdeden ayıran ince çizgi */
    display: flex;
    align-items: center; /* İçeriği dikey olarak ortalar */
    justify-content: center; /* İçeriği yatay olarak ortalar */
    min-height: 90px; /* Tüm kart başlıklarının aynı yükseklikte olmasını sağlar */
}

/* Banka logosu (resim) için stiller */
.bank-header img {
    max-height: 45px; /* Logoların çok büyük olmasını engeller */
    width: auto; /* Resmin oranını korur */
    max-width: 160px; /* Çok geniş logoların taşmasını engeller */
    object-fit: contain; /* Resmin bozulmadan sığmasını sağlar */
}

/* Logo olmadığında gösterilecek banka adı (metin) için stiller */
.bank-header h5 {
    color: var(--brand-blue); /* Marka ana rengi */
    font-weight: 600; /* Yarı kalın font */
    font-size: 1.2rem;
    margin: 0; /* Bootstrap'in varsayılan h5 margin'ini sıfırlar */
    text-transform: uppercase; /* Daha kurumsal bir görünüm için */
    letter-spacing: 0.5px; /* Harf aralığını hafifçe açar */
}


/*HEADER*/

 :root {
            --brand-blue: #233e5f;
            --brand-yellow: #e8a933;
            --brand-cream: #f6f2e9;
            --brand-lightblue: #6eb5d8;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #fdfdfd;
        }

        /* Üst bar */
        .header-top {
            background-color: var(--brand-blue);
            color: var(--brand-lightblue);
            font-size: 0.85rem;
        }
        .header-top a {
            color: var(--brand-lightblue);
            text-decoration: none;
            transition: 0.3s;
        }
        .header-top a:hover { color: #fff; }

        /* Navbar */
        .navbar-branded {
            background-color: var(--brand-blue);
            padding: 1rem 0;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: 0.3s ease;
        }
        .navbar-branded.scrolled {
            padding: 0.5rem 0;
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }

        .navbar-brand img {
            height: 55px;
            transition: 0.3s;
        }
        .navbar-brand:hover img {
            transform: scale(1.05);
        }
        .navbar-brand span {
            color: #fff;
            font-weight: 700;
            margin-left: 12px;
            font-size: 1.3rem;
        }

        .navbar-nav .nav-link {
            color: rgba(255,255,255,0.85) !important;
            padding: 0.6rem 1rem;
            font-weight: 500;
            position: relative;
        }
        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
            color: #fff !important;
        }
        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            left: 0; bottom: -5px;
            height: 2px;
            width: 100%;
            background: linear-gradient(90deg, var(--brand-yellow), var(--brand-lightblue));
            transform: scaleX(0);
            transition: 0.4s cubic-bezier(0.19,1,0.22,1);
        }
        .navbar-nav .nav-link:hover::after,
        .navbar-nav .nav-link.active::after {
            transform: scaleX(1);
        }

        .cta-button {
            background-color: var(--brand-yellow);
            color: var(--brand-blue) !important;
            font-weight: 700;
            border-radius: 50px;
            padding: 10px 26px;
            transition: all 0.3s ease;
        }
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(232,169,51,0.4);
        }

        .social-icons a {
            color: var(--brand-lightblue);
            margin-left: 10px;
            transition: 0.3s;
        }
        .social-icons a:hover { color: #fff; }




        /*BANKA HESAPLARI*/

        .page-header {
    padding: 80px 0;
    background: url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?q=80&w=1920&auto=format&fit=crop') no-repeat center;
    background-size: cover; position: relative; text-align: center; color: #fff;
}
.page-header::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(35, 62, 95, 0.85);
}
.page-section { padding: 80px 0; background-color: #f9f9f9; }

.bank-card {
    background: #fff; border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    border: 1px solid #e9ecef;
}
.bank-header {
    background: #f8f9fa; padding: 20px; text-align: center;
    border-bottom: 1px solid #e9ecef;
}
.bank-header img { max-height: 40px; width: auto; }
.bank-body { padding: 25px; }
.iban-info {
    background: #f6f2e9; border-radius: 8px; padding: 15px; position: relative;
}
.btn-copy {
    position: absolute; top: 50%; right: 15px; transform: translateY(-50%);
    background: var(--brand-blue); color: #fff; border: none;
    border-radius: 5px; padding: 8px 12px; cursor: pointer;
}
.btn-copy:hover { background: #1a2d45; }


/*hakkımızda*/

.page-header {
    padding: 90px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    text-align: center;
    color: #fff;
}
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(35, 62, 95, 0.85);
}
.page-header .container { position: relative; z-index: 2; }
.page-title { font-size: 3rem; font-weight: 700; }
.breadcrumb { background: none; justify-content: center; padding: 0; margin-top: 1rem; }
.breadcrumb-item a { color: rgba(255,255,255,0.8); text-decoration: none; }
.breadcrumb-item.active { color: var(--brand-yellow); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5); }

/* === İçerik === */
.page-section { padding: 80px 0; }

/* === Bilgi Kartları === */
.info-card {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(35, 62, 95, 0.12);
    border-color: var(--brand-yellow);
}
.info-icon {
    width: 70px; height: 70px; border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    margin-bottom: 20px;
}
.info-title { color: var(--brand-blue); font-weight: 600; margin-bottom: 15px; }
.info-card p { color: #6c757d; font-size: 0.95rem; flex-grow: 1; }

/* === Amaç Listesi === */
.checklist { list-style: none; padding-left: 0; }
.checklist li {
    font-size: 1.1rem;
    color: #343a40;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}
.checklist li i {
    color: var(--brand-yellow);
    font-size: 1.5rem;
    margin-right: 15px;
}

/*faaliyetler*/


/* Filtreleme Menüsü */
.filter-nav { list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:10px; padding:0; }
.filter-btn { background:#fff; border:1px solid #dee2e6; border-radius:50px; padding:8px 25px; font-weight:600; color:#6c757d; transition:all .3s; cursor:pointer; }
.filter-btn:hover { background:#f1f1f1; }
.filter-btn.active { background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }

/* Faaliyet Kartları */
.activity-card { background:#fff; border:none; border-radius:10px; box-shadow:0 5px 25px rgba(0,0,0,0.07); overflow:hidden; height:100%; display:flex; flex-direction:column; transition:all .3s; }
.activity-card:hover { transform:translateY(-8px); box-shadow:0 12px 35px rgba(35,62,95,0.15); }
.card-img-container { position:relative; }
.card-img-top { aspect-ratio:3/2; object-fit:cover; width:100%; }
.category-badge-activity { position:absolute; top:15px; left:15px; background:var(--brand-yellow); color:var(--brand-blue); padding:5px 12px; border-radius:50px; font-size:.8rem; font-weight:700; }
.activity-card .card-body { padding:25px; display:flex; flex-direction:column; flex-grow:1; }
.activity-card .card-title { color:var(--brand-blue); font-weight:600; }
.activity-card .card-text { color:#6c757d; flex-grow:1; margin-bottom:20px; }

/* Filtre Animasyonu */
.filter-item { transition:all 0.5s ease-in-out; }
.filter-item.hide { transform:scale(0.9); opacity:0; height:0; overflow:hidden; padding:0; margin:0; }



/*footer*/
.site-footer {
    background-color: var(--brand-blue);
    color: var(--text-light);
    font-size: 0.95rem;
}
.footer-logo {
    max-height: 80px;
    background-color: var(--brand-cream);
    border-radius: 12px;
    padding: 5px;
}
.footer-widget .widget-title {
    color: #fff;
    font-weight: 600;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.75rem;
}
.footer-widget .widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--brand-yellow);
}
.footer-links li {
    margin-bottom: 0.8rem;
}
.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}
.footer-links a i {
    font-size: 0.7rem;
    margin-right: 8px;
    opacity: 0;
    transition: all 0.3s ease;
}
.footer-links a:hover {
    color: var(--brand-yellow);
    transform: translateX(5px);
}
.footer-links a:hover i {
    opacity: 1;
}
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.85);
}
.footer-contact i {
    color: var(--brand-yellow);
    margin-top: 5px;
    font-size: 1.1rem;
}
.footer-social-icons {
    display: flex;
    gap: 1rem;
}
.footer-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}
.footer-social-icons a:hover {
    background-color: var(--brand-yellow);
    color: var(--brand-blue);
    transform: translateY(-3px);
}
.footer-bottom {
    background-color: #1a2d45;
    padding: 1.25rem 0;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1rem;
}


/*iletisim*/

.page-header {
    padding: 80px 0;
    background: url('https://images.unsplash.com/photo-1587560699334-cc426240169f?q=80&w=1920&auto=format&fit=crop') no-repeat center center;
    background-size: cover;
    position: relative;
    text-align: center; color: #fff;
}
.page-header::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(35, 62, 95, 0.80);
}
.page-header .container { position: relative; z-index: 2; }
.page-title { font-size: 3.5rem; font-weight: 700; }

.page-section { padding: 80px 0; }

.info-item {
    display: flex; gap: 20px; margin-bottom: 25px;
}
.info-icon {
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--brand-cream); color: var(--brand-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.info-text h5 { margin: 0 0 5px; color: var(--brand-blue); font-weight: 600; }
.info-text p, .info-text a { color: #6c757d; text-decoration: none; }

.contact-form-wrapper {
    background: #fff; padding: 40px; border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.contact-form-wrapper h4 { color: var(--brand-blue); font-weight: 600; }

.form-control { border-radius: 8px; padding: 12px; }
.form-control:focus {
    border-color: var(--brand-yellow);
    box-shadow: 0 0 0 0.25rem rgba(232,169,51,0.25);
}

.btn-submit {
    background: var(--brand-yellow); color: var(--brand-blue);
    border: none; border-radius: 50px; padding: 12px 35px;
    font-weight: 700; transition: all .3s;
}
.btn-submit:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(232,169,51,0.4); }

.map-section { line-height: 0; }


/*haberler*/

.page-header {
    padding:80px 0; background-size:cover; background-position:center; color:#fff; text-align:center; position:relative;
}
.page-header::before { content:""; position:absolute; inset:0; background:rgba(35,62,95,0.8); }
.page-header .container { position:relative; z-index:2; }
.page-title { font-size:3.5rem; font-weight:700; }

/* Öne çıkan */
.featured-news-card { background:#fff; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,0.08); overflow:hidden; margin-bottom:60px; }
.featured-news-card img { height:100%; object-fit:cover; }
.featured-news-card .card-title { color:var(--brand-blue); font-weight:600; }

/* Liste */
.news-list-item { background:#fff; border-radius:8px; box-shadow:0 5px 25px rgba(0,0,0,0.07); margin-bottom:30px; padding:20px; transition:all .3s; }
.news-list-item:hover { transform:translateY(-5px); box-shadow:0 12px 35px rgba(35,62,95,0.12); }
.news-image-wrapper img { width:100%; border-radius:6px; transition:transform .4s; }
.news-list-item:hover img { transform:scale(1.05); }
.news-meta { display:flex; gap:20px; font-size:.85rem; color:#888; margin-bottom:10px; }
.news-meta i { color:var(--brand-yellow); margin-right:5px; }
.news-content h4 a { color:var(--brand-blue); text-decoration:none; transition:.3s; }
.news-content h4 a:hover { color:var(--brand-yellow); }
.read-more-link { font-weight:600; color:var(--brand-blue); text-decoration:none; transition:.3s; }
.read-more-link:hover { color:var(--brand-yellow); }

/* Pagination */
.pagination .page-link { color:var(--brand-blue); font-weight:600; }
.pagination .page-link:hover { background:#f6f2e9; color:var(--brand-blue); }
.pagination .active .page-link { background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }

/*İNDEX*/

/* :root değişkenleri header'dan geldiği için burada tekrar tanımlamaya gerek yok */

/* 1. HERO SLIDER */
.hero-slider .carousel-item {
    height: 90vh;
    background-size: cover;
    background-position: center;
    position: relative;
}
.hero-slider .carousel-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Resim üzerine karartma efekti */
}
.hero-slider .carousel-caption {
    bottom: 50%;
    transform: translateY(50%);
    text-align: center;
    color: #fff;
}
.hero-slider .carousel-caption .display-4 {
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
.btn-hero {
    background-color: var(--green-bright);
    color: var(--green-dark);
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.btn-hero:hover {
    background-color: var(--green-vibrant);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Animasyonlar */
.animated { animation-duration: 1s; animation-fill-mode: both; }
.fadeInDown { animation-name: fadeInDown; }
.fadeInUp { animation-name: fadeInUp; animation-delay: 0.5s; }
.zoomIn { animation-name: zoomIn; animation-delay: 1s; }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -50%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 50%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 1; } }


/* GENEL BÖLÜM AYARLARI */
.section-padding { padding: 80px 0; }
.section-title {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.section-title h2 {
    margin: 0;
    font-weight: 700;
    color: var(--green-dark);
}
.section-title i {
    font-size: 2rem;
    color: var(--green-bright);
}
.section-title.text-center {
    flex-direction: column;
    gap: 10px;
}

/* 2. DUYURU & VEFAT ALANI */
.announcement-box, .vefaat-box {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    height: 100%;
}
.announcement-box ul li a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
}
.announcement-box ul li:last-child a { border-bottom: none; }
.announcement-box ul li a:hover {
    color: var(--green-medium);
    transform: translateX(5px);
}
.vefaat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
.vefaat-item:last-child { border-bottom: none; }
.vefaat-item h5 {
    margin-bottom: 5px;
    color: var(--green-dark);
    font-weight: 600;
}

/* 3. VİDEO BÖLÜMÜ */
.video-section {
    background-color: #f4f8f6;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
#videoSlider .carousel-inner {
    max-width: 800px;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

/* 4. HABERLER & BLOG */
.nav-tabs .nav-link {
    font-weight: 600;
    color: var(--green-medium);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 25px;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--green-dark);
    background-color: transparent;
    border-color: var(--green-bright);
}
.content-card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}
.content-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}
.card-img-container { position: relative; }
.card-img-top { aspect-ratio: 3/2; object-fit: cover; }
.category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(45deg, var(--green-bright), var(--green-vibrant));
    color: var(--green-dark);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}
.content-card .card-title {
    color: var(--green-dark);
    font-weight: 600;
}
.btn-theme-outline {
    border: 2px solid var(--green-medium);
    color: var(--green-medium);
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 50px;
    transition: all 0.3s ease;
}
.btn-theme-outline:hover {
    background-color: var(--green-medium);
    color: #fff;
}
.btn-theme-outline i { transition: transform 0.3s ease; }
.btn-theme-outline:hover i { transform: translateX(5px); }

/* 5. CTA BÖLÜMÜ */
.cta-section {
    padding: 100px 0;
    background: url('https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?q=80&w=1920&auto=format&fit=crop') no-repeat center center;
    background-size: cover;
    position: relative;
    color: #fff;
    text-align: center;
}
.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(27, 67, 50, 0.85); /* Yeşil overlay */
}
.cta-section .container { position: relative; z-index: 2; }
.cta-title {
    font-size: 2.8rem;
    font-weight: 700;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
.cta-text {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 20px auto 30px;
}


/*misyon-vizyon*/

.page-header{padding:80px 0;background:url('https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;position:relative;color:#fff;text-align:center;}
.page-header::before{content:'';position:absolute;inset:0;background:rgba(35,62,95,.8);}
.page-section{padding:40px 0;}
.mission-vision-section{padding:60px 0;}
.section-icon{font-size:10rem;color:var(--brand-blue);opacity:.08;}
.section-heading{font-weight:700;color:var(--brand-blue);margin-bottom:1.5rem;position:relative;padding-bottom:1rem;}
.section-heading::after{content:'';position:absolute;bottom:0;left:0;width:60px;height:4px;background:var(--brand-yellow);}
.visual-divider{height:200px;background:url('https://images.unsplash.com/photo-1620336237233-a8019c5b8b54?q=80&w=1920&auto=format&fit=crop') center/cover fixed;margin:40px 0;border-radius:10px;}
.value-card{background:#fff;border:1px solid #e9ecef;border-radius:10px;padding:30px;text-align:center;transition:.3s;height:100%;}
.value-card:hover{border-color:var(--brand-yellow);box-shadow:0 10px 30px rgba(35,62,95,.1);transform:translateY(-5px);}
.value-icon{font-size:2.5rem;color:var(--brand-blue);margin-bottom:15px;}
.value-title{font-weight:600;color:var(--brand-blue);}


/*resim galerisi*/

.page-header {
  padding: 80px 0;
  background: url('https://images.unsplash.com/photo-1517315003714-a071286bd328?q=80&w=1920&auto=format&fit=crop') no-repeat center;
  background-size: cover; position: relative; text-align: center; color: #fff;
}
.page-header::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(35, 62, 95, 0.85);
}
.page-section { padding: 80px 0; }

.filter-nav { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.filter-btn { border-radius: 50px; border: 1px solid #dee2e6; padding: 8px 25px; background: #fff; cursor: pointer; transition: all 0.3s ease; }
.filter-btn.active, .filter-btn:hover { background: var(--brand-blue); color: #fff; }

.gallery-item {
  position: relative; display: block; overflow: hidden;
  border-radius: 10px; box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}
.gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .4s; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(35,62,95,0.7); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center;
  opacity: 0; transition: opacity .4s;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.filter-item { transition: all 0.4s ease; }
.filter-item.hide { opacity: 0; transform: scale(0.9); pointer-events: none; height: 0; overflow: hidden; margin: 0; padding: 0; }
.gallery-overlay i { color: var(--brand-yellow); font-size: 2.5rem; margin-bottom: 8px; }

/*tarihce*/

.page-header {
    padding: 80px 0;
    background: url('https://images.unsplash.com/photo-1583265627959-b51fac878f8c?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
    position: relative; color: #fff; text-align: center;
}
.page-header::before {
    content:''; position:absolute; inset:0; background:rgba(35,62,95,0.75);
}
.page-title { font-size:3.5rem; font-weight:700; }
.page-section { padding:80px 0; }

.timeline { position:relative; padding:2rem 0; }
.timeline::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:3px; height:100%; background:#e9ecef; }
.timeline-item { position:relative; width:50%; margin-bottom:40px; }
.timeline-item:nth-child(odd){ left:0; padding-right:40px; text-align:right; }
.timeline-item:nth-child(even){ left:50%; padding-left:40px; }
.timeline-content {
  background:#fff; padding:25px; border-radius:8px;
  box-shadow:0 5px 25px rgba(0,0,0,0.07); border-top:4px solid var(--brand-blue);
}
.timeline-date {
  display:inline-block; background:var(--brand-yellow);
  color:var(--brand-blue); padding:4px 12px; border-radius:20px;
  font-weight:600; font-size:.9rem; margin-bottom:10px;
}
.timeline-title { font-weight:600; color:var(--brand-blue); margin-bottom:10px; }
.timeline-icon {
  position:absolute; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border-radius:50%;
  background:var(--brand-blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; border:3px solid #fff; box-shadow:0 0 0 3px var(--brand-blue);
}
.timeline-item:nth-child(odd) .timeline-icon { right:-25px; }
.timeline-item:nth-child(even) .timeline-icon { left:-25px; }

@media(max-width:991.98px){
  .timeline::before { left:25px; }
  .timeline-item { width:100%; padding-left:65px; padding-right:15px; }
  .timeline-item:nth-child(odd),.timeline-item:nth-child(even){ left:0;text-align:left; }
  .timeline-icon{ left:0!important; }
}

/*video galerisi*/


.page-header { padding: 80px 0; background: url('https://images.unsplash.com/photo-1516947683163-f8a49938c11a?q=80&w=1920&auto=format&fit=crop') center/cover; position: relative; color:#fff; text-align:center; }
.page-header::before { content:''; position:absolute; inset:0; background:rgba(35,62,95,0.85); }
.page-section { padding:80px 0; }
.filter-nav { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.filter-btn { border:1px solid #dee2e6; border-radius:50px; background:#fff; color:#6c757d; padding:8px 25px; cursor:pointer; transition:all .3s; }
.filter-btn:hover, .filter-btn.active { background:var(--brand-blue); color:#fff; }

.video-card { position:relative; display:block; overflow:hidden; border-radius:10px; box-shadow:0 5px 25px rgba(0,0,0,0.08); transition:all .4s; }
.video-card:hover { transform:translateY(-6px); box-shadow:0 15px 40px rgba(35,62,95,0.2); }
.video-card img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .4s; }
.video-card:hover img { transform:scale(1.05); }
.video-overlay { position:absolute; inset:0; background:rgba(35,62,95,0.7); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity .4s; }
.video-card:hover .video-overlay { opacity:1; }
.play-icon { width:70px; height:70px; background:var(--brand-yellow); color:var(--brand-blue); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin-bottom:15px; }
.video-title { font-weight:600; text-align:center; }
.filter-item { transition:all .4s ease; }
.filter-item.hide { opacity:0; transform:scale(0.9); height:0; overflow:hidden; margin:0; padding:0; }


/*yonetimkurulu*/


.page-header {
    padding: 80px 0;
    background: url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
    position: relative;
    color: #fff; text-align: center;
}
.page-header::before {
    content:''; position:absolute; inset:0; background:rgba(35,62,95,0.80);
}
.page-section { padding: 80px 0; background: #f9f9f9; }
.team-card {
    background:#fff; border-radius:10px; box-shadow:0 5px 25px rgba(0,0,0,0.07);
    padding:30px 20px; text-align:center; transition:all .3s ease; height:100%;
}
.team-card:hover { transform:translateY(-8px); box-shadow:0 12px 35px rgba(35,62,95,0.15); }
.team-photo { margin-bottom:20px; }
.team-photo img {
    width:150px; height:150px; border-radius:50%; object-fit:cover;
    border:5px solid #fff; box-shadow:0 0 0 4px var(--brand-blue);
}
.team-name { color:var(--brand-blue); font-weight:600; font-size:1.25rem; margin-bottom:5px; }
.team-title { color:var(--brand-yellow); font-weight:700; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.5px; margin:0; }
.team-social { display:flex; justify-content:center; gap:10px; }
.team-social a {
    width:35px; height:35px; display:inline-flex; align-items:center; justify-content:center;
    color:#adb5bd; border:1px solid #dee2e6; border-radius:50%; text-decoration:none; transition:all .3s;
}
.team-social a:hover { background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }

/*hemenbagisyapbutonu*/
/* --- ANA EYLEM BUTONU (CALL TO ACTION) - YEŞİL SINIF ADIYLA --- */

.cta-button-green {
    /* Genel Görünüm */
    display: inline-block; /* Butonun diğer elementlerle doğru hizalanması için */
    background-color: var(--brand-yellow); /* Vurgu rengi olan marka sarısı */
    color: var(--brand-blue) !important;   /* Metin rengi olarak marka mavisi (yüksek kontrast için) */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    
    /* Boyutlandırma ve Yazı Tipi */
    padding: 12px 35px; /* Butonun iç boşlukları (dikey ve yatay) */
    border-radius: 50px; /* Kenarları tam yuvarlak (hap şeklinde) yapar */
    font-weight: 700; /* Kalın yazı tipi */
    font-size: 1rem;
    text-align: center;
    
    /* Efektler ve Geçişler */
    border: none; /* Kenarlık olmaması */
    box-shadow: 0 4px 15px rgba(232, 169, 51, 0.3); /* Hafif bir sarı gölge */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Yumuşak geçiş efekti */
    cursor: pointer; /* Fare imlecini el işareti yapar */
}

/* --- Butonun Üzerine Gelindiğinde (Hover) --- */
.cta-button-green:hover {
    transform: translateY(-4px); /* Butonu hafifçe yukarı kaldırır */
    box-shadow: 0 8px 25px rgba(232, 169, 51, 0.4); /* Gölgeyi daha belirgin hale getirir */
}


/* --- GELİŞTİRİLMİŞ ANA EYLEM BUTONU (CTA) --- */

.cta-button {
    /* Temel Görünüm */
    background-color: var(--brand-yellow);
    color: var(--brand-blue) !important;
    border: none;
    border-radius: 50px;
    padding: 10px 28px;
    font-weight: 700;
    text-decoration: none;
    
    /* Efektler İçin Hazırlık */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease-in-out; /* Geçişi daha hızlı ve tepkisel yaptık */
    will-change: transform, box-shadow; /* Tarayıcıya animasyon olacağını bildirir (performans artışı) */
}

/* --- Buton Üzerine Gelindiğinde (HOVER) --- */
.cta-button:hover {
    transform: translateY(-3px); /* Hafifçe yukarı kalkma efekti */
    background-color: #f0b90b; /* Sarının biraz daha canlı bir tonu */
    box-shadow: 0 7px 25px rgba(35, 62, 95, 0.2); /* Daha derin ve gerçekçi bir gölge */
}

/* --- Butona Tıklandığında (ACTIVE) --- */
.cta-button:active {
    transform: translateY(-1px); /* Tıklama hissi için hafifçe aşağı indir */
    box-shadow: 0 3px 15px rgba(35, 62, 95, 0.15); /* Gölgeyi azalt */
}

/* --- Odaklanıldığında (Tab ile gezerken) --- */
.cta-button:focus {
    box-shadow: 0 0 0 3px rgba(232, 169, 51, 0.4); /* Erişilebilirlik için odaklanma halkası */
}
/*haberdetay*/

.page-header {
    padding: 80px 0;
    background: url('<?php echo htmlspecialchars($haber['resim'] ?? ''); ?>') no-repeat center center;
    background-size: cover; position: relative; text-align: center; color: #fff;
}
.page-header::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: linear-gradient(rgba(35, 62, 95, 0.95), rgba(35, 62, 95, 0.7));
}
.page-header .container { position: relative; z-index: 2; }
.page-title { font-size: 2.8rem; font-weight: 700; }

/* --- Ana İçerik Alanı --- */
.page-section { padding: 80px 0; }
.article-meta { color: #888; display: flex; gap: 20px; font-size: 0.9rem; }
.article-meta i { color: var(--brand-yellow); margin-right: 5px; }
.article-content { line-height: 1.8; color: #343a40; }
.article-content h1, .article-content h2, .article-content h3 { color: var(--brand-blue); font-weight: 600; margin-top: 1.5rem; }
.article-content p { margin-bottom: 1rem; }

/* --- Paylaşım Butonları --- */
.share-buttons h5 { color: var(--brand-blue); font-weight: 600; }
.btn-share {
    color: #fff; padding: 8px 15px; border-radius: 5px;
    text-decoration: none; margin-right: 10px; font-size: 0.9rem;
    transition: opacity 0.3s;
}
.btn-share:hover { opacity: 0.9; }
.btn-share.facebook { background-color: #1877F2; }
.btn-share.twitter { background-color: #1DA1F2; }
.btn-share.whatsapp { background-color: #25D366; }

/* --- Kenar Çubuğu (Sidebar) --- */
.sidebar-widget {
    background-color: #f8f9fa; padding: 25px; border-radius: 8px;
}
.widget-title {
    color: var(--brand-blue); font-weight: 600;
    margin-bottom: 20px; padding-bottom: 10px;
    border-bottom: 2px solid var(--brand-yellow);
}
.recent-news-list li { margin-bottom: 15px; }
.recent-news-item {
    display: flex; align-items: center; gap: 15px;
    text-decoration: none; color: #343a40;
    transition: color 0.3s;
}
.recent-news-item:hover { color: var(--brand-yellow); }
.recent-news-item img {
    width: 70px; height: 70px; object-fit: cover;
    border-radius: 6px; flex-shrink: 0;
}
.recent-news-item span { font-weight: 500; font-size: 0.95rem; }