/* ============================================================================
 *  YAZILIMPARK - BLOG & GENEL STİL DÜZELTMELERİ
 * ============================================================================
 *  
 *  Bu dosya, pages.css'ten SONRA yüklenir ve aşağıdaki konularda DÜZELTMELER
 *  ve İYİLEŞTİRMELER içerir:
 *
 *  1. RENK DÜZELTMELERİ — Mavi/koyu zeminlerde başlık ve yazıların okunması
 *  2. SINGLE (YAZI DETAY) SAYFA — Layout, hero, sidebar gizleme
 *  3. BLOG LİSTE SAYFA — Hero, arama, kartlar
 *  4. YAZI İÇİ ÖZEL ELEMENTLER — Paket kutuları, fiyat tablosu, CTA
 *  5. MOBİL RESPONSIVE — Yatay overflow tamamen kapatılır
 *
 *  DÜZENLEME REHBERİ:
 *  - Her bölümün başında ne yaptığı yazılı
 *  - Her !important'ın yanında neden kullanıldığı yazılı
 *  - Yeni bir blog özelliği eklersen "YAZI İÇİ ÖZEL ELEMENTLER" bölümüne ekle
 *
 *  YÜKLEME SIRASI:
 *  header.php içinde: base.css -> layout.css -> components.css -> pages.css -> blog.css
 *  Bu dosya EN SONDA yüklenir, böylece diğerlerini override edebilir.
 *
 * ============================================================================
 */


/* ============================================================================
 *  BÖLÜM 1: GLOBAL OVERFLOW KORUMASI
 * ============================================================================
 *  Mobilde yatay kaydırma (kelimelerin sağdan kesilmesi) sorununu çözer.
 *  Tüm site genelinde geçerli. html ve body'ye uygulanır.
 * ============================================================================ */

html,
body {
    overflow-x: hidden;   /* Yatay kaydırma engellenir */
    max-width: 100%;      /* Hiçbir çocuk element bunu aşamaz */
}


/* ============================================================================
 *  BÖLÜM 2: RENK DÜZELTMELERİ - KOYU ZEMİNDE BEYAZ YAZI
 * ============================================================================
 *  Sitenizde mavi/lacivert gradient kullanan tüm bölümlerde başlık ve metnin
 *  BEYAZ olduğundan emin olur. Önceki CSS'te bazı yerlerde renk override
 *  ediliyordu, burada hepsini garantiye alıyoruz.
 *
 *  Etkilenen bölümler:
 *    - .single-hero        --> Yazı detay sayfası başlık alanı
 *    - .blog-hero          --> Blog liste sayfası başlık alanı
 *    - .sidebar-cta        --> Yazı sayfası yan CTA kutusu (gizli ama tedbir)
 *    - .cta-section        --> Sayfaların altındaki çağrı bölümü
 *
 *  !important kullanım sebebi:
 *    pages.css içindeki sonraki kurallar (özellikle h2, h3) renk override
 *    edebiliyor. !important burada kasıtlı ve gereklidir.
 * ============================================================================ */

/* 2.1 - SINGLE HERO (yazı detay sayfası başlık alanı) */
.single-hero,
.single-hero h1,
.single-hero h2,
.single-hero p,
.single-hero a,
.single-hero span,
.single-hero time,
.single-hero svg {
    color: #ffffff !important;       /* Override: pages.css teki h1 koyu rengi */
    stroke: #ffffff;                  /* SVG ikonlar için (calendar, clock) */
}

.single-hero .single-title {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);  /* Okunabilirlik için hafif gölge */
}

.single-hero .single-category-badge {
    background: rgba(255, 255, 255, 0.18);       /* Şeffaf beyaz arka plan */
    backdrop-filter: blur(8px);                  /* Modern frosted glass efekti */
    -webkit-backdrop-filter: blur(8px);          /* Safari desteği */
}

.single-hero .single-category-badge:hover {
    background: rgba(255, 255, 255, 0.28);
}

.single-hero .single-meta {
    opacity: 0.92;   /* Tarih ve okuma süresi hafif soluk */
}


/* 2.2 - BLOG LİSTE HERO (blog ana sayfası başlık alanı) */
.blog-hero,
.blog-hero h1,
.blog-hero p,
.blog-hero span {
    color: #ffffff !important;       /* Override: gradient zemin üzeri beyaz */
}

