/* Galeri container'ını merkeze al */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 30px;
    background-color: #f2f2f2; /* Galeri arkaplan rengi */
    margin: 0 auto; /* Merkezde hizalama için */
}


.gallery img {
    width: 500px;
    height: auto;
    margin: 10px;
    border-radius: 8px; /* Kenarları yuvarlat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif bir gölge efekti */
    transition: transform 0.3s ease; /* Yumuşak geçiş efekti */
}

.gallery img:hover {
    transform: scale(1.05); /* 1.05 kat büyütme hover durumunda */
}

.odamodal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9); /* Modal arkaplanını transparan yap */
}

.odamodal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: auto;
    max-width: 80%;
    max-height: 80%;
    border-radius: 8px; /* Kenarları yuvarlat */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Hafif bir gölge efekti */
}


.close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease; /* Yumuşak geçiş efekti */
}

.close:hover {
    color: #ccc; /* Kapatma düğmesine hover durumunda rengi değiştir */
}

.underlined {
    border-bottom: 2px solid #333; /* Alt çizgi stilini belirtin */
    display: block; /* Blok element olarak ayarlayın */
    margin: 0 auto; /* Başlığı yatay olarak ortala */
    width: fit-content; /* Başlığın içeriğine uygun genişlik */
    padding-bottom: 5px; /* Alt boşluk ekleyin */
    text-align: center; /* Başlığı ortala */
}

#top-header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        background-color: #fdb906;
        padding: 10px 0;
        transition: top 0.1s;
        font-size: 14px;
    }

    #main-menu {
        position: fixed;
        top: 35px; /* Masaüstü için 40px yerine sayfa en üstünden başlat */
        width: 100%;
        z-index: 999;
        background-color: #fff;
        transition: top 0.1s;
        font-family: 'Jost', sans-serif;
        font-size: 14px;


    }

@media (min-width: 992px) {
    /* Masaüstü için menü arkaplanını transparan yap */
    #main-menu {
        background-color: transparent !important;
    }

    /* Masaüstü için menü yazılarını beyaz yap */
    #main-menu .navbar-nav .nav-link {
        color: #ffffff !important;
    }
}
@media (min-width: 992px) {
    #main-menu .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #main-menu .navbar-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
    }

    #main-menu .navbar-nav .nav-item {
        margin-right: 15px;
        margin-left: 15px; /* Menü öğeleri arasında boşluk bırakmak için */
    }

    #main-menu .navbar-brand {
        margin-right: auto;
        margin-left: auto; /* Logo için sıfırdan ortalamak */
    }

    #main-menu .dropdown-menu {
        right: 0;
        left: auto;
    }
}


#top-header, #main-menu {
    background-color: transparent !important;
}

@media (min-width: 992px) {
    #main-menu {
        background-color: rgba(0, 0, 0, 0.3) !important; /* Ekstra şeffaflık için arkaplan rengini ayarlayabilirsiniz */
        transition: background-color 0.3s ease; /* Geçiş efekti ekliyoruz */
    }
}

@media (max-width: 991px) {
    #main-menu {
        background-color: rgba(255, 255, 255, 0.9) !important; /* Mobilde arkaplan rengini ayarlayın */
        transition: background-color 0.3s ease; /* Geçiş efekti */
    }
}

 .navbar-nav li.nav-item:hover a.nav-link {
        transform: translateY(-3px); /* Y ekseninde 3 piksel yukarı kaydırma */
        transition: transform 0.3s ease; /* Yumuşak geçiş efekti */
    }

/* Main menu yazıları bold yap */
.navbar-nav .nav-link {
    font-weight: bold;
}





.navbar-nav {
    flex-direction: column;
    text-align: center;
}

.navbar-nav .nav-item {
    margin-top: 10px;
}


.navbar-nav li.nav-item a.nav-link {
    /* Menü öğelerinin varsayılan stilini tanımlayın */
    position: relative;
    text-decoration: none;
    color: #000; /* Varsayılan metin rengi */
}

.navbar-nav li.nav-item a.nav-link::before {
    /* Altı çizgili animasyonlu çizgiyi tanımlayın */
    content: '';
    position: absolute;
    bottom: -5px; /* Çizgiyi metin altına yerleştir */
    left: 0;
    width: 0; /* Başlangıçta çizgi uzunluğu 0 olacak */
    height: 2px; /* Çizgi kalınlığı */
    background-color: #fdb906; /* Çizgi rengi */
    transition: width 0.1s ease; /* Genişlikte bir geçiş efekti uygula */
}

