/* --- DEĞİŞKENLER VE TEMEL AYARLAR --- */
:root {
    --bg-color: #050a10; /* Çok koyu lacivert/siyah */
    --text-color: #e0e0e0;
    --primary: #d4af37; /* Lüks Altın Rengi */
    --secondary: #1a2a40;
    --accent: #ffffff;
    --font-heading: 'Cinzel', serif; /* Lüks başlık fontu */
    --font-body: 'Manrope', sans-serif; /* Modern okuma fontu */
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.7;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* JS animasyonu takılırsa kartları zorla göster */
.service-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* --- PRELOADER --- */
.preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 10000; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
}
.loader-text { font-family: var(--font-heading); font-size: 2rem; color: var(--primary); margin-bottom: 20px; letter-spacing: 5px; }
.loader-line { width: 0; height: 2px; background: var(--primary); animation: loadLine 1.5s ease-in-out forwards; }
@keyframes loadLine { to { width: 200px; } }

/* --- NAVBAR --- */
.navbar {
    position: fixed; top: 0; width: 100%; padding: 20px 5%;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 100; transition: 0.5s;
    background: rgba(5, 10, 16, 0.0); /* Başlangıçta şeffaf */
}
.navbar.scrolled {
    background: rgba(5, 10, 16, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 15px 5%;
}
.logo { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: #fff; letter-spacing: 2px; margin-left: 8%; white-space: nowrap;}
.logo span { color: var(--primary); }
.nav-links { display: flex; gap: 40px; }
.nav-item { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; position: relative; }
.nav-item::after {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px;
    background: var(--primary); transition: 0.3s;
}
.nav-item:hover::after { width: 100%; }

/* --- HERO SECTION --- */
.hero-section {
    height: 100vh; position: relative; display: flex; align-items: center; justify-content: center;
    text-align: center; overflow: hidden;
}
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; transform: scale(1.1); }
.hero-content { max-width: 900px; z-index: 2; padding: 0 20px; }
.hero-subtitle { color: var(--primary); letter-spacing: 4px; font-size: 0.9rem; text-transform: uppercase; font-weight: 700; display: block; margin-bottom: 20px; }
.hero-title {
    font-family: var(--font-heading); font-size: clamp(3rem, 5vw, 6rem);
    line-height: 1.1; margin-bottom: 30px; color: #fff;
}
.hero-title em { color: var(--primary); font-style: italic; }
.hero-desc { font-size: 1.2rem; color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 auto 40px; }
.hero-buttons { display: flex; gap: 20px; justify-content: center; }

/* Butonlar */
.btn-primary {
    padding: 15px 40px; background: var(--primary); color: #000; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; border: 1px solid var(--primary);
    transition: var(--transition);
}
.btn-primary:hover { background: transparent; color: var(--primary); }
.btn-secondary {
    background-color: #25D366;
    padding: 15px 40px; border: 1px solid rgba(255,255,255,0.3); color: #fff;
    font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    transition: var(--transition);
}
.btn-secondary:hover { border-color: #0fa446; background: rgba(255,255,255,0.1); }

.scroll-indicator {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; font-size: 0.8rem; letter-spacing: 2px; opacity: 0.7;
}
.scroll-indicator .line { width: 1px; height: 60px; background: rgba(255,255,255,0.3); margin-top: 10px; animation: scrollDown 2s infinite; }
@keyframes scrollDown { 0% { height: 0; opacity: 0; } 50% { height: 60px; opacity: 1; } 100% { height: 60px; transform: translateY(60px); opacity: 0; } }

/* --- İSTATİSTİKLER --- */
.stats-section {
    display: flex; justify-content: space-around; padding: 80px 5%;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stat-item { text-align: center; }
.stat-item h3 { font-size: 4rem; font-family: var(--font-heading); color: var(--primary); line-height: 1; }
.stat-item p { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; margin-top: 10px; }

/* --- HİZMETLER (GLOW EFFECT) --- */
.services-section { padding: 120px 10%; position: relative; }
.section-header { margin-bottom: 80px; }
.tagline { color: var(--primary); letter-spacing: 3px; font-size: 0.9rem; text-transform: uppercase; }
.section-header h2 { font-family: var(--font-heading); font-size: 3rem; margin-top: 15px; }

/* --- GÜNCELLENMİŞ SERVICE CARD (GÖRÜNÜR & LÜKS) --- */
.services-grid {
    oppacity: 1;
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 40px;
    margin-top: 50px; /* Üstten biraz boşluk */
}

.service-card {
    opacity: 1;
    background: rgba(30, 40, 55, 0.6); /* Daha görünür lacivert-gri ton */
    padding: 50px 30px; 
    border: 1px solid rgba(212, 175, 55, 0.2); /* Hafif Altın Rengi Çerçeve */
    border-radius: 8px; /* Köşeleri hafif yumuşatalım */
    transition: var(--transition); 
    position: relative; 
    overflow: hidden;
    backdrop-filter: blur(10px); /* Arkadaki görseli bulanıklaştırır, cam efekti verir */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Derinlik için gölge */
}

.service-card:hover { 
    transform: translateY(-10px); 
    border-color: var(--primary); 
    background: rgba(30, 40, 55, 0.9); /* Üzerine gelince daha mat olsun */
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.15); /* Altın rengi parlama */
}

.card-icon { 
    font-size: 3rem; 
    color: var(--primary); 
    margin-bottom: 25px; 
}

.service-card h3 { 
    font-size: 1.5rem; 
    margin-bottom: 15px; 
    font-family: var(--font-heading); 
    color: #fff; /* Başlık kesinlikle beyaz */
}

.service-card p { 
    color: #ccc; /* Açıklama açık gri */
    margin-bottom: 25px; 
    font-size: 1rem; 
}

.read-more { 
    color: var(--primary); 
    font-size: 0.9rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 700;
}

/* --- PARALLAX QUOTE --- */
.parallax-section {
    padding: 150px 5%; background: url('https://images.unsplash.com/photo-1590247813693-5541d1c609fd?q=80&w=2000&auto=format&fit=crop') fixed center/cover;
    position: relative; text-align: center;
}
.parallax-section::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(5,10,16,0.85); }
.parallax-content { position: relative; z-index: 2; }
.parallax-content h2 { font-family: var(--font-heading); font-size: 2.5rem; color: #fff; margin-bottom: 20px; font-style: italic; }
.parallax-content p { color: var(--primary); font-weight: 700; letter-spacing: 2px; }

/* --- WHY US (Split Layout) --- */
.why-us { padding: 120px 0; }
.container-split { display: flex; flex-wrap: wrap; }
.image-side { flex: 1; min-width: 400px; height: 600px; }
.image-side img { width: 100%; height: 100%; object-fit: cover; ; transition: 0.5s; }
.image-side:hover img { filter: grayscale(0%); }
.text-side { flex: 1; min-width: 400px; padding: 80px 5%; display: flex; flex-direction: column; justify-content: center; }
.features-list { margin-top: 40px; }
.features-list li { display: flex; gap: 20px; margin-bottom: 30px; }
.features-list i { font-size: 1.5rem; color: var(--primary); margin-top: 5px; }
.features-list strong { display: block; font-size: 1.2rem; color: #fff; margin-bottom: 5px; }
.features-list p { font-size: 0.9rem; color: #888; }

/* --- CTA & FOOTER --- */
.cta-footer { padding: 100px 5%; text-align: center; background: linear-gradient(to top, #000, var(--bg-color)); }
.big-btn { display: inline-block; margin-top: 30px; font-size: 1.1rem; padding: 20px 60px; }

footer { background: #000; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 80px; }
.footer-container { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 10% 80px; gap: 40px; }
.footer-col h3 { font-family: var(--font-heading); font-size: 2rem; color: #fff; margin-bottom: 20px; }
.footer-col h4 { color: var(--primary); margin-bottom: 20px; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 2px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: #888; transition: 0.3s; }
.footer-col ul li a:hover { color: #fff; padding-left: 5px; }
.footer-col p { color: #888; margin-bottom: 10px; }
.copyright { text-align: center; padding: 20px; border-top: 1px solid rgba(255,255,255,0.05); color: #555; font-size: 0.8rem; }

/* Responsive */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hamburger { display: block; }
    .hero-title { font-size: 2.5rem; }
    .stat-item { margin-bottom: 30px; }
    .container-split { flex-direction: column; }
    .image-side { height: 300px; }
}



/* --- MOBİL UYUMLULUK (RESPONSIVE) AYARLARI --- */
/* Bu kodları style.css dosyasının en altına yapıştırın */

@media (max-width: 768px) {
    
    /* Genel Taşma Önleyici */
    html, body {
        overflow-x: hidden; /* Sağa sola kaymayı engeller */
        font-size: 14px; /* Mobilde temel yazı boyutu biraz küçülür */
    }

    /* 1. Navbar ve Hamburger Menü */
    .navbar {
        padding: 15px 20px;
        background: rgba(5, 10, 16, 0.95); /* Mobilde arka plan hep koyu olsun */
    }
    
    
    
    .hamburger .bar {
        width: 25px; height: 3px; background-color: #fff; margin: 5px 0;
        transition: 0.3s;
    }

    .nav-links {
        position: fixed;
        top: 0; 
        right: 0;
        height: 100vh;
        width: 100%; /* Tam ekran kaplasın */
        background: #050a10; /* Menü arkaplan rengi (koyu lacivert/siyah) */
        display: flex; /* Flex display önemli! */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        transform: translateX(100%); /* Sağa gizle */
        transition: transform 0.4s ease-in-out;
        z-index: 999; /* Hamburgerin altında kalsın ama her şeyin üstünde olsun */
    }

    .nav-links.active {
        transform: translateX(0); /* Ekrana getir */
    }

    /* Hamburger butonu her zaman en üstte olmalı */
    .hamburger {
        display: block;
        z-index: 1001; /* Menüden daha yüksek olmalı ki kapanabilsin */
        cursor: pointer;
    }

    .nav-links li a {
        font-size: 1.5rem; /* Menü linkleri büyük olsun */
    }
    
    .cta-nav { display: none; } /* Mobilde üstteki "Hemen Ara" butonunu gizle (zaten hero'da var) */

    /* Menü Açıkken Hamburger İkonu X Olsun */
    .nav-links.active ~ .hamburger .bar:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
    .nav-links.active ~ .hamburger .bar:nth-child(2) { opacity: 0; }
    .nav-links.active ~ .hamburger .bar:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }


    /* 2. Hero Bölümü (Giriş) */
    .hero-title {
        font-size: 2.5rem; /* Dev başlığı küçült */
        line-height: 1.2;
    }
    .hero-desc {
        font-size: 1rem;
        padding: 0 10px;
    }
    .hero-buttons {
        flex-direction: column; /* Butonlar alt alta */
        gap: 15px;
        width: 100%;
    }
    .magnet-btn {
        width: 100%; /* Buton tam genişlik */
        text-align: center;
    }

    /* 3. İstatistikler */
    .stats-section {
        flex-direction: column; /* Alt alta diz */
        gap: 40px;
        padding: 50px 20px;
    }

    /* 4. Hizmet Kartları */
    .services-section {
        padding: 60px 20px;
    }
    .services-grid {
        grid-template-columns: 1fr; /* Tek sütun */
        gap: 30px;
    }
    .service-card {
        transform: none !important; /* Mobilde karmaşık animasyonları iptal et, performans artar */
        opacity: 1 !important;
    }

    /* 5. Neden Biz (Resim ve Yazı) */
    .container-split {
        flex-direction: column;
    }
    .image-side {
        height: 300px; /* Mobilde resim yüksekliğini kıs */
        min-width: 100%;
    }
    .text-side {
        padding: 40px 20px;
        min-width: 100%;
    }

    /* 6. Footer */
    .footer-container {
        flex-direction: column;
        padding: 0 20px 40px;
        text-align: center; /* Mobilde ortalı daha şık durur */
    }
    .footer-col {
        width: 100%;
        margin-bottom: 20px;
    }
}


/* --- ŞUBELER SAYFASI ÖZEL TASARIMI --- */

/* 1. Header (Sayfa Başlığı) */
.page-header {
    height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-bottom: 80px;
}
.header-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
}
.header-bg img {
    width: 100%; height: 100%; object-fit: cover; opacity: 0.3;
}
.header-content h1 {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 10px;
}
.header-subtitle {
    color: var(--primary);
    letter-spacing: 4px;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

/* 2. Şube Kartları (Zig-Zag Tasarım) */
.branches-wrapper {
    padding: 0 5% 100px;
    max-width: 1400px;
    margin: 0 auto;
}

.branch-item {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 120px;
    padding: 30px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02); /* Çok hafif bir kutu hissi */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ters Yön (Reverse) */
.branch-item.reverse {
    flex-direction: row-reverse;
}

/* Galeri Kısmı */
.branch-gallery {
    flex: 1;
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid var(--primary);
}
.swiper, .swiper-wrapper, .swiper-slide { height: 100%; width: 100%; }
.swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.swiper-button-next, .swiper-button-prev { color: var(--primary); }
.swiper-pagination-bullet-active { background: var(--primary); }

/* Bilgi Kısmı */
.branch-info {
    flex: 1;
}
.branch-type {
    color: var(--primary);
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: 700;
}
.branch-info h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #fff;
    margin: 10px 0 20px;
}
.branch-desc {
    color: #bbb;
    margin-bottom: 30px;
    font-size: 1rem;
}

/* Özellik Listesi (İkonlu) */
.branch-features {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.branch-features li {
    background: rgba(255,255,255,0.05);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
}
.branch-features li i { color: var(--primary); margin-right: 8px; }

/* Harita Tasarımı (Dark Mode Map) */
.branch-map-container {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    border: 1px solid #333;
    transition: 0.3s;
}
.branch-map-container iframe {
    width: 100%; height: 100%; border: 0;
    /* Haritayı Siyah Beyaz Yapar ve Koyulaştırır - ÇOK ÖNEMLİ */
    filter: grayscale(100%) invert(90%) contrast(85%); 
    transition: 0.5s;
}
/* Mouse ile gelince harita renklenir */
.branch-map-container:hover iframe {
    filter: grayscale(0%) invert(0%);
}
.map-overlay {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary); color: #000;
    padding: 10px 20px; font-weight: bold; font-size: 0.8rem;
    pointer-events: none; opacity: 1; transition: 0.3s;
}
.branch-map-container:hover .map-overlay { opacity: 0; }

.branch-btn { display: inline-block; text-align: center; width: auto; min-width: 200px;}

/* Mobil Uyumluluk */
@media (max-width: 900px) {
    .branch-item, .branch-item.reverse {
        flex-direction: column; /* Mobilde her zaman alt alta */
        gap: 30px;
        text-align: center;
        padding: 20px;
    }
    .branch-gallery { width: 100%; height: 300px; }
    .branch-features { justify-content: center; }
    .page-header h1 { font-size: 2.2rem; }
}


/* --- İLETİŞİM SAYFASI ÖZEL --- */

/* Hero Ayarı */
.contact-hero { height: 50vh; }

.contact-wrapper {
    padding: 80px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Sağ taraf (form) daha geniş */
    gap: 60px;
}

/* Sol Taraf: Bilgi Kartları */
.info-card {
    background: rgba(255,255,255,0.03);
    padding: 30px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: 0.3s;
    text-align: center;
}
.info-card:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-5px);
    border-color: var(--primary);
}
.info-card i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 15px;
}
.info-card h3 { color: #fff; margin-bottom: 10px; font-family: var(--font-heading); }
.info-card p { color: #bbb; font-size: 0.95rem; }
.info-card .sub-text { font-size: 0.8rem; color: #666; margin-top: 5px; }

/* Harita */
.contact-map-frame {
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 30px;
    border: 1px solid #333;
}
.contact-map-frame iframe {
    width: 100%; height: 100%; border: 0;
    filter: grayscale(100%) invert(90%) contrast(85%); /* Dark Map */
}

/* Sağ Taraf: Premium Form */
.contact-form-side {
    background: rgba(30, 40, 55, 0.4);
    padding: 50px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
}
.form-header { margin-bottom: 40px; }
.form-header h2 { font-family: var(--font-heading); font-size: 2rem; color: #fff; }
.form-header p { color: var(--primary); font-size: 0.9rem; }

/* Floating Label Form Stili */
.premium-form { display: flex; flex-direction: column; gap: 30px; }
.input-group { position: relative; }

.input-group input, 
.input-group textarea, 
.input-group select {
    width: 100%;
    padding: 10px 0;
    font-size: 1rem;
    color: #fff;
    border: none;
    border-bottom: 1px solid #555;
    background: transparent;
    outline: none;
    transition: 0.3s;
    font-family: var(--font-body);
    option{
        color: #000;
    }
}

.input-group label {
    position: absolute;
    top: 10px; left: 0;
    color: #888;
    pointer-events: none;
    transition: 0.3s;
}

/* Inputa tıklayınca veya doluysa label yukarı kaysın */
.input-group input:focus ~ label,
.input-group input:valid ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:valid ~ label {
    top: -20px;
    font-size: 0.8rem;
    color: var(--primary);
}
.select-label { top: -20px !important; font-size: 0.8rem !important; color: var(--primary) !important; }

/* Alt Çizgi Efekti */
.focus-border {
    position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background-color: var(--primary); transition: 0.3s;
}
.input-group input:focus ~ .focus-border,
.input-group textarea:focus ~ .focus-border, 
.input-group select:focus ~ .focus-border { width: 100%; }

.submit-btn {
    background: var(--primary);
    color: #000;
    padding: 15px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    margin-top: 20px;
    transition: 0.3s;
    letter-spacing: 2px;
}
.submit-btn:hover { background: #fff; }

/* --- FAQ SECTION (SEO İÇİN) --- */
.faq-section {
    padding: 0 20% 100px;
}
.section-header.center { text-align: center; margin-bottom: 50px; }

.faq-item {
    background: rgba(255,255,255,0.02);
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
}
.faq-question {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-question h3 { font-size: 1.1rem; color: #eee; font-weight: 500; }
.faq-question i { color: var(--primary); transition: 0.3s; }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: 0.5s ease;
    padding: 0 20px;
}
.faq-answer p { color: #999; padding-bottom: 20px; line-height: 1.6; }

/* FAQ Aktif Durumu */
.faq-item.active .faq-answer { max-height: 200px; }
.faq-item.active .faq-question i { transform: rotate(45deg); }
.faq-item.active .faq-question h3 { color: var(--primary); }

/* Mobil Uyumluluk */
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .faq-section { padding: 0 5% 80px; }
    .contact-form-side { padding: 30px; }
}

.insta {
    background: #f09433; 
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  
  /* İsteğe bağlı: Metin rengini beyaz yap */
  color: white;
      /* padding: 10px; */
    padding-left: 30px;
    padding-right: 30px;
}

.insta:hover {
    
    background: rgba(255,255,255,0.1);
    transition: 0.3s;
}

/* --- LOGO VE NAVBAR DÜZENLEMESİ --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%; /* Kenar boşlukları */
}

/* Logo ve Yazıyı Yan Yana Tutar */
.brand-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Logo ve yazı arası boşluk */
    text-decoration: none;
}

/* Logo Resim Ayarı */
.nav-logo {
    height: 50px; /* Yüzde yerine sabit yükseklik vererek bozulmayı önleriz */
    width: auto;
    border-radius: 50%;
    object-fit: cover;
}


/* --- BUTON DÜZENLEMELERİ --- */

/* Butonları kapsayan alan */
.hero-buttons {
    display: flex;
    gap: 15px; /* Butonlar arası boşluk */
    flex-wrap: wrap; /* Mobilde sığmazsa aşağı kaysın */
    margin-top: 30px;
}

/* Instagram Butonu Özel Rengi */
.btn-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    padding: 12px 40px;
   
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease;
    border: none;
    font-size: 16px; /* Yazı boyutu dengelendi */
}

.btn-instagram:hover {
    transition-duration: 0.5s;

        background: rgba(255,255,255,0.1);

}

/* --- MOBİL UYUMLULUK (RESPONSIVE) --- */
@media screen and (max-width: 768px) {
    
    /* Mobilde Logo Boyutunu Biraz Küçültelim */
    .nav-logo {
        height: 40px;
    }
    
    .logo {
        font-size: 18px; /* Mobilde yazı çok büyük kalmasın */
    }
    

    /* Mobilde Butonları Alt Alta Diz */
    .hero-buttons {
        flex-direction: column;
        align-items: stretch; /* Butonları tam genişlik yap */
        width: 100%;
    }

    .brand-container {
        gap: 5px; /* Mobilde logo ve yazı arası boşluk biraz azalsın */
    }

    .magnet-btn {
        width: 100%; /* Mobilde butonlar tam ekran genişliği alır */
        justify-content: center; /* Yazıyı ortalar */
        text-align: center;
        margin-bottom: 10px;
    }
}

/* --- MOBİL SABİT BUTONLAR --- */

/* Masaüstünde gizle */
.mobile-action-bar {
    display: none;
}

/* Sadece Mobil (768px altı) Ekranlarda Göster */
@media screen and (max-width: 768px) {
    
    /* 1. Alt Barın Kendisi */
    .mobile-action-bar {
        display: flex;
        position: fixed; /* Ekrana sabitler */
        bottom: 0;
        left: 0;
        width: 100%;
        background: #050a10ab;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* Hafif gölge */
        z-index: 9999; /* Her şeyin üstünde dursun */
        padding: 10px;
        gap: 10px; /* Butonlar arası boşluk */
    }

    /* 2. Butonların Ortak Özellikleri */
    .action-btn {
        flex: 1; /* Alanı eşit paylaşsınlar */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 700;
        font-family: 'Manrope', sans-serif;
        font-size: 15px;
        transition: transform 0.2s;
    }

    /* 3. Arama Butonu Rengi (Koyu Mavi/Siyah - Markana uygun) */
    .call-btn {
        background-color: #333; 
        color: white;
    }

    /* 4. WhatsApp Butonu Rengi (Yeşil) */
    .wp-btn {
        background-color: #25D366;
        color: white;
    }

    /* Tıklayınca ufak efekt */
    .action-btn:active {
        transform: scale(0.95);
    }

    /* Alt barın üzerine gelmemesi için sayfanın altına boşluk bırak */
    body {
        padding-bottom: 70px;
    }
    
    /* İstersen üst menüdeki "Hemen Ara" butonunu mobilde tamamen gizleyebilirsin */
    .navbar .cta-nav {
        display: none; 
    }

    /* Swiper Slide İçindeki Resim Ayarı */
.swiper-slide {
    height: 300px; /* Mobilde ideal yükseklik (İstersen artırabilirsin) */
}

/* Masaüstünde daha yüksek olsun */
@media (min-width: 768px) {
    .swiper-slide {
        height: 400px; 
    }
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* SİHİRLİ KOD: Resmi kutuya sığdırır ama asla yamultmaz (kırpar) */
    object-position: center;
    border-radius: 8px; /* Köşeleri yumuşatır */
}
}

#scrollTopBtn {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    bottom: 80px; /* Mobildeki yapışkan menünün üstünde kalsın diye 80px */
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #d4af37; /* Senin altın rengin */
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: 0.3s;
}

#scrollTopBtn:hover { background-color: #333; }