/* Genel Sayfa Ayarları */
body {
    font-family: Arial, sans-serif; /* Sayfadaki varsayılan yazı tipini belirler */
    margin: 0; /* Sayfanın dış kenar boşluklarını sıfırlar */
    padding: 0; /* Sayfanın iç kenar boşluklarını sıfırlar */
    display: flex; /* İçerikleri esnek kutu modeliyle düzenler */
    flex-direction: column; /* İçerikleri dikey olarak sıralar */
    min-height: 100vh; /* Minimum yüksekliği ekranın tamamı kadar yapar (viewport height) */
    padding-top: 90px; /* Header'ın yaklaşık yüksekliği kadar üstten boşluk bırakır, böylece içerik header altına kaymaz */
    /* background-color: #d65353; */ /* Site Arka planı düz renk için (yorum satırında) */
    background: linear-gradient(to bottom, #5fc6f2, #007bff); /* Site Arka planı alttan üste doğru gradyan geçiş için */
}

/* Header (Üst Bilgi Çubuğu) Stilleri */
header {
    background-color: #f8f8f8; /* Header'ın arka plan rengi */
    padding: 20px; /* Header'ın iç kenar boşlukları */
    border-bottom: 1px solid #eee; /* Header'ın altına ince bir çizgi ekler */
    display: flex; /* İçerikleri esnek kutu modeliyle düzenler */
    flex-direction: column; /* İçerikleri dikey olarak sıralar */
    align-items: center; /* İçerikleri dikey eksende ortalar (cross-axis) */
    gap: 20px; /* Öğeler arasında 20 piksel boşluk bırakır */
    position: fixed; /* Header'ı sayfada sabitler */
    top: 0; /* Sayfanın en üstüne hizalar */
    width: 100%; /* Tam genişlikte olmasını sağlar */
    z-index: 1000; /* Diğer öğelerin önünde görünmesini sağlar */
    box-sizing: border-box; /* Padding ve border değerlerinin öğenin toplam genişlik ve yüksekliğine dahil edilmesini sağlar */
}

/* Logo Resim Stilleri */
.logo img {
    max-width: 200px; /* Logo resminin maksimum genişliğini belirler */
    height: auto; /* Oranını koruyarak yüksekliğini otomatik ayarlar */
}

/* Hamburger Menü Buton Stilleri (Mobil İçin) */
.hamburger-menu {
    display: none; /* Varsayılan olarak gizlidir (masaüstünde görünmez) */
    background: none; /* Arka plan rengini kaldırır */
    border: none; /* Kenarlığı kaldırır */
    cursor: pointer; /* Fare imleci üzerine geldiğinde işaretçi olur */
    padding: 10px; /* Butonun iç boşluğu */
    position: absolute; /* Header'a göre konumlandırır */
    right: 20px; /* Sağdan 20 piksel boşluk */
    top: 20px; /* Yukarıdan 20 piksel boşluk */
    z-index: 1001; /* Diğer öğelerin ve menünün önünde görünmesini sağlar */
}

/* Hamburger Menü Çizgileri */
.hamburger-menu span {
    display: block; /* Her çubuğun blok eleman olmasını sağlar */
    width: 30px; /* Çubuğun genişliği */
    height: 3px; /* Çubuğun yüksekliği */
    background-color: #333; /* Çubuğun rengi */
    margin-bottom: 5px; /* Çubuklar arasında boşluk bırakır */
    transition: all 0.3s ease; /* Tüm değişikliklere yumuşak geçiş efekti ekler */
}

/* Header Navigasyon Menüsü Stilleri */
header nav ul {
    list-style: none; /* Liste işaretlerini kaldırır */
    padding: 0; /* İç boşlukları sıfırlar */
    margin: 0; /* Dış boşlukları sıfırlar */
    display: flex; /* İçerikleri esnek kutu modeliyle düzenler */
    justify-content: center; /* İçerikleri yatayda ortalar */
    flex-wrap: wrap; /* Öğeler sığmadığında alt satıra geçmesini sağlar */
    gap: 15px; /* Öğeler arasında boşluk bırakır */
    flex-direction: column; /* İçerikleri dikey olarak sıralar (mobil varsayılan) */
    width: 100%; /* Tam genişlikte olmasını sağlar */
    background-color: #f8f8f8; /* Arka plan rengi */
    position: absolute; /* Header'a göre konumlandırır */
    top: 100%; /* Header'ın altından başlar */
    left: 0; /* Sola hizalar */
    padding: 10px 0; /* Dikeyde iç boşluk */
    display: none; /* Varsayılan olarak gizlidir */
    opacity: 0; /* Başlangıçta tamamen şeffaf yapar */
    visibility: hidden; /* Başlangıçta görünmez yapar */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Görünürlük değişimlerine yumuşak geçiş ekler */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Gölge efekti ekler */
    box-sizing: border-box; /* Padding ve border değerlerinin öğenin toplam genişlik ve yüksekliğine dahil edilmesini sağlar */
}

/* Aktif Navigasyon Menüsü (Açıkken) */
header nav ul.active {
    display: flex; /* Menü açıldığında görünür hale gelir */
    opacity: 1; /* Tamamen görünür yapar */
    visibility: visible; /* Görünür yapar */
}

/* Navigasyon Liste Öğeleri */
header nav ul li {
    position: relative; /* Alt menüleri konumlandırmak için gereklidir */
}

/* Navigasyon Bağlantı Stilleri */
header nav ul li a {
    color: #184f9e; /* Metin rengi */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    padding: 5px 10px; /* İç kenar boşluğu */
    display: block; /* Tüm alanı kaplamasını sağlar */
    font-weight: bold; /* Metni kalın yapar */
}

/* Navigasyon Bağlantılarının Üzerine Gelindiğinde */
header nav ul li a:hover {
    text-decoration: underline; /* Alt çizgi ekler */
    color: #007bff; /* Metin rengini değiştirir */
}

/* Dropdown Menü İçerikleri */
.dropdown-content {
    display: none; /* Varsayılan olarak gizlidir */
    position: absolute; /* Ebeveynine göre konumlandırır */
    background-color: #f9f9f9; /* Arka plan rengi */
    min-width: 160px; /* Minimum genişliği */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Gölge efekti */
    z-index: 1; /* Üstte görünmesini sağlar */
    top: 100%; /* Ebeveyninin altından başlar */
    left: 50%; /* Yatayda ortalar */
    transform: translateX(-50%); /* Kendi genişliğinin yarısı kadar sola kaydırarak tam ortalama */
    white-space: nowrap; /* Metinlerin tek satırda kalmasını sağlar */
    border-top: 2px solid #007bff; /* Üst kenara çizgi ekler */
}

/* Dropdown İçindeki Bağlantılar */
.dropdown-content a {
    color: #333; /* Metin rengi */
    padding: 12px 16px; /* İç kenar boşluğu */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    display: block; /* Tüm alanı kaplamasını sağlar */
    text-align: left; /* Metni sola hizalar */
    font-weight: normal; /* Metni normal kalınlıkta yapar */
}

/* Dropdown İçindeki Bağlantıların Üzerine Gelindiğinde */
.dropdown-content a:hover {
    background-color: #ddd; /* Arka plan rengini değiştirir */
}

/* Dropdown'ın Üzerine Gelindiğinde İçeriğin Görünmesini Sağlar (Masaüstü İçin) */
.dropdown:hover .dropdown-content {
    display: block; /* Dropdown içeriğini görünür yapar */
}

/* Aktif Navigasyon Menüsü Altındaki Dropdown İçerikleri (Mobil İçin) */
header nav ul.active li.dropdown .dropdown-content {
    position: static; /* Konumlandırmayı kaldırır */
    transform: translateX(0); /* Konumlandırma dönüşümünü sıfırlar */
    width: 100%; /* Tam genişlik */
    box-shadow: none; /* Gölgeyi kaldırır */
    border-top: none; /* Üst çizgiyi kaldırır */
    background-color: #f0f0f0; /* Arka plan rengi */
    max-height: 0; /* Başlangıçta yüksekliği sıfır yapar (gizler) */
    overflow: hidden; /* Taşmayı gizler */
    transition: max-height 0.3s ease-out; /* Maksimum yükseklik değişimine yumuşak geçiş */
    display: block; /* Gerekli olduğunda block olarak gösterilir */
}

/* Aktif Mobil Dropdown Menü Açıkken */
header nav ul.active li.dropdown .dropdown-content.show {
    max-height: 500px; /* Maksimum yüksekliği artırarak içeriği gösterir */
}

/* --- SLIDER STİLLERİ --- */
.slideshow-container {
    position: relative; /* İçindeki elemanların konumlandırılması için referans noktası olur */
    width: 90%; /* Sayfanın %90'ı kadar genişlik */
    max-width: 1080px; /* Slider'ın alabileceği maksimum genişlik (örneğin 1400px) */
    max-height: 1920px; /* Slider'ın alabileceği maksimum yükseklik (örneğin 800px) */
    margin-left: auto; /* Soldan otomatik boşluk bırakarak ortalar */
    margin-right: auto; /* Sağdan otomatik boşluk bırakarak ortalar */
    background-color: #f8f8f8; /* Arka plan rengi */
    padding-top: 30%; /* 16:9 en boy oranı için (genişliğe göre yükseklik) slayder boyutunu buradan değiştir */
    height: 0; /* padding-top ile dinamik yükseklik için yüksekliği sıfırlar */
    overflow: hidden; /* İçerik taşarsa gizle */
    display: block; /* Blok eleman olarak davranmasını sağlar */
}

/* Tek Bir Slayt Stilleri */
.slide {
    position: absolute; /* Kapsayıcısına (slideshow-container) göre konumlandırır */
    top: 0; /* Yukarıdan hizalar */
    left: 0; /* Soldan hizalar */
    width: 100%; /* Tam genişlik */
    height: 100%; /* Tam yükseklik */
    object-fit: cover; /* Resim veya videoyu kapsayıcıyı dolduracak şekilde kırpar */
    display: none; /* Varsayılan olarak gizlidir */
    opacity: 0; /* Başlangıçta tamamen şeffaf yapar */
    transition: opacity 1s ease-in-out; /* Opaklık değişimine yumuşak geçiş ekler */
}

/* Aktif Slayt Stilleri */
.slide.active {
    display: block; /* Aktif olduğunda görünür yapar */
    opacity: 1; /* Tamamen görünür yapar */
}

/* Slayt İçindeki Video ve Resim Stilleri */
.slideshow-container video,
.slideshow-container img {
    width: 100%; /* Kapsayıcısının tamamını kaplar */
    height: 100%; /* Kapsayıcısının tamamını kaplar */
    display: block; /* Blok eleman olarak davranmasını sağlar */
    position: absolute; /* Kapsayıcısına göre konumlandırır */
    top: 0; /* Yukarıdan hizalar */
    left: 0; /* Soldan hizalar */
    object-fit: cover; /* Resmi veya videoyu kapsayıcıyı dolduracak şekilde kırpar */
}

/* Slayt Üstündeki Metin Kutusu Stilleri */
.slide-text {
    position: absolute; /* Kutuyu ebeveynine (slideshow-container) göre konumlandırmak için gereklidir */
    bottom: 0%; /* Kutuyu slaytın alt kenarına hizalar */
    left: 50%; /* Kutunun sol kenarını slaytın yatay merkezine taşır */
    transform: translateX(-50%); /* Kutunun kendi genişliğinin yarısı kadar sola kaydırarak yatayda tam ortalanmasını sağlar */
    /* top: 70%; /* Bu satırı yoruma alıyoruz veya siliyoruz, çünkü 'bottom' kullanıyoruz. */
    /* left: 20%; /* Bu satırı yoruma alıyoruz veya siliyoruz, çünkü 'left: 50%' kullanıyoruz. */
    /* transform: translate(-50%, -50%); /* Bu satırı yoruma alıyoruz veya siliyoruz, çünkü sadece translateX kullanacağız. */
    color: white; /* Metin rengi */
    text-align: center; /* İçindeki metni ortalar */
    z-index: 5; /* Diğer öğelerin önünde veya arkasında olma sırasını belirler (daha yüksek değer önde) */
    padding: 15px 20px; /* İç kenar boşluğu (dikey 15px, yatay 20px) */
    background-color: rgba(0, 0, 0, 0.5); /* Arka plan rengi (siyah ve %50 şeffaf) */
    border-radius: 10px 10px 0 0; /* Köşeleri yuvarlar, sadece üst köşeleri yuvarlayıp alt köşeleri düz bırakmak için */
    width: 100%; /* Kutucuğun slaytın genişliği kadar olmasını sağlar */
    max-width: 100%; /* Metin genişledikçe slaytın tamamına kadar genişlemesini garanti eder */
    box-sizing: border-box; /* Padding ve border değerlerinin öğenin toplam genişlik ve yüksekliğine dahil edilmesini sağlar */
    opacity: 0; /* Başlangıçta kutuyu tamamen şeffaf (görünmez) yapar */
    transition: opacity 1s ease-in-out; /* Opaklık değişiminin 1 saniye içinde yumuşak bir şekilde gerçekleşmesini sağlar */
}

/* Aktif Slayt Metin Kutusu */
.slide.active .slide-text {
    opacity: 1; /* .slide öğesi .active sınıfına sahip olduğunda .slide-text'i görünür yapar (geçişle birlikte) */
}

/* Slayt Metin Kutusu İçindeki Başlık (h2) Stilleri */
.slide-text h2 {
    font-size: 1.6em; /* Başlık (h2) metninin boyutunu ayarlar */
    margin-bottom: 10px; /* Başlık ile altındaki öğe arasına 10 piksel boşluk bırakır */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Metne gölge efekti ekler (x-kaydırma, y-kaydırma, bulanıklık, renk) */
}

/* Slayt Metin Kutusu İçindeki Paragraf (p) Stilleri */
.slide-text p {
    font-size: 1.2em; /* Paragraf (p) metninin boyutunu ayarlar */
    line-height: 1.1; /* Satırlar arasındaki boşluğu ayarlar (satır yüksekliği) */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Metne gölge efekti ekler */
}

/* Slayt Buton Kutusu Stilleri */
.slide-button-box {
    margin-top: 20px; /* Üst kenardan 20 piksel dış boşluk bırakır */
    opacity: 1; /* Başlangıçta butonu tamamen şeffaf (görünmez) yapar */
    transition: opacity 1s ease-in-out 0.2s; /* Opaklık değişiminin 1 saniyede, 0.2 saniye gecikmeyle gerçekleşmesini sağlar */
}

/* Aktif Slayt Buton Kutusu */
.slide.active .slide-button-box {
    opacity: 1; /* .slide öğesi .active sınıfına sahip olduğunda .slide-button-box'ı görünür yapar (geçişle birlikte) */
}

/* Slayt Buton Stilleri */
.slide-button-box a {
    display: inline-block; /* Öğeyi bir blok gibi davranan, ancak içerikle genişleyen bir satır içi öğe yapar */
    background-color: #007bff; /* Arka plan rengi (mavi) */
    color: white; /* Metin rengi */
    padding: 10px 10px; /* İç kenar boşluğu (dikey 10px, yatay 10px) */
    border-radius: 25px; /* Köşeleri yuvarlayarak hap şeklinde bir buton görünümü verir */
    text-decoration: none; /* Metin alt çizgisini kaldırır */
    font-weight: bold; /* Metni kalın yapar */
    font-size: 1em; /* Metin boyutunu ayarlar */
    border: 2px solid #f0ad4e; /* 2 piksel kalınlığında mavi kenarlık ekler */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Fare üzerine gelindiğinde renk geçişlerinin yumuşak olmasını sağlar */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Butona gölge efekti ekler */
}

/* Slayt Butonunun Üzerine Gelindiğinde */
.slide-button-box a:hover {
    background-color: #f0ad4e; /* Fare butona geldiğinde arka plan rengini değiştirir */
    border-color: #f0ad4e; /* Fare butona geldiğinde kenarlık rengini değiştirir */
    color: white; /* Fare butona geldiğinde metin rengini değiştirir */
    cursor: pointer; /* Fare butona geldiğinde imleci işaretçi (el) olarak değiştirir */
}

/* Ana İçerik Alanı (main) Stilleri */
main {
    background-color: #184f9e; /* Arka plan rengi */
    color: white; /* Metin rengi */
    flex-grow: 1; /* Esnek kutuda kalan alanı doldurmasını sağlar */
    padding: 0px; /* İç kenar boşluklarını sıfırlar */
    text-align: center; /* İçindeki metni ve öğeleri yatayda ortalar */
    margin-top: 0; /* Üst dış boşluğu sıfırlar */
    width: 100%; /* Tam genişlik */
    max-width: 1080px; /* Maksimum genişlik */
    margin: 0 auto; /* Yatayda otomatik boşluk bırakarak ortalar */
    box-sizing: border-box; /* Padding ve border değerlerinin öğenin toplam genişlik ve yüksekliğine dahil edilmesini sağlar */
}

/* Ana İçerik Alanı Paragraf Stilleri */
main p {
    line-height: 1.6; /* Satırlar arasındaki boşluğu ayarlar */
    margin-bottom: 1em; /* Alt dış boşluk */
    max-width: 1200px; /* Maksimum genişlik */
    margin-left: auto; /* Soldan otomatik boşluk bırakarak ortalar */
    margin-right: auto; /* Sağdan otomatik boşluk bırakarak ortalar */
}

/* Footer (Alt Bilgi) Stilleri */
footer {
    background-color: #184f9e; /* Arka plan rengi */
    color: white; /* Metin rengi */
    padding: 0px; /* İç kenar boşluklarını sıfırlar */
    text-align: center; /* İçindeki metni ve öğeleri yatayda ortalar */
    border-top: 1px solid #444; /* Üst kenara ince bir çizgi ekler */
    width: 100%; /* Tam genişlik */
    max-width: 1080px; /* Maksimum genişlik */
    margin: 0 auto; /* Yatayda otomatik boşluk bırakarak ortalar */
    box-sizing: border-box; /* Padding ve border değerlerinin öğenin toplam genişlik ve yüksekliğine dahil edilmesini sağlar */
}

/* Footer İletişim Bilgileri */
footer .contact-info {
    margin-top: 20px; /* Üst dış boşluk */
    margin-bottom: 20px; /* Alt dış boşluk */
}

/* Footer İletişim Bilgileri Paragrafı */
footer .contact-info p {
    margin: 5px 0; /* Dikeyde 5 piksel, yatayda 0 dış boşluk */
}

/* Footer İletişim Bilgileri Bağlantıları */
footer .contact-info a {
    color: white; /* Metin rengi */
    text-decoration: none; /* Alt çizgiyi kaldırır */
}

/* Footer Sosyal Medya Bağlantı Resimleri */
footer .social-links img {
    width: 50px; /* Resim genişliği */
    height: 50px; /* Resim yüksekliği */
    margin: 0 10px; /* Yatayda dış boşluk */
    vertical-align: middle; /* Dikeyde ortalar */
}

/* Footer Sosyal Medya Bağlantı Kapsayıcısı */
footer .social-links a {
    display: inline-block; /* Satır içi blok eleman olarak davranır */
    margin: 0 5px; /* Yatayda dış boşluk */
}

/* Footer Harita Gömme Alanı */
footer .map-embed {
    margin-top: 20px; /* Üst dış boşluk */
}

/* Footer Harita iframe Stilleri */
footer .map-embed iframe {
    width: 100%; /* Tam genişlik */
    max-width: 600px; /* Maksimum genişlik */
    height: 300px; /* Yükseklik */
    border: 0; /* Kenarlığı kaldırır */
}

/* Yol Tarifi Buton Kutusu */
.get-directions-box {
    background-color: #184f9e; /* Arka plan rengi */
    padding: 0px 5px; /* İç kenar boşluğu */
    border-radius: 5px; /* Köşeleri yuvarlar */
    display: inline-block; /* Satır içi blok eleman olarak davranır */
    margin-top: 0px; /* Üst dış boşluk */
    border: 1px solid rgb(255, 255, 255); /* Beyaz kenarlık */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Gölge efekti */
}

/* Yol Tarifi Buton Bağlantısı */
.get-directions-box a {
    color: white; /* Metin rengi */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    font-weight: bold; /* Metni kalın yapar */
    transition: color 0.3s ease; /* Renk değişimine yumuşak geçiş */
}

/* Yol Tarifi Butonunun Üzerine Gelindiğinde */
.get-directions-box a:hover {
    color: #007bff; /* Metin rengini değiştirir */
    text-decoration: underline; /* Alt çizgi ekler */
}

/* Footer Paragraf Stilleri */
footer p {
    line-height: 1.6; /* Satırlar arasındaki boşluğu ayarlar */
    margin-bottom: 1em; /* Alt dış boşluk */
}

/* Responsive Tasarım İçin Medya Sorguları */

/* Mobil Cihazlar İçin (< 768px) */
@media (max-width: 767px) {
    .hamburger-menu {
        display: block; /* Hamburger menüyü mobil cihazlarda gösterir */
    }
    header nav ul {
        display: none; /* Navigasyon menüsünü mobil cihazlarda gizler */
    }
    header nav ul.active {
        display: flex; /* Aktif menüyü gösterir */
        flex-direction: column; /* Menü öğelerini dikey sıralar */
        align-items: center; /* Menü öğelerini yatayda ortalar */
    }
    header {
        position: fixed; /* Header'ı sabitler */
        width: 100%; /* Tam genişlik */
        top: 0; /* En üste hizalar */
        left: 0; /* Sola hizalar */
        flex-direction: row; /* Öğeleri yatay sıralar */
        justify-content: space-between; /* Öğeler arasına boşluk bırakır */
        align-items: center; /* Öğeleri dikeyde ortalar */
    }
    .dropdown:hover .dropdown-content {
        display: none; /* Mobil cihazlarda hover ile açılan dropdown'ları gizler */
    }
    header nav ul li a {
        text-align: center; /* Bağlantı metinlerini ortalar */
        padding: 10px 0; /* Dikeyde iç boşluk */
    }

    /* Mobil slayt responsive ayarlamaları */
    .slideshow-container {
        width: 100%; /* Mobil cihazlarda tam genişlik */
        max-width: none; /* Mobil cihazlarda maksimum genişlik kısıtlaması olmaz */
        max-height: unset; /* Mobil cihazlarda sabit yükseklik kısıtlaması olmaz */
        padding-top: 56.25%; /* En boy oranını korur (16:9) */
    }
    main, footer {
        max-width: 100%; /* Ana içerik ve footer'ın maksimum genişliğini tam yapar */
        padding-left: 10px; /* Soldan iç boşluk */
        padding-right: 10px; /* Sağdan iç boşluk */
    }
    main p {
        line-height: 1.6; /* Satır yüksekliği */
        margin-bottom: 1em; /* Alt dış boşluk */
    }
    .get-directions-box {
        margin-bottom: 15px; /* Alt dış boşluk */
    }

    /* Slayt Metin ve Buton Mobil Boyutlandırmaları */
    .slide-text h2 {
        font-size: 1.5em; /* Başlık metin boyutunu ayarlar */
    }
    .slide-text p {
        font-size: 1em; /* Paragraf metin boyutunu ayarlar */
    }
    .slide-button-box a {
        font-size: 0.9em; /* Buton metin boyutunu ayarlar */
        padding: 10px 20px; /* Butonun iç boşluğunu ayarlar */
    }
}

/* Masaüstü ve Büyük Tablet Cihazlar İçin (>= 768px) */
@media (min-width: 768px) {
    .hamburger-menu {
        display: none; /* Hamburger menüyü masaüstünde gizler */
    }
    header {
        flex-direction: row; /* Öğeleri yatay sıralar */
        justify-content: center; /* Öğeleri yatayda ortalar */
        align-items: center; /* Öğeleri dikeyde ortalar */
        gap: 50px; /* Öğeler arasında boşluk bırakır */
    }
    header nav ul {
        display: flex !important; /* Navigasyon menüsünü gösterir (mobil için gizlenmişse bile zorla gösterir) */
        position: static; /* Statik konumlandırma */
        opacity: 1; /* Tamamen görünür yapar */
        visibility: visible; /* Görünür yapar */
        flex-direction: row; /* Menü öğelerini yatay sıralar */
        justify-content: center; /* Menü öğelerini yatayda ortalar */
        width: auto; /* Genişliği içeriğe göre ayarlar */
        box-shadow: none; /* Gölgeyi kaldırır */
        padding: 0; /* İç boşlukları sıfırlar */
    }
    header nav ul li.dropdown .dropdown-content {
        position: absolute; /* Ebeveynine göre konumlandırır */
        transform: translateX(-50%); /* Kendi genişliğinin yarısı kadar sola kaydırarak tam ortalama */
        width: auto; /* Genişliği içeriğe göre ayarlar */
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Gölge efekti */
        border-top: 2px solid #007bff; /* Üst kenara çizgi ekler */
        background-color: #f9f9f9; /* Arka plan rengi */
    }
    .dropdown:hover .dropdown-content {
        display: block; /* Dropdown içeriğini hover ile görünür yapar */
    }
    /* Masaüstü görünümünde slider ayarları - .slideshow-container burada zaten tanımlı */
    main, footer {
        width: 100%; /* Tam genişlik */
    }
}

/* --- Galeriye Özel Yeni CSS Stilleri --- */

/* Genel galeri sayfası body ayarları (eğer galeri için ayrı bir body sınıfı varsa) */
.gallery-body {
    font-family: Arial, sans-serif; /* Yazı tipi belirleme */
    margin: 0; /* Sayfa dış kenar boşluklarını sıfırlama */
    padding: 0; /* İç boşlukları sıfırlama */
    background-color: #f4f4f4; /* Arka plan rengi */
    color: #333; /* Metin rengi */
}

/* Galeri ana kapsayıcısı (içeriği sarar) */
.gallery-container {
    max-width: 1200px; /* Maksimum genişlik */
    margin: 20px auto; /* Üstten ve alttan 20px boşluk, sağdan ve soldan otomatik ortalama */
    background-color: #fff; /* Arka plan rengi */
    padding: 20px; /* İç boşluk */
    border-radius: 8px; /* Köşeleri yuvarlama */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
}

/* Galeri filtreleme butonları kapsayıcısı */
.gallery-filters {
    display: flex; /* Flexbox kullanarak butonları yan yana düzenleme */
    flex-wrap: wrap; /* Ekran küçülünce butonların alt satıra geçmesini sağlama */
    justify-content: center; /* Butonları yatayda ortalama */
    margin-bottom: 20px; /* Alttan boşluk */
}

/* Filtreleme butonu stilleri */
.filter-btn {
    background-color: #007bff; /* Arka plan rengi (mavi) */
    color: white; /* Metin rengi */
    border: none; /* Kenarlık yok */
    padding: 10px 20px; /* İç boşluk */
    margin: 5px; /* Dış boşluk */
    cursor: pointer; /* Fare imleci imleç işareti */
    border-radius: 5px; /* Köşeleri yuvarlama */
    transition: background-color 0.3s; /* Arka plan rengi değişimine yumuşak geçiş */
}

/* Filtreleme butonunun üzerine gelindiğinde */
.filter-btn:hover {
    background-color: #0056b3; /* Daha koyu mavi */
}

/* Aktif filtre butonu */
.filter-btn.active {
    background-color: #0056b3; /* Aktif butona daha koyu mavi arka plan */
}

/* Galeri ızgarası (fotoğraf düzeni) */
.gallery-grid {
    display: grid; /* Izgara düzeni kullanma */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive sütunlar: minimum 250px genişlik, esnek */
    gap: 10px; /* Izgara öğeleri arasındaki boşluk */
}

/* Galeri öğesi (her bir fotoğrafın kapsayıcısı) */
.gallery-item {
    cursor: pointer; /* Fare imleci imleç işareti */
    overflow: hidden; /* Taşmayı gizle (köşe yuvarlaması için) */
    border-radius: 5px; /* Köşeleri yuvarlama */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Hafif gölge */
    transition: transform 0.3s ease; /* Büyütme efektine yumuşak geçiş */
}

/* Galeri öğesinin üzerine gelindiğinde */
.gallery-item:hover {
    transform: scale(1.05); /* Resmi %5 büyütme */
}

/* Galeri içindeki resim stilleri */
.gallery-item img {
    width: 100%; /* Kapsayıcısının tamamını kapla */
    height: auto; /* Oranı koru */
    border-radius: 5px; /* Köşeleri yuvarlama (kapsayıcıyla uyumlu) */
    display: block; /* Alt boşluğu kaldırmak için */
}

/* Lightbox (Büyük Resim Görüntüleyici) Stilleri */
#lightbox {
    position: fixed; /* Ekranın belirli bir konumunda kalır */
    top: 0; /* Yukarıdan hizalama */
    left: 0; /* Soldan hizalama */
    width: 100%; /* Tam genişlik */
    height: 100%; /* Tam yükseklik */
    background-color: rgba(0, 0, 0, 0.8); /* Yarı şeffaf siyah arka plan */
    display: none; /* Varsayılan olarak gizli */
    justify-content: center; /* İçeriği yatayda ortalama */
    align-items: center; /* İçeriği dikeyde ortalama */
    z-index: 1000; /* Diğer öğelerin üzerinde görünmesini sağla */
}