.blog-hero .blog-hero-title {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.blog-hero .blog-hero-desc {
    opacity: 0.92;
}


/* 2.3 - SIDEBAR CTA (yazı sayfası yan CTA - şu an gizli, ileride açılırsa hazır) */
.sidebar-cta,
.sidebar-cta h3,
.sidebar-cta h4,
.sidebar-cta p {
    color: #ffffff !important;
}


/* 2.4 - CTA SECTION (sayfa altı çağrı bölümü) */
.cta-section,
.cta-section h2,
.cta-section p {
    color: #ffffff !important;
}


/* ============================================================================
 *  BÖLÜM 3: SINGLE - YAZI DETAY SAYFA DÜZENİ
 * ============================================================================
 *  - Sidebar (Profesyonel Destek + Kategoriler) gizlenir
 *  - İçerik tek kolon, ortalı, max 900px (okunabilirlik için ideal genişlik)
 *  - Mevcut HTML'e dokunmadan sadece CSS ile yapılır
 *    (sonra "sidebar açalım" denirse 2 satır CSS değiştirilerek geri açılabilir)
 * ============================================================================ */

/* 3.1 - Sidebar gizleme */
.single-layout .single-sidebar {
    display: none;   /* Sağ sütun gizleniyor. Geri açmak için: display: block; */
}

/* 3.2 - Grid'i tek kolona çevir (sidebar olmadığı için tek kolon olacak) */
.single-layout {
    display: block;            /* Grid yerine basit blok (tek kolon) */
    max-width: 1100px;         /* Okunabilirlik için: daha geniş içerik alanı */
    margin: 0 auto;            /* Ortala */
    padding: 0 24px;           /* Sağ-sol nefes alma payı */
}

/* 3.3 - İçerik kartı görünümü */
.single-content-area {
    max-width: 100%;                       /* Konteynerini taşmasın */
    overflow-wrap: break-word;             /* Uzun kelimeler sağda taşmasın */
    word-wrap: break-word;                 /* Eski tarayıcı desteği */
}


/* ============================================================================
 *  BÖLÜM 4: YAZI İÇİ ÖZEL ELEMENTLER
 * ============================================================================
 *  Blog yazılarının içine eklenen özel HTML elementleri için stiller:
 *    - Fiyat tablosu (blog-price-table)
 *    - 3'lü paket kutuları (blog-pricing-cta)
 *    - Buton çeşitleri (btn-outline-blue, btn-solid-blue, btn-cta-dark)
 *
 *  Yeni bir özellik (örn: bilgi kutusu, alıntı stili) eklersen burada
 *  yeni alt-bölüm aç (4.5, 4.6 vb.).
 * ============================================================================ */

/* 4.1 - FİYAT TABLOSU (blog-price-table)
   Kullanım: <table class="blog-price-table">
   Örn: Web sitesi fiyatları, paket karşılaştırma tablosu */
.single-content .blog-price-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.9375rem;
}

.single-content .blog-price-table th,
.single-content .blog-price-table td {
    padding: 12px 14px;
    text-align: left;
    border: 1px solid #e5e7eb;
}

.single-content .blog-price-table thead th {
    background: #f5f7fa;
    font-weight: 600;
    color: var(--color-primary);
}

.single-content .blog-price-table tbody tr:nth-child(even) {
    background: #fafbfc;   /* Çift satırları hafif farklı yap (okuma kolaylığı) */
}


/* 4.2 - PAKET KUTULARI (3 lü grid)
   Kullanım: <div class="blog-pricing-cta"><div class="pricing-card">...</div></div>
   Featured: <div class="pricing-card featured"> (orta kutu vurgulanır)
   Badge: <span class="pricing-badge">EN POPÜLER</span> */
.single-content .blog-pricing-cta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 eşit kolon */
    gap: 20px;
    margin: 40px 0;
}

.single-content .pricing-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;            /* Badge in absolute konumlanması için */
}

.single-content .pricing-card.featured {
    border: 2px solid var(--color-accent);
    box-shadow: 0 4px 16px rgba(26, 110, 245, 0.15);   /* Mavi parlama efekti */
}

