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

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #ffffff;
    color: #333333;
    overflow-x: hidden;
}

/* Renk Değişkenleri */
:root {
    --gold: #bc9c6c;
    --gold-hover: #a38355;
    --dark: #111111;
    --light-bg: #fbf9f6;
}

/* --- HERO ALANI --- */
.hero {
    position: relative;
    height: 100vh; /* Ekranın tamamını kaplar */
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Videoyu %40 oranında lüks bir siyahlıkla kapatır ki beyaz yazılar parlasın */
    z-index: 1;
}

/* --- NAVİGASYON --- */
.navbar {
    position: fixed !important; /* Tarayıcıya kesin emir: Sayfaya çivile! */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 8%;
    z-index: 99999 !important; /* Her şeyin ama her şeyin en üstünde dursun */
    
    /* İlk açılıştaki şeffaf lüks zemin */
    background: linear-gradient(to bottom, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.4) 70%, rgba(17, 17, 17, 0) 100%) !important;
    backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(188, 156, 108, 0.1);
    
    transition: all 0.4s ease-in-out !important;
}

/* Aşağı kayınca devreye girecek olan alan */
.navbar.scrolled {
    padding: 12px 8% !important;
    background: rgba(17, 17, 17, 0.98) !important; /* Tamamen belirgin koyu gece siyahı */
    border-bottom: 1px solid rgba(188, 156, 108, 0.4) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

.logo img {
    height: 70px; /* Logonun şık durması için ideal yükseklik */
    width: auto;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5));
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--gold);
    border-bottom: 1px solid var(--gold);
    padding-bottom: 4px;
}

/* Butonlar */
.btn-tour {
    position: relative;
    z-index: 2;
    padding: 12px 24px;
    border: 1px solid var(--gold);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    background: transparent;
    transition: all 0.3s ease;
}

.btn-tour:hover {
    background: var(--gold);
    color: var(--dark);
}

/* --- HERO İÇERİK --- */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: auto;
    padding: 0 20px;
}

/* --- HERO YAZI SADELEŞTİRME --- */
.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem; /* Okunabilir ama videoyu devasa kapatmayan dengeli boyut */
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 2px;
    max-width: 800px;
    margin: 0 auto 30px auto;
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Videonun üstünde yazı rahat okunsun diye hafif gölge */
}

.hero-content p {
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 40px;
    color: #e0e0e0;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 25px;
    align-items: center;
}

.btn-filled {
    padding: 15px 35px;
    background: var(--gold);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: background 0.3s;
}

.btn-filled:hover {
    background: var(--gold-hover);
}

.btn-text {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
}

.btn-text:hover {
    color: var(--gold);
}

/* --- SALONLARIMIZ BÖLÜMÜ --- */
.venues-section {
    background-color: var(--light-bg);
    padding: 80px 8%;
    text-align: center;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--dark);
    letter-spacing: 2px;
    margin-bottom: 50px;
    position: relative;
}

/* Kartların Izgarası (Grid) */
.venues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.venue-card {
    background: #ffffff;
    border-bottom: 4px solid var(--dark); /* Tasarımdaki o şık koyu çizgi detay */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.venue-card:hover {
    transform: translateY(-5px);
}

.venue-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.venue-info {
    padding: 30px;
    text-align: center;
}

.venue-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.capacity {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
}

/* --- YENİ MİNİMALİST İKON SATIRI --- */
.venue-features-clean {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-top: 10px;
}

.feature-icon {
    font-size: 20px;
    position: relative;
    cursor: pointer;
    background: #fdfcf9;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #f0ece6;
    transition: all 0.3s ease;
}

.feature-icon:hover {
    border-color: var(--gold);
    background: #ffffff;
    transform: translateY(-3px);
}

/* --- GÜÇLENDİRİLMİŞ SALON TASARIMI --- */

.venue-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--dark);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

/* Kapasiteyi Göze Batıran Yeni Gold Kutu */
.capacity-box {
    background-color: #fdfcf9;
    border: 1px solid #f0ece6;
    padding: 15px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.capacity-number {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem; /* Kocaman ve göze batan sayı */
    font-weight: 600;
    color: var(--gold);
    line-height: 1;
}

.capacity-text {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #666;
    margin-top: 5px;
}

/* Sabit ve Düzenli Özellik Listesi */
.venue-features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Yan yana 2 sütun düzeni */
    gap: 15px;
    margin-bottom: 30px;
    padding: 0 10px;
    text-align: left;
}
/* --- TAŞINAN METNİN YENİ SALON GİRİŞ STİLLERİ --- */
.venues-intro {
    max-width: 750px;
    margin: 0 auto 60px auto; /* Salon kartlarıyla arasına şık bir boşluk */
    text-align: center;
    padding: 0 20px;
}