/* Lightbox içindeki büyük resim */
#lightbox img {
    max-width: 90%; /* Maksimum genişlik %90 */
    max-height: 90%; /* Maksimum yükseklik %90 */
    object-fit: contain; /* Resmin orantısını koruyarak sığdır */
    border-radius: 5px; /* Köşeleri yuvarlama */
}

/* Lightbox ileri/geri navigasyon butonları */
#lightbox-prev, #lightbox-next {
    position: absolute; /* Kapsayıcısına göre konumlandırma */
    top: 50%; /* Dikeyde ortalama */
    transform: translateY(-50%); /* Kendi yüksekliğinin yarısı kadar yukarı kaydırarak tam ortalama */
    font-size: 2em; /* Yazı tipi boyutu */
    color: white; /* Renk */
    cursor: pointer; /* Fare imleci imleç işareti */
    user-select: none; /* Metin seçimi engelleme */
}

/* Lightbox önceki butonu */
#lightbox-prev {
    left: 20px; /* Soldan 20px boşluk */
}

/* Lightbox sonraki butonu */
#lightbox-next {
    right: 20px; /* Sağdan 20px boşluk */
}

/* --- Toplantı Tablosu Stilleri --- */
.meeting-table-container {
    overflow-x: auto; /* İçerik, yatayda taştığında kaydırma çubuğu ekler. Bu, küçük ekranlarda tablonun dışına taşmasını engeller. */
    margin: 20px auto; /* Üstten ve alttan 20 piksel boşluk bırakır, yatayda ise otomatik boşluk atayarak öğeyi ortalar. */
    max-width: 100%; /* Kapsayıcının maksimum genişliğini %100 olarak ayarlar, böylece her zaman üst öğesinin genişliğini geçmez. */
    padding: 0 10px; /* Üst ve alttan 0, sağdan ve soldan 10 piksel iç boşluk bırakır. Bu, içeriğin kenarlara yapışmasını engeller. */
    box-sizing: border-box; /* Padding ve border değerlerinin öğenin toplam genişliği ve yüksekliğine dahil edilmesini sağlar. */
}