.single-content .pricing-badge {
    position: absolute;
    top: -12px;                    /* Kutunun üst kenarına oturt */
    left: 50%;
    transform: translateX(-50%);   /* Yatayda ortala */
    background: var(--color-accent);
    color: #ffffff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.single-content .pricing-card h3 {
    font-size: 1.25rem;
    margin: 0 0 8px;
    color: var(--color-primary);
}

.single-content .pricing-subtitle {
    color: #6b7280;
    font-size: 0.875rem;
    margin: 0 0 16px;
}

.single-content .pricing-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 4px;
    line-height: 1.1;
}

.single-content .pricing-price span {
    font-size: 0.875rem;
    font-weight: 400;
    color: #6b7280;
}

.single-content .pricing-yearly {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 20px;
}

.single-content .pricing-card ul {
    text-align: left;
    padding-left: 20px;
    margin: 0 0 24px;
    font-size: 0.9375rem;
    line-height: 1.8;
}


/* 4.3 - YAZI İÇİ BUTONLAR */

/* Outline buton (ikinci tercih için, çevreli) */
.single-content .btn-outline-blue {
    display: block;
    background: #ffffff;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.single-content .btn-outline-blue:hover {
    background: var(--color-accent);
    color: #ffffff;
}

/* Solid buton (ana CTA için, dolu mavi) */
.single-content .btn-solid-blue {
    display: block;
    background: var(--color-accent);
    color: #ffffff;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.single-content .btn-solid-blue:hover {
    background: #1557d4;   /* Hover da daha koyu mavi */
    color: #ffffff;
}

/* Dark buton (büyük CTA için, koyu lacivert) */
.single-content .btn-cta-dark {
    display: inline-block;
    background: var(--color-primary);
    color: #ffffff;
    padding: 14px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.0625rem;
    transition: transform 0.2s ease;
}

.single-content .btn-cta-dark:hover {
    background: #1a2a6b;
    color: #ffffff;
    transform: translateY(-2px);   /* Hover da hafif yukarı zıplama */
}

/* CTA wrapper lar (buton çevresi düzenleme) */
.single-content .blog-cta-center {
    text-align: center;
    margin: 32px 0;
}

.single-content .blog-cta-help {
    text-align: center;
    color: #6b7280;
    font-size: 0.9375rem;
}

.single-content .blog-cta-help a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}


/* ============================================================================
 *  BÖLÜM 5: BLOG LİSTE SAYFASI
 * ============================================================================
 *  /blog adresindeki yazıların listelendiği sayfa için stiller:
 *    - Arama bölümü hero nun altına alındı (sade görünüm)
 *    - Blog kart görselleri 1200x630 oranında, kırpılmadan
 * ============================================================================ */

/* 5.1 - ARAMA BÖLÜMÜ (hero ALTINDA, beyaz arka planda)
   blog.php de <section class="blog-search-section"> içine taşındı */
.blog-search-section {
    background: #ffffff;
    padding: 24px 0;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    z-index: 5;
}

.blog-search-section .blog-search-form {
    max-width: 700px;
    margin: 0 auto;
}

.blog-search-section .search-input-wrapper {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-search-section .search-input {
    color: var(--color-text);
}


/* 5.2 - BLOG KART GÖRSELLERİ (1200x630 oranında, kırpılmadan)
   .blog-card-image konteyneri her zaman 1200x630 oranını korur
   .blog-card-image img -> object-fit: contain -> resim kırpılmaz */
.blog-card-image {
    position: relative;
    height: auto;
    aspect-ratio: 1200 / 630;   /* Modern tarayıcılarda oran korunur */
    overflow: hidden;
    background: #f5f7fa;        /* Boş alan rengi (eğer oran tutmazsa) */
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;        /* Resim kırpılmaz, oran korunur */
    transition: transform 400ms ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.03);     /* Hover da hafif zoom efekti */
}


/* ============================================================================
 *  BÖLÜM 6: MOBİL DÜZENLEMELER (<=768px)
 * ============================================================================
 *  Yatay kaydırma, taşan kelimeler, çok kolonlu grid lerin tek kolona inmesi.
 *
 *  KRİTİK: Bu bölümdeki tüm `max-width: 100%` ve `overflow-x: hidden` kuralları,
 *  mobilde yatay scroll u kapatmak için gereklidir. Hiçbirini kaldırma!
 * ============================================================================ */

