/* Genel Ayarlar */
body {
    width: 100%; /* Tam genişlik */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Yatay kaydırma çubuğunu gizle */
    background-image: radial-gradient( circle farthest-corner at 10% 90%,  rgba(240,139,139,0.8) 0%, rgba(243,252,166,1) 90% );
    /*background: #FFFFFF;
    background: -moz-linear-gradient(45deg, #FFFFFF 0%, #F9FFD0 78%, #FFFA7E 100%);
    background: -webkit-linear-gradient(45deg, #FFFFFF 0%, #F9FFD0 78%, #FFFA7E 100%);
    background: linear-gradient(45deg, #FFFFFF 0%, #F9FFD0 78%, #FFFA7E 100%);*/
    font-family: Arial, sans-serif; /* Genel font ayarı */
    display: flex;
    flex-direction: column;
    min-height: 300vh; /* Sayfanın yüksekliğini kapsar */
}

/* Yamuk Şekilli Transparan Arka Plan */
.diagonal-section {
    position: relative;
    width: 100% ; /* Görüntüleme alanının tamamını kapla */
    height: 500px; /* Yükseklik */
    background: rgb(255,120,85);
    background: linear-gradient(90deg, rgba(255,120,85,1) 0%, rgba(255,255,255,0.21536536978072474) 82%);
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%); /* Yamuk şekil */
    margin: 0; /* Kenar boşlukları sıfırla */
    margin-top: 450px;
    padding: 0; /* İç boşluk yok */
    /*overflow: hidden; /* Taşan içerikleri gizle */
}

/* Yamuk Şekilli Transparan Arka Plan */
.diagonal-section2 {
    position: relative;
    width: 100% ; /* Görüntüleme alanının tamamını kapla */
    height: 700px; /* Yükseklik */
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0.21536536978072474) 0%, rgba(0,197,255,1) 100%);
    margin: 0; /* Kenar boşlukları sıfırla */
    margin-top: -110;
    clip-path: polygon(0 1.2%, 100% 15.3%, 100% 100%, 0 86%); /* Yamuk şekil */
    padding: 0; /* İç boşluk yok */
    /*overflow: hidden; /* Taşan içerikleri gizle */
}
/* Yamuk Şekilli Transparan Arka Plan */
.diagonal-section3 {
    position: relative;
    width: 100% ; /* Görüntüleme alanının tamamını kapla */
    height: 500px; /* Yükseklik */
    background: rgb(141,127,124);
    background: linear-gradient(90deg, rgba(141,127,124,1) 0%, rgba(255,255,255,0.21536536978072474) 82%);
    margin: 0; /* Kenar boşlukları sıfırla */
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%); /* Yamuk şekil */
    margin-top: -100;
    padding: 0; /* İç boşluk yok */
    /*overflow: hidden; /* Taşan içerikleri gizle */
}

/* İçerik */
.diagonal-section .content {
    position: relative;
    z-index: 1; /* İçeriği arka planın üzerinde göster */
    max-width: 1200px; /* İçerik genişliği */
    margin: 0 auto; /* Ortalanmış içerik */
    padding: 100px;
    color: black; /* Yazı rengi */
    text-align: center; /* Ortalanmış metin */
}
/* İçerik */
/*.diagonal-section2 .content {
    position: relative;
    z-index: 1; /* İçeriği arka planın üzerinde göster */
   /* max-width: 1200px; /* İçerik genişliği */
    /*margin: 0 auto; /* Ortalanmış içerik */
    /*padding: 20px;
    /*color: black; /* Yazı rengi */
    /*text-align: center; /* Ortalanmış metin */
/*}
*/

.diagonal-section2 .container {
    display: flex;
    flex-wrap: wrap; /* Küçük ekranlarda alt alta geçiş */
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* İçeriğin genişliği */
    width: 100%; /* Tam genişlik */
    gap: 20px; /* Elemanlar arasında boşluk */
}

/* Sol Taraf: Yazılar */
.text-content {
    flex: 1; /* Esnek genişlik */
    max-width: 50%; /* Maksimum genişlik */
}

.text-content h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.text-content p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.text-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.text-content ul li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.text-content ul li:before {
    content: '✔'; /* Liste simgesi */
    position: absolute;
    left: 0;
    color: yellow; /* Simge rengi */
}

/* Sağ Taraf: Görsel */
.image-content {
    flex: 1; /* Esnek genişlik */
    max-width: 50%; /* Maksimum genişlik */
    text-align: center; /* Görseli ortala */
}

.image-content img {
    max-width: 70%; /* Görsel genişliği */
    height: auto; /* Oranı koruyarak yüksekliği ayarla */
    border-radius: 10px; /* Hafif köşeleri yuvarla */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif gölge */
}
/* diagonal İçerik 2*/
.diagonal-section3 .content {
    position: relative;
    z-index: 1; /* İçeriği arka planın üzerinde göster */
    max-width: 1200px; /* İçerik genişliği */
    margin: 0 auto; /* Ortalanmış içerik */
    padding: 20px;
    color: black; /* Yazı rengi */
    text-align: center; /* Ortalanmış metin */
}

/* Logo Container */
.logos-container {
    display: flex;
    justify-content: center; /* Logoları ortalar */
    flex-wrap: wrap; /* Küçük ekranlarda alt alta geçmesini sağlar */
    gap: 30px; /* Logolar arasında boşluk */
    padding: 40px; /* İç boşluk */
}

