/* Sayfa Genel Stil */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

/* Header - Logo ve Menü */
header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
}

/* Logo */
#logo {
    width: 150px;  /* Logonun genişliği */
    height: auto;  /* Yüksekliği orantılı olarak ayarladık */
}

/* Menü stilini ve dropdown'ları flexbox ile düzenle */
nav {
    display: flex;
    justify-content: center; /* Menü öğelerini ortalamak */
    flex-grow: 1; /* Menü öğelerinin genişlik almasını sağlar */
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin-top: 50px;
    display: flex; /* Menü öğelerini yan yana dizmek için flexbox */
    justify-content: center; /* Menü öğelerini ortalamak */
    width: 100%; /* Menü tüm genişliği kapsar */
}

nav ul li {
    margin-right: 15px; /* Menü öğeleri arasına boşluk bırak */
    position: relative; /* Dropdown menü için konumlandırma */
}

nav ul li a {
    color: white; /* Varsayılan renk */
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    transition: color 0.3s ease, border-bottom 0.3s ease; /* Renk değişimi için geçiş efekti */
}

/* Hover durumunda metin rengini değiştir */
nav ul li:hover > a {
    color: #e74c3c; /* Hover rengi kırmızı (istediğiniz renk) */
}

/* Hover durumunda alt çizgi ekleme */
nav ul li a:hover {
    color: #e74c3c; /* Hover rengi kırmızı (istediğiniz renk) */
    border-bottom: 2px solid #e74c3c; /* Alt çizgi (ince) ekliyoruz */
}

/* Aktif sayfa (seçili menü öğesi) için stil */
nav ul li a.active {
    border-bottom: 3px solid #e74c3c; /* Aktif sayfa için belirgin bir alt çizgi */
    font-weight: bold; /* Aktif menü öğesini kalın yapma */
}

/* Dropdown menü */
nav ul li ul.dropdown {
    position: absolute;
    background-color: #333;
    margin-top: 10px;
    padding-top: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-direction: column; /* Öğeleri dikey sıralamak */
    max-height: 1000px; /* Yüksekliği sınırladık (istediğiniz değeri belirleyebilirsiniz) */
    overflow-y: auto; /* Eğer öğe sayısı fazla ise kaydırma ekler */
    width: 300px; /* Menü genişliği */
}

/* Menüyü hover ile göster */
nav ul li:hover > ul.dropdown {
    opacity: 1;
    visibility: visible; /* Menüye tıklandığında görünür */
}

/* Dropdown menüsündeki öğeleri düzenle */
nav ul li ul.dropdown li {
    display: block; /* Her öğe alt alta sıralanacak */
    text-align: left;
    padding: 10px 20px;
    width: 200px; /* Genişliği belirleyebilirsiniz */
}



header nav ul {
    list-style: none;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin-right: 20px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

/* Ana içerik (Hero bölümü) */
#hero {
    display: flex; /* Flexbox kullanımı düzeltildi */
    flex-direction: column; /* İçeriği dikeyde sıralıyoruz */
    justify-content: center; /* Dikeyde ortalama */
    align-items: center; /* Yatayda ortalama */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), /* Şeffaflık ekleyen gradient */
        url(../images/main-thumbnail.jpg); /* Resmin yolu */
    background-size: cover; /* Resmi tam ekran yapmak */
    background-position: center; /* Resmi merkezlemek */
    background-repeat: no-repeat; /* Resmin tekrarlanmasını engelle */
    height: 500px; /* Yükseklik ayarı (ihtiyacınıza göre değiştirebilirsiniz) */
    color: white; /* Yazı rengini beyaz yapıyoruz */
    padding: 50px; /* İçeriğe boşluk ekliyoruz */
}

/* Hero başlık */
#hero h1 {
    font-size: 36px;
    margin-bottom: 10px;
    text-align: center;
}

#hero h2 {
    font-size: 26px;
    letter-spacing: 5px;
}

/* Hero paragrafı */
#hero p {
    font-size: 18px;
    text-align: center;
}

#hero-iletisim {
    display: flex; /* Flexbox kullanımı düzeltildi */
    flex-direction: column; /* İçeriği dikeyde sıralıyoruz */
    justify-content: center; /* Dikeyde ortalama */
    align-items: center; /* Yatayda ortalama */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), /* Şeffaflık ekleyen gradient */
        url(../images/main-thumbnail.jpg); /* Resmin yolu */
    background-size: cover; /* Resmi tam ekran yapmak */
    background-position: center; /* Resmi merkezlemek */
    background-repeat: no-repeat; /* Resmin tekrarlanmasını engelle */
    height: 100px; /* Yükseklik ayarı (ihtiyacınıza göre değiştirebilirsiniz) */
    color: white; /* Yazı rengini beyaz yapıyoruz */
    padding: 50px; /* İçeriğe boşluk ekliyoruz */
}

/* Hero başlık */
#hero-iletisim h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

