/* GENEL AYARLAR */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

/* MENÜ TASARIMI */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Hafif gölge */
    position: fixed; /* Menü yukarıya yapışık kalsın */
    width: 100%;
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 30px;
    font-weight: 700;
    color: #2c3e50;
}

.logo span {
    color: #e67e22; /* Turuncu vurgu rengi */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px; /* Linkler arası boşluk */
}

.nav-links a {
    font-weight: 500;
    font-size: 14px;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #e67e22;
}

.btn-iletisim {
    padding: 10px 20px;
    background-color: #2c3e50;
    color: white !important;
    border-radius: 25px; /* Yuvarlak kenarlar */
}

/* KARŞILAMA EKRANI (HERO) TASARIMI */
.hero {
    height: 100vh; /* Ekranın tamamını kapla */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('kapak.png');
    /* Not: Yukarıdaki link yerine kendi resmini koyacağız */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero h1 {
    font-size: 60px;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.hero p {
    font-size: 20px;
    margin-bottom: 40px;
    font-weight: 300;
}

.cta-button {
    padding: 15px 40px;
    background-color: #e67e22;
    color: white;
    font-weight: 600;
    border-radius: 5px;
    transition: transform 0.3s, background-color 0.3s;
}

.cta-button:hover {
    background-color: #d35400;
    transform: translateY(-5px); /* Üzerine gelince hafif yukarı kalksın */
}/* HİZMETLER BÖLÜMÜ */
.services-section {
    padding: 100px 20px; /* Üstten ve alttan boşluk */
    background-color: #f9f9f9; /* Hafif gri arka plan */
    text-align: center;
}

.section-title {
    font-size: 36px;
    margin-bottom: 50px;
    color: #2c3e50;
    position: relative;
    display: inline-block;
}

/* Başlığın altına şık bir çizgi ekleyelim */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #e67e22; /* Turuncu çizgi */
    margin: 10px auto 0;
    border-radius: 2px;
}

/* KARTLARIN DÜZENİ (FLEXBOX) */
.services-grid {
    display: flex; /* Kutuları yan yana getirir */
    justify-content: center; /* Ortalar */
    gap: 30px; /* Kutular arası boşluk */
    flex-wrap: wrap; /* Ekran küçülürse kutuları alt satıra at */
}

/* TEKİL KART TASARIMI */
.service-card {
    background: white;
    padding: 40px;
    border-radius: 10px; /* Kenarları yuvarlat */
    width: 300px; /* Kutunun genişliği */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Hafif gölge */
    transition: transform 0.3s, box-shadow 0.3s; /* Animasyon süresi */
    cursor: pointer;
}

.service-card h3 {
    margin-bottom: 15px;
    color: #2c3e50;
}

.service-card p {
    color: #666;
    font-size: 14px;
}

/* MOUSE İLE ÜZERİNE GELİNCE (HOVER EFEKTİ) */
.service-card:hover {
    transform: translateY(-10px); /* Kutuyu 10px yukarı kaldır */
    box-shadow: 0 15px 30px rgba(0,0,0,0.2); /* Gölgeyi büyüt */
    border-bottom: 5px solid #e67e22; /* Altına turuncu çizgi çek */
}/* FOOTER TASARIMI */
footer {
    background-color: #111;
    color: white;
    padding-top: 40px;
    text-align: center;
}

.footer-content h3 {
    font-size: 28px;
    margin-bottom: 10px;
}

.footer-content p {
    font-size: 14px;
    color: #ccc;
}

.socials {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.socials a {
    color: white;
    border: 1px solid white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    transition: background 0.3s;
}

.socials a:hover {
    background: #e67e22;
    border-color: #e67e22;
}

.footer-bottom {
    background-color: #000;
    padding: 10px;
    font-size: 12px;
    color: #777;
}/* MOBİL UYUMLULUK (RESPONSIVE) */
@media (max-width: 768px) {
    
    /* Menüyü düzenle: Alt alta sırala */
    .navbar {
        flex-direction: column;
        padding: 15px;
    }

    .nav-links {
        margin-top: 15px;
        flex-direction: column; /* Linkleri alt alta diz */
        gap: 15px;
        text-align: center;
        width: 100%;
    }

    /* Hero Yazılarını küçült */
    .hero h1 {
        font-size: 36px;
    }
    
    .hero p {
        font-size: 16px;
    }

    /* Hizmet kutularını alt alta diz */
    .services-grid {
        flex-direction: column;
        align-items: center;
    }

    .service-card {
        width: 100%; /* Telefondan bakınca kutu tam genişlikte olsun */
    }
}/* HAKKIMIZDA SAYFASI TASARIMI */
.about-section {
    padding: 120px 20px 60px; /* Menü üstte olduğu için üst boşluğu fazla verdik */
    background-color: white;
}

.about-content {
    display: flex; /* Yan yana getir */
    align-items: center; /* Dikeyde ortala */
    gap: 50px; /* Yazı ve resim arası boşluk */
    max-width: 1100px;
    margin: 0 auto; /* Sayfada ortala */
}

.about-text {
    flex: 1; /* Alanın yarısını kapla */
}

.about-text h1 {
    font-size: 40px;
    color: #2c3e50;
    margin-bottom: 10px;
}

.about-text .subtitle {
    color: #e67e22;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 18px;
}

.about-image {
    flex: 1; /* Alanın diğer yarısını kapla */
}

.about-image img {
    width: 100%; /* Resim bulunduğu alana sığsın */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Güzel bir gölge */
}

/* Hakkımızda sayfası için Mobil Uyum */
@media (max-width: 768px) {
    .about-content {
        flex-direction: column; /* Telefondan girince alt alta olsun */
    }
}/* Yeni Logo Ayarı */
.logo img {
    height: 60px; /* Logonun yüksekliği. İstersen bu sayıyı değiştirebilirsin */
    width: auto; /* Genişlik otomatik orantılanır */
    display: block; /* Logoyu düzgün hizalar */
}/* DİL BUTONU TASARIMI */
.lang-btn {
    border: 2px solid #007a4d; /* BioRHub Yeşili */
    padding: 5px 12px;
    border-radius: 5px; /* Kenarları yuvarlat */
    font-weight: bold;
    color: #007a4d !important; /* Yazı rengi yeşil */
    transition: all 0.3s ease;
}

.lang-btn:hover {
    background-color: #007a4d; /* Üzerine gelince içi yeşil olsun */
    color: white !important; /* Yazısı beyaz olsun */
}/* İLETİŞİM SAYFASI TASARIMI */
.contact-section {
    padding: 120px 20px 80px;
    background-color: #f4f7f6; /* Çok açık gri arka plan */
}

.page-title {
    text-align: center;
    color: #002855; /* BioRHub Laciverti */
    margin-bottom: 10px;
    font-size: 36px;
}

.page-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 50px;
}

.contact-wrapper {
    display: flex;
    justify-content: center;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap; /* Mobil uyum için */
}

/* Sol Taraf: Bilgi Kutuları */
.contact-info {
    flex: 1;
    min-width: 300px;
}

.info-item {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-left: 5px solid #007a4d; /* Sol kenarda Yeşil Çizgi */
}

.info-item h3 {
    color: #002855;
    margin-bottom: 5px;
    font-size: 18px;
}

/* Sağ Taraf: Form Tasarımı */
.contact-form {
    flex: 2;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    min-width: 300px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
    font-size: 14px;
    transition: border 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #007a4d; /* Tıklayınca yeşil olsun */
    outline: none;
}

.btn-submit {
    width: 100%;
    padding: 15px;
    background-color: #007a4d; /* BioRHub Yeşili */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-submit:hover {
    background-color: #002855; /* Üzerine gelince Lacivert olsun */
}/* --- YENİ EKLENEN TASARIMLAR --- */

/* 1. HİZMETLER SAYFASI */
.services-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 800px;
    margin: 50px auto;
}

.service-item {
    display: flex;
    align-items: center;
    background: white;
    padding: 30px;
    border-radius: 10px;
    border-left: 8px solid #007a4d; /* BioRHub Yeşili */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.service-icon {
    font-size: 40px;
    margin-right: 20px;
}

.service-text h3 {
    color: #002855;
    margin-bottom: 5px;
}

/* 2. EKİP (TAKIM) BÖLÜMÜ */
.team-section {
    padding: 80px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.team-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.team-member {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 250px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.team-member:hover {
    transform: translateY(-10px);
}

.team-member img {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Resmi yuvarlak yap */
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #007a4d;
}

.team-member .role {
    color: #007a4d;
    font-weight: 600;
    font-size: 14px;
}

/* 3. İŞ BİRLİKLERİ (LOGOLAR) */
.partners-section {
    padding: 60px 20px;
    background-color: white;
    text-align: center;
}

.logos-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-top: 30px;
    opacity: 0.7; /* Logolar çok bağırmasın diye hafif şeffaflık */
}

.logos-grid img {
    height: 40px; /* Logoların yüksekliği */
    filter: grayscale(100%); /* Logoları siyah-beyaz yap (Şıklık için) */
    transition: all 0.3s;
}

.logos-grid img:hover {
    filter: grayscale(0%); /* Üzerine gelince renkli olsun */
    transform: scale(1.1);
}

/* 4. FOOTER GÜNCELLEMESİ */
.full-company-name {
    font-weight: bold;
    margin: 10px 0;
    font-size: 16px;
}

.footer-info p {
    margin: 5px 0;
    color: #bbb;
    font-size: 14px;
}/* HARİTA TASARIMI */
.map-container {
    margin-top: 50px; /* Form ile harita arasına boşluk */
    border-radius: 10px; /* Köşeleri yuvarlat */
    overflow: hidden; /* Taşmaları gizle */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Hafif gölge */
    border: 5px solid white; /* Beyaz şık bir çerçeve */
}

.map-container iframe {
    width: 100%; /* Bulunduğu yeri tam kapla */
    height: 400px; /* Yüksekliği */
    display: block;
}/* --- ÜRÜNLER SAYFASI TASARIMI --- */

.product-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap; /* Mobilde alt alta geçmesini sağlar */
    width: 90%;
    max-width: 1200px;
}

.product-card {
    background: rgba(255, 255, 255, 0.1); /* Yarı saydam beyaz */
    border: 1px solid rgba(255, 255, 255, 0.2); /* İnce beyaz çerçeve */
    backdrop-filter: blur(10px); /* Arka planı buzlar */
    padding: 30px;
    border-radius: 20px;
    width: 300px;
    text-align: center;
    color: white;
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-10px); /* Üzerine gelince hafif yukarı kalkar */
    background: rgba(255, 255, 255, 0.2);
}

.product-card .icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.product-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.product-card p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 20px;
    line-height: 1.4;
}

.status-badge {
    display: inline-block;
    padding: 5px 15px;
    background: #4CAF50; /* BioRHub Yeşili */
    color: white;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
}.partners-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Logolar arası mesafe */
    flex-wrap: wrap;
    padding: 20px;
}

.partner-item img {
    width: 150px; /* Logoların genişliğini buradan ayarla */
    height: auto;
    filter: grayscale(0%); /* İstersen hepsini siyah beyaz yapıp... */
    transition: 0.3s;
    opacity: 1;
}

.partner-item img:hover {
    filter: grayscale(0%); /* ...üzerine gelince renklenmesini sağlayabilirsin. */
    opacity: 1;
    transform: scale(1.1); /* Hafifçe büyür */
}.team-section {
    text-align: center;
    padding: 60px 20px;
}

.team-container {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.team-member {
    width: 250px;
    transition: transform 0.3s;
}

.team-member img {
    width: 200px; /* Biraz daha genişlettik */
    height: 200px;
    border-radius: 50%; 
    object-fit: cover; 
    object-position: top; /* BU ÇOK ÖNEMLİ: Fotoğrafı üstten hizalar, böylece baş kısmı kesilmez */
    border: 4px solid #4CAF50; 
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.team-member:hover {
    transform: translateY(-10px); /* Üzerine gelince yukarı zıplar */
}

.team-member h3 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 5px;
}

.team-member p {
    color: #777;
    font-size: 0.9rem;
}.contact-info-card {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 15px;
    border-left: 5px solid #4CAF50; /* BioRHub Yeşili vurgu */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.map-mini-link {
    text-decoration: none;
    color: inherit;
    display: block;
    margin-top: 20px;
    transition: 0.3s;
}

.map-mini-link:hover .map-icon-box {
    transform: scale(1.05);
}

.map-icon-box {
    padding: 20px;
    background: #fff;
    border: 1px dashed #4CAF50;
    border-radius: 10px;
    margin-bottom: 15px;
    transition: 0.3s;
}

.btn-yol-tarifi {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
}.contact-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Kutuları aynı yüksekliğe getirir */
    gap: 30px;
    padding: 50px 20px;
    flex-wrap: wrap; /* Mobilde alt alta geçer */
}

.contact-form-box, .contact-map-box {
    flex: 1;
    min-width: 350px; /* Mobilde bozulmaması için */
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.contact-map-box {
    padding: 0; /* Harita kutunun tamamını kaplasın diye */
    overflow: hidden;
}

.btn-gonder {
    background-color: #4CAF50; /* BioRHub Yeşili */
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    font-weight: bold;
    transition: 0.3s;
}

.btn-gonder:hover {
    background-color: #3e8e41;
}.contact-wrapper {
    max-width: 1100px;
    margin: 50px auto;
    padding: 20px;
}

.section-title {
    text-align: center;
    color: #333;
    margin-bottom: 40px;
    font-size: 2.2rem;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Form ve haritayı tam yarı yarıya böler */
    gap: 0; /* Boşluğu kapatıp tek bir panel gibi gösterir */
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
    overflow: hidden; /* Köşeleri yuvarlar */
}

.contact-form-box {
    padding: 50px;
    background: #fff;
}

.input-row {
    margin-bottom: 20px;
}

.contact-form-box input, .contact-form-box textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #f9f9f9;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
}

.contact-form-box input:focus, .contact-form-box textarea:focus {
    border-color: #4CAF50;
    background: #fff;
}

.btn-modern {
    width: 100%;
    padding: 15px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.btn-modern:hover {
    background: #3e8e41;
    transform: translateY(-2px);
}

.contact-map-box {
    min-height: 450px;
}

.contact-footer {
    text-align: center;
    margin-top: 30px;
    font-size: 1.1rem;
}

.contact-footer a {
    color: #4CAF50;
    text-decoration: none;
    font-weight: bold;
}

/* Mobilde alt alta gelmesi için */
@media (max-width: 768px) {
    .contact-container { grid-template-columns: 1fr; }
    .contact-map-box { min-height: 300px; }
}/* Sayfanın genelini ortalar */
.contact-section {
    display: flex;
    justify-content: center; /* Yatayda ortalar */
    align-items: center; /* Dikeyde ortalar */
    min-height: 80vh; /* Sayfa boyuna göre konumlandırır */
    padding: 50px 0;
}

.contact-wrapper {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto; /* Sağdan ve soldan eşit boşluk bırakır */
}

/* Başlığı tam ortaya çeker */
.section-title {
    text-align: center;
    width: 100%;
    margin-bottom: 40px;
    padding-top: 100px; /* Menüden kurtarmak için bu boşluğu ekledik */
    font-size: 2.5rem;
    color: #333;
}

/* Başlığın altındaki turuncu/yeşil çizgiyi ortalar */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #4CAF50; /* BioRHub Yeşili */
    margin: 10px auto 0; /* Çizgiyi ortalamak için auto kullanıldı */
}

