/* ==========================================================================
   SİİDB KURUMSAL - TEMEL STİL DOSYASI (HEADER - HERO - FOOTER)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DEĞİŞKENLER VE SIFIRLAMA
   -------------------------------------------------------------------------- */
:root {
    --gsb-red: #E3001B;          /* GSB Kurumsal Kırmızısı */
    --gsb-red-dark: #c20017;     /* Hover Rengi */
    --gsb-dark: #111827;         /* Koyu Lacivert (Metin/Footer) */
    --gsb-gray: #f9fafb;         /* Açık Gri Zemin */
    --gsb-border: #e5e7eb;       /* Kenarlık Rengi */
    --font-main: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-main);
    color: var(--gsb-dark);
    background-color: #fff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    line-height: 1.6;
    /* Navbar sabit (fixed) olacağı için içeriği aşağı itiyoruz */
    padding-top: 100px; 
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; display: block; }

/* Başlık Standartları */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 1rem;
    color: var(--gsb-dark);
}

/* --------------------------------------------------------------------------
   2. HEADER / NAVBAR
   -------------------------------------------------------------------------- */
.navbar {
    position: fixed; /* Sayfa kaydıkça üstte kalır */
    top: 0; left: 0; right: 0;
    height: 100px; /* Sabit yükseklik */
    background: rgba(255, 255, 255, 0.98); /* Hafif transparan */
    backdrop-filter: blur(10px); /* Buzlu cam efekti */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Alt gölge */
    z-index: 1000; /* En üstte durması için */
    display: flex; 
    align-items: center;
    padding: 0; /* Bootstrap padding'ini sıfırla */
}

/* CSS/STYLE.CSS */

/* Logo Ayarları */
.navbar-brand img {
    height: 75px;       /* Yüksekliği sabitledik */
    width: auto;        /* Genişlik orantılı olarak ayarlansın */
    display: block;     /* Kaymaları önler */
    object-fit: contain; /* Görsel bozulmasın */
}

/* Mobilde logo çok büyükse biraz küçültelim */
@media (max-width: 768px) {
    .navbar-brand img {
        height: 65px;
    }
}

.nav-link {
    font-weight: 600;
    color: var(--gsb-dark) !important;
    font-size: 1rem;
    margin: 0 12px;
    padding: 10px 0;
    position: relative;
    transition: color 0.3s ease;
}

.nav-link:hover, .nav-link.active {
    color: var(--gsb-red) !important;
}

/* MENÜ OK İKONU EFEKTİ */
.nav-link i.bi-chevron-down {
    transition: transform 0.3s ease;
}

/* Menü açıldığında (show sınıfı geldiğinde) oku ters çevir */
.nav-item.dropdown .nav-link.show i.bi-chevron-down {
    transform: rotate(180deg);
}

/* Kırmızı Buton Stili (Navbar vb. için) */
.btn-gsb {
    background: var(--gsb-red); 
    color: white !important;
    border-radius: 50px; 
    padding: 12px 30px; 
    font-weight: 700;
    border: 2px solid var(--gsb-red); 
    line-height: 1;
    display: inline-block;
}

.btn-gsb:hover {
    background: transparent; 
    color: var(--gsb-red) !important;
}

/* --------------------------------------------------------------------------
   3. HERO SECTION
   -------------------------------------------------------------------------- */