.venues-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    color: var(--dark);
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.intro-text {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
}

.feature-item {
    font-size: 13px;
    font-weight: 400;
    color: #444;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px dashed #eee; /* Altlarına hafif bir ayırıcı çizgi */
    padding-bottom: 8px;
}

/* Butonun altındaki çizgiyi kaldırıp daha netleştirelim */
.btn-details {
    display: block;
    width: 100%;
    padding: 15px;
    background: var(--dark); /* Butonu koyu renk yaparak kartın altında ağırlık sağladık */
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: background 0.3s;
}

.btn-details:hover {
    background: var(--gold); /* Üzerine gelince logodaki gold rengine döner */
}

/* --- CSS TOOLTIP (Gelişmiş İpucu Kutusu) --- */
.feature-icon::after {
    content: attr(data-tooltip); /* HTML'deki data-tooltip yazısını çeker */
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background-color: var(--dark);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* Tooltip Oku */
.feature-icon::before {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--dark) transparent transparent transparent;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Üzerine gelindiğinde tetiklenme */
.feature-icon:hover::after,
.feature-icon:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.btn-details {
    display: inline-block;
    padding: 12px 28px;
    background: var(--gold);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: background 0.3s;
}

.btn-details:hover {
    background: var(--gold-hover);
}

/* --- MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 15px;
    }
    .nav-links {
        display: none; /* Mobil menü açılır kapanır yapılabilir JS ile */
    }
    .hero-content h1 {
        font-size: 2.2rem;
    }
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }
}
/* --- MODAL (POPUP) STİLLERİ --- */
.modal {
    display: none; /* Varsayılan olarak gizli */
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px); /* Arka planı hafif buzlu cam yapar */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 4px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
}

.close-btn:hover {
    color: var(--dark);
}

/* Adımlı Form Yapısı */
.form-step {
    display: none;
}

.form-step.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

.modal-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    margin-bottom: 25px;
    color: var(--dark);
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #666;
}

.input-group input, .input-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.input-group input:focus, .input-group select:focus {
    border-color: var(--gold);
}

/* Form Butonları */
.btn-next, .btn-submit, .btn-prev {
    width: 100%;
    padding: 14px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-next, .btn-submit {
    background-color: var(--gold);
    color: white;
}

.btn-next:hover, .btn-submit:hover {
    background-color: var(--gold-hover);
}

.form-buttons {
    display: flex;
    gap: 15px;
}

.btn-prev {
    background-color: #eee;
    color: #333;
    width: 35%;
}

.btn-prev:hover {
    background-color: #ddd;
}

/* Sonuç Ekranı */
.form-result {
    display: none;
    text-align: center;
    padding: 20px 0;
    animation: scaleUp 0.4s ease;
}

.success-icon {
    font-size: 50px;
    color: #2ecc71;
    margin-bottom: 15px;
}

/* Animasyonlar */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* --- GOOGLE MAPS STİLİ --- */
.maps-section {
    width: 100%;
    line-height: 0; /* İframe altındaki görünmez boşluğu sıfırlar */
    border-top: 1px solid #f0ece6;
    border-bottom: 1px solid #f0ece6;
}

.maps-section iframe {
    filter: grayscale(20%) contrast(110%); /* Haritayı sitenin elit havasına uydurmak için hafif tonlama */
    transition: all 0.5s ease;
}

.maps-section iframe:hover {
    filter: grayscale(0%); /* Üzerine gelindiğinde orijinal renklerine döner */
}

/* --- FOOTER STİLLERİ --- */
.main-footer {
    background-color: var(--dark); /* Girişteki hero alanı gibi lüks siyah */
    color: #b0b0b0;
    padding: 60px 8% 20px 8%;
    font-family: 'Montserrat', sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Sol sütun logodan dolayı daha geniş */
    gap: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sol Sütun */
.footer-info p {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 15px;
    font-weight: 300;
}

.footer-logo {
    height: 60px;
    width: auto;
}

/* Genel Başlıklar */
.main-footer h4 {
    font-family: 'Playfair Display', serif;
    color: #ffffff;
    font-size: 18px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-weight: 500;
}

/* Orta Sütun (Linkler) */
.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--gold);
}