#hero-iletisim h2 {
    font-size: 26px;
    letter-spacing: 5px;
}

/* Hero paragrafı */
#hero-iletisim p {
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
}

#hero-container {
    display: flex;
    justify-content: space-evenly; /* Öğeleri eşit şekilde ayırır */
    align-items: center; /* Dikeyde ortalar */
    background-color: transparent; /* Arka plan rengi */
    padding: 20px;
}

#hero-container-inside, #hero-container-inside-2 {
    width: 45%; /* Her iki öğenin genişliği %45 olacak */
    background-color: transparent; /* Arka plan rengi */
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* Yatayda ortalama */
    align-items: center; /* Dikeyde ortalama */
}

#hero-container-inside {
    background-color: transparent; /* Farklı bir renk */
    color: #333; /* Metni beyaz yaparak kontrast arttırdım */
    height: 400px;
    width: 400px;
    margin-top: 100px;
    border-radius: 25px;
    align-items: flex-start;
    flex-direction: column; /* Dikey sıralama */
}

#hero-container-inside-2 {
    background-color: rgba(51, 51, 51, 0.85); /* Farklı bir renk */
    color: white; /* Metni beyaz yaparak kontrast arttırdım */
    height: 400px;
    width: 400px;
    margin-top: 100px;
    border-radius: 25px;
    flex-direction: column; /* Dikey sıralama */
}

#contact-container {
    display: flex;
    justify-content: space-evenly;
    padding: 50px 20px;
}

#contact-form, #contact-info {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 45%;
}

#contact-form h2, #contact-info h2 {
    text-align: center;
    color: #007bff;
}

#contact-form input, #contact-form textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

#contact-form button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
}

#contact-form button:hover {
    background-color: #0056b3;
}

#contact-info p {
    font-size: 16px;
}

#contact-info div {
    margin-top: 20px;
}

#contact-info p strong {
    color: #007bff;
}

@media (max-width: 768px) {
    #contact-container {
        flex-direction: column;
        align-items: center;
    }

    #contact-form, #contact-info {
        width: 80%;
        margin-bottom: 20px;
    }
}

/* Ana buton */
#main-button {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    display: block; /* Butonun blok seviyesinde öğe olarak görünmesini sağlıyoruz */
    margin: 20px auto; /* Yatayda ortalamak için */
    text-align: center;
}

#main-button:hover {
    background-color: #c0392b; /* Buton hover efekti */
}


.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    justify-content: center;
    
}

/* Content bölümü için */
#content {
    text-align: center; /* Resimleri yatayda ortalar */
    margin-bottom: 20px; /* Her bir resim arasına boşluk bırak */
    margin-top: 50px;
}

/* Resimlerin stilini ayarlıyoruz */
.content-image {
    max-width: 100%; /* Resmin genişliği bulunduğu alanı geçmesin */
    height: auto;    /* Yüksekliği orantılı şekilde ayarlanır */
    display: block;  /* Resim block öğesi gibi davranır */
    margin: 0 auto;  /* Yatayda ortalar */
}

/* Resimlerin stilini ayarlıyoruz */
.content-image-2 {
    max-width: 50%; /* Resmin genişliği bulunduğu alanı geçmesin */
    height: auto;    /* Yüksekliği orantılı şekilde ayarlanır */
    display: block;  /* Resim block öğesi gibi davranır */
    margin: 0 auto;  /* Yatayda ortalar */
}

/* Resimlerin stilini ayarlıyoruz */
.content-image-3 {
    max-width: 50%; /* Resmin genişliği bulunduğu alanı geçmesin */
    height: auto;    /* Yüksekliği orantılı şekilde ayarlanır */
    display: block;  /* Resim block öğesi gibi davranır */
    margin: 0 auto;  /* Yatayda ortalar */
    margin-top: 100px;
}

/* content-image-4'ün h3 style */
.content-image-4-h3 {
    max-width: 50%; /* Resmin genişliği bulunduğu alanı geçmesin */
    height: auto;    /* Yüksekliği orantılı şekilde ayarlanır */
    display: block;  /* Resim block öğesi gibi davranır */
    margin: 0 auto;  /* Yatayda ortalar */
    margin-top: 100px;
}

/* content-image-4'ün p style */
#content-image-4-p {
    max-width: 75%; 
    height: auto;    /* Yüksekliği orantılı şekilde ayarlanır */
    display: block;  
    margin: 0 auto;  /* Yatayda ortalar */
    margin-top: 80px;
    margin-bottom: 40px;
}

/* Resimlerin stilini ayarlıyoruz */
#content-image-5 {
    max-width: 75%; /* Resmin genişliği bulunduğu alanı geçmesin */
    height: auto;    /* Yüksekliği orantılı şekilde ayarlanır */
    display: block;  /* Resim block öğesi gibi davranır */
    margin: 0 auto;  /* Yatayda ortalar */
    margin-top: 100px;
}


