/* ============================================
   BİLNET OYUN - Hub / Oyun Seçim Ekranı
   Token'lar css/tokens.css (B1): ham renk/yarıçap/süre yazılmaz. Sözleşme: docs/tasarim-sozlesmesi.md
   Bilgi mimarisi (B2b, §3.02): birinci eksen YAŞ RAFI (çip grubu + raf başına yatay ray ya da tek raf
   ızgarası), ikinci eksen kategori çipi; "Devam et" ilk satır; öğretmen görünümü (.hub.ogretmen) kartlara
   kazanım + süre satırı, ders çipleri ve arama ekler. Tüm içerik genişliği --hub-genislik.
   ============================================ */

.hub {
    --hub-genislik: 1220px;      /* 1280: 6 ray kartı + 7.'nin kenarı görünür (kaydırma ipucu); çip satırları sığar */
    --kart-en: 172px;          /* ray kartı (1280); 375'te 152 px (sözleşme §2) */
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 74px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--mavi-800) transparent;   /* tarayıcı yüzeyi de paletten */
}

/* Arka Plan Katmanları: tek dünya — gökyüzü, güneş, çimen */
.hub-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--gok-ust) 0%, var(--gok-alt) 70%);
}

.sun {
    position: absolute;
    top: 8%;
    right: 10%;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, var(--gunes) 60%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 60px var(--gunes-isik);
    animation: sunPulse 4s ease-in-out infinite;
}

.hills {
    position: absolute;
    bottom: 0;
    left: -5%;
    right: -5%;
    height: 35%;
    background:
        radial-gradient(ellipse 60% 100% at 15% 100%, var(--cim) 0%, transparent 70%),
        radial-gradient(ellipse 50% 100% at 50% 100%, var(--cim) 0%, transparent 65%),
        radial-gradient(ellipse 55% 100% at 85% 100%, var(--cim-koyu) 0%, transparent 70%);
}

.grass {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8%;
    background: linear-gradient(180deg, var(--cim) 0%, var(--cim-koyu) 100%);
}

/* ── Süzgeç satırları: yaş rafı (radiogroup), kategori (radiogroup), [ders + arama: öğretmen] ── */
.hub-nav {
    position: relative;
    z-index: 1;
    max-width: var(--hub-genislik);
    margin: 0 auto;
    padding: var(--ara-2) var(--ara-5) 0;
    display: flex;
    flex-direction: column;
    gap: var(--ara-2);
}
.hub-nav-row {
    display: flex;
    gap: var(--ara-2);
    padding: var(--ara-1) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding: var(--ara-4);
}
.hub-nav-row::-webkit-scrollbar { display: none; }
.hub-nav-row[hidden] { display: none; }

/* Çip: beyaz çıkartma, mürekkep metin; seçili çip mavi-800 dolgu + beyaz metin (sözleşme §2).
   role=radio: yalnız seçili çip Tab durağı, ok tuşları seçer (js/hub-ia.js). */
.hub-nav-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--hedef-min);
    padding: 0 14px;
    border-radius: var(--r-hap);
    border: 3px solid var(--beyaz);
    background: var(--yuzey);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--murekkep);
    cursor: pointer;
    box-shadow: var(--golge-1);
    transition: transform var(--sure-gecis) var(--egri-out), background-color var(--sure-gecis) var(--egri-out), border-color var(--sure-gecis) var(--egri-out), box-shadow var(--sure-gecis) var(--egri-out), color var(--sure-gecis) var(--egri-out);
    white-space: nowrap;
    flex-shrink: 0;
}
.hub-nav-chip:hover {
    box-shadow: var(--golge-2);
    transform: scale(1.05);
    animation: wiggleHover 0.4s ease;
}
.hub-nav-chip:active {
    transform: scale(0.97);
    transition-duration: var(--sure-bas);
}
.hub-nav-chip.active,
.hub-nav-chip[aria-checked="true"] {
    background: var(--dugme-dolgu);
    color: var(--dugme-metin);
    border-color: var(--beyaz);
    box-shadow: var(--golge-2);
}
.chip-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;     /* 128 ızgara / 28 yarıçapın 26 px'teki izdüşümü (görsel zaten yuvarlak) */
    object-fit: contain;
    flex-shrink: 0;
}
.chip-label { line-height: 1; }
.chip-sub {
    font-family: var(--yazi-rozet-aile);
    font-size: var(--yazi-rozet-boy);
    font-weight: var(--yazi-rozet-kalinlik);
    line-height: 1;
    color: var(--murekkep-orta);
}
.hub-nav-chip[aria-checked="true"] .chip-sub { color: var(--dugme-metin); }

