/* --- GENEL STİLLER --- */
body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /*yeni*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    background: black;
}

/* Ana sayfa için */
body:not(.scrollable-page) {
    overflow: hidden;
}

/* YENİ: Sayfa sarmalayıcıları için temel kurallar */
.desktop-wrapper, .page-wrapper {
    height: 100vh;
    width: 100%;
    overflow: hidden; /* Bu sayfa tipleri scroll etmez */
    position: relative;
}

/* YENİ: Blog gibi scroll edecek sayfalar için sarmalayıcı */
.page-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 2rem 12vh 2rem;
    box-sizing: border-box;
    background-size: cover;
    background-position: center center;
}
#blog-page-wrapper {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070');
}
#blog-page-wrapper, #blog-detail-wrapper {
    /* Blog sayfaları için dikey hizalama üste yaslandı */
    align-items: flex-start;
}

#blog-detail-wrapper {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070');
}
#blog-detail-wrapper, #blog-detail-wrapper {
    /* Blog sayfaları için dikey hizalama üste yaslandı */
    align-items: flex-start;
}



/* === BLOG SAYFASI KARTLARI (YENİ SCROLL MANTIĞI) === */
.page-wrapper .glass-panel {
    display: flex;
    flex-direction: column;
}
.page-wrapper .blog-card-grid {
    flex-grow: 1; /* Kalan tüm alanı doldur */
    overflow-y: auto; /* Dikeyde kaydır */
    min-height: 0; /* Flexbox scroll için */
    padding-right: 1rem; /* Scroll bar için boşluk */
    margin: 0 -0.75rem; /* Row'un negatif marginini dengelemek için */
    padding-left: 0.75rem;
}
#section-4 .card { background-color: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; }
#section-4 .card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.3); }
/* #section-4 .card-img-top { height: 180px; object-fit: cover; width: 100%; } */
.card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.card-link:hover .card { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); }
.blog-card { /* Blog kartları genel stili */
    background-color: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.card-link:hover .blog-card { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); }

/* --- DÜZELTİLMİŞ KART RESMİ KURALI --- */
/* Artık #section-4 yerine .blog-card-grid'i hedef alıyor */
.blog-card-grid .card-img-top {
    height: 180px;
    object-fit: cover;
    width: 100%;
}
/* --- Düzeltme Bitti --- */
/* Scroll edilebilir sayfalar için body stili */
body.scrollable-page {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #111;
    /* YENİ: Alttaki sabit navigasyon için boşluk */
    padding-bottom: 10vh;
    /* Masaüstü bottom-nav yüksekliği */
}
/* === BLOG DETAY SAYFASI === */

/* YENİ: Blog Navigasyon Stilleri */
.blog-nav {
    width: 100%;
    max-width: 900px; /* Yazı paneliyle aynı genişlikte */
    display: flex;
    margin-left: auto; /* Otomatik sol boşluk (ortala) */
    margin-right: auto;/* Otomatik sağ boşluk (ortala) */
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0; /* Hafif dikey boşluk */
    margin-top: 5vh; /* Sayfanın biraz aşağısında başlasın */
    flex-shrink: 0; /* Küçülmesin */
}
.blog-nav-link {
    color: rgba(255, 255, 255, 0.7); /* Hafif soluk beyaz */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
    display: inline-flex; /* İkon ile metni hizalamak için */
    align-items: center;
}
.blog-nav-link:hover {
    color: #dc3545; /* Kırmızı hover rengi */
}
.blog-nav-link i {
    font-size: 0.8rem; /* İkonları biraz küçültelim */
}
.blog-article { /* Ana panel */
     max-width: 900px; /* Detay sayfası biraz daha dar olabilir */
     height: auto;
     max-height: calc(85vh - 12vh); /* Ekranın %85'i - alt menü boşluğu kadar */
}
.blog-article h1 { flex-shrink: 0; font-size: 2.8rem; }
.blog-article .article-meta { flex-shrink: 0; font-size: 0.9rem; }
.blog-article .article-image { flex-shrink: 0; max-height: 350px; width: 100%; object-fit: cover; }
.blog-article .article-content { /* Scroll edilecek alan */
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    text-align: left;
    padding-right: 1rem;
    margin-top: 1.5rem; /* Resimle arasına boşluk */
}
.blog-article .article-content h4 { /* Alt başlıklar */
    margin-top: 2rem; margin-bottom: 0.75rem; font-weight: bold;
    color: #dc3545 !important; text-shadow: none;
}
.blog-article .article-content p,
.blog-article .article-content li { /* Paragraflar ve liste */
    font-size: 1.1rem; line-height: 1.7; color: #eee !important; text-shadow: none;
}
.blog-article .article-content ul { padding-left: 1.5rem; margin-top: 1rem; }
/* === Site Logosu Stili === */
.site-logo {
    position: absolute;
    left: 50%;
    /* Yatayda ortala */
    transform: translateX(-50%);
    /* Tam ortalamak için */
    top: 8vh;
    /* Dikey konum (ayarlayabilirsiniz) */
    z-index: 10;
}