.navbar-nav li.nav-item a.nav-link:hover::before {
    /* Menü öğesine hover yapıldığında çizginin genişliğini artırın */
    width: 100%; /* Metnin tam genişliği kadar uzat */
}

    .scrolled-down #top-header {
        top: -50px;
    }

    .scrolled-down #main-menu {
        top: 0;
    }

    /* Mobil cihazlar için stil */
    @media (max-width: 767px) {
        #top-header {
            display: none;
        }

        #main-menu {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 999;
            background-color: #fff;
            transition: top 0.1s;
        }

        .scrolled-down #main-menu {
            top: 0;
        }

        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-x: hidden;
        }
    }

/* Menü öğelerine hover durumunda bir büyüme efekti ekleyelim */
.navbar-nav li.nav-item:hover a.nav-link {
    transform: scale(1.1); /* 1.1 kat büyütme */
    transition: transform 0.3s ease; /* 0.3 saniyede animasyon */
}

/* Aktif menü öğelerine farklı bir arka plan rengi uygulayalım */
.navbar-nav li.nav-item.active a.nav-link {
    background-color: #fd3838; /* Örnek bir renk */
    transition: background-color 0.3s ease; /* 0.3 saniyede animasyon */
    color: #fff; /* Metin rengini beyaz olarak ayarlayalım */
}
/* Mobil cihazlar için stil */
@media (max-width: 767px) {
    /* Diğer stiller */

    /* Menü öğelerine hover durumunda büyüme efekti kaldırıldı */
    .navbar-nav li.nav-item:hover a.nav-link {
        transform: scale(1); /* Ölçekleme faktörü 1, yani hiçbir büyütme olmayacak */
    }
}



/* Otomatik boyutlandırma */
.same-height {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Slider başlık fontu */
.carousel-caption h5 {
    font-family: 'Lobster', sans-serif;
    font-size: 4rem; /* Font büyüklüğü */
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9); /* Gölge */
    text-align: center; /* Metni ortala */
}

@media (max-width: 767px) {
    .carousel-caption h5 {
        font-size: 3rem; /* Mobil cihazlarda fontu küçült */
    }
}

/* Carousel görselleri */
.carousel-item {
    position: relative;
}

.carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Gölge rengi */
    z-index: 1; /* Resmin altında olacak */
}

.carousel-item img {
    height: 100vh; /* Ekran yüksekliğine tam olarak sığacak şekilde görüntünün boyutunu ayarlar */
    width: 100%;
    object-fit: cover;
    z-index: 0; /* Resmin gölgenin üstünde olmasını sağlar */
}


/* Slider başlık */
.carousel-caption {
    color: white;
    position: absolute;
    top: 61%;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 1000px;
    padding:5px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center; /* Metni ortala */
    z-index: 2;
}
.carousel-caption h5 {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.carousel-item.active .carousel-caption h5 {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 800px) {
    .carousel-caption {
        display: block !important; /* Slider yazılarını mobil cihazlarda görünür hale getirir */
    }
}



/* Body Content Yazıları Sola Dayalı */
#body-content .col-md-6.text-center {
    text-align: left;
}

#body-content img {
    max-height: 600px; /* Resimlerin maksimum yüksekliği */
    width: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease; /* Görünürlükte bir geçiş efekti uygula */
}

#body-content img.loaded {
    opacity: 1; /* Resmin yüklenmesi tamamlandığında görünürlüğü artır */
}


body {
    font-family: 'Jost', sans-serif;
}



h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

p {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5; /* Satır yüksekliği */
}


/* Başlık fontu */
h2 {
    font-family: 'Lobster', sans-serif;
    font-size: 3.5rem; /* Font büyüklüğü */
    /* Diğer stiller buraya eklenebilir */
}


/* Footer */
footer {
    background-image: url('../image/footer.webp'); /* Arkaplan resmi */
    background-size: cover;
    padding: 50px 0;
    position: relative; /* Gölgeleri konumlandırmak için */
}

/* Footer içeriği */
.footer-content {
    text-align: center;
    color: white;
    position: relative; /* Gölgeleri konumlandırmak için */
}

/* Footer'ı tamamen kaplayan siyah yarı şeffaf arka plan */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 0; /* İçerikten önce görüntülenmesi için z-index */
}

/* Footer içeriğini tamamen kaplayan siyah yarı şeffaf arka plan */
.footer-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1; /* İçerikten önce görüntülenmesi için z-index */
}

/* Footer içeriği yazılarına gölge efekti */
.footer-content p {
    position: relative; /* Gölgeleri konumlandırmak için */
    z-index: 2; /* İçerikten önce görüntülenmesi için z-index */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Gölge efekti */
}

