/* Genel font ayarları - Tüm sayfaya etki edecek */
body, h1, h2, h3, h4, h5, h6, p, a, li, span {
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #fff; /* Tüm yazılar beyaz olacak */
}

/* Hero Section */
.hero-section {
    background-image: url('image.jpg'); /* Arkaplan resminin yolunu kontrol edin */
    background-size: cover;
    background-position: center;
    height: 100vh;
    position: relative;
    overflow: hidden;
    animation: zoomIn 15s ease-in-out infinite;
}

/* Zoom-in efektli arka plan animasyonu */
@keyframes zoomIn {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Slider başlık */
.slider-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.slider-title span {
    font-size: 56px;
    font-weight: 700;
    display: block;
    margin-top: 10px;
    line-height: 1.1;
}

/* Navbar Customization */
.navbar {
    background-color:  rgba(0, 0, 0, 0.8); /* Şeffaf navbar */
    transition: background-color 0.3s ease;
}

.navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.8); /* Kaydırıldığında siyah arka plan */
}

.navbar-nav .nav-link {
    color: #fff;
}

.navbar-nav .nav-link:hover {
    color: #bda669;
}

.logo {
    width: 260px; /* Logo genişliği */
}

/* Sosyal Medya İkonları */
.social-icons {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

.social-icons a {
    display: block;
    font-size: 24px;
    margin-bottom: 10px;
    color: #fff;
}

.social-icons a:hover {
    color: #00aced;
}

/* Carousel Stil */
.gallery-carousel {
    margin-top: 50px;
}

/* Galeri font ve renk ayarı */
.gallery-item, .carousel-item, .filter {
    font-family: 'Raleway', sans-serif;  /* Raleway fontu kullanıldı */
    color: #bda669;  /* Galeri font rengi ayarlandı */
}

/* Galeri başlıkları için h3 ve bold stil */
.gallery-item h3 {
    font-size: 24px;
    font-weight: bold; /* Bold olarak ayarlandı */
    color: #bda669; /* Galeri başlıkları için renk */
    margin-bottom: 10px;
}

/* Renk değişiklikleri */
h1, h2, h3, h4, h5, h6, .btn-primary, .btn-secondary, a, .carousel-control-prev-icon, .carousel-control-next-icon, .filter.active {
    color: #fff;  /* Galeri hariç tüm başlıklar ve butonlar beyaz */
}

a:hover, .btn-primary:hover, .btn-secondary:hover, .filter.active:hover, .carousel-control-prev-icon:hover, .carousel-control-next-icon:hover {
    color: #a9945b;  /* Hover rengi */
}

/* Bootstrap'in varsayılan renklerinin değiştirilmesi */
.btn-primary, .btn-secondary, .carousel-control-prev-icon, .carousel-control-next-icon, .filter.active {
    background-color: #bda669;
    border-color: #bda669;
}

.btn-primary:hover, .btn-secondary:hover, .carousel-control-prev-icon:hover, .carousel-control-next-icon:hover {
    background-color: #a9945b;
    border-color: #a9945b;
}

a {
    color: #bda669;
}

a:hover {
    color: #a9945b;
}

/* Butonlar için aktif sınıf */
.filter.active {
    background-color: #bda669;
    color: #fff;
}

/* Resim hover efekti */
.img-fluid {
    margin-bottom: 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.img-fluid:hover {
    transform: scale(1.05);
}

/* Responsive Düzenlemeler */
@media (max-width: 768px) {
    .slider-title {
        font-size: 22px;
    }

    .slider-title span {
        font-size: 40px;
    }

    .navbar-brand img {
        width: 140px;
    }
}

.gallery-item h2 {
    font-size: 11144px;
    font-weight: bold;
    color: #bda669;
    margin-bottom: 10px;
}

/* İletişim Kartları */
.contact-card {
    max-width: 400px; /* Kart genişliği */
    margin: 0 auto; /* Ortala */
}

.contact-card .card {
    background-color: #fff;
    border: 2px solid #ddd; /* Kartlara ince bir çerçeve */
    border-radius: 15px; /* Oval kenarlar */
    padding: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover'da animasyon için */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Hafif gölge */
}

/* Kart hover (üzerine gelindiğinde) efekti */
.contact-card .card:hover {
    transform: translateY(-10px); /* Kartı yukarı kaldır */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Daha belirgin gölge */
}

/* Kartın içindeki logo */
.contact-card img {
    max-width: 100%; /* Logonun tam oturması */
    padding: 10px; /* Logoya boşluk */
    object-fit: contain; /* Logo düzgün yerleşir */
    border-radius: 10px; /* Logoya da hafif oval kenarlar ver */
}

/* Kart içi stil */
.contact-card .card-body {
    padding: 10px; /* Kartın iç kenar boşlukları */
}

.contact-card .card-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.contact-card .card-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.contact-card .card-text i {
    margin-right: 10px;
}

/* Ermişler Grup Logo */
.ermisler-logo {
    max-width: 200px;
}

/* Bize Ulaşın Başlık ve Metin */
.contact-header-section {
    background-image: url('img/arkaplan.jpg'); /* Arkaplan resmi */
    background-size: cover;
    background-position: center;
    height: 120px; /* Yükseklik 120px */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000; /* Metin rengi siyah */
}

.contact-header-title {
    font-size: 56px; /* Başlık font büyüklüğü */
    font-weight: bold;
    margin: 0; /* Varsayılan boşlukları kaldır */
    color: #ffffff; /* Başlık siyah */
}

.contact-header-text {
    font-size: 16px; /* Alt metin font büyüklüğü */
    color: #ffffff; /* Metin siyah */
    margin-top: 20px; /* Başlık ile metin arasına boşluk */
}

/* Mobil uyumluluk */
@media (max-width: 768px) {
    .contact-card {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .contact-header-title {
        font-size: 32px; /* Küçük ekranlar için başlık boyutu */
    }
    
    .contact-header-text {
        font-size: 14px; /* Küçük ekranlar için metin boyutu */
    }
}
/* Telefon numaraları için özel stil */
.phone-link {
    color: #bda669; /* Telefon numarası rengi */
    text-decoration: none; /* Alt çizgi kaldır */
}

.phone-link:hover {
    color: #a9945b; /* Üzerine gelindiğinde renk değiştir */
    text-decoration: underline; /* Hover sırasında alt çizgi ekle */
}

/* 360° Sanal Tur Dropdown Butonu */
.custom-dropdown {
    background-color: #bda669; /* Buton arka plan rengi */
    border-color: #bda669;     /* Buton sınır rengi */
    color: #fff;               /* Yazı rengi */
    border-radius: 10px;       /* Buton köşelerini yuvarla */
    padding: 10px 20px;        /* İç boşluklar */
    transition: background-color 0.3s ease; /* Hover geçişi için */
}

.custom-dropdown:hover {
    background-color: #a9945b; /* Hover sırasında arka plan rengi */
    color: #fff;               /* Hover sırasında yazı rengi */
}

/* Dropdown Menüsü Stil */
.custom-dropdown-menu {
    background-color: rgba(0, 0, 0, 0.9); /* Menü arka planı */
    border: 1px solid #bda669;            /* Sınır rengi */
    border-radius: 10px;                  /* Köşeleri yuvarla */
    margin-top: 5px;                      /* Üst boşluk */
}

/* Dropdown Menüsündeki Linkler */
.custom-dropdown-menu .dropdown-item {
    color: #fff;                          /* Linklerin yazı rengi */
    font-weight: 600;                     /* Kalın font */
    padding: 10px 20px;                   /* İç boşluk */
    transition: background-color 0.3s ease, color 0.3s ease; /* Hover geçişleri */
}

.custom-dropdown-menu .dropdown-item:hover {
    background-color: #bda669;            /* Hover sırasında arka plan rengi */
    color: #fff;                          /* Hover sırasında yazı rengi */
}

/* Menü elemanları arası sınır */
.custom-dropdown-menu .dropdown-item + .dropdown-item {
    border-top: 1px solid #a9945b;        /* Elemanlar arasına sınır */
}

/* Mobil uyumluluk için */
@media (max-width: 768px) {
    .custom-dropdown {
        width: 100%; /* Mobilde tam genişlik */
    }
    
    .custom-dropdown-menu .dropdown-item {
        text-align: center; /* Menü elemanlarını ortaya hizala */
    }
}