.hero-section-split {
    padding: 80px 0;
    /* Hafif gri geçişli arka plan */
    background: linear-gradient(to right, #ffffff 50%, #f3f4f8 50%);
    min-height: 650px;
    display: flex; align-items: center;
    overflow: hidden; /* Dışarı taşan animasyonlar sayfayı genişletmesin */
}

/* Sol Taraf: Metinler */
.hero-content-wrapper {
    position: relative;
    z-index: 2; /* Metin resmin altında kalmasın */
    padding-right: 20px;
}

.hero-badge {
    background: rgba(227, 0, 27, 0.08); color: var(--gsb-red);
    padding: 8px 16px; border-radius: 30px; font-weight: 700; font-size: 0.85rem;
    margin-bottom: 20px; display: inline-block; border: 1px solid rgba(227, 0, 27, 0.1);
}

.hero-title {
    font-size: 3.8rem; font-weight: 800; line-height: 1.1;
    letter-spacing: -1.5px; margin-bottom: 25px;
    color: var(--gsb-dark);
}

.hero-text {
    font-size: 1.15rem; color: #4b5563; margin-bottom: 35px;
    max-width: 550px; line-height: 1.7;
}

/* Sağ Taraf: Taşan Slider Container */
.hero-image-container {
    position: relative;
    z-index: 1;
    perspective: 1000px;
    /* KRİTİK AYAR: Resmi sola (metne doğru) taşırır */
    margin-left: -60px; 
    width: calc(100% + 60px); /* Genişliği artırarak dengeledik */
}

/* Slider Kartı */
.hero-carousel-card {
    border-radius: 20px;
    overflow: hidden;
    /* Hafif 3D Duruş */
    transform: rotateY(-6deg) translateX(20px); 
    box-shadow: -40px 40px 70px rgba(0, 0, 0, 0.12);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s ease;
    background: #fff;
    position: relative;
}

/* Hover Efekti: Resim düzleşir ve netleşir */
.hero-image-container:hover .hero-carousel-card {
    transform: rotateY(0deg) translateX(0);
    box-shadow: -20px 20px 50px rgba(0, 0, 0, 0.08);
}

/* Resim Ayarları */
.carousel-item { position: relative; }
.carousel-item::after {
    /* Resmin üzerine hafif siyah degrade (Yazı okunabilirliği değil estetik için) */
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    z-index: 1;
}

.carousel-item img {
    width: 100%;
    height: initial;
    object-fit: cover;
}

/* --- KİBAR OKLAR (NAVIGASYON) --- */
.hero-nav-container {
    position: absolute;
    bottom: 0;
    right: 0;       /* Sol yerine Sağ tarafa yasla */
    left: auto;     /* Sol ayarını sıfırla */
    z-index: 10;
    background: #fff;
    padding: 15px 20px;
    
    /* Köşe yuvarlama yönünü değiştirdik: Sol üst köşe yuvarlak olsun */
    border-top-left-radius: 20px; 
    border-top-right-radius: 0;   
}

/* Mobilde yine ortada kalsın (daha iyi kullanım için) */
@media (max-width: 768px) {
    .hero-nav-container {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 30px; /* Mobilde tam yuvarlak kapsül */
        display: none;
    }
}

.hero-slider-btn {
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 50%; /* Tam yuvarlak */
    color: var(--gsb-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    /* Bootstrap defaultlarını sıfırla */
    opacity: 1; position: static; margin: 0;
}

.hero-slider-btn:hover {
    background: var(--gsb-red);
    border-color: var(--gsb-red);
    color: white;
    transform: scale(1.05);
}

.hero-slider-btn:active { transform: scale(0.95); }

/* Okları yan yana dizmek için container */
.slider-controls {
    display: flex;
    gap: 10px;
}

/* MOBİL UYUMLULUK */
@media (max-width: 768px) {
    .hero-section-split { 
        padding: 40px 0 60px 0; /* Üstten biraz kıstık, alttan açtık */
        text-align: center; 
        display: block;
        background: #fff; 
    }
    
    .hero-content-wrapper { 
        padding-right: 0; 
        margin-bottom: 0; /* Yazı artık altta, ekstra margini kaldırdık */
        margin-top: 30px; /* Resimle yazı arasına boşluk */
    }
    
    .hero-image-container { 
        margin-left: 0; 
        width: 100%; 
        perspective: none;
        /* Resim artık üstte olduğu için altına boşluk gerekmez, wrapper margin-top ile hallettik */
    }
    
    .hero-carousel-card { 
        transform: none; 
        box-shadow: 0 10px 25px rgba(0,0,0,0.08); 
    }
    
    .hero-image-container:hover .hero-carousel-card { transform: none; }
    
    /* Mobilde okları resmin içine al */
    .hero-nav-container {
        bottom: 15px; 
        left: 50%; 
        transform: translateX(-50%);
        background: rgba(255,255,255,0.95);
        border-radius: 50px;
        padding: 6px 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .hero-slider-btn {
        width: 35px; height: 35px; /* Mobilde butonları bir tık küçültelim */
        font-size: 0.9rem;
    }
    
    /* Mobilde başlığı biraz küçültelim */
    .hero-title {
        font-size: 2.5rem; 
    }
}

/* --------------------------------------------------------------------------
   PREMIUM MEGA FOOTER TASARIMI (V2 - NO NEWSLETTER)
   -------------------------------------------------------------------------- */
#footer-placeholder {
    margin-top: auto;
    width: 100%;
}

.site-footer-mega {
    background-color: #0b1120; /* Deep Midnight Blue */
    color: #94a3b8; /* Cool Gray Text */
    font-size: 0.95rem;
    position: relative;
    border-top: 5px solid var(--gsb-red);
    overflow: hidden;
}

/* --- Yeni Arka Plan Deseni (Modern Tech/Abstract) --- */
.site-footer-mega::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* İnce Noktalı Doku (Dot Matrix Pattern) */
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px);
    background-size: 30px 30px; /* Nokta sıklığı */
    opacity: 0.6;
    pointer-events: none;
}

/* Sağ alt köşeye dekoratif kırmızı parlama efekti */
.site-footer-mega::after {
    content: '';
    position: absolute;
    bottom: -100px; right: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(227, 0, 27, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* --- Widget Alanı --- */
.footer-widgets {
    padding: 80px 0 60px;
    position: relative;
    z-index: 2; /* Desenin üstünde olsun */
}

/* Logo */
.footer-logo {
    max-width: 180px;
    filter: brightness(0) invert(1); /* Beyaz yap */
    opacity: 0.95;
}

/* Başlıklar */
.widget-title {
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
    letter-spacing: -0.5px;
}

/* Başlık Altı Kırmızı Çizgi */
.widget-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 50px; height: 3px;
    background: var(--gsb-red);
    border-radius: 2px;
}

/* --- Link Listeleri (Ok İşaretli) --- */
.footer-links-arrow li {
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    padding-bottom: 12px;
}
.footer-links-arrow li:last-child { border: none; padding-bottom: 0; }

.footer-links-arrow a {
    color: #94a3b8;
    display: flex; align-items: center;
    transition: all 0.3s ease;
    font-weight: 500;
}

/* Link Hover: Sağa kayma + Kırmızı Ok */
.footer-links-arrow a::before {
    content: '\F285'; /* Bootstrap Icon Chevron Right */
    font-family: 'bootstrap-icons';
    margin-right: 10px;
    font-size: 0.75rem;
    color: var(--gsb-red);
    transition: 0.3s;
    opacity: 0.7;
}

.footer-links-arrow a:hover {
    color: white;
    padding-left: 8px;
}
.footer-links-arrow a:hover::before { opacity: 1; }

/* --- İletişim Alanı --- */
.contact-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 20px;
}

.contact-row {
    display: flex; gap: 15px;
    margin-bottom: 18px;
    align-items: flex-start;
}
.contact-row:last-child { margin-bottom: 0; }

