/* ─── ape-blog.css — Anasayfa "Son Yazılar" (.apb) ───────────────────────────────────────────────────────
   ape-ui.css token'larıyla (Bebas Neue / DM Mono / DM Sans, --ape-grad, --ape-blue, 6→12 sütun ızgara) yazıldı.
   Başlık satırı .apg-head ile aynı ölçüler. Gövde: ≥1280 öne çıkan kart (6fr) + satır listesi (4fr); altında tek sütun
   (1024–1279'da 4fr liste ~315px kalıyor, başlıklar 5 satıra çıkıyordu).
   Bebas'ın dar satır yüksekliğinde Türkçe İ noktası / Ç-Ş çengeli kırpılmasın diye overflow'lu metin kutularına
   .2em üst / .16em alt iç boşluk verilir (bkz. .apd-lbl-main). */

.apb {
    position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: .5rem; row-gap: 2rem;
    padding-top: 4rem; padding-bottom: 6rem; color: #000; -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { .apb { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: baseline; } }
/* Telefon: footer'dan önceki son bölüm — alt boşluk küçülür (Keşfet'teki kuralın aynısı) */
@media (max-width: 767.98px) { .apb { padding-top: 3rem; padding-bottom: 2.5rem; } }

/* ── Başlık satırı ── */
.apb-head { grid-column: 1 / span 4; display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
@media (min-width: 768px) { .apb-head { grid-column: 2 / span 7; } }
.apb-icon { font-size: 2rem; height: .78em; width: .78em; flex: none; }
.apb-title { font-family: var(--ape-display); font-weight: 400; text-transform: uppercase; font-size: 2rem; line-height: 1.12; margin: 0; color: inherit; }
.apb-headlink { grid-column: span 2; display: flex; align-items: flex-end; justify-content: flex-end; text-align: right; padding-bottom: .25rem; white-space: nowrap; }
@media (min-width: 768px) { .apb-headlink { grid-column: 9 / span 3; padding-bottom: 0; } }

/* ── Gövde ── */
.apb-body { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
@media (min-width: 768px) { .apb-body { grid-column: 2 / span 10; } }
@media (min-width: 1280px) {
    .apb-body { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); column-gap: 1.5rem; }
    .apb-body--tek { grid-template-columns: minmax(0, 1fr); }
}

/* Ortak meta satırı: mono, büyük harf (tarih · okuma süresi / kategori) */
.apb-meta {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; row-gap: .25rem; margin: 0;
    font-family: var(--ape-mono); font-size: .75rem; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase;
}
.apb-dot { opacity: .6; }
.apb-rcat { display: inline-flex; gap: .5rem; }
@media (max-width: 559.98px) { .apb-rcat:not(.apb-rcat--tek) { display: none; } }

/* Görsel kutuları: PictureImage çıktısı doldurur; görsel yoksa gradyan yer tutucu */
.apb-media picture, .apb-thumb picture { display: contents; }
.apb-media img, .apb-thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.apb-media--bos { background: var(--ape-grad); }

/* ── Öne çıkan kart ── */
.apb-feature {
    position: relative; isolation: isolate; overflow: hidden; border-radius: .5rem; background: #111; color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5;
}
@media (min-width: 560px) { .apb-feature { aspect-ratio: 16 / 10; } }
@media (min-width: 1280px) { .apb-feature { aspect-ratio: auto; min-height: clamp(30rem, 38vw, 38rem); } }
.apb-media { position: absolute; inset: 0; z-index: -1; }
.apb-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 42%, rgba(0,0,0,0) 72%);
}
/* Hover/odakta gradyan çerçeve (Spotlight kartındaki çerçevenin aynısı, maskeyle yalnız kenar) */
.apb-feature::after {
    content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 2px; pointer-events: none;
    background: var(--ape-grad); opacity: 0; transition: opacity .6s cubic-bezier(.45, .03, .52, .96);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.apb-feature:hover::after, .apb-feature:focus-within::after { opacity: 1; }
.apb-feature:hover .apb-media img, .apb-feature:focus-within .apb-media img { transform: scale(1.04); }
/* Pill, içerik dolgusuyla aynı hizada (sol kenar başlıkla hizalı) */
.apb-fcat { position: absolute; top: 1rem; left: 1rem; z-index: 1; }
@media (min-width: 768px) { .apb-fcat { top: 1.5rem; left: 1.5rem; } }
@media (min-width: 1280px) { .apb-fcat { top: 2rem; left: 2rem; } }
/* Kartın üstü açık tonlu görsellerde beyaz-%30 pill okunmuyor → koyu cam zemin */
.apb-fcat .ape-pill { background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Konumsuz (static) kalmalı: başlık linkinin ::after'ı kartı (.apb-feature) referans alıp tamamını kaplar */
.apb-fcontent { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; max-width: 46rem; }
@media (min-width: 768px) { .apb-fcontent { padding: 1.5rem; gap: 1rem; } }
@media (min-width: 1280px) { .apb-fcontent { padding: 2rem; } }
.apb-ftitle {
    margin: 0; padding-top: .1em; font-family: var(--ape-display); font-weight: 400; text-transform: uppercase;
    font-size: 2.25rem; line-height: .95; color: inherit;
}
@media (min-width: 768px) { .apb-ftitle { font-size: 3.5rem; } }
@media (min-width: 1280px) { .apb-ftitle { font-size: clamp(3rem, 4.2vw, 4.5rem); } }
/* site.css'teki genel a:hover { opacity: .8 } stretched link'te başlığı soldurur → başlık linklerinde kapatılır */
.apb-ftitle a, .apb-ftitle a:hover, .apb-rtitle a:hover { color: inherit; text-decoration: none; opacity: 1; }
/* Kartın tamamı tıklanır (başlık linki genişler); odak halkası kartın üzerinde görünür */
.apb-ftitle a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: .5rem; }
.apb-ftitle a:focus-visible { outline: none; }
.apb-ftitle a:focus-visible::after { outline: 2px solid #fff; outline-offset: -4px; }
.apb-fdesc {
    margin: 0; max-width: 38rem; font-family: var(--ape-sans); font-size: .875rem; line-height: 1.4; letter-spacing: .01em;
    color: rgba(255,255,255,.82); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
@media (min-width: 768px) { .apb-fdesc { font-size: 1rem; } }
@media (max-width: 559.98px) { .apb-fdesc { display: none; } }
.apb-feature .apb-meta { color: rgba(255,255,255,.9); }

/* ── Satır listesi ── */
.apb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.apb-item { border-top: 1px solid rgba(0,0,0,.14); }
.apb-item:last-child { border-bottom: 1px solid rgba(0,0,0,.14); }
@media (min-width: 1280px) {
    .apb-list { justify-content: space-between; }
    .apb-item:first-child { border-top: 0; }
    .apb-item:last-child { border-bottom: 0; }
    .apb-item { flex: 1 1 0; display: flex; }
    .apb-item + .apb-item { border-top: 1px solid rgba(0,0,0,.14); }
}
.apb-row {
    position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem;
    padding: 1.25rem 0;
}
@media (min-width: 1280px) { .apb-row { padding: 1.5rem 0; } .apb-item:first-child .apb-row { padding-top: 0; } .apb-item:last-child .apb-row { padding-bottom: 0; } }
.apb-rtext { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.apb-row .apb-meta { color: rgba(0,0,0,.58); }
.apb-rtitle { margin: 0; font-family: var(--ape-display); font-weight: 400; text-transform: uppercase; font-size: 1.625rem; line-height: 1; color: inherit; }
@media (min-width: 768px) { .apb-rtitle { font-size: 2rem; } }
@media (min-width: 1280px) { .apb-rtitle { font-size: clamp(1.75rem, 2.2vw, 2rem); } }
.apb-rtitle a { color: inherit; text-decoration: none; }
.apb-rtitle a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.apb-rtitle a:focus-visible { outline: none; }
.apb-rtitle a:focus-visible::after { outline: 2px solid var(--ape-blue); outline-offset: 2px; border-radius: .25rem; }
/* Başlık kayması (Keşfet etiketleri / ape-btn gibi): klon bir kutu aşağıda bekler, hover'da ikisi birlikte yukarı kayar */
.apb-roll { display: block; position: relative; overflow: hidden; margin: -.2em 0 -.16em; }
.apb-roll-main, .apb-roll-clone { display: block; padding: .2em 0 .16em; transition: transform .6s cubic-bezier(.45, .03, .52, .96); }
.apb-roll-clone { position: absolute; top: 100%; left: 0; width: 100%; color: var(--ape-blue); }
.apb-row:hover .apb-roll-main, .apb-row:hover .apb-roll-clone,
.apb-row:focus-within .apb-roll-main, .apb-row:focus-within .apb-roll-clone { transform: translateY(-100%); }
.apb-thumb {
    position: relative; width: 5rem; aspect-ratio: 1; border-radius: 1rem; overflow: hidden; background: var(--ape-blue); flex: none;
}
@media (min-width: 768px) { .apb-thumb { width: 6rem; } }
.apb-row:hover .apb-thumb img, .apb-row:focus-within .apb-thumb img { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
    .apb-media img, .apb-thumb img, .apb-roll-main, .apb-roll-clone, .apb-feature::after { transition: none; }
    .apb-feature:hover .apb-media img, .apb-row:hover .apb-thumb img { transform: none; }
}