/* =====================================================================
   Okuma sayfalarının altındaki bağlantılı haberler (haber ve inceleme detayı), Faruk 2026-10-23:
   "Oyun profilindeki haberler gibi görünsün, 16:9." İşaretleme _OgpHaberSatiri.cshtml (profil satırı).
   Okuma sayfası og-kit.css ve og-profil.css yüklemez (ağır ve sayfayı bloklar); bu yüzden satırın kuralları
   og-profil.css'teki .ogp-row bloğunun kopyası, renkler .ogk ile aynı değişkenlerde.
   Bilerek farklı olanlar (Faruk 2026-10-23, önizlemede B seçeneği, başlıksız): Görsel 15rem (profilde 12.5rem),
   başlık 1.12rem (profilde 1.05rem), telefonda tarih .62rem (profilde .78rem). Diğer telefon kuralları profille aynı. Gerisini değiştirirsen ötekini de değiştir.
   ===================================================================== */

.og-ilgili-haberler {
    --k-text: #0f0f1a;
    --k-muted: #50566a;
    --k-line: rgba(15, 15, 26, .11);
    --k-surface: #ffffff;
    --k-paper: #eaeaf0;
    --k-icon: #c8102e;

    display: grid;
    gap: .7rem;
    margin: 1.5rem 0 2rem;
    font-family: 'Outfit', -apple-system, 'Segoe UI', sans-serif;
    color: var(--k-text);
}
[data-theme="dark"] .og-ilgili-haberler {
    --k-text: #f1f2f7;
    --k-muted: #a6abbd;
    --k-line: rgba(255, 255, 255, .11);
    --k-surface: #22222e;
    --k-paper: #181822;
    --k-icon: #ff7a7a;
}

.og-ilgili-haberler .ogp-row {
    position: relative; display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: .55rem 1.1rem .55rem .55rem;
    background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 1.4rem; color: var(--k-text) !important; text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease;
}
.og-ilgili-haberler .ogp-row:hover { transform: translateY(-2px); border-color: var(--k-icon); }
.og-ilgili-haberler .ogp-row__img { position: relative; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; background: var(--k-paper); display: flex; align-items: center; justify-content: center; color: var(--k-muted); font-size: 1.4rem; }
.og-ilgili-haberler .ogp-row__img img { width: 100%; height: 100%; object-fit: cover; }
.og-ilgili-haberler .ogp-row__title { display: block; font-weight: 800; font-size: 1.12rem; line-height: 1.3; margin-bottom: .3rem; }
.og-ilgili-haberler .ogp-row:hover .ogp-row__title { color: var(--k-icon); }
.og-ilgili-haberler .ogp-row__spot { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; line-height: 1.5; color: var(--k-muted); margin-bottom: .35rem; }
.og-ilgili-haberler .ogp-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; font-size: .78rem; color: var(--k-muted); }
.og-ilgili-haberler .ogp-row .og-paid-tag { margin-bottom: .3rem; }

@media (max-width: 575.98px) {
    .og-ilgili-haberler .ogp-row { grid-template-columns: 7.5rem minmax(0, 1fr); gap: .8rem; padding-right: .8rem; }
    .og-ilgili-haberler .ogp-row__spot { display: none; }
    .og-ilgili-haberler .ogp-row__title { font-size: .95rem; }
    /* Telefonda tarih geri planda (Faruk 2026-10-23: PC'de aynı, telefonda 10 px) */
    .og-ilgili-haberler .ogp-row__meta { font-size: .62rem; letter-spacing: .01em; }
    .og-ilgili-haberler .ogp-row__meta .fa-clock { font-size: .9em; }
}
@media (prefers-reduced-motion: reduce) {
    .og-ilgili-haberler .ogp-row:hover { transform: none; }
}