.meeting-table {
    width: 100%; /* Tablonun genişliğini kapsayıcısının %100'ü kadar yapar. */
    border-collapse: collapse; /* Tablo kenarlıklarını birleştirir, böylece her hücrenin ayrı kenarlığı yerine tek bir kenarlık görünür. */
    margin: 20px 0; /* Tablonun üstünden ve altından 20 piksel dış boşluk bırakır, sağ ve sol dış boşluğu sıfırlar. */
    min-width: 600px; /* Tablonun minimum genişliğini 600 piksel olarak ayarlar. Bu, dar ekranlarda tablonun çok küçülüp okunaksız olmasını engeller. */
}

.meeting-table th, .meeting-table td {
    border: 1px solid #ddd; /* Her başlık (th) ve veri (td) hücresine 1 piksel kalınlığında açık gri kenarlık ekler. */
    padding: 8px; /* Her hücrenin içinde 8 piksel iç boşluk bırakır. */
    text-align: center; /* Her hücredeki metni yatayda ortalar. */
    color: white; /* Hücre içindeki metin rengini beyaz yapar. */
}

.meeting-table th {
    background-color: #007bff; /* Tablo başlıklarının arka plan rengini parlak mavi yapar. */
    color: white; /* Tablo başlıklarındaki metin rengini beyaz yapar. */
    font-weight: bold; /* Tablo başlıklarındaki metni kalın yapar. */
}