/* Form ve Harita Paneli */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
    overflow: hidden;
}.values-section {
    padding: 80px 20px;
    background-color: #fff; /* Temiz bir arka plan */
}

.values-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Yan yana iki sütun */
    gap: 50px;
}

.value-box {
    padding: 20px;
}

.value-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 15px;
}

.value-line {
    width: 50px;
    height: 4px;
    background: #4CAF50; /* BioRHub Yeşili */
    margin-bottom: 25px;
}

.value-box p {
    line-height: 1.8;
    color: #555;
    font-size: 1.1rem;
}

.principles-list {
    list-style: none;
    padding: 0;
}

.principles-list li {
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    line-height: 1.6;
    color: #555;
}

/* İlkelerin başına küçük bir yeşil nokta koyalım */
.principles-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
}

/* Mobilde alt alta gelmesi için */
@media (max-width: 768px) {
    .values-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .value-line {
        margin: 10px auto 25px;
    }
    .principles-list li {
        padding-left: 0;
    }
    .principles-list li::before {
        display: none;
    }
}/* =========================================
   NAVBAR (MENÜ) - TAMİR EDİLMİŞ VERSİYON
   ========================================= */

/* Menü Şeridi */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px; /* Kenar boşlukları */
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Hafif gölge */
    position: fixed; /* Sayfa kayarken üstte sabit kalsın */
    width: 100%;
    top: 0;
    z-index: 9999;
    height: 90px; /* Menü yüksekliği */
}

/* --- LOGO AYARLARI (BÜYÜTÜLDÜ) --- */
.logo a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.logo img {
    height: 70px; /* Logo boyutu artırıldı (Eskisi 50px idi) */
    width: auto;
    transition: transform 0.3s;
}

.logo img:hover {
    transform: scale(1.05); /* Üzerine gelince hafif büyüsün */
}

.logo span {
    font-size: 28px;
    font-weight: 800;
    color: #2c3e50;
    letter-spacing: -1px;
}

/* --- LİNKLER VE MENÜ YAZILARI --- */
.nav-links {
    display: flex;
    align-items: center;
    gap: 10px; /* Linkler arası mesafe */
}

.nav-links li {
    position: relative; /* Dropdown'ın buna göre konumlanması için şart */
    list-style: none;
}

.nav-links a {
    font-weight: 600;
    font-size: 16px; /* Font boyutu büyütüldü (Eskisi 14px idi) */
    color: #555;
    padding: 10px 20px;
    border-radius: 30px; /* Elips şekli için yuvarlak kenarlar */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

/* Üzerine gelince veya Aktif Sayfadayken */
.nav-links a:hover, 
.nav-links a.active {
    color: #2c3e50 !important; /* Lacivert Yazı */
    border: 2px solid #2c3e50; /* İSTEDİĞİN LACİVERT ÇERÇEVE */
    background-color: transparent;
}

/* --- İLETİŞİM BUTONU (ÖZEL TASARIM) --- */
.btn-iletisim {
    background-color: #2c3e50 !important; /* Koyu Lacivert */
    color: white !important;
    border: none !important;
    padding: 12px 30px !important;
    box-shadow: 0 5px 15px rgba(44, 62, 80, 0.2);
}

.btn-iletisim:hover {
    background-color: #4CAF50 !important; /* Üzerine gelince Yeşil olsun */
    transform: translateY(-2px);
    border: none !important;
    color: white !important;
}

/* --- AÇILIR MENÜ (DROPDOWN) DÜZELTMESİ --- */
/* Burası o "alt alta yazılar" sorununu çözecek */

/* --- AKILLI AÇILIR MENÜ (Kapanma Sorunu Çözüldü) --- */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: transparent; /* Arka plan şeffaf başlar */
    min-width: 240px;
    z-index: 1000;
    top: 100%; 
    left: 0;
    
    /* İŞTE SİHİRLİ DOKUNUŞ BURADA: */
    padding-top: 20px; /* Görünmez bir köprü oluşturduk */
    /* margin-top: 10px;  <-- Bunu iptal ettik çünkü kopukluk yaratıyordu */
}

/* İçerideki gerçek renkli kutu */
.dropdown-content-inner {
    background-color: #2c3e50; /* Lacivert Kutu */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 10px 0;
}

/* Mouse ile üzerine gelince */
.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Link Tasarımları */
.dropdown-content a {
    color: rgba(255,255,255,0.9) !important;
    padding: 12px 25px;
    font-size: 14px;
    border: none !important;
    display: block;
    text-align: left;
    border-radius: 0;
}

.dropdown-content a:hover {
    background-color: rgba(255,255,255,0.1);
    color: #4CAF50 !important;
    padding-left: 30px;
}

/* Mouse ile üzerine gelince kutuyu göster */
.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Dropdown içindeki linkler */
.dropdown-content a {
    color: rgba(255,255,255,0.9) !important;
    padding: 12px 25px;
    font-size: 14px;
    border: none !important; /* İçerdeki linklerde çerçeve olmasın */
    display: block;
    text-align: left;
    border-radius: 0;
}

.dropdown-content a:hover {
    background-color: rgba(255,255,255,0.1);
    color: #4CAF50 !important; /* Yazısı Yeşil olsun */
    padding-left: 30px; /* Kayma efekti */
    border: none !important;
}

/* Küçük Ok İşareti */
.arrow {
    font-size: 10px;
    margin-left: 8px;
    transition: transform 0.3s;
}

.dropdown:hover .arrow {
    transform: rotate(180deg);
}

/* Açılma Animasyonu */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}/* =========================================
   HAKKIMIZDA SAYFASI YENİ TASARIM
   ========================================= */

/* Bölümleri birbirinden ayırmak için */
section {
    width: 100%;
    display: block;
    clear: both; /* Yan yana gelmeyi engeller */
    padding: 60px 20px;
}

/* 1. HİKAYEMİZ */
.story-section {
    text-align: center;
    margin-top: 80px; /* Menünün altında kalmasın */
}
.story-text {
    max-width: 800px;
    margin: 20px auto;
    font-size: 1.2rem;
    color: #555;
}

