/* Haber detayındaki özel oyun sayfası şeridi (/gta-6 gibi): Yazar satırının altında tek satır,
   haberin okunuşunu bölmesin diye küçük. Renkler satır içi değişkenlerden: --ozs-a / --ozs-b sayfanın
   vurgu renkleri (GameShowcases.AccentColor/AccentColor2), --ozs-ink degrade etiketin yazı rengi
   (ShowcaseCatalog.InkOn, açık sarı vurguda beyaz okunmaz). Metin vurgu renginde değil, tema renginde:
   Vurgu renkleri admin'den serbest girildiği için açık zeminde okunmayabilir.
   Sınıf adlarında "ad", "sponsor", "banner" bilerek yok: Reklam engelleyicilerin kozmetik filtreleri gizliyor.
   Gece modu tuzağı: site.css'teki genel "a:not(...)" kuralı (özgüllük 0,6,0) linki mercana çevirir;
   bu dosyadaki yazı renkleri bu yüzden !important. */

.og-ozel-serit {
    --ozs-a: #ff3d7f;
    --ozs-b: #ffb547;
    --ozs-ink: #14101c;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1.5rem;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--border-color, #dee2e6);
    border: 1px solid color-mix(in srgb, var(--ozs-a) 32%, var(--border-color, #dee2e6));
    border-radius: 14px;
    background: var(--bg-card, #fff);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ozs-a) 9%, var(--bg-card, #fff)) 0%,
        color-mix(in srgb, var(--ozs-b) 5%, var(--bg-card, #fff)) 100%);
    color: var(--text-primary, #212529) !important;
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    line-height: 1.35;
    text-decoration: none !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.og-ozel-serit:hover {
    border-color: var(--ozs-a);
    box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--ozs-a) 70%, transparent);
    color: var(--text-primary, #212529) !important;
}

.og-ozel-serit:focus-visible {
    outline: 2px solid var(--ozs-a);
    outline-offset: 2px;
}

.og-ozel-serit .og-ozel-serit__etiket {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--ozs-a), var(--ozs-b));
    color: var(--ozs-ink) !important;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.og-ozel-serit .og-ozel-serit__metin {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary, #212529) !important;
    text-wrap: pretty;   /* telefonda "şey" tek başına alt satıra düşmesin */
}

.og-ozel-serit .og-ozel-serit__metin strong {
    font-weight: 700;
    color: inherit !important;
}

.og-ozel-serit .og-ozel-serit__ok {
    flex: 0 0 auto;
    font-size: .85rem;
    color: var(--text-secondary, #6c757d) !important;
    transition: transform .2s ease;
}

.og-ozel-serit:hover .og-ozel-serit__ok {
    transform: translateX(3px);
}

/* Gece: Zemin koyu sahne, vurgu yalnız ince bir ton olarak. Değişkenler (--bg-card, --text-primary)
   site.css'te zaten dönüyor; burada yalnız tonu biraz artırıyoruz ki koyu zeminde renk seçilsin. */
[data-theme="dark"] .og-ozel-serit {
    border-color: color-mix(in srgb, var(--ozs-a) 38%, var(--border-color, #2a2a4a));
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ozs-a) 14%, var(--bg-card, #16213e)) 0%,
        color-mix(in srgb, var(--ozs-b) 7%, var(--bg-card, #16213e)) 100%);
    color: #e8e8ee !important;
}

[data-theme="dark"] .og-ozel-serit:hover {
    border-color: var(--ozs-a);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ozs-a) 30%, transparent), 0 10px 24px -16px rgba(0, 0, 0, .8);
    color: #e8e8ee !important;
}

[data-theme="dark"] .og-ozel-serit .og-ozel-serit__metin {
    color: #e8e8ee !important;
}

[data-theme="dark"] .og-ozel-serit .og-ozel-serit__ok {
    color: #a0a0b0 !important;
}

@media (max-width: 575.98px) {
    .og-ozel-serit {
        gap: 10px;
        font-size: .9rem;
    }

    .og-ozel-serit .og-ozel-serit__etiket {
        padding: 4px 8px;
        font-size: .72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .og-ozel-serit,
    .og-ozel-serit .og-ozel-serit__ok {
        transition: none;
    }

    .og-ozel-serit:hover .og-ozel-serit__ok {
        transform: none;
    }
}