/* Arama (öğretmen görünümü): input[type=search], beyaz hap; sonuç sayısı sağda canlı bölge */
.hub-search {
    display: flex;
    align-items: center;
    gap: var(--ara-2);
    max-width: 560px;
    min-height: var(--hedef-min);
    padding: 0 var(--ara-4) 0 var(--ara-4);
    background: var(--yuzey);
    border: 3px solid var(--beyaz);
    border-radius: var(--r-hap);
    box-shadow: var(--golge-1);
    transition: box-shadow var(--sure-gecis) var(--egri-out), border-color var(--sure-gecis) var(--egri-out);
}
.hub-search[hidden] { display: none; }
.hub-search:focus-within { border-color: var(--mavi-800); box-shadow: 0 0 0 4px var(--odak-isik), var(--golge-1); }
.hub-search-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--murekkep-orta); stroke-width: 2.2; stroke-linecap: round; }
.hub-search input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 0;
    outline: 0;                /* halka kap üzerinde (:focus-within) */
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--yazi-govde-boy);
    font-weight: 700;
    color: var(--murekkep);
}
.hub-search input::placeholder { color: var(--murekkep-orta); opacity: 1; }
.hub-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; cursor: pointer;
    background: var(--murekkep-orta); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.hub-search-count {
    flex: none;
    font-family: var(--yazi-rozet-aile);
    font-size: var(--yazi-rozet-boy);
    font-weight: var(--yazi-rozet-kalinlik);
    color: var(--murekkep-orta);
    white-space: nowrap;
}
.hub-search-count:empty { display: none; }

/* ── Raf: başlık çipi + "n oyun" rozeti; gövde yatay ray (Hepsi) ya da ızgara (tek raf / arama) ── */
.hub-grid {
    position: relative;
    z-index: 1;
    max-width: var(--hub-genislik);
    margin: 0 auto;
    padding: var(--ara-3) var(--ara-5) var(--ara-7);
    display: flex;
    flex-direction: column;
    gap: var(--ara-5);
}
.raf { min-width: 0; }
.raf-bas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ara-2) var(--ara-3);
    margin: 0 0 var(--ara-3);
}
.raf-baslik {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ara-2);
    margin: 0;
    min-height: 44px;
    padding: var(--ara-2) var(--ara-5);
    border-radius: var(--r-hap);
    background: var(--dugme-dolgu);
    color: var(--dugme-metin);
    border: 3px solid var(--beyaz);
    box-shadow: var(--golge-2);
    font-family: var(--yazi-baslik-aile);
    font-weight: var(--yazi-raf-kalinlik);
    font-size: var(--yazi-baslik-boy);
    line-height: var(--yazi-baslik-satir);
}
.raf-yas {
    font-family: var(--yazi-rozet-aile);
    font-size: 1rem;
    font-weight: var(--yazi-rozet-kalinlik);
}
.raf-sayi {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: var(--ara-1) var(--ara-4);
    border-radius: var(--r-hap);
    background: var(--yuzey);
    color: var(--murekkep);
    font-family: var(--yazi-rozet-aile);
    font-size: 0.95rem;
    font-weight: var(--yazi-rozet-kalinlik);
    box-shadow: var(--golge-1);
}

/* Yatay ray: sabit kart eni, kaydırma yakalama; alt boşluk gölge için */
.raf-ray {
    display: flex;
    align-items: stretch;
    gap: var(--ara-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--ara-1);
    padding: var(--ara-2) var(--ara-1) var(--ara-4);
    margin: 0 calc(-1 * var(--ara-1));
    scrollbar-width: thin;
    scrollbar-color: var(--mavi-800) transparent;
}
.raf-ray::-webkit-scrollbar { height: 8px; }
.raf-ray::-webkit-scrollbar-track { background: transparent; }
.raf-ray::-webkit-scrollbar-thumb { background: var(--mavi-800); border-radius: var(--r-hap); }
.raf-ray > .game-card {
    flex: 0 0 var(--kart-en);
    width: var(--kart-en);
    scroll-snap-align: start;
}

