/* =====================================================================
   Haber kategorisi sayfası: /oyun-haberleri ve alt kategorileri (+ mobil türler).
   Views/Shared/Components/NewsList/Kategori.cshtml, temalar Infrastructure/Utilities/NewsCategoryThemes.cs.
   OG Kariyer iskeleti (bkz. Views/Kariyer/_KariyerStyles.cshtml), "platform renkleri" (Faruk 2026-10-20):
   haber (mürekkep + OG kırmızısı), xbox (yeşil), playstation (mavi), nintendo (kırmızı), mobil (camgöbeği + sarı).
   Yeni tema = ognc--{key} bloğu (yalnız değişkenler). Görseller 16:9.
   Renkli zeminler iki temada da aynı. Gece modu tuzakları (site.css): a:not(...) link yazısını mercana,
   h1-h6 kuralı (!important) başlığı beyaza, p kuralı paragrafı griye çevirir; renkler iki sınıflı
   seçiciyle, gerekince !important. Site gündüz zemini #f5f5f7: Panel kâğıdı ondan seçilecek kadar koyu.
   ===================================================================== */
.ognc {
    --c-ink: #0f0f1a;
    --c-red: #e30a17;
    --c-text: #0f0f1a;
    --c-muted: #50566a;
    --c-line: rgba(15, 15, 26, .11);
    --c-surface: #ffffff;
    font-family: 'Outfit', -apple-system, 'Segoe UI', sans-serif;
    color: var(--c-text);
    padding: .5rem 0 2.5rem;
}
[data-theme="dark"] .ognc {
    --c-text: #f1f2f7;
    --c-muted: #a6abbd;
    --c-line: rgba(255, 255, 255, .11);
}

