/* CSS FILE: styles.css */
body {
    margin: 40px;
   
    color: #2f426a;
    background-color: #ffffff;
    font-family:initial;

}
/* Animasyon için başlangıç durumu */
/* Animasyon başlangıç durumu */
.animate-right {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s ease-out;
}

.animate-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s ease-out;
}

/* Animasyon görünür olduğunda */
.animate-active {
    opacity: 1;
    transform: translateX(0);
}

.top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 20px;
}

.logo img {
    height: 60px;
}

.social-menu-container {
    display: flex;
    align-items: center;
}

.social-media-icons {
    margin-right: 20px;
}

.social-media-icons a {
    margin-right: 15px;
    display: inline-block;
}

.social-media-icons img {
    height: 25px;
    width: 25px;
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.social-media-icons a:hover img {
    filter: grayscale(0%);
}

.menu {
    color: #000000;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

.menu-icon {
    font-size: 1.5em;
    margin-left: 5px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #2f426a;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    list-style: none;
    padding: 10px;
    margin: 0;
    z-index: 10;
}

.dropdown-menu li {
    padding: 10px 15px;
    border-bottom: 1px solid #e5e5e5; /* İnce çizgi ekleme */

}
.dropdown-menu li:last-child {
    border-bottom: none; /* Son öğede çizgi olmasın */
}

.dropdown-menu li a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s;
}

.dropdown-menu li a:hover {
    background-color: #f0c040;
}

.menu:hover .dropdown-menu {
    display: block;
}
.submenu {
    display: none;
    position: absolute;
    right: 100%; /* Sol tarafta açılmasını sağlamak için kullanıldı */
    top: 0;
    background-color: #2f426a;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    list-style: none;
    padding: 10px;
    margin: 0;
    z-index: 10;
    width: 200px; /* Alt menünün genişliğini artırdık */
}

.dropdown-item:hover .submenu {
    display: block;
}
.submenu li {
    padding: 10px 15px;
    border-bottom: 1px solid #e5e5e5; /* Alt menü öğelerine ince çizgi ekleme */
}
.submenu li:last-child {
    border-bottom: none; /* Alt menünün son öğesinde çizgi olmasın */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #2f426a;
    border-radius: 15px;
    color: #ffffff;
}

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

.nav-links {
    list-style: none;
}

.nav-links li {
    margin: 0;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #f0c040;
}

.scroll-down {
    display: flex;
    align-items: center;
}

.scroll-link {
    margin-right: 10px;
    font-size: 1.1em;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.scroll-link:hover {
    color: #f0c040;
}

.mouse-icon {
    margin-right: 40px;
    height: 60px;
    width: 60px;
}
/* Mobil ve Tablet cihazlar için medya sorguları */
@media screen and (max-width: 768px) {
    /* Header ve Top Container */
    .top-container {
        display: flex;
        justify-content: space-between; /* Logo sola, ikonlar sağa */
        align-items: center;
        flex-direction: row; /* Yatay düzen */
    }
    .logo {
        margin-right: 0; /* Ekstra boşluk bırakmasın */
    }

    .logo img {
        height: 50px;
    }

    .social-menu-container {
        margin-top: 2%;
        display: flex;
        align-items: center;
        margin-left: auto; /* Sağ tarafa yaslar */
    }

    .social-media-icons {
        margin-bottom: 10px;
    }

    .social-media-icons a {
        margin: 5px;
    }

    /* Menü için */
    .menu {
        margin-top: -20px;
    }

    .dropdown-menu {
        width: 100%; /* Mobilde genişliği tam ekran yap */
        font-size: 0.85em;
        padding: 10px;
        text-align: left;
    }

    .menu:hover .dropdown-menu {
        display: block;
    }

    .submenu {
        width: 100%; /* Alt menü genişliği */
        padding: 5px;
    }

    .dropdown-item:hover .submenu {
        display: block;
    }

    .scroll-down {
        display: none; /* "Kaydır" yazısı ve ikonunu gizle */
    }

    /* Nav Links */
    .nav-links {
        flex-direction: column;
        text-align: center;
        margin-left: -5%;
    }

    .nav-links li {
        margin: 10px 0;
    }

    .nav-links a {
        font-size: 1em;
    }

    /* Genel Header */
    header {
        flex-direction: column;
        padding: 10px;
    }
}
/* başlangıç */






.tekrarinsani{
    background-color: rgb(194, 194, 194);
    height: 150px;
    margin-top: 4%;
    margin-bottom: 10%;
    width: 100%;
    text-align: center;
    border-radius: 10px;

    /* Yeni eklemeler: Flexbox özellikleri */
    display: flex; /* Flexbox kullanarak elemanları düzenle */
    justify-content: center; /* Yatayda ortala */
    align-items: center; /* Dikeyde ortala */
    
}
.tekrarinsani p{
    
    font-size: 50px;
    color: rgb(97, 59, 59);
    font-family: "Quicksand", sans-serif;
    text-align: center;
   

}




.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Resim ve yazı arasını eşit yapar */
    padding: 20px;
    border-radius: 10px;
    flex-wrap: wrap; /* Küçük ekranlarda alt alta dizilmesi için */
    max-width: 1200px; /* Sayfanın maksimum genişliğini belirler */
    margin: 0 auto; /* Merkezi hizalama */
}

/* Sol Bölüm */
.left-section {
    background-color: #4d2c23; /* Kahverengi arka plan */
    width: 30%; /* Sol tarafın genişliği */
    max-width: 350px; /* Sol bölümün maksimum genişliğini sınırlar */
    min-width: 200px; /* Çok küçük ekranlarda daha daralmamasını sağlar */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    writing-mode: vertical-rl; /* Yazıyı dikey hale getirir */
    text-orientation: upright;
    color: white;
    padding: 20px; /* İç boşluk */
    border-radius: 10px; /* Köşeleri yuvarlatır */
}

/* Sağ Bölüm */
.right-section {
    flex: 1;
    margin-left: 20px; /* Sol taraf ile sağ taraf arasına boşluk ekler */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.right-section p {
    padding: 20px;
    font-family: "Quicksand", sans-serif;
    background-color: #4d2c23;
    font-size: 20px; /* Yazı boyutunu biraz küçülttük */
    color: #ffffff;
    line-height: 1.5;
    border-radius: 10px; /* Arka plan kutusunun köşeleri yuvarlatıldı */
    margin-bottom: 20px;
}

.right-section .images-container {
    display: flex;
    flex-direction: row; /* Resimleri yan yana hizalar */
    justify-content: flex-start;
    flex-wrap: wrap; /* Küçük ekranlarda alt alta geçiş sağlar */
    gap: 10px; /* Resimler arasında boşluk */
    margin-top: 20px;
}

.right-section .images-container img {
    width: 300px; /* Resim genişliği */
    max-width: 100%; /* Daha dar ekranlarda %100'e kadar küçülür */
    height: auto; /* Oranı korur */
    object-fit: cover; /* Görselin kesilmesini engeller */
    border-radius: 5px; /* Köşeleri yuvarlatır */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Gölge efekti */
}

/* Masaüstü ve Laptop */
@media (min-width: 1024px) and (max-width: 1440px) {
    .container {
        flex-direction: row;
        justify-content: space-between;
        padding: 20px;
    }

    .left-section {
        width: 25%; /* Sol bölümü biraz daralttık */
        max-width: 300px;
    }

    .right-section {
        width: 70%; /* Sağ tarafın genişliğini biraz artırdık */
        margin-left: 15px;
    }

    .right-section p {
        font-size: 18px; /* Yazı boyutunu laptop için biraz küçülttük */
    }

    .right-section .images-container img {
        width: 250px; /* Resimlerin genişliğini biraz daralttık */
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .container {
        flex-direction: column; /* Alt alta yerleştirme */
        padding: 15px;
    }

    .left-section {
        width: 100%; /* Sol bölümü tam genişlik yapar */
        max-width: none;
        writing-mode: horizontal-tb; /* Dikey yazıyı yatay yapar */
        text-orientation: initial;
        text-align: center;
        margin-bottom: 15px;
    }

    .right-section {
        width: 100%; /* Sağ tarafı tam genişlik yapar */
        margin-left: 0;
    }

    .right-section p {
        font-size: 16px; /* Tablet ekranında yazı boyutunu küçülttük */
        padding: 15px;
    }

    .right-section .images-container img {
        width: 100%; /* Görsel tam genişlikte */
    }
}

/* Mobil */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 10px;
    }

    .left-section {
        width: 80%;
        writing-mode: horizontal-tb; /* Yazıyı yatay hale getirir */
        text-align: center;
        font-size: 1.5rem; /* Yazı boyutunu küçültür */
        margin-left: 2%;
    }

    .right-section p {
        font-size: 14px; /* Yazı boyutunu küçültür */
        padding: 10px;
    }

    .right-section .images-container img {
        width: 100%; /* Resimler ekran genişliğini kaplar */
        margin-bottom: 10px; /* Resimler arasında boşluk bırakır */
    }
}


/* Varsayılan (genel) stiller */
.innova4resim .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

.innova4resim img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.innova4resim p {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

/* Ortadaki resim */
.ortaresim {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.ortaresim img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.ortaresim .ortayazi {
    position: absolute;
    color: #000;
    font-size: 24px;
    background-color: #ece5df;
    padding: 10px 20px;
    text-align: center;
}

/* Duyarlı Tasarım */

/* Tablet için */
@media (max-width: 1024px) {
    .innova4resim .grid-container {
        grid-template-columns: 1fr;
    }

    .innova4resim p {
        font-size: 16px;
    }

    .ortaresim img {
        max-width: 90%;
        max-height: 90%;
    }

    .ortaresim .ortayazi {
        font-size: 20px;
    }
}

/* Telefon için */
@media (max-width: 768px) {
    .innova4resim .grid-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .innova4resim p {
        font-size: 14px;
    }

    .ortaresim img {
        max-width: 100%;
        max-height: 100%;
    }

    .ortaresim .ortayazi {
        font-size: 18px;
        padding: 8px 16px;
    }
}








.horizontal-gallery {
    display: flex; /* Resimleri yatayda yan yana diz */
    justify-content: space-between; /* Resimler arasında boşluk */
    align-items: center; /* Dikey hizalama */
    gap: 10px; /* Resimler arasında boşluk */
    margin: 20px auto; /* Üst ve alt boşluk */
    padding: 10px;
    border-radius: 10px; /* Köşeleri yuvarlat */
    max-width: 90%; /* Galeri genişliğini sınırlamak için */
    overflow-x: auto; /* Mobilde yatay kaydırma için */
    scrollbar-width: none; /* Tarayıcı kaydırma çubuğunu gizle */
}

.horizontal-gallery::-webkit-scrollbar {
    display: none; /* Kaydırma çubuğunu mobilde gizle */
}

.horizontal-gallery img {
    width: calc(100% / 6 - 10px); /* Masaüstü ve laptop için 6 resim */
    height: auto; /* Görüntü oranını korur */
    object-fit: cover; /* Taşma durumunda düzgün bir görüntü sağlar */
    border-radius: 5px; /* Köşeleri yuvarlar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
    opacity: 0; /* Başlangıçta görünmez */
    transform: translateY(20px); /* Başlangıçta aşağıda */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Geçiş efekti */
}

.horizontal-gallery img.scroll-visible {
    opacity: 1; /* Görünür hale gelir */
    transform: translateY(0); /* Orijinal konumuna gelir */
}
/* Tablet uyumu (1024px ve altı) */
@media (max-width: 1024px) {
    .horizontal-gallery {
        flex-wrap: wrap; /* Resimleri yeni satıra geçir */
        justify-content: center; /* Ortalamak için */
        gap: 15px; /* Daha fazla boşluk bırak */
    }

    .horizontal-gallery img {
        width: calc(100% / 3 - 15px); /* Tablet için 3 resim yan yana */
    }
}

/* Mobil uyumu (768px ve altı) */
@media (max-width: 768px) {
    .horizontal-gallery {
        flex-direction: column; /* Resimleri alt alta diz */
        align-items: center; /* Ortala */
    }

    .horizontal-gallery img {
        width: 80%; /* Mobilde daha büyük resimler */
        margin-bottom: 10px; /* Alt boşluk ekle */
    }
}


.horizontal-gallery img:nth-child(1) {
    animation-delay: 0.2s; /* İlk görsel 0.2 saniye sonra görünür */
}

.horizontal-gallery img:nth-child(2) {
    animation-delay: 0.4s; /* İkinci görsel 0.4 saniye sonra görünür */
}

.horizontal-gallery img:nth-child(3) {
    animation-delay: 0.6s; /* Üçüncü görsel 0.6 saniye sonra görünür */
}

.horizontal-gallery img:nth-child(4) {
    animation-delay: 0.8s; /* Dördüncü görsel 0.8 saniye sonra görünür */
}

.horizontal-gallery img:nth-child(5) {
    animation-delay: 1s; /* Beşinci görsel 1 saniye sonra görünür */
}

.horizontal-gallery img:nth-child(6) {
    animation-delay: 1.2s; /* Altıncı görsel 1.2 saniye sonra görünür */
}

@keyframes fadeIn {
    0% {
        opacity: 0; /* Görsel başlangıçta görünmez */
        transform: translateY(20px); /* Görsel aşağıda başlar */
    }
    100% {
        opacity: 1; /* Görsel tam görünür hale gelir */
        transform: translateY(0); /* Görsel orijinal konumuna gelir */
    }
}








/* Genel Stiller */
.innova4resim {
    margin: 20px auto; /* Ortalamak için */
    max-width: 1200px; /* Tüm alanı sığdır */
}

.grid-container {
    display: grid; /* Grid layout kullan */
    grid-template-columns: 1fr 1fr; /* 2 sütun */
    grid-template-rows: auto auto; /* 2 satır */
    gap: 20px; /* Elemanlar arasında boşluk */
}

.grid-container img {
    width: 600px; /* Resim genişliği sabit */
    height: auto; /* Oranını koru */
    border-radius: 5px; /* Köşeleri yuvarla */
}

.grid-container .item1 {
    grid-column: 1 / 2; /* Sol üst */
    grid-row: 1 / 2; /* Birinci satır */
    justify-self: center; /* Ortalamak için */
}

.grid-container .item2 {
    grid-column: 2 / 3; /* Sağ üst */
    grid-row: 1 / 2; /* Birinci satır */
    font-size: 22px; /* Yazı boyutu */
    text-align: left; /* Yazıyı sola hizala */
    max-width: 1000px; /* Yazı genişliğini sınırla */
    align-self: center; /* Dikey ortala */
    background-color: #4d2c23;
    padding: 20px; /* Yazı çevresine boşluk */
    color: white;
    font-family: Arial, sans-serif; /* Yazı tipi */
    border-radius: 5px;
}

.grid-container .item3 {
    grid-column: 1 / 2; /* Sol alt */
    grid-row: 2 / 3; /* İkinci satır */
    justify-self: center; /* Ortalamak için */
}

.grid-container .item4 {
    grid-column: 2 / 3; /* Sağ alt */
    grid-row: 2 / 3; /* İkinci satır */
    justify-self: center; /* Ortalamak için */
}

/* Tablet ve Mobil için Duyarlı Tasarım */
@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: 1fr; /* 1 sütun düzenine geç */
        grid-template-rows: auto auto auto auto; /* Her eleman ayrı bir satır */
    }

    .grid-container img {
        width: 100%; /* Resimler tam genişlikte */
        max-width: 100%;
        height: auto;
    }

    .grid-container .item2 {
        font-size: 18px; /* Yazı boyutunu küçült */
        padding: 15px; /* Daha az boşluk */
    }
}

/* Telefonlar için */
@media (max-width: 768px) {
    .grid-container {
        gap: 15px; /* Daha küçük boşluklar */
    }

    .grid-container .item2 {
        font-size: 16px; /* Daha küçük yazı */
        text-align: center; /* Yazıyı ortala */
    }
}





/* Önceki CSS kodları aynı */

.overlay-container {
    margin-top: 30%;
    position: relative; /* Yazıyı resmin üzerine konumlandırmak için */
    width: 600px; /* Resmin genişliği */
    margin: 20px auto; /* Ortalamak için */
}

.overlay-image {
    margin-top: 30%;
    width: 100%; /* Resmi kapsayıcı alana sığdır */
    height: auto; /* Oranı koru */
    border-radius: 5px; /* Köşeleri yuvarla */
}

.overlay-text {
    position: absolute; /* Resmin üstünde konumlandır */
    top: 25%; /* Yatayda ortala */
    left: 4%;
    
    color: white; /* Yazıyı beyaz yap */
    font-size: 13px; /* Yazı boyutu */
    font-weight: bold; /* Kalın yazı */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Gölge efekti */
    text-align: center; /* Ortala */
}




.innova5resim {
    margin: 20px auto; /* Ortalamak için */
    max-width: 800px; /* Maksimum genişlik */
    text-align: center; /* Yazıları ortala */
}

.innova5resim .top-text {
    margin-top: 10%;
    margin-bottom: 20px; /* Yazı ve resimler arasında boşluk */
}

.innova5resim .top-text h2 {
    font-size: 24px; /* Yazı boyutu */
    font-family: Arial, sans-serif; /* Yazı tipi */
    margin: 0; /* Kenar boşlukları kaldır */
  color: #2f426a;;
   
}

.innova5resim .middle-images {
    display: flex; /* Resimleri yatayda yan yana diz */
    justify-content: space-between; /* Resimler arasında boşluk bırak */
    gap: 20px; /* Resimler arası boşluk */
}

.innova5resim .middle-images .image {
    width: calc(50% - 10px); /* Resimleri eşit genişlikte yap */
    height: auto; /* Oranını koru */
    border-radius: 5px; /* Köşeleri yuvarla */
}




.ictasarim p {
    text-align: center;
    color: #4d2c23;
    font-family: "Quicksand", sans-serif;
    font-size: 30px; /* Varsayılan büyük yazı */
}

/* Tablet için */
@media (max-width: 1024px) {
    .tekrarinsani {
        height: 120px; /* Daha az yükseklik */
    }

    .tekrarinsani p {
        font-size: 40px; /* Yazı boyutunu küçült */
    }

    .ictasarim p {
        font-size: 24px; /* Yazı boyutunu küçült */
    }
}

/* Mobil için */
@media (max-width: 768px) {
    .tekrarinsani {
        height: 100px; /* Daha az yükseklik */
        margin-top: 6%;
        margin-bottom: 8%;
    }

    .tekrarinsani p {
        font-size: 28px; /* Daha küçük yazı */
        margin: 0 10px; /* Kenarlardan boşluk ekle */
    }

    .ictasarim p {
        font-size: 20px; /* Daha küçük yazı */
        padding: 0 10px; /* Yanlardan iç boşluk ekle */
    }
}




.innova6resim {
    margin: 20px auto; /* Ortalamak için */
    max-width: 800px; /* Kapsayıcı genişliği */
    text-align: center; /* Yazıları ortala */
}

.innova6resim .top-images {
    margin-top: 20%;
    display: flex; /* Resimleri yan yana dizmek için */
    justify-content: space-between; /* Resimler arasında boşluk bırak */
    gap: 20px; /* Resimler arası boşluk */
    margin-bottom: 20px; /* Alttaki yazıyla boşluk */
}

.innova6resim .top-images .image {
    width: calc(50% - 10px); /* Resim genişliği: Kapsayıcı alanın %50'si */
    height: auto; /* Oranı koru */
    border-radius: 5px; /* Köşeleri yuvarla */
}

.innova6resim .centered-text {
    margin: 20px 0; /* Üst ve alt boşluk */
}

.innova6resim .centered-text p {
    margin-top: 5%;
    font-size: 24px; /* Yazı boyutu */
    line-height: 1.6; /* Satır aralığı */
    color: #ffffff;
    font-family: "Quicksand", sans-serif;
}

.innova6resim .bottom-image {
    margin-top: -50%; /* Üstteki yazıyla boşluk */
}

.innova6resim .bottom-image .horizontal-image {
    width: 100%; /* Yatay resim kapsayıcı genişliğini kaplasın */
    height: auto; /* Oranı koru */
    border-radius: 5px; /* Köşeleri yuvarla */
    margin-bottom: -50%;
}

.innova7resim {
    display: grid; /* Grid düzenini kullan */
    grid-template-columns: 1.5fr 1fr; /* Sol sütunu biraz daha geniş yap */
    gap: 30px; /* Sütunlar arasında boşluk */
    margin: 20px auto; /* Ortalamak için */
    max-width: 1200px; /* Maksimum genişliği artır */
    align-items: start; /* Elemanların dikey hizası */
}

.left-image img {
    margin-top: -38%;
    margin-left: 20%;
    width: 60%; /* Resim genişliği */
    height: auto; /* Oranı koru */
    border-radius: 5px; /* Köşeleri yuvarla */
}

.right-content {
    display: flex; /* İçerik dikeyde düzenleniyor */
    flex-direction: column; /* Dikey düzen */
    justify-content: space-between; /* Üstte yazı, altta resim */
    gap: 20px; /* Yazı ve resim arasında boşluk */
}

.right-content .top-text p {
    margin-top: 28%;
    margin-left: -25%;
    font-size: 24px; /* Yazı boyutu */
    line-height: 1.6; /* Satır aralığı */
    color: white;
    padding: 5%;
    font-family: "Quicksand", sans-serif;
    background-color: #4d2c23;
}

.right-content .bottom-image img {
    width: 100%; /* Resim genişliği */
    height: auto; /* Oranı koru */
    border-radius: 5px; /* Köşeleri yuvarla */
    margin-left: -20%;
    margin-top: 3%;
}

/* Tablet için */
@media (max-width: 1024px) {
    .innova7resim {
        grid-template-columns: 1fr; /* Tek sütun düzenine geç */
        gap: 20px; /* Boşlukları daralt */
        max-width: 90%; /* Galeri genişliğini sınırla */
    }

    .left-image img {
        margin: 0 auto; /* Ortala */
        width: 80%; /* Daha büyük görünüm */
    }

    .right-content .top-text p {
        margin: 0; /* Kenar boşluklarını kaldır */
        font-size: 20px; /* Yazı boyutunu küçült */
        padding: 10px; /* Daha az boşluk */
    }

    .right-content .bottom-image img {
        margin: 0 auto; /* Ortala */
        width: 80%; /* Daha büyük görünüm */
    }
}

/* Mobil için */
@media (max-width: 768px) {
    .innova7resim {
        grid-template-columns: 1fr; /* Alt alta düzen */
        gap: 15px; /* Daha küçük boşluk */
        max-width: 100%; /* Tam genişlik */
    }

    .left-image img {
        margin: 0 auto; /* Ortala */
        width: 90%; /* Daha büyük görünüm */
    }

    .right-content .top-text p {
        font-size: 18px; /* Daha küçük yazı */
        padding: 8px; /* Daha az iç boşluk */
        line-height: 1.4; /* Daha kompakt düzen */
    }

    .right-content .bottom-image img {
        margin: 0 auto; /* Ortala */
        width: 90%; /* Daha büyük görünüm */
    }
}



.innova6resim p {
    font-size: 24px; /* Yazı boyutu */
    line-height: 1.6; /* Satır aralığı */
    color: white;
    padding: 5%;
    font-family: "Quicksand", sans-serif;
    background-color: #4d2c23;
}




.overlay-containerr {
    margin-top: 30%;
    position: relative; /* Yazıyı resmin üzerine konumlandırmak için */
    width: 600px; /* Resmin genişliği */
    margin: 20px auto; /* Ortalamak için */
}

.overlay-imagee {
    margin-top: -20%;
    width: 100%; /* Resmi kapsayıcı alana sığdır */
    height: auto; /* Oranı koru */
    border-radius: 5px; /* Köşeleri yuvarla */
    margin-bottom: 20%;
}

/* Tablet için */
@media (max-width: 1024px) {
    .overlay-containerr {
        width: 80%; /* Resmin genişliğini ekran genişliğine göre küçült */
        margin-top: 20%; /* Daha az boşluk */
    }

    .overlay-imagee {
        margin-top: -10%; /* Daha az negatif boşluk */
        width: 100%; /* Resmi tam genişlik yap */
        margin-bottom: 15%; /* Daha az alt boşluk */
    }
}

/* Mobil için */
@media (max-width: 768px) {
    .overlay-containerr {
        width: 90%; /* Resmi ekran genişliğine daha fazla uyumlu hale getir */
        margin-top: 10%; /* Daha az üst boşluk */
    }

    .overlay-imagee {
        margin-top: 0; /* Üstte negatif boşluğu kaldır */
        width: 100%; /* Resmi ekranın tamamına sığdır */
        margin-bottom: 10%; /* Daha az alt boşluk */
    }
}



.serinleten-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Sol sütun büyük, sağ sütun küçük */
    grid-template-rows: auto 1fr 1fr; /* Üstte başlık, altta resimler */
    gap: 20px; /* Elemanlar arasında boşluk */
    max-width: 1200px; /* Maksimum genişlik */
    margin: 40px auto; /* Ortalamak için */
   
    padding: 20px; /* İç boşluk */
  
    border-radius: 10px; /* Köşeleri yuvarlat */
}

