/* Temel Ayarlar ve Mobil Öncelikli Yaklaşım */
/* 
Tüm elemanlar için box-sizing: border-box; kullanarak padding ve border'ın genişlik hesaplamalarına dahil olmasını sağlıyoruz. 
Bu, düzenin bozulmasını engeller.
Genel font boyutu ve satır yüksekliği ayarları mobil cihazlar için optimize edildi.
*/
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
    font-size: 16px; /* Mobil için varsayılan metin boyutu */
    line-height: 1.6;
    color: #333; /* Varsayılan metin rengi */
}

/* Tüm görsellerin kapsayıcılarını aşmamasını ve oranını korumasını sağlar */
img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block; /* Bazı durumlarda resimlerin altındaki boşluğu giderir */
}

/* Genel Başlıklar ve Paragraf Stilleri */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5em; /* Başlıklar arasında boşluk bırakır */
    line-height: 1.2;
}

p {
    margin-top: 0;
    margin-bottom: 1em; /* Paragraflar arasında boşluk bırakır */
}

/* Genel Buton Stili (tekrar eden kodları birleştirdik) */
button, .contact-btn, .btn-contact, .offer-btn, .submit-btn {
    background-color: #e53935;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Hover efekti için yumuşak geçiş */
    display: inline-block; /* Bazı durumlarda yan yana durmalarını sağlar */
    text-decoration: none; /* Link olarak kullanılan butonlar için */
    margin-top: 20px; /* Butonların üstünde boşluk bırakır */
}

button:hover, .contact-btn:hover, .btn-contact:hover, .offer-btn:hover, .submit-btn:hover {
    background-color: #d32f2f;
}

/* --- Header --- */
/* 
Header'ı sabit konuma getirdik ve mobil cihazlarda daha dar padding ile başladık.
Arka plan rengini hafif şeffaf yaparak alttaki içeriğin hafifçe görünmesini sağladık.
*/
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 20px; /* Mobil için daha az padding */
    position: fixed; /* Sayfa kaydırıldığında da görünür kalır */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Hafif bir gölge ekledik */
}

.header-logo {
    width: 160px; /* Mobil için varsayılan logo boyutu */
    height: auto;
}

.navbar ul {
    list-style: none;
    display: flex;
    gap: 15px; /* Mobil için daha az boşluk */
    margin: 0;
    padding: 0;
}

.navbar a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 0.9rem; /* Mobil için daha küçük font */
    white-space: nowrap; /* Menü öğelerinin tek satırda kalmasını sağlar */
}

.navbar a.lang {
    font-size: 1.1rem;
}

/* "Teklif Al" butonu stili */
.navbar .offer-btn {
    background-color: #0800ff; /* renk */
    color: white;
    padding: 8px 15px; /* Daha küçük padding */
    margin-top: 0;
    border-radius: 5px;
    font-size: 0.9rem; /* Navigasyon font boyutuyla uyumlu */
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}


.navbar .offer-btn:visited,
.navbar .offer-btn:focus,
.navbar .offer-btn:active {
    color: white !important;
    background-color: #0800ff !important;
}

.navbar a.active {
    color: #e53935;
}

.navbar .offer-btn:active {
    color: #f7f7f7;
}

/* --- Hero Section --- */
/* 
Hero bölümünün yüksekliğini esnek hale getirdik ve header'ın altından başlamasını sağladık.
Metin içeriği mobil cihazlarda ortalanır.
*/
.hero {
    background: url('./assets/image1_large.jpg') no-repeat center center/cover;
    min-height: 140vh; /* Ekran yüksekliğinin minimum %140'ini kaplar */
    display: flex;
    justify-content: left;
    align-items: center;
    padding-top: 80px; /* Header'ın altında kalması için */
    text-align: center; /* Mobil için metni ortala */
}

.hero-content {
    color: white;
    max-width: 100%; /* Kapsayıcının %100'ünü kaplar */
    padding: 28px;
}

.hero-content h1 {
    font-size: 5rem; /* Mobil için daha küçük font */
    font-weight: 1000;
    margin-bottom: 25px;
}

/* --- Genel Bölüm Paddingleri --- */
/* 
Tüm ana bölümlerin dikey paddinglerini ve yatay paddinglerini mobil için optimize ettik.
Ayrıca, içeriğin belirli bir maksimum genişliği aşmasını engelleyip ortalanmasını sağladık.
*/
.products, .scroll-products, .product-section, .services, .contact-page, .page-content-wrapper, .offer-page {
    padding: 80px 20px; /* Mobil için daha az yatay padding */
    max-width: 1200px; /* İçeriğin çok genişlemesini engeller */
    margin: 0 auto; /* İçeriği ortalar */
}

.product {
    margin-bottom: 60px; /* Ürün blokları arası boşluk */
}