/* Izgara: tek raf ya da arama sonuçları (satır değiştirme ok tuşlarıyla, js/hub-ia.js) */
.raf-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--kart-en), 1fr));
    gap: var(--ara-4);
    padding: var(--ara-2) 0 var(--ara-2);
}

/* Boş durum: "Burada bir oyun yok" (sözleşme §3.09) — beyaz çıkartma kutusu, teknik terim yok */
.hub-empty,
.continue-empty {
    display: flex;
    align-items: center;
    gap: var(--ara-4);
    max-width: 560px;
    padding: var(--ara-4) var(--ara-5);
    background: var(--yuzey);
    border: var(--kontur);
    border-radius: var(--r-kart);
    box-shadow: var(--golge-1);
    color: var(--metin);
}
.hub-empty { flex-direction: column; align-items: flex-start; gap: var(--ara-1); }
.continue-empty { background: var(--mavi-050); }   /* beyaz maskot açık mavi zeminde okunur */
.hub-empty p, .continue-empty p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--murekkep-orta); }
.hub-empty-title, .continue-empty-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--murekkep) !important;
}
.continue-maskot { flex: none; width: 64px; height: 58px; }

/* ── Devam et: ilk satır; 3 geniş karo (ikon + ad + yıldızlar), sol kenarda kategori şeridi ── */
.hub-continue {
    position: relative;
    z-index: 1;
    max-width: var(--hub-genislik);
    margin: 0 auto;
    padding: var(--ara-4) var(--ara-5) 0;
}
.hub-continue[hidden] { display: none; }
.continue-ray { padding-bottom: var(--ara-2); }
.raf-baslik--devam { background: var(--dugme-dolgu); }

/* ── Oyun Kartı: beyaz yüzey, beyaz çıkartma konturu, üstte 8 px kategori şeridi (sözleşme §2/§3.03).
      Anatomi: [rozet] · ikon · ad (2 satır yuvası) · yıldız yuvaları (solo) · yaş [+ süre] · [kazanım]
      Kart yalnız DOM API ile çizilir (js/app.js createGameCard); durum asla yalnız renkle anlatılmaz. ── */
.game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--ara-4) var(--ara-3) var(--ara-3);
    background: var(--yuzey);
    border-radius: var(--r-kart);
    box-shadow: var(--golge-2);
    cursor: pointer;
    transition: transform var(--sure-gecis) var(--egri-out), box-shadow var(--sure-gecis) var(--egri-out);
    /* Giriş: backwards (both değil) → animasyon bitince transform serbest kalır, :hover/:active çalışır.
       Sonsuz süzülme (gentleFloat) kaldırıldı: 58 kart sürekli compositing + hover'ı eziyordu. */
    animation: cardEnter 0.5s var(--egri-out) backwards;
    border: var(--kontur);
    overflow: hidden;
    min-width: 0;
}
.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--cizgi);
}
/* Kategori şeridi: data-section (js/app.js) → kategori token'ı; yeni oyun için CSS'e satır EKLENMEZ */
.game-card[data-section="harf"]::before { background: var(--kat-harf); }
.game-card[data-section="sayi"]::before { background: var(--kat-sayi); }
.game-card[data-section="bulmaca"]::before { background: var(--kat-bulmaca); }
.game-card[data-section="yaratici"]::before { background: var(--kat-yaratici); }
.game-card[data-section="strateji"]::before { background: var(--kat-strateji); }
.game-card[data-section="online"]::before { background: var(--kat-online); }

.game-card:hover, .game-card:focus-visible {
    transform: scale(1.06) translateY(-4px);
    box-shadow: var(--golge-3);
}

/* Basma geri bildirimi: 120 ms güçlü ease-out, ölçek 0,97 — çocuk bastığında kart "dinlediğini" gösterir */
.game-card:active {
    transform: scale(0.97);
    box-shadow: var(--golge-1);
    transition-duration: var(--sure-bas);
}

/* Kart ikonu: 128 ızgara SVG, 28 yarıçap (görselin kendi zemini); rozet için üstte 8 px pay her kartta aynı */
.card-icon {
    width: 90px;
    height: 90px;
    margin-top: var(--ara-2);
    margin-bottom: var(--ara-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-giris);
    box-shadow: var(--golge-1);
    transition: transform 0.3s var(--egri-out);
    overflow: hidden;
    background: none;
    flex: none;
}
.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.game-card:hover .card-icon {
    transform: scale(1.1) rotate(-4deg);
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    width: 100%;
    min-width: 0;
}

