/* EKRANLAR (io327) — eski kuşak ekranların yeni kuşağa taşınması. style.css'ten SONRA yüklenir; yalnız paylaşılan
   jetonları kullanır (renk, yarıçap, gölge, yazı merdiveni) — burada ham renk, ölçek dışı yarıçap ya da yazı boyu yoktur
   (stil kapısı bu dosyayı da ölçer). Kart dili Bugün panosuyla aynı: --surface + 1 px --hat + --yuzey-1 + --r-lg.
   Açık ve koyu tema aynı jetonlardan gelir; temaya özel kural gerekmez. */

/* ===== 1. PROFİL DÜZENLE (alt sayfa formu; public/profil-duzenle.js) ===== */
.pd-sayfa .sheet { max-height: 94dvh; }
.pd-sayfa .sheet-body { padding-bottom: 0; }
.pd { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.pd-grup { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); }
.pd-baslik { margin: 0; font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.pd-alan { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pd-alan > label, .pd-etiket { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink-2); }
.pd-alan input { width: 100%; min-height: 48px; margin: 0; font-size: 16px; }
.pd-alan input[aria-invalid="true"] { border-color: var(--bad-d); }
.pd-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd-seg { flex: none; margin: 0; }
.pd-seg button { min-width: 64px; min-height: 44px; }
/* seçenekler eşit sütunlu ızgara: dağınık çip satırı yerine düzenli, her biri 44 px dokunma hedefi */
.pd-cipler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pd-cipler.pd-s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-cipler.pd-s4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pd-cipler.pd-s5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pd-cipler .chip { display: grid; place-items: center; min-width: 0; min-height: 44px; margin: 0; padding: 4px 6px; font-size: 15px; line-height: 1.2; text-align: center; white-space: normal; }
.pd-kimlik { flex-direction: row; align-items: flex-start; gap: 14px; }
.pd-kimlik .pd-alan { flex: 1; }
.pd-avatar { flex: none; margin-top: 18px; }
.pd-tarih { display: flex; align-items: center; gap: 8px; }
.pd-tarih input { flex: 1; min-width: 0; }
.pd-kucuk { flex: none; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hat-guclu); font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.pd-not { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.pd-not:empty { display: none; }
.pd-not b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pd-hata { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--bad-d); }
.pd-resmi { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.pd-resmi > div { display: flex; flex-direction: column; min-width: 0; }
.pd-resmi b { font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.pd-resmi span:not(.karo) { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.pd-daha > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px; min-height: 44px; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pd-daha > summary::-webkit-details-marker { display: none; }
.pd-daha > summary .ic { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); transition: transform 200ms var(--ease-enter); }
.pd-daha[open] > summary .ic { transform: rotate(180deg); }
.pd-ozet { grid-column: 1; font-size: 13.5px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-daha[open] .pd-ozet { display: none; }
.pd-daha { display: block; }
.pd-daha > .pd-alan { margin-top: 16px; }
.pd-gizlilik { padding: 0 4px; text-align: center; }
/* Kaydet / Vazgeç her zaman elin altında: sayfanın dibine yapışır, altından içerik kayar */
.pd-alt { position: sticky; bottom: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px; margin: 0 -18px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--hat); }
.pd-alt .btn { width: 100%; min-height: 52px; margin: 0; font-size: 16px; }
@media (max-width: 366px) { .pd-grup { padding: 14px; } .pd-cipler { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .pd-daha > summary .ic { transition: none; } }

/* ===== 2. SOSYAL ALAN (Arkadaşlar · Lig · Duo seri · Okul ligi; public/arkadaslar/sosyal.js) =====
   Tek kalıp: Neti adıyla konuşur (durağan resim + balon) → kartlar → tek ana eylem → gizlilik notu. */
.sy-geri { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -8px 0 -4px -4px; padding: 0 8px 0 4px; font-weight: 700; text-decoration: none; }
.sy { display: flex; flex-direction: column; gap: 12px; }
.sy > .card, .sy > .ark-kart { margin: 0; }
/* Neti: resim kutudan taşabilir (aksesuar kırpılmaz); balon kart dilinde, kuyruğu Neti tarafına bakar */
.sy-neti { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 2px; margin: 2px 0 0; }
.sy-neti-resim { position: relative; width: 124px; height: 132px; }
.sy-neti-resim img { position: absolute; left: 50%; bottom: -14px; width: 176px; height: auto; max-width: none; margin-left: -90px; pointer-events: none; user-select: none; }
.sy-balon { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-2); }
.sy-balon::before { content: ""; position: absolute; left: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--surface); border-left: 1px solid var(--hat); border-bottom: 1px solid var(--hat); transform: rotate(45deg); }
.sy-balon-ad { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-yazi); }
.sy-balon p { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.sy-balon small { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
/* kart */
.sy-kart { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); }
.sy-kart-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.sy-kart-bas h2 { min-width: 0; margin: 0; font-family: var(--display); font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.sy-yan { flex: none; font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.sy-seg { margin: 0; }
.sy-seg button { min-height: 44px; }
.sy-form { display: flex; flex-direction: column; gap: 14px; }
.sy-form[hidden] { display: none; }
.sy-alan { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sy-alan label { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink-2); }
.sy-alan input, .sy-alan select { width: 100%; min-height: 48px; margin: 0; font-size: 16px; }
.sy-kod-giris { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sy-kod-giris::placeholder { font-family: var(--body); letter-spacing: 0; text-transform: none; }
.sy-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.sy-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
.sy-dugmeler .btn { flex: 1; }
.sy .sy-ana { min-height: 52px; margin: 0; font-size: 16px; }
.sy-eylem { display: flex; flex-direction: column; gap: 10px; }
.sy-not { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--muted); }
.sy-not:empty { display: none; }
.sy-gizlilik { display: flex; align-items: flex-start; gap: 8px; margin: 2px 4px 0; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--muted); }
.sy-gizlilik .ic { flex: none; margin-top: 2px; color: var(--good-d); }
.sy-sessiz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 0 4px; }
.sy-sessiz .link-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13.5px; font-weight: 700; }
.sy-sessiz .sy-cik { margin-left: auto; color: var(--muted); }
/* kod kutusu: kod büyük ve okunur, yanında tek eylem */
.sy-kod { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 10px 10px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px dashed var(--hat-guclu); }
.sy-kod > div { display: flex; flex-direction: column; min-width: 0; }
.sy-kod span { font-size: 12px; font-weight: 700; color: var(--muted); }
.sy-kod b { font-family: var(--mono); font-size: 20px; font-weight: 800; letter-spacing: .1em; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.sy-kod .btn { flex: none; margin: 0; min-height: 44px; }
/* tablo: sıra · yüz · ad · değer; ilk üç sıra madalya renginde, kendi satırın mor zeminde + "sen" etiketi (renk tek gösterge değil) */
.sy-kart-tablo { gap: 8px; }
.sy-tablo { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; padding: 0; }
.sy-satir { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px; border-radius: var(--r-sm); }
.sy-satir.ben { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.sy-sira { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--display); font-size: 13.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.sy-sira.ilk1 { background: var(--gold); color: var(--accent-ink); }
.sy-sira.ilk2 { background: var(--soft); color: var(--ink); }
.sy-sira.ilk3 { background: var(--tint-warn); color: var(--alev-d); }
.sy-yuz { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--soft); font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--ink); }
.sy-satir.ben .sy-yuz { background: var(--accent); color: var(--uzeri); }
.sy-yuz.buyuk { width: 56px; height: 56px; font-size: 20px; }
.sy-ad { flex: 1; display: grid; grid-template-columns: minmax(0, auto) auto 1fr; align-items: center; column-gap: 6px; min-width: 0; }
.sy-ad b { min-width: 0; font-size: 15px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-ad small { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-sen { padding: 0 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--accent); font-size: 12px; font-weight: 800; line-height: 1.5; color: var(--accent-yazi); }
.sy-deger { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.sy-deger b { font-family: var(--display); font-size: 18px; font-weight: 800; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.sy-deger small { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sy-deger em { font-style: normal; font-weight: 800; }
.sy-deger em.art { color: var(--good-d); }
.sy-deger em.dus { color: var(--bad-d); }
.sy-yok { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
/* boş · hata · yükleniyor */
.sy-bos { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 4px; text-align: center; }
.sy-bos b { font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--ink); }
.sy-bos p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.sy-hata { flex-direction: row; flex-wrap: wrap; align-items: center; }
.sy-hata > div { flex: 1; min-width: 160px; }
.sy-hata b { font-size: 15px; font-weight: 800; color: var(--ink); }
.sy-hata p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.sy-iskelet i { display: block; height: 44px; border-radius: var(--r-sm); background: var(--soft); opacity: .7; }
.sy-iskelet i:first-child { width: 55%; height: 22px; }
/* Duo: iki kişi, ortada ortak alev */
.sy-duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 20px 12px; }
.sy-duo-kisi { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.sy-duo-kisi b { max-width: 100%; margin-top: 4px; font-size: 15px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-duo-kisi small { font-size: 12px; font-weight: 700; color: var(--muted); }
.sy-duo-durum { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.sy-duo-durum.geldi { color: var(--good-d); }
.sy-duo-orta { display: flex; flex-direction: column; align-items: center; min-width: 84px; }
.sy-alev { width: 44px; height: 50px; }
.sy-duo-orta b { font-family: var(--display); font-size: 34px; font-weight: 900; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.sy-duo-orta small { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
/* Arkadaşlar: "Birlikte" kapıları */
.sy-ara-baslik { margin: 8px 2px -2px; font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--ink); }
.sy-kapilar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sy-kapi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 68px; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 90ms var(--ease-snap); }
.sy-kapi:active { transform: scale(.97); }
.sy-kapi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sy-kapi .karo { grid-row: 1 / span 2; }
.sy-kapi b { align-self: end; font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.sy-kapi small { align-self: start; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--muted); overflow: hidden; overflow-wrap: anywhere; }
.sy-ark .ark-kodum { margin-top: 12px; }
@media (max-width: 366px) { .sy-neti { grid-template-columns: 112px minmax(0, 1fr); } .sy-neti-resim { width: 112px; } .sy-neti-resim img { width: 164px; margin-left: -84px; } .sy-balon p { font-size: 16px; } .sy-kart { padding: 14px; } .sy-kapi { padding: 10px; column-gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .sy-kapi { transition: none; } }
.sy-okul-tablo .sy-ad b, .sy-duo-kisi b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.sy .btn.sm { min-height: 44px; }

/* ===== 3. GÜNLÜK MEYDAN OKUMA (public/oyun/gunluk.js) + SÜRELİ KOŞU KABUĞU =====
   Koşu kabuğu (.gm-kosu, :root[data-kosu]) tekSoruModu'nun ürettiği .quiz'i sarar: üst çubuk ve sekmeler gizlenir, soru kendi
   kartında, süre büyük ve okunur. Şık düğmelerine burada dokunulmaz — tek şık bileşeni (.secenek, io326) onları tek yerden biçimler. */
.sy-gorunmez { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:root[data-kosu] .top, :root[data-kosu] #tabs, :root[data-kosu] .kt-fab { display: none; }
:root[data-kosu] #view { padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
:root[data-kosu] #view > .sy-geri, :root[data-kosu] #view > h1 { display: none; }
.gm-kosu { display: flex; flex-direction: column; gap: 12px; }
.gm-ust { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; }
.gm-ust .iconbtn { width: 44px; height: 44px; margin: 0; }
.gm-ust b { font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-ust-seri { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.gm-ust-seri .ic { color: var(--alev-d); }
.gm-ust-seri.sonuk, .gm-ust-seri.sonuk .ic { color: var(--muted); }
.gm-kosu .quiz { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.gm-kosu .quiz > .row:first-child { min-height: 40px; }
.gm-kosu .quiz .pill { min-width: 68px; min-height: 36px; justify-content: center; padding: 0 12px; background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.gm-kosu .quiz .pill.warn { background: var(--tint-bad); border-color: var(--bad-d); color: var(--bad-d); }
.gm-kosu .qbar { height: 8px; margin-top: 8px; border-radius: 999px; }
.gm-kosu .qbar i { border-radius: 999px; background: var(--accent); }
.gm-kosu .qstem { margin: 8px 0 12px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-2); font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.gm-kosu #pas { display: block; min-width: 120px; min-height: 44px; margin: 12px auto 0; }
.gm-kosu .combo { margin-bottom: 6px; }
/* giriş */
.gm-uclu { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.gm-uclu li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.gm-uclu .karo { margin-bottom: 6px; }
.gm-uclu b { font-family: var(--display); font-size: 18px; font-weight: 800; line-height: 1.15; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.gm-uclu small { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.gm-seri { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-sm); background: var(--tint-warn); font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.gm-seri .ic { flex: none; color: var(--alev-d); }
.gm-seri b { font-weight: 800; }
.gm-seri.sonuk { background: var(--surface-2); color: var(--ink-2); }
.gm-seri.sonuk .ic { color: var(--muted); }
.gm .gm-basla { min-height: 56px; letter-spacing: .06em; text-transform: uppercase; }
.sy-yan .ic { vertical-align: -2px; }
.gm-ekle { display: flex; align-items: center; gap: 8px; }
.gm-ekle input { flex: 1; min-width: 0; min-height: 48px; margin: 0; font-size: 16px; }
.gm-ekle .btn { flex: none; margin: 0; }
/* sonuç */
.gm-skor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gm-skor > div { display: flex; flex-direction: column; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); }
.gm-skor b { font-family: var(--display); font-size: 34px; font-weight: 900; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.gm-skor b i { font-style: normal; font-size: 18px; font-weight: 800; color: var(--muted); }
.gm-skor small { font-size: 12px; font-weight: 700; color: var(--muted); }
.gm-kareler { gap: 6px; }
.gm-kareler .tile { border-radius: 12px; }
.gm-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gm-kutu { gap: 2px; padding: 14px; }
.gm-kutu .karo { margin-bottom: 8px; }
.gm-kutu > b { font-family: var(--display); font-size: 26px; font-weight: 900; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.gm-kutu > b.gm-kutu-yazi { font-size: 16px; font-weight: 800; line-height: 1.25; }
.gm-kutu > small { font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--muted); }
.gm-kutu > em { margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--accent-yazi); }
.gm-dagilim { margin: 0; }
@media (max-width: 366px) { .gm-uclu li { padding: 10px; } .gm-uclu b { font-size: 16px; } .gm-kosu .qstem { padding: 14px; } .gm-skor b { font-size: 26px; } }
@media (max-height: 700px) { .gm-ust { min-height: 48px; } .gm-kosu { gap: 8px; } .gm-kosu .qstem { margin: 6px 0 10px; padding: 12px 14px; } }

/* ===== 4. TEKRAR (hata defteri tekrarı + mini sınav; public/tekrar-ekran.js) =====
   Tek tek sorulan tekrar: ilerleme → soru kartı → şıklar (tek şık bileşeni) → büyük "Neden?" paneli → Devam. */
.tk-ilerleme { display: flex; align-items: center; gap: 10px; }
.tk-ilerleme > span { flex: none; font-size: 13.5px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tk-ray { flex: 1; height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.tk-ray i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--accent); transition: width 320ms var(--ease-enter); }
.tk-ray i.iyi { background: var(--good-d); }
.tk-soru { display: flex; flex-direction: column; gap: 12px; }
.tk-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tk-ust .eyebrow { min-width: 0; }
.tk-rozet { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--tint-violet); font-size: 12px; font-weight: 800; color: var(--accent-yazi); white-space: nowrap; }
.tk-kok { padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-2); font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
/* "Neden?" paneli: ders oynatıcısındaki geri bildirim kartının dili — renk + ikon + yazı birlikte */
.tk-neden { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 2px solid var(--hat-guclu); }
.tk-neden[hidden] { display: none; }
.tk-neden.iyi { border-color: var(--good-d); background: color-mix(in srgb, var(--good) 9%, var(--surface)); }
.tk-neden.kotu { border-color: var(--bad-d); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.tk-neden-bas { display: flex; align-items: center; gap: 8px; }
.tk-neden-bas b { font-family: var(--display); font-size: 18px; font-weight: 800; line-height: 1.2; }
.tk-neden.iyi .tk-neden-bas { color: var(--good-d); }
.tk-neden.kotu .tk-neden-bas { color: var(--bad-d); }
.tk-neden-sen { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--ink-2); }
.tk-neden-sen b { font-weight: 800; color: var(--ink); }
.tk-neden-govde { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.tk-neden-et { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-yazi); }
.tk-neden-govde.tuzak .tk-neden-et { color: var(--alev-d); }
.tk-neden-vade { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.tk-alt[hidden] { display: none; }
/* Devam elin altında durur; açıklama onun ÜSTÜNDE biter (scroll-margin), altından içerik görünmez (zemin geçişi) */
.tk-alt { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 1; margin: 0 -18px; padding: 16px 18px 10px; background: linear-gradient(to bottom, transparent, var(--bg) 16px); }
.tk-neden { scroll-margin-bottom: 170px; }
/* özet */
.tk-ozet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tk-ozet > div { display: flex; flex-direction: column; padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.tk-ozet b { font-family: var(--display); font-size: 26px; font-weight: 900; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-ozet small { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.tk-bitti h2 .ic { vertical-align: -2px; color: var(--good-d); }
.tk-liste { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.tk-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; }
.tk-liste li + li { border-top: 1px solid var(--line); }
.tk-liste li > span { display: flex; flex-direction: column; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.tk-liste li > span b { font-weight: 800; }
.tk-liste li > span em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.tk-liste li > small { flex: none; font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.tk-liste li > small.iyi { color: var(--good-d); }
.tk-liste li > small.kotu { color: var(--bad-d); }
.tk-liste .tk-zor { padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hat); color: var(--ink-2); }
/* mini sınav sonucu */
.gm-skor.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gm-skor.uclu b { font-size: 26px; }
.gm-skor b.art { color: var(--good-d); }
.gm-skor b.dus { color: var(--bad-d); }
.tk-konular { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.tk-konu-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.tk-konu-ust span { min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.tk-konu-ust b { flex: none; font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-yanlis { border-top: 1px solid var(--line); }
.tk-yanlis:first-of-type { border-top: 0; }
.tk-yanlis > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; min-height: 48px; padding: 12px 0; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tk-yanlis > summary::-webkit-details-marker { display: none; }
.tk-yanlis > summary .ic { margin-top: 2px; color: var(--muted); transition: transform 200ms var(--ease-enter); }
.tk-yanlis[open] > summary .ic { transform: rotate(180deg); }
.tk-yanlis-no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tint-bad); font-size: 12px; font-weight: 800; color: var(--bad-d); }
.tk-yanlis-kok { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.tk-yanlis:not([open]) .tk-yanlis-kok { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tk-yanlis-ic { display: flex; flex-direction: column; gap: 10px; padding: 0 0 14px 34px; }
.tk-mini-giris #asama { min-height: 96px; }
@media (max-width: 366px) { .tk-kok { padding: 14px; } .tk-ozet b { font-size: 20px; } .gm-skor.uclu b { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .tk-ray i, .tk-yanlis > summary .ic { transition: none; } }
:root[data-kosu="mini"] #view > :not(#cozBody) { display: none; }

/* ===== 5. OYUNLAR MERKEZİ (public/oyun.js oyunMerkezi) =====
   Hiyerarşi: günlük meydan okuma (tek baskın kart) → öneri satırı → dört oyun (2×2, aynı boy karo, yazı kapağın ALTINDA) →
   arkadaşınla oyna → hızlı oyunlar. Kart dili Bugün panosuyla aynı. */
.oyg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 108px; align-items: end; gap: 4px; min-height: 148px; margin: 0; padding: 16px 8px 16px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-2); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.oyg-yazi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.oyg-ad { font-family: var(--display); font-size: 18px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.oyg-durum { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.oyg-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.oyg-alt .btn { margin: 0; min-height: 48px; }
.oyg .oy-seri { margin: 0; }
.oyg-neti { align-self: end; justify-self: center; width: 150px; height: auto; max-width: none; margin: -28px -10px -22px -32px; pointer-events: none; user-select: none; }
.oyg:focus-visible, .oyk:focus-visible, .oyh:focus-visible, .oy-oneri:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.oy-oneri { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 10px 0 0; padding: 8px 14px; border-radius: var(--r-sm); background: var(--tint-violet); color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.oy-oneri > span { flex: 1; min-width: 0; }
.oy-oneri b { font-weight: 800; }
.oy-oneri .ic { flex: none; color: var(--accent-yazi); }
.oy-baslik-2 { margin: 20px 2px 10px; }
/* dört oyun: aynı boy karo; kapak 16:10, üstünde yazı yok */
.oyk-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.oyk { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); color: inherit; text-decoration: none; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: transform 90ms var(--ease-snap); }
.oyk:active { transform: scale(.97); }
.oyk-gorsel { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kapak-koyu); }
.oyk-gorsel .oy-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oyk-rozet { top: 8px; right: 8px; }
.oyk-yazi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 0; }
.oyk-yazi b { font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.oyk-yazi > span { min-height: 34px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.oyk-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding: 8px 12px 12px; font-size: 13.5px; font-weight: 800; color: var(--accent-yazi); }
/* Düello kapağı: iki durağan resim-Neti karşı karşıya (kapak dosyası yerine) */
.oyk-duello { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; justify-items: center; background: var(--hero); }
.oyk-duello img { width: 112%; height: auto; max-width: none; margin-bottom: -10%; pointer-events: none; user-select: none; }
.oyk-duello img.ters { transform: scaleX(-1); }
.oyk-duello i { align-self: center; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 -10px; border-radius: 50%; background: var(--gold); color: var(--accent-ink); font-style: normal; z-index: 1; }
/* hızlı oyunlar: üç eş karo */
.oyh-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.oyh { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 124px; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 90ms var(--ease-snap); }
.oyh:active { transform: scale(.97); }
.oyh .karo { margin-bottom: 8px; }
.oyh b { font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.oyh small { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--muted); white-space: nowrap; }
.oyh em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: 12px; font-weight: 800; color: var(--accent-yazi); white-space: nowrap; }
@media (max-width: 366px) { .oyg { grid-template-columns: minmax(0, 1fr) 92px; } .oyg-neti { width: 134px; } .oyg-ad { font-size: 16px; } .oyh { padding: 10px; } .oyk-yazi { padding: 10px 10px 0; } .oyk-cta { padding: 8px 10px 10px; } }
@media (prefers-reduced-motion: reduce) { .oyk, .oyh { transition: none; } }

/* ===== 6. HIZLI OYUNLAR bitiş ekranı (games/mini.js sonucUst) + Kartlar › Kaydettiklerim boş durumu ===== */
.mgs { padding: 16px 18px 0; }
.mgs + .card { margin: 12px 18px 24px; }
.mgs-rekor { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--tint-warn); font-size: 12px; font-weight: 800; color: var(--alev-d); white-space: nowrap; }
.mgs-skor { display: flex; align-items: baseline; gap: 8px; }
.mgs-skor b { font-family: var(--display); font-size: 44px; font-weight: 900; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.mgs-skor small { font-size: 15px; font-weight: 700; color: var(--muted); }
.mgs-alt { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink-2); }
.kt-bos { display: flex; flex-direction: column; gap: 16px; padding: 8px 0 0; }
.kt-bos .btn { min-height: 52px; margin: 0; }
/* ===== 9. SON DÖNGÜ · OYUN VE SOSYAL (io335; docs/yayin/dongu-oyun-sosyal-2026-10.md) — küçük dokunuşlar; yalnız ortak jetonlar =====
   a) hızlı oyun sonucu: kupa pozu ekranın üst kenarında kesiliyordu. b) Tırmanış / Meşale Koşusu sonucu: düğmeler tek ana + ikili
   (hızlı oyunlar ve Grand Prix özetiyle aynı düzen), Meşale'de 5 kutu 4+1 yerine 3+2. c) Tırmanış: 44 px düğmeler, konu etiketi
   okunur renk, "Doğru:" cevabı aynı satırda. d) Doğru mu? kapat düğmesi 32 px'e sıkışıyordu. e) Kartlar: telefonda kartın arkasında
   kalan süs kartlarından yalnız biri sayacın arkasından "soluk leke" gibi görünüyordu; uzun açıklamada şıklar sıkışır.
   f) Okul ligi: okul adı alanı daha geniş. g) Haftanın Özeti: birim yazıları. */
.sy.mgs { padding-top: 44px; }
.wrap-sahne .dev small { font-size: 26px; font-weight: 800; }
.wrap-sahne .btn.ghost { background: transparent; border-color: var(--hero-muted); color: var(--uzeri); box-shadow: none; }
.tr-sonuc-eylem.row, .mg-dugmeler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tr-sonuc-eylem.row > .btn, .mg-dugmeler > .btn { min-height: 48px; margin: 0; justify-content: center; }
.tr-sonuc-eylem.row > .btn:first-child, .mg-dugmeler > .btn:first-child,
.tr-sonuc-eylem.row > .btn:nth-child(2):nth-last-child(odd), .mg-dugmeler > .btn:nth-child(2):nth-last-child(odd) { grid-column: 1 / -1; }
.mg-sonuc-kart .mg-statlar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mg-sonuc-kart .mg-statlar > div { grid-column: span 2; }
.mg-sonuc-kart .mg-statlar > div:nth-child(n+4) { grid-column: span 3; }
.tr-wrap .tr-btn { width: 44px; height: 44px; }
.tr-soru .tr-konu { color: var(--hero-muted); }
.kalip b.tr-dogru-cevap { display: inline; }
.dm .mg-ust .mg-cik { flex: 0 0 44px; width: 44px; }
.dm .mg-ust .mg-orta { flex: 1 1 0; min-width: 0; }
.dm .mg-ust .dm-cubuk { width: 100%; }
@media (max-width: 699px) { .kt-tam .kt-yuzen { display: none; } }
.kt-kart.kt-sikisik .kt-siklar { gap: 6px; }
.kt-kart.kt-sikisik .kt-sik { min-height: 44px; padding-block: 6px; }
.kt-kart.kt-sikisik .kt-soru { font-size: 18px; }
.kt-kart.kt-sikisik .kt-aciklama { font-size: 13.5px; line-height: 1.4; }
.kt-kart.kt-ozet .kt-sik:not(.ok):not(.no) { display: none; }
.sy-ikili:has(#il) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }