/* ============================================
   bilnetoyun.com — /oyunlar/ açılış sayfaları + /oyunlar/ hub'ı + bilgi sayfaları ortak stili
   Üretici: seo/build_seo.py (PAGE_TMPL, HUB_TMPL, STATIC_TMPL). Elle sayfa düzenleme yok;
   görünüm değişecekse burası değişir. Bu sayfalar main.css yüklemez; token'lar css/tokens.css'ten
   gelir (B1) — hub ile aynı dünya: gökyüzü, beyaz çıkartma kartı, mürekkep metin.
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--yazi-govde-boy);
    background: linear-gradient(180deg, var(--gok-ust) 0%, var(--gok-alt) 60%) fixed;
    color: var(--metin);
    line-height: 1.7;
}

/* Tarayıcı yüzeyleri de paletten */
::selection { background: var(--gunes); color: var(--murekkep); }

a { color: var(--mavi-800); text-decoration: none; text-underline-offset: 0.18em; }
a:hover { color: var(--murekkep); text-decoration: underline; }

/* Odak halkası: TEK kural (sözleşme §2) */
:focus-visible { outline: 3px solid var(--mavi-800); outline-offset: 3px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 18px 18px 8px; }
.wrap--hub { max-width: 920px; padding: 20px 20px 8px; }

/* ---- Üst bağlantı + kırıntı: gökyüzü üstünde metin mürekkep (gök-üst'te 6.8:1; mavi-800 3.0:1, orta 3.6:1 geçmez) ---- */
header a, a.home { font-weight: 800; color: var(--murekkep); }
.crumb { font-size: var(--yazi-rozet-boy); color: var(--murekkep); margin: 6px 0 18px; }
.crumb a { color: var(--murekkep); text-decoration: underline; text-decoration-color: var(--cizgi-saydam); }

/* ---- Landing kartı ---- */
.card {
    background: var(--yuzey);
    border: var(--kontur);
    border-radius: var(--r-kart);
    padding: 22px;
    box-shadow: var(--golge-2);
}
h1 {
    font-family: var(--yazi-hub-aile);
    font-weight: var(--yazi-hub-kalinlik);
    font-size: clamp(1.5rem, 6vw, var(--yazi-hub-boy));
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: .1em 0 .25em;
    color: var(--murekkep);
    text-wrap: balance;
}
.tagline { color: var(--murekkep-orta); font-size: var(--yazi-govde-boy); margin: 0 0 16px; }

/* Ana çağrı (birincil düğme): mavi-800 dolgu, beyaz metin, beyaz kontur, hap; dokunma alanı ≥ 52 px */
.play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hedef-min);
    background: var(--dugme-dolgu);
    color: var(--dugme-metin);
    font-family: var(--yazi-dugme-aile);
    font-weight: var(--yazi-dugme-kalinlik);
    font-size: var(--yazi-dugme-boy);
    padding: 12px 30px;
    border: var(--kontur);
    border-radius: var(--r-hap);
    text-decoration: none;
    box-shadow: var(--golge-2);
    margin: 6px 0 18px;
    transition: transform var(--sure-bas) var(--egri-out), box-shadow var(--sure-gecis) var(--egri-out);
}
.play:hover { color: var(--dugme-metin); text-decoration: none; transform: translateY(-2px); box-shadow: var(--golge-3); }
.play:active { transform: scale(0.97); box-shadow: var(--golge-1); transition-duration: var(--sure-bas); }

/* Pasif oyun (active=False): CTA yerine durum notu */
.soon {
    display: inline-block;
    background: var(--mavi-050);
    border: 2px dashed var(--cizgi);
    color: var(--murekkep-orta);
    font-weight: 800;
    font-size: 1rem;
    padding: 12px 20px;
    border-radius: var(--r-hap);
    margin: 6px 0 18px;
}

