/* ======================================================================
   oyunhaberleri.net - dinamik site katmani

   style.css (prototip tasarimi) uzerine biner. Burada yalnizca
   prototipte karsiligi olmayan yeni bilesenler tanimlanir:
   sayfalama, arsiv basliklari, makale govdesi, yorum agaci,
   arama, bos durumlar, hata sayfasi.
   ====================================================================== */

:root {
    --oh-bg: #09090b;
    --oh-surface: #121216;
    --oh-surface-2: #17171d;
    --oh-border: #26262e;
    --oh-text: #f4f4f5;
    --oh-muted: #9b9ba7;
    --oh-purple: #8b5cf6;
    --oh-cyan: #06b6d4;
    --oh-rose: #f43f5e;
    --oh-amber: #f59e0b;
    --oh-green: #22c55e;
    --oh-radius: 14px;
}

body {
    background: var(--oh-bg);
    color: var(--oh-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    margin: 0;
}

.site-main { display: block; min-height: 60vh; }

.container {
    width: min(1280px, 100% - 2.5rem);
    margin-inline: auto;
}

.section-block { margin: 3.5rem auto; }

img { max-width: 100%; height: auto; }

a { color: inherit; }

/* ---------------------------------------------------------------- navigasyon */

.nav-login-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--oh-purple), var(--oh-cyan));
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease;
}

.nav-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(139, 92, 246, .38);
}

.nav-search-panel {
    border-top: 1px solid var(--oh-border);
    background: var(--oh-surface);
    padding: 1rem 0;
}

.nav-search-form {
    width: min(720px, 100% - 2.5rem);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--oh-bg);
    border: 1px solid var(--oh-border);
    border-radius: 999px;
    padding: .5rem .5rem .5rem 1.1rem;
}

.nav-search-form i { color: var(--oh-muted); }

.nav-search-form input {
    flex: 1;
    background: none;
    border: 0;
    color: var(--oh-text);
    font-size: 1rem;
    padding: .5rem 0;
    outline: none;
}

.nav-search-form button {
    background: var(--oh-purple);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .6rem 1.4rem;
    font-weight: 600;
    cursor: pointer;
}

.nav-search-suggest {
    width: min(720px, 100% - 2.5rem);
    margin: .6rem auto 0;
    display: grid;
    gap: .25rem;
}

.nav-search-suggest a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .9rem;
    border-radius: 10px;
    background: var(--oh-surface-2);
    text-decoration: none;
    font-size: .9rem;
}

.nav-search-suggest a:hover { background: #1f1f27; }
.nav-search-suggest small { color: var(--oh-muted); white-space: nowrap; }

/* ---------------------------------------------------------------- manşet yan sütun */

.grid-hero {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 1.75rem;
    margin-top: 2rem;
}

.hero-side-list { display: flex; flex-direction: column; gap: .5rem; }

.side-story {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: .85rem;
    padding: .7rem;
    border-radius: 12px;
    text-decoration: none;
    transition: background .18s ease;
}

.side-story:hover { background: var(--oh-surface); }

.side-story img {
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
}

.side-story h3 {
    margin: .2rem 0 .3rem;
    font-size: .92rem;
    line-height: 1.35;
    font-weight: 600;
}

.side-story-cat {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.side-story time { font-size: .75rem; color: var(--oh-muted); }

/* ---------------------------------------------------------------- haber kartı */

.stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 1.5rem;
}

.story-card {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.story-card:hover {
    transform: translateY(-4px);
    border-color: #3a3a46;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

.story-image-wrap {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--oh-surface-2);
}

.story-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.story-card:hover .story-thumb { transform: scale(1.06); }

.story-badge {
    position: absolute;
    top: .7rem;
    left: .7rem;
    padding: .28rem .7rem;
    border-radius: 6px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: #fff;
    text-transform: uppercase;
}

.review-score-badge {
    position: absolute;
    bottom: .7rem;
    right: .7rem;
    min-width: 44px;
    padding: .3rem .55rem;
    border-radius: 8px;
    font-weight: 800;
    text-align: center;
    color: #fff;
}

.video-play-btn-overlay {
    position: absolute;
    inset: 0;
    /* style.css bu sinifi 80px yuvarlak gul rengi dugme olarak
       tanimliyor. Burada tam kaplayan simge katmanina cevriliyor ama
       eski ozellikler sifirlanmazsa daire kartin sol ust kosesinden
       disari tasip kirmizi bir leke birakiyor. */
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    transform: none;
    box-shadow: none;
    display: grid;
    place-items: center;
    font-size: 2.2rem;
    color: #fff;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .7);
    opacity: .85;
}

.video-duration-badge,
.vid-time-tag {
    position: absolute;
    bottom: .6rem;
    right: .6rem;
    background: rgba(0, 0, 0, .8);
    padding: .18rem .5rem;
    border-radius: 5px;
    font-size: .72rem;
    font-weight: 600;
}

.story-body {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
}

.story-card-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 700;
}

.story-card-title a { text-decoration: none; }
.story-card-title a:hover { color: var(--oh-purple); }

.story-excerpt {
    margin: 0;
    font-size: .87rem;
    color: var(--oh-muted);
    line-height: 1.5;
}

.story-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    font-size: .76rem;
    color: var(--oh-muted);
    margin-top: auto;
}

.story-author { display: inline-flex; align-items: center; gap: .4rem; }

.auth-img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

.story-date { font-size: .73rem; color: #6f6f7c; }

/* ---------------------------------------------------------------- bölüm başlığı */

.section-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--oh-border);
}

.section-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.section-title i { color: var(--oh-purple); }

.view-all-category {
    font-size: .85rem;
    font-weight: 600;
    color: var(--oh-muted);
    text-decoration: none;
    white-space: nowrap;
}

.view-all-category:hover { color: var(--oh-purple); }

/* ---------------------------------------------------------------- kategori blokları */

.categories-container-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
    padding: 3rem 0;
}

.category-block {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1.25rem;
}

.category-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--oh-purple);
    padding-bottom: .7rem;
    margin-bottom: 1rem;
}

.category-block-header h3 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.category-item-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: .8rem;
    padding: .6rem 0;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--oh-on-bg-rgb), .04);
}

.category-item-card:last-child { border-bottom: 0; }

.cat-item-thumb { width: 88px; height: 60px; object-fit: cover; border-radius: 8px; }

.cat-item-info h4 {
    margin: 0 0 .3rem;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
}

.category-item-card:hover .cat-item-info h4 { color: var(--oh-purple); }

.cat-item-meta { font-size: .73rem; color: var(--oh-muted); }

/* ---------------------------------------------------------------- inceleme / video / rehber ızgaraları */

.reviews-list-grid,
.videos-grid-container,
.guides-grid-container {
    display: grid;
    gap: 1.5rem;
}

