/* =========================================
   1. GENEL AYARLAR & RENKLER
========================================= */
:root {
    /* ANA RENK: Tok Kırmızı (Halı/Temizlik) */
    --primary: #E63946;

    /* İKİNCİL RENK: Koyu Lacivert (Güven/Kurumsal) */
    /* Artık sarı yerine bunu vurgu olarak kullanacağız */
    --primary-dark: #1D3557;

    /* METİN RENGİ */
    --text-color: #1D3557;

    /* ZEMİN RENKLERİ */
    --white: #ffffff;
    --light-bg: #f1faee;

    /* FONT */
    --font: 'Outfit', sans-serif;
}

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

body {
    font-family: var(--font);
    color: var(--text-color);
    overflow-x: hidden;
    
}

/* Link Ayarları */
a {
    text-decoration: none !important;
    transition: 0.3s;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   2. NAVBAR (MENÜ)
========================================= */
.navbar {
    height: 90px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000000000;
}

.nav-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Kısmı */
.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-text span {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 1px;
}

.logo-text small {
    font-size: 0.75rem;
    color: var(--primary-dark);
    letter-spacing: 2px;
    font-weight: 600;
}

/* Menü Linkleri */
.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 1rem;
    position: relative;
}

.nav-links a:hover {
    color: var(--primary);
}

/* Link Alt Çizgi Efekti */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -5px;
    left: 0;
    background: var(--primary);
    transition: 0.3s;
    border-radius: 2px;
}

.nav-links a:hover::after {
    width: 100%;
}

.mobile-only-btn {
    display: none;
}

.mobile-only-btn-wp {
    display: none;
}

/* Sağ Taraf - Telefon Butonu */
.nav-right {
    display: flex;
    align-items: center;
}

.call-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--light-bg);
    padding: 8px 25px;
    border-radius: 50px;
    border: 2px solid transparent;
    transition: 0.3s;
}

.call-btn:hover {
    border-color: var(--primary);
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 57, 70, 0.2);
}

.icon-circle {
    width: 35px;
    height: 35px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.btn-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.btn-text span {
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
}

.btn-text strong {
    color: var(--primary-dark);
    font-weight: 700;
}

.hamburger {
    display: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--primary-dark);
    margin-left: 15px;
}

/* =========================================
   3. HERO SECTION (GİRİŞ ALANI)
========================================= */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url('img/ankarahaliyikama.webp'); /* RESMİNİ KONTROL ET */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* BEYAZ KART TASARIMI */
.hero-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    width: 50%;
    padding: 60px;
    border-radius: 30px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    position: relative;
    margin-top: 100px;
}

/* Yaprak İkonu */
.deco-leaf {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 70px;
    height: 70px;
    background: var(--primary);
    color: #fff;
    border-radius: 50% 50% 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 10px 20px rgba(230, 57, 70, 0.4);
}

.hero-card h1 {
    font-size: 3rem;
    line-height: 1.1;
    color: var(--primary-dark);
    margin-bottom: 20px;
    font-weight: 800;
}

.hero-card .highlight {
    color: var(--primary);
}

