/* style.css - SEO & UI Optimized */
:root {
    --brand-blue: #2563eb;
    --bg-gray: #fafafa;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* AdSense Placeholder - Reklam Birimleri İçin */
.adsense-placeholder {
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    color: #64748b;
    padding: 2rem;
    text-align: center;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 1.5rem 0;
    display: none !important;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------
   TABLO STİLLERİ (GÜNDÜZ MODU)
   -------------------------------------- */
.seo-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.seo-table th {
    background: #f8fafc;
    text-align: left;
    padding: 1rem;
    font-weight: 800;
    font-size: 0.9rem;
    border-bottom: 2px solid #e2e8f0;
    color: #0f172a;
    transition: all 0.3s ease;
}

.seo-table td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.95rem;
    color: #334155;
    transition: all 0.3s ease;
}

.seo-table tr:hover td {
    background-color: #f8fafc;
}

/* --------------------------------------
   TABLO STİLLERİ (EGE MODU / GECE MODU)
   -------------------------------------- */
.dark .seo-table th {
    background: #262626 !important; /* Koyu gri (brand-800) başlık arka planı */
    border-bottom-color: #404040 !important;
    color: #ffffff !important; /* Bembeyaz ve okunaklı başlık yazısı */
}

.dark .seo-table td {
    border-bottom-color: #404040 !important;
    color: #d4d4d4 !important; /* Açık gri, göz yormayan ve okunaklı metinler */
}

.dark .seo-table tr:hover td {
    background-color: #404040 !important; /* Fare ile üzerine gelindiğinde belirginleşen satır */
}

/* Mavi ve Kırmızı gibi özel renkli metinlerin Ege modunda parlak kalması için */
.dark .seo-table td.text-blue-600 {
    color: #60a5fa !important;
}
.dark .seo-table td.text-red-600 {
    color: #f87171 !important;
}

/* Gece Modunda AdSense Kutusu */
.dark .adsense-placeholder {
    background: #171717 !important;
    border-color: #404040 !important;
    color: #737373 !important;
}

/* --------------------------------------
   ANİMASYON VE DİĞER STİLLER
   -------------------------------------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

main > section {
    animation: fadeInUp 0.8s ease-out forwards;
}

[aria-label="Breadcrumb"] a {
    transition: all 0.2s;
}

/* Mobil tablolardaki yatay kaydırma için ince ve şık scrollbar */
.overflow-x-auto::-webkit-scrollbar {
    height: 6px;
}
.overflow-x-auto::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* Gece modunda scrollbar çubuklarının renkleri */
.dark .overflow-x-auto::-webkit-scrollbar-track {
    background: #262626;
}
.dark .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #525252;
}

/* Mobil Görsel Optimizasyonu ve Table Fix */
@media (max-width: 768px) {
    .seo-table {
        display: block;
        overflow-x: auto;
    }
    
    figure img {
        max-height: 250px; 
        object-fit: cover;
    }
    
    .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}