.contact-row i {
    color: var(--gsb-red);
    font-size: 1.1rem;
    background: rgba(227, 0, 27, 0.1);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    margin-top: 2px;
}
.contact-row span { font-size: 0.9rem; line-height: 1.5; color: #cbd5e1; }
.contact-row .phone { font-size: 1.3rem; font-weight: 700; color: white; letter-spacing: 0.5px; }

/* --- Sosyal Medya (Renkli Hover) --- */
.social-icons-circle {
    display: flex; gap: 12px;
}
.social-icons-circle a {
    width: 45px; height: 45px;
    background: rgba(255,255,255,0.05);
    color: white;
    border-radius: 50%; /* Tam yuvarlak */
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
    border: 1px solid rgba(255,255,255,0.05);
    font-size: 1.1rem;
}

/* Her ikon için özel hover rengi (Opsiyonel, şık durur) */
.social-icons-circle a:hover { transform: translateY(-5px); color: white; border-color: transparent; }
.social-icons-circle a.twitter:hover { background: #1DA1F2; }
.social-icons-circle a.facebook:hover { background: #1877F2; }
.social-icons-circle a.instagram:hover { background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); }
.social-icons-circle a.youtube:hover { background: #FF0000; }

/* --- Alt Bar (Copyright) --- */
.footer-bottom-bar {
    background: rgba(0,0,0,0.3);
    padding: 25px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.85rem;
    position: relative;
    z-index: 2;
}

.footer-bottom-links {
    display: inline-flex; gap: 25px;
}
.footer-bottom-links li { display: inline; }
.footer-bottom-links a { color: #64748b; transition: 0.2s; }
.footer-bottom-links a:hover { color: white; text-decoration: underline; }

/* Mobil Uyum */
@media (max-width: 768px) {
    .footer-bottom-links {
        display: flex; flex-wrap: wrap; justify-content: center; margin-top: 15px;
    }
    .site-footer-mega::after { display: none; } /* Mobilde efekti kapat */
}

/* --------------------------------------------------------------------------
   5. MOBİL UYUMLULUK (RESPONSIVE)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Navbar daralınca body paddingi küçült */
    body { padding-top: 90px; }
    
    /* Hero Alanı Mobilde Düzleşir */
    .hero-section-split {
        background: #fff; /* Gradient kalkar */
        padding-top: 40px; 
        text-align: center;
        display: block; /* Alt alta dizersin */
        min-height: auto;
    }
    
    .hero-text { margin: 0 auto 30px auto; }
    
    .hero-image-container { transform: none; }
    .hero-image-container img { height: initial; transform: none; } /* 3D efekt mobilde iptal */
    
    .hero-title { font-size: 2.5rem; }
}

/* =========================================
   GÖREV VE YETKİLER (MİSYON) BÖLÜMÜ
   ========================================= */
.mission-section {
    padding: 100px 0;
    background-color: #fff;
    position: relative;
}

.section-header {
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--gsb-dark);
    letter-spacing: -1px;
    margin-bottom: 15px;
}

.section-line {
    width: 60px;
    height: 4px;
    background: var(--gsb-red);
    margin: 0 auto;
    border-radius: 2px;
}

/* Görev Kartları */
.mission-card {
    background: #fff;
    border: 1px solid var(--gsb-border);
    border-radius: 16px;
    padding: 35px 25px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Hover Efekti: Kart yukarı kalkar ve gölge artar */
.mission-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

/* Kartın altına ince kırmızı çizgi efekti */
.mission-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; width: 0%; height: 4px;
    background: var(--gsb-red);
    transition: 0.4s ease;
}
.mission-card:hover::after { width: 100%; }

/* İkon Kutusu */
.mission-icon {
    width: 70px;
    height: 70px;
    background: rgba(227, 0, 27, 0.06); /* Çok açık kırmızı zemin */
    color: var(--gsb-red);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 25px;
    transition: 0.4s;
}

.mission-card:hover .mission-icon {
    background: var(--gsb-red);
    color: white;
    transform: rotateY(180deg); /* İkon döner */
}

.mission-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--gsb-dark);
}

.mission-text {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 0;
}

/* =========================================
   GÜNCEL GELİŞMELER (HABER & ETKİNLİK)
   ========================================= */
.news-section {
    padding: 100px 0;
    background-color: #f8f9fa; /* Üstteki beyaz bölümden ayrışsın diye hafif gri */
    position: relative;
}

.news-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
    flex-wrap: wrap;
    gap: 20px;
}

/* =========================================
   ANASAYFA DİNAMİK HABER KARTLARI (JS)
   ========================================= */

.news-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%; /* Kartları eşit boyda tutar */
    display: flex;
    flex-direction: column;
    border: 1px solid #f1f5f9;
}

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.news-img-wrapper {
    height: 240px;
    position: relative;
    overflow: hidden;
}

.news-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-img-wrapper img {
    transform: scale(1.1);
}

/* Kategori Etiketi (Sol Üst) */
.news-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Etiket Renkleri (JSON'dan gelen classlara göre) */
.tag-haber { color: #fff; background: var(--gsb-red); }
.tag-etkinlik { color: #fff; background: #0d6efd; }
.tag-proje { color: #fff; background: #198754; }

.news-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-date {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 10px;
    font-weight: 500;
}

.news-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gsb-dark);
    margin-bottom: 15px;
    line-height: 1.4;
}

.news-desc {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 20px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 3 satırdan sonrasını ... yap */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-link {
    margin-top: auto;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--gsb-red);
    text-decoration: none;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.news-link:hover {
    color: var(--gsb-dark);
    gap: 10px;
}

/* =========================================
   ALT SAYFA & SIDEBAR
   ========================================= */

/* 1. Sayfa Başlığı Bandı */
.page-header-wrapper {
    background: #f8f9fa;
    padding: 70px 0;
    border-bottom: 1px solid var(--gsb-border);
    position: relative;
    overflow: hidden;
}
.page-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--gsb-dark);
    margin-bottom: 15px;
    letter-spacing: -1.5px;
}
.breadcrumb-custom {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    background: white;
    padding: 8px 20px;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #eee;
    color: #6b7280;
}
.breadcrumb-custom a { color: var(--gsb-dark); font-weight: 600; }
.breadcrumb-custom a:hover { color: var(--gsb-red); }
.breadcrumb-custom .active { color: var(--gsb-red); font-weight: 700; }

/* 2. Sidebar (Modern Kart Menü) */
/* Sticky kaldırıldı, tasarım güzelleştirildi */
.sidebar-menu-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.sidebar-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--gsb-dark);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f3f4f6;
    letter-spacing: -0.5px;
}