/* Kart başlığı: 20 px Fredoka; iki satır yuvası her kartta eşit (yıldız satırı hizada kalır) */
.card-title {
    font-family: var(--yazi-kart-aile);
    font-weight: var(--yazi-kart-kalinlik);
    font-size: var(--yazi-kart-boy);
    line-height: var(--yazi-kart-satir);
    color: var(--murekkep);
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(2 * var(--yazi-kart-satir) * 1em);
    margin-bottom: var(--ara-1);
}

/* Kart yıldızları: yuvalar her zaman görünür; 10 seviyeli oyunda satır kırılır, kırpılmaz */
.card-stars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    gap: var(--ara-1);
}
.card-stars svg {
    width: 22px;
    height: 22px;
    transition: fill 0.3s var(--egri-out), filter 0.3s var(--egri-out);
}
.card-stars svg.earned {
    fill: var(--yildiz);
    filter: drop-shadow(0 1px 3px var(--yildiz-isik));
}
.card-stars svg.empty {
    fill: var(--yildiz-bos);
}

/* Yaş rozeti (her kartta) + süre (öğretmen): 13 px Nunito 700, en küçük ölçü */
.card-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ara-1) var(--ara-2);
    margin-top: 0;
    padding-top: var(--ara-2);
    font-family: var(--yazi-rozet-aile);
    font-size: var(--yazi-rozet-boy);
    font-weight: var(--yazi-rozet-kalinlik);
    line-height: var(--yazi-rozet-satir);
}
.card-yas {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px var(--ara-2);
    border-radius: var(--r-hap);
    background: var(--mavi-050);
    color: var(--murekkep);
    white-space: nowrap;
}
.card-dk { display: none; color: var(--murekkep-orta); white-space: nowrap; }
.card-teaches {
    display: none;
    margin-top: var(--ara-2);
    padding: var(--ara-1) var(--ara-2);
    border-radius: var(--r-giris);
    background: var(--mavi-050);
    color: var(--murekkep);
    font-family: var(--yazi-rozet-aile);
    font-size: var(--yazi-rozet-boy);
    font-weight: var(--yazi-rozet-kalinlik);
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
}
/* Öğretmen görünümü: kazanım etiketi + süre görünür (kart ~36 px uzar); çocuk görünümünde yok.
   Tüm satırlar üstten hizalı: yaş/süre yıldızların hemen altında, kazanım onun altında; artan boşluk kartın altında. */
.hub.ogretmen .card-dk { display: inline; }
.hub.ogretmen .card-teaches {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Devam et karosu: yatay düzen, şerit SOLDA (sözleşme §2 "Devam et satırı"), ikon + ad + yıldızlar */
.game-card--devam,
.continue-ray > .game-card--devam {          /* .raf-ray > .game-card kart enini ezer (özgüllük) */
    flex: 0 0 300px;
    width: 300px;
    flex-direction: row;
    align-items: center;
    gap: var(--ara-3);
    padding: var(--ara-3) var(--ara-4) var(--ara-3) var(--ara-5);
    text-align: left;
}
.game-card--devam::before { top: 0; bottom: 0; right: auto; width: 8px; height: auto; }
.game-card--devam .card-icon { width: 60px; height: 60px; margin: 0; }
.game-card--devam .card-body { align-items: flex-start; width: auto; flex: 1 1 0; min-width: 0; }
.game-card--devam .card-title { text-align: left; min-height: 0; font-size: 1.1rem; margin-bottom: var(--ara-1); -webkit-line-clamp: 2; }
.game-card--devam .card-stars { justify-content: flex-start; }
.game-card--devam .card-stars svg { width: 18px; height: 18px; }
.game-card--devam .card-meta,
.game-card--devam .card-teaches { display: none !important; }
.game-card--devam .mp-badge { position: static; align-self: flex-start; margin-top: var(--ara-1); }
.game-card--devam .coming-soon-badge,
.game-card--devam .offline-badge,
.game-card--devam .lock-badge { top: var(--ara-2); right: var(--ara-2); }

/* ── Rozet: tek bileşen (Nunito 700 13 px, hap). Durum hiçbir zaman yalnız renkle anlatılmaz:
      "Yakında"/"Çevrimdışı" gri zemin + metin, kilit kilit simgesi + metin, online oyuncu simgesi. ── */
.coming-soon-badge,
.offline-badge,
.lock-badge {
    position: absolute;
    top: var(--ara-2);
    right: var(--ara-2);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--ara-1);
    font-family: var(--yazi-rozet-aile);
    font-size: var(--yazi-rozet-boy);
    font-weight: var(--yazi-rozet-kalinlik);
    line-height: var(--yazi-rozet-satir);
    padding: var(--ara-1) var(--ara-3);
    border-radius: var(--r-hap);
}