/* ---------- Temalar ---------- */
/* Haber merkezi + PC, Mac, VR, endüstri, fuarlar, motorlar, Oyun Perdesi */
.ognc--haber {
    --c-hero-a: #0f0f1a; --c-hero-b: #1c1c29; --c-hero-c: #2b2b3c;
    --c-deco: #e30a17; --c-ring: rgba(255, 255, 255, .12);
    --c-em-bg: #e30a17; --c-em-fg: #ffffff;
    --c-mark1: #e30a17; --c-mark2-bg: #ffffff; --c-mark2-fg: #0f0f1a;
    --c-accent: #e30a17; --c-on-accent: #ffffff;
    --c-bright: #ff6b6b;
    --c-icon: #c8102e;
    --c-hl: rgba(227, 10, 23, .3);
    --c-paper: #eaeaf0;
    /* Mürekkep manşette mürekkep hap seçilmiyor: Açık cam */
    --c-stat-bg: rgba(255, 255, 255, .1);
}
[data-theme="dark"] .ognc--haber { --c-icon: #ff7a7a; --c-hl: rgba(227, 10, 23, .55); --c-paper: #181822; --c-surface: #22222e; }

.ognc--xbox {
    --c-hero-a: #08420a; --c-hero-b: #107c10; --c-hero-c: #178a17;
    --c-deco: #9bf00b; --c-ring: rgba(255, 255, 255, .18);
    --c-em-bg: #ffffff; --c-em-fg: #0b5d0b;
    --c-mark1: #e30a17; --c-mark2-bg: #0f0f1a; --c-mark2-fg: #ffffff;
    --c-accent: #107c10; --c-on-accent: #ffffff;
    --c-bright: #9bf00b;
    --c-icon: #107c10;
    --c-hl: rgba(16, 124, 16, .3);
    --c-paper: #e3efe3;
}
[data-theme="dark"] .ognc--xbox { --c-icon: #6fd36f; --c-hl: rgba(111, 211, 111, .4); --c-paper: #13201a; --c-surface: #1b2b22; }

.ognc--playstation {
    --c-hero-a: #001d52; --c-hero-b: #003791; --c-hero-c: #0057b8;
    --c-deco: #00a3e0; --c-ring: rgba(255, 255, 255, .18);
    --c-em-bg: #ffffff; --c-em-fg: #003791;
    --c-mark1: #e30a17; --c-mark2-bg: #0f0f1a; --c-mark2-fg: #ffffff;
    --c-accent: #0057b8; --c-on-accent: #ffffff;
    --c-bright: #00a3e0;
    --c-icon: #0057b8;
    --c-hl: rgba(0, 87, 184, .25);
    --c-paper: #e2e9f5;
}
[data-theme="dark"] .ognc--playstation { --c-icon: #6cb4ff; --c-hl: rgba(108, 180, 255, .4); --c-paper: #111a2b; --c-surface: #19253b; }

.ognc--nintendo {
    --c-hero-a: #8c000a; --c-hero-b: #c2000e; --c-hero-c: #e60012;
    --c-deco: #0f0f1a; --c-ring: rgba(255, 255, 255, .22);
    --c-em-bg: #ffffff; --c-em-fg: #9a000b;
    /* Kırmızı zeminde kırmızı OG kutusu kaybolur: Mürekkep */
    --c-mark1: #0f0f1a; --c-mark2-bg: #ffffff; --c-mark2-fg: #0f0f1a;
    --c-accent: #d1000f; --c-on-accent: #ffffff;
    --c-bright: #ff6b74;
    --c-icon: #c2000e;
    --c-hl: rgba(230, 0, 18, .25);
    --c-paper: #f4e4e5;
}
[data-theme="dark"] .ognc--nintendo { --c-icon: #ff7a82; --c-hl: rgba(230, 0, 18, .5); --c-paper: #231417; --c-surface: #311c20; }

/* OG Mobil ile aynı renkler (og-mobil.css .ogm) */
.ognc--mobil {
    --c-hero-a: #0a4f61; --c-hero-b: #0b7285; --c-hero-c: #0e8ea4;
    --c-deco: #ffc83d; --c-ring: rgba(223, 246, 249, .22);
    --c-em-bg: #ffc83d; --c-em-fg: #0f0f1a;
    --c-mark1: #e30a17; --c-mark2-bg: #0f0f1a; --c-mark2-fg: #ffffff;
    --c-accent: #ffc83d; --c-on-accent: #0f0f1a;
    --c-bright: #ffc83d;
    --c-icon: #0b7285;
    --c-hl: rgba(255, 200, 61, .85);
    --c-paper: #e0f0f3;
}
[data-theme="dark"] .ognc--mobil { --c-icon: #5fd3e6; --c-hl: rgba(255, 200, 61, .6); --c-paper: #122329; --c-surface: #1a3038; }

/* OG Koleksiyon alt kategorileri (kutu oyunu, LEGO, kitap): og-kit .ogk--koleksiyon ile aynı çuha yeşili + krem */
.ognc--koleksiyon {
    --c-hero-a: #0c3326; --c-hero-b: #11503a; --c-hero-c: #17684b;
    --c-deco: #efdcb2; --c-ring: rgba(239, 220, 178, .2);
    --c-em-bg: #efdcb2; --c-em-fg: #0c3326;
    --c-mark1: #e30a17; --c-mark2-bg: #efdcb2; --c-mark2-fg: #0c3326;
    --c-accent: #17684b; --c-on-accent: #ffffff;
    --c-bright: #efdcb2;
    --c-icon: #146046;
    --c-hl: rgba(23, 104, 75, .3);
    --c-paper: #e2ebe5;
}
[data-theme="dark"] .ognc--koleksiyon { --c-icon: #8fd8b5; --c-hl: rgba(143, 216, 181, .35); --c-paper: #121b17; --c-surface: #1a2621; }

.ognc *, .ognc *::before, .ognc *::after { box-sizing: border-box; }
.ognc h1, .ognc h2, .ognc h3 { font-family: 'Oswald', sans-serif; font-weight: 700; }

/* ---------- Manşet ---------- */
.ognc-hero {
    position: relative; overflow: hidden; overflow: clip; isolation: isolate; color: #fff;
    background: linear-gradient(135deg, var(--c-hero-a) 0%, var(--c-hero-b) 55%, var(--c-hero-c) 100%);
    border-radius: 2rem; padding: clamp(1.4rem, 3.5vw, 2.6rem); margin: 0 0 1.5rem;
}
/* Geometrik süsler: Tema renginde daire sağ altta, halka üstte. */
.ognc-hero::before {
    content: ""; position: absolute; z-index: -1; width: 15rem; height: 15rem; border-radius: 50%;
    right: -4rem; bottom: -8rem; background: var(--c-deco); opacity: .95;
}
.ognc-hero::after {
    content: ""; position: absolute; z-index: -1; width: 17rem; height: 17rem; border-radius: 50%;
    left: 40%; top: -10.5rem; border: 2.1rem solid var(--c-ring);
}
.ognc-hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 1.2rem; }
.ognc-mark { display: inline-flex; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: .04em; line-height: 1; }
.ognc-mark span { padding: .38rem .6rem; }
.ognc-mark span:first-child { background: var(--c-mark1); color: #fff; }
.ognc-mark span:last-child { background: var(--c-mark2-bg); color: var(--c-mark2-fg); }
.ognc .ognc-kicker {
    display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .14); color: #fff !important;
    border-radius: 999px; padding: .32rem .85rem; font-size: .8rem; font-weight: 700; text-decoration: none !important;
    transition: background-color .15s ease;
}
.ognc .ognc-kicker:hover { background: rgba(255, 255, 255, .26); }
.ognc .ognc-h1 { color: #fff !important; font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -.005em; margin: 0 0 1rem; }
.ognc-h1 em { font-style: normal; color: var(--c-em-fg); background: linear-gradient(transparent 12%, var(--c-em-bg) 12%, var(--c-em-bg) 92%, transparent 92%); padding: 0 .12em; }
.ognc .ognc-lead { font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.65; max-width: 40rem; margin: 0 0 1.2rem; color: rgba(255, 255, 255, .88); }
.ognc-stats { display: flex; flex-wrap: wrap; gap: .55rem; }
.ognc-stat {
    display: inline-flex; align-items: baseline; gap: .45rem; background: var(--c-stat-bg, var(--c-ink)); color: #fff;
    border-radius: 999px; padding: .45rem .95rem .45rem .85rem; font-size: .88rem; font-weight: 500;
}
.ognc-stat b { font-family: 'Oswald', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--c-bright); line-height: 1; }

/* ---------- Kategori şeridi: Simgeli hap düğmeler; masaüstünde sarar, telefonda tek satır kayar ---------- */
.ognc-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.ognc .ognc-cat {
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 999px; white-space: nowrap;
    background: var(--c-paper); border: 1px solid var(--c-line); color: var(--c-text) !important; text-decoration: none !important;
    font-size: .88rem; font-weight: 700; transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.ognc .ognc-cat i { color: var(--c-icon); font-size: .95em; width: 1.05em; text-align: center; }
.ognc .ognc-cat:hover { border-color: var(--c-icon); transform: translateY(-2px); }
.ognc .ognc-cat.is-active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent) !important; }
.ognc .ognc-cat.is-active i { color: var(--c-on-accent); }

/* ---------- Paneller ---------- */
.ognc-panel { background: var(--c-paper); border-radius: 2rem; padding: clamp(1.2rem, 3.5vw, 2.4rem); margin-bottom: 1.5rem; }
.ognc .ognc-h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.05; margin: 0 0 1.3rem; color: var(--c-text) !important;
    display: inline-block; position: relative; z-index: 0;
}
.ognc-h2::after { content: ""; position: absolute; left: -.08em; right: -.12em; bottom: .04em; height: .3em; background: var(--c-hl); z-index: -1; border-radius: .1em; }

/* Düğme (öne çıkan haberin içindeki "Haberi oku"; bağlantı kartın kendisi) */
.ognc-btn {
    display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; padding: .55rem 1.1rem;
    background: var(--c-ink); color: #fff; font-weight: 700; font-size: .88rem; line-height: 1.1; white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}
.ognc-btn i { font-size: .78em; }
[data-theme="dark"] .ognc-btn { background: var(--c-accent); color: var(--c-on-accent); }

/* ---------- Öne çıkan haber: 16:9 görsel + metin, tema renginde sert gölge ---------- */
.ognc .ognc-feature {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.4rem; align-items: center;
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 2rem; padding: .8rem;
    color: var(--c-text) !important; text-decoration: none !important; margin-bottom: 1.5rem;
    box-shadow: 0 1.1rem 0 -.55rem var(--c-accent); transition: transform .2s ease, border-color .2s ease;
}
.ognc .ognc-feature:hover { transform: translateY(-3px); border-color: var(--c-icon); }
.ognc-feature__img { display: block; aspect-ratio: 16 / 9; border-radius: 1.4rem; overflow: hidden; background: var(--c-paper); }
.ognc-feature__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ognc-feature:hover .ognc-feature__img img { transform: scale(1.03); }
.ognc-feature__body { display: flex; flex-direction: column; gap: .7rem; padding: .6rem 1rem .6rem 0; min-width: 0; }
.ognc-feature__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.ognc-ftag { display: inline-block; background: var(--c-ink); color: var(--c-bright); border-radius: 999px; padding: .22rem .7rem; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.ognc-feature__title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.12; }
.ognc-feature__desc {
    color: var(--c-muted); font-size: .98rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ognc-feature__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .2rem; }
.ognc-feature:hover .ognc-btn { color: var(--c-bright); }
[data-theme="dark"] .ognc-feature:hover .ognc-btn { color: var(--c-on-accent); filter: brightness(1.12); }
.ognc-date { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--c-muted); }

/* ---------- Haber ızgarası: 16:9 kartlar ---------- */
.ognc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ognc .ognc-card {
    display: flex; flex-direction: column; gap: .45rem; background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: 1.4rem; padding: .55rem .55rem .95rem; color: var(--c-text) !important; text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease;
}
.ognc .ognc-card:hover { transform: translateY(-3px); border-color: var(--c-icon); }
.ognc-card__img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; background: var(--c-paper); margin-bottom: .25rem; }
.ognc-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ognc-card:hover .ognc-card__img img { transform: scale(1.04); }
.ognc-card__paid { position: absolute; top: .5rem; left: .5rem; }
.ognc-card__title {
    font-weight: 800; font-size: 1rem; line-height: 1.35; padding: 0 .35rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ognc-card:hover .ognc-card__title { color: var(--c-icon); }
.ognc-card__desc {
    color: var(--c-muted); font-size: .85rem; line-height: 1.5; padding: 0 .35rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ognc-card .ognc-date { padding: 0 .35rem; margin-top: auto; }
.ognc-grid__ad { grid-column: 1 / -1; }

/* ---------- Sayfalama: Hap düğmeler ---------- */
.ognc .ognc-pager { gap: .35rem; margin: 0; }
.ognc .ognc-pager .page-link {
    border-radius: 999px !important; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text);
    min-width: 2.4rem; text-align: center; font-weight: 700;
}
.ognc .ognc-pager .page-link:hover { border-color: var(--c-icon); color: var(--c-icon); }
.ognc .ognc-pager .active .page-link,
.ognc .ognc-pager .active > .page-link { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.ognc .ognc-pager .disabled .page-link { opacity: .45; background: var(--c-surface); }
[data-theme="dark"] .ognc .ognc-pager .active .page-link,
[data-theme="dark"] .ognc .ognc-pager .active > .page-link { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }

/* ---------- Boş kategori ---------- */
.ognc-empty { text-align: center; padding: 2rem 1rem 1rem; }
.ognc-empty__icon {
    width: 4.2rem; height: 4.2rem; border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center;
    background: var(--c-surface); color: var(--c-icon); font-size: 1.6rem;
}
.ognc .ognc-empty h3 { font-size: 1.6rem; margin: 0 0 .4rem; color: var(--c-text) !important; }
.ognc .ognc-empty p { color: var(--c-muted); margin: 0; }

/* ---------- SSS ---------- */
.ognc-faq { display: grid; gap: .55rem; }
.ognc-faq details { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 1.2rem; padding: .95rem 1.2rem; }
.ognc-faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; color: var(--c-text); }
.ognc-faq summary::-webkit-details-marker { display: none; }
.ognc-faq summary::after { content: "+"; font-family: 'Oswald', sans-serif; font-size: 1.3rem; line-height: 1; color: var(--c-icon); }
.ognc-faq details[open] summary::after { content: "\2212"; }
.ognc .ognc-faq details p { margin: .7rem 0 0; color: var(--c-muted); line-height: 1.65; }

/* ---------- Duyarlılık ---------- */
@media (max-width: 991.98px) {
    .ognc .ognc-feature { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
    .ognc-feature__body { padding: 0 .6rem .6rem; }
    .ognc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ognc-hero::after { left: auto; right: -6rem; top: -9rem; }
}
@media (max-width: 767.98px) {
    /* Telefonda şerit tek satır ve yana kayar; tema kaydırma çubuğu, ok düğmesi yok. */
    .ognc-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .45rem; margin-right: -12px; padding-right: 12px; scrollbar-width: thin; }
    .ognc-cats::-webkit-scrollbar { height: 5px; }
    .ognc-cats::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 999px; }
    .ognc-cats::-webkit-scrollbar-button { display: none; }
}
@supports not selector(::-webkit-scrollbar) {
    .ognc-cats { scrollbar-color: var(--c-line) transparent; }
}
@media (max-width: 575.98px) {
    .ognc-hero, .ognc-panel { border-radius: 1.4rem; }
    .ognc-hero::before { width: 11rem; height: 11rem; right: -4rem; bottom: -6rem; }
    .ognc-grid { grid-template-columns: minmax(0, 1fr); }
    .ognc .ognc-feature { border-radius: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ognc .ognc-feature:hover, .ognc .ognc-card:hover, .ognc .ognc-cat:hover { transform: none; }
    .ognc-feature:hover .ognc-feature__img img, .ognc-card:hover .ognc-card__img img { transform: none; }
}