.modern-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 25px;
    margin-bottom: 12px;
    background-color: #f9fafb; /* Hafif gri zemin */
    color: var(--gsb-dark);
    font-weight: 600;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.modern-sidebar-link:hover {
    background-color: #fff;
    border-color: var(--gsb-red);
    color: var(--gsb-red);
    transform: translateX(5px); /* Hafif sağa kayma */
    
}

/* Aktif Link Tasarımı (Kırmızı Dolu) */
.modern-sidebar-link.active {
    background: var(--gsb-red);
    color: white;
    
}
.modern-sidebar-link.active i { color: white; }

/* 3. İçerik Alanı (Resimsiz, Tipografik) */
.page-content-wrapper { padding: 80px 0 120px; }

/* Öne Çıkarılan Giriş Yazısı */
.lead-text-box {
    border-left: 5px solid var(--gsb-red);
    padding-left: 30px;
    margin-bottom: 40px;
}
.lead-text {
    font-size: 1.35rem;
    line-height: 1.6;
    color: var(--gsb-dark);
    font-weight: 500;
}

/* Paragraf Stilleri */
.content-body p {
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 25px;
}

/* İkonlu Özellik Kutuları (Grid) */
.feature-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 25px;
    border-radius: 16px;
    height: 100%;
    transition: 0.3s;
}
.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    border-color: var(--gsb-red);
}
.fb-icon {
    width: 50px; height: 50px;
    background: rgba(227, 0, 27, 0.1);
    color: var(--gsb-red);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.fb-title { font-weight: 700; margin-bottom: 10px; color: var(--gsb-dark); }
.fb-text { font-size: 0.9rem; color: #6b7280; line-height: 1.5; margin: 0; }

/* =========================================
   DAİRE BAŞKANI SAYFASI ÖZEL STİLLERİ
   ========================================= */

/* 1. Profil Kartı (Üst Kısım) */
.president-profile-card {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
}

.president-img-frame {
    width: 220px;
    height: 280px; /* Dikey Portre Oranı */
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    position: relative;
}

.president-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.president-img-frame:hover img {
    transform: scale(1.05);
}

.president-info h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gsb-dark);
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.president-title {
    font-size: 1.1rem;
    color: var(--gsb-red);
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Sosyal Medya İkonları (Profil Altı) */
.president-social a {
    width: 38px; height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #6b7280;
    margin-right: 8px;
    transition: 0.3s;
}
.president-social a:hover {
    background: var(--gsb-red);
    color: white;
    border-color: var(--gsb-red);
}

/* 2. Başkanın Mesajı (Alıntı Kutusu) */
.president-quote-box {
    background-color: #fcfcfc;
    border-left: 5px solid var(--gsb-red);
    padding: 30px;
    margin: 30px 0;
    border-radius: 0 12px 12px 0;
    position: relative;
}

.president-quote-box i {
    font-size: 2rem;
    color: rgba(227, 0, 27, 0.15); /* Silik tırnak işareti */
    position: absolute;
    top: 20px;
    left: 20px;
}

.quote-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gsb-dark);
    font-family: 'Playfair Display', serif; /* Tırnaklı font estetiği */
    line-height: 1.6;
    margin-bottom: 0;
    padding-left: 40px; /* İkon için boşluk */
    z-index: 2;
    position: relative;
}

/* 3. Mobil Uyum */
@media (max-width: 768px) {
    .president-profile-card {
        flex-direction: column;
        text-align: center;
    }
    .president-img-frame {
        width: 180px;
        height: 220px;
        margin: 0 auto;
    }
}

/* GÖRSEL İYİLEŞTİRMELERİ */
.cursor-pointer {
    cursor: zoom-in; /* Üzerine gelince büyüteç çıksın */
    transition: transform 0.3s ease;
}
.cursor-pointer:hover {
    transform: scale(1.02); /* Hafifçe büyüsün */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* Modal Arka Planını Koyulaştır */
.modal-backdrop.show {
    opacity: 0.85;
}

/* =========================================
   MEVZUAT SAYFASI STİLLERİ
   ========================================= */

/* Kanun Başlığı Kutusu */
.legislation-header {
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.law-title {
    color: var(--gsb-red);
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 10px;
}
.law-subtitle {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gsb-dark);
}

/* Kanun Maddeleri Listesi */
.legislation-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.legislation-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    font-size: 1.05rem;
    color: #374151;
    line-height: 1.6;
}
.legislation-list li span.item-letter {
    font-weight: 700;
    color: var(--gsb-dark);
    min-width: 35px; /* Harf alanı genişliği */
    margin-right: 10px;
}

/* PDF İndirme Butonları (Kırmızı Kartlar) */
.pdf-download-card {
    display: flex;
    align-items: center;
    background-color: var(--gsb-red); /* Görseldeki Kırmızı */
    color: white;
    padding: 20px 25px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(227, 0, 27, 0.2);
}

/* Arka plana silik ikon efekti */

.pdf-icon-wrapper {
    width: 50px; height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-right: 20px;
    flex-shrink: 0;
}

.pdf-info h6 {
    font-weight: 700;
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    text-transform: uppercase;
    color: #fff;
}
.pdf-info span {
    font-size: 0.8rem;
    opacity: 0.9;
    font-weight: 400;
}

/* Hover Efekti */
.pdf-download-card:hover {
    transform: translateY(-5px);
    background-color: #c90018; /* Biraz daha koyu kırmızı */
    color: white;
}
.pdf-download-card:hover::after {
    transform: rotate(0deg) scale(1.1);
    opacity: 0.2;
}

/* =========================================
   ŞUBELERİMİZ SAYFASI
   ========================================= */

.branch-unit-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: 0.3s;
    border-left: 5px solid var(--gsb-red); /* Sol taraf kırmızı çizgi */
}

.branch-unit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.branch-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.branch-icon-box {
    width: 50px; height: 50px;
    background: rgba(227, 0, 27, 0.1);
    color: var(--gsb-red);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.branch-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--gsb-dark);
    margin: 0;
}

.branch-desc {
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 0;
}

/* Özel Liste Tasarımı (Alt Maddeler İçin) */
.branch-sub-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.branch-sub-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: #4b5563;
    line-height: 1.6;
}

.branch-sub-list li::before {
    content: '\F26B'; /* Bootstrap check icon */
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0; top: 2px;
    color: var(--gsb-red);
    font-weight: bold;
}

.branch-highlight {
    font-weight: 700;
    color: var(--gsb-dark);
}

/* =========================================
   İLETİŞİM SAYFASI
   ========================================= */

/* İletişim Bilgi Kartları (Üst Kısım) */
.contact-info-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: 0.3s;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.contact-info-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: var(--gsb-red);
}

.contact-icon {
    width: 70px; height: 70px;
    background: rgba(227, 0, 27, 0.08);
    color: var(--gsb-red);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 20px;
    transition: 0.3s;
}

.contact-info-card:hover .contact-icon {
    background: var(--gsb-red);
    color: white;
}

.contact-label {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #9ca3af;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.contact-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gsb-dark);
    line-height: 1.5;
}
.contact-value a { color: var(--gsb-dark); text-decoration: none; transition: 0.3s; }
.contact-value a:hover { color: var(--gsb-red); }


/* Harita ve Form Alanı */
.map-container {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: 100%;
    min-height: 450px;
    border: 1px solid #eee;
}

.contact-form-wrapper {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--gsb-red);
    font-weight: 600;
}
.form-control:focus {
    border-color: var(--gsb-red);
    box-shadow: 0 0 0 0.25rem rgba(227, 0, 27, 0.1);
}

/* =========================================
   HABERLER SAYFASI STİLLERİ
   ========================================= */

/* Filtreleme ve Arama Çubuğu */
.news-filter-bar {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.search-input-group .input-group-text {
    background: #fff;
    border-right: none;
    color: #9ca3af;
}
.search-input-group .form-control {
    border-left: none;
}
.search-input-group .form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}

/* Haber Grid Kartı (Listeleme İçin) */
.news-grid-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%; /* Kartları eşit boyda tutar */
    display: flex;
    flex-direction: column;
}

.news-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: var(--gsb-red);
}

.ng-img-wrap {
    height: 220px;
    position: relative;
    overflow: hidden;
}
.ng-img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}
.news-grid-card:hover .ng-img-wrap img {
    transform: scale(1.1); /* Resim büyür */
}

.ng-date-badge {
    position: absolute;
    top: 15px; left: 15px;
    background: rgba(255, 255, 255, 0.95);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gsb-dark);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.ng-date-badge i { color: var(--gsb-red); margin-right: 5px; }

.ng-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ng-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gsb-dark);
    margin-bottom: 15px;
    line-height: 1.4;
    transition: 0.3s;
}
.news-grid-card:hover .ng-title { color: var(--gsb-red); }

.ng-desc {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 20px;
    line-height: 1.6;
    /* 3 satır sınırlaması */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ng-link {
    margin-top: auto;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gsb-red);
    text-decoration: none;
    display: flex; align-items: center; gap: 5px;
}
.ng-link:hover { gap: 10px; } /* Ok kayma efekti */

/* Sayfalama (Pagination) */
.custom-pagination .page-link {
    color: var(--gsb-dark);
    border: none;
    margin: 0 5px;
    border-radius: 8px !important;
    font-weight: 600;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
}
.custom-pagination .page-link:hover {
    background-color: #f3f4f6;
    color: var(--gsb-red);
}
.custom-pagination .page-item.active .page-link {
    background-color: var(--gsb-red);
    color: white;
    box-shadow: 0 5px 15px rgba(227, 0, 27, 0.3);
}

/* PAYLAŞIM BUTONLARI */
.btn-share {
    width: 45px;       /* Sabit genişlik */
    height: 45px;      /* Sabit yükseklik */
    display: flex;     /* İkonu ortalamak için */
    align-items: center;
    justify-content: center;
    border-radius: 50% !important; /* Tam daire */
    transition: all 0.3s ease;
    text-decoration: none; /* Link alt çizgisini kaldır */
}

.btn-share:hover {
    transform: translateY(-3px); /* Hafif yukarı kalksın */
    background-color: var(--gsb-dark);
    color: white;
    border-color: var(--gsb-dark);
}

/* =========================================
   PROJE KARTLARI (HABER TARZI)
   ========================================= */

/* Logo Alanı (Haber resminden farkı: Resmi kesmez, ortalar) */
.project-logo-wrapper {
    height: 220px;            /* Yükseklik */
    background-color: #f8f9fa; /* Açık gri arka plan */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;            /* Logonun kenarlara yapışmaması için boşluk */
    border-bottom: 1px solid #eee;
    overflow: hidden;
}

.project-logo-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;      /* Logoyu sığdır */
    transition: transform 0.5s ease;
}

/* Kartın üzerine gelince logo hafif büyüsün */
.news-card:hover .project-logo-wrapper img {
    transform: scale(1.1);
}

/* TAMAMLANAN PROJELER (SOLUK GÖRÜNÜM) */
.project-completed {
    filter: grayscale(100%); /* Siyah beyaz yap */
    opacity: 0.7;            /* Şeffaflaştır */
    transition: 0.3s;
}

/* Üzerine gelince canlansın */
.project-completed:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* =========================================
   YENİ PROJE DETAY TASARIMI
   ========================================= */

/* Detay Header Alanı */
.project-header-bg {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 60px 0;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 40px;
}

/* Sol Taraftaki Sabit Kart (Proje Künyesi) */
.project-sidebar-card {
    position: sticky;
    top: 100px; /* Navbar'ın altında kalacak şekilde */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    z-index: 10;
}