/* ── Yakında (deaktif) oyun kartı ── */
.game-card.coming-soon { cursor: default; }
.game-card.coming-soon .card-icon img {
    filter: grayscale(0.85) brightness(0.93);
    opacity: 0.72;
}
.game-card.coming-soon .card-title { opacity: 0.7; }
.coming-soon-badge {
    background: var(--yildiz-bos);
    color: var(--murekkep-orta);   /* 4.7:1 */
}
.card-soon-label {
    font-family: var(--yazi-rozet-aile);
    font-size: var(--yazi-rozet-boy);
    font-weight: var(--yazi-rozet-kalinlik);
    color: var(--murekkep-orta);
}
.game-card.cs-bump { animation: csBump 0.4s ease; }
@keyframes csBump {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px) scale(1.02); }
}

/* ── Kilitli oyun kartı (yıldız eşiği / öğretmen izni) ── */
.game-card.locked { cursor: default; }
.game-card.locked .card-icon img {
    filter: grayscale(0.85) brightness(0.93);
    opacity: 0.72;
}
.game-card.locked .card-title { opacity: 0.7; }
/* Online kartta "2 Oyuncu" rozetini gizle — kilit rozetiyle aynı köşede */
.game-card.locked .mp-badge { display: none; }
.lock-badge {
    background: var(--yuzey);
    color: var(--murekkep);
    box-shadow: var(--golge-1);
}
.lock-badge .lock-ico {
    width: 13px;
    height: 13px;
    fill: currentColor;
}
.card-lock-progress {
    display: inline-flex;
    align-items: center;
    gap: var(--ara-1);
    font-family: var(--yazi-rozet-aile);
    font-size: var(--yazi-rozet-boy);
    font-weight: var(--yazi-rozet-kalinlik);
    color: var(--murekkep-orta);
}
.card-lock-progress .lp-star {
    width: 14px;
    height: 14px;
    fill: var(--yildiz);
}

/* ── Çevrimdışı (Firebase yüklenemedi): bant (maskot uyuyan) + online kartların kapalı hâli ── */
.offline-banner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ara-3);
    max-width: var(--hub-genislik);
    margin: var(--ara-3) auto 0;
    padding: var(--ara-2) var(--ara-4);
    font-weight: 700;
    font-size: 1rem;
    color: var(--murekkep);
    background: var(--mavi-050);   /* açık mavi zemin: beyaz maskot okunur, metin mürekkep (10:1) */
    border: var(--kontur);
    border-radius: var(--r-kart);
    box-shadow: var(--golge-1);
    text-align: center;
}
.offline-maskot { flex: none; width: 44px; height: 40px; }
@media (max-width: 600px) {
    .offline-banner { margin-left: var(--ara-4); margin-right: var(--ara-4); }
}
.game-card.offline { cursor: default; }
.game-card.offline .card-icon img {
    filter: grayscale(0.85) brightness(0.93);
    opacity: 0.72;
}
.game-card.offline .card-title { opacity: 0.7; }
.game-card.offline .mp-badge { display: none; }
.offline-badge {
    background: var(--yildiz-bos);
    color: var(--murekkep-orta);
}