.site-logo img {
    max-height: 200px;
    /* Logo Yüksekliği (ayarlayabilirsiniz) */
    width: auto;
    /* Oranı koru */
}

/* === GLASSMORPHISM PANEL (GENEL) === */
.glass-panel {
    background: rgba(0, 0, 0, 0.45);
    /* Biraz daha belirgin */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    /* overflow: hidden; */
    height: 100%;
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    box-sizing: border-box;
    text-align: center;

}

/* === HERO PANEL İÇİN ÖZEL STİLLER === */
.hero-panel {
    max-width: 800px !important;
    width: auto !important;
    height: auto !important;
    padding: 2.5rem !important;
    display: block !important;
    overflow: hidden;           /*yeni*/

}

.hero-panel p {
    margin-bottom: 1.5rem;
}


/* === CAM PANEL İÇERİK YAPISI (SCROLL DAHİL) === */
.glass-panel h1,
.glass-panel p,
.glass-panel .nav-link,
.glass-panel h4,
.glass-panel li,
.glass-panel .card-title,
.glass-panel .card-text,
.glass-panel span,
.glass-panel label {
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.glass-panel h1 { margin-bottom: 1.5rem !important; flex-shrink: 0; }  /*yeni*/
.glass-panel .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    margin-bottom: 1rem;        /*yeni*/
}

.glass-panel .nav-tabs .nav-link {
    border: none !important;
    border-bottom: 3px solid transparent !important;
}

.glass-panel .nav-tabs .nav-link.active {
    border-bottom: 3px solid #dc3545 !important;
    background-color: #dc3545 !important;
    color: #1a1a1a !important;
}

.glass-panel .tab-content {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    text-align: left;
    padding: 1.5rem 1rem 0 1rem;

}


.blog-panel {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    text-align: left;
    padding: 1.5rem 1rem 0 1rem;

}

/* --- MASAÜSTÜ GÖRÜNÜM --- */
/* .desktop-wrapper, */
#main-view {
    position: relative;
    /* height: 100vh; */
    height: 100%;
    width: 100%;
}

#bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    z-index: 1000;
    background-color: #1a1a1a;
    border-top: 1px solid #444;
}

.section-item {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-in-out;
    transform: translateY(0);
    opacity: 1;
    background-size: cover;
    background-position: center center;
    padding: 3rem 2rem 12vh 2rem;
    box-sizing: border-box;
}

.section-item.is-entering {
    transform: translateY(100vh);
}

.section-item.is-exiting {
    opacity: 0;
    pointer-events: none;
}

#section-1 {
    padding: 0;
}