/* Sağ Sütun (Sosyal Medya) */
.footer-social p {
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: 300;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: var(--gold);
    border-color: var(--gold);
    transform: translateY(-3px);
}

/* Telif Hakkı Alanı */
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #666;
}

/* --- GDPR MAPS STİLLERİ --- */
.maps-section {
    position: relative;
    width: 100%;
    min-height: 450px;
    background-color: #faf8f5; /* Boşken görünecek ferah arka plan */
    display: flex;
    align-items: center;
    justify-content: center;
}

.maps-placeholder {
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    z-index: 5;
}

.placeholder-content {
    max-width: 450px;
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0ece6;
}

.maps-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 15px;
}

.placeholder-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--dark);
    margin-bottom: 12px;
}

.placeholder-content p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

.btn-accept-maps {
    padding: 12px 28px;
    background-color: var(--dark);
    color: #fff;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-accept-maps:hover {
    background-color: var(--gold);
}

/* Harita yüklendiğinde wrapper ayarı */
.map-wrapper {
    width: 100%;
    height: 450px;
    display: none; /* İlk başta gizli */
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* --- HERO ARKA PLAN VİDEO AYARLARI --- */
/* --- GENEL VİDEO AYARLARI (MASAÜSTÜ İÇİN) --- */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Masaüstünde tam ekran kaplasın */
    z-index: 1;
}

/* Bilgisayar ekranında mobil (dikey) videoyu tamamen gizliyoruz */
.video-mobile {
    display: none !important;
}



@media (max-width: 768px) {
    /* Hero alanını telefonlarda yeniden tam ekran (100vh) yapıyoruz çünkü dikey video kurtaracak */
    .hero {
        height: 100vh !important; 
        min-height: 100vh !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Telefonda YATAY videoyu gizle */
    .video-desktop {
        display: none !important;
    }

    /* Telefonda DİKEY videoyu GÖSTER ve ekranı kaplat */
    .video-mobile {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Dikey video ekranı pürüzsüzce kaplasın */
    }

    /* Yazıların ve butonun dikey videonun üzerinde çok asil durması için */
    .hero-content {
        position: relative;
        z-index: 2;
        padding: 0 20px;
        background: transparent !important; /* Artık arkada dikey video olduğu için siyah banda gerek yok */
        margin-top: 80px; /* Menünün altına girmesin diye */
    }

    .hero-content h1 {
        font-size: 1.8rem;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); /* Videonun üstünde yazı rahat okunsun diye lüks gölge */
    }
}

/* Mevcut .hero sınıfına position relative vermiştik, içeriklerin video üstünde kalması için: */
.navbar, .hero-content {
    position: relative;
    z-index: 2;
}

/* --- SANAL TUR LİNKİ STİLİ --- */
.btn-virtual-tour {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--gold);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px dashed rgba(188, 156, 108, 0.4); /* Gold rengi kesikli şık çerçeve */
    transition: all 0.3s ease;
}

.btn-virtual-tour:hover {
    background-color: #fdfcf9;
    border-color: var(--gold);
    letter-spacing: 2px; /* Hafif genişleme efekti */
}

.btn-virtual-tour span {
    display: inline-block;
    animation: rotateIcon 4s linear infinite; /* İkonun kendi etrafında yavaşça dönmesi */
}

@keyframes rotateIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- HİZMETLERİMİZ BÖLÜMÜ STİLLERİ --- */
.services-section {
    background-color: #ffffff; /* Salonların o krem arka planından sonra burayı beyaz yaparak kontrast sağlıyoruz */
    padding: 80px 8%;
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ekran boyutuna göre otomatik hizalanan 4 sütun */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-box {
    background: #fdfcf9;
    border: 1px solid #f0ece6;
    padding: 40px 25px;
    border-radius: 4px;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-box:hover {
    background: #ffffff;
    border-color: var(--gold);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(188, 156, 108, 0.1); /* Gold renginde hafif lüks bir gölge efekti */
}

.service-icon {
    font-size: 36px;
    margin-bottom: 20px;
    background: #ffffff;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #f5eee6;
    transition: all 0.4s ease;
}

.service-box:hover .service-icon {
    background: var(--gold);
    color: #ffffff;
    border-color: var(--gold);
}

.service-box h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.service-box p {
    font-size: 13.5px;
    color: #666;
    line-height: 1.6;
    font-weight: 300;
}

/* --- HİZMETLER MOBİL UYUMU --- */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* Mobilde alt alta tek sütun */
        gap: 20px;
    }
    .service-box {
        padding: 30px 20px;
    }
}