/* Footer başlıkları için font */
footer h5 {
    font-family: 'Righteous', sans-serif;
    font-size: 1,2rem; /* Font büyüklüğü */
}

/* Mobil cihazlar için footer'ı merkezlemek */
@media (max-width: 767px) {
    footer {
        text-align: center; /* Metni ortala */
    }

    .footer-left,
    .footer-center,
    .footer-right {
        float: none; /* Sağa veya sola hizalamayı kaldır */
        display: inline-block; /* Satır içi blok elementi olarak ayarla */
    }
}

/* Section bitişlerine ara boşluk ekle */
section {
    margin-bottom: 50px; /* İstediğiniz boşluk miktarını ayarlayabilirsiniz */
}


/* Gezinti Animasyonları */
.navbar-nav li.nav-item {
    transition: transform 0.3s ease; /* Yumuşak geçiş efekti */
}

.slideInFromLeft {
    animation: slideInFromLeft 1s ease-in-out; /* 1 saniyede animasyon */
}

/* Hover Efektleri */
.hover-effect {
    transition: transform 0.3s ease; /* Yumuşak geçiş efekti */
}



/* Yumuşak Kaydırma */
html {
    scroll-behavior: smooth;
}


.card {
    transition: transform 0.1s ease; /* Yumuşak geçiş efekti */
    border-radius: 10px; /* Kenarları yuvarlak yap */
}

.card:hover {
    transform: scale(1.1); /* 1.1 kat büyütme */
}

/* Butonun genel stili */
.btn {
    border-radius: 20px; /* Kenarları yuvarlak yap */
    transition: transform 0.1s ease; /* Yumuşak geçiş efekti */
}

/* Butonun üzerine gelindiğindeki stil */
.btn:hover {
    transform: scale(1.05); /* 1.05 kat büyütme */
}


.card-title {
    font-family: 'Righteous', sans-serif;
    font-size: 1.5rem; /* Örnek bir font boyutu */
    color: #333; /* Başlık rengi */
}

/* Resim */
.img-fluid {
    max-width: 100%;
    height: auto;
}
.btn {
    background-color: #fdb906;
    color: #fff;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.btn:hover {
    background-color: #fdb906;
    color: white;
}


/* Oynatma Butonu */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Modal */
.modal-dialog {
    max-width: 800px; /* Modal pencerenin maksimum genişliği */

}

/* Modal İçeriği */
.modal-content {
    max-width: 100%; /* Maksimum genişlik sayfanın genişliği kadar olacak */
    width: auto; /* Genişlik otomatik olarak ayarlanacak */
}
.position-relative {
    position: relative;
    width: 100%;
}

/* Resmin önüne gölge efekti */
.position-relative::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Siyah renkli bir arka plan oluşturur */
    z-index: 0; /* Resmin önünde olması için z-index değeri */
}

.position-relative img {
    width: auto; /* Genişlik otomatik olarak ayarlanacak */
    height: 500px; /* Yeni yükseklik değeri */
}

/* Mobil cihazlar için resim boyutu ve görünürlük ayarları */
@media (max-width: 768px) {
    #body-content img {
        max-width: 100%; /* Resimlerin maksimum genişliği */
        height: auto; /* Yükseklik otomatik olarak ayarlanır */
        opacity: 1; /* Resimler varsayılan olarak görünür */
    }
}

.btn.btn-primary {
    background-color: #0056b3; /* Daha koyu bir mavi arka plan rengi */
    border-color: #0056b3; /* Kenarlık rengi */
    color: #fff; /* Beyaz metin rengi */
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary.focus {
    background-color: #004080; /* Daha koyu bir mavi hover/focus arka plan rengi */
    border-color: #004080; /* Kenarlık rengi */
}

.btn.btn-primary.disabled,
.btn.btn-primary:disabled {
    background-color: #6c757d; /* Devre dışı buton arka plan rengi */
    border-color: #6c757d; /* Kenarlık rengi */
    color: #fff; /* Beyaz metin rengi */
}

.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn.btn-primary.dropdown-toggle {
    background-color: #004080; /* Aktif buton arka plan rengi */
    border-color: #004080; /* Kenarlık rengi */
}

.btn.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); /* Aktif buton odak gölgesi */
}




.dropdown-item {
    font-size: 14px; /* Örnek bir yazı tipi boyutu */
    color: #333; /* Varsayılan metin rengi */
    transition: all 0.3s ease; /* Tüm geçişlerde yumuşak bir etki sağlar */
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #fdb906; /* Örnek bir arka plan rengi */
    color: #fff; /* Metin rengi beyaz */
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #c49d06; /* Örnek bir etkin arka plan rengi */
    color: #fff; /* Metin rengi beyaz */
}