/* 2. BAĞLAMIMIZ (Oval Dikdörtgen Kutu) */
.context-section {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.context-box {
    background: linear-gradient(135deg, #2c3e50, #004d40); /* Mavi-Yeşil Geçişli Fon */
    color: white;
    padding: 50px;
    border-radius: 50px; /* Oval köşeler */
    max-width: 900px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 4px solid #4CAF50; /* Yeşil Çerçeve */
}

.context-box h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

/* 3. DEĞERLERİMİZ (Alt Alta Liste) */
.values-list {
    max-width: 800px;
    margin: 0 auto;
}

.value-item {
    background: #f9f9f9;
    padding: 20px;
    margin-bottom: 15px;
    border-left: 5px solid #4CAF50;
    border-radius: 8px;
}

.value-item h3 { color: #2c3e50; margin-bottom: 5px; }

/* 4. İLKELERİMİZ (Yan Yana Kartlar) */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.principle-card {
    background: white;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.principle-card:hover {
    transform: translateY(-5px);
    border-bottom: 3px solid #4CAF50;
}

.principle-card span { font-size: 30px; display: block; margin-bottom: 10px; }

/* 5. EKİBİMİZ VE POPUP (MODAL) TASARIMI */
.team-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.team-member {
    cursor: pointer; /* Tıklanabilir olduğunu gösterir */
    transition: 0.3s;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.team-member:hover {
    transform: scale(1.05); /* Üzerine gelince büyür */
}

.btn-bio {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 20px;
    margin-top: 10px;
    cursor: pointer;
}

/* --- POPUP (MODAL) PENCERE STİLİ --- */
.modal {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8); /* Arka planı karart */
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Sayfanın ortasında dursun */
    padding: 40px;
    border: 1px solid #888;
    width: 60%; /* Genişlik */
    max-width: 700px;
    border-radius: 20px;
    position: relative;
    text-align: left;
    box-shadow: 0 5px 50px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover { color: black; }

@keyframes zoomIn {
    from {transform: scale(0.7); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}/* =========================================
   YENİ FOOTER CSS (Lacivert & Tam Genişlik & BEYAZ LOGO)
   ========================================= */

footer {
    background-color: #2c3e50; /* İstediğin Lacivert */
    color: white;
    text-align: center;
    padding: 60px 0 0; /* DİKKAT: Sağ/Sol ve Alt boşluğu sıfırladık ki çizgi uzasın */
    margin-top: 50px;
    width: 100%;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px; /* İçeriğin kenarlara yapışmaması için boşluk */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* FOOTER LOGO (BEYAZLATMA FİLTRESİ EKLENDİ!) */
.footer-logo img {
    height: 80px; 
    width: auto;
    transition: 0.3s;
    filter: brightness(0) invert(1); /* İŞTE BU SATIR LOGOYU BEYAZ YAPAR */
}

.footer-logo img:hover {
    transform: scale(1.05);
}

.footer-tagline {
    font-size: 1rem;
    color: #bdc3c7; /* Açık gri */
    font-weight: 300;
}

/* SOSYAL MEDYA BUTONLARI */
.socials {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px; /* Alt çizgiyle arasına mesafe koyduk */
}

.social-link {
    display: flex;
    align-items: center;
    gap: 10px; 
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    border-radius: 50px; 
    font-size: 0.9rem;
    color: white;
    transition: 0.3s;
    background: rgba(255,255,255,0.05); 
    text-decoration: none;
}

/* SVG İkon Boyutları */
.social-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Hover Efekti */
.social-link:hover {
    background-color: #4CAF50; /* Yeşil */
    border-color: #4CAF50;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* --- DÜZELTİLEN ALT ŞERİT --- */
.footer-bottom {
    background-color: #2c3e50; /* Üst kısımla AYNI RENK (Yama gibi durmaz) */
    width: 100%; /* Ekranı tam kapla */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* İncecik şık bir çizgi */
    margin-top: 20px;
}

.footer-bottom p {
    font-size: 0.85rem;
    color: #bdc3c7;
    margin: 0;
}/* =========================================
   PROJELER SAYFASI TASARIMI
   ========================================= */

/* Sayfa Başlığı */
.page-header {
    background-color: #2c3e50; /* Lacivert arka plan */
    color: white;
    text-align: center;
    padding: 150px 20px 80px; /* Üstten boşluk menü için */
}

.page-header h1 { font-size: 3rem; margin-bottom: 10px; }
.page-header p { font-size: 1.2rem; opacity: 0.8; }

/* Projeler Grid Yapısı */
.projects-section { padding: 80px 0; background-color: #f9f9f9; }
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Proje Kartı */
.project-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
    border: 1px solid #eee;
}

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

/* Proje Görsel Alanı */
.project-image {
    height: 200px;
    background-color: #ddd; /* Resim yoksa gri görünür */
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Durum Etiketi (Sağ üstteki renkli kutucuk) */
.status {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 12px;
    border-radius: 20px;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

.status.active { background-color: #4CAF50; } /* Yeşil: Devam Eden */
.status.completed { background-color: #2980b9; } /* Mavi: Biten */
.status.planning { background-color: #f39c12; } /* Turuncu: Planlanan */

/* Proje Metinleri */
.project-info { padding: 25px; }
.project-info h3 { margin-bottom: 10px; color: #2c3e50; }
.project-info p { color: #666; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.6; }

.btn-text {
    color: #4CAF50;
    font-weight: bold;
    font-size: 0.9rem;
}
.btn-text:hover { text-decoration: underline; 
}/* =========================================
   HİZMETLER SAYFASI - YENİ MODERN TASARIM
   ========================================= */

/* Hizmetler Grid Yapısı */
.services-modern-section {
    padding: 60px 0 100px;
    background-color: #fcfcfc;
}

.services-grid {
    display: grid;
    /* Ekran genişliğine göre otomatik sığdır (Yan yana 3 veya 4 tane) */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
}

/* Modern Kart Tasarımı */
.service-card-modern {
    background: white;
    padding: 40px 30px;
    border-radius: 20px; /* Yuvarlak köşeler */
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Hafif modern gölge */
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
}

/* Üzerine Gelince (Hover) */
.service-card-modern:hover {
    transform: translateY(-10px); /* Yukarı kalkma efekti */
    box-shadow: 0 20px 40px rgba(76, 175, 80, 0.15); /* Yeşil gölge belirsin */
    border-bottom: 4px solid #4CAF50; /* Altta yeşil çizgi çıksın */
}

/* İkonun Olduğu Yuvarlak Alan */
.icon-circle {
    width: 80px;
    height: 80px;
    background-color: rgba(76, 175, 80, 0.1); /* Çok açık yeşil zemin */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px; /* Ortala ve alttan boşluk bırak */
    transition: 0.3s;
}

.service-card-modern:hover .icon-circle {
    background-color: #4CAF50; /* Hover olunca zemin koyu yeşil olsun */
    transform: scale(1.1); /* Hafif büyüsün */
}

/* SVG İkon Ayarları */
.icon-circle svg {
    width: 40px;
    height: 40px;
    fill: #4CAF50; /* İkon rengi yeşil */
    transition: 0.3s;
}

.service-card-modern:hover .icon-circle svg {
    fill: white; /* Hover olunca ikon beyaz olsun */
}

/* Başlık ve Yazılar */
.service-card-modern h3 {
    font-size: 1.4rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
}

.service-card-modern p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* Page Header (Bunu Projeler sayfasında eklemiştik, garanti olsun diye buraya da koyuyorum) */
.page-header {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 140px 20px 60px; /* Üstten 140px boşluk (Menü payı) */
}
/* =========================================
   FAALİYETLER & GELİŞMELER SAYFALARI
   ========================================= */

/* Faaliyetler (Hub & Eğitim) Tasarımı */
.activity-section { padding: 80px 0; }
.bg-light { background-color: #f9f9f9; }

.activity-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* Resmi sola, yazıyı sağa almak için (Eğitim kısmı) */
.activity-content.reverse { flex-direction: row-reverse; }

.text-side { flex: 1; }
.image-side { flex: 1; }

.tag {
    display: inline-block;
    background: #e8f5e9;
    color: #4CAF50;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.check-list li {
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: #555;
}

/* Gelişmeler (Haberler) Tasarımı */
.news-section { padding: 80px 0; background: #f4f7f6; }
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.news-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
}

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

.news-img {
    height: 160px; /* Yüksekliği 200px'ten 160px'e düşürdük (Daha kibar durur) */
    background-color: #ffffff; /* Gri (#ddd) yerine BEYAZ yaptık, logolarla bütünleşsin */
    background-size: contain; /* SİHİRLİ KOD: Resmi kesmeden kutunun içine sığdırır */
    background-position: center; /* Ortalar */
    background-repeat: no-repeat; /* Resim küçükse tekrar etmesini engeller */
    border-bottom: 1px solid #f0f0f0; /* Altına çok hafif bir çizgi ekledik */
}

.news-content { padding: 25px; }
.news-content .date { font-size: 0.8rem; color: #999; display: block; margin-bottom: 10px; }
.news-content h3 { font-size: 1.3rem; margin-bottom: 10px; color: #2c3e50; }
.news-content p { color: #666; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; }

.read-more { color: #4CAF50; font-weight: bold; font-size: 0.9rem; }
.read-more:hover { text-decoration: underline; }

/* Mobilde Faaliyetler Alt Alta Dursun */
@media (max-width: 768px) {
    .activity-content, .activity-content.reverse { flex-direction: column; }
}/* =========================================
   HİKAYEMİZ - MODERN TASARIM (DÜZELTİLMİŞ & ORTALANMIŞ)
   ========================================= */

.story-modern-section {
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden;
}

.story-wrapper {
    display: flex;
    align-items: center; /* Dikeyde ortalar */
    justify-content: center; /* Yatayda ortalar */
    gap: 60px; /* Resim ve yazı arası boşluk */
    
    /* İŞTE SİHİRLİ KISIM BURASI 👇 */
    width: 90%;          /* Mobilde kenarlardan taşmasın */
    max-width: 1100px;   /* İçerik çok yayılmasın, derli toplu dursun */
    margin: 0 auto;      /* Sayfanın tam ortasına hizala */
}

/* --- SOL TARAFTAKİ RESİM ALANI --- */
.story-image-box {
    flex: 0 0 45%; /* Alanın %45'ini kaplasın */
    position: relative;
    /* padding çıkartıldı, daha temiz dursun */
}

.story-image-box img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15); /* Gölgeyi biraz artırdık */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
    display: block; /* Resim altındaki boşluğu siler */
}

.story-image-box:hover img {
    transform: scale(1.02);
}

/* Yeşil Dekoratif Kutu */
.decoration-box {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #4CAF50;
    top: 20px;
    left: -20px; /* Sola doğru kaysın */
    border-radius: 20px;
    z-index: 1;
    opacity: 0.15; /* Biraz daha şeffaf */
}

/* --- SAĞ TARAFTAKİ YAZI ALANI --- */
.story-text-box {
    flex: 0 0 50%; /* Alanın %50'sini kaplasın */
}

.modern-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 800;
    position: relative;
    display: inline-block;
}

.modern-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #4CAF50;
    margin-top: 5px;
    border-radius: 2px;
}

.modern-subtitle {
    font-size: 1rem;
    color: #4CAF50;
    margin-bottom: 25px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.story-content p {
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
    /* İki yana yaslamak yerine sola dayalı daha modern durur */
    text-align: justify; 
}

/* --- MOBİL UYUMLULUK --- */
@media (max-width: 900px) {
    .story-wrapper {
        flex-direction: column; /* Mobilde alt alta */
        text-align: center; /* Mobilde yazılar ortalansın */
        gap: 30px;
    }
    
    .story-image-box, .story-text-box {
        flex: 0 0 100%; /* Tam genişlik */
        width: 100%;
    }

    .decoration-box {
        display: none; /* Mobilde gizle */
    }

    .story-content p {
        text-align: center; /* Mobilde yazılar ortada güzel durur */
    }
    
    .modern-title::after {
        margin: 5px auto 0; /* Çizgiyi de ortala */
    }
}
/* =========================================
   DİL DEĞİŞTİRME BUTONU (TR | EN)
   ========================================= */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 5px; /* TR ve EN arasındaki boşluk */
    margin-left: 15px; /* İletişim butonundan uzaklaşsın */
    border-left: 1px solid #ddd; /* Sol tarafa ince bir ayraç çizgisi */
    padding-left: 15px;
}

.lang-switch a {
    font-size: 14px !important;
    font-weight: 600;
    padding: 5px !important; /* Menü linklerinin padding'ini ezdik */
    color: #999; /* Pasif dil gri olsun */
    border: none !important; /* Çerçeveyi kaldır */
}

/* Aktif Dil (TR) Koyu Görünsün */
.lang-switch a.active-lang {
    color: #2c3e50 !important; /* Lacivert */
    font-weight: 800;
}

/* Hover Efekti */
.lang-switch a:hover {
    color: #4CAF50 !important; /* Yeşil */
    background: transparent !important;
}

/* Aradaki Çizgi (|) */
.lang-switch .divider {
    color: #ccc;
    font-size: 14px;
    font-weight: 300;
}

/* Mobilde dil seçeneğini gizle veya ayarla */
@media (max-width: 768px) {
    .lang-switch {
        margin-left: 0;
        border-left: none;
        padding-left: 0;
        margin-top: 10px;
        justify-content: center;
    }
}/* =========================================
   DEĞERLERİMİZ - BAL PETEĞİ (HEXAGON) TASARIM - DÜZELTİLMİŞ
   ========================================= */

.values-honeycomb-section {
    padding: 80px 0 120px;
    background-color: #f8f9fa;
    text-align: center;
}

.honeycomb-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px; /* Petekler arası boşluğu biraz artırdık */
    margin-top: 60px;
}

/* PETEK ŞEKLİ (CSS CLIP-PATH SİHRİ) */
.honeycomb-cell {
    width: 260px; /* GENİŞLİK ARTIRILDI (Eskisi 220px idi) */
    height: 290px; /* YÜKSEKLİK ARTIRILDI (Eskisi 250px idi) */
    background: white;
    position: relative;
    /* Altıgen şekli */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.05));
    /* ÖNEMLİ: İçerik kenarlara çarpmasın diye ekstra boşluk */
    padding: 15px; 
}

/* Hover Efekti */
.honeycomb-cell:hover {
    background: #2c3e50;
    transform: scale(1.05);
    z-index: 10;
}

/* İÇERİK TASARIMI (YAZILARIN SIĞMASI İÇİN AYARLANDI) */
.honeycomb-content {
    text-align: center;
    /* İçerik kutusunu daraltıp merkeze aldık ki köşelerden taşmasın */
    width: 85%; 
    margin: 0 auto;
}

.h-number {
    display: block;
    font-size: 2rem; /* Numara boyutu biraz küçültüldü */
    font-weight: 800;
    color: #214823;
    opacity: 0.4;
    margin-bottom: 5px;
    transition: 0.3s;
}

.honeycomb-cell h3 {
    font-size: 1rem; /* Başlık boyutu ayarlandı */
    color: #333;
    margin-bottom: 8px;
    font-weight: 700;
    transition: 0.3s;
}

.honeycomb-cell p {
    font-size: 0.8rem; /* Yazı boyutu küçültüldü ki sığsın */
    color: #357544;
    line-height: 1.3; /* Satır aralığı sıkılaştırıldı */
    transition: 0.3s;
}

/* Hover olunca yazı renkleri değişsin */
.honeycomb-cell:hover .h-number { opacity: 1; color: #4CAF50; }
.honeycomb-cell:hover h3 { color: white; }
.honeycomb-cell:hover p { color: #ccc; }

/* --- ZİKZAK / ÇAPRAZ DİZİLİM AYARI --- */
@media (min-width: 950px) {
    /* ÇİFT SAYILI OLANLARI (2 ve 4) AŞAĞI İTER */
    .honeycomb-cell:nth-child(even) {
        margin-top: 70px; /* Aşağı itme mesafesi artırıldı */
    }
    
    /* TEK SAYILI OLANLARI (1, 3, 5) YUKARIDA TUT */
    .honeycomb-cell:nth-child(odd) {
        margin-top: 0;
    }
}

/* Mobilde düzgün dursun */
@media (max-width: 950px) {}
    .honeycomb-cell {
        margin-top: 0 !important;
        width: 100%;
        max-width: 320px;
        
    }/* =========================================
   FAALİYETLERİMİZ - MODERN ORTALANMIŞ TASARIM
   ========================================= */

.activity-section {
    padding: 80px 0;
    background-color: #fff;
    overflow: hidden;
}

.bg-grey {
    background-color: #f9fbfc; /* Eğitim bölümü için hafif farklı bir ton */
}

/* Konteyner: İçeriği ortalar ve genişliği sınırlar */
.activity-container {
    width: 90%;
    max-width: 1100px; /* İçerik 1100px'ten geniş olamaz */
    margin: 0 auto; /* Sayfanın tam ortasına getirir */
}

.activity-row {
    display: flex;
    align-items: center;
    gap: 60px; /* Yazı ve resim arası boşluk */
}

/* 'reverse' sınıfı eklenirse sırayı ters çevirir (Resim Sola) */
.activity-row.reverse {
    flex-direction: row-reverse;
}

/* --- YAZI KISMI --- */
.activity-text {
    flex: 1; /* Yarısını kapla */
}

.activity-text h2 {
    font-size: 2.2rem;
    color: #2c3e50;
    margin: 15px 0 20px;
    font-weight: 800;
}

.activity-text p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Renkli Etiketler (Badge) */
.badge-green, .badge-blue {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.badge-green { background: #e8f5e9; color: #4CAF50; }
.badge-blue { background: #e3f2fd; color: #2196F3; }

/* Şık Liste Tasarımı */
.fancy-list {
    list-style: none;
    padding: 0;
}

.fancy-list li {
    font-size: 1.05rem;
    color: #444;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.check-icon {
    color: #4CAF50;
    font-weight: bold;
    font-size: 1.2rem;
}

/* --- RESİM KISMI --- */
.activity-image {
    flex: 1; /* Yarısını kapla */
    position: relative;
    display: flex;
    justify-content: center;
}

.activity-image img {
    width: 100%;
    max-width: 500px; /* Resim çok devasa olmasın */
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
}

/* Arkadaki Dekoratif Daire */
.circle-decoration {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #4CAF50;
    border-radius: 50%;
    opacity: 0.1;
    z-index: 1;
    top: -20px;
    right: -20px; /* Resmin sağ üstünde dursun */
}

.circle-decoration.blue-circle {
    background-color: #2196F3;
    left: -20px; /* Maviyse sol üstte dursun */
    right: auto;
}

/* MOBİL UYUMLULUK */
@media (max-width: 900px) {
    .activity-row, .activity-row.reverse {
        flex-direction: column; /* Mobilde hep alt alta */
        text-align: center;
    }

    .fancy-list li {
        justify-content: center; /* Listeyi ortala */
    }

    .circle-decoration { display: none; }
}/* =========================================
   ANA SAYFA YENİ TASARIM (DÜZELTİLMİŞ & LOGO AYARLI)
   ========================================= */

/* 1. PARALLAX HERO ALANI */
.hero-parallax {
    /* Kapak resminin adını buraya yaz */
    background-image: url('kapak.png'); 
    
    /* RESMİN SABİT KALMASINI SAĞLAYAN KOD (PARALLAX) */
    background-attachment: fixed; 
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* Resmi ekrana yayar */
    
    width: 100%;
    height: 100vh; /* Tam ekran yüksekliği */
    
    position: relative;
    display: flex; /* İçeriği ortalamak için Flexbox */
    align-items: center; /* Dikey ortalama */
    justify-content: center; /* Yatay ortalama */
    text-align: center;
    color: white;
}

/* Siyah Perde (Yazılar okunsun diye) */
.hero-overlay {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)); /* Hafif karartma */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* --- LOGO AYARI (Sorunu Çözen Kısım) --- */
.hero-logo-white {
    width: 150px; /* LOGO GENİŞLİĞİNİ SABİTLEDİK (Artık devleşmeyecek) */
    height: auto;
    margin-bottom: 30px; /* Başlıkla arasına boşluk */
    
    /* Logoyu Bembeyaz Yapar (Footer'daki gibi) */
    filter: brightness(0) invert(1); 
    opacity: 0.9;
    
    /* Hafif gölge vererek "gömülü" hissi katalım */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Başlıklar */
.hero-main-title {
    font-size: 3.5rem; /* Başlık büyütüldü */
    font-weight: 800;
    margin-bottom: 15px;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.6);
    line-height: 1.1;
    max-width: 900px; /* Çok yayılmasın */
}

.hero-sub-slogan {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 60px; /* Söz ile arayı açtık */
    letter-spacing: 2px;
    color: #f8f8f8;
    text-transform: uppercase;
}

/* Leonardo da Vinci Sözü Kutusu */
.hero-quote-box {
    max-width: 750px;
    padding: 0 20px;
    border-left: 4px solid #4CAF50; /* Solda yeşil şerit */
    background: transparent; /* Arka plan yok, direkt resmin üstünde */
}

.quote-text {
    font-family: 'Playfair Display', serif; /* Tırnaklı zarif font */
    font-style: italic;
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 15px;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

.quote-author {
    font-size: 0.9rem;
    font-weight: 700;
    color: #4CAF50; /* İsim Yeşil */
    text-transform: uppercase;
    letter-spacing: 3px;
    display: block;
    margin-top: 10px;
}

/* 2. HAKKIMIZDA BÖLÜMÜ (DÜZELTİLMİŞ) */
.about-teaser-section {
    padding: 100px 0;
    background-color: #fff;
}

.teaser-wrapper {
    display: flex;
    align-items: center; /* Dikeyde ortala */
    justify-content: center;
    gap: 80px; /* Resim ve yazı arası boşluk */
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
}

.teaser-image {
    flex: 1;
    position: relative;
}

.teaser-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Şık gölge */
}

.teaser-content {
    flex: 1;
    text-align: left; /* Yazıları Sola Yasla (Kaymayı önler) */
}

.teaser-content h3 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 25px;
    font-weight: 800;
}

.teaser-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 35px;
    font-size: 1.1rem;
}

.btn-teaser {
    display: inline-block;
    padding: 16px 40px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(76, 175, 80, 0.3);
}

.btn-teaser:hover {
    background-color: #2c3e50; /* Üzerine gelince koyu lacivert olsun */
    transform: translateY(-5px); /* Hafif yukarı zıplasın */
    box-shadow: 0 15px 30px rgba(44, 62, 80, 0.4);
}

/* MOBİL UYUMLULUK */
@media (max-width: 900px) {
    .hero-main-title { font-size: 2.5rem; }
    .teaser-wrapper { flex-direction: column; text-align: center; }
    .teaser-content { text-align: center; } /* Mobilde ortala */
    .hero-parallax { background-attachment: scroll; } /* Mobilde parallax'ı kapat (performans için) */
}/* =========================================
   BOŞLUK DÜZELTMELERİ (BAĞLAM VE DEĞERLER ARASI)
   ========================================= */

/* 1. Yukarıdaki "Bağlamımız" kısmının altındaki boşluğu azalt */
#baglamimiz {
    padding-bottom: 20px !important; /* Eskiden 80-100px idi, 20'ye düşürdük */
}

/* 2. Aşağıdaki "Değerlerimiz" kısmının tepesindeki boşluğu azalt */
.values-honeycomb-section {
    padding-top: 30px !important; /* Başlık yukarı yanaşsın */
}

/* 3. "Değerlerimiz" Başlığı ile Petekler arasındaki mesafeyi de biraz kısalım */
.honeycomb-grid {
    margin-top: 40px !important; /* Daha kompakt dursun */
}/* =========================================
   İLKELERİMİZ - BOŞLUK KAPATMA
   ========================================= */

/* 1. Değerlerimiz (Petekler) bölümünün altındaki fazlalığı al */
.values-honeycomb-section {
    padding-bottom: 30px !important; /* Eskiden çok fazlaydı, kıstık */
}

/* 2. İlkelerimiz bölümünün üstündeki boşluğu sıfırla */
#ilkelerimiz {
    padding-top: 20px !important; /* Başlık hemen başlamasın diye azıcık pay */
    margin-top: 0 !important;
}

/* 3. Eğer hala boşluk varsa bölümü zorla yukarı çek (Opsiyonel) */
/* Gerekirse buradaki -20px değerini artırabilirsin */
#ilkelerimiz {
    margin-top: -20px !important; 
}/* =========================================
   İLKELERİMİZ - MODERN & FERAH TASARIM
   ========================================= */

.principles-modern-section {
    padding: 60px 0 100px;
    background-color: #fdfdfd; /* Çok hafif bir gri ton */
}

/* Ferah Izgara (Grid) Yapısı - DÜZELTİLMİŞ (3x3) */
.principles-grid {
    display: grid;
    /* ÖNEMLİ DEĞİŞİKLİK: Zorla 3 sütun olsun dedik */
    grid-template-columns: repeat(3, 1fr); 
    
    gap: 40px; /* Kartlar arası boşluk */
    margin-top: 50px;
    
    /* Sayfaya ortalamak ve çok yayılmasını engellemek için: */
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Tablet ve Küçük Laptoplar İçin (2 Sütun Olsun) */
@media (max-width: 1024px) {
    .principles-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 yan yana */
        width: 95%;
    }
}

/* Telefonlar İçin (Tek Sütun Olsun) */
@media (max-width: 700px) {
    .principles-grid {
        grid-template-columns: 1fr; /* Alt alta */
    }
}

/* Kart Tasarımı */
.principle-card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02); /* Çok hafif gölge */
    transition: all 0.4s ease; /* Yumuşak geçiş */
    position: relative;
    top: 0;
}

/* Hover (Üzerine Gelince) Efekti */
.principle-card:hover {
    top: -10px; /* Kart yukarı doğru süzülür */
    box-shadow: 0 20px 50px rgba(76, 175, 80, 0.2); /* Yeşil gölge oluşur */
    border-bottom: 5px solid #4CAF50; /* Altına yeşil çizgi gelir */
}

/* İkon Kutusu */
.icon-box {
    font-size: 3rem; /* İkon boyutu */
    margin-bottom: 20px;
    display: inline-block;
    padding: 20px;
    background-color: #f4f9f4; /* Açık yeşil daire */
    border-radius: 50%;
    transition: 0.4s;
    width: 90px;
    height: 90px;
    line-height: 50px; /* Dikey ortalama */
}

/* Hover olunca ikonun hareketi */
.principle-card:hover .icon-box {
    background-color: #4CAF50; /* Daire koyu yeşil olur */
    color: white; /* İkon beyaz olur (eğer fontsa) */
    transform: rotateY(180deg); /* Havalı bir dönme efekti */
}

/* Başlık */
.principle-card h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Açıklama Yazısı */
.principle-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7; /* Satır aralığı ferah */
}

/* Mobilde boşluk ayarı */
@media (max-width: 768px) {
    .principles-grid {
        gap: 20px;
        padding: 0 20px;
    }
}/* =========================================
   BOŞLUK DÜZELTMESİ: İLKELER & EKİP ARASI
   ========================================= */

/* İlkelerimiz bölümünün alt boşluğunu azalt */
.principles-modern-section {
    padding-bottom: 20px !important; /* Eskiden 100px idi, düşürdük */
}

/* Ekibimiz bölümünün üst boşluğunu sıfırla */
#ekibimiz, .team-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Eğer hala boşluk varsa ekip bölümünü zorla yukarı çek */
#ekibimiz {
    margin-top: -30px !important; 
}/* =========================================
   GENEL KÜÇÜLTME & KİBARLAŞTIRMA AYARLARI
   ========================================= */

/* 1. TÜM SİTENİN YAZI BOYUTUNU ORANTILI KÜÇÜLT */
html {
    font-size: 15px; /* Standart genelde 16px'tir. 14px veya 15px daha kibar durur */
}

/* 2. MENÜ YAZILARINI KÜÇÜLT VE KİBARLAŞTIR */
.nav-links li a {
    font-size: 0.9rem !important; /* Menü yazıları küçülsün */
    padding: 15px 12px !important; /* Aralarındaki boşluk azalsın */
    font-weight: 500 !important; /* Çok kalın olmasın */
}

/* 3. AÇILIR MENÜLERİ DE KÜÇÜLT */
.dropdown-content a {
    font-size: 0.85rem !important;
    padding: 10px 20px !important;
}

/* 4. KOCAMAN BAŞLIKLARI BİRAZ TIRAŞLA */
.section-title {
    font-size: 2rem !important; /* Bölüm başlıkları (Hakkımızda vb.) */
    margin-bottom: 30px !important;
}

h1, h2, h3 {
    letter-spacing: -0.5px; /* Harfleri hafif birbirine yaklaştırır, modern durur */
}

/* 5. GÖVDE YAZILARINI (Paragrafları) DENGELİ YAP */
p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}/* =========================================
   DEĞERLERİMİZ - KÜÇÜLTÜLMÜŞ & 3-2 PETEK DÜZENİ
   ========================================= */

/* 1. KAPSAYICIYI DARALT (Zorla alt satıra geçsinler) */
.honeycomb-grid {
    max-width: 800px !important; /* Genişliği kısıtladık ki 4. kutu sığmayıp aşağı düşsün */
    margin: 40px auto 0 !important; /* Ortala */
    gap: 15px !important; /* Aralarındaki boşluğu azalttık */
    padding-bottom: 40px;
}

/* 2. PETEKLERİ KÜÇÜLT */
.honeycomb-cell {
    width: 250px !important;  /* Eskiden 260px idi */
    height: 280px !important; /* Eskiden 290px idi */
    margin-bottom: 0 !important; /* Eski marjları sıfırla */
    padding: 10px !important;
}

/* 3. İÇERİK YAZILARINI KÜÇÜLT (Sığması için) */
.h-number { font-size: 1.7rem !important; margin-bottom: 0 !important; }
.honeycomb-cell h3 { font-size: 1 rem !important; margin-bottom: 5px !important; }
.honeycomb-cell p { font-size: 1 rem !important; line-height: 1.2 !important; }

/* 4. ESKİ ZİKZAK AYARINI İPTAL ET */
.honeycomb-cell:nth-child(even) { margin-top: 0 !important; }

/* 5. YENİ DÜZEN: İLK 3 TANESİ NORMAL DURSUN */
/* (Buna özel kod gerekmez, flexbox halleder) */

/* 6. ALTTAKİ 2 TANESİ (4 ve 5) YUKARI GİRSİN (İç içe geçme efekti) */
.honeycomb-cell:nth-child(n+4) {
    margin-top: -50px !important; /* İşte sihirli kod! Üsttekilerin arasına girer */
}

/* Mobilde yine tek sütun olsun */
@media (max-width: 700px) {
    .honeycomb-grid { max-width: 100% !important; }
    .honeycomb-cell { 
        width: 100% !important; 
        height: auto !important; 
        margin-top: 0 !important;
        max-width: 300px;
        clip-path: none !important; /* Mobilde kare olsun */
        border-radius: 15px;
    }
}/* =========================================
   İLKELERİMİZ - HAFİF KÜÇÜLTME & KİBARLAŞTIRMA
   ========================================= */

/* 1. KARTLAR ARASI BOŞLUĞU AZALT */
.principles-grid {
    gap: 25px !important; /* Eskiden 40px idi, birbirine yaklaştırdık */
    max-width: 1000px !important; /* Toplam genişliği biraz daralttık */
}

/* 2. KARTIN İÇ BOŞLUĞUNU VE BOYUTUNU AZALT */
.principle-card {
    padding: 25px 20px !important; /* Daha az iç boşluk */
}

/* 3. İKONLARI (DAİRELERİ) KÜÇÜLT */
.icon-box {
    width: 70px !important;  /* Eskiden 90px idi */
    height: 70px !important;
    line-height: 30px !important; /* İkonu ortalamak için */
    font-size: 2rem !important;   /* İkonun kendisi de küçülsün */
    padding: 15px !important;
    margin-bottom: 15px !important;
}

/* 4. BAŞLIK VE YAZILARI KİBARLAŞTIR */
.principle-card h3 {
    font-size: 1.1rem !important; /* Başlık biraz daha zarif olsun */
    margin-bottom: 10px !important;
}

.principle-card p {
    font-size: 0.85rem !important; /* Açıklama yazısı küçüldü */
    line-height: 1.5 !important;
}/* =========================================
   GELİŞMELER VİTRİNİ (KARTLAR)
   ========================================= */

.news-feed-section {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.section-subtitle {
    text-align: center;
    margin-bottom: 50px;
    color: #777;
    font-size: 1.1rem;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive Grid */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.news-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    text-decoration: none; /* Link çizgisini kaldır */
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

.news-image {
    height: 220px;
    background-size: cover;
    background-position: center;
    background-color: #eee;
}

.news-content {
    padding: 25px;
    flex-grow: 1; /* Kartların boyunu eşitler */
    display: flex;
    flex-direction: column;
}

.news-date {
    font-size: 0.8rem;
    color: #999;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

.news-content h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 700;
}

.news-content p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.read-more {
    margin-top: auto; /* En alta iter */
    color: #4CAF50;
    font-weight: 700;
    font-size: 0.9rem;
    transition: margin-left 0.3s;
}

.news-card:hover .read-more {
    margin-left: 10px; /* Okuyunca sağa kayar */
}


/* =========================================
   GELİŞMELER DETAY SAYFASI (ZİKZAK TASARIM)
   ========================================= */

.detail-header {
    background: linear-gradient(135deg, #2c3e50, #4CAF50);
    padding: 80px 20px;
    text-align: center;
    color: white;
}

.detail-header h1 { font-size: 3rem; margin-bottom: 10px; }

.timeline-container {
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 20px;
}

/* HABER SATIRI */
.timeline-row {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 40px 0;
    /* Tıkladığında başlık menünün altında kalmasın diye: */
    scroll-margin-top: 100px; 
}

/* TERS SATIR (Resim sağda olsun) */
.timeline-row.reverse {
    flex-direction: row-reverse; /* Yönü ters çevirir */
}

/* Resim Alanı */
.timeline-img {
    flex: 1;
    height: 350px;
}

.timeline-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    transition: 0.3s;
}

.timeline-row:hover .timeline-img img {
    transform: scale(1.02); /* Hafif büyür */
}

/* Yazı Alanı */
.timeline-text {
    flex: 1;
}

.date-badge {
    display: inline-block;
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.date-badge.blue { background-color: #2196F3; }
.date-badge.purple { background-color: #9C27B0; }
.date-badge.green { background-color: #4CAF50; }

.timeline-text h2 {
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 20px;
    font-weight: 800;
}

.timeline-text p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* BAĞLANTI ÇİZGİSİ (NAZİK AYRAÇ) */
.connector-line {
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, #ddd, transparent);
    margin: 0 auto; /* Ortala */
    display: block;
}

/* MOBİL UYUMLULUK */
@media (max-width: 800px) {
    .timeline-row, .timeline-row.reverse {
        flex-direction: column; /* Alt alta */
        gap: 30px;
        text-align: center;
    }
    .timeline-img { height: 250px; width: 100%; }
    .timeline-text h2 { font-size: 1.8rem; }
    .connector-line { height: 40px; }
}/* =========================================
   GELİŞMELER DETAY - HEADER (ZORLA ORTALAMA)
   ========================================= */

.detail-header {
    background: linear-gradient(135deg, #2c3e50, #4CAF50); /* Yeşil Geçiş */
    
    /* ZORLA ORTALAMA KODLARI 👇 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Dikeyde ortalar */
    align-items: center !important;     /* Yatayda ortalar */
    
    height: 350px !important; /* Yüksekliği sabitledik */
    padding: 0 20px !important;
    text-align: center !important;
    color: white !important;
    
    margin-top: 0 !important; /* Yukarıdaki boşluğu sil */
    margin-bottom: 60px !important; /* Aşağıdaki içerikle mesafeyi koru */
}

/* Yazıların boyutlarını da garantiye alalım */
.detail-header h1 { 
    margin: 0 0 20px 0 !important; /* Altına azıcık boşluk ver */
    padding: 0 !important;
    font-size: 3rem !important;
    line-height: 1.2 !important;
}

.detail-header p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.3rem !important;
    opacity: 0.9;
}/* =========================================
   ÜRÜNLERİMİZ - MODERN KART & POPUP TASARIMI
   ========================================= */

/* 1. BAŞLIK ALANI (Hero) */
.products-hero {
    background-image: url('urunler-kapak.png'); /* Arka plan resmin */
    background-size: cover;
    background-position: center;
    padding: 100px 20px;
    text-align: center;
    color: white;
    position: relative;
}

/* Resmin üzerine hafif siyah perde */
.products-hero::before {
    content: '';
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.5);
}

.products-hero h1, .products-hero p {
    position: relative;
    z-index: 2; /* Yazılar perdenin üstüne çıksın */
}

.products-hero h1 { font-size: 3rem; margin-bottom: 15px; }
.products-hero p { font-size: 1.2rem; max-width: 600px; margin: 0 auto; }


/* 2. KART IZGARASI (GRID) */
.products-container {
    display: grid;
    /* Otomatik sığdır: Ekran genişse yan yana, darsa alt alta */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: -50px auto 100px; /* -50px ile yukarı bindiriyoruz (Estetik Dokunuş) */
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

/* 3. TEKİL KART TASARIMI */
.product-card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* Yumuşak gölge */
    cursor: pointer; /* Tıklanabilir el işareti */
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.product-card:hover {
    transform: translateY(-10px); /* Yukarı kalkar */
    box-shadow: 0 25px 50px rgba(76, 175, 80, 0.25); /* Yeşil gölge */
    border-color: #4CAF50;
}

.card-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.product-card h3 {
    font-size: 1.4rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.product-card p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.btn-detail {
    background: #e8f5e9;
    color: #4CAF50;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.product-card:hover .btn-detail {
    background: #4CAF50;
    color: white;
}

/* 4. POPUP (MODAL) PENCERE TASARIMI */
.modal-overlay {
    position: fixed; /* Ekranı kaplar */
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); /* Arka planı karart */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Başlangıçta Görünmez */
    opacity: 0; 
    visibility: hidden;
    transition: 0.3s;
}

/* JS ile 'active' sınıfı eklenince görünür olur */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: white;
    width: 90%;
    max-width: 500px;
    padding: 40px;
    border-radius: 20px;
    position: relative;
    text-align: left;
    transform: scale(0.7); /* Küçük başla */
    transition: 0.3s;
}

/* Açılınca büyüyerek gelsin */
.modal-overlay.active .modal-content {
    transform: scale(1);
}

.close-btn {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #aaa;
}

.close-btn:hover { color: red; }

.modal-subtitle {
    color: #4CAF50;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: block;
}

.modal-text {
    line-height: 1.8;
    color: #555;
}

.btn-modal-action {
    margin-top: 25px;
    background: #2c3e50;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
    font-size: 1rem;
}/* =========================================
   HİZMETLERİMİZ - YENİ TASARIM
   ========================================= */

/* 1. BAŞLIK ALANI */
.services-hero {
    background-image: url('kapak.jpg'); /* Ana sayfa kapağını veya başka bir lab görselini kullan */
    background-size: cover;
    background-position: center;
    position: relative;
    height: 300px; /* Sabit yükseklik */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-overlay-blue {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.8), rgba(76, 175, 80, 0.7)); /* Mavi-Yeşil Geçiş */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.services-hero h1 { font-size: 3rem; margin-bottom: 10px; }
.services-hero p { font-size: 1.2rem; opacity: 0.9; }

/* 2. KARTLAR ALANI */
.services-container {
    max-width: 1100px;
    margin: -60px auto 100px; /* Yukarı bindirme efekti */
    padding: 0 20px;
    display: grid;
    /* Ekran genişse 3 tane yan yana, darsa alt alta */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 5;
}

/* 3. TEKİL KART */
.service-card {
    background: white;
    padding: 50px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    border-bottom: 5px solid transparent; /* Alt çizgi için hazırlık */
}

/* Hover Efekti */
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(33, 150, 243, 0.2);
    border-bottom-color: #2196F3; /* Altı mavi olsun */
}

/* İkon Kutusu */
.service-icon-box {
    width: 80px;
    height: 80px;
    background: #e3f2fd; /* Açık mavi */
    color: #2196F3;
    font-size: 2.5rem;
    line-height: 80px;
    border-radius: 50%;
    margin: 0 auto 25px;
    transition: 0.3s;
}

.service-card:hover .service-icon-box {
    background: #2196F3;
    color: white;
    transform: rotate(10deg);
}

.service-card h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.service-card p {
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
}

.btn-service-detail {
    background: none;
    border: 2px solid #2196F3;
    color: #2196F3;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    font-size: 0.9rem;
}

.service-card:hover .btn-service-detail {
    background: #2196F3;
    color: white;
}

/* 4. MODAL İÇERİK AYARLARI */
.modal-header h2 {
    color: #2c3e50;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.modal-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
    text-align: left;
}

.modal-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    color: #555;
    font-size: 1rem;
}

/* Menüden gelince başlığın altında kalmasın diye (Scroll Margin) */
#danismanlik, #biyolojik, #onarici {
    scroll-margin-top: 150px; /* Menü yüksekliği kadar pay bırakır */
}/* =========================================
   İLETİŞİM SAYFASI - MODERN TASARIM
   ========================================= */

/* 1. BAŞLIK ALANI */
.contact-hero {
    background-image: url('kapak.jpg'); /* Ana görselin */
    background-size: cover;
    background-position: center;
    height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-overlay-dark {
    background: linear-gradient(135deg, #2c3e50, #4CAF50); /* Yeşil Geçiş */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.contact-hero h1 { font-size: 3rem; margin-bottom: 10px; }
.contact-hero p { font-size: 1.2rem; opacity: 0.9; }

/* 2. ANA KUTU (GRID YAPISI) */
.contact-section {
    padding: 60px 20px;
    background-color: #f8f9fa; /* Arka plan çok hafif gri olsun */
}

.contact-wrapper {
    max-width: 1100px;
    margin: -80px auto 0; /* Yukarı bindirme efekti */
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1); /* Havalı gölge */
    overflow: hidden; /* Köşelerden taşmayı engelle */
    display: flex; /* Yan yana diz */
    position: relative;
    z-index: 10;
}

/* 3. SOL TARAF: FORM */
.contact-form-area {
    flex: 3; /* Alanın %60'ını kaplasın */
    padding: 50px;
}

.contact-form-area h2 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 2rem;
}

.form-subtitle {
    color: #666;
    margin-bottom: 30px;
}

/* Form Elemanları */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
    font-size: 0.9rem;
}

.modern-form input, 
.modern-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif; /* Sitenin fontu */
    font-size: 0.95rem;
    background-color: #fcfcfc;
    transition: 0.3s;
}

/* Tıklayınca Yeşil Çizgi Çıksın */
.modern-form input:focus, 
.modern-form textarea:focus {
    border-color: #4CAF50;
    background-color: white;
    outline: none;
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.1);
}

.btn-send {
    background: linear-gradient(135deg, #2c3e50, #4CAF50); /* Yeşil Geçiş */
    color: white;
    padding: 15px 35px;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.3s;
    width: 100%; /* Buton tam genişlik olsun */
}

.btn-send:hover {
    background-color: #4CAF50;
    transform: translateY(-3px);
}

/* 4. SAĞ TARAF: BİLGİLER & HARİTA */
.contact-info-area {
    flex: 2; /* Alanın %40'ını kaplasın */
    background-color: #2c3e50; /* Koyu Lacivert Arka Plan */
    color: white;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-card {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    background: rgba(255,255,255,0.1); /* Hafif şeffaf kutu */
    padding: 20px;
    border-radius: 15px;
}

.info-icon {
    font-size: 2rem;
    margin-right: 20px;
}

.info-details h3 {
    font-size: 0.9rem;
    color: #bbb; /* Başlıklar silik gri */
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-details p {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

/* Harita Kutusu */
.map-container {
    margin-top: 20px;
    border-radius: 15px;
    overflow: hidden; /* Haritanın köşelerini yuvarlar */
    border: 5px solid rgba(255,255,255,0.2); /* Şık çerçeve */
    height: 100%;
    min-height: 200px;
}

/* 5. MOBİL UYUMLULUK */
@media (max-width: 900px) {
    .contact-wrapper {
        flex-direction: column; /* Mobilde alt alta */
        margin-top: 0;
    }
    .contact-info-area {
        order: -1; /* Mobilde önce iletişim bilgileri görünsün */
    }
}/* =========================================
   FORM DURUM MESAJI (BAŞARI/HATA)
   ========================================= */

.form-status-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    display: none; /* Başlangıçta gizli */
    transition: all 0.3s ease;
}

/* Başarılı Olduğunda Bu Tasarım Çıkacak */
.form-status-message.success {
    display: block;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Hata Olursa Bu Tasarım Çıkacak */
.form-status-message.error {
    display: block;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}/* =========================================
   EKİP MODALLARI - DÜZELTİLMİŞ TASARIM
   ========================================= */

/* 1. ÖNCELİKLE PENCERELERİ GİZLE (En Önemli Kısım) */
.team-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); /* Arka planı karart */
    z-index: 9999;
    display: none; /* BAŞLANGIÇTA GİZLİ OLSUN */
    justify-content: center;
    align-items: center;
}

/* Sadece 'active' sınıfı eklenince görünür olsun */
.team-modal-overlay.active {
    display: flex;
}

/* 2. PENCERE İÇERİĞİ (GENİŞ & FOTOĞRAFLI) */
.team-modal-content {
    background: white;
    width: 90%;
    max-width: 900px; /* Geniş bir pencere */
    padding: 40px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

/* 3. İÇ DÜZEN (SOLDA FOTO - SAĞDA YAZI) */
.modal-flex-layout {
    display: flex;
    gap: 40px; /* Foto ile yazı arası boşluk */
    align-items: start;
}

/* Sol Taraf: Fotoğraf */
.modal-img-col {
    flex: 0 0 250px; /* Fotoğraf alanı sabit 250px olsun */
    display: flex;
    justify-content: center;
}

.modal-img-col img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 50%; /* Yuvarlak */
    border: 5px solid #f8f8f8;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Sağ Taraf: Bilgi */
.modal-info-col {
    flex: 1; /* Kalan alanı doldur */
    text-align: left;
}

.modal-info-col h2 {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 5px;
}

.modal-role {
    color: #4CAF50;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.modal-bio-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 30px;
    max-height: 300px; /* Çok uzunsa kaydırma çubuğu çıksın */
    overflow-y: auto;
}

/* 4. BUTONLAR (YAN YANA) */
.modal-social-buttons {
    display: flex;
    gap: 15px;
    margin-top: auto; /* En alta it */
}

.btn-avesis, .btn-linkedin {
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px; /* İkon ile yazı arası */
    transition: 0.3s;
    color: white;
}

.btn-avesis { background-color: #a31d24; } /* Bordo */
.btn-linkedin { background-color: #0077b5; } /* Mavi */

.btn-avesis:hover, .btn-linkedin:hover {
    transform: translateY(-3px);
    opacity: 0.9;
}

/* MOBİL UYUMLULUK */
@media (max-width: 800px) {
    .modal-flex-layout {
        flex-direction: column; /* Mobilde alt alta */
        align-items: center;
        text-align: center;
    }
    .modal-info-col { text-align: center; }
    .modal-social-buttons { justify-content: center; }
}/* =========================================
   EKİP KARTLARI DÜZELTME (YUVARLAK & EŞİT)
   ========================================= */

/* 1. KARTLARIN DİZİLİMİ */
.team-grid {
    display: grid;
    /* Kartları ekrana sığacak şekilde yan yana diz */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 40px;
    margin-top: 40px;
}

/* 2. KARTIN KENDİSİ */
.team-card {
    background: white;
    padding: 40px 20px;
    border-radius: 20px; /* Kartın köşelerini yuvarla */
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Çok hafif gölge */
    transition: transform 0.3s ease;
    border: 1px solid #f0f0f0;
}

.team-card:hover {
    transform: translateY(-10px); /* Üstüne gelince hafif yukarı kalksın */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* 3. RESİM ÇERÇEVESİ (EN ÖNEMLİ KISIM) */
.team-img {
    width: 180px;        /* Hepsi 180px genişliğinde olsun */
    height: 180px;       /* Hepsi 180px yüksekliğinde olsun */
    margin: 0 auto 25px; /* Ortala ve aşağıdan boşluk ver */
    border-radius: 50%;  /* TAM YUVARLAK YAP */
    overflow: hidden;    /* Dışarı taşan kısımları kes */
    border: 5px solid #f5f5f5; /* Resmin etrafına gri çerçeve */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 4. RESMİN KENDİSİ */
.team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Resmi sündürme, kutuya doldur (crop) */
    object-position: top center; /* İnsanların yüzüne odaklan (yukarıdan başla) */
}

/* 5. İSİM VE UNVANLAR */
.team-card h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    margin-bottom: 5px;
    font-weight: 700;
}

.team-card .role {
    color: #4CAF50; /* Yeşil renk */
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* 6. BUTON */
.btn-bio {
    background-color: #2c3e50;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.3s;
}

.btn-bio:hover {
    background-color: #4CAF50; /* Üstüne gelince yeşil olsun */
}/* =========================================
   AÇILIR PENCERE (MODAL) RESİM DÜZELTME
   ========================================= */

/* Modal içindeki resimlerin bulunduğu sütun */
.modal-img-col {
    /* Fotoğrafın duracağı alanı netleştirelim */
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important; /* Resmi yukarı hizala */
}

/* Modal içindeki resmin KENDİSİ */
.modal-img-col img {
    width: 220px !important;  /* Genişlik sabit */
    height: 220px !important; /* Yükseklik sabit (Kare kutu) */

    /* İŞTE YAMULMAYI ÖNLEYEN SİHİRLİ KOD 👇 */
    /* Resmi sündürme, kutuyu dolduracak şekilde kes (crop) */
    object-fit: cover !important;

    /* Genellikle yüzler yukarıda olduğu için odak noktasını yukarı alalım */
    object-position: top center !important;

    border-radius: 50% !important; /* Tam yuvarlak yap */
    border: 5px solid #f8f8f8 !important; /* Şık çerçeve */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; /* Hafif gölge */
}
/* =========================================
   PROJELER - ÇOK YAKINDA SAYFASI
   ========================================= */

/* Arka planı hafif gri yapalım ki beyaz kart öne çıksın */
.coming-soon-container {
    min-height: 500px; /* Sayfa boş görünmesin */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background-color: #f9fbf9; /* Çok açık yeşilimsi gri */
    background-image: radial-gradient(#e8f5e9 1px, transparent 1px); /* Hafif puantiye deseni */
    background-size: 20px 20px;
}

/* Ortadaki Beyaz Kart */
.coming-soon-card {
    background: white;
    padding: 60px 40px;
    border-radius: 30px; /* Yumuşak köşeler */
    text-align: center;
    max-width: 600px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    border: 1px solid #fff;
    position: relative;
    overflow: hidden;
}

/* Kartın üstüne ince yeşil çizgi */
.coming-soon-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 6px;
    background: linear-gradient(to right, #2c3e50, #4CAF50);
}

/* İkon (Nefes Alma Animasyonlu) */
.sprouting-icon {
    font-size: 5rem;
    margin-bottom: 30px;
    display: inline-block;
    animation: pulse-grow 2s infinite ease-in-out;
}

/* Başlık */
.coming-soon-card h2 {
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 20px;
    font-weight: 700;
}

/* Açıklama Yazısı */
.coming-soon-card p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* Buton */
.btn-home-return {
    text-decoration: none;
    background-color: #4CAF50;
    color: white;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: bold;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(76, 175, 80, 0.2);
}

.btn-home-return:hover {
    background-color: #388E3C;
    transform: translateY(-3px);
}

/* ANİMASYON: İkonun büyüyüp küçülmesi (Canlılık hissi) */
@keyframes pulse-grow {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(76,175,80,0.4)); }
    100% { transform: scale(1); }
}/* =========================================
   PROJELER SAYFASI - EKSİK OLAN KAPAK AYARI
   ========================================= */

.projects-hero {
    /* Arka plana istediğin bir resim koyabilirsin */
    background-image: url('kapak.png'); 
    background-size: cover;
    background-position: center;
    
    /* Yükseklik ve Hizalama */
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
    margin-bottom: 0; /* Altındaki kısımla birleşsin */
}

/* Resmin üzerine koyu perde (Yazı okunsun diye) */
.hero-overlay-dark {
    background: rgba(44, 62, 80, 0.7); /* Koyu mavi-yeşil tonlu perde */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.projects-hero h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.projects-hero p {
    font-size: 1.2rem;
    opacity: 0.9;
    font-weight: 300;
}/* =========================================
   HİZMETLER - KURUMSAL TASARIM
   ========================================= */

/* 1. BAŞLIK ALANI */
.services-hero {
    background-color: #f8f9fa; /* Çok açık gri arka plan */
    padding: 80px 20px 40px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}

.services-hero h1 {
    color: #2c3e50;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.services-hero p {
    color: #6c757d;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* 2. GRID YAPISI */
.services-section {
    padding: 60px 20px;
    background-color: #ffffff;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 3. YENİ PROFESYONEL KARTLAR */
.pro-service-card {
    background: white;
    border: 1px solid #e1e4e8; /* Çok ince, zarif çerçeve */
    padding: 40px 30px;
    border-radius: 8px; /* Hafif yuvarlatılmış köşe (aşırı değil) */
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    top: 0;
}

/* Hover Efekti: Kart hafifçe yukarı kalkar ve gölgesi artar */
.pro-service-card:hover {
    top: -5px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: #4CAF50; /* Hover'da yeşil çerçeve */
}

/* 4. İKON TASARIMI */
.icon-wrapper {
    width: 70px;
    height: 70px;
    background-color: #e8f5e9; /* Açık yeşil zemin */
    color: #2e7d32; /* Koyu yeşil ikon rengi */
    border-radius: 12px; /* Kareye yakın modern form */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem; /* İkon boyutu */
    margin-bottom: 25px;
    transition: 0.3s;
}

.pro-service-card:hover .icon-wrapper {
    background-color: #2e7d32;
    color: white; /* Hover'da renkler tersine dönsün */
}

/* 5. METİNLER */
.pro-service-card h3 {
    font-size: 1.4rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
}

.pro-service-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

.read-more {
    font-size: 0.9rem;
    font-weight: bold;
    color: #2e7d32;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 6. MODAL İÇİ DÜZENLEMELER */
.modal-header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.modal-icon {
    font-size: 1.8rem;
    color: #2e7d32;
}

.modal-body ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.modal-body li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #444;
}/* =========================================
   YENİ KOYU TASARIM (HİZMETLER & İLETİŞİM)
   ========================================= */

/* 1. HİZMETLERİMİZ SAYFASI BAŞLIĞI */
.services-hero {
    background-color: #2c3e50 !important; /* İŞTE O KOYU GRİMSİ MAVİ */
    color: #ffffff !important;            /* Yazılar Bembeyaz */
    padding: 80px 20px 60px;
    text-align: center;
    border-bottom: none; /* Çizgiyi kaldırdık, gerek kalmadı */
}

/* Başlık Rengi */
.services-hero h1 {
    color: #ffffff !important; /* Başlık tam beyaz */
    font-size: 2.8rem;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Açıklama Yazısı Rengi */
.services-hero p {
    color: #ecf0f1 !important; /* Hafif kırık beyaz (Göz yormaz) */
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 300;
}

/* 2. İLETİŞİM SAYFASI BAŞLIĞI (AYNI RENK) */
/* İletişim sayfasındaki başlık kutusuna bu özellikleri veriyoruz */
.contact-hero, .page-header {
    background-color: #2c3e50 !important; /* Aynı koyu renk */
    color: #ffffff !important;
    padding: 60px 20px;
    text-align: center;
}

.contact-hero h1, .page-header h1 {
    color: #ffffff !important;
    margin-bottom: 10px;
}

.contact-hero p, .page-header p {
    color: #ecf0f1 !important;
}/* =========================================
   ÜRÜNLERİMİZ SAYFASI - YENİ PROFESYONEL TASARIM
   ========================================= */

/* =========================================
   ÜRÜNLER SAYFASI - TAM GÖRSEL AYARI (KESİN ÇÖZÜM)
   ========================================= */

.products-hero-banner {
    position: relative; /* İçindeki yazıları hizalamak için gerekli */
    width: 100%;
    height: auto;       /* Yükseklik otomatik olsun, resme göre ayarlansın */
    overflow: hidden;   /* Taşmaları engelle */
    display: block;     /* Blok şeklinde dursun */
}

/* 1. GERÇEK RESİM AYARI */
.hero-bg-real {
    width: 100%;        /* Ekran genişliğini tam kapla */
    height: auto;       /* Yüksekliği orantılı ayarla (GÖRSEL BOZULMAZ) */
    display: block;     /* Altında boşluk kalmasın */
    
    /* Eğer görselin çok uzunsa ve yine de biraz yukarı kaysın istersen: */
    /* margin-top: -50px; gibi eksi bir değer vererek yukarı çekebilirsin */
}

/* 2. ÜZERİNDEKİ YAZILAR VE PERDE */
.hero-overlay {
    /* Yazıları resmin tam üzerine oturt */
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Koyu Perde Rengi */
    background: rgba(44, 62, 80, 0.6); 
    
    /* Yazıları Ortala */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

/* Başlık ve Yazı Ayarları (Aynı Kalıyor) */
.hero-overlay h1 {
    color: #ffffff;
    font-size: 3rem; /* Mobilde çok büyük olmaması için biraz kıstık */
    font-weight: 800;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-overlay p {
    color: #f1f1f1;
    font-size: 1.2rem;
    max-width: 800px;
    font-weight: 400;
}

/* MOBİL AYARI: Telefondan bakınca yazı çok küçülmesin */
@media (max-width: 768px) {
    .products-hero-banner {
        min-height: 300px; /* Mobilde resim çok kısalırsa en az 300px olsun */
    }
    .hero-bg-real {
        height: 100%;     /* Mobilde kutuyu doldur */
        object-fit: cover; /* Mobilde mecburen biraz kırpabilir */
    }
}

/* Resmin üzerindeki koyu perde */
.hero-overlay {
    background: rgba(44, 62, 80, 0.75); /* Koyu lacivert-gri perde */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.hero-overlay h1 {
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-overlay p {
    color: #ecf0f1;
    font-size: 1.3rem;
    max-width: 700px;
    font-weight: 300;
}

/* 2. KATEGORİ KARTLARI ALANI */
.product-categories-section {
    padding: 80px 20px;
    background-color: #f9fbfd; /* Çok hafif, temiz bir gri arka plan */
    margin-top: -50px; /* Kartları görselin üzerine hafifçe bindir */
    position: relative;
    z-index: 2;
}

/* =========================================
   2x2 ORTALANMIŞ IZGARA SİSTEMİ
   ========================================= */

.category-grid {
    display: grid;
    /* Masaüstünde TAM OLARAK 2 sütun olsun (2 üstte, 2 altta) */
    grid-template-columns: repeat(2, 1fr); 
    
    gap: 40px; /* Kartlar arası boşluk */
    
    /* Sayfada ortalamak ve çok yayılmasını engellemek için */
    max-width: 900px; /* Genişliği sınırladık ki kartlar dev gibi olmasın */
    margin: 0 auto;   /* SAĞDAN SOLDAN ORTALA */
}

/* MOBİL AYARI: Telefonda yine alt alta (tek sütun) olsun */
@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütuna düş */
        max-width: 100%;
    }
}

/* Kartın Kendisi */
.category-card {
    background: white;
    padding: 50px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* Yumuşak, derin gölge */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    border: 2px solid transparent; /* Hover'da renk gelecek */
}

.category-card:hover {
    transform: translateY(-10px);
    border-color: #4CAF50; /* Hover'da yeşil çerçeve */
    box-shadow: 0 25px 50px rgba(76, 175, 80, 0.15);
}

/* Yuvarlak İkon Alanı */
.cat-icon-circle {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #4CAF50, #2E7D32); /* Yeşil gradyan */
    color: white;
    border-radius: 50%; /* Tam yuvarlak */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 30px; /* Ortala ve alt boşluk ver */
    box-shadow: 0 10px 20px rgba(46, 125, 50, 0.3);
}

.category-card h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
}

.category-card p {
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Detay Butonu Görünümlü Yazı */
.btn-details {
    color: #4CAF50;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: 0.3s;
}

.category-card:hover .btn-details {
    color: #2E7D32;
    letter-spacing: 1.5px; /* Hover'da harfler açılsın */
}

/* 3. YENİ MODAL TASARIMI (ÇOK DAHA TEMİZ) */
.modal-content.pro-modal {
    border-radius: 15px;
    padding: 0; /* İç dolguyu sıfırla, header ile ayarlayacağız */
    overflow: hidden;
}

.modal-header-pro {
    background: #2c3e50; /* Koyu mavi başlık */
    color: white;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.modal-header-pro i {
    font-size: 1.8rem;
    color: #4CAF50; /* İkon yeşil */
}

.modal-header-pro h2 {
    margin: 0;
    font-size: 1.6rem;
    color: white;
}

.modal-body-pro {
    padding: 30px;
}

/* Profesyonel Liste (Tik işaretli) */
.pro-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.pro-list li {
    margin-bottom: 12px;
    font-size: 1.05rem;
    color: #444;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pro-list li i {
    color: #4CAF50; /* Tik işareti yeşil */
    font-size: 1.1rem;
}/* =========================================
   PROJELER SAYFASI - KURUMSAL GÜNCELLEME
   ========================================= */

/* 1. BAŞLIK RENGİ GARANTİSİ (Diğer sayfalarla aynı) */
.page-header {
    background-color: #2c3e50 !important; /* Koyu Grimsi Mavi */
    color: #ffffff !important;            /* Beyaz Yazı */
    padding: 80px 20px;
    text-align: center;
    background-image: none !important;    /* Resim varsa kaldır */
}

.page-header h1 { color: white !important; margin-bottom: 15px; }
.page-header p { color: #ecf0f1 !important; max-width: 700px; margin: 0 auto; }


/* 2. YENİ PROFESYONEL "ÇOK YAKINDA" İKONU */
/* Eski emoji kodunu eziyoruz */
.coming-soon-icon {
    font-size: 5rem;           /* İkon boyutu */
    color: #4CAF50;            /* BioRHub Yeşili */
    margin-bottom: 30px;
    display: inline-block;
    /* Hafif, profesyonel bir "nefes alma" animasyonu */
    animation: pulse-pro 3s infinite ease-in-out;
}

/* Animasyon Tanımı */
@keyframes pulse-pro {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; } /* Büyürken hafif şeffaflaş */
    100% { transform: scale(1); opacity: 1; }
}

/* Kartın kendisine de biraz ciddiyet katalım */
.coming-soon-card.pro-card {
    border-top: 5px solid #4CAF50; /* Üste yeşil bir çizgi çek */
    box-shadow: 0 30px 60px rgba(0,0,0,0.1); /* Daha derin gölge */
}/* =========================================
   HAKKIMIZDA - İLKELERİMİZ (YENİ TASARIM)
   ========================================= */

.principles-section {
    padding: 60px 20px;
    background-color: #f8f9fa; /* Hafif gri zemin (Beyaz kartlar öne çıksın diye) */
}

.principles-grid {
    display: grid;
    /* Ekran genişliğine göre otomatik sığdır (Telefonda 1, PC'de 3 yan yana) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* KART TASARIMI */
.principle-card {
    background: white;
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #e9ecef; /* Çok ince, zarif sınır */
    transition: all 0.3s ease;
    /* Kartın alt kısmına ince yeşil bir çizgi çekelim (Kurumsal detay) */
    border-bottom: 3px solid transparent; 
}

/* Hover Efekti: Üstüne gelince hafif kalksın ve altı yeşil olsun */
.principle-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.06);
    border-bottom: 3px solid #4CAF50;
}

/* İKON TASARIMI */
.p-icon {
    font-size: 2.5rem; /* İkon boyutu */
    color: #4CAF50;    /* BioRHub Yeşili */
    margin-bottom: 25px;
    
    /* İkonun etrafına hafif bir daire gölgesi (Opsiyonel estetik) */
    background: #f1f8e9; /* Çok açık yeşil zemin */
    width: 80px;
    height: 80px;
    line-height: 80px; /* Dikey ortalamak için */
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto; /* Ortala */
    transition: 0.3s;
}

.principle-card:hover .p-icon {
    background: #4CAF50; /* Hover'da zemin yeşil olsun */
    color: white;        /* İkon beyaz olsun */
}

/* METİNLER */
.principle-card h3 {
    font-size: 1.3rem;
    color: #2c3e50; /* Koyu Lacivert Başlık */
    margin-bottom: 15px;
    font-weight: 700;
}

.principle-card p {
    font-size: 0.95rem;
    color: #666; /* Gri Metin */
    line-height: 1.6;
}/* =========================================
   MENÜ AKTİF BUTON RENKLERİ (KESİN ÇÖZÜM)
   ========================================= */

/* 1. GRUP: NORMAL MENÜLER (Home, About Us vb.) */
/* Bunlar aktif olunca içi Beyaz, Yazısı Lacivert olsun */
ul.nav-links li a.active {
    background-color: #ffffff !important;
    color: #2c3e50 !important; 
    border: 2px solid #2c3e50 !important;
    border-radius: 20px;
}

/* 2. GRUP: SADECE "CONTACT US" (İLETİŞİM) BUTONU */
/* Bu buton özel! Aktif olunca içi Lacivert, Yazısı BEYAZ olsun */
ul.nav-links li a.btn-iletisim.active {
    background-color: #2c3e50 !important; /* Arka plan koyu */
    color: #ffffff !important;            /* YAZI BEYAZ (Okunur!) */
    border: 2px solid #ffffff !important; /* Çerçeve Beyaz */
}/* --- MODAL İÇİ İLETİŞİM BUTONU --- */
.modal-btn-wrapper {
    text-align: center;      /* Butonu ortalar */
    margin-top: 25px;        /* Üstteki yazıdan biraz uzaklaştırır */
    padding-top: 15px;
    border-top: 1px solid #eee; /* Üstüne ince bir çizgi çeker, şık durur */
}

.btn-modal-contact {
    display: inline-block;
    background-color: #2c3e50; /* Kurumsal Koyu Lacivert */
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 50px;       /* Tam oval (Hap şeklinde) */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease; /* Yumuşak geçiş efekti */
    border: 2px solid #2c3e50;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Hafif gölge */
}

.btn-modal-contact i {
    margin-right: 8px; /* İkon ile yazı arasına boşluk */
}

.btn-modal-contact:hover {
    background-color: transparent; /* İçi boşalır */
    color: #2c3e50;                /* Yazı rengi koyulaşır */
    transform: translateY(-3px);   /* Hafifçe yukarı kalkar */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Gölge belirginleşir */
}/* --- SAYFA BAŞLIKLARI DÜZELTME (FAALİYETLERİMİZ VB.) --- */
.page-header {
    display: flex !important;           /* Esnek kutu */
    flex-direction: column !important;  /* Alt alta diz */
    justify-content: center !important; /* Dikeyde ortala */
    align-items: center !important;     /* Yatayda ortala */
    
    /* Burası kritik: Yazıyı yukarıdan aşağıya zorla itiyoruz */
    padding-top: 150px !important;      
    padding-bottom: 80px !important;
    
    /* Kutunun boyunu sabitliyoruz ki sıkışmasın */
    min-height: 350px !important;       
    height: auto !important;
    text-align: center !important;
}/* --- İŞ ORTAKLARI (LOGOLAR) AYARLARI --- */
.partners-section {
    padding: 100px 0;
    background-color: #fcfcfc; /* Çok açık gri arka plan */
    text-align: center;
}

.partners-grid {
    display: flex;
    justify-content: center; /* Logoları ortalar */
    align-items: center;
    gap: 50px; /* Logolar arasındaki boşluk */
    flex-wrap: wrap; /* Ekrana sığmazsa alt satıra indirir */
    margin-top: 40px;
}

.partner-link img {
    height: 120px; /* Logonun yüksekliği (İstersen 60px veya 100px yapabilirsin) */
    width: auto;  /* Genişliği otomatik ayarla */
    transition: all 0.3s ease; /* Büyüme efekti yumuşak olsun */
}

/* Üzerine gelince ne olsun? */
.partner-link:hover img {
    transform: scale(1.2); /* Biraz büyüsün */
    opacity: 1;            /* Tam parlak olsun */
    filter: grayscale(0%); /* Orijinal rengine dönsün */
    cursor: pointer;       /* Fare el işareti olsun */
}/* --- MİNİMAL DAİRE VE OKLU HUB TASARIMI --- */
.hub-minimal-section {
    padding: 80px 0;
    background-color: #fff;
}

.hub-minimal-layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    flex-wrap: wrap;
}

/* --- SOL TARA (İçerik) --- */
.hub-minimal-content {
    flex: 1;
    padding-right: 20px;
}

.top-tag-minimal {
    color: #58b647;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: inline-block;
    background: #e8f5e9;
    padding: 6px 12px;
    border-radius: 20px;
}

.hub-minimal-content h2 {
    font-size: 32px;
    color: #2c3e50;
    margin-bottom: 20px;
}

.hub-desc-minimal {
    color: #666;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* --- AKORDİYON MENÜ --- */
.acc-item-minimal {
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.acc-btn-minimal {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 15px 10px; /* Daha kompakt iç boşluk */
    font-size: 17px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* --- MİNİMAL YEŞİL DAİRE (Boyut Küçültüldü) --- */
.minimal-green-circle {
    width: 32px;  /* Önceki 50px idi, şimdi 32px */
    height: 32px; /* Önceki 50px idi, şimdi 32px */
    background-color: #e8f5e9; /* Pasifken çok açık yeşil */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Ok İkonu */
.arrow-minimal {
    font-size: 14px;
    color: #58b647; /* Pasifken yeşil ok */
    transition: transform 0.3s ease;
}

/* --- TIKLANINCA OLACAKLAR (Aktif Hali) --- */
.acc-btn-minimal.active-minimal {
    background-color: #f9fbfd; /* Tıklanınca hafif bir zemin rengi */
}

/* Aktifken Dairenin Rengi */
.acc-btn-minimal.active-minimal .minimal-green-circle {
    background-color: #58b647; /* O CANLI YEŞİL */
}

/* Aktifken Okun Rengi ve Yönü */
.acc-btn-minimal.active-minimal .arrow-minimal {
    color: #fff; /* Ok beyaz olsun */
    transform: rotate(90deg); /* Ok aşağı dönsün */
}

/* AÇILAN PANEL */
.acc-panel-minimal {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.acc-panel-minimal p {
    padding: 20px 10px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- SAĞ TARA (Görsel) --- */
.hub-minimal-visual {
    flex: 1;
}

.hub-minimal-visual img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    object-fit: cover;
}

/* MOBİL UYUM */
@media (max-width: 992px) {
    .hub-minimal-layout {
        flex-direction: column;
    }
}/* --- SOL TARA (İçerik Kısmı) - DÜZELTİLMİŞ HALİ --- */
.hub-minimal-content {
    flex: 1;
    padding-right: 40px; /* Sağdan görselle arasına mesafe koy */
    
    /* İŞTE SİHİRLİ DOKUNUŞ BURADA: */
    padding-left: 80px !important; /* Yazıları soldan 80px içeri it */
}

/* MOBİLDE BOZULMAMASI İÇİN */
@media (max-width: 992px) {
    .hub-minimal-content {
        padding-left: 0 !important; /* Telefonda tekrar normale dönsün */
        padding-right: 0;
    }
}/* --- SAĞDAKİ GÖRSELİ AŞAĞI VE SOLA KAYDIRMA --- */
.hub-minimal-visual {
    /* 1. Görseli 60 piksel AŞAĞI indirir */
    margin-top: 60px !important; 

    /* 2. Görseli sağ kenardan 50 piksel uzaklaştırır (yani SOLA kaydırır) */
    padding-right: 50px !important; 
    
    /* Görselin sola hizalanmasını garantiye alır */
    display: flex;
    justify-content: flex-start;
}

/* MOBİLDE DÜZGÜN GÖRÜNMESİ İÇİN */
@media (max-width: 992px) {
    .hub-minimal-visual {
        margin-top: 30px !important; /* Mobilde üst boşluk daha az olsun */
        padding-right: 0 !important; /* Sağ boşluğu sıfırla */
        justify-content: center; /* Mobilde görseli ortala */
    }
}/* --- GÖRSELLİ VE ALT ALTA EĞİTİM TASARIMI --- */
.edu-vertical-section {
    padding: 80px 0;
    background-color: #f8fcf8; /* Çok hafif yeşilimsi beyaz */
}

.edu-vertical-layout {
    display: flex;
    align-items: flex-start; /* Yukarı hizalı */
    gap: 60px;
}

/* --- SOL TARA (GÖRSEL) --- */
.edu-visual-side {
    flex: 1;
    position: sticky; /* Görsel sayfayla beraber kaysın (Hoş bir detay) */
    top: 20px;
}

.image-frame img {
    width: 100%;
    height: 600px; /* Görsel uzun ve dikey olsun */
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* --- SAĞ TARAF (İÇERİK) --- */
.edu-content-side {
    flex: 1.2; /* İçerik kısmı biraz daha geniş olsun */
}

.edu-pill {
    background-color: #e8f5e9;
    color: #58b647;
    font-weight: 700;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.edu-content-side h2 {
    font-size: 32px;
    color: #2c3e50;
    margin-bottom: 20px;
}

.edu-intro {
    color: #666;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Kategori Başlıkları */
.cat-title {
    font-size: 20px;
    color: #2c3e50;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cat-title i {
    color: #58b647; /* İkon rengi */
}

.cat-desc {
    color: #777;
    font-size: 14px;
    margin-bottom: 20px;
}

/* --- AKORDİYON TASARIMI --- */
.edu-v-item {
    margin-bottom: 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.edu-v-btn {
    width: 100%;
    background: #fff;
    border: none;
    text-align: left;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.edu-icon {
    font-size: 14px;
    color: #ccc;
    transition: transform 0.3s ease;
}

/* TIKLANINCA (Hub ile aynı yeşil) */
.edu-v-btn.edu-active-bg {
    background-color: #58b647; /* CANLI YEŞİL */
    color: white;
}

.edu-v-btn.edu-active-bg .edu-icon {
    color: white;
    transform: rotate(180deg);
}

/* AÇILAN PANEL */
.edu-v-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #fff;
}

.edu-v-panel p {
    padding: 20px;
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    border-top: 1px solid #eee;
}

/* MOBİL UYUM */
@media (max-width: 992px) {
    .edu-vertical-layout {
        flex-direction: column; /* Mobilde alt alta */
    }
    .image-frame img {
        height: 300px; /* Mobilde görseli kısalt */
    }
}/* --- EĞİTİM BÖLÜMÜ MODERN TASARIM (GÜNCELLENDİ) --- */

/* Bölümün Genel Ayarları */
.edu-vertical-section {
    padding: 80px 0;
    background-color: #fff;
}

/* Ana Düzen (Resim ve Yazı Yan Yana) */
.edu-vertical-layout {
    display: flex;
    align-items: flex-start; /* Üstten hizala */
    gap: 80px; /* Resim ile yazı arasındaki boşluğu iyice açtım */
}

/* --- SOL TARA (RESİM) --- */
.edu-visual-side {
    flex: 1; /* Genişlik oranı */
    position: relative;
}

.image-frame {
    position: sticky; /* Sayfa kayarken resim hafif asılı kalsın (opsiyonel) */
    top: 100px;
}

.image-frame img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px; /* Köşeleri daha çok yumuşattım */
    box-shadow: 0 20px 40px rgba(0,0,0,0.08); /* Modern, yumuşak bir gölge */
    transition: transform 0.3s ease;
}

.image-frame img:hover {
    transform: translateY(-5px); /* Üzerine gelince hafif yukarı kalksın */
}

/* --- SAĞ TARAF (İÇERİK) --- */
.edu-content-side {
    flex: 1.1; /* Yazı alanı biraz daha geniş */
}

/* Yeşil Etiket */
.edu-pill {
    display: inline-block;
    background-color: #e3f2fd; /* Mavi tonlu açık zemin (Hub ile uyumlu) veya #e8f5e9 (yeşil) */
    color: #1565c0; /* Koyu yazı */
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

/* Ana Başlık */
.edu-content-side h2 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 25px 0;
    line-height: 1.2;
}

/* Giriş Paragrafı */
.edu-intro {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 45px;
    font-weight: 400;
}

/* --- KATEGORİ BLOKLARI --- */
.edu-category-block {
    margin-bottom: 35px;
    padding-bottom: 35px;
    border-bottom: 1px solid #f0f0f0; /* Altlarına ince çizgi */
}

.edu-category-block:last-child {
    border-bottom: none;
}

.cat-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cat-title i {
    color: #2e7d32; /* İkon rengi */
    background: #e8f5e9;
    padding: 10px;
    border-radius: 50%;
    font-size: 0.9rem;
}

.cat-desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 90%;
}

/* --- AKORDİYON BUTONU (YENİ TARZ) --- */
.edu-v-btn {
    background-color: transparent; /* Arka plan yok */
    border: 2px solid #eee; /* İnce gri çerçeve */
    color: #444;
    cursor: pointer;
    padding: 16px 24px;
    width: 100%;
    text-align: left;
    outline: none;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 12px;
}

.edu-v-btn:hover {
    border-color: #ccc;
    background-color: #fafafa;
}

.edu-active-bg {
    border-color: #2e7d32; /* Aktif olunca yeşil çerçeve */
    background-color: #f1f8e9; /* Hafif yeşil zemin */
    color: #1b5e20;
}

/* --- AKORDİYON İÇERİĞİ --- */
.edu-v-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    padding: 0 10px;
}

.edu-v-panel ul {
    list-style-type: none;
    padding: 20px 10px 0 10px;
    margin: 0;
}

.edu-v-panel li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.5;
}

.edu-v-panel li i {
    margin-right: 15px;
    margin-top: 3px;
    color: #2e7d32;
    font-size: 0.85rem;
    flex-shrink: 0; /* İkon sıkışmasın */
}
/* --- EĞİTİM BÖLÜMÜ MODERN TASARIM (GÜNCELLENDİ - GÖRSEL DÜZENLEMESİ) --- */

/* Bölümün Genel Ayarları */
.edu-vertical-section {
    padding: 80px 0;
    background-color: #fff;
}

/* Ana Düzen (Resim ve Yazı Yan Yana) */
.edu-vertical-layout {
    display: flex;
    align-items: flex-start; /* Üstten hizala */
    gap: 100px; /* Resim ile yazı arasındaki boşluğu daha da açtım */
}

/* --- SOL TARAF (RESİM) --- */
.edu-visual-side {
    flex: 0 0 40%; 
    position: relative;
    padding-left: 50px; /* BURASI YENİ: Soldan 50px boşluk bırakıp içeri iter */
}

.image-frame {
    position: sticky;
    top: 100px;
    text-align: center; 
}

.image-frame img {
    width: 100%; 
    max-width: 85%; /* GÜNCELLENDİ: %95 yerine %85 yaparak fotoğrafı biraz daha küçültüp ortaladık */
    height: auto;
    display: inline-block; 
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.image-frame img:hover {
    transform: translateY(-5px);
}
/* --- SAĞ TARAF (İÇERİK) --- */
.edu-content-side {
    flex: 1; /* Kalan alanı kapla */
}

/* Yeşil Etiket */
.edu-pill {
    display: inline-block;
    background-color: #e3f2fd;
    color: #1565c0;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

/* Ana Başlık */
.edu-content-side h2 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 25px 0;
    line-height: 1.2;
}

/* Giriş Paragrafı */
.edu-intro {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 45px;
    font-weight: 400;
}

/* --- KATEGORİ BLOKLARI --- */
.edu-category-block {
    margin-bottom: 35px;
    padding-bottom: 35px;
    border-bottom: 1px solid #f0f0f0;
}

.edu-category-block:last-child {
    border-bottom: none;
}

.cat-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cat-title i {
    color: #2e7d32;
    background: #e8f5e9;
    padding: 10px;
    border-radius: 50%;
    font-size: 0.9rem;
}

.cat-desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 90%;
}

/* --- AKORDİYON BUTONU --- */
.edu-v-btn {
    background-color: transparent;
    border: 2px solid #eee;
    color: #444;
    cursor: pointer;
    padding: 16px 24px;
    width: 100%;
    text-align: left;
    outline: none;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 12px;
}

.edu-v-btn:hover {
    border-color: #ccc;
    background-color: #fafafa;
}

.edu-active-bg {
    border-color: #2e7d32;
    background-color: #f1f8e9;
    color: #1b5e20;
}

/* --- AKORDİYON İÇERİĞİ --- */
.edu-v-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    padding: 0 10px;
}

.edu-v-panel ul {
    list-style-type: none;
    padding: 20px 10px 0 10px;
    margin: 0;
}

.edu-v-panel li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.5;
}

.edu-v-panel li i {
    margin-right: 15px;
    margin-top: 3px;
    color: #2e7d32;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* MOBİL UYUM */
@media (max-width: 900px) {
    .edu-vertical-layout {
        flex-direction: column;
        gap: 40px;
    }
    .edu-visual-side {
        flex: 1; /* Mobilde tam genişlik */
    }
    .image-frame {
        position: static;
        margin-bottom: 20px;
        text-align: center;
    }
    .image-frame img {
        max-width: 100%; /* Mobilde tam genişlik */
    }
    .edu-content-side h2 {
        font-size: 1.8rem;
    }
}/* --- MOBİL MENÜ DÜZENLEMESİ --- */

/* 1. Masaüstünde Hamburger Menü Gizli Olsun */
.menu-toggle {
    display: none; 
}

/* 2. Sadece Mobil Ekranlar İçin (768px ve altı) */
@media screen and (max-width: 768px) {
    
    /* Navbar Düzeni */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px; /* Kenar boşlukları */
        background-color: white; /* Menü okunabilsin diye arka plan beyaz */
        position: relative;
        z-index: 999;
    }

    /* Hamburger Buton Stili */
    .menu-toggle {
        display: block; /* Mobilde görünür yap */
        font-size: 1.8rem;
        cursor: pointer;
        color: #333; /* Buton rengi */
    }

    /* Linklerin Listesi (Başlangıçta Gizli) */
    .nav-links {
        display: none; /* Gizle */
        flex-direction: column; /* Alt alta diz */
        width: 100%;
        position: absolute;
        top: 100%; /* Navbar'ın hemen altına yapış */
        left: 0;
        background-color: white; /* Arka plan beyaz */
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Hafif gölge */
        padding: 20px 0;
        text-align: center;
    }

    /* JavaScript ile 'active' sınıfı eklenince Görünür Yap */
    .nav-links.active {
        display: flex;
    }

    /* Linklerin Arasındaki Boşluklar */
    .nav-links li {
        margin: 15px 0; /* Linkler arası mesafe */
    }

    /* Dropdown (Açılır Menü) Mobilde Nasıl Görünsün */
    .dropdown-content {
        position: static; /* Mobilde havada asılı kalmasın, akışa girsin */
        box-shadow: none;
        background-color: #f9f9f9; /* Hafif gri arka plan */
        display: none; /* Tıklayınca açılsın */
        padding: 10px 0;
    }
    
    /* Dropdown mobilde hover ile değil, JS ile veya direkt görünür yapılabilir. 
       Şimdilik basitlik adına hepsini açık tutuyoruz veya üstüne tıklama mantığı gerekir. 
       Basit çözüm: Mobilde dropdownları görünür yapalım: */
    .nav-links li:hover .dropdown-content {
        display: block;
    }
}/* --- MARKAMIZ VE LOGOMUZ BÖLÜMÜ (GÜNCELLENMİŞ ORTALI VERSİYON) --- */

.brand-section {
    padding: 10px 0;
    background-color: #fff;
    width: 100%;
    margin-bottom: 100px;
}

/* ÖNEMLİ: İçeriği ortada tutan kutu ayarı */
.brand-section .container {
    max-width: 1200px; /* Hikayemiz bölümüyle aynı genişlik sınırı */
    width: 90%; /* Mobilde kenarlardan boşluk kalsın */
    margin: 0 auto; /* Sayfanın tam ortasına getir */
}

/* Yan Yana Düzen */
.brand-layout {
    display: flex;
    align-items: center; /* Dikeyde ortala */
    justify-content: space-between;
    gap: 80px; /* Yazı ve Resim arasındaki boşluk */
}

/* --- SOL TARAFTAKİ YAZI ALANI --- */
.brand-text {
    flex: 1; /* Alanın yarısı */
    /* padding-left sildik, çünkü container zaten ortalayacak */
}

.brand-text .top-tag {
    display: inline-block;
    color: #2e7d32;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.brand-text h2 {
    font-size: 2.5rem;
    color: #222;
    margin-bottom: 25px;
    line-height: 1.2;
}

.brand-text p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
}

/* --- SAĞ TARAFTAKİ GÖRSEL ALANI --- */
.brand-visual {
    flex: 1; /* Diğer yarı */
    display: flex;
    justify-content: center; /* Görseli kendi alanında ortala */
    align-items: center;
}

/* Görsel Kutusu (Boyutu buradan kontrol ediyoruz) */
.brand-img-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 5000px; /* GÖRSEL ÇOK BÜYÜMESİN DİYE SINIR KOYDUK */
}

/* Arkadaki Yeşil Gölge */
.brand-bg-shape {
    position: absolute;
    top: 20px;
    right: -20px;
    width: 100%;
    height: 100%;
    background-color: #e8f5e9;
    border-radius: 30px;
    z-index: -1;
}

/* Resmin Kendisi */
.brand-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* --- MOBİL UYUM --- */
@media (max-width: 900px) {
    .brand-layout {
        flex-direction: column; /* Mobilde alt alta */
        gap: 50px;
    }
    
    .brand-text {
        text-align: center; /* Mobilde yazıyı ortala */
    }

    .brand-img-wrapper {
        max-width: 100%; /* Mobilde tam genişlik */
    }

    .brand-bg-shape {
        top: 15px;
        right: -10px;
    }
}/* --- LOGO BOYUTUNU BÜYÜTME --- */
.logo img {
    height: 110px !important; /* Mevcut değer muhtemelen 40-50px'dir. Burayı 80px veya 90px yaparak büyütebilirsin */
    width: auto; /* En-boy oranını koruması için */
    max-height: 100%; 
    transition: all 0.3s ease; /* Büyürken yumuşak geçiş olsun */
}

/* Eğer logonun bulunduğu üst şerit (Navbar) çok dar kalırsa onu da biraz genişletelim */
.navbar {
    padding: 15px 40px; /* Üst-alt boşluğunu biraz artırdık */
    align-items: center; /* Logoyu dikeyde ortalar */
}/* --- FOOTER LOGOSUNU BÜYÜTME --- */
.footer-logo img {
    height: 100px !important; /* Burayı isteğine göre 100px, 120px yapabilirsin */
    width: auto;
    max-width: 100%;
    margin-bottom: 2px; /* Altındaki sloganla arasına biraz boşluk koyalım */
}/* --- MOBİL MENÜ AÇILMA KODU (Bunu en alta ekle) --- */
@media screen and (max-width: 768px) {
    
    /* Menü listesi normalde gizli */
    .nav-links {
        display: none; 
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%; /* Navbar'ın tam altına yapış */
        left: 0;
        background-color: white; /* Arka plan rengi */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        padding: 20px 0;
        z-index: 1000;
    }

    /* !!! İŞTE BURASI ÇOK ÖNEMLİ !!! */
    /* JS 'active' sınıfını eklediğinde burası çalışır ve menüyü açar */
    .nav-links.active {
        display: flex !important; /* Gizli olanı görünür yap */
    }

    /* Linklerin arası açılsın */
    .nav-links li {
        margin: 15px 0;
        text-align: center;
    }
}/* --- MOBİL MENÜ DÜZELTME (HTML DEĞİŞTİRMEDEN) --- */

/* 1. Navbar Kutusu (Butonu Sağa Yaslar) */
.navbar {
    display: flex;
    justify-content: space-between; /* Logo Sola, Buton Sağa */
    align-items: center;
    padding: 15px 5%;
    background-color: #ffffff;
    height: 80px;
    position: relative;
    z-index: 1001;
}

/* 2. Hamburger Butonu */
.menu-toggle {
    display: none; /* Masaüstünde gizli */
}

/* --- MOBİL GÖRÜNÜM --- */
@media screen and (max-width: 900px) {
    
    .menu-toggle {
        display: block;
        font-size: 1.8rem;
        color: #333;
        cursor: pointer;
    }

    /* Menü Listesi */
    .nav-links {
        display: none; /* Gizli */
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        flex-direction: column;
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        padding-bottom: 20px;
        height: auto;
        max-height: 80vh; /* Ekranın %80'i kadar uzasın */
        overflow-y: auto; /* Sığmazsa kaydırma çubuğu çıksın */
    }

    .nav-links.active {
        display: flex !important;
    }

    .nav-links li {
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
    }

    .nav-links li a {
        display: block;
        padding: 15px 20px;
        color: #333;
        font-size: 1rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* --- ÇİFT OK SORUNU ÇÖZÜMÜ --- */
    /* HTML'in içinde gelen eski ikonları gizle! */
    .dropdown > a i {
        display: none !important; 
    }

    /* Bizim CSS ile eklediğimiz düzgün ok */
    .dropdown > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dropdown > a::after {
        content: '\f078'; /* Aşağı Ok */
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 0.8rem;
        transition: transform 0.3s;
        margin-right: 10px;
    }

    /* Açılınca Oku Döndür */
    .dropdown.active > a::after {
        transform: rotate(180deg);
    }

    /* Alt Menü İçeriği */
    .dropdown-content {
        display: none;
        background-color: #f4fbf6;
        width: 100%;
    }

    .dropdown.active .dropdown-content {
        display: block;
    }
    
    .dropdown-content a {
        padding-left: 40px !important;
        font-size: 0.95rem;
        color: #555;
    }

    /* TR / EN Kısmı (Alt alta ama ortalı) */
    .nav-links li:last-child {
        text-align: center;
        padding: 10px 0;
    }
}/* --- ACİL DURUM DÜZELTMESİ --- */

/* 1. BUTON KONUMU (Zorla Sağ Üste Sabitleme) */
@media screen and (max-width: 900px) {
    .menu-toggle {
        display: block !important;
        position: absolute !important; /* Diğer elemanlardan bağımsız ol */
        top: 25px !important;  /* Yukarıdan mesafe */
        right: 20px !important; /* Sağdan mesafe */
        z-index: 1002; /* Her şeyin üstünde olsun */
        cursor: pointer;
        color: #333; /* İkon rengi */
        font-size: 1.8rem;
    }

    /* Navbar'ın kendisi butonun üzerine binmesin */
    .navbar {
        position: relative; 
        height: 80px; 
        /* Flex ayarları bozuksa bile buton absolute olduğu için etkilenmez */
    }

    /* 2. MENÜ LİSTESİ */
    .nav-links {
        /* Eski ayarları sıfırla */
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
        border-top: 2px solid #2e7d32; /* Üstte yeşil çizgi olsun belli olsun */
        padding-bottom: 30px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    /* JS 'active' eklediğinde GÖRÜNÜR OLSUN */
    .nav-links.active {
        display: flex !important;
    }

    /* Link Ayarları */
    .nav-links li {
        width: 100%;
        border-bottom: 1px solid #eee;
    }
    
    .nav-links li a {
        padding: 15px 20px;
        display: block;
        width: 100%;
    }

    /* 3. ALT MENÜLER (Kapanmama Sorunu İçin Görünüm) */
    .dropdown-content {
        display: none !important; /* Varsayılan olarak GİZLE */
        background-color: #f1f8e9; /* Açık yeşil zemin */
    }

    /* Sadece 'active' sınıfı varsa GÖSTER */
    .dropdown.active .dropdown-content {
        display: block !important;
    }

    /* 4. TR / EN KISMI (Yan Yana Zorla) */
    .nav-links li:last-child {
        display: flex !important;
        justify-content: center;
        gap: 20px;
        padding: 20px 0;
    }
    
    .nav-links li:last-child a {
        width: auto !important; /* Genişliği sıfırla */
        display: inline-block !important;
        padding: 5px 10px;
        background: #eee;
        border-radius: 5px;
    }
}/* --- LOGO KONUMU DÜZELTME --- */
@media screen and (max-width: 900px) {
    .navbar {
        /* İçindekileri (Logoyu) Sola Yasla */
        justify-content: flex-start !important; 
        padding-left: 20px !important; /* Soldan biraz boşluk bırak */
    }

    .logo {
        margin: 0 !important; /* Varsa ortalama ayarlarını iptal et */
        padding: 0 !important;
        /* Logoyu biraz yukarı kaldıralım ki ortalı dursun */
        display: flex;
        align-items: center;
    }

    .logo img {
        height: 45px !important; /* Mobilde logo çok büyük olmasın, kibar dursun */
        width: auto !important;
        margin-top: 5px; /* Hafif aşağı itelim, tepedeki çizgiye değmesin */
    }
}/* --- MOBİL LOGO VE BUTON AYARI (SON HALİ) --- */
@media screen and (max-width: 900px) {
    
    .navbar {
        /* İçerikleri (Logoyu) Sola Yasla */
        justify-content: flex-start !important; 
        align-items: center !important; /* Dikeyde ortala */
        padding-left: 20px !important; /* Soldan boşluk */
        height: 90px !important; /* Navbar yüksekliği */
    }

    .logo {
        margin: 0 !important; 
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    .logo img {
        height: 80px !important; /* BURAYI BÜYÜTTÜK (Eskiden 45px idi) */
        width: auto !important;
        max-height: 80px !important; /* Taşmayı önle */
        object-fit: contain;
        margin-top: 0 !important; /* Yukarı yapışmasını engelle */
    }

    /* Butonun yerini de garantiye alalım */
    .menu-toggle {
        top: 25px !important; /* Butonun yukarıdan hizası */
    }
}/* --- GELİŞMELER SAYFASI MOBİL AYARI --- */
@media screen and (max-width: 900px) {
    
    /* 1. Kapsayıcıyı Tek Sütun Yap */
    .news-grid {
        display: flex !important;
        flex-direction: column !important; /* Yan yana değil, alt alta diz */
        gap: 30px !important; /* Kartlar arası boşluk */
    }

    /* 2. Kartların Genişliğini Ayarla */
    .news-card {
        width: 100% !important; /* Ekranı tam kapla */
        max-width: 100% !important;
        display: block !important;
        margin-bottom: 20px !important;
        height: auto !important; /* Yükseklik içeriğe göre uzasın */
    }

    /* 3. Kart İçindeki Resim Alanı */
    .news-image {
        width: 100% !important;
        height: 250px !important; /* Resim yüksekliği mobilde sabit ve net olsun */
        background-size: cover !important;
        background-position: center !important;
    }

    /* 4. Yazı Boyutları (Mobilde Dev Gibi Durmasın) */
    .news-content h3 {
        font-size: 1.3rem !important;
        margin-top: 10px !important;
    }
    
    .news-content p {
        font-size: 1rem !important;
    }

    /* 5. Kenarlardan Boşluk Bırak (Yapışmasın) */
    .news-feed-section .container {
        padding: 0 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}/* --- GELİŞMELER SAYFASI MOBİL KESİN DÜZELTME --- */
@media screen and (max-width: 900px) {
    
    /* Üst sınıfları (news-feed-section gibi) aradan çıkarıp direkt grid'e vuruyoruz */
    .news-grid {
        display: flex !important;
        flex-direction: column !important; /* Kartları alt alta diz */
        gap: 30px !important;
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .news-card {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin-bottom: 20px !important;
        height: auto !important;
    }

    .news-image {
        width: 100% !important;
        height: 250px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
}/* ALT MENÜ LİNK RENKLERİNİ ZORLA GÖRÜNÜR YAP */
@media only screen and (max-width: 900px) {
    .dropdown-content {
        background-color: #f9f9f9 !important; /* Hafif gri arka plan */
        display: none; /* Varsayılan kapalı */
    }

    .dropdown.active .dropdown-content {
        display: block !important; /* Açıldığında göster */
    }

    .dropdown-content a {
        color: #333 !important; /* Yazıları koyu gri/siyah yap */
        padding: 12px 25px !important;
        border-bottom: 1px solid #eee !important;
        display: block !important;
        text-decoration: none !important;
    }
}/* --- ÇİFT OK TEMİZLEME --- */

/* 1. HTML içinde elle yazılmış olan span veya i oklarını gizle */
.dropdown > a span.arrow, 
.dropdown > a i {
    display: none !important;
}

/* 2. Eğer hala gitmiyorsa, CSS ile eklenen otomatik oku da kontrol et */
/* Sadece bizim istediğimiz tek bir ok kalsın istiyorsan aşağıdakini kullan */
.dropdown > a::after {
    content: '\f078'; /* FontAwesome Aşağı Ok */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 8px;
    font-size: 0.8rem;
}/* --- MOBİL ALT MENÜ OKUNURLUK DÜZELTMESİ --- */
@media only screen and (max-width: 900px) {
    
    /* 1. Koyu arka planı açık renge çeviriyoruz */
    .dropdown-content, 
    .dropdown-content-inner {
        background-color: #f4f7f5 !important; /* Çok hafif yeşilimsi beyaz (BioRHub temasına uygun) */
        border-radius: 8px !important;
        margin: 5px 15px !important;
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.05) !important;
    }

    /* 2. Yazıları koyu ve okunaklı yapıyoruz */
    .dropdown-content a,
    .dropdown-content-inner a {
        color: #333 !important; /* Koyu gri/Siyah yazı */
        font-weight: 500 !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid #e0e0e0 !important; /* Maddeler arasına ince çizgi */
        display: block !important;
        text-align: left !important;
        font-size: 0.95rem !important;
    }

    /* Son maddenin çizgisini kaldıralım */
    .dropdown-content a:last-child {
        border-bottom: none !important;
    }

    /* Üzerine basıldığında hafif renk değişsin */
    .dropdown-content a:active {
        background-color: #e8eee9 !important;
    }
}/* Hizmetlerimiz ve Faaliyetlerimiz Sayfaları Üst Boşluk Düzenlemesi */
.hizmetler-hero, 
.faliyetler-hero {
    padding-top: 50px !important; /* Boşluğu buradan dilediğin gibi daraltabilirsin */
    padding-bottom: 50px !important;
}

/* Başlıkların menüye olan mesafesi */
.hizmetler-hero h1, 
.faliyetler-hero h1 {
    margin-top: 0 !important;
}/* ANA SAYFA LOGO VE BAŞLIK JİLET GİBİ DÜZELTME */

/* 1. Koyu şeridi (Header) daralt ve içeriği yukarı çek */
header.hero, 
.hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 20px !important; /* Üst boşluğu iyice kıstık */
    padding-bottom: 50px !important;
    min-height: 70vh !important; /* Ekranı kaplama oranı */
    text-align: center !important;
}

/* 2. Ortadaki Logoyu Büyüt ve Yukarı Kaydır */
header.hero img, 
.hero-logo img {
    width: 280px !important; /* İstediğin o "göz dolduran" boyut */
    max-width: 90% !important;
    height: auto !important;
    margin-top: -30px !important; /* Logoyu yukarı, menüye yaklaştırır */
    margin-bottom: 15px !important;
}

/* 3. Başlık ve Alt Yazıyı Hizala */
header.hero h1, 
.hero h1 {
    font-size: 3rem !important;
    font-weight: 800 !important;
    margin: 0 0 10px 0 !important;
    color: #ffffff !important;
}

header.hero p, 
.hero p {
    font-size: 1.1rem !important;
    letter-spacing: 1px !important;
    margin-top: 5px !important;
}/* LOGO VE BAŞLIK HİZALAMA - KESİN ÇÖZÜM */

header.hero img, 
.hero-logo img {
    /* LOGO BOYUTU: 280px'den 350px'e çıkardım, daha heybetli durur */
    width: 350px !important; 
    height: auto !important;
    
    /* YUKARI KAYDIRMA: Bu rakamı ne kadar eksi yaparsan o kadar yukarı zıplar */
    margin-top: -60px !important; 
    
    /* Başlıkla arasındaki mesafe */
    margin-bottom: 20px !important; 
    
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Header alanının üst boşluğunu iyice sıfırlayalım ki logo yukarı çıksın */
header.hero {
    padding-top: 100px !important;
    min-height: auto !important; 
}