.meeting-table tr:nth-child(even) {
    background-color: #2a6bb8; /* Çift sıralı tablo satırlarının (2, 4, 6, vb.) arka plan rengini biraz daha koyu bir mavi tonuna ayarlar. (Zebra deseni için) */
}

.meeting-table tr:nth-child(odd) {
    background-color: #184f9e; /* Tek sıralı tablo satırlarının (1, 3, 5, vb.) arka plan rengini ana 'main' alanının rengiyle aynı yapar. (Zebra deseni için) */
}

/* --- Ana Sayfa Oda Bilgileri Düzenlemesi --- */
.room-detail {
    display: flex; /* İçerikleri yan yana hizalar */
    flex-wrap: wrap; /* Küçük ekranlarda alt alta düşmesini sağlar */
    align-items: center; /* İçerikleri dikeyde ortalar */
    margin-bottom: 40px; /* Her oda bloğu arasına boşluk bırakır */
    gap: 5px; /* Metin ve görsel arasında boşluk */
    /* Kenarlardan boşluk eklemek için ayarlar */
    padding: 0 50px; /* Dikeyde 0, yatayda (sağ ve sol) 50px boşluk bırakır */
    /* Veya daha spesifik olarak: */
    /* margin-left: 50px; */ /* Sol dış boşluk */
    /* margin-right: 50px; */ /* Sağ dış boşluk */
    /* Veya tüm kenarlardan eşit boşluk: */
    /* padding: 30px; */ /* Tüm kenarlardan iç boşluk */
}