/* ── Kırılımlar: 1024 (sınıf tableti yatay) kart 168 px; 375 telefon kart 152 px, çipler 44 px ── */
@media (max-width: 1100px) {
    .hub { --kart-en: 168px; }
}
@media (max-width: 640px) {
    .hub { --kart-en: 152px; }
    .hub-nav { padding: var(--ara-2) var(--ara-4) 0; }
    .hub-continue { padding: var(--ara-3) var(--ara-4) 0; }
    .hub-grid { padding: var(--ara-2) var(--ara-4) var(--ara-6); gap: var(--ara-4); }
    .hub-nav-chip { min-height: 44px; padding: 0 var(--ara-3); font-size: 0.95rem; gap: 6px; }
    .chip-icon { width: 22px; height: 22px; }
    .raf-baslik { font-size: 1.25rem; padding: 6px var(--ara-4); }
    .raf-yas { font-size: 0.9rem; }
    .raf-sayi { min-height: 32px; font-size: 0.85rem; }
    .raf-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ara-3); }
    .game-card { padding: var(--ara-4) var(--ara-2) var(--ara-3); }
    .card-icon { width: 72px; height: 72px; }
    .card-title { font-size: 1.1rem; }
    .card-stars svg { width: 18px; height: 18px; }
    .game-card--devam, .continue-ray > .game-card--devam { flex-basis: 240px; width: 240px; padding: var(--ara-2) var(--ara-3) var(--ara-2) var(--ara-4); }
    .game-card--devam .card-icon { width: 52px; height: 52px; }
    .hub-empty, .continue-empty { padding: var(--ara-3) var(--ara-4); }
    .continue-maskot { width: 52px; height: 47px; }
}
@media (max-width: 360px) {
    .hub { padding-top: 68px; }
}

/* ── Dialog sistemi (B3): tek kap, js/dialog.js açar/kapatır. Katmanlar: kilit penceresi (js/app.js),
      meta panel (#meta-panel), seviye tamamlama (#level-complete). <dialog> öğesinin kendisi tam ekran
      perdedir (kart dışına tık = perdeye tık); yerel showModal yoksa (yedek yol) aynı görünüm z-index ile
      durur. Kart stilleri kendi bloklarında (.lock-modal-card, .meta-card, main.css .complete-card). ── */
.dialog {
    position: fixed; inset: 0; z-index: 1200;         /* z-index yalnız yedek yol; üst katman sırayı kendisi verir */
    width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; padding: var(--ara-5); border: 0;
    background: var(--perde); color: var(--metin);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    align-items: center; justify-content: center;
    overflow: auto; overscroll-behavior: contain;     /* taşan kart kayar, kaydırma arkaya zincirlenmez */
}
.dialog[open] { display: flex; }
.dialog:not([open]) { display: none; }
.dialog::backdrop { background: transparent; }        /* perde dialog'un kendi zemini (yedek yolla aynı görünüm) */
.dialog > * { margin: auto; }                         /* auto kenar: ortalar; sığmayan kart üstten kesilmez, kap kayar */
/* Giriş: perde solar (220 ms), kart merkezden hafif büyür — modal merkezden gelir (transform-origin center).
   Çıkış daha kısa (120 ms). Klavyeyle açılan/kapanan katman (.dialog--aninda) animasyonsuz. */
