/*
 * Blog (/blog, /blog/{id}/{slug}) — yalnızca bu sayfalarda yüklenir. Kart görünümü
 * bilesenler/blog-karti.css'te; sayfalama ve boş durum site.css'te (.sayfalama, .bos-durum).
 * Liste açık zeminde beyaz kartlar; yazı okuma genişliğinde (--kap-dar). Kırmızı yalnız hover'da.
 */

.blog-sayfa {
    padding: var(--b-10) 0 var(--bolum-dikey);
    background-color: var(--renk-zemin);
}

.blog-giris {
    max-width: 60ch;
    margin: 0 0 var(--b-8);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-lg);
    line-height: var(--t-satir-govde);
}

/* ── Liste ızgarası (liste sayfası ve "Diğer yazılar") ─────────────────── */

.blog-izgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--izgara-bosluk);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 991.98px) {
    .blog-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .blog-sayfa { padding-top: var(--b-6); }
    .blog-giris { font-size: var(--t-md); }
    .blog-izgara { grid-template-columns: minmax(0, 1fr); }
}

/* ── Sayfalama (ortak .sayfalama) ─────────────────────────────────────── */

.blog-sayfalama {
    margin-top: var(--b-10);
}

/* ── Boş durum (ortak .bos-durum; burada yalnız kap) ──────────────────── */

.blog-bos {
    max-width: 600px;
    margin: 0 auto;
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
}

/* ── Yazı ─────────────────────────────────────────────────────────────── */

.blog-yazi {
    padding: var(--b-10) 0 var(--b-12);
}

.blog-yazi-sutun {
    max-width: var(--kap-dar);
    margin: 0 auto;
}

.blog-yazi-meta {
    display: flex;
    align-items: center;
    gap: var(--b-2);
    margin: 0 0 var(--b-6);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
}

.blog-yazi-kapak {
    aspect-ratio: 16 / 9;
    margin: 0 0 var(--b-8);
    overflow: hidden;
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey-vurgu);
}

.blog-yazi-kapak[hidden] {
    display: none;
}

.blog-yazi-kapak img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Yönetici HTML'i: kendi sınıfı/stili yoktur (temizleyici atar), görünümü buradan alır. */
.blog-icerik {
    color: var(--renk-metin-ikincil);
    font-size: var(--t-lg);
    line-height: var(--t-satir-govde);
    overflow-wrap: anywhere;
}

.blog-icerik > :first-child { margin-top: 0; }
.blog-icerik > :last-child { margin-bottom: 0; }

.blog-icerik p,
.blog-icerik ul,
.blog-icerik ol,
.blog-icerik blockquote,
.blog-icerik figure,
.blog-icerik table,
.blog-icerik pre {
    margin: 0 0 1.2em;
}

.blog-icerik h2,
.blog-icerik h3,
.blog-icerik h4,
.blog-icerik h5,
.blog-icerik h6 {
    margin: 1.8em 0 .6em;
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
}

.blog-icerik h2 { font-size: var(--t-2xl); }
.blog-icerik h3 { font-size: var(--t-xl); }
.blog-icerik h4,
.blog-icerik h5,
.blog-icerik h6 { font-size: var(--t-lg); }

.blog-icerik strong {
    color: var(--renk-metin);
}

.blog-icerik ul,
.blog-icerik ol {
    padding-left: 1.4em;
}

.blog-icerik li + li {
    margin-top: .35em;
}

.blog-icerik a {
    color: var(--renk-metin);
    font-weight: var(--t-orta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-icerik a:hover {
    color: var(--renk-marka);
}

.blog-icerik img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--r-orta);
}

.blog-icerik figcaption {
    margin-top: var(--b-2);
    color: var(--renk-metin-soluk);
    font-size: var(--t-sm);
}

.blog-icerik blockquote {
    padding: var(--b-1) 0 var(--b-1) var(--b-5);
    border-left: 3px solid var(--renk-kenar-guclu);
    color: var(--renk-metin);
}

.blog-icerik table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--t-sm);
}

.blog-icerik th,
.blog-icerik td {
    padding: var(--b-2) var(--b-3);
    border: var(--kenar);
    text-align: left;
}

.blog-icerik pre {
    padding: var(--b-3) var(--b-4);
    overflow-x: auto;
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-vurgu);
    font-size: var(--t-sm);
}

.blog-icerik hr {
    margin: 2em 0;
    border: 0;
    border-top: var(--kenar);
    opacity: 1;
}

.blog-yazi-geri {
    margin: var(--b-10) 0 0;
    padding-top: var(--b-6);
    border-top: var(--kenar);
}

.blog-yazi-geri a {
    display: inline-flex;
    align-items: center;
    gap: var(--b-2);
    min-height: 44px;
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    text-decoration: none;
}

.blog-yazi-geri a:hover {
    color: var(--renk-metin);
    text-decoration: underline;
}

/* ── Diğer yazılar ────────────────────────────────────────────────────── */

.blog-diger {
    padding: var(--bolum-dikey) 0;
    background-color: var(--renk-zemin);
}

.blog-diger h2 {
    margin: 0 0 var(--b-6);
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-2xl);
    font-weight: var(--t-kalin);
}

@media (max-width: 575.98px) {
    .blog-yazi { padding: var(--b-6) 0 var(--b-10); }
    .blog-icerik { font-size: var(--t-md); }
    .blog-diger h2 { font-size: var(--t-xl); }
}