/* --- FOOTER MOBİL UYUMU --- */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr; /* Mobilde her sütun alt alta gelir */
        gap: 35px;
        text-align: center;
    }
    
    .social-icons {
        justify-content: center;
    }
}

/* --- LÜKS GALERİ STİLLERİ --- */
.gallery-section {
    background-color: var(--light-bg); /* Hafif krem arka plan */
    padding: 80px 8%;
    text-align: center;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 240px;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* İlk büyük fotoğrafın 2 satırlık yer kaplayarak asimetri yaratması */
.gallery-item.item-large {
    grid-row: span 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Fotoğrafın üzerine gelince şık gold karartma efekti ve yazı gelmesi */
.gallery-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 17, 17, 0.7);
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery-hover-overlay span {
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    letter-spacing: 1px;
    transform: translateY(10px);
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-item:hover .gallery-hover-overlay {
    opacity: 1;
}

.gallery-item:hover .gallery-hover-overlay span {
    transform: translateY(0);
}

/* --- REZENSIONEN (YORUMLAR) STİLLERİ --- */
.reviews-section {
    background-color: #ffffff;
    padding: 80px 8%;
    text-align: center;
}

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

.review-card {
    background: #fdfcf9;
    border: 1px solid #f0ece6;
    padding: 40px 30px;
    border-radius: 4px;
    text-align: center;
    position: relative;
    transition: border-color 0.3s;
}

.review-card:hover {
    border-color: var(--gold);
}

.stars {
    font-size: 16px;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.review-text {
    font-size: 13.5px;
    color: #555;
    line-height: 1.7;
    font-style: italic;
    font-weight: 300;
    margin-bottom: 25px;
}

.couple-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 5px;
}

.wedding-venue-tag {
    font-size: 11px;
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- MOBİL DÜZENLEMELERİ --- */
@media (max-width: 768px) {
    .gallery-grid {
        grid-auto-rows: 200px;
    }
    .gallery-item.item-large {
        grid-row: span 1; /* Mobilde dikey büyük alan yapısını bozup normal karta çekiyoruz */
    }
}

/* --- REZENSIONEN (SLIDER) STİLLERİ --- */
.reviews-section {
    background-color: #ffffff;
    padding: 80px 8%;
    text-align: center;
    position: relative;
}

.reviews-wrapper {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

/* Kaydırma Alanı Ana Gövdesi */
.reviews-slider {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px 10px;
    scrollbar-width: none; /* Firefox için scrollbar gizleme */
    scroll-snap-type: x mandatory; /* Kartların tam hizada durmasını sağlar */
}

/* Chrome, Safari ve Edge için scrollbar gizleme */
.reviews-slider::-webkit-scrollbar {
    display: none;
}

/* Her Bir Yorum Kartı */
.review-card {
    flex: 0 0 calc(33.333% - 20px); /* Masaüstünde yan yana tam 3 kart görünür */
    background: #fdfcf9;
    border: 1px solid #f0ece6;
    padding: 40px 30px;
    border-radius: 4px;
    text-align: center;
    scroll-snap-align: start; /* Kaydırınca tam bu kartta kilitlenir */
    box-sizing: border-box;
    transition: border-color 0.3s, transform 0.3s;
}

.review-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.stars {
    font-size: 14px;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.review-text {
    font-size: 13.5px;
    color: #555;
    line-height: 1.7;
    font-style: italic;
    font-weight: 300;
    margin-bottom: 25px;
}

.couple-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 5px;
}

.wedding-venue-tag {
    font-size: 11px;
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Şık Lüks Ok Butonları */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: #ffffff;
    border: 1px solid #e5dfd5;
    color: var(--dark);
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.slider-btn:hover {
    background: var(--dark);
    color: #ffffff;
    border-color: var(--dark);
}

.prev-btn { left: -25px; }
.next-btn { right: -25px; }

/* --- RESPONSIVE (MOBİL VE TABLET) DÜZENLEMELERİ --- */
@media (max-width: 1024px) {
    .review-card {
        flex: 0 0 calc(50% - 15px); /* Tabletlerde yan yana 2 kart görünür */
    }
    .prev-btn { left: -10px; }
    .next-btn { right: -10px; }
}

@media (max-width: 768px) {
    .review-card {
        flex: 0 0 100%; /* Mobilde ekranda tam tek 1 kart görünür */
    }
    .slider-btn {
        display: none; /* Mobilde oklara gerek yok, parmakla pürüzsüzce kaydırılır */
    }
}

/* --- NAVİGASYON TELEFON BUTONU --- */
.btn-phone {
    background-color: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    white-space: nowrap;  /* Verhindert den Zeilenumbruch komplett */
    flex-shrink: 0;       /* Verhindert, dass die Box zusammengedrückt wird */
    display: inline-flex;
    align-items: center;
}

.btn-phone:hover {
    background-color: var(--gold);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(188, 156, 108, 0.3);
}

/* --- İLETİŞİM BÖLÜMÜ STİLLERİ --- */
.contact-section {
    background-color: #fdfcf9;
    padding: 90px 8%;
    border-top: 1px solid #f0ece6;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.sub-tag {
    font-size: 11px;
    color: var(--gold);
    letter-spacing: 3px;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

.contact-info-box h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: var(--dark);
    margin-bottom: 20px;
}

.contact-info-box p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 40px;
    font-weight: 300;
}

/* Büyük Telefon Alanı Vurgusu */
.phone-highlight {
    background: #ffffff;
    border: 1px solid var(--gold) !important;
    padding: 20px !important;
}

.phone-highlight a {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem; /* Kocaman numara */
    color: var(--dark);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.phone-highlight a:hover {
    color: var(--gold);
}

.info-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #f3eee7;
    padding-bottom: 15px;
}

.info-icon {
    font-size: 24px;
}

.info-text label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #999;
    display: block;
    margin-bottom: 3px;
}

.info-text p {
    margin: 0;
    font-size: 14px;
    color: var(--dark);
    font-weight: 400;
}

/* FORM ALANLARI */
.contact-form-box {
    background: #ffffff;
    padding: 45px;
    border: 1px solid #f0ece6;
    box-shadow: 0 10px 40px rgba(0,0,0,0.02);
}

.form-row {
    display: flex;
    gap: 20px;
}

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

.contact-form-box input, 
.contact-form-box select, 
.contact-form-box text-area,
.contact-form-box textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e5dfd5;
    background: #fdfcf9;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--dark);
    box-sizing: border-box;
}

.contact-form-box input:focus, 
.contact-form-box select:focus, 
.contact-form-box textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: #ffffff;
}

.btn-submit-form {
    width: 100%;
    padding: 16px;
    background: var(--dark);
    color: #ffffff;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-submit-form:hover {
    background: var(--gold);
}

/* --- LIGHTBOX (RESİM BÜYÜTME MODAL) STİLLERİ --- */
.lightbox {
    display: none; /* İlk başta gizli */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 17, 17, 0.95); /* Çok koyu lüks arka plan */
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    transition: opacity 0.2s ease-in-out; /* Resim değiştirirken pürüzsüz solma efekti */
}

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #ffffff;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: var(--gold);
}