/* === ALT NAVİGASYON BUTONLARI === */
#bottom-nav {
    z-index: 1000;
    background-color: #1a1a1a;
    border-top: 1px solid #444;
}
#bottom-nav .nav-button.active { /* ID ekleyerek özgüllüğü artırdık */
    color: #fff !important; /* Test için !important ekleyelim */
    background-color: #dc3545 !important; /* Test için !important ekleyelim */
}

#bottom-nav .row,
.nav-button {
    height: 100%;
}

.nav-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    cursor: pointer;
    color: #ccc;
    font-weight: 500;
    font-size: 1rem;
    background-color: transparent;
    border: none;
    transition: color 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}

.nav-button:hover {
    color: #fff;
    background-color: #2a2a2a;
}

.nav-button.active {
    color: #fff;
    background-color: #dc3545;
}

/* === ARKA PLANLAR === */
#hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -2;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 20, 0.5);
    z-index: -1;
}


/* === BİLEŞEN STİLLERİ (BUTON, KART, FORM) === */
.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    transition: all 0.3s ease;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* === SWIPER JS STİLLERİ (EKSİKSİZ) === */
.swiper {
    width: 100%; padding-top: 20px; padding-bottom: 20px;
    /* overflow: hidden; KALDIRILDI */
}
.swiper-slide {
    background-position: center; background-size: cover;
    width: 250px; height: auto;
    opacity: 0.7; transition: opacity .3s ease;
    transform-style: preserve-3d;
}
.swiper-slide img { display: block; width: 100%; border-radius: 8px; height: 200px; /* Sabit yükseklik */
    object-fit: cover; /* Sığdırma kuralı */}
.swiper-slide-active { opacity: 1; }
.swiper-slide-shadow-left, .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0)); }
.swiper .swiper-pagination-bullet { background-color: #fff; opacity: 0.6; }
.swiper .swiper-pagination-bullet-active { background-color: #dc3545; opacity: 1; }
.swiper .swiper-button-prev, .swiper .swiper-button-next { color: #fff; opacity: 0.7; transition: opacity .3s ease; }
.swiper .swiper-button-prev:hover, .swiper .swiper-button-next:hover { opacity: 1; }
.swiper .swiper-button-prev::after, .swiper .swiper-button-next::after { font-size: 2rem; }

/* === BLOG SAYFASI KARTLARI === */

/* .blog-main .card-link { */
    /* Kart link stilleri */
    /* text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
} */

/* .blog-main .blog-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: rgba(0, 0, 0, 0.4); */
    /* Glass panelden biraz farklı */
    /* height: 100%; */
    /* Kartların aynı hizada durması için */
/* } */

/* .blog-main .card-link:hover .blog-card {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
} */

/* .blog-main .card-img-top {
    height: 180px;
    object-fit: cover;
    width: 100%;
} */

/* === BLOG DETAY SAYFASI === */
.blog-detail-main .blog-article {
    /* Detay sayfası paneli */
    padding: 2rem 1.5rem;
    /* Genel panel padding'i */
    width: 100%;
    /* Genişliği doldur */
    height: auto;
    /* İçeriğe göre uzasın */
    display: block;
    /* Flex olmasın */
}

.blog-detail-main .blog-article h1 {
    /* Yazı başlığı */
    font-size: 2.8rem;
    margin-bottom: 0.5rem !important;
}

.blog-detail-main .blog-article h4 {
    /* Alt başlıklar */
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-weight: bold;
    color: #dc3545 !important;
    /* Kırmızı vurgu */
    text-shadow: none;
}

.blog-detail-main .blog-article p,
.blog-detail-main .blog-article li {
    /* Paragraflar ve liste elemanları */
    font-size: 1.1rem;
    line-height: 1.7;
    color: #eee !important;
    /* Hafif açık beyaz */
    text-shadow: none;
}

.blog-detail-main .blog-article ul {
    padding-left: 1.5rem;
    margin-top: 1rem;
}

/* === BLOG KARTLARI İÇİN DÜZELTME === */
#section-4 .card {
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#section-4 .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* YENİ KURAL: Kart resimlerine sabit yükseklik ve sığdırma */
#section-4 .card-img-top {
    height: 180px;
    /* Sabit bir yükseklik belirleyin (isteğe bağlı) */
    object-fit: cover;
    /* Resmi orantısını koruyarak alana sığdır/kırp */
    width: 100%;
    /* Genişliği doldursun */
}

.card-link {
    text-decoration: none;
    color: inherit;
    /* Kartın kendi yazı rengini alsın */
    display: block;
    /* Tam blok olarak davransın */
    height: 100%;
    /* Kolonun tamamını kaplasın */
}

/* Kartın üzerine gelince hafifçe büyüme ve parlama efekti */
.card-link:hover .card {
    transform: translateY(-5px) scale(1.02);
    /* Hafif yukarı kalkıp büyüsün */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    /* Gölge belirginleşsin */
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.contact-info i {
    font-size: 1.2rem;
    margin-right: 1rem;
    margin-top: 0.25rem;
    color: #dc3545;
}

.form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.form-control::placeholder {
    color: #ccc;
}

.form-control:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    color: #fff;
}

/* --- CUSTOM SCROLLBAR --- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
}


/* --- MOBİL GÖRÜNÜM --- */
.mobile-wrapper {
    display: none;
}

#mobile-main-view {
    height: 100vh;
    padding-bottom: 60px;
    box-sizing: border-box;
    overflow-y: auto;
}

#mobile-main-view .section-item {
    min-height: 100%;
    align-items: flex-start;
    padding: 50px 20px;
    position: relative;
}