/* İndex Sayfası Oda Tipleri ve Fotoğrafları Stilleri */
.room-detail:nth-child(even) { /* Çift sıralı odalar için görseli sağa alır */
    flex-direction: row-reverse; /* Öğelerin sırasını tersine çevirir (görsel sağa, metin sola) */
}

.room-content {
    flex: 1; /* Metin içeriğinin kalan alanı doldurmasını sağlar */
    min-width: 300px; /* Metin içeriğinin minimum genişliği */
    text-align: center; /* Metin içeriğini yatayda ortalar */
}

.room-content h4 {
    margin-top: 0; /* Başlık üst boşluğunu sıfırlar */
    color: white; /* H4 başlık rengini beyaz yapar */
}

.room-image {
    flex: none; /* Esnek genişliği kaldırır (sabit genişlik verebilmek için) */
    width: 350px; /* Görselin sabit genişliğini ayarlar */
    max-width: 40%; /* Görselin maksimum genişliğini ayarlar (sabit genişlikten daha büyük olamaz) */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Hafif gölge ekler */
    border-radius: 8px; /* Köşeleri yuvarlar */
    overflow: hidden; /* Taşmaları gizler */
}

.room-image img {
    width: 100%; /* Görselin kapsayıcısını doldurmasını sağlar */
    height: auto; /* Oranını korur */
    display: block; /* Altındaki boşluğu kaldırır */
}

