/*
Türkçe Yorum:
Bu CSS dosyası, 'Türk Çayı' temasını yansıtan renk paleti ve stili içerir.
Kullanılan renk paleti:
- Ana Koyu Renk (Koyu Çay): #331A00 (Hemen hemen siyah kahverengi)
- Ana Vurgu Rengi (Sıcak Bakır/Kızıl): #B84A00 (Sıcak, iştah açıcı turuncu/kızıl)
- İkincil Açık Renk (Krem/Açık Çay): #FFFBF5 (Çok açık bej/krem)
- Metin Rengi: #331A00 veya #FFFBF5 (Kontrasta göre değişir)
*/

/* Genel Sıfırlamalar ve Temel Stil */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Türkçe Yorum:
Google fontları kullanılmadığı için sistem fontlarını tercih ediyoruz.
'Arial', 'Helvetica Neue', 'Helvetica', 'sans-serif' gibi sistem fontları geniş uyumluluk sağlar.
*/
body {
    font-family: 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
    color: #331A00; /* Ana metin rengi (Koyu Çay) */
    background-color: #FFFBF5; /* Sayfa arka planı (Krem) */
    max-width: 1090px; /* Maksimum genişlik */
    margin: 0 auto; /* Sayfayı ortalama */
    line-height: 1.6;
    scroll-behavior: smooth; /* Yumuşak kaydırma */
}

/* Başlıklar */
h1, h2, h3 {
    margin-bottom: 0.7em;
    color: #B84A00; /* Başlıklar için Vurgu Rengi (Bakır) */
    font-weight: 700;
}

h1 {
    font-size: 2.5em;
    padding-top: 1em; /* Header'daki h1 için özel boşluk */
}

h2 {
    font-size: 2em;
}

/* --- Genel Blok Stilleri --- */
section {
    padding: 40px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge */
}

/* --- Block 1: Satış Teklifi (Header) --- */
.hero-section {
    min-height: 470px; /* Minimum yükseklik */
    background-color: #331A00; /* Koyu Çay Rengi Arka Plan */
    color: #FFFBF5; /* Açık Renk Metin */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: linear-gradient(rgba(51, 26, 0, 0.8), rgba(51, 26, 0, 0.8)), url('cayi-yansitacak-gorsel-adi.jpg'); /* Opsiyonel: Koyu çay bardağı/demlik resmi */
    background-size: cover;
    background-position: center;
}

.hero-section h1 {
    color: #FFC000; /* Daha parlak bir altın rengi vurgu */
    margin-bottom: 0.5em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-section p {
    max-width: 800px;
    margin-bottom: 1.5em;
    font-size: 1.15em;
}

/* --- Link Butonunun Stili (Block 1) --- */
.btn-primary {
    display: inline-block;
    padding: 15px 30px;
    background-color: #B84A00; /* Bakır/Kızıl Vurgu Rengi */
    color: #FFFBF5;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 2px solid #FFFBF5;
}

.btn-primary:hover {
    background-color: #FF6600; /* Daha canlı bir ton */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* --- Genel Buton Stili (Form ve Diğerleri) --- */
button[type="submit"] {
    display: inline-block;
    padding: 12px 25px;
    background-color: #331A00; /* Koyu Çay Rengi */
    color: #FFFBF5;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

button[type="submit"]:hover {
    background-color: #5A2E00; /* Daha açık koyu çay tonu */
}

/* --- Bloklar Arası Kontrast --- */

/* Açık Zeminli Bloklar: Ürünler, Uzmanlar, Yorumlar (Okunabilirlik için Krem zemin) */
.products-section, .team-section, .reviews-section {
    background-color: #FFFBF5;
    border: 1px solid #E0E0E0;
}

/* Koyu Zeminli Bloklar: Abonelik Formu, Medya (Kontrast sağlamak için) */
.form-section, .media-section {
    background-color: #B84A00; /* Bakır/Kızıl Vurgu */
    color: #FFFBF5;
}

.form-section h2, .media-section h2 {
    color: #FFFBF5;
}

/* --- Block 2: Abonelik Formu Stili --- */
.subscribe-form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(51, 26, 0, 0.2); /* Yarı şeffaf koyu çay kutusu */
    border-radius: 5px;
}

.subscribe-form label {
    margin-bottom: 5px;
    font-weight: 600;
}

.subscribe-form input[type="email"] {
    padding: 10px;
    border: 1px solid #FFFBF5;
    border-radius: 5px;
    margin-bottom: 15px;
    background-color: #FFFBF5;
    color: #331A00;
}

.subscribe-form button[type="submit"] {
    background-color: #331A00; /* Kontrast için Koyu Çay */
}

/* --- Block 3: Ürünler ve Makale --- */
.product-list table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.product-list th, .product-list td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #E0E0E0;
}

.product-list th {
    background-color: #B84A00;
    color: #FFFBF5;
    font-weight: 700;
    text-transform: uppercase;
}

.product-list tr:nth-child(even) {
    background-color: #F8F8F8; /* Hafif çizgili görünüm */
}

/* --- Makale Vurgusu (Article) --- */
.blog-article {
    margin-top: 40px;
    padding: 30px;
    background-color: #F8EFEA; /* Açık Krem Çay Tonu */
    border-left: 5px solid #B84A00; /* Vurgu Çizgisi */
    border-radius: 5px;
    font-style: italic;
}

.blog-article h3 {
    color: #331A00;
    font-style: normal;
    text-align: center;
    border-bottom: 2px dashed #B84A00;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.blog-article p {
    margin-bottom: 1em;
}

/* --- Block 4 ve 4.1: Uzmanlar ve Medya --- */
.team-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
    text-align: center;
}

.specialist-card {
    padding: 15px;
    border: 1px solid #B84A00;
    border-radius: 5px;
    background-color: #FFFBF5;
}

.specialist-card h3 {
    color: #331A00;
    font-size: 1.1em;
    margin-bottom: 0.5em;
}

/* --- Block 5: Yorumlar --- */
.review-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.review-item {
    padding: 20px;
    background-color: #F8EFEA; /* Açık Krem Çay Tonu */
    border-radius: 5px;
    border-top: 3px solid #B84A00; /* Üstte Vurgu Çizgisi */
    font-style: italic;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- Block 6: İletişim ve Harita --- */
.contact-section {
    text-align: center;
    background-color: #331A00; /* Koyu Çay Rengi Arka Plan */
    color: #FFFBF5; /* Açık Metin */
}

.contact-section h2, .contact-section p {
    color: #FFFBF5;
}

.contact-section .domainName {
    font-weight: bold;
    color: #FFC000;
}

.map-container {
    margin-top: 20px;
    border: 5px solid #B84A00; /* Harita Çevresi */
    overflow: hidden;
    border-radius: 5px;
}

.map-container iframe {
    display: block;
}

/* --- Block 7: Footer --- */
.footer-section {
    background-color: #1A0D00; /* En Koyu Ton */
    color: #A0A0A0; /* Soluk Metin */
    padding: 15px 20px;
    text-align: center;
    font-size: 0.9em;
}

.footer-section .domainName {
    font-weight: bold;
    color: #FFFBF5;
}

/* --- Mobil Uyumluluk (Responsive Design) --- */
@media (max-width: 768px) {

    /* Genel Ayarlamalar */
    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    section {
        padding: 30px 15px;
    }

    /* Blok 1: Teklif (Header) */
    .hero-section {
        min-height: 400px; /* Mobil için biraz daha kısa */
        padding: 15px;
    }

    .hero-section p {
        font-size: 1em;
    }

    /* Blok 3: Ürünler (Tablo) */
    .product-list table, .product-list thead, .product-list tbody, .product-list th, .product-list td, .product-list tr {
        display: block;
    }

    .product-list thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px; /* Başlıkları gizle */
    }

    .product-list tr {
        border: 1px solid #E0E0E0;
        margin-bottom: 15px;
        display: block;
    }

    .product-list td {
        border: none;
        border-bottom: 1px solid #E0E0E0;
        position: relative;
        padding-left: 50%;
        text-align: right;
    }

    .product-list td::before {
        /* Başlıkları mobil görünümde solda göster */
        content: attr(data-label);
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 700;
        color: #B84A00;
    }

    /* Blok 4: Uzmanlar */
    .team-list {
        grid-template-columns: 1fr; /* Tek sütuna düşür */
    }

    /* Blok 5: Yorumlar */
    .review-list {
        grid-template-columns: 1fr; /* Tek sütuna düşür */
    }
}

/* Türkçe Yorum:
    Tablo mobil uyumluluk için 'data-label' kullanır.
    Bunu HTML'deki <td> etiketlerine manuel olarak eklemeniz gerekmektedir
    (Örn: <td data-label="Fiyat (TL):">650 ₺</td>).
*/