.product h2, .product-block h2, .product-section .product-title, .section-title {
    color: #e53935;
    margin-bottom: 20px; /* Başlıklar altında boşluk */
    text-align: center; /* Mobil için başlıkları ortala */
    font-size: 2rem; /* Mobil için varsayılan başlık boyutu */
}

/* --- Product Grid (Tek ürün detayları) --- */
/* 
Mobil için sütun düzeninde, görseller ve metin alt alta gelir.
`align-items: center` ile içerik ortalanır.
*/
.product-grid {
    display: flex;
    flex-direction: column; /* Mobil için varsayılan olarak sütun düzeni */
    gap: 30px;
    align-items: center; /* Elemanları ortala */
    justify-content: center;
    flex-wrap: wrap; /* Gerekirse alt satıra geçiş */
}

.product-grid.reverse {
    flex-direction: column-reverse; /* Tersine sütun düzeni */
}

.product-grid img {
    width: 100%; /* Kapsayıcısının genişliğini tamamen kaplar */
    max-width: 350px; /* Görselin maksimum genişliği */
    border-radius: 10px;
    object-fit: cover; /* Görselin oranını bozmadan sığdırır */
}

.product-grid p {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 100%;
    text-align: center; /* Metni ortala */
}

/* --- Product Block (Scroll Products ve benzerleri) --- */
/* 
Benzer şekilde mobil için sütun düzeninde, içerik alt alta gelir.
*/
.product-block {
    margin-bottom: 80px;
}