.project-detail-logo {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    object-fit: contain;
    margin-bottom: 20px;
}

.project-status-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.status-active {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
    border: 1px solid rgba(25, 135, 84, 0.2);
}

.status-completed {
    background-color: rgba(108, 117, 125, 0.1);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.2);
}

.info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #9ca3af;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.info-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gsb-dark);
    margin-bottom: 20px;
}

/* Sağ Taraftaki İçerik Alanı */
.project-content-area {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #374151;
}

.project-content-area h3, 
.project-content-area h4 {
    font-weight: 700;
    color: var(--gsb-dark);
    margin-top: 30px;
    margin-bottom: 15px;
}


/* =========================================
   PROJELER TAB TASARIMI (YENİ - %100 GENİŞLİK)
   ========================================= */

/* Ana Kapsayıcı */
.custom-tabs {
    width: 100%;
    border-bottom: 2px solid #e9ecef; /* Tüm sekmelerin altındaki gri çizgi */
    margin-bottom: 40px; /* İçerikle arasındaki boşluk */
    /* justify-content: center;  Eğer ortalamak istersen bunu aç */
}

/* Sekme Linkleri */
.custom-tabs .nav-link {
    color: #6c757d; /* Pasif metin rengi (Gri) */
    font-weight: 600;
    padding: 15px 25px;
    border: none;
    border-bottom: 3px solid transparent; /* Aktiflik çizgisi için yer ayırıyoruz */
    background: none !important; /* Arka planı temizle (Hap şeklindeki BG kalktı) */
    border-radius: 0; /* Köşeleri düzleştir */
    transition: all 0.3s ease;
    font-size: 1.1rem;
    margin-bottom: -2px; /* Alt çizgiye tam oturması için */
}

/* Üzerine Gelince */
.custom-tabs .nav-link:hover {
    color: var(--gsb-dark);
    border-bottom-color: #dee2e6; /* Hafif gri bir çizgi belirsin */
}

/* Aktif Sekme */
.custom-tabs .nav-link.active {
    color: var(--gsb-red) !important; /* Kırmızı yazı */
    border-bottom-color: var(--gsb-red) !important; /* Kırmızı kalın alt çizgi */
    background: none !important;
}

/* İkon Rengi */
.custom-tabs .nav-link i {
    color: #adb5bd; /* Pasif ikon rengi */
    transition: 0.3s;
}

.custom-tabs .nav-link.active i {
    color: var(--gsb-red); /* Aktif ikon rengi (Kırmızı) */
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .custom-tabs .nav-link {
        font-size: 0.9rem;
        padding: 12px 15px;
    }
}


/* =========================================
   MOBİL BOTTOM NAV (Header Dosyasından Gelir)
   ========================================= */

.mobile-bottom-nav {
    display: none; /* Varsayılan olarak GİZLİ (Masaüstü için) */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
    z-index: 9999;
    padding: 8px 0;
    height: 70px;
    justify-content: space-around;
    align-items: center;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #9ca3af; /* Pasif renk */
    font-size: 0.7rem;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 100%;
    background: transparent;
    border: none;
}

.mobile-nav-item i {
    font-size: 1.5rem;
    margin-bottom: 2px;
    transition: transform 0.2s;
}

/* Aktif Durum */
.mobile-nav-item.active {
    color: var(--gsb-red);
    font-weight: 700;
}

/* SADECE MOBİLDE GÖSTER (992px altı) */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex; /* Flex olarak görünür yap */
    }
    
    /* Alt bar içerikleri kapatmasın diye sayfa altına boşluk */
    body {
        padding-bottom: 70px; 
    }
    
    /* Footer mobilde biraz daha yukarıda bitsin (opsiyonel) */
    .footer-bottom-bar {
        padding-bottom: 20px;
    }
}

/* =========================================
   MOBİL MENÜ DÜZENLEMESİ (HAMBURGER)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Açılan Menü Kutusu */
    .navbar-collapse {
        background-color: #ffffff; /* Arka planı beyaz yap (Şeffaflığı giderir) */
        position: absolute;        /* Header'ın altına yapıştır */
        top: 100%;                 /* Tam header'ın bittiği yerden başla */
        left: 0;
        width: 100%;
        padding: 20px;             /* İç boşluk */
        box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* Altına gölge at */
        border-top: 1px solid #f1f1f1;
        max-height: 80vh;          /* Ekranın %80'ini kaplasın */
        overflow-y: auto;          /* Sığmazsa scoll çıksın */
    }

    /* 2. Menü Linkleri */
    .navbar-nav .nav-link {
        color: #333;
        font-size: 1.1rem;         /* Yazıları büyüt */
        font-weight: 600;
        padding: 15px 0;           /* Linkler arası boşluğu aç */
        border-bottom: 1px solid #f8f9fa; /* Altlarına ince çizgi çek */
        text-align: center;        /* Ortala (İstersen left yapabilirsin) */
    }

    .navbar-nav .nav-link:hover {
        color: var(--gsb-red);
        background-color: #fcfcfc;
    }

    /* 3. Başkanlık Dropdown Menüsü */
    .navbar-nav .dropdown-menu {
        border: none;
        background-color: #f8f9fa; /* Alt menü hafif gri olsun */
        box-shadow: none;
        padding: 10px;
        margin-top: 5px;
        text-align: center;
    }

    .dropdown-item {
        padding: 12px;
        font-size: 1rem;
    }

    /* 4. GSB Butonu (En Alttaki) */
    .btn-gsb {
        display: block;
        width: 100%;               /* Buton tam genişlik olsun */
        margin-top: 20px;          /* Yukarıdan boşluk bırak */
        margin-left: 0 !important; /* Masaüstü sol boşluğunu sıfırla */
        padding: 12px;
        text-align: center;
    }

    /* 5. Hamburger İkonu Çerçevesi */
    .navbar-toggler {
        border: 2px solid #eee;
        padding: 8px;
        border-radius: 8px;
    }
    
    .navbar-toggler:focus {
        box-shadow: none; /* Tıklayınca çıkan mavi çerçeveyi kaldır */
        border-color: var(--gsb-red);
    }
}

