@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900');

/* Global Reset ve Box Sizing Ayarı */
*, *::before, *::after {
    box-sizing: border-box;
}

/* html ve body için max-width ekleyerek yatay taşmaları kesinlikle engelliyoruz */
html, body {
    margin: 0;
    padding: 0;
    max-width: 100vw;
    overflow-x: hidden; /* Genel yatay taşmaları önler */
}

/* Body Stili - Yeni kod entegrasyonu (orijinal kodla karşılaştırıldığında bazı özellikler override edilmiştir) */
body {
    /* Arka plan isteğe bağlı; gradient kapatma örneği: */
    background: #f0f8ff;
    height: calc(100vh - 60px);
    font-family: "Source Sans Pro", sans-serif;
    color: #151515;
}

    /* Genel Başlık ve Link Ayarları */
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
    }

    a {
        color: #007bff;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    /* --- Ana Slider --- */
    .slider {
        height: 100vh;
        width: 100%;
        margin-top: 0; /* Header’a sıfırlamak için */
        position: relative;
        padding-top: 70px; /* Header yüksekliği kadar boşluk bırak */
        overflow: hidden;
    }

    .slider .list .item {
        position: absolute;
        inset: 0;
        overflow: hidden;
        opacity: 0;
        transition: 0.5s;
    }

    .slider .list .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slider .list .item::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background-image: linear-gradient(to top, #000 25%, transparent);
    }

    .slider .list .item .content {
        position: absolute;
        left: 10%;
        top: 20%;
        width: 500px;
        max-width: 80%;
        z-index: 1;
    }

    .slider .list .item .content p:nth-child(1) {
        text-transform: uppercase;
        letter-spacing: 10px;
    }

    .slider .list .item .content h2 {
        font-size: 100px;
        margin: 0;
    }

    .slider .list .item.active {
        opacity: 1;
        z-index: 10;
    }

    @keyframes showContent {
        to {
            transform: translateY(0);
            filter: blur(0);
            opacity: 1;
        }
    }

    .slider .list .item.active p:nth-child(1),
    .slider .list .item.active h2,
    .slider .list .item.active p:nth-child(3) {
        transform: translateY(30px);
        filter: blur(20px);
        opacity: 0;
        animation: showContent 0.5s 0.7s ease-in-out 1 forwards;
    }

    .slider .list .item.active h2 {
        animation-delay: 1s;
    }

    .slider .list .item.active p:nth-child(3) {
        animation-duration: 1.3s;
    }

    .arrows {
        position: absolute;
        top: 30%;
        right: 50px;
        z-index: 100;
    }

    .arrows button {
        background-color: rgba(238, 238, 238, 0.35);
        border: none;
        font-family: monospace;
        width: 40px;
        height: 40px;
        border-radius: 5px;
        font-size: x-large;
        color: #eee;
        transition: 0.5s;
    }

    .arrows button:hover {
        background-color: #eee;
        color: black;
    }

    .thumbnail {
        position: absolute;
        bottom: 50px;
        z-index: 11;
        display: flex;
        gap: 10px;
        width: 100%;
        height: 200px; /* Yükseklik küçültüldü */
        padding: 0 50px;
        box-sizing: border-box;
        overflow: auto;
        justify-content: center;
    }

    .thumbnail::-webkit-scrollbar {
        width: 0;
    }

    .thumbnail .item {
        width: 150px;
        height: 180px; /* Öğelerin yüksekliği uyumlu olacak şekilde küçültüldü */
        filter: brightness(0.5);
        transition: 0.5s;
        flex-shrink: 0;
        position: relative;
    }

    .thumbnail .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    .thumbnail .item.active {
        filter: brightness(1.5);
    }

    .thumbnail .item .content {
        position: absolute;
        bottom: 10px;
        left: 10px;
        color: #fff;
        font-size: 14px;
    }

    /* --- Slogan Alanı (Orijinal Kod) --- */
    .slogan {
        background: linear-gradient(135deg, #2ee77d 0%, #28a745 100%);
        text-align: center;
        padding: 100px 20px;
        color: #fff;
        animation: fadeIn 1s ease-in-out;
        overflow: hidden;
        position: relative;
    }

    .slogan::before {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        top: -50%;
        left: -50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 10%, transparent 50%);
        animation: backgroundMove 10s linear infinite;
    }

    @keyframes backgroundMove {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .slogan h2 {
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: 20px;
        text-shadow: 3px 3px 8px rgba(0,0,0,0.3);
        animation: fadeInText 1.5s ease-in-out;
    }

    .slogan p {
        font-size: 3.5rem;
        font-weight: 700;
        margin: 0;
        position: relative;
        display: inline-block;
        background-color: #fff;
        color: #000;
        padding: 10px 20px;
        border-radius: 8px;
        text-shadow: none;
        animation: fadeInText 1.5s ease-in-out;
    }

    .slogan .words {
        display: inline-block;
        position: relative;
        overflow: hidden;
        vertical-align: bottom;
        height: 60px;
        width: 220px;
        text-align: left;
        animation: changewords 7s infinite;
    }

    .slogan .word {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
    }

    .slogan .word:nth-of-type(1) {
        color: #DE6449;
        animation: changewordfirst 7s infinite;
    }
    .slogan .word:nth-of-type(2) {
        color: #791E94;
        animation: changewordsecond 7s infinite;
    }
    .slogan .word:nth-of-type(3) {
        color: #41D3BD;
        animation: changewordthird 7s infinite;
    }
    .slogan .word:nth-of-type(4) {
        color: #41D3BD;
        animation: changewordfourth 7s infinite;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInText {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* --- Yeni: Entegre Edilen Slogan Kodu ---
         Yeni HTML yapısındaki <div class="container"><div class="slogan">...</div></div>
         yapısına uyum sağlayacak ek stiller. */
    .container {
        display: flex;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        /* Mobilde taşmayı engellemek için */
        overflow-x: hidden;
    }

    .container .slogan {
        max-width: 600px;
        padding: 8px 15px;
        background: #FFFFF3;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 0 45px 0 #6e2e72;
    }

    .container p {
        display: block;
        font-weight: 700;
        font-size: 3em;
        position: relative;
        text-align: center;
        transition: all 0.3s ease-in-out;
    }

    /* Birleştirilmiş .words stili (orijinal + yeni) */
    .slogan .words,
    .container .words {
        display: inline-block;
        position: relative;
        overflow: hidden;
        vertical-align: bottom;
        height: 60px; /* Orijinal yüksekliği korundu */
        width: 220px; /* Orijinal genişlik tercih edildi */
        text-align: left;
        animation: changewords 7s infinite;
    }

    /* Birleştirilmiş .word stili */
    .slogan .word,
    .container .word {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
    }

    .slogan .word:nth-of-type(1),
    .container .word:nth-of-type(1) {
        color: #DE6449;
        animation: changewordfirst 7s infinite;
    }
    .slogan .word:nth-of-type(2),
    .container .word:nth-of-type(2) {
        color: #791E94;
        animation: changewordsecond 7s infinite;
    }
    .slogan .word:nth-of-type(3),
    .container .word:nth-of-type(3) {
        color: #41D3BD;
        animation: changewordthird 7s infinite;
    }
    .slogan .word:nth-of-type(4),
    .container .word:nth-of-type(4) {
        color: #41D3BD;
        animation: changewordfourth 7s infinite;
    }

    @keyframes changewordfirst {
        0% { width: 180px; }
        16.5% { width: 180px; }
        25% { width: 0; }
        93.75% { width: 0; }
        100% { width: 180px; }
    }
    @keyframes changewordsecond {
        0% { width: 0; }
        25% { width: 0; }
        33% { width: 195px; }
        50% { width: 195px; }
        58.25% { width: 0; }
        100% { width: 0; }
    }
    @keyframes changewordthird {
        0% { width: 0; }
        58.25% { width: 0; }
        66% { width: 145px; }
        85% { width: 145px; }
        93.75% { width: 0; }
        100% { width: 0; }
    }
    @keyframes changewordfourth {
        0% { width: 195px; }
        16.5% { width: 195px; }
        25% { width: 0; }
        93.75% { width: 0; }
        100% { width: 195px; }
    }

    @keyframes changewords {
        0% { width: 180px; }
        16.5% { width: 180px; }
        25% { width: 0; }
        33% { width: 195px; }
        50% { width: 195px; }
        58.25% { width: 0; }
        66% { width: 135px; }
        85% { width: 135px; }
        93.75% { width: 0; }
        100% { width: 180px; }
    }




    @media (max-width: 768px) {
        .container {
            padding: 0 10px;
            overflow-x: hidden;
        }

        .container p {
            font-size: 2em;
            text-align: center;
        }

        .slogan .words,
        .container .words {
            height: 50px; /* Daha küçük ekran için hafif küçültme */
            width: 160px; /* Mobilde daha dar */
            top: 48% !important;
        }

        .slogan .word,
        .container .word {
            font-size: 1em; /* Gerekirse küçültülebilir */
        }

        @keyframes changewordfirst {
            0% { width: 65px; }
            16.5% { width: 65px; }
            25% { width: 0; }
            93.75% { width: 0; }
            100% { width: 65px; }
        }
        @keyframes changewordsecond {
            0% { width: 0; }
            25% { width: 0; }
            33% { width: 75px; }
            50% { width: 75px; }
            58.25% { width: 0; }
            100% { width: 0; }
        }
        @keyframes changewordthird {
            0% { width: 0; }
            58.25% { width: 0; }
            66% { width: 65px; }
            85% { width: 65px; }
            93.75% { width: 0; }
            100% { width: 0; }
        }
        @keyframes changewordfourth {
            0% { width: 65px; }
            16.5% { width: 65px; }
            25% { width: 0; }
            93.75% { width: 0; }
            100% { width: 65px; }
        }
        @keyframes changewords {
            0% { width: 65px; }
            16.5% { width: 65px; }
            25% { width: 0; }
            33% { width: 75px; }
            50% { width: 75px; }
            58.25% { width: 0; }
            66% { width: 55px; }
            85% { width: 55px; }
            93.75% { width: 0; }
            100% { width: 65px; }
        }
    }

    /* --- Ürünlerimizi Keşfedin --- */
    .product-discovery {
        padding: 60px 20px;
        background-color: #ffffff;
        text-align: center;
    }
    .product-discovery h2 {
        font-size: 2.5rem;
        color: #007bff;
        margin-bottom: 40px;
        position: relative;
    }
    .product-discovery h2::after {
        content: '';
        width: 150px;
        height: 4px;
        background-color: #2ee77d;
        display: block;
        margin: 20px auto 0;
        border-radius: 2px;
    }
    .product-discovery-container {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
    }
    .product-image img {
        width: 100%;
        max-width: 400px;
        height: auto;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    .product-image img:hover {
        transform: scale(1.05);
    }
    .product-description {
        background-color: #2ee77d;
        color: #fff;
        padding: 30px;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 300px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: background-color 0.3s ease;
    }
    .product-description:hover {
        background-color: #28a745;
    }
    .product-description h3 {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    .product-description p {
        font-size: 1rem;
        margin-bottom: 25px;
        line-height: 1.6;
    }
    .learn-more-button {
        background-color: #ffffff;
        color: #2ee77d;
        padding: 12px 25px;
        border-radius: 50px;
        font-weight: 700;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
        width: fit-content;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .learn-more-button:hover {
        background-color: #2ee77d;
        color: #ffffff;
        transform: translateY(-5px);
    }

    /* --- Müşteri Yorumları --- */
    .testimonials {
        padding: 60px 20px;
        background: linear-gradient(120deg, #f9f9f9 0%, #ffffff 100%);
        text-align: center;
        position: relative;
        overflow-x: hidden;
    }
    .testimonials h2 {
        font-size: 2.5rem;
        color: #007bff;
        margin-bottom: 40px;
        position: relative;
    }
    .testimonials h2::after {
        content: '';
        width: 120px;
        height: 4px;
        background-color: #2ee77d;
        display: block;
        margin: 20px auto 0;
        border-radius: 2px;
    }
    .testimonials-swiper {
        width: 80%;
        margin: 0 auto;
    }
    .testimonial {
        position: relative;
        background-color: #ffffff;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        min-width: 250px;
        text-align: left;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        margin: 20px 10px;
    }
    .testimonial::before {
        content: "\f10d";
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 30px;
        color: #28a745;
        opacity: 0.1;
    }
    .testimonial:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    }
    .testimonial p {
        font-style: italic;
        color: #555;
        margin-bottom: 25px;
        line-height: 1.6;
    }
    .testimonial h4 {
        color: #007bff;
        font-weight: 700;
    }
    .testimonial-images {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 15px;
    }
    .testimonial-images .testimonial-image {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid #ddd;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        transition: transform 0.3s ease;
        cursor: pointer;
    }
    .testimonial-images .testimonial-image:hover {
        transform: scale(1.1);
    }

    /* --- Firmalar (Partners) Slider --- */
    .partners {
        padding: 40px 20px;
        background-color: #ffffff;
        text-align: center;
    }
    .partners h2 {
        font-size: 2rem;
        color: #007bff;
        margin-bottom: 20px;
    }
    .partners-swiper {
        width: 80%;
        margin: 0 auto;
        height: 100px;
    }
    .partner-logo {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .partner-logo img {
        max-width: 100px;
        height: auto;
        object-fit: contain;
        filter: grayscale(100%);
        transition: filter 0.3s ease;
    }
    .partner-logo img:hover {
        filter: grayscale(0%);
    }

    /* --- Ürünler Slider --- */
    .products {
        padding: 60px 20px;
        background-color: #007bff;
        text-align: center;
      }
      .products h2 {
        font-size: 3rem;
        color: #ffffff;
        margin-bottom: 40px;
        position: relative;
    }
    .products h2::after {
        content: '';
        width: 150px;
        height: 4px;
        background-color: #2ee77d;
        display: block;
        margin: 20px auto 0;
        border-radius: 2px;
    }

      /* Swiper konteyner */
      .product-swiper {
        width: 100%;
        height: 400px;             /* slider yüksekliği */
      }

      /* Her bir slide */
      .product-swiper .swiper-slide {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
      }

      /* Ürün resmi */
      .product-swiper .swiper-slide img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 20px;
        transition: transform 0.3s ease;
      }
      .product-swiper .swiper-slide img:hover {
        transform: scale(1.05);
      }

      /* Ürün başlığı */
      .product-swiper .swiper-slide h3 {
        font-size: 1.6rem;
        color: #007bff;
        margin: 10px 0;
        text-align: center;
      }

      /* Kısa açıklama */
      .product-swiper .swiper-slide p {
        font-size: 0.9rem;
        color: #555;
        text-align: center;
        flex-grow: 1;
      }

      /* Navigasyon butonları */
      .product-swiper .swiper-button-next,
      .product-swiper .swiper-button-prev {
        color: #007bff;
      }
      .product-swiper .swiper-button-next:hover,
      .product-swiper .swiper-button-prev:hover {
        color: #0056b3;
      }

/* --- Mobil Görünüm Düzenlemeleri --- */
@media (max-width: 576px) {
    .products {
      padding: 40px 10px;     /* Daha dar yan boşluk */
    }
    .product-swiper {
      height: auto;           /* Slider yüksekliğini içeriğe bırak */
      padding-bottom: 20px;   /* Alt boşluk */
    }
    .product-swiper .swiper-slide {
      padding: 15px;          /* İçerik padding’ini küçült */
      margin: 0 8px;          /* Slide kenar boşlukları */
      /* kart içeriğinin taşmasını engelle */
      overflow: hidden;

      min-height: 350px; /* Sabit kart yüksekliği */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .product-swiper .swiper-slide img {
        height: 180px;
        object-fit: cover; /* zaten vardı ama garanti olsun */
        flex-shrink: 0; /* Görsel küçülmesin */
      }
      .product-swiper .swiper-slide h3 {
        font-size: 1.4rem;
        margin-top: 10px;
        margin-bottom: 8px;
      }
      .product-swiper .swiper-slide p {
        font-size: 0.85rem;
        margin-top: 8px;
        line-height: 1.3;
        flex-grow: 1; /* Açıklama boşluğu esnetsin */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
    .product-swiper .swiper-button-next,
    .product-swiper .swiper-button-prev {
      top: 50%;
      bottom: 10px;           /* Okları alta al */
      color: #007bff;
    }
    .product-swiper .swiper-button-next { right: 10px; }
    .product-swiper .swiper-button-prev { left: 10px; }
  }


    /* --- Başarı Hikayeleri --- */
    .case-studies {
        padding: 80px 20px;
        background-color: #f0f8ff;
        text-align: center;
        overflow-x: hidden;
        overflow-y: hidden;
    }
    .case-studies h2 {
        font-size: 2.8rem;
        color: #007bff;
        margin-bottom: 60px;
        position: relative;
    }
    .case-studies h2::after {
        content: '';
        width: 150px;
        height: 4px;
        background-color: #2ee77d;
        display: block;
        margin: 20px auto 0;
        border-radius: 2px;
    }
    .case-studies-swiper {
        width: 80%;
        margin: 0 auto;
        height: 550px;
        overflow: hidden;
    }
    .case-study {
        height: 100%;
        background-color: #ffffff;
        padding: 40px;
        border-radius: 15px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
        text-align: left;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .case-study img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 10px;
        margin-bottom: 25px;
        transition: transform 0.3s ease;
    }
    .case-study img:hover {
        transform: scale(1.05);
    }
    .case-study h3 {
        font-size: 1.8rem;
        color: #007bff;
        margin-bottom: 15px;
    }
    .case-study p {
        font-size: 1rem;
        color: #555;
        margin-bottom: 25px;
        line-height: 1.6;
    }
    .read-more {
        display: inline-block;
        color: #007bff;
        text-decoration: none;
        font-weight: 700;
        transition: color 0.3s ease;
    }
    .read-more:hover {
        color: #0056b3;
    }

        .case-studies-swiper .swiper-pagination {
        margin-top: 30px; /* veya istediğin kadar */
        position: relative; /* Eğer absolute olursa fazla kayar, relative daha doğal */
    }

    @media (max-width: 576px) {
        .case-studies {
            padding: 50px 10px; /* Yan boşlukları daraltalım */
        }

        .case-studies h2 {
            font-size: 2.2rem; /* Başlığı küçültelim */
            margin-bottom: 40px;
        }

        .case-studies h2::after {
            width: 100px; /* Alt çizgiyi biraz kısaltalım */
            height: 3px;
        }

        .case-studies-swiper {
            width: 95%; /* Mobilde slider genişliğini artırıp neredeyse tam yapalım */
        }

        .case-study {
            padding: 20px; /* Kart içi boşlukları azaltalım */
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .case-study img {
            height: 150px; /* Görsel yüksekliğini küçültelim */
            margin-bottom: 15px;
        }

        .case-study h3 {
            font-size: 1.5rem; /* Başlık boyutu küçülsün */
            margin-bottom: 10px;
        }

        .case-study p {
            font-size: 0.9rem; /* Paragraf fontu küçülsün */
            margin-bottom: 20px;
            line-height: 1.4;
        }

        .read-more {
            font-size: 0.9rem; /* "Detaylı İncele" yazısını biraz küçültelim */
        }

        .case-studies-swiper .swiper-pagination {
            margin-top: 20px; /* Mobilde pagination biraz daha yakına gelsin */
        }
    }


    /* --- Sıkça Sorulan Sorular --- */
    .faq {
        padding: 80px 20px;
        background-color: #ffffff;
        text-align: center;
    }
    .faq h2 {
        font-size: 2.8rem;
        color: #007bff;
        margin-bottom: 60px;
        position: relative;
    }
    .faq h2::after {
        content: '';
        width: 150px;
        height: 4px;
        background-color: #2ee77d;
        display: block;
        margin: 20px auto 0;
        border-radius: 2px;
    }
    .faq-item {
        max-width: 800px;
        margin: 0 auto 40px auto;
        text-align: left;
        border-bottom: 2px solid #ddd;
        padding-bottom: 25px;
        transition: background-color 0.3s ease;
        cursor: pointer;
    }
    .faq-item:hover {
        background-color: #f9f9f9;
    }
    .faq-item h3 {
        font-size: 1.5rem;
        color: #007bff;
        position: relative;
        padding-right: 30px;
    }
    .faq-item h3::after {
        content: '+';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.8rem;
        transition: transform 0.3s ease;
    }
    .faq-item.open h3::after {
        transform: translateY(-50%) rotate(45deg);
    }
    .faq-item p {
        display: none;
        padding: 20px 0 0 0;
        color: #555;
        font-size: 1rem;
        line-height: 1.6;
    }
    .faq-item.open p {
        display: block;
        animation: slideDown 0.3s ease-in-out;
    }
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* --- Responsive Düzenlemeler --- */

    /* 992px ve altı ekranlar için */
    @media (max-width: 992px) {
        .slogan-stats {
            gap: 30px;
        }
        .product-swiper {
            padding: 30px 0;
        }
        .product-card img,
        .case-study img {
            height: 180px;
        }
        /* Mobil uyumluluk eklemeleri */
        .testimonials h2 {
            font-size: 2rem;
        }
        .case-studies h2 {
            font-size: 2.2rem;
        }
    }

    /* 768px ve altı ekranlar için (mobil) */
    @media (max-width: 768px) {
        /* Genel container padding'ini azaltarak sayfanın taşmasını önlüyoruz */
        .container {
            padding: 0 15px;
        }
        /* Slider içeriğinde genişlik ve konumlandırmayı mobil için optimize ediyoruz */
        .slider .list .item .content {
            left: 5%;
            width: 90%;
        }
        .slogan h2 {
            font-size: 2.5rem;
        }
        .slogan p {
            display: inline-flex !important;
            align-items: center !important;
            line-height: 1.2 !important; /* gerekirse ayarlayın */
            gap: 0.5rem;                  /* DISCOVER ile kelimeler arası boşluk */
          }

          /* .words kapsayıcısını da flex konteyner yapıp ortala */
          .slogan .words {
            display: inline-block !important;  /* İçeriğe göre boylanır */
            max-width: none       !important;  /* Zorlayıcı üst sınır kaldırıldı */
            overflow: hidden      !important;  /* Animasyon daralmaları kırpar */
            padding: 0 2.5px !important;
          }

          /* .word öğeleri absolute kalacaktır; sadece vertical-align bozulmasın diye ekliyoruz */
          .slogan .word {
            vertical-align: middle !important;
          }


        .slogan {
            padding: 40px 10px;
        }
        .testimonial p {
            font-size: 0.9rem;
        }
        .testimonial h4 {
            font-size: 1rem;
        }
        .testimonial {
            margin: 15px 5px;
            padding: 20px;
        }
        .testimonials .add-testimonial-btn {
            top: 10px;
            right: 10px;
        }
        .arrows button {
            width: 30px;
            height: 30px;
            font-size: 1.2rem;
        }
        /* Ürün ve case-study alanlarının dar ekranlarda alt alta gelmesini sağlıyoruz */
        .product-discovery-container,
        .case-studies-swiper {
            flex-direction: column;
            gap: 20px;
        }
        /* Thumbnail padding ayarını mobil için azaltıyoruz */
        .thumbnail {
            padding: 0 15px;
        }
    }

    /* Çok küçük ekranlar (max-width: 480px) için */
    @media (max-width: 480px) {
        .container p,
        .slogan p {
            font-size: 1.1rem;
        }
        .slogan {
            padding: 40px 10px;
        }
        .product-description h3 {
            font-size: 1.4rem;
        }
        .learn-more-button {
            padding: 8px 20px;
            font-size: 0.8rem;
        }
    }

    /* Yorum Ekle Butonu */
    .testimonials .add-testimonial-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        background-color: #2ee77d;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.3s ease, transform 0.2s ease;
    }
    .testimonials .add-testimonial-btn:hover {
        background-color: #28a745;
        transform: scale(1.05);
    }

    /* Modal Genel Stil */
    .custom-modal {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        justify-content: center;
        align-items: center;
    }
    .custom-modal-content {
        background-color: white;
        padding: 25px;
        border-radius: 10px;
        width: 90%;
        max-width: 500px;
        position: relative;
        text-align: center;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        animation: fadeIn 0.3s ease-in-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    /* Modal Kapat Butonu */
    .custom-modal .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 20px;
        cursor: pointer;
        color: #555;
        transition: color 0.3s ease;
    }
    .custom-modal .close-btn:hover {
        color: #000;
    }
    /* Form Stilleri */
    .custom-modal form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .custom-modal label {
        text-align: left;
        display: block;
        font-weight: bold;
        color: #333;
    }
    .custom-modal input,
    .custom-modal textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 14px;
    }
    .custom-modal input:focus,
    .custom-modal textarea:focus {
        outline: none;
        border-color: #2ee77d;
        box-shadow: 0px 0px 5px rgba(46, 231, 125, 0.5);
    }
    .custom-modal .submit-btn {
        background-color: #2ee77d;
        color: white;
        border: none;
        padding: 12px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.3s ease, transform 0.2s ease;
    }
    .custom-modal .submit-btn:hover {
        background-color: #28a745;
        transform: scale(1.05);
    }
    .custom-modal-content h3 {
        text-align: center;
        color: black;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .custom-modal form label {
        text-align: left;
        display: block;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }

    /* === Yorum Başarı Mesajı === */
    .success-message {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: rgba(46, 231, 125, 0.9);
        color: white;
        padding: 15px 25px;
        font-size: 18px;
        font-weight: bold;
        border-radius: 8px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        animation: fadeInOut 3s ease-in-out;
    }
    @keyframes fadeInOut {
        0% { opacity: 0; transform: translateY(20px); }
        20% { opacity: 1; transform: translateY(0); }
        80% { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(-20px); }
    }

    /* Resim önizleme alanı (Yorum Ekle Modal) */
    #imagePreviewContainer {
        display: flex;
        gap: 10px;
        margin-top: 10px;
        flex-wrap: wrap;
    }
    .image-preview {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: 5px;
        border: 2px solid #ddd;
    }
    .image-wrapper {
        position: relative;
        display: inline-block;
    }
    .remove-image {
        position: absolute;
        top: -5px;
        right: -5px;
        background: red;
        color: white;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
        line-height: 18px;
        font-weight: bold;
    }

    /* Başarı hikayesi resimlerini yan yana dizmek için */
    .success-story-images {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .success-story-images img {
        max-width: 150px;
        max-height: 100px;
        object-fit: cover;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    /* === Yeni: Resim Büyütme Modal (Zoom) === */
    .image-modal {
        display: none;
        position: fixed;
        z-index: 2000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
    }
    .image-modal-close {
        position: absolute;
        top: 30px;
        right: 40px;
        color: #fff;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.3s;
    }
    .image-modal-close:hover {
        color: #ccc;
    }
    .image-modal-content {
        margin: auto;
        display: block;
        max-width: 90%;
        max-height: 90%;
        border: 3px solid #fff;
        border-radius: 6px;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }

    .swiper-slide.case-study,
    .swiper-slide.testimonial {
        height: 350px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }