/* Genel Kapsayıcı Ayarı */
.takvim-listesi-kapsayici {
    padding: 20px;
}

.urun-kategori {
    margin-bottom: 40px;
}

/* Tüm Kategori Başlıkları */
.urun-kategori h3 {
    text-align: center;
    font-size: 1.8em;
    padding: 10px 20px;
    margin-bottom: 20px;
    color: white; /* Başlık metni beyaz */
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* YENİ STİL: Başlıkların hemen altındaki açıklamalar */
.aciklama-ust {
    text-align: center;
    font-size: 1em; 
    font-weight: 500;
    color: #333; /* Koyu renk, daha belirgin */
    margin: 5px auto;
    padding: 2px 10px;
    max-width: 800px;
}

/* Fiyat Tabloları Kapsayıcısı */
.fiyat-tablolari-kapsayici {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px;
    justify-content: space-between;
    align-items: flex-start;
}

/* Tüm Fiyat Tabloları Genel Stili */
.fiyat-tablosu {
    flex: 1 1 250px; 
    max-width: 300px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.fiyat-tablosu table,
.tablo-coklu-sutun table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.fiyat-tablosu th, .fiyat-tablosu td,
.tablo-coklu-sutun th, .tablo-coklu-sutun td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #f0f0f0;
    font-size: 0.9em;
}

/* TABLO BAŞLIKLARI VE FİYAT VURGUSU */
.fiyat-tablosu thead th, 
.tablo-coklu-sutun thead th {
    background-color: #333 !important; /* Başlıklar koyu gri */
    color: white !important;
    font-weight: 700;
}
.fiyat-tablosu td:last-child,
.tablo-coklu-sutun td:last-child {
    text-align: right; 
    font-weight: 700;
    color: #cc0000; /* Fiyatları kırmızı yapıyoruz */
}


/* BÖLÜM RENK TEMALARI ve ZEBRA DESENLERİ */

/* 1. PİRAMİT TAKVİM */
#piramit-takvim h3 { background-color: #ff6600; } /* Canlı Turuncu */
#piramit-takvim .fiyat-tablosu { border: 2px solid #ff6600; }
#piramit-takvim .fiyat-tablosu tr:nth-child(odd) { background-color: #fff8f5; }
#piramit-takvim .fiyat-tablosu tr:nth-child(even) { background-color: #ffefe6; }

/* 2. POSTER & BLOK TAKVİM */
#poster-blok-takvim h3 { background-color: #4CAF50; } /* Canlı Yeşil */
#poster-blok-takvim table { border: 2px solid #4CAF50; }
#poster-blok-takvim table tr:nth-child(odd) { background-color: #f0fff0; }
#poster-blok-takvim table tr:nth-child(even) { background-color: #e8f5e9; }

/* 3. SÜMEN TAKVİM */
#sumen-takvim h3 { background-color: #00897b; } /* Koyu Turkuaz */
#sumen-takvim table { border: 2px solid #00897b; }
#sumen-takvim table tr:nth-child(odd) { background-color: #f0fafa; }
#sumen-takvim table tr:nth-child(even) { background-color: #e0f2f1; }

/* 4. DUVAR TENEKE TAKVİM */
#duvar-teneke-takvim h3 { background-color: #8E24AA; } /* Canlı Mor */
#duvar-teneke-takvim table { border: 2px solid #8E24AA; }
#duvar-teneke-takvim table tr:nth-child(odd) { background-color: #faf0ff; }
#duvar-teneke-takvim table tr:nth-child(even) { background-color: #f3e5f5; }

/* 5. SPİRAL TAKVİM ÜSTTEN ASKILIKLI */
#spiral-takvim h3 { background-color: #2196F3; } /* Parlak Mavi */
#spiral-takvim table { border: 2px solid #2196F3; }
#spiral-takvim table tr:nth-child(odd) { background-color: #f0f8ff; }
#spiral-takvim table tr:nth-child(even) { background-color: #e3f2fd; }

/* Satır üzerine gelindiğinde genel vurgu */
.fiyat-tablosu tr:hover,
.tablo-coklu-sutun table tr:hover {
    background-color: #ffe0b2 !important; 
    cursor: pointer;
}


/* GÖRSEL STİLİ ve 600px AYARI */
.urun-gorsel {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-align: center;
    padding: 10px;
}

.urun-gorsel img {
    /* İstenen sabit genişlik: 600 piksel */
    width: 600px; 
    height: auto; 
    
    /* Gerekli Ortalamayı Sağlayan Yeni Kod */
    display: block; 
    margin: 0 auto; 
    
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: none; 
    transition: none; 
}



/* BİLGİ BLOĞU ORTALAMA */
.info-block {
    text-align: center; /* İçindeki metinleri ortalar */
    margin-top: 30px;  /* Üstten biraz boşluk bırakır */
    padding: 15px;     /* Kenar boşluğu verir */
    border-top: 2px solid #ccc; /* Üste ince bir çizgi ekleyebiliriz (isteğe bağlı) */
    font-size: 0.9em;
    color: #555;
}

/* Paragraflar arasına boşluk koyar */
.info-block p {
    margin: 5px 0;
}




/* Alt Başlığı Ortalama */
.subtitle {
    text-align: center; /* Metni yatay olarak ortalar */
    margin-bottom: 30px; /* Başlık ile ilk takvim bölümü arasına biraz boşluk ekler */
    font-size: 1.1em; /* Biraz daha belirgin olması için boyutu artırılabilir (isteğe bağlı) */
    color: #555; /* Metin rengi koyu gri yapılır */
}




/* PROFESYONEL ÖZELLİK METİNLERİ STİLİ (Piramit tabloları altındaki Yaprak/Ayak için) */
.aciklama {
    margin-top: 5px;
    font-size: 0.85em;
    color: #666; 
    font-style: italic;
    padding: 0 5px;
    line-height: 1.3;
    text-align: center;
}

.ozellik-koyu {
    font-size: 0.9em !important;
    color: #1a1a1a !important; 
    font-style: normal !important;
    font-weight: 700 !important; 
    line-height: 1.4 !important;
    
    margin: 8px 0; 
    padding: 8px 10px;
    border-radius: 4px;
    
    background-color: #f0f0f0;
    text-align: left !important;
    border-left: 4px solid #ff6600; /* Turuncu vurgu çizgisi */
}


/* PİRAMİT ÖZEL AYARLARI */
.fiyat-tablo-3lu { justify-content: space-around; }
.fiyat-tablo-3lu .fiyat-tablosu { flex: 0 0 28%; max-width: 28%; }
.piramit-gorsel { flex: 0 0 100%; max-width: 100%; order: 10; } /* Görsel en altta kalsın */

/* DİĞER ÇOK SÜTUNLU TABLOLAR */
.tablo-coklu-sutun table { flex: 2; min-width: 500px; }
.tablo-coklu-sutun .urun-gorsel { flex: 1; min-width: 250px; max-width: 350px; }


/* MOBİL UYUM (Responsive) - Önceki hatayı düzelten kısım */
@media (max-width: 1000px) {
    /* Tüm kapsayıcıların dikey dizilimi */
    .fiyat-tablolari-kapsayici { 
        flex-direction: column; 
        align-items: center; 
        gap: 15px; 
    }
    
    /* Tüm tabloların ve kapsayıcıların tam genişlikte olması */
    .fiyat-tablosu, 
    .fiyat-tablo-3lu .fiyat-tablosu, 
    .tablo-coklu-sutun table { 
        flex: 1 1 100%; 
        max-width: 100%; 
        min-width: 100%; 
    }

    /* Görsellerin mobil cihazlarda tablonun üstüne çıkması */
    .urun-gorsel { 
        order: -1; 
        max-width: 100%;
    }
    
    /* Piramit görselinin mobil cihazda en üste çıkması */
    .piramit-gorsel { 
        order: -2; 
        margin-bottom: 20px;
    }

    /* Görselin 200px'i geçmemesi */
    .urun-gorsel img { 
        max-width: 200px; 
        width: 100%; 
    }
    
    /* Mobil Özellik Stili */
    .ozellik-koyu { 
        border-left: none; 
        background-color: #f9f9f9; 
        padding: 5px 8px; 
        text-align: center !important; 
    }
}












/* ==================================== */
/* MOBİL UYUM (RESPONSIVE)     */
/* ==================================== */

@media (max-width: 768px) {
    /* Genel Ayarlar: Kenar boşluklarını azalt ve ortala */
    .main-content {
        padding: 10px;
    }
    
    /* Tüm tablo ve görsel kapsayıcılarını dikey diz ve ortala */
    .fiyat-tablolari-kapsayici { 
        flex-direction: column; 
        align-items: center; 
        gap: 15px; 
    }
    
    /* Tüm tablo/kutu elemanları (Tablolar, Görsel Kutuları) tam genişlikte */
    .fiyat-tablosu, 
    .fiyat-tablo-3lu .fiyat-tablosu, 
    .tablo-coklu-sutun table,
    .piramit-gorsel-kutu { 
        flex: 1 1 100% !important; 
        max-width: 100% !important; 
        min-width: 100% !important; 
    }

    /* Görsellerin (piramit hariç) mobil cihazlarda tablonun üstüne çıkması */
    .urun-gorsel { 
        order: -1; 
        max-width: 100%;
        margin-bottom: 10px;
    }
    
    /* Piramit görsel kutusu mobil cihazda en üste (order -2 ile en başa) */
    .piramit-gorsel-kutu { 
        order: -2; 
        margin-bottom: 20px;
        padding: 15px;
    }

    /* Tüm görsellerin boyutunu koruyarak ortalama (200px'i geçmeyecek şekilde) */
    .urun-gorsel img,
    .piramit-gorsel-kutu img { 
        max-width: 200px !important; 
        width: 100%; 
        display: block;
        margin: 0 auto;
    }
    
    /* Tablo içeriğini daha iyi sıkıştır */
    .fiyat-tablosu th, .fiyat-tablosu td,
    .tablo-coklu-sutun th, .tablo-coklu-sutun td {
        padding: 6px 8px;
        font-size: 0.85em; 
    }
    
    /* Mobil Özellik Stili (Daha yalın ve ortalı) */
    .ozellik-koyu { 
        border-left: none; 
        background-color: #f9f9f9; 
        padding: 5px 8px; 
        text-align: center !important; 
        font-size: 0.85em !important;
    }
    
    /* Başlık altı açıklamaların mobil uyumu */
    .aciklama-ust {
        font-size: 0.9em;
    }

    /* Yatay çizginin mobil uyumu */
    hr {
        margin: 20px 0;
    }
}