/* =========================================
   MOBİL HİKAYELER (STORIES) TASARIMI
   ========================================= */

.stories-section {
    margin-top: 15px;
    background: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #f1f1f1;
    overflow: hidden;
    display: none;
}

/* Yatay Kaydırma Alanı */
.stories-wrapper {
    display: flex;
    gap: 15px;
    padding: 0 15px;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox scrollbar gizle */
    -ms-overflow-style: none; /* IE scrollbar gizle */
    -webkit-overflow-scrolling: touch; /* Mobilde akıcı kaydırma */
}

.stories-wrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari scrollbar gizle */
}

/* Hikaye Öğesi */
.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75px;
    flex-shrink: 0;
    cursor: pointer;
}

/* Yuvarlak Resim Alanı */
.story-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 3px; /* Çerçeve ile resim arasındaki boşluk */
    /* GSB Kırmızısı Gradient Çerçeve */
    background: linear-gradient(45deg, #ffb700, var(--gsb-red), #990000);
    position: relative;
    margin-bottom: 5px;
    transition: transform 0.2s;
}

.story-item:active .story-circle {
    transform: scale(0.95); /* Tıklama efekti */
}

/* Resim (Beyaz kenarlıkla ayrılır) */
.story-circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff; 
    background-color: #fff;
}

/* Alt Metin */
.story-text {
    font-size: 0.7rem;
    color: var(--gsb-dark);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* =========================================
   STORY MODAL (TAM EKRAN POPUP)
   ========================================= */

.story-modal-content {
    background: #000;
    position: relative;
    border: none;
}

/* Arka Plan Resmi (Tam Ekran) */
.story-modal-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8; /* Yazılar okunsun diye hafif karartma */
}

/* Kapat Butonu (Sağ Üst) */
.story-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 50%;
    padding: 10px;
    z-index: 1055;
    opacity: 1;
}

/* İçerik Katmanı (Gradient Overlay - Aşağıdan Yukarı) */
.story-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 25px 50px; /* Alttan boşluk bıraktık */
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
    color: white;
    z-index: 1050;
}

.story-modal-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.3;
    color: #fff;
}

.story-modal-desc {
    font-size: 0.95rem;
    color: #e5e5e5;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Max 3 satır */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story-modal-btn {
    color: var(--gsb-red);
}

/* =========================================
   STORY İLERLEME VE NAVİGASYON (YENİ)
   ========================================= */

/* İlerleme Çubuğu Kapsayıcısı */
.story-progress-container {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    z-index: 1060;
}

/* Her Bir Çubuk (Segment) */
.progress-segment {
    flex: 1; /* Hepsi eşit genişlikte */
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

/* Çubuğun İçindeki Dulan Kısım */
.progress-fill {
    width: 0%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0; left: 0;
}

/* Animasyon: Çubuğu Doldur */
@keyframes fillStoryBar {
    from { width: 0%; }
    to { width: 100%; }
}

/* Aktif Sınıfı: Animasyonu Başlatır */
.progress-segment.active .progress-fill {
    animation: fillStoryBar 5s linear forwards; /* 5 saniyede dolar */
}

/* Tamamlanmış Sınıfı: Önceden izlenenler dolu kalır */
.progress-segment.visited .progress-fill {
    width: 100%;
}

/* Görünmez Dokunma Alanları (Navigasyon) */
.story-tap-area {
    position: absolute;
    top: 0;
    bottom: 150px; /* Butonlara basılabilsin diye alttan boşluk */
    z-index: 1055;
    /* background: rgba(255,0,0,0.2); Test ederken açabilirsin */
}

.story-tap-area.left {
    left: 0;
    width: 30%; /* Sol %30 geri gitmek için */
}

.story-tap-area.right {
    right: 0;
    width: 70%; /* Sağ %70 ileri gitmek için */
}

/* =========================================
   Z-INDEX DÜZELTMELERİ (STORY İÇİN)
   ========================================= */

/* Story Modalını en üste taşı (Mobil menünün üstüne) */
#storyModal {
    z-index: 10000 !important; 
}

/* Modalı saran siyah arka planın (backdrop) da üstte olması lazım */
.modal-backdrop {
    z-index: 9999 !important; /* Mobil menü ile aynı veya bir tık üstte */
}

/* Kapatma Butonunu Garantiye Al */
.story-close-btn {
    z-index: 10001 !important; /* Her şeyin en üstünde */
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.9); /* Biraz daha görünür yapalım */
}

/* =========================================
   HABER DETAY GALERİSİ
   ========================================= */

.gallery-item {
    cursor: pointer;
    overflow: hidden;
    border-radius: 12px;
    height: 150px; /* Karemsi görünüm */
    position: relative;
    border: 1px solid #eee;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Hover Efekti: Resim büyüsün, üzeri hafif kararsın */
.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item::after {
    content: '\F502'; /* Büyüteç ikonu (Bootstrap Icons) */
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 2rem;
    z-index: 2;
    transition: 0.3s;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.gallery-item:hover::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Arka plana hafif siyah perde */
.gallery-item:hover::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1;
}

/* =========================================
   GALERİ NAVİGASYON BUTONLARI
   ========================================= */

.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2); /* Yarı saydam beyaz */
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1060; /* Resmin üzerinde olsun */
    backdrop-filter: blur(5px);
}

.gallery-nav-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--gsb-red); /* Hover olunca kırmızı olsun */
    transform: translateY(-50%) scale(1.1);
}

/* Konumlandırma */
.gallery-nav-btn.prev {
    left: 10px;
}

.gallery-nav-btn.next {
    right: 10px;
}

/* Mobilde butonlar görüntüyü kapatmasın diye biraz küçültelim */
@media (max-width: 768px) {
    .gallery-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        background: rgba(0, 0, 0, 0.3); /* Mobilde daha koyu zemin */
    }
}