/* About bölümü */
#about {
    padding: 50px 20px;
    text-align: center;
    padding-bottom: 150px;
}

/* Footer Stili */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
}

/* Sosyal medya ikonları */
.social-media {
    margin-top: 15px;
}

.social-media a {
    color: white;
    font-size: 24px;
    margin-right: 15px;
    text-decoration: none;
}

.social-media a:hover {
    color: #e74c3c; /* İkon üzerine gelindiğinde kırmızı renk */
}

.social-media-2 {
    display: flex;
    flex-direction: column; /* Öğeleri dikey sıralar */
    justify-content: center; /* Yatayda ortalar */
    align-items: center; /* Dikeyde ortalar */
    margin-top: 20px; /* Üstten boşluk */
    padding: 20px; /* İç boşluk */
    gap: 10px; /* İkon ile yazı arasındaki mesafe */
}

.social-media-2 a {
    display: flex; /* İkon ve yazıyı yatayda ortalar */
    flex-direction: column; /* İkonu ve yazıyı alt alta hizalar */
    justify-content: center; /* Yatayda ortalar */
    align-items: center; /* Dikeyde ortalar */
    color: #333;
    font-size: 30px; /* İkon boyutu */
    text-decoration: none;
}

.social-media-2 a i {
    font-size: 40px; /* Instagram ikonunun boyutu */
}

.social-media-2 p {
    font-size: 14px; /* Yazı boyutu */
    color: #333; /* Yazı rengi */
    margin-top: 5px; /* İkon ile yazı arasındaki mesafe */
}

/* Hover efekti eklemek için */
.social-media-2 a:hover p {
    color: #e74c3c; /* Yazıyı kırmızı yapar */
}

/* Instagram ikonunun hover durumunda */
.social-media-2 a:hover i {
    color: #e74c3c; /* Instagram ikonu kırmızıya döner */
}

/* Menüyü hover ile göster */
nav ul li:hover > ul.dropdown {
    opacity: 1;
    visibility: visible; /* Menüye tıklandığında görünür */
}

/* Ana içerik (Serigrafi bölümü) */
#serigrafi {
    padding: 50px 20px;
    text-align: center;
}

#serigrafi h1 {
    font-size: 36px;
}

#serigrafi ul {
    list-style-type: none;
    padding: 0;
}

#serigrafi ul li {
    font-size: 18px;
    margin: 10px 0;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 50px;
}

/* Ana içerik (Ahşap Kutu Baskısı) */
#ahsapkutubaskisi {
    padding: 50px 20px;
    text-align: center;
}

#ahsapkutubaskisi h1 {
    font-size: 36px;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

/* Ana içerik (Serigrafi bölümü) */
#kontrolpanelietiketleri {
    padding: 50px 20px;
    text-align: center;
}

#kontrolpanelietiketleri h1 {
    font-size: 36px;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

/* Ana içerik (Sublimasyon Aliminyum Baskı) */
#sublimasyonaluminyumbaski {
    padding: 50px 20px;
    text-align: center;
}

#sublimasyonaluminyumbaski h1 {
    font-size: 36px;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

/* Ana içerik (Deri Üzerine Seri Baskı) */
#deriuzerineserigrafibaski {
    padding: 50px 20px;
    text-align: center;
}

#deriuzerineserigrafibaski h1 {
    font-size: 36px;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

/* Ana içerik (Garanti Kırılgan Etiketi) */
#garantikirilganetiketi {
    padding: 50px 20px;
    text-align: center;
}

#garantikirilganetiketi h1 {
    font-size: 36px;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

/* Ana içerik (Tahta Üzerine Serigraf Baskı) */
#tahtauzerineserigrafbaski {
    padding: 50px 20px;
    text-align: center;
}

#tahtauzerineserigrafbaski h1 {
    font-size: 36px;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

/* Ana içerik (Kumanda Paneli) */
#kumandapaneli {
    padding: 50px 20px;
    text-align: center;
}

#kumandapaneli h1 {
    font-size: 36px;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

/* Ana içerik (PVC Baskılı Cetvel) */
#pvcbaskilicetvel {
    padding: 50px 20px;
    text-align: center;
}

#pvcbaskilicetvel h1 {
    font-size: 36px;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

/* Ana içerik (Şeffaf Baskılı Etiket) */
#seffafetiket {
    padding: 50px 20px;
    text-align: center;
}

#seffafetiket h1 {
    font-size: 36px;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

/* Ana içerik (Leksan Panel Etiketi) */
#leksanpaneletiketi {
    padding: 50px 20px;
    text-align: center;
}

#leksanpaneletiketi h1 {
    font-size: 36px;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

/* Ana içerik (Pleksi Üzerine Serigrafi Baskı) */
#pleksiuzerineserigrafibaski {
    padding: 50px 20px;
    text-align: center;
}

#pleksiuzerineserigrafibaski h1 {
    font-size: 36px;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}