.room-detail .slide-button-box {
    margin-top: 5px; /* Butonun üstünde boşluk bırakır */
    text-align: center; /* Butonu ortalar */
}

/* Mobil uyumluluk için medya sorgusu (Oda Bilgileri Bölümü) */
@media (max-width: 768px) {
    .room-detail {
        flex-direction: column; /* Küçük ekranlarda alt alta hizalar */
        align-items: center; /* Ortalar */
    }

    /* .room-detail:nth-child(even) kuralını mobil için kaldırıyoruz veya üzerine yazıyoruz
       çünkü her zaman görselin üstte olmasını istiyoruz. */
    .room-detail:nth-child(even) {
        flex-direction: column; /* Mobil için varsayılan sütun düzenini koru */
    }
    
    /* Mobil görünümde öğelerin sıralamasını garanti altına alalım */
    .room-detail .room-image {
        order: -1; /* Görseli her zaman en üste taşır */
    }

    .room-detail .room-content {
        order: 0; /* Metin içeriğini görselin altında, butonun üstünde tutar */
    }

    .room-detail .slide-button-box {
        order: 1; /* Butonu en alta taşır */
        text-align: center; /* Butonu ortalar */
    }

    .room-image {
        max-width: 100%;
        width: 100%;
    }
}

/* --- Room-Detail Butonlarına Özel Stiller --- */
/* Sadece main bölümündeki oda detayları içindeki buton kutusundaki bağlantıları hedefle */
main .room-detail .slide-button-box a {
    background-color: #5fc6f2; /* Örnek: Turuncu arka plan */
    color: white; /* BURAYI DEĞİŞTİRİN: Metin rengini beyaza ayarladık */
    border-color: #f0ad4e; /* Kenarlık rengini de arka planla eşleştir */
}