/* Section içeriği için genel mobil padding */
#mobile-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #020202;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 2000;
}

.tab-item {
    cursor: pointer;
    color: #c7c8c9;
    transition: color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    gap: 4px;
    border: none !important;
}

.tab-item i {
    font-size: 1.2rem;
}

.tab-item span {
    font-size: 0.75rem;
    font-weight: 500;
}

.tab-item.active {
    color: #dc3545;
    border: none !important;
}


/* === MOBİL MEDIA QUERY === */
@media (max-width: 768px) {
    .desktop-wrapper {
        display: none;
    }

    .mobile-wrapper {
        display: block;
    }

    /* GÜNCELLENDİ: Section item padding'i artırıldı */
    .section-item {
        padding: 4rem 1rem 80px 1rem;
        /* Üst padding artırıldı */
    }

    /* GÜNCELLENDİ: Hero section padding'i sıfırlama kuralı kaldırıldı */
    /* #section-1 { padding: 0; } */
    /* Bu satır kaldırıldı veya yorumlandı */

    /* Glass panel için mobil ayarlar */
    .glass-panel {
        padding: 1.5rem 1rem;
        position: relative;
        /* top: 10vh; */
        max-height: 80vh;
    }

    .glass-panel h1 {
        font-size: 2.0rem;
    }

    /* Başlık fontu mobilde küçültüldü */
    .hero-panel {
        padding: 2rem !important;
        position: relative;
        top: 20vh;
    }

    /* Hero panelin mobil padding'i */

    /* === YENİ: MOBİL LOGO AYARLARI === */
    .site-logo {
        top: 10vh;
        /* Mobilde biraz daha yukarıda */
        /* Yatay ortalama zaten yukarıda yapıldı, burada tekrar gerek yok */
    }

    .site-logo img {
        max-height: 150px;
        /* Mobil Logo Yüksekliği (daha küçük) */
    }

    #section-5 .glass-panel {
        text-align: left;
        /* Mobilde sola yasla */
    }

    #section-5 h1 {
        text-align: center;
        /* Sadece başlık ortada kalsın */
        margin-bottom: 0.5rem !important;
    }

    #section-5 .row {
        /* Dikey boşlukları azalt */
        --bs-gutter-y: 1 rem;
        /* Sütunlar arası dikey boşluk */
    }

    #section-5 h4 {
        margin-bottom: 1rem !important;
        /* Başlık altı boşluk azaltıldı */
        font-size: 1.25rem;
        /* Başlık fontu küçültüldü */
    }

    #section-5 .contact-info li {
        margin-bottom: 0.8rem;
        /* Liste elemanları arası boşluk azaltıldı */
        font-size: 0.9rem;
        /* Yazı boyutu küçültüldü */
    }

    #section-5 .contact-info i {
        font-size: 1rem;
        /* İkon boyutu küçültüldü */
        margin-right: 0.8rem;
    }

    #section-5 form .mb-3 {
        margin-bottom: 0.8rem !important;
        /* Form elemanları arası boşluk azaltıldı */
    }

    #section-5 form button {
        margin-top: 1rem;
        /* Buton üst boşluğu */
    }

    body.scrollable-page {
        padding-bottom: 60px;
        /* Mobil tab-bar yüksekliği */
    }

    /* Blog sayfası mobil kart düzeni */
    .blog-main .card-img-top {
        height: 150px;
    }