/* =========================================
   Z-INDEX DÜZELTMELERİ (TÜM MODALLAR İÇİN)
   ========================================= */

/* Story ve Galeri Modallarını en üste taşı (Mobil menünün ve backdrop'ın üstüne) */
#storyModal, #galleryModal {
    z-index: 10000 !important;
}

/* Modalı saran siyah arka planın (backdrop) da üstte olması lazım */
.modal-backdrop {
    z-index: 9999 !important; /* Mobil menü ile aynı veya bir tık üstte */
}

/* Kapatma Butonlarını Garantiye Al ve Görünür Yap */
.story-close-btn, #galleryModal .btn-close {
    z-index: 10001 !important; /* Her şeyin en üstünde */
    cursor: pointer;
    
    /* Arka planı beyaz yapalım ki koyu zemin üzerinde net görünsünler */
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50%; /* Yuvarlak */
    padding: 0.5rem !important; /* İç boşluk */
    
    /* Kapat ikonunun rengini siyah yapalım (filter'ı sıfırla) */
    filter: none !important; 
    opacity: 1 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Hafif gölge */
}


@media screen and (min-width: 320px) and (max-width: 1023px) {
    .stories-section {
        display: flex;
    }

    .hero-section-split, .mission-section {
        padding: 20px 0;
    }

    .btn-gsb {
        width: initial;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .nav-pills button {
        margin: 0;
        font-size: 0.7rem !important;
    }
}

@media screen and (min-width: 320px) and (max-width: 1319px) {
    .page-header-wrapper {
        margin-top: 11px;
        padding: 20px 0;
    }
    
    .page-title {
        margin-bottom: 0;
        font-size: 25px;
        line-height: 33px;
        text-align: center;
    }

    .breadcrumb-custom {
        display: none;
    }

    .page-content-wrapper {
        padding: 40px 0;
    }

    .sidebar-menu-card {
        display: none;
    }

    .sidebarContainer {
        display: flex;
        flex-direction: column-reverse;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1319px) {
    .carousel-item img {
        height: initial;
    }
}

/* =========================================
   Z-INDEX DÜZELTMELERİ (TÜM MODALLAR İÇİN - FINAL)
   ========================================= */

/* Tüm Bootstrap Modalları (.modal) ve özel ID'li modallar
   her zaman siyah perdenin (.modal-backdrop) üzerinde olsun.
*/
.modal, #storyModal, #galleryModal, #teskilatModal {
    z-index: 10000 !important; 
}

/* Siyah Arka Plan Perdesi */
.modal-backdrop {
    z-index: 9999 !important; 
}

/* Kapatma Butonları (Her zaman en üstte ve tıklanabilir) */
.story-close-btn, .modal .btn-close {
    z-index: 10001 !important; 
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.9) !important; /* Görünür olması için beyaz zemin */
    border-radius: 50%;
    padding: 0.5rem !important;
    filter: none !important; /* Rengi koru */
    opacity: 1 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Navbar Link Aktif Rengi */
.navbar-nav .nav-link.active {
    color: var(--gsb-red) !important; /* Veya istediğin renk: #E3001B */
    font-weight: 600;
}

iframe {
    width: 100%;
    height: 100%;
}

/* Mobil Navigasyon Aktif Durumu */
.mobile-nav-item.active {
    color: var(--gsb-red) !important; /* veya #E3001B */
    font-weight: 600;
}

.mobile-nav-item.active i {
    color: var(--gsb-red) !important;
    transform: translateY(-2px); /* Ufak bir zıplama efekti */
}

/* Geçiş efekti */
.mobile-nav-item i {
    transition: all 0.3s ease;
}

/* MOBİL ALT MENÜ (SABİT) - GÜNCELLENMİŞ */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #ffffff; /* Arkaplan beyaz, şeffaflık yok */
    border-top: 1px solid #dee2e6; /* Üstte ince çizgi */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* Hafif gölge */
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1050; /* İçeriklerin üstünde kalsın */
    
    /* İKON VE YAZI DÜZENİ */
    padding-top: 10px;
    padding-bottom: 10px; /* Standart boşluk */
    
    /* iPhone X ve Yeni Nesil Telefonlar İçin Güvenli Alan */
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); 
}

/* Linklerin Görünümü */
.mobile-nav-item {
    text-align: center;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    flex: 1; /* Eşit dağılım */
}

.mobile-nav-item i {
    font-size: 1.4rem;
    margin-bottom: 2px;
    display: block;
}

/* Aktif Durum (Kırmızı) */
.mobile-nav-item.active {
    color: var(--gsb-red) !important; /* GSB Kırmızısı */
    font-weight: 600;
}

/* İkon Animasyonu */
.mobile-nav-item.active i {
    transform: translateY(-2px);
}

/* Mobil cihazlarda sayfanın en altına boşluk bırak
   Böylece içerik navigasyon barının arkasında kalmaz */
@media (max-width: 991px) {
    body {
        padding-bottom: 90px !important; /* Bar yüksekliği kadar boşluk */
    }
    
    /* Masaüstü menüsünü gizle (Eğer hala görünüyorsa) */
    .navbar {
        /* display: none; Bu kısmı ihtiyaca göre açabilirsin, 
           genelde hamburger menü kullanıyorsan kapatma */
    }
}

/* Masaüstünde (992px ve üstü) bu barı gizle */
@media (min-width: 992px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* --- STORY GÖRSEL AYARLARI --- */

/* Varsayılan (Ekranı doldurur, kenarları keser) */
.story-fit-cover {
    object-fit: cover !important;
    width: 100%;
    height: 100%;
}

/* Sığdır (Resmin tamamını gösterir, kesmez) */
.story-fit-contain {
    object-fit: contain !important;
    width: 100%;
    height: 100%;
    background-color: #000; /* Kenarlarda boşluk kalırsa siyah görünsün (Instagram tarzı) */
}