/* Room-Detail Butonlarının Üzerine Gelindiğinde (Hover) */
main .room-detail .slide-button-box a:hover {
    background-color: #ec971f; /* Örnek: Daha koyu turuncu hover arka plan */
    color: white; /* BURAYI DEĞİŞTİRİN: Hover metin rengini de beyaza ayarladık */
    border-color: #ec971f; /* Hover kenarlık rengi */
}

/* --- Banket Sayfası Altındaki Galeri Alanı --- */
.bottom-gallery-section {
    padding: 40px 20px; /* İç boşluk: Üstte ve altta 40px, sağda ve solda 20px boşluk bırakır. */
    text-align: center; /* İçeriği yatayda ortalar (başlık, eğer div içinde değilse). */
    background-color: #f9f9f9; /* Bölümün arka plan rengini açık gri yapar. */
    border-top: 1px solid #eee; /* Bölümün üst kısmına ince, açık gri bir çizgi ekler. */
}

.bottom-gallery-section h2 {
    font-size: 2.2em; /* Başlık metninin boyutunu ayarlar (mevcut font boyutunun 2.2 katı). */
    color: #184f9e; /* Başlık metninin rengini koyu mavi yapar. */
    margin-bottom: 5px; /* Başlık ile altındaki içerik arasına 30 piksel boşluk bırakır. */
    font-family: 'Playfair Display', serif; /* Eğer varsa, başlık fontunu 'Playfair Display' olarak ayarlar, yoksa genel serif fontu kullanır. */
}

.gallery-container {
    display: flex; /* İçindeki öğeleri (galeri öğeleri) esnek kutu modeline göre düzenler, yan yana hizalar. */
    flex-wrap: wrap; /* Esnek öğelerin kapsayıcıya sığmadığında alt satıra geçmesini sağlar. */
    justify-content: center; /* Esnek öğeleri ana eksende (yatayda) ortalar. */
    gap: 20px; /* Esnek öğeler arasında yatayda ve dikeyde 20 piksel boşluk bırakır. */
    max-width: 1200px; /* Bu kapsayıcının alabileceği maksimum genişliği 1200 piksel ile sınırlar. */
    margin: 0 auto; /* Otomatik kenar boşlukları ile kapsayıcıyı yatayda ortalar. */
}

.gallery-item-with-text {
    flex: 1 1 22%; /* Esneklik ayarı: Büyüyebilir (1), küçülebilir (1), varsayılan genişliği %22'dir. Bu 4 öğenin yan yana sığmasını sağlar. */
    min-width: 250px; /* Her bir galeri öğesinin alabileceği minimum genişliği belirler. Daha küçük ekranlarda öğelerin alt satıra geçmesine yardımcı olur. */
    max-width: 280px; /* Her bir galeri öğesinin alabileceği maksimum genişliği belirler. */
    position: relative; /* İçindeki metin kutusunu (item-text) mutlak konumlandırmak için referans noktası olarak ayarlar. */
    overflow: hidden; /* Öğenin sınırlarını aşan içeriği gizler (örneğin yuvarlatılmış köşelerde taşmaları önler). */
    border-radius: 8px; /* Öğenin köşelerini 8 piksel yuvarlar. */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Öğeye hafif bir gölge efekti ekler (x-ofset 0, y-ofset 4px, bulanıklık 10px, yarı şeffaf siyah). */
    transition: transform 0.3s ease-in-out; /* 'transform' özelliğindeki değişikliklerin 0.3 saniyede yumuşak bir geçişle olmasını sağlar. */
}

.gallery-item-with-text:hover {
    transform: translateY(-5px); /* Fare öğenin üzerine geldiğinde, öğeyi 5 piksel yukarı kaydırır (küçük bir hareket efekti). */
}

.gallery-item-with-text img {
    width: 100%; /* Fotoğrafın kapsayıcısının (gallery-item-with-text) tam genişliğini kaplamasını sağlar. */
    height: 200px; /* Fotoğraf için sabit bir yükseklik belirler. */
    object-fit: cover; /* Fotoğrafın boyutlandırılırken oranlarını korumasını ve ayrılan alanı tamamen doldurmasını sağlar (gerekirse kırpar). */
    display: block; /* Fotoğrafın bir blok öğesi gibi davranmasını sağlar, etrafındaki gereksiz boşlukları (inline eleman boşlukları) giderir. */
    border-radius: 8px 8px 0 0; /* Sadece fotoğrafın üst sol ve üst sağ köşelerini 8 piksel yuvarlar. */
}

