@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&family=Playfair+Display:wght@700&display=swap');

/* Temel Sıfırlama */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: 'Montserrat', sans-serif; 
    /* Kanka buradaki ana gradient'i koruyoruz ama bölümler şeffaf olduğu için alttaki resim baskın gelecek */
    background: linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)), 
                url('arkaplan.jpg') no-repeat center center fixed; 
    background-size: cover;
    color: #444; 
    scroll-behavior: smooth; 
    overflow-x: hidden; 
}

/* --- NAVBAR (Üst Menü) TASARIMI --- */
.main-nav { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000; 
    transition: 0.5s ease; 
    padding: 25px 60px; 
    background: transparent; 
}

.main-nav.scrolled { 
    background: #fff5f7; 
    padding: 15px 60px; 
    border-bottom: 2px solid #e191a6; 
    box-shadow: 0 4px 15px rgba(225, 145, 166, 0.15); 
}

.nav-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    max-width: 1300px; 
    margin: 0 auto; 
}

/* --- LOGO VE SİYAH ALT YAZI SİSTEMİ --- */
.logo-area {
    display: flex;
    justify-content: center;
}

.logo-wrapper {
    text-align: center;
    transition: 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#site-logo { 
    height: 70px; 
    width: auto; 
    transition: 0.4s; 
    object-fit: contain; 
    border-radius: 8px;
}

.main-nav.scrolled #site-logo { 
    height: 50px; 
}

.logo-text-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    margin-top: 5px;
}

.brand-name-small {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 800; 
    color: #000000 !important; 
    letter-spacing: 1px;
    white-space: nowrap;
    transition: 0.4s;
}

.brand-sub-small {
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: #000000 !important; 
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: 0.4s;
}

.main-nav.scrolled .brand-name-small,
.main-nav.scrolled .brand-sub-small {
    color: #000000 !important;
}

.main-nav.scrolled .brand-name-small {
    font-size: 11px;
}

.main-nav.scrolled .brand-sub-small {
    font-size: 7px;
    letter-spacing: 2px;
}

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

.nav-link-item, .nav-item { 
    color: #555 !important; 
    text-decoration: none; 
    font-weight: 600; 
    transition: 0.3s ease; 
    padding: 5px 10px;
    border-bottom: 2px solid transparent;
    font-size: 15px;
}

.nav-link-item.active, .nav-item.active, 
.nav-link-item:hover, .nav-item:hover { 
    color: #e191a6 !important; 
    border-bottom: 2px solid #e191a6;
    opacity: 1;
}

/* --- TÜM ARKA PLANA YAYILAN SÖNÜK SİSTEM --- */
.main-bg-overlay {
    position: relative;
    width: 100%;
    /* Kanka ilk resmi buraya sabitliyoruz */
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), 
                      url('resimler/WhatsApp Image 2026-02-02 at 22.40.13.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Kanka burası çok önemli: resim değişirken yumuşak geçiş yapar */
    transition: background-image 1.5s ease-in-out; 
}

/* KANKA BURASI KRİTİK: Tüm bölümleri şeffaf yaptık ki arka plan kesintisiz görünsün */
.hero, 
.about-section, 
.concepts, 
.faq-section {
    background: transparent !important;
}

/* --- İÇERİK BÖLÜMLERİ --- */

.main-title {
    font-family: 'Playfair Display', serif; 
    font-size: clamp(2.5rem, 8vw, 5rem);
    background: linear-gradient(to right, #e191a6, #f8c2d1, #b16b7d);
    background-clip: text; 
    -webkit-background-clip: text;
    color: transparent; 
    -webkit-text-fill-color: transparent;
    letter-spacing: 5px; 
    text-align: center;
}

.hero { 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
}

.hero-sub {
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 30px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- BİZE ULAŞIN ALANI --- */
.hero-contact-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.85);
    padding: 12px 28px;
    border-radius: 50px;
    margin-top: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.hero-phone-icon {
    width: 50px;
    height: 50px;
    background: #e191a6; 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 0 15px rgba(225, 145, 166, 0.3); 
}

.hero-sub i {
    color: #e191a6 !important;
}

.hero-phone-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.hero-phone-text span {
    font-weight: 700;
    color: #444;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.hero-phone-text a {
    text-decoration: none;
    color: #666;
    font-weight: 500;
    font-size: 1rem;
}

/* --- NELER YAPIYORUZ --- */
.concepts { 
    padding: 80px 5%; 
    text-align: center; 
}

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

/* Kartların arkasını bembeyaz tutup gölge ekledik kanka resmin üstünde patlasın diye */
.c-card { 
    background: #fff !important; 
    border-radius: 15px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.03);
}

.c-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 15px 35px rgba(225, 145, 166, 0.2); 
}

.img-zoom-container {
    width: 100%;
    height: 250px; 
    overflow: hidden;
}

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

.c-card:hover .img-zoom-container img {
    transform: scale(1.1);
}

.c-info { 
    padding: 25px; 
    background: #fff;
    text-align: center;
}