/* --- İLETİŞİM MOBİL UYUMU --- */
@media (max-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    .contact-form-box {
        padding: 30px 20px;
    }
}

/* Hizmetler ve Diğer Alt Seksiyonların H2 Başlık Standartları */
.services-section h2, 
.gallery-section h2, 
.reviews-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: var(--dark);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* --- SOSYAL MEDYA İKON GRUBU STİLLERİ --- */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 20px; /* Telefon butonu ile ikonlar arasındaki mesafe */
}

.nav-socials {
    display: flex;
    align-items: center;
    gap: 15px; /* İkonların kendi arasındaki mesafe */
}

/* SVG İkonlarının Boyutu ve İlk Renk Ayarı */
.social-svg {
    width: 20px;
    height: 20px;
    fill: #ffffff; /* İlk başta beyaz görünsünler (Video üstünde net çıksın diye) */
    transition: fill 0.3s ease, transform 0.3s ease;
}

/* Fareyle Üzerine Gelince Gold Rengine Dönme Efekti */
.nav-socials a:hover .social-svg {
    fill: var(--gold); /* Logomuzun gold rengi */
    transform: scale(1.15); /* Hafif büyüme hareketi */
}

/* --- FOOTER İÇİN DOĞRU İKON DÜZENİ --- */
/* --- FOOTER İKON DÜZELTMELERİ --- */
.footer-icons-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 15px;
}