/* Yuvarlak Logolar */
.logo-circle {
    position: relative;
    width: 100px; /* Yuvarlağın genişliği */
    height: 100px; /* Yuvarlağın yüksekliği */
    background-color: rgba(255, 255, 255, 0.8); /* Beyaz transparan arka plan */
    border-radius: 50%; /* Yuvarlak şekil */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animasyon */
    cursor: pointer;
    /*overflow: hidden; /* Logoların dışarı taşmasını önler */
}

.logo-circle img {
    width: 100%; /* Logonun yuvarlak içini tamamen kaplaması */
    height: 100%; /* Logonun yuvarlak içini tamamen kaplaması */
    object-fit: cover; /* Logoyu yuvarlağa sığacak şekilde kırpar */
    border-radius: 50%; /* Logoyu yuvarlak hale getirir */
}

/* Hover Efekti */
.logo-circle:hover {
    transform: scale(1.2); /* Hover sırasında büyüme efekti */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Daha belirgin gölge */
    z-index: 10; /* Öne çıkar */
}

/* Tooltip (Marka İsmi) */
.logo-circle .tooltip {
    position: absolute;
    top: -30px; /* Yuvarlağın üstüne çıkar */
    left: 50%; /* Ortalanır */
    transform: translateX(-50%);
    background-color: rgba(0, 0, 255, 0.8); /* Mavi kutu */
    color: white; /* Yazı rengi */
    padding: 5px 10px; /* Kutu iç boşluk */
    border-radius: 5px; /* Köşeleri yuvarla */
    font-size: 12px; /* Yazı boyutu */
    white-space: nowrap; /* Taşmayı önler */
    opacity: 0; /* Başlangıçta görünmez */
    visibility: hidden; /* Erişilemez yap */
    pointer-events: none; /* Mouse ile üzerine gelinemez */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Animasyon */
    z-index: 10; /* Üstte görünsün */
}

/* Tooltip Hover'da Görünür Olur */
.logo-circle:hover .tooltip {
    opacity: 1; /* Görünür yap */
    visibility: visible; /* Erişilebilir yap */
}

/* İçerik Bloğu */
.content {
    margin-top: 90px; /* Navigasyon barının yüksekliğine eşit olmalı */
    padding: 0px; /* İçerik çevresine boşluk */ /*BU TİP ŞEYLERE DİKKAT ET DIAGONAL SECTIONDA SENİ UGRASTIRDI!!!!*/
}

/* Demo Butonu */
.demo-button {
    background-color: #ffcc00; /* Sarı arka plan */
    color: rgb(26, 12, 9) !important; /* Yazı rengi */
    font-weight: bold; /* Kalın yazı */
    font-size: 16px; /* Yazı boyutu */
    padding: 10px 20px; /* İç boşluk */
    border-radius: 25px; /* Yuvarlatılmış kenarlar */
    text-decoration: none; /* Alt çizgi kaldır */
    transition: all 0.3s ease; /* Hover animasyonu */
}

.demo-button:hover {
    background-color: #ffdd33; /* Daha açık sarı */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Hover gölgesi */
    color: rgb(26, 12, 9); /* Hover durumunda da aynı yazı rengi */
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: rgb(200, 102, 9); /* Logonun rengi */
    text-decoration: none; /* Alt çizgiyi kaldır */
}

.logo:hover {
    color: #ff9f00; /* Hover sırasında renk değişimi */
}



/* Yukarı-aşağı hareket animasyonu */
@keyframes upDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* Yukarı hareket */
    }
}

/* Ortak Stil */
.background-icon, .background-icon2, .background-icon3 {
    animation: upDown 3s ease-in-out infinite; /* Sürekli yukarı-aşağı hareket */
    object-fit: contain; /* Görsel orantısını koru */
    position: absolute;
    z-index: -1;
}




/* Üst Destek Bilgisi */
.topbar {
    color: rgb(26, 12, 9);
    padding: 10px ;
    text-align: center;
    font-size: 14px;
}


/* Navigasyon Bar */
.navbar {
    position: fixed; /* Sabitlenir */
    top: 40px; /* Başlangıçta yukarıdan boşluk */
    left: 50%; /* Ortalamak için */
    transform: translateX(-50%); /* Ortalamak için */
    width: 100%; /* Başlangıç genişliği */
    max-width: 1000px; /* Maksimum genişlik */
    background: rgb(26, 12, 9); /* Navigasyon barı rengi */
    color: white;
    padding: 15px 20px;
    border-radius: 25px; /* Başlangıçta tüm kenarlar yuvarlak */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    z-index: 1000; /* Önde görünmesi için */
}

.navbar.scrolled {
    top: 0; /* Sayfa kaydırıldığında yukarıya sabitlenir */
    width: 90%; /* Barın genişliği %10 artar */
    max-width: 1300px; /* Maksimum genişlik */
    border-radius: 0 0 40px 40px; /* Sol ve sağ kenar yukarı yuvarlatılır */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Hafif gölge */
}

.navbar-container {
    display: flex;
    align-items: center; /* Dikeyde ortalar */
    justify-content: space-between; /* Sağ ve sola yay */
    max-width: 100%;
}

.nav-links {
    list-style: none;
    display: flex; /* Yatayda düzen */
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin-left: 20px; /* Aralık */
}

.nav-links a {
    text-decoration: none;
    color: rgb(255 120 85);
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #ffe680; /* Hover rengi */
}


/* Ana İçerik */
main {
    flex: 1; /* Boş alanı doldurur */
    padding: 0px;
    text-align: center;
}

main h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

main p {
    font-size: 18px;
    line-height: 1.6;
}

/* Footer */
footer {
    width: 100%;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-top: auto;
}