.gallery-item-with-text .item-text {
    position: absolute; /* Metin kutusunu en yakın konumlandırılmış üst öğeye (gallery-item-with-text) göre mutlak konumlandırır. */
    top: 0; /* Metin kutusunu üst kenara hizalar. */
    left: 0; /* Metin kutusunu sol kenara hizalar. */
    width: 100%; /* Metin kutusunun fotoğrafın genişliği kadar olmasını sağlar. */
    background-color: rgba(0, 0, 0, 0.6); /* Metin kutusunun arka plan rengini %60 opaklığında siyah yapar (fotoğrafın hafifçe görünmesini sağlar). */
    color: white; /* Metin rengini beyaz yapar. */
    padding: 10px 5px; /* İç boşluk: Üstte ve altta 10px, sağda ve solda 5px boşluk bırakır. */
    font-size: 1.1em; /* Metin boyutunu ayarlar. */
    font-weight: bold; /* Metni kalın yapar. */
    text-align: center; /* Metni yatayda ortalar. */
    box-sizing: border-box; /* Padding ve border değerlerinin öğenin toplam genişliği ve yüksekliğine dahil edilmesini sağlar. */
    border-radius: 8px 8px 0 0; /* Sadece metin kutusunun üst sol ve üst sağ köşelerini 8 piksel yuvarlar. */
}

/* Mobil Uyumlu Tasarım için Medya Sorguları */
@media (max-width: 768px) { /* Ekran genişliği 768 piksel veya daha az olduğunda bu kurallar uygulanır (tablet ve daha küçük ekranlar). */
    .gallery-item-with-text {
        flex: 1 1 45%; /* Her bir galeri öğesinin %45'lik bir temel genişliğe sahip olmasını sağlar, bu da iki öğenin yan yana sığmasına olanak tanır. */
        max-width: none; /* Öğelere uygulanan maksimum genişlik kısıtlamasını kaldırır, böylece daha esnek genişleyebilirler. */
    }
}

@media (max-width: 480px) { /* Ekran genişliği 480 piksel veya daha az olduğunda bu kurallar uygulanır (çoğu mobil telefon). */
    .gallery-item-with-text {
        flex: 1 1 90%; /* Her bir galeri öğesinin %90'lık bir temel genişliğe sahip olmasını sağlar, bu da her satırda tek bir öğenin görünmesini sağlar. */
    }
}

/* --- Basit Çerez Bilgilendirme Popup Stilleri --- */
#simple-cookie-popup {
    position: fixed; /* Ekranın belirli bir yerine sabitler */
    bottom: 20px; /* Ekranın altından 20px yukarıda */
    left: 50%; /* Yatayda ortalamak için sol kenardan %50 */
    transform: translateX(-50%) translateY(100%); /* Kendi genişliğinin yarısı kadar sola, kendi yüksekliğinin %100'ü kadar aşağı kaydırarak başlangıçta gizler */
    background-color: #333; /* Koyu gri arka plan */
    color: white; /* Beyaz metin rengi */
    padding: 15px 25px; /* İç boşluklar */
    border-radius: 8px; /* Hafif yuvarlatılmış köşeler */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Gölge efekti */
    z-index: 10000; /* Diğer tüm öğelerin üzerinde görünmesini sağlar */
    display: flex; /* İçeriği esnek kutu olarak hizalar */
    flex-direction: column; /* İçeriği alt alta sıralar */
    align-items: center; /* Yatayda ortalar */
    gap: 15px; /* İç öğeler arasında boşluk */
    max-width: 500px; /* Maksimum genişlik */
    width: calc(100% - 40px); /* Kenarlardan 20px boşluk bırakarak genişlik (mobil uyumluluk için) */
    opacity: 0; /* Başlangıçta tamamen şeffaf */
    visibility: hidden; /* DOM'dan kaldırmadan gizler */
    transition: transform 0.5s ease-out, opacity 0.5s ease-out, visibility 0.5s; /* Animasyon geçişleri */
}

/* Popup görünür olduğunda */
#simple-cookie-popup.cookie-popup-show {
    transform: translateX(-50%) translateY(0); /* Normal pozisyonuna kaydırır */
    opacity: 1; /* Görünür yapar */
    visibility: visible; /* Görünür yapar */
}

#simple-cookie-popup p {
    margin: 0; /* Paragrafın varsayılan boşluklarını sıfırlar */
    font-size: 0.95em;
    text-align: center;
}

#simple-cookie-popup p a {
    color: #87ceeb; /* Bağlantı rengi (açık mavi) */
    text-decoration: underline; /* Altı çizili */
}

.cookie-close-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    background-color: #007bff; /* Mavi buton */
    color: white;
    transition: background-color 0.3s ease;
}

.cookie-close-btn:hover {
    background-color: #0056b3; /* Daha koyu mavi */
}

/* Mobil uyumluluk (gerekirse ek ayarlamalar) */
@media (max-width: 600px) {
    #simple-cookie-popup {
        bottom: 10px;
        left: 10px; /* Mobil ekranlarda soldan sabitle */
        right: 10px; /* Mobil ekranlarda sağdan sabitle */
        transform: translateY(100%); /* Ortalamayı kaldırıp sadece dikey kaydırma */
        width: auto; /* Genişliği otomatik ayarla */
    }
    #simple-cookie-popup.cookie-popup-show {
        transform: translateY(0);
    }
}

/* Popup Arka Planı */
.popup-overlay {
    display: none; /* Varsayılan olarak gizlidir, JavaScript ile görünür hale getirilir. */
    position: fixed; /* Ekranın sabit bir konumunda kalmasını sağlar, sayfa kaydırılsa bile. */
    top: 0; /* Ekranın en üstünde ve en solunda konumlandırır. */
    left: 0; /* Ekranın en üstünde ve en solunda konumlandırır. */
    width: 100%; /* Ekranın tüm genişliğini kaplar. */
    height: 100%; /* Ekranın tüm yüksekliğini kaplar. */
    background: rgba(0, 0, 0, 0.7); /* Popup açıldığında arka planı hafifçe karartır. */
    justify-content: center; /* İçeriği yatayda ortalamak için flexbox kullanır. */
    align-items: center; /* İçeriği dikeyde ortalamak için flexbox kullanır. */
    z-index: 10001; /* Diğer tüm sayfa içeriklerinin üzerinde görünmesini sağlar (en yüksek öncelik). */
}