/* Footer İkonlarının Boyutu ve Rengi (Soluk Beyaz) */
.footer-social-svg {
    width: 22px;
    height: 22px;
    fill: #a5a19a; /* Siyah zeminde çok çiğ durmasın diye hafif soft lüks bir gri/beyaz */
    transition: fill 0.3s ease, transform 0.3s ease;
}

/* Üzerine gelince logomuzun asil gold rengine dönsün */
.footer-icons-grid a:hover .footer-social-svg {
    fill: var(--gold);
    transform: translateY(-3px); /* Hafif yukarı zıplama efekti */
}

/* Mobil Ekranlar İçin Düzenleme */
@media (max-width: 768px) {
    .nav-right-group {
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
    }
}

@media (max-width: 768px) {
    /* Hero alanının telefonda sabit tam ekran (100vh) zorlamasını kaldırıyoruz */
    .hero {
        height: auto; 
        min-height: auto;
        display: block;
        background: var(--dark); /* Video bitiminde alt tarafta şık siyah zemin kalması için */
    }

    /* Videonun kırpılmasını engelliyoruz, enine göre küçülecek */
    .hero-video {
        position: relative;
        width: 100%;
        height: auto;
        object-fit: contain; /* Resimler gibi her yeri görünsün, kırpılmasın */
        display: block;
    }

    /* Karartma perdesini videonun üzerine tam oturtuyoruz */
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Yazıların ve butonların videonun altında veya üstünde düzgünce listelenmesi */
    .hero-content {
        position: relative;
        z-index: 2;
        padding: 40px 20px;
        text-align: center;
        background: var(--dark); /* Yazıların arkası lüks siyah kalsın ki rahat okunsun */
    }

    .hero-content h1 {
        font-size: 1.8rem; /* Mobilde yazı boyutu dengelensin */
        margin-bottom: 20px;
    }
    
    /* Navigasyon menüsünün video üstüne binip görüntüyü kapatmasını engellemek için */
    .navbar {
        position: relative;
        background: var(--dark);
        padding: 15px 20px;
    }
}

/* --- HİZMETLER ALANI FOTOĞRAFLI YENİ STİLLER --- */
.services-section {
    padding: 80px 8%;
    background-color: #ffffff;
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

/* Hizmet Kartı Temel Yapısı */
.service-card {
    background: #fdfcf9;
    border: 1px solid #eae6df;
    border-radius: 4px;
    overflow: hidden; /* Resim taşmalarını engeller */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Resim Alanı ve Zoom Efekti */
.service-img-wrapper {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.service-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Alt Bilgi Alanı */
.service-info {
    padding: 25px 20px;
    text-align: left;
}

.service-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--dark);
    margin-bottom: 12px;
    position: relative;
}

.service-info p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    font-weight: 300;
}

/* --- HOVER (ÜZERİNE GELİNCE) EFEKTLERİ --- */
.service-card:hover {
    transform: translateY(-5px); /* Kart hafifçe yukarı esner */
    box-shadow: 0 12px 30px rgba(188, 156, 108, 0.15); /* Logomuzun gold renginde hafif lüks bir ışıltı */
    border-color: var(--gold);
}

.service-card:hover .service-img-wrapper img {
    transform: scale(1.08); /* Fotoğraf lüks bir şekilde sinematik olarak büyür */
}

/* --- 360° SANAL TUR STİLLERİ --- */
.virtual-tour-section {
    padding: 80px 8%;
    background-color: #fdfcf9; /* Salonun asil krem rengi zemin */
    text-align: center;
}

.tour-intro {
    margin-bottom: 40px;
}

/* Sanal Tur Kutusu */
.tour-container {
    width: 100%;
    height: 550px; /* Bilgisayarda ideal yükseklik */
    border: 1px solid #eae6df;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background: #111; /* Yüklenirken arkada şık siyah durması için */
    position: relative;
}

