/*
 * Blog kartı — ana sayfadaki blog şeridi, /blog listesi ve yazı altındaki "diğer yazılar" ortak
 * kullanır. Kart taban görünümü §6.7 ile aynı: beyaz yüzey, ince kenar, gölge yalnız üzerine
 * gelince (kalkma/görsel yakınlaştırma yok). Görsel kartın üst kenarına yaslanır.
 *
 * Kartın bulunduğu yerleşim (yatay şerit, ızgara) kendi sayfa CSS'indedir; kullanan view
 * @section Styles ile bu dosyayı yükler.
 */

.blog-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
    line-height: var(--t-satir-govde);
    transition: border-color var(--sure-orta) ease, box-shadow var(--sure-orta) ease;
}

.blog-kart:hover {
    border-color: var(--renk-kenar-guclu);
    box-shadow: var(--golge-2);
}

.blog-gorsel {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--renk-yuzey-vurgu);
}

/* Görsel yoksa ya da açılamazsa (onerror ile gizlenir) altındaki sade simge görünür. */
.blog-gorsel-yer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--gri-400);
    font-size: var(--t-3xl);
}

.blog-gorsel img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-gorsel img[hidden] {
    display: none;
}

.blog-kart h3 {
    display: -webkit-box;
    margin: var(--b-4) var(--kart-ic) var(--b-2);
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-lg);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-siki);
}

.blog-kart h3 a {
    color: inherit;
    text-decoration: none;
}

.blog-kart:hover h3 a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Kartın tamamı tıklanabilir: başlık bağlantısı kartı kaplar. */
.blog-kart h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.blog-kart h3 a:focus-visible {
    outline: none;
}

.blog-kart:has(h3 a:focus-visible) {
    outline: var(--odak-cizgi);
    outline-offset: 2px;
    box-shadow: var(--odak-halkasi);
}

.blog-ozet {
    display: -webkit-box;
    margin: 0 var(--kart-ic) var(--b-3);
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    line-height: var(--t-satir-govde);
}

.blog-kart time {
    margin: auto var(--kart-ic) var(--kart-ic);
    color: var(--renk-metin-soluk);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .blog-kart { transition: none; }
}