.c-info h3 { 
    color: #e191a6; 
    font-size: 1.4rem; 
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.c-info p { 
    color: #777; 
    font-size: 0.95rem;
}

/* --- WHATSAPP DESTEK KARTI --- */
.whatsapp-support-section {
    padding: 60px 5%;
    display: flex;
    justify-content: center;
}

.wa-support-card {
    width: 100%;
    max-width: 900px;
    background: #fff;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-left: 10px solid #25d366; 
    text-align: left;
}

.wa-support-content h3 {
    font-size: 1.6rem;
    color: #333;
    margin-bottom: 8px;
}

.wa-support-content p {
    color: #666;
    font-size: 1rem;
}

.wa-button-large {
    background-color: #25d366;
    color: #fff !important;
    padding: 15px 35px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s;
    font-size: 1.1rem;
}

.wa-button-large:hover {
    background-color: #1eb954;
    transform: scale(1.05);
}

/* --- GALERİ VE MODAL --- */
.gallery-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
}

.modal-content-wrapper {
    width: 90%;
    max-width: 900px;
    background: white;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
}

.gallery-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.gallery-images img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid #e191a6;
}

.close-gallery {
    position: absolute;
    top: 30px; right: 40px;
    font-size: 50px;
    color: white;
    cursor: pointer;
}

/* BÖLÜM ŞEFFAFLIKLARI */
.about-section { padding: 100px 5%; text-align: center; }
.section-gold-title { color: #e191a6; font-size: 2.5rem; margin-bottom: 45px; font-family: 'Playfair Display', serif; text-align: center; }

/* --- SSS --- */
.faq-section { padding: 100px 5%; }

.faq-item { 
    background: #fff !important; 
    border: 1px solid #ffe4ea; 
    margin-bottom: 12px; 
    border-radius: 12px; 
    overflow: hidden; 
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.faq-question { 
    padding: 20px; 
    cursor: pointer; 
    color: #e191a6; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    font-weight: 700; 
}

.faq-answer { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.4s ease-out, padding 0.3s ease;
    background: #fff;
    padding: 0 20px;
}

.faq-item.active .faq-answer { 
    max-height: 500px; 
    padding: 15px 20px 20px 20px;
    border-top: 1px solid #fff0f3; 
}

.faq-item.active .fa-chevron-down {
    transform: rotate(180deg);
    transition: 0.3s;
}

/* --- SABİT BUTONLAR (KANKA BURASI GÜNCELLENDİ) --- */
.floating-contact { 
    position: fixed; 
    left: 20px; 
    bottom: 40px; 
    display: flex; 
    flex-direction: column-reverse; /* Butonlar yukarı doğru açılsın diye kanka */
    gap: 15px; 
    z-index: 9999; 
    align-items: center;
}

.f-btn { 
    width: 55px; 
    height: 55px; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: white !important; 
    font-size: 24px; 
    text-decoration: none; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    transition: 0.3s; 
}

.f-btn.wa { background: #25d366; }
.f-btn.ig { background: linear-gradient(45deg, #f09433, #e31683, #bc1888); }
.f-btn.call { background: #e191a6; animation: pulse-call 2s infinite; }

/* --- AÇILIR MENÜ AYARLARI --- */
.contact-menu {
    display: flex;
    flex-direction: column-reverse;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Zıplama efekti kanka */
}

/* Menü aktif olduğunda kanka */
.floating-contact.active .contact-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Ana buton ayarı */
.f-btn.main-toggle {
    background: #e191a6;
    border: none;
    cursor: pointer;
}

/* Buton açıldığında çarpı efekti kanka */
.floating-contact.active .main-toggle {
    transform: rotate(135deg);
    background: #444;
}

@keyframes pulse-call {
    0% { box-shadow: 0 0 0 0 rgba(225, 145, 166, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(225, 145, 166, 0); }
    100% { box-shadow: 0 0 0 0 rgba(225, 145, 166, 0); }
}

@media (max-width: 768px) {
    .floating-contact { left: 15px; bottom: 30px; }
    .wa-support-card { flex-direction: column; text-align: center; gap: 20px; }
    .gallery-images { grid-template-columns: 1fr; }
}
/* Mobilde Üst Menü Düzenlemesi (Süper Kompakt 2x2 Kare Düzen) */
@media screen and (max-width: 768px) {
    .main-nav {
        height: auto !important; 
        padding-bottom: 8px !important; /* Pembe alanın en alt boşluğunu iyice kısalttık */
    }

    .nav-container {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 5px !important; /* Dış çerçeve boşluklarını minimuma indirdik */
    }

    /* Logo ve altındaki isim çok yer kaplamasın diye biraz daraltıyoruz */
    .logo-wrapper {
        margin-bottom: 0 !important;
    }
    
    #site-logo {
        max-height: 45px !important; /* Logoyu hafif ufalttık */
        margin-bottom: 2px !important;
    }

    .logo-text-bottom {
        line-height: 1.1 !important; /* İsim yazısının satır aralığını sıktık */
    }

    .nav-links {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 4px 10px !important; /* Menü kutularının alt alta boşluğunu çok kıstık */
        width: 100% !important;
        max-width: 320px !important; 
        margin-top: 8px !important; /* Logo ile menü arasını daralttık */
        padding: 0 !important;
    }

    .nav-link-item {
        font-size: 13px !important; 
        padding: 2px 0 !important; /* Menü yazılarının üst/alt boşluğunu iyice azalttık */
        text-align: center !important;
        display: block !important;
    }

    /* Pembe alan epey kısaldığı için alttaki karşılama yazısını da yukarı çekiyoruz */
    .hero {
        margin-top: 15px !important; 
    }
}