.tab-item {
    border: none !important;
    text-decoration: none;
}
    /* --- MOBİL BLOG DETAY DÜZELTMELERİ --- */

    /* Mobil Blog Navigasyonu */
    .blog-nav {
        margin-top: 2vh;
        padding: 0.5rem;
        max-width: 100%;
        /* YENİ: Ortalama ve boşluk */
        justify-content: center;
        gap: 1.5rem; /* Linkler arasına boşluk */
    }
    .blog-nav-link {
        font-size: 0.9rem; /* Biraz büyüttük */
        white-space: nowrap; /* Yazıların alta kaymasını engelle */
    }
    /* "Tüm Yazılar" linkini özel olarak ortalamaya gerek kalmadı */

    /* Mobil Blog Makale Paneli */
    .blog-article {
        max-width: 100%;
        margin-top: 0; /* Nav ile arasındaki boşluğu sıfırla */
        /* YENİ: Flex yapısını mobilde de koru */
        display: flex;
        flex-direction: column;
        height: 70vh; /* İçindeki flex-grow'un çalışması için */
    }
    .blog-article h1 { font-size: 1.8rem; } /* Makale başlığı daha küçük */
    .blog-article .article-meta { font-size: 0.8rem; margin-bottom: 1rem !important; }
    .blog-article .article-image {
        max-width: 100%; height: 200px; object-fit: cover;
        margin-bottom: 1rem !important;
    }
    /* Mobil Makale İçerik Scroll */
    .blog-article .article-content {
        flex-grow: 1; /* Esnesin */
        overflow-y: auto; /* Kaydır */
        min-height: 0; /* Kritik! */
        padding-right: 0.5rem; /* İnce scroll bar boşluğu */
        margin-top: 0;
        max-height: calc(100vh - 10vh - 60px - 4rem); /* Ekran - üst boşluk - alt tab bar - section padding */
    }
    .blog-article .article-content p,
    .blog-article .article-content li { font-size: 0.95rem; line-height: 1.6; }
    .blog-article .article-content h4 { font-size: 1.2rem; margin-top: 1.5rem; }
.swiper-slide { width: 150px; }

/* Mobil blog navigasyonu */
    .blog-nav {
        margin-top: 2vh;
        padding: 0.5rem;
    }
    .blog-nav-link { font-size: 0.8rem; }
    .blog-nav-link span { display: none; } /* Mobilde sadece ikon */
     /* Mobilde "Tüm Yazılar" ikonunu ortalamak için */
    .blog-nav a:nth-child(2) { flex-grow: 1; text-align: center;}

    .blog-article { max-height: none; } /* Mobilde yükseklik sınırı olmasın */
    .blog-article .article-image { max-width: 100%; height: 200px; object-fit: cover; } /* Mobil resim ayarı */

}