/* Çerçevenin Kendisi */
.tour-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* --- MOBİL UYUMLULUK (TELEFONLAR) --- */
@media (max-width: 768px) {
    .virtual-tour-section {
        padding: 60px 20px;
    }
    
    .tour-container {
        height: 380px; /* Telefon ekranı dikey olduğu için yüksekliği biraz daraltıyoruz */
    }
}

/* --- SUCCESS MODAL STİLLERİ --- */
.success-modal {
    display: none; /* İlk başta gizli */
    position: fixed;
    z-index: 10000; /* Menünün de üstünde, en önde dursun */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 17, 17, 0.85); /* Arkaya şık koyu bir perde */
    backdrop-filter: blur(8px); /* Arkadaki siteyi hafifçe buğular */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Pop-up Kutusu */
.modal-content {
    background-color: #fdfcf9;
    padding: 40px 30px;
    border: 1px solid var(--gold);
    border-radius: 4px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    transform: translateY(-30px);
    transition: transform 0.4s ease;
}

/* Açılış Efekti Tetiklendiğinde */
.success-modal.show {
    display: flex;
    opacity: 1;
}
.success-modal.show .modal-content {
    transform: translateY(0);
}

/* Kapatma Çarpı İşareti */
.close-modal {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    transition: color 0.3s;
}
.close-modal:hover {
    color: var(--dark);
}

/* Şık Yeşil/Gold Onay İkonu */
.modal-icon {
    width: 70px;
    height: 70px;
    background: #f4efe6;
    border: 2px solid var(--gold);
    color: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 20px auto;
}

.modal-content h2 {
    font-family: 'Playfair Display', serif;
    color: var(--dark);
    font-size: 2rem;
    margin-bottom: 15px;
}

.modal-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 10px;
}

.modal-subtext {
    font-size: 12px !important;
    color: #888 !important;
    margin-bottom: 25px !important;
}

@media screen and (max-width: 1024px) {
    /* Wir erlauben der Navbar, sich bei Platzmangel neu zu sortieren */
    .navbar {
        flex-wrap: wrap; 
        gap: 15px;
    }

    /* Die normalen Menü-Links nehmen wir etwas zurück oder verringern die Abstände */
    .nav-links {
        gap: 10px;
        font-size: 14px; /* Etwas kleinere Schrift spart Platz */
    }
    
    /* Alternativ: Wenn du ein mobiles Klappmenü planst, 
       schaltet man die .nav-links hier oft auf display: none; */
}

/* --- Für Smartphones (unter 768px) --- */
@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: row; /* Alles untereinander für perfekte Zentrierung */
        text-align: center;
    }

    .nav-links {
       display: flex; /* Flexbox wieder aktivieren */
        position: fixed;
        top: 0;
        right: -100%; /* Versteckt außerhalb des Bildschirms */
        width: 80%;   /* Auf dem Handy etwas breiter als auf dem Tablet */
        height: 100vh;
        background-color: #1a1a1a; 
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 25px;
        transition: right 0.4s ease;
        z-index: 1000;
    }

    .nav-right-group {
        width: 100%;
        justify-content: center;
    }
}

/* --- Desktop-Einstellung für den Button --- */
.hamburger {
    display: none; /* Auf dem Desktop unsichtbar */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
    padding: 0;
}

.hamburger span {
    width: 100%;
    height: 3px;
    background-color: #fff; /* Farbe der Striche (an dein Design anpassen) */
    transition: all 0.3s ease;
}

/* --- Mobile Anpassung (unter 1024px Bildschirmbreite) --- */
@media screen and (max-width: 1024px) {
    .hamburger {
        display: flex; /* Jetzt wird der Burger sichtbar */
    }

    /* Das Menü wird zum mobilen Overlay */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Standardmäßig außerhalb des Bildschirms nach rechts versteckt */
        width: 70%;  /* Breite des mobilen Menüs */
        height: 100vh;
        background-color: #1a1a1a; /* Hintergrundfarbe des Menüs */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        transition: right 0.4s ease;
        z-index: 1000;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    }

    /* Wenn das Menü aktiv ist, schiebt es sich rein */
    .nav-links.active {
        right: 0;
    }

    /* Animation für das Burger-Icon (wird zum 'X' beim Klicken) */
    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}