.reviews-list-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.videos-grid-container { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.guides-grid-container { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.review-grid-card,
.guide-card-item,
.indie-card {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    overflow: hidden;
}

.rev-card-media { position: relative; display: block; aspect-ratio: 16/9; }
.rev-card-media img { width: 100%; height: 100%; object-fit: cover; }

.rev-score-indicator {
    position: absolute;
    bottom: .6rem;
    right: .6rem;
    padding: .3rem .6rem;
    border-radius: 8px;
    font-weight: 800;
    color: #fff;
}

.rev-card-body { padding: 1rem; }
.rev-card-body h3 { margin: 0 0 .5rem; font-size: 1rem; font-family: 'Outfit', sans-serif; }
.rev-card-body h3 a { text-decoration: none; }
.rev-card-body p { margin: 0; font-size: .85rem; color: var(--oh-muted); }

.video-grid-card-item h3 { margin: .7rem 0 .35rem; font-size: .92rem; line-height: 1.35; }
.video-grid-card-item h3 a { text-decoration: none; }
.video-thumb-wrap { position: relative; display: block; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; }
.video-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.video-meta-views { font-size: .75rem; color: var(--oh-muted); }

.guide-card-item { padding: 1.2rem; }
.guide-card-header { display: flex; justify-content: space-between; margin-bottom: .8rem; font-size: .74rem; }
.guide-cat-badge { background: rgba(34, 197, 94, .15); color: var(--oh-green); padding: .22rem .6rem; border-radius: 5px; font-weight: 700; }
.guide-likes { color: var(--oh-muted); }
.guide-card-item h3 { margin: 0 0 .5rem; font-size: 1rem; font-family: 'Outfit', sans-serif; }
.guide-card-item h3 a { text-decoration: none; }
.guide-card-item p { margin: 0 0 .9rem; font-size: .85rem; color: var(--oh-muted); }
.read-guide-link { color: var(--oh-green); font-weight: 600; font-size: .85rem; text-decoration: none; }

.indie-header { display: block; aspect-ratio: 16/9; }
.indie-header img { width: 100%; height: 100%; object-fit: cover; }
.indie-body { padding: 1rem; }
.indie-body h3 { margin: 0 0 .4rem; font-family: 'Outfit', sans-serif; font-size: 1rem; }
.indie-body h3 a { text-decoration: none; }
.indie-body p { margin: 0 0 .9rem; font-size: .84rem; color: var(--oh-muted); }
.indie-footer-actions { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.badge-dev { font-size: .74rem; color: var(--oh-muted); }
.support-dev-btn {
    background: #1b2838; color: #fff; padding: .35rem .8rem;
    border-radius: 6px; font-size: .78rem; text-decoration: none;
}

/* ---------------------------------------------------------------- arşiv başlığı */

.archive-head { padding: 2.5rem 0 1rem; }

.archive-head-inner { display: flex; align-items: center; gap: 1.2rem; }

.archive-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

.archive-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
}

.archive-title i { color: var(--accent, var(--oh-purple)); }

.archive-sub { margin: .5rem 0 0; color: var(--oh-muted); max-width: 70ch; }

.archive-count { margin: .5rem 0 0; font-size: .85rem; color: #6f6f7c; }

.archive-feed { color: var(--oh-amber); text-decoration: none; }

/* ---------------------------------------------------------------- kenar çubuklu düzen */

.content-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    align-items: start;
    margin-block: 2rem 4rem;
}

.content-main { min-width: 0; }

.site-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 90px; }

.sidebar-widget {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1.2rem;
}

.sidebar-widget-title {
    margin: 0 0 1rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sidebar-widget-title i { color: var(--oh-rose); }

.popular-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; counter-reset: pop; }

.popular-list li { display: grid; grid-template-columns: 26px 1fr; gap: .6rem; align-items: start; }

.popular-rank {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    color: rgba(139, 92, 246, .55);
    line-height: 1;
}

.popular-link { display: grid; grid-template-columns: 72px 1fr; gap: .6rem; text-decoration: none; }
.popular-link img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; }
.popular-link strong { display: block; font-size: .84rem; font-weight: 600; line-height: 1.35; }
.popular-link small { font-size: .72rem; color: var(--oh-muted); }
.popular-link:hover strong { color: var(--oh-purple); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: .45rem; }

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--oh-surface-2);
    border: 1px solid var(--oh-border);
    border-radius: 999px;
    padding: .32rem .75rem;
    font-size: .78rem;
    text-decoration: none;
    transition: all .18s ease;
}

.tag-chip:hover { border-color: var(--oh-purple); color: var(--oh-purple); }
.tag-chip span { color: #64646f; font-size: .7rem; }

/* ---------------------------------------------------------------- makale */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--oh-muted);
    margin-bottom: 1.2rem;
}

.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--oh-purple); }

.article-header { padding: 2.5rem 0 1.5rem; }

.article-type-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .85rem;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: #fff;
    margin-bottom: 1rem;
}

.article-title {
    margin: 0 0 1rem;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.02em;
    max-width: 22ch;
}

.article-lead {
    margin: 0 0 1.5rem;
    font-size: 1.12rem;
    line-height: 1.6;
    color: #c8c8d2;
    max-width: 70ch;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    font-size: .84rem;
    color: var(--oh-muted);
    padding-top: 1rem;
    border-top: 1px solid var(--oh-border);
}

.author-details { display: inline-flex; align-items: center; gap: .5rem; }
.author-details .auth-img { width: 32px; height: 32px; }
.author-name { font-weight: 600; color: var(--oh-text); text-decoration: none; }
.meta-tag { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }

.article-cover { margin-bottom: 2rem; }
.article-cover img { width: 100%; border-radius: var(--oh-radius); aspect-ratio: 16/9; object-fit: cover; }

.article-body {
    font-size: 1.06rem;
    line-height: 1.78;
    color: #dcdce4;
    max-width: 75ch;
}

.article-body > * + * { margin-top: 1.3rem; }

.article-body h2,
.article-body h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 2.4rem;
    scroll-margin-top: 100px;
    color: #fff;
}

.article-body h2 { font-size: 1.65rem; }
.article-body h3 { font-size: 1.3rem; }

.article-body a { color: var(--oh-cyan); text-underline-offset: 3px; }

.article-body img,
.article-body figure img { border-radius: 10px; }

.article-body figure { margin-inline: 0; }
.article-body figcaption { font-size: .82rem; color: var(--oh-muted); text-align: center; margin-top: .5rem; }

.article-body blockquote {
    border-left: 3px solid var(--oh-purple);
    padding: .3rem 0 .3rem 1.2rem;
    margin-inline: 0;
    color: #c5c5d0;
    font-style: italic;
}

.article-body ul,
.article-body ol { padding-left: 1.4rem; }
.article-body li + li { margin-top: .5rem; }

.article-body table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.article-body th,
.article-body td { border: 1px solid var(--oh-border); padding: .6rem .8rem; text-align: left; }
.article-body th { background: var(--oh-surface); }

.article-body pre {
    background: #0d0d11;
    border: 1px solid var(--oh-border);
    border-radius: 10px;
    padding: 1rem;
    overflow-x: auto;
}

.video-embed {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* içindekiler */

.toc-box {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1rem 1.2rem;
    margin-bottom: 2rem;
}

.toc-box summary { cursor: pointer; font-weight: 700; font-family: 'Outfit', sans-serif; }
.toc-box ol { margin: .9rem 0 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.toc-box a { color: var(--oh-muted); text-decoration: none; font-size: .9rem; }
.toc-box a:hover { color: var(--oh-purple); }
.toc-box .toc-h3 { margin-left: 1rem; font-size: .85rem; }

/* inceleme kartı */

.review-verdict-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: center;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-left: 4px solid var(--score-color, var(--oh-purple));
    border-radius: var(--oh-radius);
    padding: 1.4rem 1.6rem;
    margin-bottom: 2rem;
}

.review-score-ring {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    border: 3px solid var(--score-color, var(--oh-purple));
    box-shadow: 0 0 30px color-mix(in srgb, var(--score-color, #8b5cf6) 35%, transparent);
}

.review-score-ring .score-number {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--score-color, var(--oh-purple));
    line-height: 1;
}

.review-score-ring .score-label { font-size: .78rem; color: var(--oh-muted); }

.review-verdict-text strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    margin-bottom: .7rem;
}

.game-spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .86rem; }
.game-spec-list li { display: grid; grid-template-columns: 110px 1fr; gap: .6rem; }
.game-spec-list span { color: var(--oh-muted); }

/* artılar / eksiler */

.pros-cons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
    margin: 2.5rem 0;
}

.pros-cons-card {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1.2rem;
}

.pros-cons-card h3 { margin: 0 0 .8rem; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.pros-cons-card ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; font-size: .9rem; }
.pros-box { border-left: 3px solid var(--oh-green); }
.pros-box h3 { color: var(--oh-green); }
.cons-box { border-left: 3px solid var(--oh-rose); }
.cons-box h3 { color: var(--oh-rose); }

/* etiketler + eylemler */

.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 2.5rem 0;
    font-size: .85rem;
    color: var(--oh-muted);
}

.article-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-block: 1px solid var(--oh-border);
    margin-bottom: 2.5rem;
}

.quick-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.reactions-label { font-size: .85rem; color: var(--oh-muted); margin-right: .3rem; }

.react-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: 999px;
    padding: .4rem .8rem;
    font-size: .95rem;
    color: var(--oh-text);
    cursor: pointer;
    transition: all .18s ease;
}

.react-btn:hover { transform: translateY(-2px); border-color: var(--oh-purple); }
.react-btn.reacted { border-color: var(--oh-purple); background: rgba(139, 92, 246, .15); }
.react-count { font-size: .78rem; color: var(--oh-muted); }

.share-buttons { display: flex; gap: .5rem; }

.share-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    color: var(--oh-text);
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease;
}