.title {
    grid-column: 1 / 3; /* Başlık tüm genişliği kaplar */
    text-align: center; /* Ortala */
    font-size: 36px; /* Yazı boyutu */
    color: #4d2c23; /* Yazı rengi */
    font-weight: bold;
    margin-top: 2%;
    margin-bottom: -30%;
    margin-left: -30%;
}

.big-image {
    grid-row: 2 / 4; /* Sol sütun iki satırı kaplar */
    grid-column: 1 / 2; /* Sol sütun */
    margin-top: 35.5%;
}

.big-image img {
    width: 100%; /* Resmi kapsayıcıya sığdır */
    height: auto; /* Oranı koru */
    border-radius: 5px; /* Köşeleri yuvarlat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
}

.top-small-image, .bottom-small-image {
    grid-column: 2 / 3; /* Sağ sütunda */
}

.top-small-image {
    grid-row: 2 / 3; /* Sağ üst */
}

.bottom-small-image {
    grid-row: 3 / 4; /* Sağ alt */
}

.top-small-image img, .bottom-small-image img {
    width: 100%; /* Resmi kapsayıcıya sığdır */
    height: auto; /* Oranı koru */
    border-radius: 5px; /* Köşeleri yuvarlat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
}
/* Tablet için */
@media (max-width: 1024px) {
    .serinleten-container {
        grid-template-columns: 1fr; /* Tek sütun düzenine geç */
        grid-template-rows: auto auto auto auto; /* Elemanları alt alta yerleştir */
        gap: 15px; /* Daha küçük boşluk */
    }

    .title {
        font-size: 28px; /* Yazı boyutunu küçült */
    }

    .big-image {
        grid-row: 2 / 3; /* Sırayı düzenle */
    }

    .top-small-image {
        grid-row: 3 / 4; /* Üst küçük resmi sıraya al */
    }

    .bottom-small-image {
        grid-row: 4 / 5; /* Alt küçük resmi sıraya al */
    }
}

/* Mobil için */
@media (max-width: 768px) {
    .serinleten-container {
        grid-template-columns: 1fr; /* Tek sütun düzeni */
        grid-template-rows: auto auto auto auto; /* Elemanları alt alta */
        gap: 10px; /* Daha küçük boşluk */
        padding: 10px; /* Daha az iç boşluk */
    }

    .title {
        font-size: 24px; /* Daha küçük yazı */
        margin-left: -1%;
        margin-bottom: 2%;
    }

    .big-image img {
        width: 100%; /* Resmi tam genişlik yap */
    }

    .top-small-image img, .bottom-small-image img {
        width: 100%; /* Resimleri tam genişlik yap */
    }
}





.icerik-alani {
    display: flex; /* Resim ve yazıyı yan yana hizala */
    align-items: center; /* Dikeyde ortala */
    gap: 20px; /* Resim ve yazı arasında boşluk */
    max-width: 1200px; /* Kapsayıcı genişlik */
    margin: 40px auto; /* Ortalamak için üst ve alt boşluk */
    padding: 20px; /* İç boşluk */
    border-radius: 10px; /* Köşeleri yuvarlat */

}

.resim-alani img {
    width: 50%; /* Resmin genişliği kapsayıcının %50'si */
    margin-left: 24%;
    height: auto; /* Oranı koru */
    border-radius: 5px; /* Köşeleri yuvarlat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge */
}

.yazi-alani {
    width: 70%; /* Yazı alanının genişliği */
    text-align: left; /* Yazıyı sola hizala */
}



.yazi-alani p {
    font-size: 23px; /* Yazı boyutu */
    line-height: 1.6; /* Satır aralığı */
    color: white; /* Yazı rengi */
    padding: 15%;
    background-color: #4d2c23;
    font-family: "Quicksand", sans-serif;
}




.duzen-container {
    display: flex; /* Yazı ve resmi yan yana hizala */
    align-items: center; /* Dikeyde ortala */
    gap: 20px; /* Yazı ve resim arasında boşluk */
    max-width: 1200px; /* Kapsayıcı genişlik */
    margin: 40px auto; /* Ortalamak için üst ve alt boşluk */
    padding: 20px; /* İç boşluk */
   
    border-radius: 10px; /* Köşeleri yuvarlat */
    
}

.sol-yazi {
    width: 50%; /* Yazı bölümü genişliği */
    text-align: left; /* Yazıyı sola hizala */
}

.sol-yazi h2 {
    font-size: 24px; /* Başlık boyutu */
    color: #333; /* Başlık rengi */
    margin-bottom: 10px; /* Başlık altındaki boşluk */
}

.sol-yazi p {
    font-size: 23px; /* Yazı boyutu */
    line-height: 1.6; /* Satır aralığı */
    color: white; /* Yazı rengi */
    padding: 15%;
    background-color: #4d2c23;
    font-family: "Quicksand", sans-serif;
}

.sag-resim {
    width: 65%; /* Resim bölümü genişliği */
    text-align: right; /* Resmi sağ hizala */
}

.sag-resim img {
    width: 60%; /* Resmin genişliği kapsayıcının %50'si */
    margin-right: 23%;
    height: auto; /* Oranı koru */
    border-radius: 5px; /* Köşeleri yuvarlat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge */
}
/* Tablet için */
@media (max-width: 1024px) {
    .icerik-alani, .duzen-container {
        flex-direction: column; /* Elemanları alt alta sıralar */
        gap: 20px; /* Elemanlar arasında boşluk */
    }

    .resim-alani {
        width: 90%; /* Resimleri daha geniş yap */
        margin: 0 auto; /* Ortala */
        margin-left: 17%;
    }  
    .sag-resim img {
        width: 100%; /* Resimleri daha geniş yap */
        margin: 0 auto; /* Ortala */
        margin-left: 5%;
    }

    .yazi-alani, .sol-yazi {
        width: 100%; /* Yazılar tam genişlik */
        text-align: center; /* Yazıyı ortaya hizala */
        padding: 10%; /* Yazı çevresine boşluk */
    }

    .yazi-alani p, .sol-yazi p {
        font-size: 20px; /* Yazı boyutunu küçült */
    }
}

/* Mobil için */
@media (max-width: 768px) {
    .icerik-alani, .duzen-container {
        flex-direction: column; /* Elemanları alt alta sıralar */
        gap: 10px; /* Daha küçük boşluk */
        padding: 10px; /* Daha az iç boşluk */
    }

    .resim-alani {
        width: 90%; /* Resimleri daha geniş yap */
        margin: 0 auto; /* Ortala */
        margin-left: 17%;
    }  
    .sag-resim img {
        width: 100%; /* Resimleri daha geniş yap */
        margin: 0 auto; /* Ortala */
        margin-left: 5%;
    }

    .yazi-alani, .sol-yazi {
        width: 100%; /* Yazılar tam genişlik */
        text-align: center; /* Yazıyı ortaya hizala */
        padding: 8%; /* Daha küçük boşluk */
    }

    .yazi-alani p, .sol-yazi p {
        font-size: 18px; /* Daha küçük yazı boyutu */
        line-height: 1.4; /* Daha kompakt satır aralığı */
    }
}


.galeri-alani {
    display: grid; /* Grid yapısını kullan */
    grid-template-columns: 2fr 1fr; /* İki sütun: Sol büyük resim ve sağ küçük resimler */
    grid-template-rows: auto 1fr 1fr auto; /* Satırlar: Üstte başlık, büyük resim, iki küçük resim ve yazı */
    gap: 20px; /* Elemanlar arasında boşluk */
    max-width: 1200px; /* Galerinin maksimum genişliği */
    margin: 40px auto; /* Ortalamak için */
}

.sol-buyuk-resim {
    grid-column: 1 / 2; /* Sol sütunda yer alır */
    grid-row: 1 / 4; /* Büyük resim üç satırı kaplar */
}

.sol-buyuk-resim img {
    width: 100%; /* Resmi kapsayıcıya sığdır */
    margin-top: 10%;
    height: auto; /* Oranı koru */
    border-radius: 10px; /* Köşeleri yuvarlat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge */
}

.sag-ust-kucuk {
    grid-column: 2 / 3; /* Sağ sütunun üst kısmında yer alır */
    grid-row: 1 / 2;
}

.sag-ust-kucuk img {
    width: 100%; /* Resmi kapsayıcıya sığdır */
    height: auto; /* Oranı koru */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sag-alt-kucuk {
    grid-column: 2 / 3; /* Sağ sütunun alt kısmında yer alır */
    grid-row: 2 / 3;
}

.sag-alt-kucuk img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: -80%;
}

.alt-yazi {
    grid-column: 1 / 3; /* Yazı tüm genişliği kaplar */
    grid-row: 4 / 5;
    text-align: center; /* Yazıyı ortala */
    font-size: 16px;
    line-height: 1.6;
    color: #ffffff; /* Yazı rengi */
    background-color: #4d2c23;

    margin-top: 5%;
    margin-bottom: 20%;
}

.kesif-alani {
    max-width: 800px; /* Kapsayıcı genişlik */
    margin: 40px auto; /* Ortalamak için üst ve alt boşluk */
    background-color: #ffffff; /* Arka plan rengi */
    border: 2px solid #8b6e4e; /* Çerçeve rengi */
    border-radius: 10px; /* Köşeleri yuvarlat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    overflow: hidden; /* Taşmaları gizle */
}

.resim-bolumu img {
    width: 100%; /* Resmi kapsayıcıya sığdır */
    height: auto; /* Oranı koru */
    display: block; /* Varsayılan boşlukları kaldır */
    border-bottom: 2px solid #8b6e4e; /* Alt çerçeve */
}

.yazi-bolumu {
    padding: 20px; /* İç boşluk */
    text-align: center; /* Yazıyı ortala */
    color: #555; /* Yazı rengi */
    font-family: "Arial", sans-serif; /* Yazı tipi */
}

.yazi-bolumu h2 {
    font-size: 22px; /* Başlık boyutu */
    color: #8b6e4e; /* Başlık rengi */
    margin-bottom: 10px; /* Başlık ve metin arasındaki boşluk */
}

.yazi-bolumu p {
    font-size: 16px; /* Yazı boyutu */
    line-height: 1.6; /* Satır aralığı */
    color: #555; /* Yazı rengi */
    text-align: justify; /* Metni iki yana yasla */
}
.resim-bolumu h2{
    font-size: 22px; /* Başlık boyutu */
    color: #8b6e4e; /* Başlık rengi */
    margin-bottom: 10px; /* Başlık ve metin arasındaki boşluk */
}




.kahve-container {
    display: flex; /* Yan yana düzen oluştur */
    justify-content: space-between; /* Kartlar arasında boşluk bırak */
    gap: 20px; /* Kartlar arasındaki boşluk */
    max-width: 1200px; /* Konteyner genişliği */
    margin: 40px auto; /* Ortalamak için */
}

.filtre-kahve-alani {
    flex: 1; /* Her kart eşit genişlikte olsun */
    background-color: #ffffff; /* Arka plan rengi */
    border: 2px solid #8b6e4e; /* Çerçeve rengi */
    border-radius: 10px; /* Köşeleri yuvarlat */
    padding: 20px; /* İçerik boşlukları */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    text-align: center; /* Tüm içeriği ortala */
}

.resim-alani img {
    margin-left: -1%;
    width: 70%; /* Resmi kapsayıcı genişliğe sığdır */
    height: auto; /* Oranı koru */
    margin-bottom: 20px; /* Resim ve metin arasında boşluk */
    border-radius: 10px; /* Resim köşelerini yuvarlat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
}

.metin-alani h2 {
    font-size: 22px; /* Başlık boyutu */
    color: #8b6e4e; /* Başlık rengi */
    margin-bottom: 15px; /* Başlık altındaki boşluk */
    text-transform: uppercase; /* Büyük harf */
}

.metin-alani p {
    font-size: 16px; /* Yazı boyutu */
    line-height: 1.6; /* Satır aralığı */
    color: #555; /* Yazı rengi */
    text-align: justify; /* Yazıyı iki yana yasla */
    margin-bottom: 15px; /* Paragraflar arasındaki boşluk */
}

.metin-alani p strong {
    color: #8b6e4e; /* Vurgulu metin rengi */
}

/* Tablet için */
@media (max-width: 1024px) {
    .kahve-container {
        margin-left: -5%;
        flex-direction: column; /* Kartları alt alta sıralar */
        gap: 30px; /* Daha geniş boşluk */
        max-width: 100%; /* Konteyner genişliğini ekran genişliğine ayarla */
        padding: 0 20px; /* Yanlardan boşluk ekle */
    }

    .filtre-kahve-alani {
        flex: none; /* Kart genişliğini tam kapsayıcı yap */
        width: 100%; /* Kart genişliği tam kapsayıcı olur */
    }

    .resim-alani img {
        width: 80%; /* Resmin genişliğini artır */
        margin-left: -25%;

        
    }
}

/* Mobil için */
@media (max-width: 768px) {
    .kahve-container {
        margin-left: -10%;
        flex-direction: column; /* Kartları alt alta sıralar */
        gap: 20px; /* Daha dar boşluk */
        padding: 0 10px; /* Yan boşlukları azalt */
        max-width: 100%; /* Konteyner genişliğini ekran genişliğine uyumlu yap */
    }

    .filtre-kahve-alani {
        flex: none; /* Kart genişliğini tam kapsayıcı yap */
        width: 100%; /* Kart genişliği tam kapsayıcı olur */
    }

    .resim-alani img {
        width: 90%; /* Resimleri daha geniş yap */
        margin-left: -19px;
    }

    .metin-alani p {
        font-size: 14px; /* Daha küçük yazı boyutu */
        line-height: 1.4; /* Daha dar satır aralığı */
    }
}
/* Animasyon için başlangıç durumu */
/* Sağdan sola kayan animasyon başlangıç durumu */
.animate-right {
    opacity: 0;
    transform: translateX(100px); /* Sağdan sola gelir */
    transition: all 1s ease-out;
}

/* Soldan sağa kayan animasyon başlangıç durumu */
.animate-left {
    opacity: 0;
    transform: translateX(-100px); /* Soldan sağa gelir */
    transition: all 1s ease-out;
}

/* Animasyon tetiklendiğinde görünen durum */
.animate-visible {
    opacity: 1;
    transform: translateX(0);
}
.fade-in-effect {
    opacity: 0; /* Başlangıçta tamamen saydam */
    transition: opacity 1.5s ease-in-out; /* Opaklığa geçiş süresi ve tipi */
}

/* Görünür Olacak Durum */
.fade-in-visible {
    opacity: 1; /* Net (opak) görünür */
}




footer {
    background-color: #2f426a;
    color: #ffffff;
    padding: 40px 20px;
    border-radius: 15px;
    margin-top: 20px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.footer-section {
    flex: 1;
    min-width: 200px;
    padding: 10px;
}

.footer-section h4 {
    font-size: 1.5em;
    margin-bottom: 15px;
}

.footer-section p {
    line-height: 1.6;
    font-size: 1em;
}

.social-icons {
    margin-top: 20px;
}

.social-icons a {
    margin-right: 10px;
    display: inline-block;
}

.social-icons img {
    height: 30px;
    width: 30px;
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
}

.footer-section input[type="email"] {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
}

.footer-section button {
    padding: 10px;
    background-color: #f0c040;
    color: #2f426a;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.footer-section button:hover {
    background-color: #e5b732;
}