.hero-card p {
    color: #555;
    font-size: 1.15rem;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* BUTONLAR (SARI YERİNE LACİVERT) */
.hero-buttons {

    gap: 30px;
    margin-bottom: 40px;
}

.btn {
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    font-size: 1rem;
}

/* ANA BUTON: Artık Lacivert (Daha Asil) */
.btn-primary {
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* ANA BUTON: Artık Lacivert (Daha Asil) */
.btn-primary-wp {
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}



.btn-primary:hover {

    transform: translateY(-3px);
}

/* İKİNCİL BUTON */
.btn-secondary {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    margin-left: 20px;
    box-shadow: 0 10px 20px rgba(29, 53, 87, 0.3);
}

.btn-secondary:hover {
    background: var(--primary);
    color: #fff;
}

/* TİK İŞARETLERİ */
.trust-features {
    display: flex;
    gap: 20px;
    border-top: 1px solid #ddd;
    padding-top: 25px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #444;
}

.feature-item i {
    color: var(--primary);
    font-size: 1.2rem;
}

/* =========================================
   HAKKIMIZDA BÖLÜMÜ
========================================= */
.about-section {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-images {
    position: relative;
    padding-left: 20px;
}

.img-main-box img {
    width: 90%;
    border-radius: 200px 200px 20px 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    height: 500px;
}

.img-float-box {
    position: absolute;
    bottom: -30px;
    left: 0;
    border: 8px solid #fff;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    overflow: visible;
    width: 250px;
}

.img-float-box img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

/* TECRÜBE ROZETİ (Sarı yerine Lacivert) */
.exp-badge {
    position: absolute;
    top: -30px;
    right: -30px;
    background: var(--primary-dark); /* Lacivert */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 5px solid #fff;
    box-shadow: 0 10px 20px rgba(29, 53, 87, 0.4);
    animation: float 3s ease-in-out infinite;
}

.exp-badge .num {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.exp-badge .text {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    line-height: 1.2;
}

.deco-sparkle {
    position: absolute;
    top: 40px;
    right: 20px;
    font-size: 3rem;
    color: var(--primary);
    opacity: 0.2;
    z-index: -1;
}

.sub-title {
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 10px;
}

.about-content h2 {
    font-size: 2.8rem;
    line-height: 1.2;
    color: var(--primary-dark);
    margin-bottom: 25px;
    font-weight: 800;
}

.about-content h2 .highlight {
    color: var(--primary);
    position: relative;
    display: inline-block;
}

.seo-text {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.6;
}

.seo-text strong {
    color: var(--primary-dark);
    font-weight: 700;
}

.seo-text-small {
    font-size: 1rem;
    color: #777;
    margin-bottom: 30px;
    border-left: 4px solid var(--primary); /* Kırmızı Çizgi */
    padding-left: 15px;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.about-features li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.about-features i {
    font-size: 1.5rem;
    color: var(--primary);
    background: rgba(230, 57, 70, 0.1);
    padding: 10px;
    border-radius: 50%;
    margin-top: -5px;
}

.about-features div strong {
    display: block;
    font-size: 1.1rem;
    color: var(--primary-dark);
    margin-bottom: 5px;
}

.about-features div small {
    display: block;
    color: #666;
    font-size: 0.9rem;
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* =========================================
   SÜREÇ BÖLÜMÜ (KIRMIZI GEÇİŞ - YENİ)
========================================= */
.process-section {
    background: var(--primary); /* Tam Kırmızı */
    padding: 100px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.pattern-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
}

.process-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.step-subtitle {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
    opacity: 0.9;
}

.process-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
}

/* Sarı yazıları BEYAZ yapıyoruz, daha temiz durur */
.text-yellow {
    color: #fff; 
    font-style: italic;
    text-decoration: underline; /* Hafif bir vurgu */
    text-decoration-color: var(--primary-dark);
}

.process-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.process-step {
    text-align: center;
    flex: 1;
    padding: 0 20px;
}

.step-icon {
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2.5rem;
    color: var(--primary);
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: 0.3s;
}

/* Hover olunca İkon LACİVERT oluyor (Sarı yerine) */
.process-step:hover .step-icon {
    transform: translateY(-10px);
    background: var(--primary-dark);
    color: #fff;
}

.step-number {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: var(--primary-dark);
    color: #fff;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.process-step h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.process-step p {
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1.6;
}

.step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
    flex: 0.2;
}

/* =========================================
   MOBİL AYARLAR
========================================= */
@media (max-width: 768px) {
    .nav-right {
        display: none;
    }

    .hamburger {
        display: block;
        z-index: 1002;
    }

    /* Mobil Menü */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: 1.5rem;
        font-weight: 700;
    }

    .nav-links a::after {
        display: none;
    }

    /* Mobil Buton */
    .mobile-only-btn {
        display: inline-block;
        background: var(--primary);
        padding: 15px 40px;
        border-radius: 50px;
        color: #fff !important;
        font-size: 1.2rem !important;
        box-shadow: 0 10px 20px rgba(230, 57, 70, 0.4);
    }

    /* Mobil Buton */
    .mobile-only-btn-wp {
        display: inline-block;
        background: #25D366;
        padding: 15px 40px;
        border-radius: 50px;
        color: #fff !important;
        font-size: 1.2rem !important;
        box-shadow: 0 10px 20px #25D366;
    }


    /* Hero Mobil */
    .hero-section {
        height: auto;
        padding: 140px 0 60px 0;
        min-height: 100vh;
    }

    .hero-card {
        width: 100%;
        padding: 40px 25px;
        margin-top: 0;
    }

    .hero-card h1 {
        font-size: 2.2rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .btn {
        width: 100%;
    }

    .trust-features {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Hakkımızda Mobil */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .img-main-box img {
        height: 350px;
        width: 100%;
    }

    .img-float-box {
        width: 180px;
        bottom: -20px;
        left: 0;
    }

    .exp-badge {
        width: 80px;
        height: 80px;
        top: -20px;
        right: -10px;
    }

    .exp-badge .num {
        font-size: 1.4rem;
    }

    .about-content h2 {
        font-size: 2rem;
    }

    .about-images {
        padding-left: 0;
        text-align: center;
    }

    .img-main-box {
        display: inline-block;
        position: relative;
    }

    /* Süreç Mobil */
    .process-grid {
        flex-direction: column;
        gap: 40px;
    }

    .step-arrow {
        transform: rotate(90deg);
        height: auto;
        margin: -20px 0;
    }

    .process-header h2 {
        font-size: 2rem;
    }
}

/* =========================================
   HİZMETLER BÖLÜMÜ (GENİŞLETİLMİŞ VERSİYON)
========================================= */
.services-section {
    padding: 100px 0;
    /* Transparan ayarını daha önce yapmıştık, buraya dokunmana gerek yok */
}

/* Bu bölüme özel GENİŞ KONTEYNER */
.services-section .container {
    max-width: 1400px; /* Kartlar daha geniş alana yayılsın */
    padding: 0 30px; /* Kenarlardan biraz boşluk */
}

.section-header { text-align: center; margin-bottom: 60px; }
.section-header h2 { font-size: 2.5rem; font-weight: 800; color: var(--primary-dark); }
.section-header .highlight { color: var(--primary); position: relative; display: inline-block; }

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Yan Yana */
    gap: 30px;
    margin-top: 50px;
}

/* KART TASARIMI */
.service-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: visible; 
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.12); /* Gölgeyi güçlendirdik */
    border-color: var(--primary);
}

/* RESİM KUTUSU */
.card-img-box {
    position: relative;
    height: 240px; /* Resmi biraz daha yüksek yaptık */
    width: 100%;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.card-img-box img {
    width: 100%; height: 100%; object-fit: cover; transition: 0.5s;
}

.service-card:hover .card-img-box img { transform: scale(1.1); }

/* YÜZEN İKON */
.card-icon {
    width: 70px; height: 70px; /* İkonu biraz büyüttük */
    background: var(--primary);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 2rem;
    box-shadow: 0 5px 15px rgba(230, 57, 70, 0.4);
    margin-top: -35px; /* Konumu güncelledik */
    margin-left: 25px;
    position: relative;
    z-index: 10;
    border: 5px solid #fff;
}

/* İÇERİK */
.card-content {
    padding: 15px 30px 35px 30px; /* İç boşluğu artırdık */
    flex-grow: 1;
    display: flex; flex-direction: column;
}

.card-content h3 { font-size: 1.5rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 12px; }
.card-content p { font-size: 1rem; color: #666; margin-bottom: 25px; line-height: 1.6; flex-grow: 1; }

.service-btn {
    display: flex; align-items: center; justify-content: space-between;
    background: #f4f6f8; padding: 14px 25px; border-radius: 50px;
    color: var(--primary-dark); font-weight: 700; font-size: 0.95rem; transition: 0.3s;
}

.service-btn i {
    background: #fff; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: 0.9rem; transition: 0.3s;
}

.service-btn:hover { background: var(--primary-dark); color: #fff; }
.service-btn:hover i { background: rgba(255,255,255,0.2); color: #fff; transform: translateX(5px); }

/* MOBİL */
@media (max-width: 1200px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } /* Laptopta 2'li */
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } .service-card { max-width: 100%; } }

/* =========================================
   FİYAT LİSTESİ BÖLÜMÜ
========================================= */
.prices-section {
    padding: 100px 0;
    background: #fff;
}

.prices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Yan Yana */
    gap: 30px;
}

/* KART YAPISI */
.price-card {
    position: relative;
    height: 250px; /* Sabit yükseklik */
    border-radius: 20px;
    overflow: hidden; /* Resim taşmasın */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* Arka Plan Resmi */
.price-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease; /* Yumuşak Zoom Efekti */
}

/* Hover Efekti: Resim Büyür */
.price-card:hover img {
    transform: scale(1.15);
}

/* KARARTMA & YAZI ALANI */
.price-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Gradyan: Lacivertten Siyaha doğru şeffaf geçiş */
    background: linear-gradient(to top, rgba(29, 53, 87, 0.95), rgba(29, 53, 87, 0.4));
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 20px;
    text-align: center;
    border: 2px solid transparent;
    transition: 0.3s;
}

/* Hover Efekti: Çerçeve Kırmızı Olur */
.price-card:hover .price-overlay {
    border-color: var(--primary); /* Kırmızı Çerçeve */
    background: linear-gradient(to top, rgba(230, 57, 70, 0.9), rgba(29, 53, 87, 0.6)); /* Hafif kırmızılaşır */
}

/* HİZMET ADI */
.price-overlay h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: capitalize;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* FİYAT ETİKETİ */
.price-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Çizgi Dekorasyonu */
.price-tag::before {
    content: '';
    width: 40px; height: 3px;
    background: var(--white);
    margin-bottom: 10px;
    border-radius: 2px;
}

.price-tag .amount {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.price-tag .unit {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.9;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* MOBİL UYARLAMA */
@media (max-width: 768px) {
    .prices-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablette 2'li */
    }
}

@media (max-width: 600px) {
    .prices-grid {
        grid-template-columns: 1fr; /* Mobilde Tekli */
    }
    .price-card {
        height: 220px; /* Mobilde biraz daha kısa olabilir */
    }
}

/* =========================================
   MÜŞTERİ YORUMLARI (KIRMIZI SLIDER)
========================================= */
.testimonials-section {
    padding: 20px 0; /* Eskiden 100px idi, şimdi daha dar */
    background: var(--primary); 
    position: relative;
    overflow: hidden;
    color: #fff;
}

/* Başlık Beyaz Olsun */
.white-header h2 { color: #fff; }
.white-header .sub-title { color: rgba(255,255,255,0.8); }
.highlight-white { color: var(--primary-dark); background: #fff; padding: 0 10px; border-radius: 5px; }

/* SLIDER KAPLAYICI */
.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}

/* KARTLARIN DİZİLDİĞİ YOL */
.testimonial-track {
    display: flex;
    gap: 30px;
    overflow-x: auto; /* Yan yana kaydırma */
    scroll-behavior: smooth;
    padding: 20px 10px; /* Gölgeler kesilmesin diye */
    width: 100%;
    
    /* Scrollbar'ı gizle */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE */
}
.testimonial-track::-webkit-scrollbar { display: none; /* Chrome */ }

/* YORUM KARTI */
.review-card {
    min-width: 350px; /* Sabit genişlik */
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    position: relative;
    color: var(--primary-dark); /* Yazılar Lacivert */
    transition: 0.3s;
}

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

/* Tırnak İkonu */
.quote-icon {
    font-size: 2rem;
    color: var(--primary); /* Kırmızı Tırnak */
    margin-bottom: 20px;
    opacity: 0.2;
}

.review-text {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1;
    color: #555;
}

/* Müşteri Bilgisi */
.reviewer-info {
    display: flex; align-items: center; gap: 15px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.reviewer-info img {
    width: 50px; height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
}

.reviewer-info div { display: flex; flex-direction: column; }
.reviewer-info strong { font-size: 1rem; color: var(--primary-dark); }
.reviewer-info span { font-size: 0.8rem; color: #888; }

/* OK BUTONLARI */
.slider-btn {
    background: rgba(255,255,255,0.2);
    border: 2px solid #fff;
    color: #fff;
    width: 50px; height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
    position: absolute;
    z-index: 10;
}

.slider-btn:hover { background: #fff; color: var(--primary); }
.prev-btn { left: -60px; }
.next-btn { right: -60px; }

/* GOOGLE ROZETİ */
.google-badge {
    background: #fff;
    max-width: 300px;
    margin: 60px auto 0;
    border-radius: 50px;
    padding: 10px 25px;
    display: flex; align-items: center; gap: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    color: var(--primary-dark);
}

.google-badge img { width: 30px; }
.badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.badge-text strong { font-size: 1.1rem; }
.stars { color: #FFB703; font-size: 0.8rem; margin: 2px 0; }
.badge-text span { font-size: 0.75rem; color: #666; }

/* MOBİL UYARLAMA */
@media (max-width: 768px) {
    .slider-btn { display: none; /* Mobilde buton gizle, elle kaydırılır */ }
    .review-card { min-width: 300px; }
    .prev-btn, .next-btn { left: 10px; right: 10px; } /* Gerekirse */
}

/* =========================================
   SSS BÖLÜMÜ (TAM ORTALI & DENGELİ)
========================================= */
.faq-section {
    padding: 100px 0;
    background: #ffffff;
}

.faq-grid {
    display: grid;
    grid-template-columns: 350px 1fr; /* Sol 350px, Sağ kalan alan */
    gap: 60px;
    
    /* ↓↓↓ KİLİT KOD BURASI ↓↓↓ */
    /* Bu kod, sol kutuyu sağdaki içeriğin YÜKSEKLİK olarak tam ortasına getirir */
    align-items: center; 
}

/* SOL TARA: CTA KUTUSU */
.faq-cta-box {
    background: var(--primary-dark);
    padding: 40px 30px;
    border-radius: 20px;
    color: #fff;
    box-shadow: 0 20px 40px rgba(29, 53, 87, 0.2);
    text-align: center;
    background-image: radial-gradient(circle at top right, rgba(255,255,255,0.1) 0%, transparent 20%);
    
    /* ÖNEMLİ: Sticky (yapışkan) özelliğini kaldırdık ki grid onu rahatça ortalayabilsin */
    position: relative; 
    top: 42px; 
    margin: 0; /* Ekstra boşluk varsa sıfırla */
}

.faq-cta-box h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
}

.faq-cta-box p {
    font-size: 0.95rem;
    opacity: 0.8;
    margin-bottom: 25px;
    line-height: 1.6;
}

.cta-phone-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--white);
    color: var(--primary-dark);
    padding: 15px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.1rem;
    transition: 0.3s;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.cta-phone-btn:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

/* SAĞ TARAF */
.section-header-left {
    margin-bottom: 30px;
    text-align: left; /* Masaüstünde sola yaslı */
}

.section-header-left h2 { font-size: 2.2rem; font-weight: 800; color: var(--primary-dark); }
.section-header-left .sub-title { color: var(--primary); font-weight: 700; letter-spacing: 2px; font-size: 0.9rem; display: block; margin-bottom: 5px;}

.faq-item {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
}

.faq-question {
    background: #fff;
    color: var(--primary-dark);
    cursor: pointer;
    padding: 20px 25px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
    font-family: var(--font);
}

.faq-question i {
    color: #ccc;
    font-size: 0.9rem;
    transition: 0.3s;
    background: #f5f5f5;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.faq-question:hover { background: #fcfcfc; }
.faq-question.active { color: var(--primary); }
.faq-question.active i { background: var(--primary); color: #fff; transform: rotate(45deg); }

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

.faq-answer p {
    padding-bottom: 20px;
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* MOBİL UYARLAMA */
@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr; /* Mobilde alt alta */
        gap: 100px;
    }
    
    /* Mobilde yazıları ortala */
    .section-header-left {
        text-align: center;
    }
    
    /* Mobilde kutu düzeni */
    .faq-cta-box {
        margin-top: 20px;
    }
}

/* =========================================
   MOBİL EKRAN ZORUNLU DÜZELTMELER (KESİN ÇÖZÜM)
========================================= */
@media screen and (max-width: 768px) {

    /* 1. Tüm Kapsayıcıları Ekrana Yay */
    html, body {
        width: 100%;
        overflow-x: hidden; /* Yanlara taşmayı engelle */
        margin: 0;
        padding: 0;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px; /* Kenarlardan hafif boşluk */
    }

    /* 2. Hero Bölümü (O Beyaz Kart Sorunu) */
    .hero-section {
        height: auto; /* Yükseklik serbest olsun */
        padding-top: 120px; /* Üstten boşluk */
        padding-bottom: 60px;
    }

    .hero-card {
        width: 100% !important; /* ZORUNLU: Ekranı tam kapla */
        margin-top: 0;
        padding: 30px 20px;
    }

    /* 3. Menü (Hamburger Menü Sorunu) */
    .nav-links {
        width: 100% !important; /* Menü tam ekran olsun */
        right: -100%; /* Gizliyken sağda */
        top: 0;
        height: 100vh;
    }

    .nav-links.active {
        right: 0; /* Açılınca tam otur */
    }

    /* 4. Galeri ve Yorum Kartları */
    .swiper-slide {
        width: 280px !important; /* Mobilde kart genişliği */
    }
    
    .review-card {
        min-width: 100%; /* Yorum kartı tam genişlik */
    }
    
    /* 5. Fiyat Listesi ve Hizmetler */
    .prices-grid, .services-grid, .faq-grid {
        display: flex;
        flex-direction: column; /* Yan yana değil alt alta */
        width: 100%;
    }
    
    .price-card, .service-card {
        width: 100%; /* Kartlar tam genişlik */
    }
}

/* =========================================
   TEKLİF AL & GARANTİ BÖLÜMÜ
========================================= */
.offer-section {
    padding: 100px 0;
    background: #fff;
}

.offer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Form biraz daha geniş */
    gap: 40px;
}

/* SOL TARA: FORM KUTUSU (LACİVERT) */
.offer-form-box {
    background: var(--primary-dark); /* Lacivert Zemin */
    padding: 30px;
    border-radius: 30px;
    color: #fff;
    box-shadow: 0 20px 50px rgba(29, 53, 87, 0.25);

}

.form-subtitle {
    display: block;
    color: var(--primary); /* Kırmızı */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.offer-form-box h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    font-weight: 800;
}

/* Form Satırları */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 8px;
    opacity: 0.8;
}

.input-group input, .input-group select {
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    border: none;
    background: #fff;
    font-family: var(--font);
    color: var(--primary-dark);
    font-weight: 600;
    outline: none;
}

.input-group select {
    cursor: pointer;
    appearance: none; /* Varsayılan oku gizle */
}

.full-width { margin-bottom: 20px; }

/* Checkbox */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 0.8rem;
    opacity: 0.8;
}
.checkbox-group input { width: 18px; height: 18px; accent-color: var(--primary); }

/* Buton */
.offer-btn {
    width: 100%;
    background: var(--primary); /* Kırmızı Buton */
    color: #fff;
    border: none;
    padding: 18px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(230, 57, 70, 0.3);
}

.offer-btn:hover {
    background: #fff;
    color: var(--primary);
    transform: translateY(-3px);
}

/* SAĞ TARA: GÖRSELLER */
.offer-visuals {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Üst Resim */
.visual-img {
    height: 350px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.visual-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: 0.5s;
}
.visual-img:hover img { transform: scale(1.05); }

/* Alt Garanti Kutusu */
.guarantee-box {
    background: #f1faee; /* Çok açık yeşil/beyaz tonu */
    padding: 30px;
    border-radius: 20px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border: 2px dashed var(--primary); /* Kesik çizgili çerçeve */
}

.g-icon {
    font-size: 2.5rem;
    color: var(--primary);
}

.g-content h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 10px;
}

.g-content p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}

/* MOBİL UYARLAMA */
@media (max-width: 992px) {
    .offer-grid {
        grid-template-columns: 1fr; /* Alt alta */
    }
    
    .offer-form-box {
        padding: 30px 20px;
    }

    .form-row {
        grid-template-columns: 1fr; /* Mobilde inputlar alt alta olsun */
        gap: 15px;
    }
    
    .visual-img {
        height: 250px;
    }
}

/* =========================================
   FOOTER TASARIMI (MODERN DALGALI)
========================================= */
.main-footer {
    background: var(--primary-dark); /* Koyu Lacivert Zemin */
    color: #fff;
    position: relative;
    margin-top: 100px; /* Üstteki bölümden biraz uzaklaşsın */
}

/* DALGA EFEKTİ (SVG) */
.footer-wave {
    position: absolute;
    top: -100px; /* Footer'ın üstüne çıkar */
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.footer-wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
    fill: var(--primary-dark); /* Rengi footer ile aynı */
}

/* FOOTER GRID YAPISI */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr; /* 4 Sütun */
    gap: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.footer-col h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Başlık Altındaki Kırmızı Çizgi */
.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 40px; height: 3px;
    background: var(--primary); /* Kırmızı */
    border-radius: 2px;
}

/* 1. SÜTUN: Marka */
.footer-logo {
    display: inline-flex; flex-direction: column; line-height: 1;
    margin-bottom: 20px;
}
.footer-logo span { font-size: 1.8rem; font-weight: 800; color: #fff; letter-spacing: 1px; }
.footer-logo small { font-size: 0.8rem; color: var(--primary); letter-spacing: 2px; font-weight: 600; }

.brand-col p { font-size: 0.9rem; color: #ccc; line-height: 1.6; margin-bottom: 25px; }

/* Sosyal Medya İkonları */
.social-links { display: flex; gap: 15px; }
.social-links a {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #fff;
    transition: 0.3s;
}
.social-links a:hover {
    background: var(--primary); /* Kırmızı Hover */
    transform: translateY(-3px);
}

/* 2. & 3. SÜTUN: Linkler */
.footer-links li { margin-bottom: 12px; }
.footer-links a {
    color: #ccc;
    font-size: 0.95rem;
    display: flex; align-items: center; gap: 8px;
    transition: 0.3s;
}
.footer-links a i { font-size: 0.8rem; color: var(--primary); transition: 0.3s; }
.footer-links a:hover { color: #fff; padding-left: 5px; } /* Sağa kayma efekti */

/* 4. SÜTUN: İletişim */
.contact-row {
    display: flex; align-items: flex-start; gap: 15px;
    margin-bottom: 20px;
    color: #ccc; font-size: 0.95rem;
}
.contact-row i { color: var(--primary); font-size: 1.1rem; margin-top: 3px; }

/* Newsletter Kutusu */
.newsletter-box {
    position: relative;
    margin-top: 25px;
}
.newsletter-box input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 50px;
    border: none;
    background: rgba(255,255,255,0.1); /* Şeffaf Beyaz */
    color: #fff;
    outline: none;
    padding-right: 50px; /* Buton için yer */
}
.newsletter-box input::placeholder { color: #aaa; }

.newsletter-box button {
    position: absolute;
    right: 5px; top: 5px;
    width: 35px; height: 35px;
    border-radius: 50%;
    border: none;
    background: var(--primary); /* Kırmızı Buton */
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}
.newsletter-box button:hover { background: #fff; color: var(--primary); }

/* ALT ÇİZGİ */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 25px 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #888; font-size: 0.9rem;
}
.bottom-links a { color: #888; margin-left: 20px; font-size: 0.85rem; }
.bottom-links a:hover { color: var(--primary); }

/* =========================================
   MOBİL FOOTER DÜZENLEMESİ (KOMPAKT & ORTALI)
========================================= */
@media (max-width: 992px) {
    
    .footer-grid {
        /* Ekranı 2 eşit parçaya bölüyoruz */
        grid-template-columns: 1fr 1fr; 
        gap: 30px; /* Dikey boşluk */
        text-align: center; /* Her şeyi ortala */
    }

    /* 1. LOGO KISMI: En üstte ve Tam Genişlik Olsun */
    .brand-col {
        grid-column: 1 / -1; /* Baştan sona kadar kapla (Tam satır) */
        border-bottom: 1px solid rgba(255,255,255,0.05); /* Altına hafif çizgi */
        padding-bottom: 20px;
    }

    /* 2. KURUMSAL ve HİZMETLER: Bunlara dokunmuyoruz,
       Grid sistemi zaten 1fr 1fr olduğu için otomatik yan yana gelecekler. */

    /* 3. İLETİŞİM KISMI: En altta ve Tam Genişlik Olsun */
    .contact-col {
        grid-column: 1 / -1; /* Tam satır kapla */
        border-top: 1px solid rgba(255,255,255,0.05); /* Üstüne hafif çizgi */
        padding-top: 20px;
    }

    /* ORTALAMA AYARLARI */
    
    /* Logo Ortala */
    .footer-logo {
        align-items: center; /* Flexbox ile ortala */
        margin-left: auto;
        margin-right: auto;
    }

    /* Sosyal Medya Ortala */
    .social-links {
        justify-content: center;
    }

    /* Linkler (Kurumsal & Hizmetler) */
    .footer-links a {
        justify-content: center; /* Yazı ve ikonu ortala */
    }
    .footer-links a:hover {
        padding-left: 0; /* Mobilde kayma efektini kapat, sade olsun */
    }
    
    /* Başlıkların altındaki kırmızı çizgiyi ortala */
    .footer-col h3::after {
        left: 50%;
        transform: translateX(-50%); /* Tam ortaya çek */
    }

    /* İletişim Satırlarını Ortala */
    .contact-row {
        justify-content: center;
        text-align: center;
    }

    /* Alt Telif Kısmı */
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .bottom-links a {
        margin: 0 10px;
    }
}

/* =========================================
   BLOG BÖLÜMÜ (SAFİR VIP TARZI)
========================================= */
.blog-section {
    padding: 100px 0;
    background: #ffffff; /* Çok hafif gri zemin (Ayrışsın diye) */
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Yan Yana */
    gap: 30px;
    margin-bottom: 50px;
}

/* KART TASARIMI */
.blog-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
    border: 1px solid rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Resim Alanı */
.blog-img {
    height: 240px;
    position: relative;
    overflow: hidden;
}

.blog-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: 0.5s;
}

.blog-card:hover .blog-img img { transform: scale(1.1); }

/* Tarih Rozeti */
.date-badge {
    position: absolute;
    top: 20px; left: 20px;
    background: var(--primary); /* Kırmızı */
    color: #fff;
    padding: 10px 15px;
    border-radius: 12px;
    text-align: center;
    line-height: 1.1;
    box-shadow: 0 5px 15px rgba(230, 57, 70, 0.4);
}

.date-badge .day { display: block; font-size: 1.4rem; font-weight: 800; }
.date-badge .month { display: block; font-size: 0.7rem; font-weight: 600; }

/* İçerik */
.blog-content {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-cat {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.blog-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 15px;
    line-height: 1.4;
    transition: 0.3s;
}

.blog-card:hover h3 { color: var(--primary); }

.blog-content p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
    flex-grow: 1;
}

.read-more {
    font-weight: 700;
    color: var(--primary-dark);
    display: flex; align-items: center; gap: 8px;
    font-size: 0.95rem;
    transition: 0.3s;
}
.read-more:hover { color: var(--primary); gap: 12px; }

/* "DAHA FAZLASI" ÇUBUĞU */
.blog-footer-bar {
    background: #fff;
    padding: 20px 30px;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
}

.bar-text {
    display: flex; align-items: center; gap: 15px;
    color: #555; font-size: 1rem;
}
.bar-text i { font-size: 1.5rem; color: var(--primary); }

.bar-btn {
    background: var(--primary-dark);
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: 0.3s;
    display: flex; align-items: center; gap: 8px;
}
.bar-btn:hover {
    background: var(--primary);
    transform: translateX(5px);
}

/* MOBİL UYARLAMA */
@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: 1fr; /* Mobilde Tekli */
    }
    
    .blog-footer-bar {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 30px 20px;
        border-radius: 20px;
    }
    
    .bar-text { flex-direction: column; gap: 10px; }
    .bar-btn { width: 100%; justify-content: center; }
}

/* =========================================
   PREMIUM HİZMETLER TASARIMI (GÜNCEL)
========================================= */

/* Hero Alanı */
.service-hero {
    position: relative;
    height: 50vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: #fff;
    margin-top: 90px;
    background: #000;
    overflow: hidden;
}
.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('img/çankayahaliyikama.webp') center/cover;
    opacity: 0.6;
    animation: zoomEffect 20s infinite alternate;
}

.iletisim {
    background: url('img/bağlıcahaliyikama.webp') center/cover;
}

.hakkimizda {
    background: url('img/eryamanhaliyikama.webp') center/cover;
}

.blog {
    background: url('img/alaçatlıhaliyikama.webp') center/cover;
}
@keyframes zoomEffect { from { transform: scale(1); } to { transform: scale(1.1); } }
.hero-content { position: relative; z-index: 2; }
.badge-hero { background: var(--primary); padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; display: inline-block; margin-bottom: 15px; }
.service-hero h1 { font-size: 3.5rem; line-height: 1.1; font-weight: 800; margin-bottom: 15px; }
.gradient-text { background: linear-gradient(to right, #fff, #ccc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Ana Yapı */
.main-content-section { padding: 80px 0; background: #ffffff; }
.content-grid { display: grid; grid-template-columns: 280px 1fr; gap: 50px; align-items: start; }

.modern-sidebar {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Kutular arası 20px boşluk (Daha dengeli) */
}
/* MENÜ KUTUSU */
.glass-menu {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}
.glass-menu h3 {
    font-size: 0.9rem; color: #999; 
    text-transform: uppercase; letter-spacing: 1px; 
    margin-bottom: 10px; font-weight: 700;
}
/* Linkler (Düz Görünüm) */
.nav-item {
    display: flex; align-items: center; gap: 15px;
    padding: 12px 15px;
    border-radius: 12px;
    color: var(--primary-dark); font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    text-decoration: none;
}
.nav-item i { width: 25px; color: #ccc; transition: 0.3s; }
/* Sadece üzerine gelince değişsin (Active'i sildiğimiz için) */
.nav-item:hover {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transform: translateX(5px);
}
.nav-item:hover i { color: var(--primary); }


/* İçerik Kartları */
.detail-card { background: #fff; border-radius: 25px; overflow: hidden; margin-bottom: 50px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.02); }
.card-header-img { height: 350px; position: relative; overflow: hidden; }
.card-header-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.detail-card:hover .card-header-img img { transform: scale(1.05); }
.floating-badge { position: absolute; top: 20px; right: 20px; background: #fff; color: var(--primary-dark); padding: 8px 20px; border-radius: 50px; font-weight: 700; font-size: 0.85rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

.card-body { padding: 40px; }
.card-body h2 { font-size: 2.2rem; margin-bottom: 15px; color: var(--primary-dark); }
.intro { font-size: 1.2rem; color: #555; margin-bottom: 25px; line-height: 1.6; }

/* YENİ: BİLGİ KUTUCUKLARI (HEPSİNDE GEÇERLİ) */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* İki Yan Yana */
    gap: 25px;
    margin: 30px 0;
}

.info-item {
    background: #f8f9fa; /* Hafif Gri Arkaplan */
    padding: 25px;
    border-radius: 15px;
    border-left: 5px solid var(--primary); /* Solu Kırmızı Çizgili */
    transition: 0.3s;
}

.info-item:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transform: translateY(-5px);
}

.info-item i {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 15px;
    display: block;
}

.info-item strong {
    display: block;
    font-size: 1.1rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
    font-weight: 700;
}

.info-item p {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* YENİ: GENİŞ YAZI ALANI */
.full-text {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
}

.feature-tags { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; }
.feature-tags span { background: #fff; border: 1px solid #eee; padding: 8px 15px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; color: #555; }
.feature-tags span i { color: var(--primary); margin-right: 5px; }

/* YENİ: HEMEN ULAŞ BUTONU */
.sidebar-contact-btn {
    display: flex; align-items: center; gap: 15px;
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    border: 2px solid var(--primary); /* Kırmızı Çerçeve */
    color: var(--primary-dark);
    transition: 0.3s;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.sidebar-contact-btn .icon-box {
    width: 45px; height: 45px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    animation: pulseBtn 2s infinite; /* İkonu canlı tutar */
}

.sidebar-contact-btn .text-box { display: flex; flex-direction: column; }
.sidebar-contact-btn span { font-size: 0.8rem; color: #888; }
.sidebar-contact-btn strong { font-size: 1.1rem; color: var(--primary-dark); }
.sidebar-contact-btn .arrow { margin-left: auto; color: #ccc; transition: 0.3s; }

.sidebar-contact-btn:hover { background: var(--primary); transform: translateY(-3px); border-color: var(--primary); }
.sidebar-contact-btn:hover .icon-box { background: #fff; color: var(--primary); }
.sidebar-contact-btn:hover span, 
.sidebar-contact-btn:hover strong, 
.sidebar-contact-btn:hover .arrow { color: #fff; }

.sidebar-contact-btn-wp {
    display: flex; align-items: center; gap: 15px;
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    border: 2px solid #25D366; /* Kırmızı Çerçeve */
    color: var(--primary-dark);
    transition: 0.3s;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.sidebar-contact-btn-wp .icon-box {
    width: 45px; height: 45px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    animation: pulseBtnWp 2s infinite; /* İkonu canlı tutar */
}

.sidebar-contact-btn-wp .text-box { display: flex; flex-direction: column; }
.sidebar-contact-btn-wp span { font-size: 0.8rem; color: #888; }
.sidebar-contact-btn-wp strong { font-size: 1.1rem; color: var(--primary-dark); }
.sidebar-contact-btn-wp .arrow { margin-left: auto; color: #ccc; transition: 0.3s; }

.sidebar-contact-btn-wp:hover { background: #25D366; transform: translateY(-3px); border-color: #25D366; }
.sidebar-contact-btn-wp:hover .icon-box { background: #fff; color: #25D366; }
.sidebar-contact-btn-wp:hover span, 
.sidebar-contact-btn-wp:hover strong, 
.sidebar-contact-btn-wp:hover .arrow { color: #fff; }

@keyframes pulseBtn {
    0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(230, 57, 70, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}

@keyframes pulseBtnWp {
    0% { box-shadow: 0 0 0 0 #25D366; }
    70% { box-shadow: 0 0 0 10px rgba(230, 57, 70, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}

/* HIZLI SERVİS KARTI (SABİT) */
.promo-card {
    background: var(--primary-dark);
    color: #fff;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    background-image: linear-gradient(135deg, var(--primary-dark) 0%, #2a4b7c 100%);
    box-shadow: 0 10px 30px rgba(29, 53, 87, 0.3);
    gap: 20px;
}
.promo-icon {
    width: 50px; height: 50px; background: rgba(255,255,255,0.1);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px; font-size: 1.5rem; color: #FFD700; /* Altın Sarısı İkon */
}

/* =========================================
   MOBİL İÇİN ÖZEL DÜZENLEME (KOMPAKT & ORTALI)
========================================= */
@media (max-width: 992px) {
    
    /* 1. Ana Yapı & Sıralama */
    .content-grid {
        display: flex; 
        flex-direction: column;
        gap: 30px; /* Kartlar arası boşluğu azalttık */
    }

    /* 2. Sidebar'ı En Alta Taşı */
    .modern-sidebar {
        display: flex !important;
        order: 2;
        width: 100%;
        position: static;
        margin-top: 0;
        gap: 50px;
    }

    /* Gereksiz Menüyü Gizle */
    .glass-menu { display: none; }

    /* Butonları Tam Genişlik Yap */
    .sidebar-contact-btn, .promo-card { width: 100%; max-width: 100%; }

    /* 3. KARTLARI KÜÇÜLT & ORTALA (ÖNEMLİ KISIM) */
    .detail-card {
        margin-bottom: 20px; /* Kartlar birbirine daha yakın */
        border-radius: 15px; /* Köşeler daha az oval */
        text-align: center; /* TÜM YAZILARI ORTALA */
    }

    /* Resim Alanını Küçült */
    .card-header-img {
        height: 180px; /* Eskiden 350px idi, mobilde yer kaplamasın */
    }
    
    /* Rozet (En Popüler) Konumu */
    .floating-badge {
        top: 10px; right: 10px;
        padding: 5px 12px; font-size: 0.75rem;
    }

    /* İçerik Alanını Sıkılaştır */
    .card-body {
        padding: 20px 15px; /* Kenar boşluklarını daralttık */
    }

    .card-body h2 { font-size: 1.5rem; margin-bottom: 10px; }
    .intro { font-size: 1rem; margin-bottom: 15px; }
    .full-text { font-size: 0.95rem; margin-bottom: 20px; }

    /* 4. BİLGİ KUTUCUKLARINI MOBİLE UYARLA */
    .info-grid {
        grid-template-columns: 1fr; /* Alt alta */
        gap: 15px;
        margin: 20px 0;
        text-align: center; /* Kutuları da ortala */
    }

    .info-item {
        padding: 15px;
        border-left: none; /* Sol çizgiyi kaldır */
        border-top: 4px solid var(--primary); /* Üste çizgi koy (Daha şık durur) */
        background: #f9f9f9;
    }

    .info-item i { margin: 0 auto 10px auto; /* İkonu ortala */ }

    /* 5. Etiketleri Ortala */
    .feature-tags {
        justify-content: center; /* Yan yana ve ortalı dizil */
        gap: 10px;
        padding-top: 15px;
    }
    
    .feature-tags span {
        font-size: 0.8rem;
        padding: 5px 12px;
    }

    /* Hero Başlık Ayarı */
    .service-hero { height: 35vh; margin-top: 70px; }
    .service-hero h1 { font-size: 2rem; }
}

/* =========================================
   KURUMSAL SAYFA (ABOUT US) TASARIMI
========================================= */

/* 1. HERO ALANI */
.about-hero {
    position: relative;
    height: 45vh;
    display: flex; align-items: center; justify-content: center;
    background: url('img/eryamanhaliyikama.webp') center/cover no-repeat fixed;
    margin-top: 90px;
    text-align: center; color: #fff;
}
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(29, 53, 87, 0.85); /* Koyu Lacivert Filtre */
}
.hero-text { position: relative; z-index: 2; }
.top-tag { font-size: 0.9rem; letter-spacing: 3px; font-weight: 700; color: var(--primary); display: block; margin-bottom: 10px; }
.about-hero h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 10px; }
.about-hero p { font-size: 1.2rem; opacity: 0.9; }

/* 2. HİKAYE BÖLÜMÜ (SPLIT LAYOUT) */
.about-story-section { padding: 100px 0; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.text-blue { color: var(--primary-dark); }
.lead { font-size: 1.15rem; line-height: 1.8; color: #555; margin-bottom: 20px; }
.story-content p { color: #666; margin-bottom: 20px; line-height: 1.7; }

.story-badges { display: flex; gap: 20px; margin-top: 25px; flex-wrap: wrap; }
.badge-item {
    background: #f0f7ff; color: var(--primary-dark);
    padding: 10px 20px; border-radius: 50px; font-weight: 600; font-size: 0.9rem;
    border: 1px solid #dceeff;
}
.badge-item i { color: var(--primary); margin-right: 8px; }

.btn-primary {
    display: inline-block; background: var(--primary); color: #fff;
    padding: 15px 35px; border-radius: 50px; text-decoration: none;
    font-weight: 700; transition: 0.3s; margin-top: 20px;
}

.btn-primary-wp {
    display: inline-block; background: #25D366; color: #fff;
    padding: 15px 35px; border-radius: 50px; text-decoration: none;
    font-weight: 700; transition: 0.3s; margin-top: 20px;
}

.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 5px 20px var(--primary); }

.btn-primary-wp:hover { transform: translateY(-3px); box-shadow: 0 5px 20px #25D366; }

/* Resim ve Tecrübe Kutusu */
.img-wrapper { position: relative; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.img-wrapper img { width: 100%; display: block; }
.experience-box {
    position: absolute; bottom: 30px; left: 30px;
    background: var(--primary); color: #fff;
    padding: 20px 30px; border-radius: 20px;
    text-align: center; box-shadow: 0 10px 30px rgba(230, 57, 70, 0.4);
}
.years { font-size: 2.5rem; font-weight: 800; display: block; line-height: 1; }
.experience-box .text { font-size: 0.9rem; font-weight: 600; line-height: 1.2; }

/* 3. İSTATİSTİKLER (KOYU ZEMİN) */
.stats-section {
    background: var(--primary-dark);
    padding: 60px 0; color: #fff;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat-item i { font-size: 2.5rem; color: var(--primary); margin-bottom: 15px; }
.counter { font-size: 2.5rem; font-weight: 800; margin-bottom: 5px; }
.stat-item p { font-size: 1rem; opacity: 0.8; }

/* 4. DEĞERLER (KARTLAR) */
.values-section { padding: 100px 0; background: #fff; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 50px; }
.value-card {
    background: #fff; padding: 40px 30px; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: 0.3s;
    border-top: 5px solid transparent;
}
.value-card:hover { transform: translateY(-10px); border-top-color: var(--primary); }
.v-icon {
    width: 60px; height: 60px; background: #fff4f5; color: var(--primary);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin-bottom: 20px;
}
.value-card h3 { font-size: 1.2rem; margin-bottom: 15px; color: var(--primary-dark); }
.value-card p { font-size: 0.9rem; color: #666; line-height: 1.6; }

/* 5. HİJYEN & BÖLGELER */
.hygiene-standards { padding: 100px 0; }
.h-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.region-list { list-style: none; margin: 30px 0; display: grid; grid-template-columns: 1fr; gap: 15px; }
.region-list li {
    background: #f8f9fa; padding: 15px; border-radius: 10px;
    font-size: 0.95rem; color: #555; display: flex; align-items: center; gap: 15px;
    border-left: 4px solid var(--primary-dark);
}
.region-list li i { color: var(--primary); font-size: 1.2rem; }
.region-list strong { color: var(--primary-dark); font-size: 1rem; }

.call-action-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--primary-dark); color: #fff;
    padding: 15px 40px; border-radius: 50px; font-weight: 700;
    text-decoration: none; transition: 0.3s;
}
.call-action-btn:hover { background: var(--primary); }

.h-img { position: relative; border-radius: 30px; overflow: hidden; height: 400px; }
.h-img img { width: 100%; height: 100%; object-fit: cover; }
.free-badge {
    position: absolute; top: 30px; right: 30px;
    background: #fff; color: var(--primary);
    padding: 10px 20px; font-weight: 800; border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* MOBİL UYARLAMA */
@media (max-width: 992px) {
    .story-grid, .h-grid { grid-template-columns: 1fr; }
    .stats-grid, .values-grid { grid-template-columns: 1fr 1fr; gap: 20px; } /* Mobilde ikili yap */
    .about-hero h1 { font-size: 2.5rem; }
    .img-wrapper, .h-img { height: 300px; }
    .story-img, .h-img { order: -1; /* Mobilde resim üstte olsun */ }
}
@media (max-width: 576px) {
    .stats-grid, .values-grid { grid-template-columns: 1fr; } /* Telefondan tekli */
}

/* =========================================
   İLETİŞİM SAYFASI TASARIMI
========================================= */

/* 1. HERO ALANI */
.contact-hero {
    position: relative;
    height: 40vh; /* Biraz daha kısa hero */
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: #fff;
    margin-top: 90px;
    background: #1d3557; /* Yüklenmezse lacivert kalsın */
}
.contact-hero .hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('img/bağlıcahaliyikama.webp') center/cover;
    opacity: 0.4; /* Resmi biraz kararttık */
}
.contact-hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 10px; }
.contact-hero p { font-size: 1.1rem; opacity: 0.9; }

/* 2. İLETİŞİM KARTLARI (GRID) */
.contact-info-section {
    padding: 80px 0 50px;

    position: relative;
}
.info-cards-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.c-card {
    background: #fff; padding: 40px 30px; border-radius: 20px;
    text-align: center; color: var(--primary-dark);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transition: 0.3s; text-decoration: none;
    border-bottom: 5px solid transparent;
}
.c-card:hover { transform: translateY(-10px); border-bottom-color: var(--primary); }

.c-icon {
    width: 70px; height: 70px; background: #f0f7ff; color: var(--primary);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin: 0 auto 20px;
}
.c-card h3 { font-size: 1.2rem; margin-bottom: 10px; font-weight: 700; }
.c-card p { font-size: 0.9rem; color: #666; margin-bottom: 15px; }
.c-card strong { display: block; font-size: 1.1rem; color: var(--primary-dark); }

/* 3. ANA BÖLÜM (FORM VE HARİTA) */
.contact-main-section { padding: 80px 0; background: #fff; }
.contact-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
}

/* Form Tasarımı */
.contact-form-wrapper {
    background: #fff; padding: 40px; border-radius: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}
.form-header { margin-bottom: 30px; }
.form-header h2 { font-size: 2rem; color: var(--primary-dark); margin-bottom: 10px; }
.form-header p { font-size: 0.95rem; color: #666; }

.modern-form .form-group { margin-bottom: 20px; }
.modern-form label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; color: #555; }

.input-with-icon { position: relative; }
.input-with-icon i {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: #999;
}
.input-with-icon input {
    width: 100%; padding: 15px 15px 15px 45px; /* İkon boşluğu */
    border: 1px solid #eee; border-radius: 10px;
    background: #fcfcfc; transition: 0.3s;
    font-family: var(--font);
}
.input-with-icon input:focus { border-color: var(--primary); background: #fff; outline: none; }

.modern-form textarea {
    width: 100%; padding: 15px; border: 1px solid #eee; border-radius: 10px;
    background: #fcfcfc; height: 120px; resize: none; font-family: var(--font);
}
.modern-form textarea:focus { border-color: var(--primary); outline: none; }

.submit-btn {
    width: 100%; background: var(--primary-dark); color: #fff;
    padding: 15px; border-radius: 50px; border: none; font-weight: 700;
    cursor: pointer; transition: 0.3s; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.submit-btn:hover { background: var(--primary); transform: translateY(-3px); }

/* Harita ve SEO Kutusu */
.contact-map-wrapper { display: flex; flex-direction: column; gap: 30px; }

.seo-info-box {
    background: #fff; padding: 30px; border-radius: 20px;
    border-left: 5px solid var(--primary);
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}
.seo-info-box h3 { font-size: 1.2rem; margin-bottom: 15px; color: var(--primary-dark); }
.seo-info-box h3 i { color: var(--primary); margin-right: 8px; }
.seo-info-box p { font-size: 0.95rem; line-height: 1.6; color: #555; margin-bottom: 20px; }

.working-hours {
    background: #f0f7ff; padding: 15px; border-radius: 10px;
    display: flex; justify-content: space-between; align-items: center;
    color: var(--primary-dark);
}

.map-frame {
    height: 400px; width: 100%; border-radius: 25px;
    overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.map-frame iframe { width: 100%; height: 100%; border: none; }

/* MOBİL UYARLAMA */
@media (max-width: 992px) {
    .info-cards-grid { grid-template-columns: 1fr; gap: 20px; } /* Kartlar alt alta */
    .contact-hero { height: 35vh; }
    .contact-split { grid-template-columns: 1fr; } /* Form ve harita alt alta */
    .contact-info-section { margin-top: -30px; } /* Mobilde çok yukarı çıkmasın */
    .contact-hero h1 { font-size: 2.2rem; }
    
    .c-card { padding: 30px 20px; }
    .contact-form-wrapper { padding: 30px 20px; }
}

/* =========================================
   BLOG SAYFASI TASARIMI
========================================= */

/* 1. HERO ALANI */
.blog-hero {
    position: relative;
    height: 40vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: #fff;
    margin-top: 90px;
    background: #1d3557;
}
.blog-hero .hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('img/alaçatlıhaliyikama.webp') center/cover;
    opacity: 0.3; /* Resmi biraz kararttık */
}
.blog-hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 10px; position: relative; z-index: 2; }
.blog-hero p { font-size: 1.1rem; opacity: 0.9; position: relative; z-index: 2; }

/* 2. BLOG GRID YAPISI */
.blog-main-section {
    padding: 80px 0;
    background: #fff;
}

.blog-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Yan Yana */
    gap: 30px;
    margin-bottom: 60px;
}

/* 3. BLOG KART TASARIMI */
.b-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.03);
    transition: 0.3s;
    display: flex; flex-direction: column;
}

.b-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* Resim Alanı */
.b-img {
    height: 220px;
    position: relative;
    overflow: hidden;
}
.b-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: 0.5s;
}
.b-card:hover .b-img img { transform: scale(1.1); }

/* Kategori Etiketi (Resmin Üstünde) */
.b-cat {
    position: absolute; bottom: 15px; left: 15px;
    background: var(--primary); color: #fff;
    padding: 6px 15px; border-radius: 50px;
    font-size: 0.75rem; font-weight: 700;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* İçerik Alanı */
.b-content { padding: 30px 25px; display: flex; flex-direction: column; flex-grow: 1; }

.b-date {
    font-size: 0.85rem; color: #999; margin-bottom: 15px;
    display: flex; align-items: center; gap: 8px;
}

.b-content h3 {
    font-size: 1.25rem; font-weight: 700; color: var(--primary-dark);
    margin-bottom: 15px; line-height: 1.4;
    transition: 0.3s;
}
.b-card:hover h3 { color: var(--primary); }

.b-content p {
    font-size: 0.95rem; color: #666; line-height: 1.6;
    margin-bottom: 25px; flex-grow: 1; /* Butonu en alta itmek için */
}

/* Devamını Oku Butonu */
.read-btn {
    font-weight: 700; color: var(--primary-dark);
    text-decoration: none; display: flex; align-items: center; gap: 8px;
    transition: 0.3s; font-size: 0.95rem;
}
.read-btn:hover { color: var(--primary); gap: 12px; }

/* 4. SAYFALAMA (PAGINATION) */
.pagination {
    display: flex; justify-content: center; gap: 10px;
}
.pagination a {
    width: 45px; height: 45px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--primary-dark);
    border-radius: 50%; text-decoration: none;
    font-weight: 700; border: 1px solid #eee; transition: 0.3s;
}
.pagination a:hover, .pagination a.active {
    background: var(--primary); color: #fff; border-color: var(--primary);
}

/* MOBİL UYARLAMA */
@media (max-width: 992px) {
    .blog-grid-layout { grid-template-columns: 1fr; /* Mobilde Tekli */ }
    .blog-hero h1 { font-size: 2.2rem; }
}

/* =========================================
   BLOG DETAY SAYFASI TASARIMI
========================================= */

/* Hero Alanı (Yazıya Özel) */
.post-hero {
    position: relative; height: 50vh;
    display: flex; align-items: flex-end; /* Yazı altta olsun */
    padding-bottom: 60px; color: #fff; margin-top: 90px;
}
.post-hero .hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    z-index: 0;
}
/* Görselin üstüne koyu degrade atalım ki beyaz yazı okunsun */
.post-hero::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    z-index: 1;
}
.post-header-content { position: relative; z-index: 2; }

.post-cat {
    background: var(--primary); color: #fff; padding: 5px 15px;
    border-radius: 50px; font-size: 0.8rem; font-weight: 700; letter-spacing: 1px;
    display: inline-block; margin-bottom: 15px;
}
.post-hero h1 { font-size: 3rem; margin-bottom: 15px; line-height: 1.2; }
.post-meta { display: flex; gap: 20px; font-size: 0.95rem; opacity: 0.9; }

/* İçerik Düzeni */
.post-body-section { padding: 60px 0; background: #fff; }
.post-grid {
    display: grid;
    grid-template-columns: 1fr 300px; /* Sol geniş, Sağ 300px */
    gap: 60px;
}

/* Tipografi ve Okuma Deneyimi */
.post-content { font-size: 1.1rem; line-height: 1.8; color: #444; }
.post-content p { margin-bottom: 25px; }
.post-content h2 { font-size: 1.8rem; color: var(--primary-dark); margin: 40px 0 20px; font-weight: 800; }
.post-content h3 { font-size: 1.4rem; color: #333; margin: 30px 0 15px; font-weight: 700; }
.lead { font-size: 1.25rem; font-weight: 500; color: #222; margin-bottom: 40px; }

/* Vurgu Kutuları (UI/UX) */
.alert-box {
    padding: 20px; border-radius: 10px; margin: 30px 0;
    display: flex; gap: 15px; align-items: start;
}
.alert-box.warning {
    background: #fff4f4; border-left: 5px solid var(--primary); color: #c0392b;
}
.alert-box i { font-size: 1.5rem; margin-top: 3px; }

.recipe-box {
    background: #f0f7ff; padding: 30px; border-radius: 15px;
    border: 2px dashed #cfe2ff; margin: 30px 0;
}
.recipe-box h4 { margin-top: 0; color: var(--primary-dark); }
.recipe-box ul { list-style: disc; padding-left: 20px; margin-bottom: 15px; }

/* Adım Listesi */
.step-list { list-style: none; counter-reset: my-counter; margin: 30px 0; }
.step-list li {
    position: relative; padding-left: 45px; margin-bottom: 15px;
}
.step-list li::before {
    counter-increment: my-counter;
    content: counter(my-counter);
    position: absolute; left: 0; top: 0;
    width: 30px; height: 30px;
    background: var(--primary-dark); color: #fff;
    border-radius: 50%; text-align: center; line-height: 30px;
    font-weight: 700; font-size: 0.9rem;
}

/* CTA Kutusu (Satış Odaklı) */
.cta-box {
    background: var(--primary-dark); color: #fff;
    padding: 40px; border-radius: 20px; text-align: center;
    margin: 50px 0;
    background-image: linear-gradient(135deg, var(--primary-dark) 0%, #2a4b7c 100%);
}
.cta-box h3 { color: #fff; margin-top: 0; }
.btn-cta {
    display: inline-block; background: var(--primary); color: #fff;
    padding: 12px 30px; border-radius: 50px; text-decoration: none;
    font-weight: 700; margin-top: 20px; transition: 0.3s;
}
.btn-cta:hover { background: #fff; color: var(--primary); }

/* SSS Alanı */
.faq-item {
    background: #f9f9f9; padding: 20px; border-radius: 10px; margin-bottom: 15px;
}
.faq-item h4 { color: var(--primary); margin: 0 0 10px; font-size: 1.1rem; }
.faq-item p { margin: 0; font-size: 0.95rem; }

/* SAĞ SIDEBAR (Sticky) */
.post-sidebar { position: sticky; top: 110px; height: fit-content; }

.toc-box {
    background: #f8f9fa; padding: 25px; border-radius: 15px;
    border-left: 4px solid var(--primary-dark); margin-bottom: 30px;
}
.toc-box h3 { font-size: 1.1rem; margin-top: 0; margin-bottom: 15px; }
.toc-box ul { list-style: none; padding: 0; }
.toc-box ul li { margin-bottom: 10px; }
.toc-box ul li a {
    text-decoration: none; color: #555; font-size: 0.95rem; transition: 0.3s;
}
.toc-box ul li a:hover { color: var(--primary); padding-left: 5px; }

.sidebar-offer {
    text-align: center; border: 1px solid #eee; border-radius: 15px; padding: 20px;
}
.sidebar-offer img { width: 100%; border-radius: 10px; margin-bottom: 15px; }
.sidebar-offer a {
    display: block; background: var(--primary); color: #fff;
    padding: 10px; border-radius: 5px; text-decoration: none; font-weight: 700;
}

/* MOBİL UYARLAMA */
@media (max-width: 992px) {
    .post-grid { grid-template-columns: 1fr; } /* Tek sütun */
    .post-sidebar { display: none; } /* Mobilde yan menüyü gizle */
    .post-hero h1 { font-size: 2rem; }
}

/* =========================================
   SIDEBAR MİNİ BLOG LİSTESİ
========================================= */
.sidebar-related-posts {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid #eee;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    margin-bottom: 30px;
}

.sidebar-related-posts h3 {
    font-size: 1.1rem;
    color: var(--primary-dark);
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* Tekil Kart Yapısı */
.mini-post-item {
    display: flex;
    gap: 15px;
    align-items: center;
    text-decoration: none;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f9f9f9;
    transition: 0.3s;
}

.mini-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mini-post-item:hover {
    transform: translateX(5px);
}

/* Küçük Resim */
.mini-img {
    width: 70px;
    height: 70px;
    flex-shrink: 0; /* Resmin ezilmesini engeller */
    border-radius: 10px;
    overflow: hidden;
}

.mini-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Yazı Alanı */
.mini-text {
    display: flex;
    flex-direction: column;
}

.mini-cat {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.mini-post-item h4 {
    font-size: 0.9rem;
    color: #444;
    margin: 0;
    line-height: 1.4;
    transition: 0.3s;
    font-weight: 600;
}

.mini-post-item:hover h4 {
    color: var(--primary);
}

/* Swiper Slider Düzenlemeleri */
.services-slider {
    padding-bottom: 50px; /* Alttaki noktalar için yer açalım */
}

.services-slider .swiper-slide {
    height: auto; /* Kartların boyu eşit olsun */
    display: flex;
    justify-content: center;
}

.services-slider .service-card {
    width: 100%;
    margin: 0; /* Slider içinde margin gerekmez */
}

/* =========================================
   HİZMETLER SLIDER - FİNAL (MOBİL ODAKLI / PC DÜZ)
========================================= */

.services-slider {
    /* Kartların gölgeleri kesilmesin diye boşluk */
    padding: 20px 0 60px 0 !important; 
    position: relative;
    overflow: hidden; 
}

.services-slider .swiper-slide {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    transition: transform 0.3s, opacity 0.3s; /* Geçişler yumuşak olsun */
}

/* Kartın Genel Ayarı */
.services-slider .service-card {
    width: 100%;
    margin: 0;
    height: 100%;
}

/* --- SADECE MOBİLDE ÇALIŞACAK EFEKTLER --- */
@media (max-width: 991px) {
    /* Mobilde kart yazılarını biraz küçült */
    .services-slider .service-card {
        font-size: 0.95rem; 
    }

    /* Mobilde aktif olmayan kartlar silik ve küçük olsun */
    .services-slider .swiper-slide:not(.swiper-slide-active) {
        transform: scale(0.9); /* Yanındakileri %10 küçült */
        opacity: 0.5; /* Yanındakileri silikleştir */
    }
}

/* --- NOKTALAR (KESİN VE NET ORTALAMA) --- */
.services-slider .swiper-pagination {
    position: absolute !important;
    bottom: 5px !important; /* En alttan 5px yukarıda */
    left: 0 !important;
    width: 100% !important; /* Ekranın boydan boya tamamını kapla */
    
    /* Flexbox ile İçerik Ortalama (EN GARANTİ YÖNTEM) */
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;
    
    z-index: 20;
    transform: none !important; /* Eski kaydırma kodlarını iptal et */
    margin: 0 !important;
    padding: 0 !important;
}

/* Noktaların Rengi */
.services-slider .swiper-pagination-bullet-active {
    background-color: #c0392b !important; /* Kırmızı */
    width: 25px; 
    border-radius: 5px;
    opacity: 1;
}

.services-slider .swiper-pagination-bullet {
    background-color: #999; /* Pasif noktalar gri olsun */
    opacity: 0.5;
    margin: 0 4px !important; /* Noktalar arası boşluk */
}

/* --- OKLAR (KIRMIZI) --- */
.services-slider .swiper-button-next,
.services-slider .swiper-button-prev {
    color: #c0392b !important; 
    background-color: #ffffff; 
    width: 45px; height: 45px; 
    border-radius: 50%; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    top: 50%;
    transform: translateY(-50%);
}

.services-slider .swiper-button-next:after,
.services-slider .swiper-button-prev:after {
    font-size: 18px !important;
    font-weight: bold;
}

/* Mobilde okları gizle */
@media (max-width: 768px) {
    .services-slider .swiper-button-next,
    .services-slider .swiper-button-prev {
        display: none; 
    }
}

/* =========================================
   SABİT BUTONLAR (FLOAT ACTIONS)
========================================= */

.float-btn {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 7000000000000000000; /* Her şeyin üstünde olsun */
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.float-btn:hover {
    transform: scale(1.1); /* Üzerine gelince büyüsün */
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* 1. WHATSAPP (Sağ En Alt) */
.wp-btn {
    bottom: 25px;
    right: 25px;
    background-color: #25d366;
    animation: pulse-green 2s infinite; /* Dikkat çekmek için yanıp sönsün */
}

/* 2. TELEFON (WhatsApp'ın Üstünde) */
.phone-btn {
    bottom: 100px; /* WP butonunun üstüne gelsin */
    right: 25px;
    background-color: #c0392b; /* Kırmızı ton */
}

/* 3. YUKARI ÇIK (Sol Alt) */
.top-btn {
    bottom: 25px;
    left: 25px;
    background-color: #333;
    opacity: 0; /* Başlangıçta gizli */
    visibility: hidden;
    transform: translateY(20px);
}

/* JS ile 'show' classı eklenince görünsün */
.top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mobilde butonlar birbirine girmesin diye biraz küçültelim */
@media (max-width: 768px) {
    .float-btn { width: 50px; height: 50px; font-size: 22px; }
    .wp-btn { bottom: 20px; right: 20px; }
    .phone-btn { bottom: 80px; right: 20px; }
    .top-btn { bottom: 20px; left: 20px; }
}

/* Animasyon (Nabız Efekti) */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* =========================================
   YENİ HİZMET BÖLGELERİ (RESİMLİ YAPI) - DÜZELTİLMİŞ
========================================= */

.regions-section-split {
    padding: 80px 0;
}

/* Ana Grid Yapısı */
.regions-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Yarı yarıya böl */
    gap: 50px;
    align-items: stretch; /* ÖNEMLİ: İki tarafın yüksekliğini eşitle */
}

/* Sol Taraf (Yazı) */
.regions-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Dikeyde ortalar */
    
    /* BU SATIR EKLENDİ: */
    align-items: flex-start; /* Yatayda sola yaslar ve butonun uzamasını engeller */
}

.regions-text-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 30px;
}

/* Liste Tasarımı */
.regions-clean-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
}

.regions-clean-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 500;
    color: #333;
}

.regions-clean-list li i {
    color: #0056b3;
    font-size: 1.1rem;
}

/* Vurgulu İlçeler */
.regions-clean-list li.highlight {
    color: #0056b3;
    font-weight: 700;
    background-color: #eef4ff;
    padding: 8px 12px;
    border-radius: 8px;
}

/* Buton */
.mt-30 { margin-top: 30px; }
.btn-with-icon { display: inline-flex; align-items: center; gap: 10px; }

/* --- SAĞ TARAF GÖRSEL (DÜZELTME BURADA) --- */
.regions-image-content {
    position: relative;
    height: 100%; /* Kapsayıcının tüm yüksekliğini al */
    min-height: 400px; /* İçerik az olsa bile resim en az bu kadar olsun */
}

.regions-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%; /* İçeriği tamamen doldur */
    border-radius: 20px;
    overflow: hidden; /* Taşmaları gizle */
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.regions-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ÖNEMLİ: Resmi bozmadan kutuya yay */
    object-position: center; /* Resmi ortala */
    display: block; /* Alt boşluğu siler */
}

/* Resim Üzerindeki Sarı Rozet */
.service-badge {
    position: absolute;
    bottom: 20px; /* Alttan boşluk */
    left: 20px;   /* Soldan boşluk */
    background: #ffc107; /* Sarı */
    color: #212529;
    padding: 12px 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* Gölgeyi artırdık */
    z-index: 2;
    max-width: 80%; /* Mobilde taşmasın */
}

.service-badge i {
    font-size: 1.8rem;
}

.service-badge div {
    display: flex;
    flex-direction: column;
}

.service-badge strong {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
}

.service-badge span {
    font-size: 0.85rem;
}

/* Mobil Ayarlar */
@media (max-width: 991px) {
    .regions-split-grid {
        grid-template-columns: 1fr; /* Alt alta */
        gap: 40px;
    }
    
    .regions-text-content {
        text-align: center;
        order: 1; /* Yazı üstte */
    }

    .regions-image-content {
        order: 2; /* Resim altta */
        height: 300px; /* Mobilde resim yüksekliği */
        min-height: auto;
    }

    .regions-clean-list {
        display: inline-grid;
        text-align: left;
    }
}

/* =========================================
   MOBİL İÇİN ORTALAMA DÜZELTMESİ
========================================= */

/* =========================================
   MOBİL İÇİN HİZALAMA DÜZELTMESİ (İP GİBİ DİZİLİŞ)
========================================= */

@media (max-width: 991px) {
    
    /* 1. Liste kutusunu ekranın ortasına al ama içini sola yasla */
    .regions-clean-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 Sütun */
        
        /* Kutu içeriği kadar genişlesin ve ortalansın */
        width: fit-content !important; 
        margin: 20px auto 30px auto !important; 
        
        text-align: left !important; /* İçindeki metinler soldan başlasın */
        gap: 15px 30px !important; /* Aralarındaki boşluk */
    }

    /* 2. Her bir satırı (İkon + Yazı) sola sabitle */
    .regions-clean-list li {
        display: flex !important;
        justify-content: flex-start !important; /* ÖNEMLİ: Sola yasla */
        align-items: center !important;
        width: 100% !important;
    }
    
    /* İkonların genişliğini sabitleyelim ki yazılar tam hizalı başlasın */
    .regions-clean-list li i {
        width: 20px; /* İkon alanı sabit olsun */
        text-align: center;
        margin-right: 5px;
    }
}



/* 4. Mobilde Kapsayıcı Hizalaması (Garanti) */
@media (max-width: 991px) {
    .regions-text-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Her şeyi göbeğe topla */
    }
    
    /* Butonun üstündeki boşluğu ayarla */
    .mt-30 { 
        margin-top: 25px !important; 
    }
}

/* =========================================
   TÜM BLOG KARTLARINI (ANASAYFA + BLOG) TIKLANABİLİR YAPMA
========================================= */

/* Hem Ana Sayfa (.blog-card) hem Blog Sayfası (.post-item) */
.blog-card, 
.post-item { 
    position: relative !important; /* Hayalet link buna göre hizalanacak */
    cursor: pointer !important; /* El işareti çıksın */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Üzerine gelince her ikisi de hafif kalksın */
.blog-card:hover, 
.post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* "Devamını Oku" linkinin hayaletini TÜM KARTA yay */
.blog-card .read-more::after,
.post-item .read-more::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* En üstte durup tıklamayı yakalasın */
}

/* Tıklayınca yazı rengi değişsin (Görsel geri bildirim) */
.blog-card:hover .read-more,
.post-item:hover .read-more {
    color: #c0392b; /* Kırmızı ton */
    text-decoration: underline;
}

/* =========================================
   BLOG KARTLARI BOYUT VE HİZALAMA DÜZELTMESİ
========================================= */

/* 1. Kapsayıcı Link: Izgaradaki (Grid) tüm yüksekliği kaplasın */
.b-card-link {
    height: 100% !important; 
    display: flex !important; /* İçindeki kartın esnemesini sağlar */
}

/* 2. Kartın Kendisi: Esnek kutu olsun ve dikeyde uzasın */
.b-card {
    width: 100%;
    height: 100%; /* Linkin tüm boyunu al */
    display: flex !important;
    flex-direction: column !important; /* İçerikleri alt alta diz */
}

/* 3. İçerik Alanı: Resmin altındaki beyaz alan */
.b-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1; /* Kartın geri kalan tüm boşluğunu bu alan kaplasın */
    height: 100%; 
}

/* 4. Butonu En Alta İtme (Sihirli Dokunuş) */
.b-content .read-btn {
    margin-top: auto !important; /* Üstteki her şeyden kaçıp en dibe yapışır */
    align-self: flex-start; /* Sola yaslı kalsın */
}

/* 5. Yazıların altındaki boşluğu düzenle */
.b-content p {
    margin-bottom: 20px !important; /* Yazı ile buton arasına garanti boşluk */
}

/* =========================================
   DAHA BÜYÜK RESİM / DAHA KOMPAKT YAZI
========================================= */

/* 1. Resim Alanını Yükselt */
.b-card .b-img {
    height: 260px !important; /* Resmi uzattık (Eskiden muhtemelen 200px civarıydı) */
    flex-shrink: 0; /* Resim asla büzüşmesin */
}

/* 2. Resim içindeki görselin ayarı */
.b-card .b-img img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important; /* Resim uzayınca bozulmasın, kutuya otursun */
}

/* 3. Yazı Alanını Sıkılaştır (Kompakt Görünüm) */
.b-content {
    padding: 20px 20px 25px 20px !important; /* İç boşlukları azalttık */
    justify-content: space-between; /* İçerik ve butonu uçlara it */
}

/* 4. Başlık ve Paragraf Aralarını Açma (Daha temiz görünüm) */
.b-content h3 {
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

.b-content p {
    font-size: 0.95rem !important; /* Yazı fontunu bir tık küçültüp kibarlaştıralım */
    margin-bottom: 15px !important;
    line-height: 1.5 !important;
    
    /* İstersen yazıyı 3 satırla sınırlamak için şu 3 satırı açabilirsin: */
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 3; */
    /* -webkit-box-orient: vertical; */
    /* overflow: hidden; */
}

/* 5. Butonun duruşunu koru */
.b-content .read-btn {
    margin-top: auto !important;
    padding-top: 10px !important; /* Butonun üstüne biraz nefes payı */
}
/* =========================================
   RESİM TİTREMESİNİ KESİN ÖNLEME (MASK)
========================================= */

/* 1. Kapsayıcı: Maskeleme Tekniği */
.b-card .b-img {
    position: relative;
    overflow: hidden !important; 
    border-radius: 15px 15px 0 0; 
    
    /* İŞTE SİHİRLİ KOD BU: */
    /* Bu kod, tarayıcıya sınırları pixel pixel kilitler */
    -webkit-mask-image: -webkit-radial-gradient(white, black); 
    mask-image: radial-gradient(white, black);
    
    transform: translateZ(0); /* Ekstra sağlamlama */
}

/* 2. Resim: Sadece Transform Değişsin */
.b-card .b-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    
    /* Animasyon ayarı */
    transition: transform 0.5s ease-in-out !important; /* Yumuşak giriş çıkış */
    transform-origin: center center;
    
    /* Tarayıcıya önceden haber ver (Titremeyi engeller) */
    will-change: transform; 
    
    /* Gereksiz 3D kodlarını temizledik, basit tutuyoruz */
    transform: scale(1); 
}

/* 3. Hover (Zoom) Efekti */
.b-card-link:hover .b-img img {
    transform: scale(1.1); /* %10 Büyüt */
}

/* =========================================
   HİZMET KARTLARINI (SLIDER) TIKLANABİLİR YAPMA
========================================= */

/* 1. Kartı referans noktası yap ve imleci değiştir */
.service-card {
    position: relative !important; /* Hayalet link buna göre hizalanacak */
    cursor: pointer !important; /* Mouse ile üzerine gelince el işareti çıksın */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Yumuşak geçiş */
}

/* 2. Kartın üzerine gelince hafif yukarı kalksın (Tıklanabilir hissi verir) */
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Gölgeyi biraz artır */
}

/* 3. Butonun rengini karta hover olunca değiştir */
.service-card:hover .service-btn {
    background-color: var(--primary); /* Varsa senin mavi rengin */
    color: #fff;
    border-color: var(--primary);
}

/* 4. "Daha Fazla" butonunun hayaletini TÜM KARTA yay */
.service-card .service-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Kartın üzerini kaplasın */
}

/* --- İKİZ BUTONLAR & MOBİL İKON DÜZELTMESİ --- */

.hero-buttons {
    display: flex;
    gap: 15px; /* İki buton arası boşluk */
    margin-top: 30px;
}

/* Ortak Kalıp (İkisi de Birebir Aynı Boyutta Olacak) */
.btn-hero {
    display: inline-flex; /* İçerikleri hizalar */
    align-items: center;
    justify-content: center;
    gap: 10px; /* Yazı ve İkon arası boşluk */
    
    padding: 14px 35px; /* Dolgunluk */
    border-radius: 50px; /* Tam yuvarlak kenarlar */
    
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase; /* Yazılar büyük harf olsun */
    letter-spacing: 0.5px;
    
    transition: all 0.3s ease;
    border: 2px solid transparent; /* Kenarlık payı */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Hafif gölge */
}

/* Kırmızı Buton (Hemen Ara) */
.btn-red {
    background-color: #d63031;
    color: white;
    border-color: #d63031;
}

.btn-red:hover {
    background-color: transparent;
    color: #d63031;
}

/* Yeşil Buton (WhatsApp) */
.btn-green {
    background-color: #25D366;
    color: white;
    border-color: #25D366;
}

.btn-green:hover {
    background-color: transparent;
    color: #25D366;
}



/* --- MOBİL AYARLARI (İkon Sorunu Çözümü) --- */
@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column; /* Alt alta dizilsin */
        width: 100%;
        gap: 15px;
    }

    .btn-hero {
        width: 100%; /* Tam genişlik */
        padding: 15px 20px; /* Mobilde tık alanı geniş olsun */
    }

    /* İkonları Mobilde Zorla Göster */
    .btn-hero i {
        display: inline-block !important; /* Asla gizlenmesin */
        font-size: 18px; /* İkon boyutu */
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Mobil Sabit Bar Tasarımı */
.mobile-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    display: flex;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 9999;
    display: none; /* Bilgisayarda gizli, mobilde açacağız */
}

.sticky-btn {
    flex: 1; /* İki butonu eşit böl */
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
}

.sticky-btn.call {
    background-color: #d63031; /* Kırmızı */
    color: white;
}

.sticky-btn.whatsapp {
    background-color: #25D366; /* Yeşil */
    color: white;
}

/* Sadece Mobilde Göster */
@media (max-width: 768px) {
    .mobile-sticky-bar {
        display: flex;
    }
    /* Mobilde sağ alttaki yuvarlak butonları gizleyelim ki çakışmasın */
    .float-btn {
        display: none !important; 
    }
}

/* =========================================
   MOBİL BUTONLARI EŞİTLEME VE HİZALAMA
========================================= */

@media (max-width: 768px) {
    /* 1. Kapsayıcı: Izgara Sistemi */
    .hero-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Tam ortadan ikiye böl */
        gap: 15px !important; /* Aralarına net boşluk */
        width: 100% !important;
        padding: 0 !important;
        
        /* ÖNEMLİ: İçindeki elemanları dikeyde aynı hizaya getir */
        align-items: center !important; 
    }

    /* 2. Butonların Kendisi */
    .hero-buttons .btn {
        width: 100% !important; 
        min-width: 0 !important;
        height: 45px !important; /* İkisinin de boyu milimetrik aynı olsun */
        
        /* İŞTE ÇÖZÜM BU SATIRDA: */
        margin: 0 !important; /* Gizli kaydırma boşluklarını SIFIRLA */
        transform: none !important; /* Yukarı/aşağı kaymaları iptal et */
        
        padding: 0 !important;
        font-size: 14px !important; 
        font-weight: 600 !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50px !important;
    }

    /* 3. İkonları gizle (Temiz görünüm için) */
    .hero-buttons .btn i {
        display: none !important; 
    }
}

/* =========================================
   HİZMETLER SLIDER - MOBİL TAM OTURMA AYARI
========================================= */

@media (max-width: 767px) {
    /* 1. Slider Kapsayıcısına kenar boşluğu ver */
    .services-slider {
        padding-left: 15px !important; /* Soldan boşluk */
        padding-right: 15px !important; /* Sağdan boşluk */
        box-sizing: border-box !important;
    }

    /* 2. Kartın genişliğini %100 yap (Ekrana tam otursun) */
    .services-slider .swiper-slide {
        width: 100% !important; /* Artık daraltma yok, tam genişlik */
        opacity: 1 !important; /* Silikleşme efektini iptal et, hepsi net olsun */
        transform: none !important; /* Küçülme efektini iptal et */
    }
    
    /* Yanındaki kartlar görünmesin, sadece aktif olan odakta kalsın */
    .services-slider .service-card {
        box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important; /* Gölgeyi hafiflet */
    }
}

/* =========================================
   HAKKIMIZDA FOTOĞRAFI - KOMPAKT MOBİL AYARI
========================================= */

@media (max-width: 991px) {
    
    /* 1. Kapsayıcı: Sütun yapısı */
    .story-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* 2. Resim Çerçevesi: Sabit ve Kısa Yükseklik */
    .story-img .img-wrapper {
        width: 100% !important;
        height: 220px !important; /* Yüksekliği sabitledik, ekranı kaplamaz */
        min-height: 0 !important; /* Eski kısıtlamayı kaldır */
        aspect-ratio: auto !important; /* Oranı serbest bırak */
        border-radius: 15px !important; /* Kenarları yuvarla */
        margin-bottom: 25px !important; /* Altındaki yazıya yapışmasın */
        overflow: visible !important; /* Rozet dışarı taşabilsin */
    }

    /* 3. Resim: Çerçevenin içini doldur */
    .story-img .img-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Resmi kutuya yay (sündürme) */
        object-position: center 20% !important; /* Resmin biraz üst kısmına odaklan */
        border-radius: 15px !important;
    }

    /* 4. Kırmızı Rozet: Daha Küçük ve Köşede */
    .experience-box {
        width: auto !important;
        padding: 10px 15px !important;
        bottom: -15px !important; /* Hafif dışarı sarksın */
        right: 15px !important; /* Sağ köşeye yasla */
        left: auto !important;
        transform: scale(0.85) !important; /* Mobilde %15 küçült, kaba durmasın */
        z-index: 10;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    
    /* Rozet içi yazı ayarı */
    .experience-box .years { font-size: 1.5rem !important; line-height: 1; }
    .experience-box .text { font-size: 0.7rem !important; line-height: 1.2; }
}

/* =========================================
   İSTATİSTİKLER BÖLÜMÜ - MOBİL 2'Lİ DÜZEN
========================================= */

@media (max-width: 768px) {
    /* 1. Kapsayıcıyı 2 Sütunlu Izgara Yap */
    .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Ekranı tam ortadan ikiye böl */
        gap: 30px 15px !important; /* Dikeyde 30px, Yatayda 15px boşluk */
        padding: 40px 15px !important; /* Kenar boşluklarını ayarla */
    }

    /* 2. Her bir istatistik kutusunun ayarı */
    .stat-item {
        margin-bottom: 0 !important; /* Eski alt boşlukları sıfırla */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* 3. İkon Boyutunu Mobilde Biraz Küçült (Daha kibar dursun) */
    .stat-item i {
        font-size: 2rem !important;
        margin-bottom: 10px !important;
    }

    /* 4. Sayıların Boyutu */
    .stat-item .counter {
        font-size: 1.8rem !important; /* Mobilde aşırı büyük olmasın */
        margin-bottom: 5px !important;
    }

    /* 5. Yazıların Boyutu */
    .stat-item p {
        font-size: 0.9rem !important;
        white-space: nowrap !important; /* Yazı tek satırda kalsın */
    }
}

/* =========================================
   MOBİL DOKUNMA VE HAREKET AYARLARI
========================================= */

/* 1. Tıklayınca çıkan MAVİ RENK (Highlight) iptali */
* {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

/* 2. Telefonda kaydırırken resimlerin HAREKET ETMESİNİ (Animasyonu) durdur */
@media (max-width: 991px) {
    /* "data-aos" özelliği olan her şeyi sabitle */
    [data-aos] {
        opacity: 1 !important; /* Hepsi görünür olsun (silik gelmesin) */
        transform: none !important; /* Sağa sola yukarı aşağı kaymasın */
        transition: none !important; /* Yavaşça gelmesin, direkt dursun */
    }
    
    /* Eğer animasyon gecikmesi varsa onu da sıfırla */
    [data-aos-delay] {
        transition-delay: 0s !important;
    }
}

/* =========================================
   FOOTER İLETİŞİM MOBİL DÜZELTMESİ
========================================= */

@media (max-width: 768px) {
    /* 1. Satırı Esnek Kutu Yap ve Ortala */
    .contact-row {
        display: flex !important;
        justify-content: center !important; /* İkon ve yazıyı yanyana ortaya topla */
        align-items: flex-start !important; /* Yazı 2 satır olursa ikon yukarıda kalsın */
        gap: 15px !important; /* İkon ile yazı arasına ideal boşluk */
        text-align: left !important; /* Yazı bloğu sola hizalı olsun (Okuması kolay) */
        width: 100% !important;
        padding: 0 20px !important; /* Kenarlardan taşmasın */
    }

    /* 2. İkon Ayarı */
    .contact-row i {
        margin: 0 !important; /* Gereksiz kenar boşluklarını sil */
        margin-top: 4px !important; /* İkonu yazının ilk satırıyla aynı hizaya getir */
        flex-shrink: 0 !important; /* İkon asla büzüşmesin/kaybolmasın */
        width: 20px; /* Sabit genişlik */
        text-align: center;
    }

    /* 3. Yazı Ayarı */
    .contact-row span {
        flex: 1 !important; /* Kalan alanı doldur */
        max-width: 300px; /* Çok fazla yayılmasın */
        line-height: 1.4 !important;
    }
}

/* Logo Resim Ayarı */
.logo-img {
    height: 115px; /* Logonun yüksekliği. İhtiyaca göre 50px-80px arası yapabilirsin */
    width: auto;  /* Genişlik otomatik ayarlansın, logo sünmesin */
    display: block;
    object-fit: contain; /* Resim bozulmadan alana sığsın */
}

/* Mobilde logo çok büyük durursa diye önlem */
@media (max-width: 768px) {
    .logo-img {
        height: 80px; /* Mobilde biraz daha küçültelim */
    }
}

/* --- GÜNCELLENMİŞ MOBİL DÜZENLEMESİ (İkon Ortalama & Geniş Buton) --- */
@media (max-width: 768px) {
    
    /* 1. Maddeleri Sıkılaştır ve Hizala */
    .about-features li {
        margin-bottom: 12px !important;
        align-items: center !important; /* Yazı ile ikonu dikeyde ortala */
        display: flex !important;
    }

    /* 2. Yuvarlak İkonları TAM ORTALA (Kritik Düzeltme) */
    .about-features li i {
        display: flex !important; /* Flex kutusu yap */
        align-items: center !important; /* Dikey ortala */
        justify-content: center !important; /* Yatay ortala */
        
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
        flex-shrink: 0;
        margin-right: 15px !important;
        padding: 0 !important; /* Fazlalık dolguları sıfırla */
    }

    /* 3. Başlık ve Yazı Ayarları */
    .about-features li div strong {
        font-size: 16px !important;
        display: block;
        margin-bottom: 3px;
    }
    .about-features li div small {
        font-size: 13px !important;
        line-height: 1.4;
        display: block;
    }

    /* 4. BUTONLARI DAHA GENİŞ YAP (Yan Yana) */
    .about-content .btn-primary, 
    .about-content .btn-primary-wp {
        width: 49% !important; /* Genişliği %49 yap (Toplam %98 eder) */
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 13px !important;
        font-weight: 700 !important;
        padding: 15px 5px !important; /* İç dolguyu artırarak daha tok göster */
        margin-top: 20px !important;
        white-space: nowrap;
        gap: 6px;
        float: left;
        border-radius: 50px; /* Tam yuvarlak kenarlar */
    }

    /* İlk butona (Kırmızı) sağdan %2 boşluk ver */
    .about-content .btn-primary {
        margin-right: 2% !important;
    }
    
    /* Buton ikon ayarı */
    .about-content .btn i, 
    .about-content .btn-primary-wp i {
        font-size: 15px !important;
        margin: 0 !important;
    }
    
    /* Temizlik */
    .about-content::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* --- SSS BÖLÜMÜNDEKİ WHATSAPP BUTONU --- */

.cta-wp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #25D366; /* WhatsApp Yeşili */
    color: white;
    padding: 15px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    margin-top: 15px; /* Üstteki butonla arasına boşluk */
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
}

.cta-wp-btn i {
    font-size: 20px;
}

/* --- YORUMLAR ALTI İKİLİ ROZET (TIKLAMA SORUNU GİDERİLDİ) --- */

/* 1. Kapsayıcı: EN ÜSTE ÇIKAR (Kritik Kısım) */
.badges-wrapper {
    position: relative; /* Katman sırasına gir */
    z-index: 999; /* En üstte dur (Önüne bir şey geçemesin) */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 50px;
    flex-wrap: wrap;
}

/* 2. Genel Kutu Stili */
.review-badge {
    background: white;
    padding: 10px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    min-width: 210px;
    transition: transform 0.3s ease;
    
    /* Tıklamayı Garantile */
    position: relative; 
    z-index: 1000; 
}

/* 3. WhatsApp Butonu Özel Ayarları */
a.whatsapp-style { /* 'a' etiketi olduğunu belirttik */
    text-decoration: none;
    cursor: pointer !important; /* El işareti çıksın */
    border: 2px solid transparent;
    display: flex !important; /* Yapıyı koru */
}

/* İkon Kutusu */
.wp-icon-box {
    font-size: 32px;
    color: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Metin Ayarları */
.badge-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Yazıları sola yasla */
}

.badge-text strong {
    display: block;
    font-size: 16px;
    color: #333;
    line-height: 1.2;
}

.badge-text span {
    font-size: 12px;
    color: #666;
}

.wp-label {
    font-weight: 800;
    color: #25D366;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* Mobil Ayarı */
@media (max-width: 768px) {
    .badges-wrapper {
        gap: 15px;
        flex-direction: column;
        z-index: 9999; /* Mobilde de en üstte olsun */
    }
    .review-badge {
        width: 90%; 
        justify-content: center; 
    }
}

/* =========================================
   MOBİL İÇİN BUTONLARI KUTUYA SIĞDIRMA (DÜZELTME)
========================================= */

@media (max-width: 768px) {

    /* 1. Kutunun kendisiyle oynamıyoruz, sadece taşmayı gizle diyoruz */
    .hero-card {
        padding-bottom: 40px !important; /* Alt boşluğu biraz kıstık */
        height: auto !important; /* Yükseklik serbest */
        min-height: auto !important;

    }

    /* 2. Başlık ve Yazıların kapladığı alanı biraz azaltalım ki butonlara yer kalsın */
    .hero-card h1 {
        font-size: 1.6rem !important;
        margin-bottom: 20px !important; /* Alt boşluğu azalttık */
    }

    .hero-card p {
        font-size: 1rem !important;
        margin-bottom: 20px !important; /* Alt boşluğu azalttık */
        line-height: 1.3 !important;
    }

    /* 3. BUTON GRUBU AYARI */
    .hero-buttons {
        display: flex !important;
        flex-direction: row !important; /* Yan yana olsunlar */
        align-items: center !important;
        justify-content: space-between !important; /* Kutuya yay */
        gap: 8px !important; /* Aralarındaki boşluk 8px olsun */
        width: 100% !important;
        margin-top: 5px !important;
        margin-bottom: 15px !important;
    }

    /* 4. BUTONLARI KÜÇÜLT (Sığdırma Operasyonu) */
    /* Hem kırmızı hem yeşil butonu hedefliyoruz */
    .hero-buttons .btn,
    .hero-buttons a { 
        width: 48% !important; /* İkisi de %48 genişlikte olsun */
        padding: 20px 0 !important; /* İç dolguyu azalttık */
        height: 40px !important; /* Yüksekliği azalttık */
        font-size: 15px !important; /* Yazı puntosunu düşürdük */
        border-radius: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important; /* Yazı alt satıra kaymasın */
    }

    /* İkonları mobilde biraz küçültelim */
    .hero-buttons i {
        font-size: 12px !important;
        margin-right: 4px !important;
    }

    /* =========================================
   HAKKIMIZDA BÖLÜMÜ MOBİL GENİŞLETME (FİNAL)
========================================= */

@media (max-width: 768px) {

    /* 1. YUVARLAK İKONLARI KOMPAKT YAP (Yazıya yer aç) */
    .about-features li i {
        width: 38px !important;  /* 45px'den 38px'e düşürdük */
        height: 38px !important;
        font-size: 16px !important; /* İkonu da küçülttük */
        margin-right: 10px !important; /* Aradaki boşluğu azalttık */
        flex-shrink: 0; /* İkonun ezilmesini engelle */
    }

    /* Yazı alanı artık daha geniş */
    .about-features li div {
        width: 100%;
    }

    /* 2. BUTONLARI VE YAZILARI SIĞDIR */
    .about-content .btn-primary, 
    .about-content .btn-primary-wp {
        width: 49% !important; /* Genişliği koru */
        font-size: 12px !important; /* Yazı puntosunu 13'ten 11'e çektik (KRİTİK HAMLE) */
        padding: 12px 2px !important; /* İç boşluğu iyice kıstık */
        height: 42px !important; /* Yüksekliği sabitledik */
        letter-spacing: -0.3px; /* Harfleri hafifçe birbirine yaklaştır */
        
        /* İçerikleri ortala */
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important; /* İkon ile yazı arası boşluk */
    }

    /* Buton ikonlarını biraz küçült */
    .about-content .btn i, 
    .about-content .btn-primary-wp i {
        font-size: 12px !important;
    }
}

/* =========================================
   SİYAH TIKLAMA GÖLGESİNİ KALDIRMA (KESİN ÇÖZÜM)
========================================= */

/* Tüm sitedeki o gri/siyah tıklama efektini yok et */
* {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

/* WhatsApp ve Arama butonlarına basınca sadece hafif koyulaşsın (Siyahlaşmasın) */
.btn, .btn-primary, .btn-primary-wp, 
.hero-buttons a, .about-content a, .float-btn {
    transition: transform 0.1s ease, background-color 0.2s ease !important;
}

.btn:active, .btn-primary:active, 
.hero-buttons a:active, .float-btn:active {
    transform: scale(0.95) !important; /* Tıklayınca çok hafif içine göçsün */
    /* Siyah renk yerine kendi renginin koyusunu verebilirsin ama şimdilik gerek yok */
}

/* =========================================
   YÜZEN BUTONLARI GERİ GETİRME VE AYARLAMA
========================================= */

/* 1. Tüm Butonların Genel Ayarı */
.float-btn {
    position: fixed;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    display: flex; /* Flex olmazsa ikon ortalanmaz */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 10000 !important; /* HER ŞEYİN ÜSTÜNDE OLSUN */
    transition: 0.3s;
    cursor: pointer;
}

/* 2. Butonların Konumları (Bilgisayar İçin) */
.wp-btn {
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
}

.phone-btn {
    bottom: 100px; /* WP'nin üstünde */
    right: 30px;
    background-color: #c0392b; /* Kırmızı */
}

.top-btn {
    bottom: 30px;
    left: 30px;
    background-color: #333;
    opacity: 0; /* Başlangıçta gizli */
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* JS ile 'show' sınıfı eklenince görünür */
.top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 3. MOBİL AYARLARI (KRİTİK KISIM) */
/* Mobilde alttaki yapışkan menünün üzerine çıkmaları lazım */
@media (max-width: 768px) {
    
    /* Butonları mobilde GİZLEME, GÖSTER! */
    .float-btn {
        display: flex !important; 
        width: 45px; /* Mobilde biraz daha küçük */
        height: 45px;
        font-size: 20px;
    }

    /* WhatsApp Butonu (Alttaki menüye değmesin diye yukarı alıyoruz) */
    .wp-btn {
        bottom: 90px !important; /* 80px yukarı kalktı */
        right: 20px !important;
    }

    /* Telefon Butonu (WP'nin üstüne) */
    .phone-btn {
        bottom: 150px !important; /* WP'nin üstüne çıktı */
        right: 20px !important;
    }

    /* Yukarı Çık Butonu (Sol tarafta, menünün üstünde) */
    .top-btn {
        bottom: 90px !important;
        left: 20px !important;
    }
}

   
}