.dialog[open]:not(.dialog--aninda):not(.dialog--kapaniyor) {
    animation: dialogAc var(--sure-gecis) var(--egri-out) both;
}
.dialog[open]:not(.dialog--aninda):not(.dialog--kapaniyor) > * {
    animation: dialogKartAc var(--sure-gecis) var(--egri-out) both;
}
.dialog.dialog--kapaniyor:not(.dialog--aninda) {
    animation: dialogKapat var(--sure-bas) var(--egri-out) both;
    pointer-events: none;
}
.dialog.dialog--kapaniyor:not(.dialog--aninda) > * {
    animation: dialogKartKapat var(--sure-bas) var(--egri-out) both;
}
@keyframes dialogAc { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialogKartAc { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dialogKapat { from { opacity: 1; } to { opacity: 0; } }
@keyframes dialogKartKapat { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
    .dialog, .dialog > * { animation: none !important; }   /* anında: token süreleri değil, hiç hareket yok */
}
/* Konfeti kanvası (index.html data-dialog-ustu) modal açıkken popover olarak üst katmana alınır
   (js/dialog.js raiseOverlays) — UA popover stilleri (kenar, dolgu, zemin, fit-content) sıfırlanır. */
[data-dialog-ustu]:popover-open {
    position: fixed; inset: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; background: transparent;
    overflow: hidden; pointer-events: none;
}

/* ── Kilitli oyun bilgi penceresi (sözleşme §3.04: tek düğme "Tamam") — kart; kap .dialog ── */
.lock-modal-card {
    background: var(--yuzey); border: var(--kontur); border-radius: var(--r-kart);
    padding: var(--ara-5) var(--ara-5) var(--ara-5); max-width: 340px; width: 100%;
    text-align: center; box-shadow: var(--golge-3);
}
.lm-icon {
    width: 64px; height: 64px; margin: 0 auto var(--ara-3); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--mavi-800);
    box-shadow: var(--golge-2);
}
.lm-icon .lm-lock { width: 32px; height: 32px; fill: var(--beyaz); }
.lm-title {
    font-family: var(--yazi-baslik-aile); font-size: var(--yazi-baslik-boy);
    font-weight: var(--yazi-baslik-kalinlik); line-height: var(--yazi-baslik-satir);
    color: var(--murekkep); margin: 0 0 var(--ara-2);
}
.lm-msg { font-size: 1rem; color: var(--metin); line-height: 1.5; margin: 0 0 var(--ara-4); }
.lm-bar { height: 14px; background: var(--cizgi); border-radius: var(--r-hap); overflow: hidden; margin: 0 0 var(--ara-2); }
.lm-bar-fill { height: 100%; width: 0; border-radius: var(--r-hap); background: var(--yildiz); transition: width 0.5s var(--egri-out); }
.lm-bar-label { font-size: 0.82rem; font-weight: 700; color: var(--murekkep-orta); margin: 0 0 var(--ara-4); }
.lm-hint { font-size: 0.82rem; color: var(--murekkep-orta); margin: 0 0 var(--ara-5); }
.lm-btn {
    background: var(--dugme-dolgu);
    color: var(--dugme-metin); border: var(--kontur); border-radius: var(--r-hap);
    font-family: var(--yazi-dugme-aile); font-weight: var(--yazi-dugme-kalinlik); font-size: var(--yazi-dugme-boy);
    min-height: var(--hedef-min); padding: var(--ara-3) 34px; cursor: pointer;
    box-shadow: var(--golge-2);
    transition: transform var(--sure-bas) var(--egri-out), box-shadow var(--sure-bas) var(--egri-out), filter var(--sure-gecis) var(--egri-out);
}
.lm-btn:hover { filter: brightness(1.07); }
.lm-btn:active { transform: scale(0.97); box-shadow: var(--golge-1); }

/* ── Meta katman v1: jeton çipi + ilerleme paneli (EGITSEL-OYUN-PLANI §3) ── */
.coin-counter { cursor: pointer; transition: transform var(--sure-gecis) var(--egri-out); }
.coin-counter .coin-icon { font-size: 17px; line-height: 1; }
.coin-counter:hover { transform: scale(1.06); }
.coin-counter:active { transform: scale(0.97); transition-duration: var(--sure-bas); }

/* #meta-panel: kap .dialog (js/dialog.js) — burada yalnız kart */
.meta-card { background: var(--yuzey); border: var(--kontur); border-radius: var(--r-kart); width: 100%; max-width: 440px; max-height: 84vh;
    overflow: auto; padding: 18px 18px 14px; box-shadow: var(--golge-3); color: var(--metin); }
.meta-head { display: flex; justify-content: space-between; align-items: center; }
.meta-head h2 { font-size: var(--yazi-baslik-boy); font-weight: var(--yazi-baslik-kalinlik); }
.meta-head button { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--murekkep-orta);
    min-width: 44px; min-height: 44px; border-radius: 50%; }
.meta-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ara-2); margin: var(--ara-3) 0; }
.meta-stat { background: var(--mavi-050); border-radius: var(--r-giris); padding: 9px 6px; text-align: center; }
.meta-stat span { display: block; font-size: var(--yazi-rozet-boy); color: var(--murekkep-orta); font-weight: 700; }
.meta-stat b { font-size: 17px; }
.meta-games { display: flex; flex-direction: column; gap: 6px; }
.mp-row { display: flex; align-items: center; gap: var(--ara-2); background: var(--mavi-050); border-radius: var(--r-giris);
    padding: var(--ara-2) 10px; font-size: 13.5px; }
.mp-ic { font-size: 18px; }
.mp-nm { font-weight: 800; white-space: nowrap; }
.mp-ln { color: var(--murekkep-orta); margin-left: auto; text-align: right; }
.mp-empty { justify-content: center; color: var(--murekkep-orta); }
.meta-note { font-size: var(--yazi-rozet-boy); color: var(--murekkep-orta); margin-top: var(--ara-3); line-height: 1.5; }