@media (max-width: 768px) {

    /* 6.1 - ANA KONTEYNERLER - viewport u kesinlikle aşmasın */
    .single-hero,
    .single-main,
    .single-layout,
    .single-content-area,
    .blog-hero,
    .blog-search-section,
    .single-content {
        max-width: 100%;       /* Hiçbiri ekran genişliğini aşmasın */
        overflow-x: hidden;    /* Aşarsa bile kesilsin (scroll çıkmasın) */
    }

    /* 6.2 - HERO MOBİL - sıkı padding, küçük başlık */
    .single-hero {
        padding: 32px 0 28px;
    }

    .single-hero .single-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .single-hero .single-meta {
        font-size: 0.875rem;
        gap: 14px;
    }

    /* 6.3 - İÇERİK DÜZENİ MOBİL - edge-to-edge, kart efekti kapatılır */
    .single-layout {
        padding: 0;            /* Mobilde sağ-sol boşluk kaldırılır */
        max-width: 100%;
    }

    .single-content-area {
        background: #ffffff;
        border-radius: 0;      /* Mobilde tam genişlik için yuvarlak köşeler kapatılır */
        box-shadow: none;      /* Mobilde gölge gereksiz */
        padding: 24px 16px;
        margin: 0;
    }

    /* 6.4 - İÇERİK KELİMELERİ TAŞMASIN */
    .single-content,
    .single-content p,
    .single-content li,
    .single-content h2,
    .single-content h3,
    .single-content h4,
    .single-content blockquote {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;             /* Uzun kelimeleri tireler ile bölmeyi dene */
        -webkit-hyphens: auto;
    }

    .single-content h2 {
        font-size: 1.375rem;
        line-height: 1.3;
    }

    .single-content h3 {
        font-size: 1.125rem;
    }

    /* 6.5 - TABLO MOBİL - sadece tablo scroll lansın, sayfa değil */
    .single-content table,
    .single-content .blog-price-table {
        display: block;
        max-width: 100%;
        width: 100%;
        overflow-x: auto;                       /* Yatay scroll sadece burada */
        -webkit-overflow-scrolling: touch;      /* iOS ta düzgün scroll */
        font-size: 0.875rem;
    }

    /* 6.6 - PAKET KUTULARI MOBİL - 3 kolondan 1 kolona iner */
    .single-content .blog-pricing-cta {
        grid-template-columns: 1fr;             /* Tek kolon */
        gap: 16px;
        max-width: 100%;
    }

    .single-content .pricing-card {
        max-width: 100%;
    }

    /* 6.7 - KOD BLOKLARI MOBİL */
    .single-content pre,
    .single-content code {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    /* 6.8 - TOC (İÇİNDEKİLER) MOBİL */
    .toc-card {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* 6.9 - BLOG LİSTE HERO + ARAMA MOBİL */
    .blog-hero {
        padding: 32px 0;
    }

    .blog-search-section {
        padding: 16px 0;
    }

    /* 6.10 - BREADCRUMB MOBİL - uzun başlıklarda alt satıra geç */
    .breadcrumb,
    .breadcrumb ol {
        flex-wrap: wrap;       /* Uzun zincirde alt satıra inebilsin */
        font-size: 0.8125rem;
    }
}


/* ============================================================================
 *  BÖLÜM 7: ÇOK KÜÇÜK EKRAN (<=480px)
 * ============================================================================
 *  Küçük telefonlar (iPhone SE, eski Androidler) için ekstra sıkılaştırma.
 * ============================================================================ */

@media (max-width: 480px) {
    .single-hero .single-title {
        font-size: 1.25rem;
    }

    .single-content-area {
        padding: 20px 14px;
    }

    .single-content .pricing-card {
        padding: 20px 16px;
    }

    .single-content h2 {
        font-size: 1.25rem;
    }
}


/* ============================================================================
 *  SON - Bu dosya hakkında not:
 *  Yeni bir blog özelliği eklemek istersen ilgili bölüme git, yeni sınıf adı
 *  ile aynı yapıyı koru. !important ı sadece zorunda kalırsan kullan ve
 *  yanına yorum yaz ki ileride neden olduğu anlaşılsın.
 * ============================================================================ */