/* Genel header stili */
header {

    padding: 20px 10px;
    background-color: #C0C0C0;
}

.fixed-top-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    max-width: 100px;
    margin-bottom: 10px;
}

.top-bar {
    list-style-type: none;
    padding: 0;
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 0;
}

.top-bar a:hover {
    color: black;
    background: white;
    border-radius: 6px;
}

.top-bar li {
    margin: 0;
}

.top-bar a {
    text-decoration: none;
    /* color: #000; */
    font-size: 16px;
    color: #FFFFFF;
    padding: 5px;
}

/* Footer stili */
footer {
    background-color: #343a40;
    color: white;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
}

footer a {
    color: #17a2b8;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;

}

/* Genel ayarlar */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
}

/* Kutuların yer aldığı ana container */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    justify-content: space-between;
    /* Kutuların eşit aralıklı hizalanması */
}

/* Box tasarımı */
.box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: calc(33.333% - 20px);
    /* Yan yana 3 kutu */
    min-width: 300px;
    /* Kutuların minimum genişliği */
}

.box h2 {
    margin-top: 0;
    color: #333;
}

.box p {
    color: #666;
    line-height: 1.5;
    margin: 10px 0 0;
}

.box h2 {
    position: relative;
    color: #333;
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 10px;
    /* Çizgi ile metin arasında boşluk */
}

.box h2::after {
    content: "";
    display: block;
    width: 50%;
    /* Çizginin genişliği */
    height: 3px;
    /* Çizginin kalınlığı */
    background-color: #C0C0C0;
    /* Çizginin rengi */
    margin: 5px auto 0;
    /* Çizgiyi ortalar ve boşluk ekler */
}

/* Mobil uyumluluk */
@media (max-width: 768px) {
    .box {
        width: 100%;
        /* Mobilde kutular tam genişlikte */
    }
}

#about {
    margin-top: 80px;
    /* Masaüstü cihazlar için boşluk */
    padding: 20px;
}

/* Mobil Cihazlar İçin Boşluk */
@media (max-width: 768px) {
    #about {
        margin-top: 50px;
        /* Mobil cihazlar için daha az boşluk */
    }
}

/* Küçük ekranlar için uyum */
@media (max-width: 768px) {
    .fixed-top-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .top-bar {
        flex-direction: column;
        align-items: center;
    }

    .top-bar li {
        margin: 5px 0;
    }
}


/* Ürün Galerisi */
.product-gallery {
    display: flex;
    flex-wrap: wrap;
    /* Çok satırlı düzen için */
    gap: 20px;
    justify-content: space-between;
    margin-top: 20px;
    padding: 0 20px;
}

.product {
    flex: 1 1 calc(25% - 20px);
    /* 4 sütun düzeni */
    max-width: calc(25% - 20px);
    min-width: 150px;
}

.product img {
    width: 100%;
    /* Fotoğraf kutuyu dolduracak */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

/* Ürünlerimiz Başlık ve Açıklama */
.products-heading {
    text-align: center;
    /* Metinleri ortalar */
    margin-bottom: 20px;
    /* Başlığın galeriye uzaklığı */
}

.products-heading h2 {
    font-size: 3rem;
    /* Başlık boyutu */
    margin-bottom: 10px;
    /* Başlık ile paragraf arası boşluk */
    color: #333;
    /* Başlık rengi */
}


#pdfs .products-heading p {
    font-size: 1.75rem;
    /* Paragraf boyutu */
    color: #666;
    /* Paragraf rengi */
    line-height: 1.6;
    /* Daha rahat okunabilirlik için satır yüksekliği */
    margin: 0;
    /* Varsayılan marjları sıfırlar */
}

/* Mobil ve tablet uyumluluğu */
@media (max-width: 768px) {
    .product {
        flex: 1 1 calc(50% - 20px);
        /* 2 sütun düzeni */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .product {
        flex: 1 1 100%;
        /* Alt alta düzen */
        max-width: 100%;
    }

    .products-heading h2 {
        font-size: 1.5 rem;
    }

    .products-heading p {
        font-size: 1 rem;
        margin: 0;
    }

}

/* Pdf  */
.pdfs {
    display: inline-block;
    width: 22%;
    margin: 1%;
    vertical-align: top;
    text-align: center;
}

.pdfs img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
}

.pdf-links {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
}

.pdf-link {
    text-decoration: none;
    font-size: 14px;
    color: #007bff;
    padding: 5px 10px;
    border: 1px solid #007bff;
    border-radius: 5px;
}

.pdf-link:hover {
    text-decoration: none;
    background-color: #007bff;
    color: white;
}

/* Mobil cihazlar için düzenleme */
@media (max-width: 768px) {

    /* Ürünler alt alta sıralanır */
    .pdfs {
        width: 100%;
        /* Ürünler tam genişlik kaplar */
        margin: 10px 0;
        /* Üst ve alt boşluk eklenir */
    }

    /* PDF bağlantıları dikey hizalanır */
    .pdf-links {
        flex-direction: column;
        /* PDF linkleri alt alta sıralanır */
        align-items: center;
    }

    .pdf-link {
        margin: 5px 0;
        /* Her bağlantı arasında boşluk bırakılır */
        width: 80%;
        /* Mobilde bağlantılar geniş görünür */
        text-align: center;
    }
}

/* Tabletler için düzenleme */
@media (min-width: 769px) and (max-width: 1024px) {
    .pdfs {
        width: 48%;
        /* Tabletlerde iki ürün yan yana */
        margin: 1%;
    }

    .pdf-links {
        justify-content: space-evenly;
    }
}

.content-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.media-box {
    display: flex;
    justify-content: space-between;
    /* Görsel ve videoyu yan yana hizalar */
    gap: 20px;
    /* Aralarına boşluk ekler */
    margin-top: 20px;
    /* Üstten biraz boşluk ekler */
}

/* İçeriği ortalamak ve hizalamak */
.media-content {
    flex: 1 1 45%;
    /* Her biri %45 genişliğinde olacak şekilde ayarlıyoruz */
    min-width: 220px;
    /* Minimum genişlik daha küçük */
    max-width: 400px;
    /* Maksimum genişlik */
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    /* Yükseklik otomatik */
}


/* Responsive için mobilde uyum */
@media (max-width: 768px) {

    .media-gallery,
    .product-gallery {
        flex-direction: column;
        gap: 10px;
    }

    .media-item,
    .product {
        flex: 1 1 100%;
    }
}

/* Mobilde düzenleme */
@media (max-width: 768px) {
    .media-box {
        flex-direction: column;
        /* Mobilde alt alta sıralanır */
        align-items: center;
        /* Ortalar */
    }

    .media-content {
        width: 90%;
        /* Mobilde içerik %90 genişliğe sahip olur */
        max-width: 400px;
        /* Maksimum genişlik */
    }
}

/* Yeni ürün PDF bağlantısını ortalamak için özel sınıf */
.pdfs.full-width-pdf {
    width: 100% !important;
    text-align: center;
}

.pdfs.full-width-pdf .pdf-links {
    display: inline-block;
}