.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.meta span {
    background: var(--mavi-050);
    color: var(--murekkep);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-hap);
    padding: 5px 12px;
    font-size: var(--yazi-rozet-boy);
    font-weight: var(--yazi-rozet-kalinlik);
}
.about { color: var(--metin); max-width: 68ch; }
.more { margin-top: 22px; font-size: 1rem; }
.more a { font-weight: 700; }

/* ---- /oyunlar/ hub (sözleşme §3.11): raf yok; tek ızgara + solda kalıcı süzgeç (yaş × kategori), kartlar hub'la aynı
        anatomi, kazanım satırı hep açık. 1024 ve altı: süzgeç üstte yatay. Süzgeç JS'siz: radio + :has() (aşağıda). ---- */
.wrap--hub h1 { margin-top: 8px; }
.lead { max-width: 68ch; }
.hub-duzen {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 18px;
}
.suzgec {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}
.suzgec-grup { border: 0; padding: 0; margin: 0; min-width: 0; }
.suzgec-grup legend {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--murekkep);
    padding: 0;
    margin: 0 0 8px;
}
.suzgec-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
/* Radio görünmez ama odaklanır; çip etiketi odağı ve seçimi gösterir */
.suzgec-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 3px solid var(--beyaz);
    border-radius: var(--r-hap);
    background: var(--yuzey);
    color: var(--murekkep);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.1;
    box-shadow: var(--golge-1);
    cursor: pointer;
    transition: background-color var(--sure-gecis) var(--egri-out), color var(--sure-gecis) var(--egri-out), box-shadow var(--sure-gecis) var(--egri-out);
}
.cip img { width: 24px; height: 24px; flex: none; border-radius: 6px; }
.cip small { font-family: var(--font-body); font-size: var(--yazi-rozet-boy); font-weight: 700; color: var(--murekkep-orta); }
.cip:hover { box-shadow: var(--golge-2); }
.suzgec-radio:checked + .cip { background: var(--dugme-dolgu); color: var(--dugme-metin); box-shadow: var(--golge-2); }
.suzgec-radio:checked + .cip small { color: var(--dugme-metin); }
.suzgec-radio:focus-visible + .cip { outline: 3px solid var(--mavi-800); outline-offset: 3px; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 16px;
    margin: 0;
}
/* Kart: hub .game-card ile aynı anatomi (8 px kategori şeridi, görsel, ad, kazanım, yaş/süre/oyuncu) */
.g {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px 14px;
    background: var(--yuzey);
    border: var(--kontur);
    border-radius: var(--r-kart);
    box-shadow: var(--golge-1);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform var(--sure-bas) var(--egri-out), box-shadow var(--sure-gecis) var(--egri-out);
}
.g::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--cizgi); }
.g[data-section="harf"]::before { background: var(--kat-harf); }
.g[data-section="sayi"]::before { background: var(--kat-sayi); }
.g[data-section="bulmaca"]::before { background: var(--kat-bulmaca); }
.g[data-section="yaratici"]::before { background: var(--kat-yaratici); }
.g[data-section="strateji"]::before { background: var(--kat-strateji); }
.g[data-section="online"]::before { background: var(--kat-online); }
.g:hover { color: inherit; text-decoration: none; transform: translateY(-2px); box-shadow: var(--golge-2); }
.g:active { transform: scale(0.98); transition-duration: var(--sure-bas); }
.g-ikon { width: 96px; height: 96px; margin: 8px 0 8px; border-radius: var(--r-giris); box-shadow: var(--golge-1); }
.g h2 {
    font-family: var(--yazi-kart-aile);
    font-weight: var(--yazi-kart-kalinlik);
    font-size: var(--yazi-kart-boy);
    line-height: var(--yazi-kart-satir);
    margin: 0 0 6px;
    color: var(--murekkep);
    text-wrap: balance;
}
.g:hover h2 { color: var(--mavi-800); }
.g-kazanim {
    margin: 0 0 8px;
    padding: 4px 8px;
    border-radius: var(--r-giris);
    background: var(--mavi-050);
    color: var(--murekkep);
    font-size: var(--yazi-rozet-boy);
    font-weight: 700;
    line-height: 1.35;
}
.g-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-top: auto; font-size: var(--yazi-rozet-boy); font-weight: 700; color: var(--murekkep-orta); line-height: 1.6; }
.g-yas { display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--r-hap); background: var(--mavi-050); color: var(--murekkep); }
.g-rozet {
    position: absolute; top: 12px; right: 12px;
    padding: 3px 10px;
    border-radius: var(--r-hap);
    background: var(--mavi-050);
    color: var(--murekkep);
    font-size: var(--yazi-rozet-boy);
    font-weight: 700;
    line-height: 1.3;
}
.bos {
    display: none;
    grid-column: 2;
    margin: 0;
    padding: 16px 20px;
    background: var(--yuzey);
    border: var(--kontur);
    border-radius: var(--r-kart);
    box-shadow: var(--golge-1);
    color: var(--murekkep-orta);
    font-size: 1rem;
    line-height: 1.5;
    max-width: 560px;
}
.bos strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--murekkep); }