.meta-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(80px);
    background: var(--murekkep); color: var(--beyaz); padding: 11px 20px; border-radius: var(--r-hap); font-weight: 700;
    font-size: 14px; box-shadow: var(--golge-3); z-index: 1300; opacity: 0;
    transition: transform var(--sure-gecis) var(--egri-out), opacity var(--sure-gecis) var(--egri-out); pointer-events: none; max-width: 92vw; text-align: center; }
.meta-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ── Meta v2: rozetler ── */
.meta-sub { font-size: 14px; margin: var(--ara-3) 0 7px; }
.meta-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
/* .meta-badge (eski .mp-badge): online kartlardaki "2 Oyuncu" rozetiyle (multiplayer.css .mp-badge) çakışıyordu */
.meta-badge { background: var(--mavi-050); border-radius: var(--r-giris); padding: var(--ara-2) var(--ara-1); text-align: center; }
.meta-badge.on { background: var(--yildiz-zemin); box-shadow: 0 0 0 2px var(--yildiz) inset; }
.meta-badge span { font-size: 22px; display: block; }
/* Kazanılmamış rozet: yalnız SİMGE sönük; 13 px etiket tam kontrastta kalır (B3 Lighthouse: tüm rozet
   %45 opaklıkta 1.92:1 idi → WCAG 1.4.3 hatası) */
.meta-badge:not(.on) span { opacity: .45; filter: grayscale(.6); }
.meta-badge small { font-size: var(--yazi-rozet-boy); font-weight: 700; color: var(--murekkep-orta); line-height: 1.2; display: block; margin-top: 2px; }

/* ── Ana sayfa altbilgisi (A5a): .hub kaydırma kapsayıcısı içinde, kartların altında.
      Tarayıcı + veli için; sessiz: küçük punto, mürekkep tonu, tek beyaz yaprak. ── */
.hub-footer {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--ara-5) var(--ara-4);
    font-family: var(--font-body);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--murekkep-orta);
}
.hub-footer-inner {
    background: var(--yuzey);
    border: var(--kontur);
    border-radius: var(--r-kart);
    padding: var(--ara-5);
    box-shadow: var(--golge-1);
}
.hub-footer-lead {
    max-width: 68ch;
    margin: 0 0 var(--ara-5);
    color: var(--metin);
}
.hub-footer-lead strong { font-family: var(--font-display); font-weight: 600; }
.hub-footer a {
    color: var(--murekkep-orta);
    text-decoration: underline;
    text-decoration-color: var(--cizgi);
    text-underline-offset: 2px;
    border-radius: 4px;
    transition: color var(--sure-gecis) var(--egri-out), text-decoration-color var(--sure-gecis) var(--egri-out);
}
.hub-footer a:hover,
.hub-footer a:focus-visible {
    color: var(--murekkep);
    text-decoration-color: currentColor;
}
.hub-footer-lead a { color: var(--mavi-800); font-weight: 700; }
.hub-footer-nav {
    /* Çok sütunlu akış: 17 bağlantılı "Strateji" grubu tek sütun olarak dengelenir (grid'de
       ikinci satırı tek başına uzatıyordu); grup bölünmez */
    column-width: 150px;
    column-gap: var(--ara-5);
}
.hub-footer-group {
    break-inside: avoid;
    margin-bottom: var(--ara-4);
}
.hub-footer-group h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--murekkep);
    margin: 0 0 var(--ara-1);
}
.hub-footer-group ul { list-style: none; margin: 0; padding: 0; }
.hub-footer-group li { margin: 0; padding: 1px 0; }
.hub-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ara-1) var(--ara-5);
    margin-top: var(--ara-5);
    padding-top: var(--ara-4);
    border-top: 1px solid var(--cizgi);
    font-weight: 700;
}
@media (max-width: 600px) {
    .hub-footer { padding: 0 var(--ara-4) var(--ara-2); }
    .hub-footer-inner { padding: var(--ara-4); }
    .hub-footer-nav { column-count: 2; column-width: auto; }
}

/* İmza bandı hub'da (css/imza.css): sabit arka planın (.hub-bg z-index 0) üstünde kalsın;
   çim üstünde durduğu için ikincil ton da mürekkep (yeşilde 5.8:1; mürekkep-orta 3.1:1 kalır) */
.hub .imza-band {
    position: relative;
    z-index: 1;
    --imza-muted: var(--murekkep);
    padding-bottom: calc(var(--ara-2) + env(safe-area-inset-bottom, 0px));
}