/* Genel Ayarlar */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #e8f0f2; /* Güven veren mavi tonları */
            color: #333;
            line-height: 1.6;
        }
        a {
            text-decoration: none;
            color: inherit;
        }

        /* Header */
        header {
            background-color: #4CAF50; /* Güven veren yeşil tonları */
            color: #fff;
            padding: 20px 10px;
            text-align: center;
        }
        header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        /* Ana İçerik */
        .main-content {
            padding: 40px 20px;
            text-align: center;
        }
        .services {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
            margin-top: 25px;
        }
        .service {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .service img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-radius: 10px;
        }
        .service h3 {
            margin-top: 15px;
            font-size: 1.2rem;
            font-weight: 700;
            color: #4CAF50;
        }
        .service p {
            font-size: 1rem;
            margin-top: 10px;
        }
        .service:hover {
            transform: translateY(-10px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        /* Hizmet Detayları */
        .service-details {
            background-color: #f4f4f4;
            padding: 20px;
            border-radius: 10px;
            margin-top: 15px;
            font-size: 1rem;
            color: #555;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .service-details p {
            margin-top: 10px;
            line-height: 1.5;
        }
        .service-details a {
            color: #4CAF50;
            font-weight: 600;
        }

        /* Mobil Uyumlu */
        @media (max-width: 768px) {
            header h1 {
                font-size: 1.8rem;
            }
            .services {
                grid-template-columns: 1fr;
            }
        }

        /* WhatsApp Butonu */
        .whatsapp {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #25D366;
            color: white;
            padding: 15px;
            border-radius: 50%;
            font-size: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s;
        }
        .whatsapp:hover {
            background-color: #128C7E;
        }

        /* Footer */
        footer {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 40px;
        }
        footer p {
            font-size: 0.9rem;
        }

        /* Bilgi Mesajı */
        .info-message {
            background-color: #FFEB3B;
            color: #333;
            padding: 20px;
            font-size: 1rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 30px;
            border-radius: 5px;
        }

        /* Hakkımda */
        .about {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            margin-top: 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        .about h2 {
            font-size: 2rem;
            margin-bottom: 15px;
            color: #4CAF50;
        }
        .about p {
            font-size: 1.1rem;
            color: #555;
            margin-bottom: 10px;
        }

        .about .certification {
            font-weight: bold;
            color: #4CAF50;
        }

        .before-after h2 {
            font-size: 2rem;
            color: #4CAF50;
            margin-bottom: 20px;
            text-align: center;
        }
        .before-after .services {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }
        .before-after .service {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        /* İletişim */
        .contact-info {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            margin-top: 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        .contact-info h2 {
            font-size: 2rem;
            margin-bottom: 15px;
            color: #4CAF50;
        }
        .contact-info p {
            font-size: 1.1rem;
            margin-bottom: 10px;
        }
        .contact-info a {
            font-size: 1.1rem;
            color: #4CAF50;
            text-decoration: underline;
        }
        .contact-info a:hover {
            color: #2e7d32;
        }

        .float{
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 40px;
            right: 40px;
            background-color: #25d366;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            font-size: 30px;
            box-shadow: 2px 2px 3px #999;
            z-index: 100;
        }

        .my-float{
            margin-top: 16px;
        }
        
        .float-instagram {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 120px; /* Instagram butonunu biraz daha yukarıya yerleştiriyoruz */
    right: 40px;
    background-color: #E1306C; /* Instagram'ın kırmızımsı rengi */
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.my-float {
    margin-top: 16px;
}

/* Mobil İçin Slider Özelliği */
@media (max-width: 768px) {
    /* "Öncesi ve Sonrası" başlıklarının görünmesini sağlıyoruz */
    .before-after h2 {
        font-size: 2rem;
        color: #4CAF50;
        margin-bottom: 20px;
        text-align: center;
    }

    /* Kaydırma alanını sadece görsellerle sınırlıyoruz */
    .before-after .services {
        display: flex; /* Flexbox ile yatay düzen */
        overflow-x: auto; /* Yatay kaydırma */
        gap: 10px; /* Aralarındaki boşluğu ayarlıyoruz */
        scroll-snap-type: x mandatory; /* Yatay kaydırmayı zorunlu hale getiriyoruz */
        padding-bottom: 20px; /* Alt kısımda kaydırma çubuğunun çıkmaması için boşluk bırakıyoruz */
        position: relative; /* Ok simgeleri için pozisyonu relative yapıyoruz */
    }

    .before-after .service {
        flex: 0 0 auto; /* Her öğenin genişliği auto olacak */
        max-width: 100%; /* Genişlik sınırlama */
        scroll-snap-align: start; /* Görsellerin doğru hizalanmasını sağlamak için */
        box-sizing: border-box;
    }

    .before-after .service img {
        width: 100%; /* Görsellerin tamamını kapsaması için */
        height: 100%; /* Görsellerin yüksekliklerini de sınırlıyoruz */
        object-fit: cover;
        border-radius: 10px;
    }

    /* Yatay kaydırma çubuğu gizleme (isteğe bağlı) */
    .before-after::-webkit-scrollbar {
        display: none;
    }

    /* "Öncesi ve Sonrası" yazılarının görünmesini engelle */
    .before-after .service h3 {
        display: none;
    }

    /* Kaydırma alanında sağ ve sol ok simgeleri */
    .before-after .scroll-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2rem;
        color: #4CAF50;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        padding: 10px;
        cursor: pointer;
        z-index: 10;
    }

    .before-after .scroll-left {
        left: 10px; /* Sol ok */
    }

    .before-after .scroll-right {
        right: 10px; /* Sağ ok */
    }

    /* Gölgeleme ekleyerek kaydırılabilir alanı belirginleştirmek */
    .before-after .services::before,
    .before-after .services::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(255,255,255,0) 80%);
        z-index: 5;
    }

    .before-after .services::before {
        left: 0;
    }

    .before-after .services::after {
        right: 0;
        transform: scaleX(-1); /* Sağ tarafın da ters çevrilmesi */
    }
}