/* Süzgeç kuralları (JS yok; :has() destekleyen tarayıcıda çalışır, desteklemeyende tüm kartlar görünür) */
.hub-duzen:has(#yas-anaokulu:checked) .g:not([data-raf~="anaokulu"]) { display: none; }
.hub-duzen:has(#yas-sinif-1-2:checked) .g:not([data-raf~="sinif-1-2"]) { display: none; }
.hub-duzen:has(#yas-sinif-3-4:checked) .g:not([data-raf~="sinif-3-4"]) { display: none; }
.hub-duzen:has(#yas-sinif-5-6:checked) .g:not([data-raf~="sinif-5-6"]) { display: none; }
.hub-duzen:has(#kat-harf:checked) .g:not([data-section="harf"]) { display: none; }
.hub-duzen:has(#kat-sayi:checked) .g:not([data-section="sayi"]) { display: none; }
.hub-duzen:has(#kat-bulmaca:checked) .g:not([data-section="bulmaca"]) { display: none; }
.hub-duzen:has(#kat-yaratici:checked) .g:not([data-section="yaratici"]) { display: none; }
.hub-duzen:has(#kat-strateji:checked) .g:not([data-section="strateji"]) { display: none; }
.hub-duzen:has(#kat-online:checked) .g:not([data-section="online"]):not([data-online]) { display: none; }
/* Boş durum: seçili yaş × kategori birleşimine hiç kart düşmüyorsa (veriden bağımsız, 34 birleşim) */
.hub-duzen:has(#yas-hepsi:checked):has(#kat-harf:checked):not(:has(.g[data-section="harf"])) .bos { display: block; }
.hub-duzen:has(#yas-hepsi:checked):has(#kat-sayi:checked):not(:has(.g[data-section="sayi"])) .bos { display: block; }
.hub-duzen:has(#yas-hepsi:checked):has(#kat-bulmaca:checked):not(:has(.g[data-section="bulmaca"])) .bos { display: block; }
.hub-duzen:has(#yas-hepsi:checked):has(#kat-yaratici:checked):not(:has(.g[data-section="yaratici"])) .bos { display: block; }
.hub-duzen:has(#yas-hepsi:checked):has(#kat-strateji:checked):not(:has(.g[data-section="strateji"])) .bos { display: block; }
.hub-duzen:has(#yas-hepsi:checked):has(#kat-online:checked):not(:has(.g:is([data-section="online"], [data-online]))) .bos { display: block; }
.hub-duzen:has(#yas-anaokulu:checked):has(#kat-hepsi:checked):not(:has(.g[data-raf~="anaokulu"])) .bos { display: block; }
.hub-duzen:has(#yas-anaokulu:checked):has(#kat-harf:checked):not(:has(.g[data-raf~="anaokulu"][data-section="harf"])) .bos { display: block; }
.hub-duzen:has(#yas-anaokulu:checked):has(#kat-sayi:checked):not(:has(.g[data-raf~="anaokulu"][data-section="sayi"])) .bos { display: block; }
.hub-duzen:has(#yas-anaokulu:checked):has(#kat-bulmaca:checked):not(:has(.g[data-raf~="anaokulu"][data-section="bulmaca"])) .bos { display: block; }
.hub-duzen:has(#yas-anaokulu:checked):has(#kat-yaratici:checked):not(:has(.g[data-raf~="anaokulu"][data-section="yaratici"])) .bos { display: block; }
.hub-duzen:has(#yas-anaokulu:checked):has(#kat-strateji:checked):not(:has(.g[data-raf~="anaokulu"][data-section="strateji"])) .bos { display: block; }
.hub-duzen:has(#yas-anaokulu:checked):has(#kat-online:checked):not(:has(.g[data-raf~="anaokulu"]:is([data-section="online"], [data-online]))) .bos { display: block; }
.hub-duzen:has(#yas-sinif-1-2:checked):has(#kat-hepsi:checked):not(:has(.g[data-raf~="sinif-1-2"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-1-2:checked):has(#kat-harf:checked):not(:has(.g[data-raf~="sinif-1-2"][data-section="harf"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-1-2:checked):has(#kat-sayi:checked):not(:has(.g[data-raf~="sinif-1-2"][data-section="sayi"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-1-2:checked):has(#kat-bulmaca:checked):not(:has(.g[data-raf~="sinif-1-2"][data-section="bulmaca"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-1-2:checked):has(#kat-yaratici:checked):not(:has(.g[data-raf~="sinif-1-2"][data-section="yaratici"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-1-2:checked):has(#kat-strateji:checked):not(:has(.g[data-raf~="sinif-1-2"][data-section="strateji"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-1-2:checked):has(#kat-online:checked):not(:has(.g[data-raf~="sinif-1-2"]:is([data-section="online"], [data-online]))) .bos { display: block; }
.hub-duzen:has(#yas-sinif-3-4:checked):has(#kat-hepsi:checked):not(:has(.g[data-raf~="sinif-3-4"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-3-4:checked):has(#kat-harf:checked):not(:has(.g[data-raf~="sinif-3-4"][data-section="harf"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-3-4:checked):has(#kat-sayi:checked):not(:has(.g[data-raf~="sinif-3-4"][data-section="sayi"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-3-4:checked):has(#kat-bulmaca:checked):not(:has(.g[data-raf~="sinif-3-4"][data-section="bulmaca"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-3-4:checked):has(#kat-yaratici:checked):not(:has(.g[data-raf~="sinif-3-4"][data-section="yaratici"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-3-4:checked):has(#kat-strateji:checked):not(:has(.g[data-raf~="sinif-3-4"][data-section="strateji"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-3-4:checked):has(#kat-online:checked):not(:has(.g[data-raf~="sinif-3-4"]:is([data-section="online"], [data-online]))) .bos { display: block; }
.hub-duzen:has(#yas-sinif-5-6:checked):has(#kat-hepsi:checked):not(:has(.g[data-raf~="sinif-5-6"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-5-6:checked):has(#kat-harf:checked):not(:has(.g[data-raf~="sinif-5-6"][data-section="harf"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-5-6:checked):has(#kat-sayi:checked):not(:has(.g[data-raf~="sinif-5-6"][data-section="sayi"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-5-6:checked):has(#kat-bulmaca:checked):not(:has(.g[data-raf~="sinif-5-6"][data-section="bulmaca"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-5-6:checked):has(#kat-yaratici:checked):not(:has(.g[data-raf~="sinif-5-6"][data-section="yaratici"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-5-6:checked):has(#kat-strateji:checked):not(:has(.g[data-raf~="sinif-5-6"][data-section="strateji"])) .bos { display: block; }
.hub-duzen:has(#yas-sinif-5-6:checked):has(#kat-online:checked):not(:has(.g[data-raf~="sinif-5-6"]:is([data-section="online"], [data-online]))) .bos { display: block; }

/* ---- Altbilgi ---- */
footer { margin-top: 26px; font-size: var(--yazi-rozet-boy); color: var(--murekkep); text-align: center; }
footer a { font-weight: 700; color: var(--murekkep); text-decoration: underline; text-decoration-color: var(--cizgi-saydam); }

@media (max-width: 1023px) {
    .hub-duzen { grid-template-columns: 1fr; gap: 16px; }
    .suzgec { position: static; flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
    .suzgec-grup { flex: 1 1 320px; }
    .bos { grid-column: 1; }
}
@media (max-width: 480px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .g { padding: 16px 8px 12px; }
    .g-ikon { width: 72px; height: 72px; }
    .g h2 { font-size: 1.1rem; }
}

@media (max-width: 420px) {
    .wrap { padding: 14px 16px 8px; }
    .card { padding: 18px; }
    .play { display: flex; width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .play, .g { transition: none; }
    .play:hover, .g:hover { transform: none; }
}

@media print {
    body { background: var(--beyaz); }
    .card, .g { box-shadow: none; border: 1px solid var(--cizgi); }
    .play, .more, .suzgec { display: none; }
}

/* ---- Bilgi sayfaları: /gizlilik/, /hakkinda/, /iletisim/ (build_seo.py STATIC_TMPL) ----
   Okuma yüzeyi: tek kart, ~68ch satır ölçüsü, bölüm başına <section> + <h2>; gövde 18 px / 1,7 (sözleşme §3.13).
   Uzun sayfada (≥5 bölüm) "Bu sayfada" atlama menüsü .meta çip diliyle. */
.wrap--doc { max-width: 800px; }
.doc { padding: 26px 26px 24px; }
.doc .tagline { max-width: 68ch; margin-bottom: 18px; }
.doc .note {
    max-width: 68ch;
    margin: 0 0 6px;
    padding: 10px 14px;
    background: var(--mavi-050);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-giris);
    color: var(--murekkep);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
}
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.toc a {
    display: inline-block;
    background: var(--mavi-050);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-hap);
    padding: 6px 12px;
    font-size: var(--yazi-rozet-boy);
    font-weight: var(--yazi-rozet-kalinlik);
    line-height: 1.3;
    transition: background-color var(--sure-bas) var(--egri-out), border-color var(--sure-bas) var(--egri-out);
}
.toc a:hover { background: var(--yuzey); border-color: var(--mavi-800); text-decoration: none; }
.doc section { margin-top: 28px; scroll-margin-top: 16px; }
.doc section:first-of-type { margin-top: 22px; }
.doc h2 {
    font-family: var(--yazi-baslik-aile);
    font-weight: var(--yazi-baslik-kalinlik);
    font-size: var(--yazi-baslik-boy);
    line-height: var(--yazi-baslik-satir);
    margin: 0 0 8px;
    color: var(--murekkep);
    text-wrap: balance;
}
.doc p, .doc li { font-size: var(--yazi-govde-boy); line-height: 1.7; color: var(--metin); max-width: 68ch; }
.doc p { margin: 0 0 12px; }
.doc section > :last-child { margin-bottom: 0; }
.doc ul, .doc ol { margin: 0 0 12px; padding-left: 1.4em; }
.doc li { margin: 6px 0; padding-left: .1em; }
.doc li::marker { color: var(--mavi-800); font-weight: 800; }
.doc strong { color: var(--murekkep); font-weight: 800; }
.doc p a, .doc li a { text-decoration: underline; text-decoration-color: var(--cizgi); text-decoration-thickness: 2px; }
.doc p a:hover, .doc li a:hover { text-decoration-color: currentColor; }
.doc .more { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--cizgi); }

@media (max-width: 420px) {
    .doc { padding: 20px 18px 18px; }
    .doc h2 { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .toc a { transition: none; }
}

@media print {
    .toc { display: none; }
    .doc p a, .doc li a { text-decoration: none; }
}