.product-content {
    display: flex;
    flex-direction: column; /* Mobil için varsayılan olarak sütun düzeni */
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.product-content.reverse {
    flex-direction: column-reverse; /* Tersine sütun düzeni */
}

.product-content img {
    width: 100%;
    max-width: 400px; /* Maksimum görsel genişliği */
    border-radius: 10px;
    object-fit: cover;
}

.product-content .text {
    max-width: 100%;
    text-align: center; /* Metni ortala */
}

.product-content p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* --- Product Section (Tekrar eden sınıf adları için daha spesifik seçiciler) --- */
/* 
Bu bölümdeki içerik de mobil için sütun düzeninde başlar.
*/
.product-section .product-title {
    font-size: 2.5rem;
    text-align: center;
}

.product-section .product-content {
    flex-direction: column;
}

.product-text {
    flex: 1 1 100%; /* Mobil için tam genişlik */
    text-align: center;
}

.product-text p {
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    margin-bottom: 15px;
}

.product-image {
    flex: 1 1 100%; /* Mobil için tam genişlik */
    text-align: center;
}

.product-image img {
    width: 100%;
    max-width: 400px;
}


/* Dil dropdown */
/* Dropdown kapsayıcısı */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown butonu */
.dropbtn {
    background-color: transparent;
    color: #333;
    padding: 10px 15px;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    outline: none;
}

/* Dropdown içeriği (linkler) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 101;
    border-radius: 5px;
    right: 0;
    top: 100%;
    margin-top: 5px;
}

/* Dropdown içeriğindeki linkler */
.dropdown-content .lang-option {
    color: black;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    text-align: left;
    white-space: nowrap;
}

/* Dropdown içeriğindeki linklerin üzerine gelindiğinde */
.dropdown-content .lang-option:hover {
    background-color: #ddd;
}

/* Dropdown açıldığında (JavaScript tarafından eklenen 'active' sınıfı) */
.dropdown.active .dropdown-content {
    display: block;
}

/* Aktif dili gizleme (script.js tarafından ayarlanır, bu sadece bir önlem) */
.dropdown-content .lang-option[style*="display: none"] {
    display: none !important;
}

.brands-block h3{
    text-align: center;
    color: #e53935;
}

.brands-content {
    overflow-x: auto;
    padding: 10px 0;
    align-content:center;
}

.brands-text {
    display: flex;
    gap: 20px;
    white-space: nowrap;
}

.brands-text img {
    max-height: 30px;
    width: auto;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    filter: grayscale(0.1);
    transition: filter 0.3s ease;
    cursor: pointer;
    align-items: center;
}

.brands-text img:hover {
    filter: grayscale(0);
}



/* Responsive Düzenlemeler (isteğe bağlı, mevcut mobil düzeninize göre ayarlayın) */
@media (max-width: 768px) {
    .dropdown {
        font-size: 17px;
    }
}

/* --- Services Section --- */
/* 
Servis öğeleri mobil için tek sütunda gösterilir ve ekran büyüdükçe sütun sayısı artar.
*/
.services {
    padding-bottom: 60px; /* Alt boşluğu azaltır */
}

.section-title {
    font-size: 2.5rem;
}

.service-list {
    display: grid;
    grid-template-columns: 1fr; /* Mobil için tek sütun */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 0px;
}

.service-item h2 {
    font-size: 2rem;
    text-align: center;
}

.service-item p {
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

/* --- Contact Page --- */
/* 
İletişim bilgileri mobil için tek sütunludur.
*/
.contact-page {
    padding-bottom: 80px;
}

.contact-info {
    display: grid;
    grid-template-columns: 1fr; /* Mobil için tek sütun */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.contact-info h3 {
    color: #e53935;
    margin-bottom: 10px;
    font-size: 1.8rem;
}

.contact-info p {
    color: #555; /* Metin rengini daha okunaklı yaptık */
    font-size: 1rem;
    line-height: 1.5;
}

/* --- Offer Page --- */
.offer-page {
    padding-bottom: 80px;
    text-align: center;
}

.offer-page .section-title {
    margin-bottom: 15px;
    text-align: center;
}

.offer-page .form-description {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.offer-form-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.offer-form .form-group {
    margin-bottom: 20px;
}

.offer-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.offer-form input[type="text"],
.offer-form input[type="tel"],
.offer-form input[type="email"],
.offer-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

.offer-form textarea {
    resize: vertical;
    min-height: 100px;
}

.offer-form .submit-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    margin-top: 0;
}

/* --- Footer --- */
/* 
Footer içeriği mobil için sütun düzeninde ortalanır.
*/
.site-footer {
    background-color: #777777;
    color: #fff;
    padding: 40px 20px;
    margin-top: 60px;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logo img {
    max-width: 120px;
    height: auto;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.footer-links ul li {
    margin-bottom: 8px;
}

.footer-links ul li a {
    color: #ff9800;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
}

.footer-contact p {
    margin: 5px 0;
    color: #ccc;
    font-size: 0.9rem;
}

/* --- Medya Sorguları (Tablet ve Masaüstü için Stil Değişiklikleri) --- */

/* Tabletler (768px ve üzeri ekran genişlikleri) */
@media screen and (min-width: 768px) {
    body {
        font-size: 17px;
    }

    .header {
        padding: 15px 30px;
    }

    .header .logo img {
        height: auto;
    }

    .navbar ul {
        gap: 20px;
    }

    .navbar a {
        font-size: 1rem;
    }

    .offer-btn {
        padding: 10px 18px;
        font-size: 1rem;
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }

    .products, .scroll-products, .product-section, .services, .contact-page, .page-content-wrapper, .offer-page {
        padding: 100px 30px;
    }

    .product h2, .product-block h2, .product-section .product-title, .section-title {
        font-size: 2.8rem;
        text-align: left;
    }

    .product-grid {
        flex-direction: row;
        justify-content: center;
    }

    .product-grid.reverse {
        flex-direction: row-reverse;
    }

    .product-grid img {
        max-width: 300px;
    }

    .product-grid p {
        font-size: 1.1rem;
        text-align: left;
    }

    .product-content {
        flex-direction: row;
        justify-content: center;
    }

    .product-content.reverse {
        flex-direction: row-reverse;
    }

    .product-content img {
        max-width: 380px;
    }

    .product-content .text {
        text-align: left;
    }

    .product-section .product-content {
        flex-direction: row;
    }

    .product-text {
        flex: 1;
        text-align: left;
    }

    .product-image {
        flex: 1;
        text-align: right;
    }

    .service-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }

    .service-item h2, .service-item p {
        text-align: left;
    }

    .contact-info {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
        text-align: left;
    }

    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .footer-logo img {
        max-width: 150px;
    }

    .footer-links ul, .footer-contact {
        text-align: left;
    }
}

/* Masaüstü (1024px ve üzeri ekran genişlikleri) */
@media screen and (min-width: 1024px) {
    body {
        font-size: 18px;
    }

    .header {
        padding: 10px 50px;
    }

    .header .logo img {
        width: 160px;
        height: auto;
    }

    .navbar ul {
        gap: 30px;
    }

    .navbar a {
        font-size: 1rem;
    }

    .navbar a.active {
        color: #e53935;
    }

    .hero-content {
        text-align: left;
        max-width: 1000px;
        padding-left: 50px;
    }

    .hero-content h1 {
        font-size: 4rem;
    }

    .products, .scroll-products, .product-section, .services, .contact-page, .page-content-wrapper, .offer-page {
        padding: 120px 50px;
    }

    .product h2, .product-block h2, .product-section .product-title, .section-title {
        font-size: 2.5rem;
    }

    .product-grid {
        justify-content: space-between;
    }

    .product-grid img {
        max-width: 400px;
    }

    .product-content {
        justify-content: space-between;
    }

    .product-content img {
        max-width: 450px;
    }

    .service-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }

    .service-list h2 {
        color: #e53935;
    }

    .contact-info {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }

    .site-footer {
        margin-top: 100px;
    }
}