.share-btn:hover { transform: translateY(-2px); }
.share-x:hover { background: #000; }
.share-fb:hover { background: #1877f2; }
.share-wa:hover { background: #25d366; }
.share-copy.copied { background: var(--oh-green); }

/* önceki / sonraki */

.post-neighbours {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 3rem;
}

.neighbour {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1rem 1.2rem;
    text-decoration: none;
    display: grid;
    gap: .35rem;
    transition: border-color .18s ease;
}

.neighbour:hover { border-color: var(--oh-purple); }
.neighbour span { font-size: .76rem; color: var(--oh-muted); }
.neighbour strong { font-size: .92rem; line-height: 1.35; }
.neighbour.next { text-align: right; }

/* ---------------------------------------------------------------- yorumlar */

.comments-section { margin-top: 3.5rem; }

.comment-form-container {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1.2rem;
    margin-bottom: 2rem;
}

.comment-count-badge {
    background: var(--oh-purple);
    color: #fff;
    font-size: .8rem;
    padding: .1rem .6rem;
    border-radius: 999px;
    margin-left: .4rem;
}

.comment-form-reply-to {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(139, 92, 246, .12);
    border-radius: 8px;
    padding: .5rem .8rem;
    margin-bottom: .8rem;
    font-size: .85rem;
}

.cancel-reply-btn { background: none; border: 0; color: var(--oh-rose); cursor: pointer; font-size: .82rem; }

.comment-input-wrap { display: grid; grid-template-columns: 44px 1fr; gap: .8rem; }

.comment-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

.comment-input-wrap textarea {
    width: 100%;
    background: var(--oh-bg);
    border: 1px solid var(--oh-border);
    border-radius: 10px;
    color: var(--oh-text);
    padding: .8rem 1rem;
    font-family: inherit;
    font-size: .95rem;
    resize: vertical;
    outline: none;
}

.comment-input-wrap textarea:focus { border-color: var(--oh-purple); }

.comment-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin-top: .8rem;
    padding-left: 3.6rem;
}

.format-btn {
    background: var(--oh-surface-2);
    border: 1px solid var(--oh-border);
    border-radius: 8px;
    color: var(--oh-muted);
    padding: .45rem .9rem;
    font-size: .82rem;
    cursor: pointer;
}

.format-btn:hover { color: var(--oh-text); border-color: var(--oh-purple); }

.comment-hint { font-size: .8rem; color: var(--oh-muted); margin-right: auto; }

.submit-comment-btn,
.submit-form-btn {
    background: linear-gradient(135deg, var(--oh-purple), var(--oh-cyan));
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    padding: .6rem 1.4rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: transform .18s ease, opacity .18s ease;
}

.submit-comment-btn:hover,
.submit-form-btn:hover { transform: translateY(-2px); }
.submit-comment-btn:disabled { opacity: .6; cursor: wait; transform: none; }

.secondary-btn {
    background: var(--oh-surface-2);
    border: 1px solid var(--oh-border);
    border-radius: 8px;
    color: var(--oh-text);
    padding: .6rem 1.4rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.comment-error { color: var(--oh-rose); font-size: .85rem; margin: .7rem 0 0; }

.comment-login-prompt {
    background: var(--oh-surface);
    border: 1px dashed var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.comment-login-prompt i { font-size: 2rem; color: var(--oh-purple); }
.comment-login-prompt p { color: var(--oh-muted); }
.comment-login-prompt div { display: flex; gap: .7rem; justify-content: center; }

.comments-list { display: grid; gap: 1rem; }

.no-comments { color: var(--oh-muted); text-align: center; padding: 2rem 0; }

.comment-card {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1.1rem 1.2rem;
}

.comment-card.editor-pick { border-color: var(--oh-amber); box-shadow: 0 0 22px rgba(245, 158, 11, .16); }

.comment-pinned-banner {
    color: var(--oh-amber);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .7rem;
}

.comment-card-header { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.comment-card-header .comment-avatar { width: 40px; height: 40px; }
.comment-author-info { display: grid; gap: .15rem; }
.comment-author-info .author-name { font-size: .92rem; }
.comment-author-info .author-name a { text-decoration: none; }
.user-rank-status { font-size: .74rem; display: inline-flex; align-items: center; gap: .35rem; }
.rank-level { background: rgba(var(--oh-on-bg-rgb), .08); padding: 0 .4rem; border-radius: 4px; color: var(--oh-muted); }
.comment-time { margin-left: auto; font-size: .76rem; color: var(--oh-muted); }

.comment-body { font-size: .95rem; line-height: 1.6; color: #d5d5de; }

.comment-actions { display: flex; gap: .5rem; margin-top: .8rem; }

.like-btn,
.reply-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--oh-muted);
    font-size: .8rem;
    padding: .3rem .6rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.like-btn:hover,
.reply-btn:hover { color: var(--oh-text); border-color: var(--oh-border); }
.like-btn.voted { color: var(--oh-purple); }

.comment-replies {
    margin-top: 1rem;
    padding-left: 1.2rem;
    border-left: 2px solid var(--oh-border);
    display: grid;
    gap: 1rem;
}

.comment-card.just-added { animation: ohFadeIn .5s ease; }

@keyframes ohFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

/* spoiler */

.spoiler-tag {
    display: inline;
    cursor: pointer;
    border-radius: 4px;
    padding: 0 .25rem;
    background: rgba(139, 92, 246, .18);
}

.spoiler-tag .spoiler-text-hidden {
    filter: blur(5px);
    transition: filter .35s ease;
    user-select: none;
}

.spoiler-tag.revealed .spoiler-text-hidden { filter: none; user-select: auto; }
.spoiler-tag.revealed .spoiler-icon { display: none; }
.spoiler-icon { color: var(--oh-amber); margin-right: .25rem; font-size: .8em; }

/* ---------------------------------------------------------------- sayfalama */

.pagination { margin: 3rem 0; }

.pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
}

.pagination a,
.pagination span {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 .7rem;
    border-radius: 10px;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    color: var(--oh-text);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    transition: all .18s ease;
}

.pagination a:hover { border-color: var(--oh-purple); color: var(--oh-purple); }

.pagination .active span {
    background: linear-gradient(135deg, var(--oh-purple), var(--oh-cyan));
    border-color: transparent;
    color: #fff;
}

.pagination .gap span { background: none; border: 0; min-width: auto; }

/* ---------------------------------------------------------------- reklam alanları */

.ad-container { margin: 2rem auto; text-align: center; }

.ad-placeholder {
    display: grid;
    place-content: center;
    gap: .3rem;
    background: repeating-linear-gradient(45deg, #131318, #131318 10px, #17171d 10px, #17171d 20px);
    border: 1px dashed #2f2f3a;
    border-radius: 10px;
    color: #55555f;
}

.ad-label { font-size: .7rem; letter-spacing: .18em; font-weight: 700; }
.ad-size { font-size: .68rem; }

.ad-mega { min-height: 180px; }
.ad-inarticle { min-height: 110px; margin: 2.5rem 0; }
.ad-sidebar { min-height: 500px; }
.ad-anchor { min-height: 60px; margin: 0; }

.anchor-footer-ad-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(var(--oh-glass-rgb), .96);
    border-top: 1px solid var(--oh-border);
    padding: .4rem .5rem;
    display: none;
}

.close-anchor-btn {
    position: absolute;
    top: -12px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--oh-surface-2);
    border: 1px solid var(--oh-border);
    color: var(--oh-text);
    cursor: pointer;
}

/* ---------------------------------------------------------------- boş durum / hata */

.empty-state,
.error-page {
    text-align: center;
    padding: 4rem 1rem;
}

.empty-state i { font-size: 3rem; color: #3a3a46; margin-bottom: 1rem; display: block; }
.empty-state h2,
.error-page h1 { font-family: 'Outfit', sans-serif; margin: 0 0 .7rem; }
.empty-state p,
.error-page p { color: var(--oh-muted); max-width: 55ch; margin-inline: auto; }

.error-code {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(5rem, 18vw, 10rem);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--oh-purple), var(--oh-rose));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.error-cats { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.5rem; }

.search-page-form {
    display: flex;
    gap: .6rem;
    max-width: 560px;
    margin: 1.5rem auto 0;
}

.search-page-form input {
    flex: 1;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: 10px;
    color: var(--oh-text);
    padding: .8rem 1.1rem;
    font-size: 1rem;
    outline: none;
}

.search-page-form input:focus { border-color: var(--oh-purple); }

.search-page-form button {
    background: linear-gradient(135deg, var(--oh-purple), var(--oh-cyan));
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    padding: 0 1.5rem;
    cursor: pointer;
}

/* ---------------------------------------------------------------- formlar */

.form-group { display: grid; gap: .4rem; margin-bottom: 1rem; }
.form-group label { font-size: .85rem; font-weight: 600; color: #c4c4ce; }
.req { color: var(--oh-rose); }

.form-group input,
.form-group select,
.form-group textarea {
    background: var(--oh-bg);
    border: 1px solid var(--oh-border);
    border-radius: 8px;
    color: var(--oh-text);
    padding: .7rem .9rem;
    font-family: inherit;
    font-size: .95rem;
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--oh-purple); }

.form-row-double { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

/* bot tuzağı - ekranda görünmez ama okuyuculardan da gizli değil */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-errors {
    background: rgba(244, 63, 94, .12);
    border: 1px solid rgba(244, 63, 94, .35);
    border-radius: 10px;
    padding: .9rem 1.1rem;
    margin-bottom: 1.2rem;
    color: #ffc2cc;
    display: flex;
    gap: .7rem;
}

.form-errors ul { margin: 0; padding-left: 1.1rem; }

.contact-form-section { margin-top: 3rem; }
.contact-header-wrap p { color: var(--oh-muted); }

.contact-success-card {
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .35);
    border-radius: var(--oh-radius);
    padding: 2rem;
    text-align: center;
}

.success-glow-icon { font-size: 2.5rem; color: var(--oh-green); }

/* ---------------------------------------------------------------- XP balonu */

.floating-xp-container {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 1200;
    display: grid;
    gap: .5rem;
    justify-items: end;
    pointer-events: none;
}

.floating-xp-notify {
    background: linear-gradient(135deg, var(--oh-purple), var(--oh-cyan));
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(139, 92, 246, .45);
    animation: ohPop .35s ease;
    transition: opacity .5s ease, transform .5s ease;
}

.floating-xp-notify.level-up {
    background: linear-gradient(135deg, var(--oh-amber), var(--oh-rose));
    font-size: 1rem;
}

.floating-xp-notify.fade-out { opacity: 0; transform: translateY(-14px); }

@keyframes ohPop {
    from { opacity: 0; transform: scale(.85) translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- adblock kutusu */

.adblock-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(var(--oh-glass-rgb), .88);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.adblock-modal-overlay[hidden] { display: none; }

.adblock-modal-card {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: 18px;
    padding: 2rem;
    max-width: 440px;
    text-align: center;
}

.adblock-modal-header i { font-size: 2.4rem; color: var(--oh-rose); }
.adblock-modal-header h3 { font-family: 'Outfit', sans-serif; margin: .7rem 0 0; }
.adblock-modal-body p { color: var(--oh-muted); font-size: .92rem; }

/* ---------------------------------------------------------------- duyarlı */

@media (max-width: 1080px) {
    .content-with-sidebar { grid-template-columns: 1fr; }
    .site-sidebar { position: static; }
    .grid-hero { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--oh-surface);
        border-top: 1px solid var(--oh-border);
        padding: .8rem 1.2rem;
        gap: .2rem;
    }

    .nav-links.open { display: flex; }

    .user-xp-widget .xp-progress-info { display: none; }
    .nav-login-btn span { display: none; }

    .anchor-footer-ad-wrap { display: block; }
    body { padding-bottom: 74px; }

    .article-title { max-width: none; }
    .comment-form-actions { padding-left: 0; }
    .comment-input-wrap { grid-template-columns: 1fr; }
    .comment-input-wrap .comment-avatar { display: none; }
    .review-verdict-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .game-spec-list li { grid-template-columns: 1fr; gap: 0; }
    .neighbour.next { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ======================================================================
   Üye alanı, giriş formları, yerli oyun vitrini
   ====================================================================== */

/* ---------------------------------------------------------------- kimlik */

.auth-wrap { display: grid; place-items: center; padding: 3rem 0 5rem; }

.auth-card {
    width: min(520px, 100%);
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 2.2rem;
}

.auth-card h1 {
    margin: 0 0 .4rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.auth-card h1 i { color: var(--oh-purple); }
.auth-sub { margin: 0 0 1.6rem; color: var(--oh-muted); font-size: .92rem; }
.auth-submit { width: 100%; justify-content: center; margin-top: .6rem; }

.auth-links {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--oh-border);
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    font-size: .87rem;
}

.auth-links a { color: var(--oh-cyan); text-decoration: none; }
.auth-links span { color: var(--oh-muted); }

.checkbox-row { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1.2rem; font-size: .86rem; }
.checkbox-row input { margin-top: .2rem; accent-color: var(--oh-purple); }
.checkbox-row a { color: var(--oh-cyan); }

.field-hint { color: var(--oh-muted); font-size: .78rem; }

/* ---------------------------------------------------------------- bildirim */

.flash-area:empty { display: none; }

.flash {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    border-radius: var(--oh-radius);
    padding: .9rem 1.2rem;
    margin: 1.2rem 0;
    font-size: .9rem;
}

.flash ul { margin: 0; padding-left: 1.1rem; }
.flash-success { background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .35); color: #b7f5cd; }
.flash-error { background: rgba(244, 63, 94, .12); border: 1px solid rgba(244, 63, 94, .35); color: #ffc6d0; }

/* ---------------------------------------------------------------- profil */

.profile-hero {
    display: flex;
    gap: 1.4rem;
    align-items: center;
    padding: 2rem 0 1.5rem;
    flex-wrap: wrap;
}

.profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--oh-border); }
.profile-hero h1 { margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.8rem; }
.profile-handle { margin: .2rem 0 .6rem; color: var(--oh-muted); font-size: .9rem; }
.profile-bio { margin: .8rem 0 0; color: #c5c5d0; max-width: 60ch; font-size: .92rem; }

.rank-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: color-mix(in srgb, var(--rank, #8b5cf6) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--rank, #8b5cf6) 40%, transparent);
    color: var(--rank, #8b5cf6);
    border-radius: 999px;
    padding: .3rem .9rem;
    font-size: .82rem;
    font-weight: 600;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.profile-stats div {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1rem;
    text-align: center;
    display: grid;
    gap: .2rem;
}

.profile-stats strong { font-family: 'Outfit', sans-serif; font-size: 1.25rem; }
.profile-stats span { color: var(--oh-muted); font-size: .78rem; }

.xp-panel {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1.3rem 1.5rem;
    margin-bottom: 1.8rem;
}

.xp-panel-head { display: flex; justify-content: space-between; margin-bottom: .7rem; font-size: .9rem; }

.xp-bar-outer { height: 10px; background: var(--oh-bg); border-radius: 999px; overflow: hidden; }

.xp-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, var(--oh-purple), var(--oh-cyan));
    border-radius: 999px;
    transition: width .5s ease;
}

.muted-note { color: var(--oh-muted); font-size: .84rem; margin: .8rem 0 0; }

.account-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.6rem; }

.account-tabs .tab {
    padding: .5rem 1rem;
    border-radius: 999px;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    color: var(--oh-muted);
    text-decoration: none;
    font-size: .85rem;
}

.account-tabs .tab.active,
.account-tabs .tab:hover { color: #fff; border-color: var(--oh-purple); }
.account-tabs .tab.active { background: var(--oh-purple); border-color: transparent; }

.account-card {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.account-card h2 {
    margin: 0 0 1.2rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.account-card h2 i { color: var(--oh-purple); }

.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }

.xp-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.xp-log li { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; font-size: .87rem; align-items: center; }
.xp-log strong { color: var(--oh-green); }
.xp-log time { grid-column: 1 / -1; color: var(--oh-muted); font-size: .74rem; }

.account-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.account-list li { display: grid; gap: .2rem; }
.account-list a { text-decoration: none; font-size: .89rem; }
.account-list a:hover { color: var(--oh-purple); }
.account-list small { color: var(--oh-muted); font-size: .74rem; }

/* ---------------------------------------------------------------- sıralama */

.rankings-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.ranked-user-item {
    display: grid;
    grid-template-columns: 44px 44px 1fr auto;
    gap: .9rem;
    align-items: center;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: .8rem 1.1rem;
}

.ranked-user-item.top-1 { border-color: #f59e0b; }
.ranked-user-item.top-2 { border-color: #94a3b8; }
.ranked-user-item.top-3 { border-color: #b45309; }

.rank-pos { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 900; color: var(--oh-muted); text-align: center; }
.top-1 .rank-pos { color: #f59e0b; }
.top-2 .rank-pos { color: #94a3b8; }
.top-3 .rank-pos { color: #b45309; }

.rank-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ranked-user-details { display: grid; gap: .15rem; min-width: 0; }
.ranked-name { font-weight: 600; text-decoration: none; }
.ranked-name:hover { color: var(--oh-purple); }
.ranked-points { text-align: right; font-size: .84rem; }
.ranked-points strong { font-family: 'Outfit', sans-serif; font-size: 1.05rem; }
.ranked-points small { display: block; color: var(--oh-muted); font-size: .72rem; }

/* ---------------------------------------------------------------- yerli oyun */

.indie-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }

.verified-tag { color: var(--oh-cyan); font-size: .8em; }

.game-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}

.game-facts div { display: grid; gap: .2rem; }
.game-facts span { color: var(--oh-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.game-facts strong { font-size: .92rem; }

.game-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2rem; }

.wishlist-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: 10px;
    color: var(--oh-text);
    padding: .7rem 1.3rem;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.wishlist-btn:hover { border-color: var(--oh-rose); color: var(--oh-rose); }
.wishlist-btn.active { background: rgba(244, 63, 94, .15); border-color: var(--oh-rose); color: var(--oh-rose); }
.wishlist-btn em { font-style: normal; background: rgba(var(--oh-on-bg-rgb), .08); padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; }

.steam-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #1b2838;
    border: 1px solid #2a475e;
    border-radius: 10px;
    color: #fff;
    padding: .7rem 1.3rem;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
}

.devlog-item {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.devlog-item h3 { margin: 0 0 .3rem; font-family: 'Outfit', sans-serif; font-size: 1.05rem; }
.devlog-item time { color: var(--oh-muted); font-size: .78rem; }

/* ======================================================================
   v3 — sadeleştirilmiş menü, manşet düzeltmeleri, kategori şeridi,
   panelden ayarlanan arka plan görseli
   ====================================================================== */

/* ---------------------------------------------------------------- arka plan katmanı */

.site-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: var(--bg-url);
    background-color: var(--oh-bg);
    opacity: var(--bg-opacity, .15);
    filter: blur(var(--bg-blur, 0));
    /* Bulanıklık kenarlarda boşluk bırakmasın */
    transform: scale(1.06);
    pointer-events: none;
}

.site-bg-cover { background-size: cover; background-position: center; background-attachment: fixed; }
.site-bg-top   { background-size: 100% auto; background-position: top center; background-repeat: no-repeat; }
.site-bg-tile  { background-size: auto; background-repeat: repeat; background-position: top left; }

/* Görsel varken zeminleri hafif saydam yap ki arka plan sezilsin,
   ama yazı kontrastı korunsun. */
.has-bg { background: transparent; }

/* Okunabilirlik perdesi.
   ONCEKI HALI COK AGIRDI: %18 opaklikla duran gorselin uzerine %82-94
   karartma bininca geriye gorunur hicbir sey kalmiyordu. Artik yalnizca
   metin kontrastini koruyacak kadar hafif; gorselin yogunlugunu panelden
   gelen opaklik belirliyor. */
.has-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(var(--oh-glass-rgb), .28) 0%, rgba(var(--oh-glass-rgb), .52) 100%);
    pointer-events: none;
}

.has-bg .main-nav,
.has-bg .main-footer { backdrop-filter: blur(10px); }

.has-bg .story-card,
.has-bg .sidebar-widget,
.has-bg .account-card,
.has-bg .category-block,
.has-bg .review-grid-card,
.has-bg .guide-card-item,
.has-bg .indie-card,
.has-bg .comment-card {
    background: rgba(18, 18, 22, .88);
    backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------------- açılır menü */

/* Yalnizca masaustu: mobilde .nav-links absolute konumlanip basligin
   altina aciliyor. Bu kural medya sorgusundan SONRA geldigi icin
   kapsamlanmazsa onu eziyor (medya sorgusu ozgulluk eklemez, sirayi
   degistirmez) ve menu baslik cubuguna sikisiyordu. */
@media (min-width: 781px) {
    .nav-links { position: relative; }
}

.nav-dropdown { position: relative; }

.nav-caret {
    font-size: .7em;
    margin-left: .15rem;
    transition: transform .18s ease;
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }

.nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 250px;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: 12px;
    padding: .5rem;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 200;
}

/* Fare menü ile panel arasındaki boşlukta kaybolmasın */
.nav-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel,
.nav-dropdown.open .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.nav-drop-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    color: var(--oh-muted);
    text-decoration: none;
    font-size: .87rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.nav-drop-item:hover,
.nav-drop-item.active { background: var(--oh-surface-2); color: #fff; }

.nav-drop-item i { width: 18px; text-align: center; }
.nav-drop-item span { flex: 1; }

.nav-drop-item em {
    font-style: normal;
    font-size: .74rem;
    color: #61616d;
    background: rgba(var(--oh-on-bg-rgb), .05);
    padding: .08rem .42rem;
    border-radius: 999px;
}

.nav-drop-all { color: #fff; font-weight: 600; }
.nav-drop-all i { color: var(--oh-purple); }

.nav-drop-sep {
    height: 1px;
    background: var(--oh-border);
    margin: .45rem .4rem;
}

/* ---------------------------------------------------------------- manşet düzeltmeleri */

/* Ok butonları başlığın üstüne binmesin diye içerik alanına pay bırakıyoruz */
.hero-slider-container .slide-content {
    left: 72px;
    right: 72px;
    bottom: 34px;
}

/* Puan kartı varken sağdan daha çok yer aç */
.hero-slider-container .slider-slide:has(.score-card-overlay) .slide-content {
    right: 260px;
}

.slide-title {
    font-size: clamp(1.35rem, 2.4vw, 2.1rem);
    margin-bottom: 16px;
    /* En fazla 3 satır; taşarsa üç nokta */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;
}

.slide-title a { text-decoration: none; color: inherit; }
.slide-title a:hover { color: #fff; text-shadow: 0 0 24px rgba(var(--oh-on-bg-rgb), .35); }

/* Rozet: koyu cam zemin + kategori rengi yalnızca vurgu.
   Dolgu renk kapak görseliyle çatışıyordu. */
.trending-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(var(--oh-glass-rgb), .72);
    border: 1px solid color-mix(in srgb, var(--cat, #8b5cf6) 60%, transparent);
    border-left: 3px solid var(--cat, #8b5cf6);
    color: #fff;
    backdrop-filter: blur(6px);
    padding: .3rem .7rem;
    border-radius: 6px;
    font-size: .68rem;
    letter-spacing: .09em;
    margin-bottom: 14px;
}

.trending-badge i { color: var(--cat, #8b5cf6); font-size: .95em; }

/* Oklar: küçültüldü ve kenara çekildi */
.hero-slider-container .slider-arrow {
    width: 40px;
    height: 40px;
    background: rgba(var(--oh-glass-rgb), .6);
    border: 1px solid rgba(var(--oh-on-bg-rgb), .14);
    backdrop-filter: blur(6px);
    z-index: 12;
}

.hero-slider-container .slider-arrow:hover { background: rgba(139, 92, 246, .85); }
.hero-slider-container .arrow-left { left: 14px; }
.hero-slider-container .arrow-right { right: 14px; }

.slider-dots { z-index: 12; }

/* ---------------------------------------------------------------- kategori kısayolları */

.quick-cats {
    display: grid;
    /* 9 kisayol genis ekranda tek satira sigsin; dar ekranda dogal sarar */
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    gap: .75rem;
    margin-top: 1.75rem;
}

.quick-cat {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .3rem;
    min-height: 100px;
    padding: .9rem .5rem;
    border-radius: 14px;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    text-decoration: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Üstte ince renk şeridi — kategori kimliği */
.quick-cat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--cat, #8b5cf6);
    opacity: .85;
}

/* Hover'da renkten hafif bir parıltı */
.quick-cat::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cat, #8b5cf6) 26%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}

.quick-cat:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--cat, #8b5cf6) 55%, transparent);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
}

.quick-cat:hover::after { opacity: 1; }

.quick-cat i {
    font-size: 1.45rem;
    color: var(--cat, #8b5cf6);
    margin-bottom: .15rem;
}

.quick-cat-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: .92rem;
    color: var(--oh-text);
    line-height: 1.2;
}

.quick-cat-count { font-size: .72rem; color: var(--oh-muted); }

/* ---------------------------------------------------------------- duyarlı */

@media (max-width: 980px) {
    .hero-slider-container .slide-content { left: 20px; right: 20px; bottom: 24px; }
    .hero-slider-container .slider-slide:has(.score-card-overlay) .slide-content { right: 20px; }
    .hero-slider-container .score-card-overlay { display: none; }
}

@media (max-width: 780px) {
    /* Açılır menü mobilde katlanır listeye dönüşür */
    .nav-dropdown-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--oh-border);
        border-radius: 0;
        margin: .2rem 0 .4rem .9rem;
        padding: 0 0 0 .4rem;
        min-width: 0;
        display: none;
    }

    .nav-dropdown.open .nav-dropdown-panel { display: block; }
    .nav-dropdown::after { display: none; }

    .quick-cats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
    .quick-cat { min-height: 88px; padding: .8rem .5rem; }
    .quick-cat i { font-size: 1.2rem; }
    .quick-cat-name { font-size: .82rem; }
    .quick-cat-count { display: none; }

    .site-bg-cover { background-attachment: scroll; }
}

/* ======================================================================
   v4 — kategori kısayolları manşetin altındaki boşluğa taşındı
   ====================================================================== */

/* Sol sütun: manşet + kısayollar. Sağdaki "Son Dakika" listesi manşetten
   343px daha uzundu ve altta koca bir boşluk kalıyordu; kısayollar tam
   oraya oturuyor ve iki sütun aynı hizada bitiyor. */
.hero-main {
    display: grid;
    grid-template-rows: 420px minmax(0, 1fr);
    gap: 1.1rem;
    min-width: 0;
}

.hero-main .hero-slider-container { height: 100%; }

.hero-main .quick-cats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: .7rem;
    margin: 0;
    align-content: stretch;
}

/* Boşluğu doldurmak için kutular esneyebilsin */
.hero-main .quick-cat {
    min-height: 0;
    padding: .75rem .45rem;
}

.hero-main .quick-cat i { font-size: 1.35rem; }

/* Dar ekranlarda manşet tek sütuna düşer; kısayollar da doğal akışa döner */
@media (max-width: 1080px) {
    .hero-main {
        grid-template-rows: auto auto;
    }

    .hero-main .hero-slider-container { height: 420px; }

    .hero-main .quick-cats {
        grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
        grid-auto-rows: auto;
    }

    .hero-main .quick-cat { min-height: 100px; }
}

@media (max-width: 600px) {
    .hero-main .quick-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ======================================================================
   v5 — sol altta açılan içerik önerisi
   ====================================================================== */

.recommend-pop {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1100;
    width: min(340px, calc(100vw - 48px));
    background: rgba(18, 18, 22, .94);
    border: 1px solid var(--oh-border);
    border-left: 3px solid var(--cat, #8b5cf6);
    border-radius: 14px;
    padding: .85rem .95rem .9rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
    backdrop-filter: blur(12px);

    /* Görünene kadar ekranın solunda bekler */
    transform: translateX(calc(-100% - 32px));
    opacity: 0;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}

.recommend-pop[hidden] { display: none; }

.recommend-pop.show {
    transform: none;
    opacity: 1;
}

.recommend-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cat, #8b5cf6);
    margin-bottom: .6rem;
}

.recommend-body {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: .7rem;
    align-items: center;
    text-decoration: none;
}

.recommend-body img {
    width: 88px;
    height: 62px;
    object-fit: cover;
    border-radius: 8px;
}

.recommend-text { display: grid; gap: .25rem; min-width: 0; }

.recommend-text strong {
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--oh-text);
}

.recommend-body:hover .recommend-text strong { color: var(--cat, #8b5cf6); }

.recommend-text small { font-size: .72rem; color: var(--oh-muted); }

.recommend-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--oh-on-bg-rgb), .06);
    border: 0;
    color: var(--oh-muted);
    font-size: .78rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.recommend-close:hover { background: var(--oh-rose); color: #fff; }

/* Mobilde alt reklam şeridinin üstünde dursun */
@media (max-width: 780px) {
    .recommend-pop {
        left: 12px;
        right: 12px;
        bottom: 84px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .recommend-pop { transition: opacity .2s ease; transform: none; }
    .recommend-pop:not(.show) { opacity: 0; }
}

/* ======================================================================
   v6 — rozetler
   ====================================================================== */

.badge-counter {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 500;
    color: var(--oh-muted);
    background: rgba(var(--oh-on-bg-rgb), .06);
    padding: .1rem .55rem;
    border-radius: 999px;
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: .8rem;
}

.badge-item {
    display: grid;
    justify-items: center;
    gap: .25rem;
    text-align: center;
    padding: 1rem .6rem .85rem;
    border-radius: 12px;
    background: var(--oh-bg);
    border: 1px solid color-mix(in srgb, var(--badge, #8b5cf6) 40%, transparent);
    position: relative;
    overflow: hidden;
}

.badge-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--badge, #8b5cf6) 22%, transparent), transparent 70%);
    pointer-events: none;
}

.badge-item i {
    font-size: 1.6rem;
    color: var(--badge, #8b5cf6);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--badge, #8b5cf6) 55%, transparent));
}

.badge-item strong {
    font-family: 'Outfit', sans-serif;
    font-size: .84rem;
    line-height: 1.2;
}

.badge-item small { font-size: .7rem; color: var(--oh-muted); line-height: 1.3; }

/* Henüz kazanılmamış rozetler soluk durur */
.badge-grid.locked .badge-item {
    border-color: var(--oh-border);
    opacity: .42;
    filter: grayscale(1);
}

.badge-grid.locked .badge-item::before { display: none; }
.badge-grid.locked .badge-item i { color: var(--oh-muted); filter: none; }

.badge-locked-title {
    margin: 1.6rem 0 .8rem;
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    color: var(--oh-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ---------------------------------------------------------------- rozet kutlaması */

.badge-pop {
    position: fixed;
    left: 50%;
    top: 32%;
    z-index: 1400;
    width: min(300px, calc(100vw - 40px));
    display: grid;
    justify-items: center;
    gap: .35rem;
    text-align: center;
    padding: 1.6rem 1.4rem 1.4rem;
    border-radius: 18px;
    background: rgba(18, 18, 22, .96);
    border: 2px solid var(--badge, #8b5cf6);
    box-shadow: 0 0 60px color-mix(in srgb, var(--badge, #8b5cf6) 45%, transparent);
    backdrop-filter: blur(12px);

    transform: translate(-50%, -12px) scale(.86);
    opacity: 0;
    transition: transform .42s cubic-bezier(.22, 1.4, .36, 1), opacity .3s ease;
    pointer-events: none;
}

.badge-pop.show { transform: translate(-50%, 0) scale(1); opacity: 1; }

.badge-pop i {
    font-size: 2.8rem;
    color: var(--badge, #8b5cf6);
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--badge, #8b5cf6) 70%, transparent));
    margin-bottom: .3rem;
}

.badge-pop strong {
    font-size: .68rem;
    letter-spacing: .16em;
    color: var(--badge, #8b5cf6);
    font-weight: 800;
}

.badge-pop-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
}

.badge-pop small { font-size: .78rem; color: var(--oh-muted); line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
    .badge-pop { transition: opacity .2s ease; transform: translate(-50%, 0) scale(1); }
    .badge-pop:not(.show) { opacity: 0; }
}

/* ======================================================================
   v7 — geliştirici günlükleri
   ====================================================================== */

.btn-sm { padding: .45rem 1rem; font-size: .84rem; }

.devlog-item {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-left: 3px solid #22c55e;
    border-radius: var(--oh-radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
}

.devlog-item.is-draft {
    border-left-color: var(--oh-amber);
    opacity: .82;
}

.devlog-item-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}

.devlog-item h3 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.08rem;
    line-height: 1.3;
}

.devlog-item h3 a { text-decoration: none; }
.devlog-item h3 a:hover { color: #22c55e; }

.devlog-draft-tag {
    background: color-mix(in srgb, var(--oh-amber) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--oh-amber) 45%, transparent);
    color: var(--oh-amber);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .12rem .5rem;
    border-radius: 5px;
}

.devlog-item time {
    display: block;
    margin: .3rem 0 .6rem;
    color: var(--oh-muted);
    font-size: .78rem;
}

.devlog-ozet {
    margin: 0 0 .9rem;
    color: #c5c5d0;
    font-size: .9rem;
    line-height: 1.55;
}

.devlog-item-actions {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.devlog-edit-link {
    color: var(--oh-muted);
    font-size: .84rem;
    text-decoration: none;
}

.devlog-edit-link:hover { color: var(--oh-purple); }

/* Günlük sayfasının altındaki "bu oyuna ait" kartı */

.devlog-game-card {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 1rem;
    align-items: center;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: var(--oh-radius);
    padding: 1rem 1.2rem;
    margin-top: 2.5rem;
}

.devlog-game-card img { width: 88px; height: 62px; object-fit: cover; border-radius: 8px; }
.devlog-game-card small { display: block; color: var(--oh-muted); font-size: .74rem; }

.devlog-game-card a {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
}

.devlog-game-card > div a:hover { color: #22c55e; }

@media (max-width: 640px) {
    .devlog-game-card { grid-template-columns: 1fr; justify-items: start; }
}

/* ---------------------------------------------------------------- sosyal giris */

.social-auth { margin-top: 1.4rem; }

.social-sep {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1rem;
    color: var(--oh-muted);
    font-size: .82rem;
}

.social-sep::before,
.social-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--oh-border);
}

.social-buttons {
    display: grid;
    gap: .55rem;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .78rem 1rem;
    border: 1px solid var(--oh-border);
    border-radius: 10px;
    background: var(--oh-surface-2);
    color: var(--oh-text);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.social-btn i {
    font-size: 1.05rem;
    color: var(--sb, var(--oh-purple));
}

.social-btn:hover {
    border-color: var(--sb, var(--oh-purple));
    background: color-mix(in srgb, var(--sb, var(--oh-purple)) 12%, var(--oh-surface-2));
    transform: translateY(-1px);
}

.social-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--sb) 45%, transparent);
    background: color-mix(in srgb, var(--sb) 15%, transparent);
    color: var(--sb);
    font-size: .82rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------- bagli hesaplar */

.linked-accounts {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.linked-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem .9rem;
    border: 1px solid var(--oh-border);
    border-radius: 10px;
    background: var(--oh-surface-2);
    font-size: .9rem;
}

.linked-item > i {
    font-size: 1.15rem;
    color: var(--sb, var(--oh-purple));
    width: 1.3rem;
    text-align: center;
}

.linked-name { font-weight: 600; }

.linked-state {
    margin-left: auto;
    color: var(--oh-green);
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.linked-note {
    color: var(--oh-muted);
    font-size: .78rem;
    border-left: 1px solid var(--oh-border);
    padding-left: .7rem;
}

.linked-item form { margin: 0; }

.btn-link-add,
.btn-link-remove {
    margin-left: auto;
    padding: .38rem .8rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--oh-border);
    background: transparent;
    font-family: inherit;
}

.btn-link-add {
    border-color: color-mix(in srgb, var(--sb) 50%, transparent);
    color: var(--sb);
}

.btn-link-add:hover { background: color-mix(in srgb, var(--sb) 14%, transparent); }

.btn-link-remove {
    margin-left: .7rem;
    color: var(--oh-muted);
}

.btn-link-remove:hover { color: var(--oh-rose); border-color: var(--oh-rose); }

.notice-sm {
    font-size: .86rem;
    padding: .8rem .9rem;
    margin-bottom: 1.2rem;
}

/* Bilgi kutusu - sosyal giris ve uyari metinleri icin */
.notice {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    margin: 0 0 1.4rem;
    border: 1px solid var(--oh-border);
    border-radius: 10px;
    background: var(--oh-surface-2);
    color: var(--oh-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.notice > i { color: var(--oh-cyan); margin-top: .15rem; }

/* ---------------------------------------------------------------- yerli oyun vitrini
   Vitrinde cogu zaman 1-2 oyun olur. stories-grid auto-fill ile tam
   genislige 4 sutun aciyor, bu da tek kartin yaninda kocaman bir bosluk
   birakiyordu. Esnek kutu + ortalama ile kartlar sayilari kadar yer
   kaplar; dort oyun oldugunda satiri yine tam doldururlar. */

.indie-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.indie-grid .indie-card {
    flex: 1 1 265px;
    max-width: 300px;
}

/* Kapagi olmayan oyunda 16/9 yer tutucu bosu bosuna yer kapliyor */
.indie-card .indie-header { background: var(--oh-surface-2); }

/* ---------------------------------------------------------------- bizi takip et */

.social-follow { margin-top: 1.6rem; }

.social-follow h4 {
    margin: 0 0 .8rem;
    font-size: .78rem;
    letter-spacing: 1.2px;
    color: var(--oh-text);
}

.social-follow-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.social-follow-list a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--oh-border);
    background: var(--oh-surface-2);
    color: var(--oh-muted);
    font-size: 1.05rem;
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease,
                background .18s ease, transform .18s ease;
}

.social-follow-list a:hover,
.social-follow-list a:focus-visible {
    color: var(--sf);
    border-color: var(--sf);
    background: color-mix(in srgb, var(--sf) 14%, var(--oh-surface-2));
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .social-follow-list a { transition: none; }
    .social-follow-list a:hover { transform: none; }
}

/* ---------------------------------------------------------------- menü düğmesi
   Hamburger yalnizca mobilde is goruyor: 780px ustunde .nav-links zaten
   acikta duruyor, dolayisiyla dugmeye basmak gorunur hicbir sey
   degistirmiyordu. Masaustunde gizleniyor. */

@media (min-width: 781px) {
    .nav-menu-toggle { display: none; }
}

/* Aktif menu ogesinin alt cizgisi (style.css) 'bottom: -18px' kullaniyor:
   masaustunde yatay menude cubugun altina oturuyor. Mobilde baglantilar
   alt alta oldugu icin ayni deger cizgiyi BIR ALTTAKI yazinin uzerine
   dusuruyordu. Mobilde kendi ogesinin altina cekiliyor. */

@media (max-width: 780px) {
    .nav-links a.active::after {
        bottom: 2px;
        box-shadow: none;
    }
}

/* ---------------------------------------------------------------- manşet: telefon
   Telefonda manşetin üç sorunu vardı:
   1) .grid-hero'nun 24px yan dolgusu .container'ın 20px'inin üstüne binip
      375px ekranda manşeti 287px'e düşürüyordu.
   2) Yükseklik 420px'e sabitti; 287px genişlikte 16:9 kapak görseli
      agresif kırpılıyor, fotoğrafın ortasından bir dilim görünüyordu.
   3) Başlık 3 satıra kelepçeli ama yazı tipi büyük kaldığı için uzun
      başlıklar cümle ortasından üç noktayla kesiliyordu. */

@media (max-width: 560px) {
    .grid-hero {
        padding-left: 0;
        padding-right: 0;
        margin-top: 1rem;
    }

    /* Sabit yükseklik yerine oran: görsel kırpılmadan sığar,
       metin için de üstte yer kalır */
    .hero-main .hero-slider-container {
        height: auto;
        aspect-ratio: 1 / 1;
        max-height: 420px;
        border-radius: 12px;
    }

    /* Daha küçük punto = aynı üç satıra daha çok kelime = kesilme yok */
    .slide-title {
        font-size: 1.15rem;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    .hero-slider-container .slide-content {
        left: 16px;
        right: 16px;
        bottom: 18px;
    }

    /* Oklar fotoğrafın ortasına biniyordu. Telefonda kaydırma ve
       noktalar var, oka gerek yok. */
    .hero-slider-container .slider-arrow { display: none; }

    .trending-badge { font-size: .62rem; margin-bottom: 10px; }

    .read-review-btn { padding: .5rem 1.1rem; font-size: .78rem; }
}

/* Parmakla kaydırırken tarayıcı metin seçmeye kalkmasın */
.hero-slider-container { touch-action: pan-y; }

/* ---------------------------------------------------------------- telefon düzeltmeleri (2) */

@media (max-width: 560px) {
    /* Logo 1.6rem'de 207px yer kaplıyor; sağdaki eylemlerle birlikte
       375px'e sığmıyor ve hamburger ekran kenarına yapışıyordu. */
    .nav-brand .logo { font-size: 1.25rem; }
    .nav-container { padding: 0 14px; }

    /* Noktalar "Haberi oku" düğmesinin üzerine biniyordu: düğmeyi
       yukarı alıp noktaları dibe çekiyoruz. */
    .hero-slider-container .slide-content { bottom: 36px; }
    .hero-slider-container .slider-dots { bottom: 12px; }
}

/* ================================================================
   TEMA
   ================================================================
   Site koyu tasarlandi; acik tema kullanicinin acik secimidir.
   Varsayilan KOYU kalir - marka kimligi bu, mevcut ziyaretcinin
   gordugu gorunum degismesin.

   Uc durum:
     data-theme yok         -> koyu (varsayilan)
     data-theme="dark"      -> koyu (acik secim)
     data-theme="light"     -> acik

   Sistem tercihini varsayilan yapmak istersen dosyanin sonundaki
   yorumlu bloku ac.

   Not: renkler iki dosyada tanimli. style.css once yuklenir
   (--bg-dark-*, --text-*, --color-*), site.css sonra (--oh-*).
   Ikisini de burada birlikte devirmek, iki yerde unutulan bir
   degisken kalmasini onluyor.
   ================================================================ */

:root {
    /* Ince kaplama ve kenarlik tonu: koyuda beyaz, acikta siyah */
    --oh-on-bg-rgb: 255, 255, 255;

    /* Cam panel zemini (yapiskan baslik, acilir menu, modal) */
    --oh-glass-rgb: 11, 10, 15;

    /* Golge yogunlugu - acik temada daha yumusak olmali */
    --oh-shadow: rgba(0, 0, 0, .45);
}

:root[data-theme="light"] {
    /* --- site.css degiskenleri --- */
    --oh-bg: #f6f6f8;
    --oh-surface: #ffffff;
    --oh-surface-2: #f0f0f4;
    --oh-border: #e0e0e8;
    --oh-text: #17171d;
    --oh-muted: #61616f;

    /* Vurgular acik zeminde okunurluk icin bir tik koyulasti */
    --oh-purple: #7c3aed;
    --oh-cyan: #0891b2;
    --oh-rose: #e11d48;
    --oh-amber: #b45309;
    --oh-green: #15803d;

    /* --- style.css degiskenleri --- */
    --bg-dark-primary: #f6f6f8;
    --bg-dark-secondary: #ffffff;
    --bg-dark-tertiary: #ececf2;

    --color-rose: #e11d48;
    --color-rose-glow: rgba(225, 29, 72, .28);
    --color-purple: #7c3aed;
    --color-purple-glow: rgba(124, 58, 237, .25);
    --color-cyan: #0891b2;
    --color-cyan-glow: rgba(8, 145, 178, .25);
    --color-gold: #b45309;
    --color-gold-glow: rgba(180, 83, 9, .22);

    --text-primary: #17171d;
    --text-muted: #61616f;

    --border-color: rgba(0, 0, 0, .10);
    --border-hover: rgba(225, 29, 72, .35);

    /* --- temaya bagimli tonlar --- */
    --oh-on-bg-rgb: 0, 0, 0;
    --oh-glass-rgb: 255, 255, 255;
    --oh-shadow: rgba(24, 24, 32, .12);
}

/* Tarayici arayuzu (kaydirma cubugu, form ogeleri) da uysun */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* ---------------------------------------------------------------- açık temada düzeltmeler */

/* Koyu zemin icin secilmis parlamalar acik temada kirli gorunuyor */
:root[data-theme="light"] .logo-accent,
:root[data-theme="light"] .slide-title a:hover {
    text-shadow: none;
}

/* Gorsel uzeri yazilar her iki temada da beyaz kalir: altlarindaki
   gradyan koyu, degismiyor */
:root[data-theme="light"] .slide-content,
:root[data-theme="light"] .slide-title a,
:root[data-theme="light"] .trending-badge {
    color: #fff;
}

/* Yer tutucu SVG koyu zeminli uretiliyor; acik temada cerceve ver */
:root[data-theme="light"] .post-card img,
:root[data-theme="light"] .popular-link img {
    background: var(--oh-surface-2);
}

/* Reklam yer tutucusu acik temada okunsun */
:root[data-theme="light"] .ad-placeholder {
    background: repeating-linear-gradient(45deg,
        var(--oh-surface-2) 0 10px, var(--oh-surface) 10px 20px);
}

/* ---------------------------------------------------------------- tema düğmesi */

.theme-toggle { position: relative; }

.theme-toggle .fa-sun { display: none; }
:root[data-theme="light"] .theme-toggle .fa-sun { display: inline-block; }
:root[data-theme="light"] .theme-toggle .fa-moon { display: none; }

/* Tema değişiminde ani renk sıçraması olmasın */
.theme-switching,
.theme-switching * {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    .theme-switching,
    .theme-switching * { transition: none !important; }
}

/* ================================================================
   Sistem tercihini varsayilan yapmak istersen bu bloku ac:
   Windows/telefonu acik temada olan ziyaretci siteyi acik gorur,
   dugmeyle yine degistirebilir.

   @media (prefers-color-scheme: light) {
       :root:not([data-theme="dark"]) {
           ... :root[data-theme="light"] icindeki tum degiskenler ...
       }
   }
   ================================================================ */

/* ---------------------------------------------------------------- açık tema: metin düzeltmeleri
   Tasarımda 100'e yakın yerde "color: white" sabit yazılmış. Çoğu
   doğru — renkli düğme, rozet ya da fotoğraf üzerindeki yazı, iki
   temada da beyaz kalmalı. Aşağıdakiler ise SAYFA ZEMİNİ üzerinde
   duruyor; açık temada beyaz-beyaza binip görünmez oluyorlardı.

   Hepsi [data-theme="light"] altında: koyu tema bu bloktan hiç
   etkilenmiyor. */

:root[data-theme="light"] .nav-brand .logo,
:root[data-theme="light"] .footer-logo,
:root[data-theme="light"] .nav-links a:hover,
:root[data-theme="light"] .nav-links a.active,
:root[data-theme="light"] .nav-btn-icon:hover,
:root[data-theme="light"] .view-all-category:hover,
:root[data-theme="light"] .section-title,
:root[data-theme="light"] .section-title-wrap h2,
:root[data-theme="light"] .widget-title,
:root[data-theme="light"] .story-card-title,
:root[data-theme="light"] .category-block-header h3,
:root[data-theme="light"] .cat-item-info h4,
:root[data-theme="light"] .ranked-name,
:root[data-theme="light"] .article-title,
:root[data-theme="light"] .article-body h2,
:root[data-theme="light"] .article-body h3,
:root[data-theme="light"] .callout-body h4,
:root[data-theme="light"] .dev-info h4,
:root[data-theme="light"] .dev-author-details h4,
:root[data-theme="light"] .author-name,
:root[data-theme="light"] .info-widget h3,
:root[data-theme="light"] .direct-email-link,
:root[data-theme="light"] .footer-column h4,
:root[data-theme="light"] .footer-links-list a:hover,
:root[data-theme="light"] .adblock-modal-header h3,
:root[data-theme="light"] .whitelist-instructions h5,
:root[data-theme="light"] .reviews-header-wrap h2,
:root[data-theme="light"] .videos-header-wrap h2,
:root[data-theme="light"] .guides-header-wrap h2,
:root[data-theme="light"] .filter-tab:hover,
:root[data-theme="light"] .featured-review-content h3,
:root[data-theme="light"] .rev-card-body h4,
:root[data-theme="light"] .featured-video-details h3,
:root[data-theme="light"] .video-grid-card-item h4,
:root[data-theme="light"] .guide-card-item h3,
:root[data-theme="light"] .read-guide-link:hover,
:root[data-theme="light"] .badge-pop-name,
:root[data-theme="light"] .quick-cat h3,
:root[data-theme="light"] .quick-cat span,
:root[data-theme="light"] .recommend-close:hover,
:root[data-theme="light"] .nav-drop-item:hover,
:root[data-theme="light"] .nav-drop-item.active,
:root[data-theme="light"] .nav-drop-all {
    color: var(--oh-text);
}

/* Form alanları: koyu tema için beyaz yazı tanımlıydı */
:root[data-theme="light"] .comment-input-wrap textarea,
:root[data-theme="light"] .newsletter-input-flex input,
:root[data-theme="light"] .guides-search-input-box input,
:root[data-theme="light"] .input-glow-wrap select option {
    color: var(--oh-text);
}

/* ---------------------------------------------------------------- açık tema: dönmeyen zeminler */

/* Bunlar değişken değil sabit hex kullanıyordu */
:root[data-theme="light"] .main-footer { background: var(--oh-surface-2); }
:root[data-theme="light"] .recommend-pop { background: rgba(255, 255, 255, .97); }
:root[data-theme="light"] .nav-search-suggest a:hover { background: var(--oh-surface-2); }

/* ---------------------------------------------------------------- açık tema: kategori renkleri
   Kategori renkleri veritabanından geliyor ve koyu zemin için
   seçilmiş — açık zeminde soluk kalıyorlar. Yazı olarak
   kullanıldıkları yerlerde koyulaştırıyoruz; rozet/dolgu olarak
   kullanıldıklarında dokunmuyoruz (orada zaten beyaz yazı var). */

:root[data-theme="light"] .side-story-cat,
:root[data-theme="light"] .cat-label,
:root[data-theme="light"] .post-card-cat,
:root[data-theme="light"] .category-block-header h3 i,
:root[data-theme="light"] .nav-drop-item i {
    filter: brightness(.72) saturate(1.15);
}

/* Yer tutucu SVG'ler koyu zeminli üretiliyor; açık temada
   kenarlıkla ayrılsınlar */
:root[data-theme="light"] img[src^="data:image/svg+xml"] {
    border: 1px solid var(--oh-border);
}

/* ---------------------------------------------------------------- açık tema: okuma metni
   Gövde metinleri koyu tema için açık gri sabitlenmiş (#b1b0bd,
   #dcdce4, #c5c5d0 ...). Beyaz zeminde bunlar okunmuyor — üstelik
   sitenin EN ÇOK okunan metni burası. Açık temada koyulaştırılıyor.

   Saf siyah değil: uzun metinde göz yorar, #2c2c38 daha rahat. */

:root[data-theme="light"] {
    --oh-body-text: #2c2c38;
}

:root[data-theme="light"] .article-body,
:root[data-theme="light"] .article-body p,
:root[data-theme="light"] .article-body li,
:root[data-theme="light"] .article-lead,
:root[data-theme="light"] .article-body blockquote,
:root[data-theme="light"] .pros-box li,
:root[data-theme="light"] .cons-box li,
:root[data-theme="light"] .comment-body,
:root[data-theme="light"] .indie-body p,
:root[data-theme="light"] .devlog-ozet,
:root[data-theme="light"] .profile-bio,
:root[data-theme="light"] .contact-success-card p,
:root[data-theme="light"] .adblock-modal-body p {
    color: var(--oh-body-text);
}

/* İkincil metin: etiket, ipucu, form başlığı */
:root[data-theme="light"] .form-group label,
:root[data-theme="light"] .form-title,
:root[data-theme="light"] .cat-item-meta,
:root[data-theme="light"] .hint,
:root[data-theme="light"] .muted-note {
    color: var(--oh-muted);
}

/* ---------------------------------------------------------------- açık tema: Son Dakika kartları
   Koyu temada haberler zeminden koyuluk farkıyla ayrılıyor. Açık
   temada hepsi beyaz üstünde beyaz kalıyor ve liste düz bir metin
   yığınına dönüşüyor. Her habere hafif kart görünümü veriyoruz:
   beyaz zemin + ince kenarlık + yumuşak gölge. */

:root[data-theme="light"] .side-story {
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    box-shadow: 0 1px 2px rgba(24, 24, 32, .05);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

:root[data-theme="light"] .side-story:hover {
    background: var(--oh-surface);
    border-color: color-mix(in srgb, var(--oh-purple) 30%, var(--oh-border));
    box-shadow: 0 4px 14px rgba(24, 24, 32, .10);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    :root[data-theme="light"] .side-story { transition: none; }
    :root[data-theme="light"] .side-story:hover { transform: none; }
}

/* Aynı sorun haber kartlarında da var: beyaz kart beyaz zeminde
   kayboluyordu. Kenarlık zaten vardı, gölge ile derinlik veriyoruz. */
:root[data-theme="light"] .story-card,
:root[data-theme="light"] .quick-cat,
:root[data-theme="light"] .sidebar-widget {
    box-shadow: 0 1px 3px rgba(24, 24, 32, .06);
}

:root[data-theme="light"] .story-card:hover,
:root[data-theme="light"] .quick-cat:hover {
    box-shadow: 0 6px 18px rgba(24, 24, 32, .10);
}