/* Can Öğretmenim — "Defter 2.0" tasarım sistemi (v2, 06.10.2026; v1 "kareli defter" 25.09).
   TEK TOKEN KAYNAĞI: renk, yazı, boşluk, yarıçap, gölge ve süre değerleri yalnız buradaki :root'tan gelir.
   Belge: icerik/TASARIM.md · bileşenler: sinif/bilesen.css + sinif/bilesen.js · canvas aynası: sinif/token.js · örnek: /bilesenler
   Eski adlar (--safran, --nar, --tukenmez, --panel…) JS satır içi stiller bozulmasın diye korunur; yeni kod anlamsal adları kullanır.
   Chromium 80 (ETAP): flex gap, aspect-ratio, :is/:where/:has, inset YOK — grid-gap, padding-top oranı, top/right/bottom/left. */

/* ------------------------------------------------ yazı tipleri (yerel woff2, Latin + Latin Ext-A alt kümesi; çevrimdışı)
   fontlar/: bricolage-700/800 (opsz 36/48 sabit örnek), atkinson-400/700. Toplam ~81 KB + rakam 4 KB. Lisans: fontlar/OFL.txt.
   Atkinson 500 ve 800 istekleri aynı dosyalara bağlanır (tek indirme): rakam yüzleriyle AYNI ağırlık takımında olsunlar diye.
   Google Fonts <link>'i olan eski sayfalarda bu yüzler yan yana durur, görünüm değişmez; bağlantı kaldırılınca da aynı kalır. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fontlar/bricolage-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fontlar/bricolage-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fontlar/atkinson-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fontlar/atkinson-400.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fontlar/atkinson-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fontlar/atkinson-700.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
/* Rakamlar: Atkinson'ın sıfırı eğik çizgili (Ø). Rakam öğrenen çocuk için kabul edilemez: yalnız 0–9 (unicode-range) düz sıfırlı
   yerel rakam yüzünden gelir (yazi/rakam.woff2, 4 KB, tnum var). Harflerden SONRA tanımlanır: rakamlarda bu yüz önce denenir.
   DİKKAT: ağırlıklar yukarıdaki harf yüzleriyle BİREBİR aynı olmalı (400/500/700/800). Aralık (300 900) verilirse tarayıcı bu yüzü
   ayrı bir takım sayar ve harfler için Atkinson'a hiç bakmaz (harfler yedek yazı tipine düşer). */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("yazi/rakam.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+30-39; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("yazi/rakam.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+30-39; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("yazi/rakam.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+30-39; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("yazi/rakam.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+30-39; }
@font-face { font-family: "BOK Rakam"; src: url("yazi/rakam.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  /* ---------- 1.1 yüzey ve metin (anlamsal) */
  --kagit: #FCFDFF;        /* sayfa zemini */
  --kare: #EDF1F8;         /* defter kareleri: v1 #E4EBF6'dan %40 soluk, YALNIZ body zemininde */
  --kare-koyu: #D3DDEE;    /* kaydırma çubuğu, hover kenarı */
  --kenar-cizgi: #F2A0A3;  /* kırmızı marj çizgisi (768 px altında yok) */
  --yuzey: #FFFFFF;  --yuzey-2: #F4F6FB;  --yuzey-3: #E9EEF8;
  --cizgi: #D9E1EE;
  --metin: #1A2B4C;        /* lacivert mürekkep, beyazda 13.9:1 */
  --metin-2: #56647F;      /* ikincil, beyazda 5.9:1 */
  --metin-3: #8792A8;      /* YALNIZ ≥24 px ya da devre dışı (3.2:1); küçük ikincil metin --metin-2 (uyumluluk-denetle kural d) */
  --bos-cizgi: #858FA5;    /* boş yıldız, ilerleme noktası/çizgisi, boş onay kutusu kenarı: beyazda 3.3:1 (WCAG 1.4.11 ≥ 3:1) */
  /* ---------- 1.2 eylem ve durum */
  --birincil: #2A4BD7;  --birincil-koyu: #1F39A8;  --birincil-acik: #E6F0FF;
  --eylem: var(--birincil);  --eylem-koyu: var(--birincil-koyu);   /* TEK birincil eylem rengi (tükenmez mavi): Oyna, Devam et, Tekrar oyna, Onayla, Kontrol et — sitede ve oyunlarda.
                                                                     Yeşil (--basari/--dogru) düğme rengi DEĞİLDİR; yalnız doğru cevap / başarı tonudur. */
  --secili-zemin: #E6F0FF;  --secili-kenar: #2A4BD7;  --secili-metin: #1F39A8;   /* SEÇİLİ HER YERDE MAVİ */
  --vurgu: #FFE66B;        /* fosfor: sayfada TEK yer (bugün / 1. / önerilen) */
  --vurgu-metin: #5E4A00;
  --odak: #2A4BD7;
  --basari: #1E9E5A;  --basari-koyu: #1B6B3A;  --basari-zemin: #E3F7EA;
  --hata: #C2462A;    --hata-zemin: #FFEDE6;
  --uyari: #B58900;   --uyari-koyu: #7A5C00;   --uyari-zemin: #FFF6CC;
  --bilgi: #2F6FD0;   --bilgi-zemin: #E4EFFF;
  --perde: rgba(26,43,76,.35);   /* pencere arka planı */
  /* ---------- 1.3 ders ayraç renkleri (geniş yüzeye boyanmaz: 4 px şerit, sekme, rozet zemini) */
  --ders-mat: #7DB7FF;   --ders-mat-zemin: #E6F0FF;
  --ders-tr: #FF8A6B;    --ders-tr-zemin: #FFEDE6;
  --ders-hb: #7FDB9F;    --ders-hb-zemin: #E3F7EA;
  --ders-fen: #BFA8FF;   --ders-fen-zemin: #EFEAFF;
  --ders-ing: #FFA3CC;   --ders-ing-zemin: #FFE9F2;
  --ders-san: #FFD84D;   --ders-san-zemin: #FFF6CC;
  --ders-diger: #B8C2D6; --ders-diger-zemin: #F1F4FA;
  /* ---------- 1.4 oyun içi: doğru/yanlış, şık (renk + ŞEKİL), takım */
  --dogru: #1E9E5A;  --dogru-zemin: #E3F7EA;
  --yanlis: #C2462A; --yanlis-zemin: #FFEDE6;
  --sik-1: #FF8A6B;  /* üçgen  */
  --sik-2: #7DB7FF;  /* daire  */
  --sik-3: #FFD84D;  /* kare   */
  --sik-4: #7FDB9F;  /* yıldız */
  --sik-5: #BFA8FF;  /* altıgen */
  --sik-6: #FFA3CC;  /* kalp   */
  --takim-a: #2F6FD0; --takim-b: #C2462A; --takim-c: #1E9E5A; --takim-d: #8A5CF0;
  /* ---------- 1.5 yazı: aileler ve 9 basamaklı ölçek (ara değer yok) */
  --baslik: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --govde: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --y-14: 14px; --y-16: 16px; --y-18: 18px; --y-22: 22px; --y-28: 28px; --y-36: 36px; --y-48: 48px; --y-72: 72px; --y-112: 112px;
  --sy-14: 1.4; --sy-16: 1.5; --sy-18: 1.55; --sy-22: 1.35; --sy-28: 1.25; --sy-36: 1.15; --sy-48: 1.1; --sy-72: 1; --sy-112: 1;
  --harf-baslik: -.02em; --harf-gosterim: -.03em;
  /* ---------- 1.6 boşluk (4'ün katları) */
  --b-1: 4px; --b-2: 8px; --b-3: 12px; --b-4: 16px; --b-5: 24px; --b-6: 32px; --b-7: 48px; --b-8: 64px; --b-9: 96px;
  --dokun: 48px; --dokun-oo: 88px; --dokun-cevap: 96px;   /* dokunma hedefleri: genel (html.tahta'da 56) / okul öncesi / oyunda cevap */
  --oyun-kenar: 6px;       /* .bk-oyun düğmesinin alt kalınlığı (basınca çöker) */
  /* ---------- 1.7 yarıçap (yalnız 4 değer) */
  --r-8: 8px; --r-14: 14px; --r-20: 20px; --r-hap: 999px;
  /* ---------- 1.8 gölge (yalnız 3 değer) */
  --golge-0: 0 0 0 rgba(26,43,76,0);
  --golge-1: 0 1px 2px rgba(26,43,76,.08);
  --golge-2: 0 2px 4px rgba(26,43,76,.05), 0 12px 30px -18px rgba(26,43,76,.28);
  --golge-3: 0 4px 10px rgba(26,43,76,.06), 0 30px 70px -30px rgba(26,43,76,.35);
  /* ---------- 1.9 hareket (tek eğri) */
  --sure-hizli: 120ms;   /* dokunma geri bildirimi, çip, düğme */
  --sure-orta: 220ms;    /* durum değişimi, açılır menü, doğru/yanlış */
  --sure-yavas: 400ms;   /* sahne geçişi, kart girişi, pencere */
  --yay: cubic-bezier(.16,1,.3,1);
  --yay-geri: cubic-bezier(.34,1.56,.64,1);   /* YALNIZ kutlama / rozet belirişi */
  /* ---------- katman sırası (z-index) */
  --z-serit: 30; --z-menu: 90; --z-perde: 80; --z-toast: 70;   /* menü pencerenin içinden de açılabilir: en üstte */

  /* ---------- ESKİ ADLAR → v2 takma adları (yeni kodda kullanmayın) */
  --murekkep: var(--metin); --tukenmez: var(--birincil); --tukenmez-koyu: var(--birincil-koyu); --fosfor: var(--vurgu);
  --zemin: var(--kagit); --zemin2: #F1F4FA;
  --panel: var(--yuzey); --panel2: var(--yuzey-2); --panel3: var(--yuzey-3);
  --soluk: var(--metin-2); --soluk2: var(--metin-2);   /* v2.1: --soluk2 eski sayfalarda 11–16 px metinde kullanılıyordu (3.1:1) → --metin-2 (5.9:1) */
  --safran: #FFD84D; --safran-koyu: var(--uyari);
  --nar: #FF8A6B;    --nar-koyu: var(--hata);
  --turkuaz: #7DB7FF; --turkuaz-koyu: var(--bilgi);
  --leylak: #BFA8FF; --gul: #FFA3CC; --yesil: #7FDB9F; --mavi: #7DB7FF;
  --turkuaz-soluk: var(--bilgi-zemin);
  --a-sari: #FFF6CC; --a-mavi: var(--secili-zemin); --a-yesil: #E3F7EA; --a-leylak: #EFEAFF; --a-pembe: #FFE9F2; --a-nar: #FFEDE6;
  --r-kart: var(--r-20); --r-dugme: var(--r-14); --r-kucuk: var(--r-8);
  --kenar: 1.5px solid var(--cizgi);
  --pul: var(--golge-1);
  --pul-bas: var(--golge-0);
  --pul-kart: var(--golge-2);
  /* kırmızı kenar çizgisinin sayfadaki yeri: içerik kolonunun hemen solu */
  --marj: max(22px, calc(50vw - 648px));
  color-scheme: light; accent-color: var(--birincil);
}
/* akıllı tahta: dokunma hedefi 56 px (html.tahta sınıfını tahta katmanı koyar) */
html.tahta { --dokun: 56px; }
::selection { background: var(--fosfor); color: var(--murekkep); }
* { box-sizing: border-box; scrollbar-color: var(--kare-koyu) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--kare-koyu); border-radius: var(--r-hap); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }
/* ODAK (Chromium 80 uyumlu desen, TASARIM.md §Odak): önce :focus ile halka, sonra AYRI kuralda :focus:not(:focus-visible) ile kaldırma.
   Chromium < 86 ikinci kuralı tanımaz → halka klavye/kumandada da görünür kalır. @supports selector() KULLANILMAZ (Chrome 83).
   Odak ≠ seçili: seçili = dolgu + sağda ✓ rozeti; odak = 3 px mavi halka (2 px aralıkla). */
:focus { outline: 3px solid var(--tukenmez); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
/* programla odaklanan kaplar (pencere, ana bölüm, tuval) halka göstermez */
[tabindex="-1"]:focus, body:focus, main:focus, canvas:focus, html:focus { outline: none; }
input { caret-color: var(--tukenmez); }
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; }
body {
  background-color: var(--kagit); color: var(--metin);
  /* kareli defter: 28 px kare + kırmızı kenar boşluğu çizgisi */
  background-image:
    linear-gradient(90deg, transparent calc(var(--marj) - 1px), var(--kenar-cizgi) calc(var(--marj) - 1px), var(--kenar-cizgi) calc(var(--marj) + 1px), transparent calc(var(--marj) + 1px)),
    linear-gradient(var(--kare) 1px, transparent 1px),
    linear-gradient(90deg, var(--kare) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px, 28px 28px;
  /* background-attachment: fixed KULLANMA: mobilde her kaydırma karesinde tüm ekran yeniden boyanır (takılma). Desen sayfayla kayar. */
  font-family: var(--govde); font-size: var(--y-18); line-height: var(--sy-18); font-weight: 400;
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
#zemin { display: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--baslik); font-weight: 700; letter-spacing: var(--harf-baslik); text-wrap: balance; margin: 0 0 10px; color: var(--murekkep); }
h2 { font-size: var(--y-36); line-height: var(--sy-36); }
h3 { font-size: var(--y-22); line-height: var(--sy-22); letter-spacing: -.01em; }
@media (min-width: 1280px) { h2 { font-size: var(--y-48); line-height: var(--sy-48); letter-spacing: var(--harf-gosterim); } h3 { font-size: var(--y-28); line-height: var(--sy-28); } }
/* rakam gösteren her yer: puan, süre, PIN, sayaç */
.tabular, time, kbd { font-variant-numeric: tabular-nums; }
p { margin: 0 0 12px; }
a { color: var(--tukenmez); }
.soluk { color: var(--soluk); }
.kap { max-width: 1240px; margin: 0 auto; padding: 14px 20px 48px; display: flex; flex-direction: column; gap: 22px; min-height: 100vh; }
/* Kırmızı kenar çizgisi: telefon ve dikey tablette paragrafların ilk harfinin üstüne düşüyordu → 768 px altında yok (v2). .kap kolonu olmayan tam
   genişlik uygulama sayfalarında (canlan, rutin, iletişim…) başlık ve düğmelerin üstünden geçiyordu → html.df-kenarsiz
   (sinif/ust-serit.js ekler) ile yok. 1920 tahtada kolon 1640 px'e açılır, çizgi kolonla birlikte kayar (salon ile aynı). */
@media (max-width: 767px) { body { --marj: -8px; } }
html.df-kenarsiz body { --marj: -8px; }
@media (min-width: 1700px) { .kap { max-width: 1640px; } body { --marj: max(22px, calc(50vw - 848px)); } }

/* ------------------------------------------------ üst şerit ve marka */
.ust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 60px; }
.marka { font-family: var(--baslik); font-weight: 800; font-size: clamp(21px, 2.2vw, 26px); display: flex; align-items: center; gap: 11px; margin: 0; letter-spacing: -.02em; color: var(--murekkep); text-decoration: none; }
.marka svg { width: 40px; height: 40px; flex: none; }
.marka em { font-style: normal; }

/* ------------------------------------------------ yüzeyler */
.kart { position: relative; background: var(--panel); border: var(--kenar); border-radius: var(--r-kart);
  padding: clamp(18px, 2.8vw, 30px); box-shadow: var(--pul-kart); }
.etiket { display: inline-flex; align-items: center; gap: 6px; font-size: var(--y-14); font-weight: 700;
  padding: 4px 11px; border-radius: var(--r-hap); background: var(--panel2); color: var(--soluk); border: 1px solid var(--cizgi); }

/* ------------------------------------------------ düğmeler */
.buyuk { position: relative; border: 0; border-radius: var(--r-dugme); padding: 14px 26px;
  font-family: var(--govde); font-weight: 700; font-size: var(--y-18); letter-spacing: 0; line-height: 1.2;
  background: var(--tukenmez); color: #fff; box-shadow: 0 1px 0 rgba(26,43,76,.1), 0 6px 16px -8px rgba(42,75,215,.7);
  transition: transform var(--sure-hizli) var(--yay), box-shadow var(--sure-hizli) var(--yay), background var(--sure-hizli); }
@media (hover: hover) { .buyuk:hover { background: var(--tukenmez-koyu); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(26,43,76,.1), 0 10px 20px -8px rgba(42,75,215,.7); } }
.buyuk:active { transform: translateY(1px); box-shadow: none; }
.buyuk[disabled] { opacity: .45; transform: none; box-shadow: none; cursor: not-allowed; }
.buyuk.ikincil { background: var(--panel); color: var(--murekkep); box-shadow: inset 0 0 0 1.5px var(--cizgi); }
@media (hover: hover) { .buyuk.ikincil:hover { background: var(--panel2); box-shadow: inset 0 0 0 1.5px var(--kare-koyu), 0 8px 16px -10px rgba(26,43,76,.4); } }
.ikon-dugme { width: 48px; height: 48px; border-radius: var(--r-14); border: 1.5px solid var(--cizgi); background: var(--panel); color: var(--murekkep); display: grid; place-items: center; font-size: var(--y-22); box-shadow: var(--golge-1); transition: transform var(--sure-hizli) var(--yay), background var(--sure-hizli); }
@media (hover: hover) { .ikon-dugme:hover { background: var(--panel2); } }
.ikon-dugme:active { transform: translateY(1px); }
.ikon-dugme svg { width: 22px; height: 22px; }

/* ------------------------------------------------ form: seçim çipleri */
fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
legend { font-family: var(--baslik); font-weight: 700; font-size: var(--y-18); color: var(--murekkep); margin-bottom: 10px; padding: 0; display: flex; align-items: center; gap: 10px; }
legend .soluk { font-family: var(--govde); font-size: var(--y-16); font-weight: 400; }
.secimler { display: flex; flex-wrap: wrap; gap: 8px; }
.cip { position: relative; display: flex; }
.cip input { position: absolute; opacity: 0; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; margin: 0; }
.cip label { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; padding: 9px 16px; min-height: 48px;
  border-radius: var(--r-kucuk); background: var(--panel); border: 1.5px solid var(--cizgi); font-weight: 700; font-size: var(--y-16); line-height: 1.2; color: var(--murekkep);
  cursor: pointer; transition: background var(--sure-hizli), border-color var(--sure-hizli), color var(--sure-hizli); }
.cip label small { font-weight: 400; font-size: var(--y-14); color: var(--soluk); }
@media (hover: hover) { .cip label:hover { border-color: var(--kare-koyu); background: var(--panel2); } }
/* görünmez <input> etiketin üstünü kaplar: :hover/:active etikete değil girdiye düşer → kap üzerinden (tahtada basış hissi) */
@media (hover: hover) { .cip:hover input:not(:checked) + label { border-color: var(--kare-koyu); background: var(--panel2); } }
.cip label { transition: background var(--sure-hizli), border-color var(--sure-hizli), color var(--sure-hizli), transform var(--sure-hizli) var(--yay), box-shadow var(--sure-hizli); }
.cip input:active + label { transform: translateY(1px) scale(.98); }
.cip input:focus + label { outline: 3px solid var(--tukenmez); outline-offset: 2px; }
.cip input:focus:not(:focus-visible) + label { outline: none; }
.cip input:checked + label { background: var(--a-mavi); border-color: var(--tukenmez); color: var(--tukenmez-koyu); box-shadow: inset 0 0 0 1px var(--tukenmez); }
.cip input:checked + label small { color: var(--tukenmez-koyu); }
.cip input[type="checkbox"] + label { padding-left: 40px; }
.cip input[type="checkbox"] + label::before { content: ""; position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border-radius: 5px; border: 1.5px solid var(--soluk2); background: #fff; }
.cip input[type="checkbox"]:checked + label::before { border-color: var(--tukenmez); background: var(--tukenmez)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.cip input:disabled + label { opacity: .4; cursor: not-allowed; }
input[type="text"], input[type="number"] { width: 100%; padding: 13px 16px; border-radius: var(--r-14); border: 1.5px solid var(--cizgi); background: #fff; color: var(--murekkep);
  font: inherit; font-weight: 700; transition: border-color var(--sure-hizli), box-shadow var(--sure-hizli); }
input[type="text"]:focus, input[type="number"]:focus { border-color: var(--tukenmez); box-shadow: 0 0 0 4px rgba(42,75,215,.14); outline: none; }
input[type="text"]:disabled { opacity: .4; }
input::placeholder { color: var(--soluk2); font-weight: 400; }

/* ------------------------------------------------ soru içeriği */
.kesir { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; line-height: 1.04; margin: 0 .14em; font-size: .9em; }
.kesir span:first-child { border-bottom: .085em solid currentColor; padding: 0 .18em; }
.tamli { white-space: nowrap; }
.dizi { margin-top: 12px; font-family: var(--baslik); }
.bosluk { display: inline-block; min-width: 1.8em; padding: 0 .3em; border-radius: var(--r-8); background: var(--fosfor); color: var(--murekkep); text-align: center; animation: nabiz 1.8s ease-in-out infinite; }
.gorsel { display: block; max-width: min(100%,330px); height: auto; margin: 0 auto 14px; background: #fff; border: var(--kenar); border-radius: var(--r-20); padding: 8px; box-shadow: var(--golge-1); }

@keyframes gecisGir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes yukariGir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nabiz { 50% { opacity: .5; } }
@keyframes parla { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes zipla { 40% { transform: translateY(-8px) scale(1.03); } }
@keyframes girZipla { from { transform: scale(.5) translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.gecis { animation: gecisGir .38s var(--yay) both; }

/* ------------------------------------------------ süre halkası */
.halka-kap { position: relative; display: grid; place-items: center; }
.halka { transform: rotate(-90deg); overflow: visible; }
.halka circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.halka-iz { stroke: var(--panel3); }
.halka-yay { stroke: var(--tukenmez); transition: stroke-dashoffset var(--sure-orta) linear, stroke var(--sure-orta); }
.halka-kap.az .halka-yay { stroke: var(--nar-koyu); }
.halka-kap.az .halka-sayi { color: var(--nar-koyu); animation: nabiz .9s infinite; }
.halka-sayi { position: absolute; font-family: var(--baslik); font-weight: 700; font-size: var(--y-28); font-variant-numeric: tabular-nums; }

.rozet { border-radius: var(--r-14); flex: none; }
.sekil { flex: none; }
.nokta { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; transform: rotate(45deg); border: 1.5px solid var(--murekkep); }
.kivilcim-kap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 40; }
.kivilcim-kap i { position: absolute; width: 10px; height: 10px; border-radius: 2px; animation: kivilcimUc .9s var(--yay) forwards; animation-delay: var(--d); }
@keyframes kivilcimUc { from { transform: translate(0,0) rotate(0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(200deg) scale(0); opacity: 0; } }
.bildirim { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom,0px)); transform: translateX(-50%) translateY(24px);
  background: var(--murekkep); color: #fff; font-weight: 700; padding: 12px 22px; border-radius: var(--r-14);
  opacity: 0; transition: var(--sure-orta) var(--yay); pointer-events: none; z-index: 45; box-shadow: var(--golge-3); }
.bildirim.goster { opacity: 1; transform: translateX(-50%) translateY(0); }
.baglanti-bar { position: fixed; top: auto; right: 0; bottom: 0; left: 0; background: var(--a-nar); color: var(--nar-koyu); font-weight: 700; text-align: center; padding: 11px; z-index: 46;
  padding-bottom: calc(11px + env(safe-area-inset-bottom,0px)); border-top: 1.5px solid var(--nar); }

/* ------------------------------------------------ cevap seçenekleri: dört renkli ayraç (tahtada uzaktan ayırt edilir, şekil ipucu da var) */
.secenekler { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 640px) { .secenekler { grid-template-columns: 1fr; } }
.secenek { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 14px 22px; border: 0; border-radius: var(--r-20);
  font-family: var(--baslik); font-size: clamp(22px, 3vw, 36px); font-weight: 700; line-height: 1.15; color: var(--murekkep); text-align: left; position: relative;
  box-shadow: inset 0 -4px 0 rgba(26,43,76,.14); transition: transform var(--sure-hizli) var(--yay), box-shadow var(--sure-hizli), opacity var(--sure-orta), filter var(--sure-orta); }
.secenek .sekil { width: 1.15em; height: 1.15em; padding: .16em; box-sizing: content-box; border-radius: var(--r-14); background: rgba(255,255,255,.75); color: var(--murekkep); }
.secenek .sayi { margin-left: auto; font-size: var(--y-22); min-width: 1.6em; text-align: center; background: rgba(26,43,76,.1); border-radius: var(--r-8); padding: 0 .3em; }
.secenek .sayi:empty { display: none; }
.secenek.s0, .t-secenek.s0, .harf.s0 { --sec-renk: var(--nar); background: var(--nar); }
.secenek.s1, .t-secenek.s1, .harf.s1 { --sec-renk: var(--turkuaz); background: var(--turkuaz); }
.secenek.s2, .t-secenek.s2, .harf.s2 { --sec-renk: var(--safran); background: var(--safran); }
.secenek.s3, .t-secenek.s3, .harf.s3 { --sec-renk: var(--leylak); background: var(--leylak); }
@media (hover: hover) { button.secenek:hover:not([disabled]) { transform: translateY(-2px); } }
button.secenek:active:not([disabled]) { transform: translateY(2px); box-shadow: none; }
.secenek.yanlis { opacity: .3; filter: saturate(.2); }
.secenek.dogru { background: var(--yesil); outline: 4px solid var(--murekkep); outline-offset: 4px; animation: zipla .55s var(--yay-geri); }
.secenek[disabled] { opacity: .4; box-shadow: none; }
.secenek.secili { opacity: 1; outline: 4px solid var(--tukenmez); outline-offset: 4px; }

.dagilim-satir { display: flex; align-items: center; gap: 12px; margin: 9px 0; }
.dagilim-satir .harf { width: 40px; height: 40px; border-radius: var(--r-14); display: grid; place-items: center; color: var(--murekkep); }
.dagilim-satir .harf .sekil { width: 22px; height: 22px; }
.dagilim-satir .cubuk { flex: 1; height: 22px; border-radius: var(--r-hap); background: var(--panel3); overflow: hidden; }
.dagilim-satir .cubuk i { display: block; height: 100%; border-radius: var(--r-hap); transition: width .7s var(--yay); }
.dagilim-satir .adet { font-family: var(--baslik); font-size: var(--y-22); font-weight: 700; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ sıralama listeleri */
.sira-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sira-liste li { display: flex; align-items: center; gap: 12px; background: var(--panel); border: var(--kenar); border-radius: var(--r-14); padding: 9px 16px 9px 9px; font-weight: 700;
  animation: yukariGir .4s var(--yay) both; }
.sira-liste li:nth-child(2) { animation-delay: .05s; } .sira-liste li:nth-child(3) { animation-delay: .1s; }
.sira-liste li:nth-child(4) { animation-delay: .15s; } .sira-liste li:nth-child(n+5) { animation-delay: .2s; }
.sira-liste .yer { width: 36px; height: 36px; border-radius: var(--r-8); display: grid; place-items: center; background: var(--panel2); color: var(--murekkep); font-family: var(--baslik); font-weight: 700; flex: none; }
.sira-liste .puan { margin-left: auto; font-family: var(--baslik); font-weight: 700; font-size: var(--y-22); font-variant-numeric: tabular-nums; }
.sira-liste li.ilk { background: var(--fosfor); border-color: #F0CF3A; }
.sira-liste li.ilk .yer { background: var(--murekkep); color: #fff; }
.sira-liste li.ilk .soluk { color: #5E4A00; }

/* ------------------------------------------------ takım yarışı */
.yaris-ust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.yaris-sayac { font-family: var(--baslik); font-weight: 800; font-size: clamp(38px,6vw,68px); font-variant-numeric: tabular-nums; line-height: 1; color: var(--tukenmez); }
.yaris-sayac.az { color: var(--nar-koyu); animation: nabiz 1s infinite; }
.yaris-satir { margin-bottom: 18px; }
.yaris-ad { font-family: var(--baslik); font-weight: 700; font-size: var(--y-22); display: flex; align-items: center; gap: 9px; }
.yaris-yol { position: relative; height: 44px; border-radius: var(--r-14); background: var(--panel2); overflow: hidden; margin-top: 6px; border: var(--kenar);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--cizgi) calc(10% - 1px) 10%); }
.yaris-cubuk { height: 100%; transition: width .8s var(--yay); position: relative; overflow: hidden; }
.yaris-puan { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--baslik); font-weight: 700; font-size: var(--y-22); font-variant-numeric: tabular-nums; }
.yaris-istatistik { font-size: var(--y-14); margin-top: 4px; color: var(--soluk); }
.olay-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.olay-liste li { display: flex; align-items: center; gap: 10px; background: var(--panel); border: var(--kenar); border-radius: var(--r-14); padding: 9px 13px; font-weight: 600; animation: yukariGir .35s var(--yay); }

/* ------------------------------------------------ kürsü */
.kursu { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 2vw, 18px); margin: 26px 0 22px; }
.kursu-sutun { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(31%,200px); }
.kursu-ad { font-weight: 700; text-align: center; font-size: var(--y-18); }
.kursu-blok { width: 100%; border-radius: var(--r-20) var(--r-20) 0 0; display: flex; flex-direction: column; align-items: center; padding: 12px; color: var(--murekkep);
  transform-origin: bottom; animation: kursuYuksel .7s var(--yay-geri) both; box-shadow: inset 0 -4px 0 rgba(26,43,76,.12); }
@keyframes kursuYuksel { from { transform: scaleY(.1); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }
.kursu-sutun.k0 .kursu-blok { height: 170px; animation-delay: .25s; } .kursu-sutun.k1 .kursu-blok { height: 122px; }
.kursu-sutun.k2 .kursu-blok { height: 92px; animation-delay: .12s; }
.kursu-yer { font-family: var(--baslik); font-weight: 800; font-size: var(--y-36); line-height: 1; } .kursu-puan { font-weight: 700; font-variant-numeric: tabular-nums; }
#konfetiTuval { position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 44; }

/* ------------------------------------------------ mini oyun rafı (öğretmen) */
.oyun-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; }
.galeri-kart { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: var(--kenar); border-radius: var(--r-20); padding: 10px 10px 12px;
  transition: transform var(--sure-hizli) var(--yay), box-shadow var(--sure-hizli), background var(--sure-hizli), opacity var(--sure-orta), border-color var(--sure-hizli); }
.galeri-kart:not(.secili) { opacity: .6; }
.galeri-kart:not(.secili) .kapak { filter: grayscale(.8); }
.galeri-kart.secili { border-color: var(--tukenmez); box-shadow: var(--golge-2); }
@media (hover: hover) { .galeri-kart:hover { opacity: 1; } }
.galeri-kart .kapak { width: 100%; aspect-ratio: 16/9; border-radius: var(--r-8); display: block; background: var(--panel2); transition: filter var(--sure-orta); } /* uyum-yok-say: tuvalin width/height nitelikleri oranı verir */
.galeri-kart .ad { font-family: var(--baslik); font-weight: 700; font-size: var(--y-18); display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 2px 4px 0; line-height: 1.15; }
.galeri-kart .ad input { appearance: none; width: 22px; height: 22px; flex: none; margin: 0; border-radius: var(--r-8); border: 1.5px solid var(--soluk2); background: #fff; cursor: pointer; }
.galeri-kart .ad input:checked { border-color: var(--tukenmez); background: var(--tukenmez)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; }
.galeri-kart .kazanim { font-size: var(--y-14); color: var(--tukenmez); font-weight: 700; padding: 0 4px; }
.galeri-kart .nasil { font-size: var(--y-14); color: var(--soluk); line-height: 1.45; padding: 0 4px; }
.galeri-kart .alt { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 6px 4px 0; }
.galeri-kart .dene { border: 1.5px solid var(--cizgi); border-radius: var(--r-8); padding: 6px 14px; background: var(--panel); color: var(--tukenmez); font-weight: 700; font-size: var(--y-14);
  transition: background var(--sure-hizli); }
@media (hover: hover) { .galeri-kart .dene:hover { background: var(--a-mavi); } }

#deneKutu { border: 0; border-radius: var(--r-20); padding: 0; background: var(--panel); color: var(--metin);
  width: min(98vw, 1500px); max-width: none; box-shadow: var(--golge-3); animation: gecisGir .3s var(--yay); overflow: hidden; }
#deneKutu:fullscreen { width: 100vw; border-radius: 0; display: grid; grid-template-rows: auto 1fr; }
#deneKutu:fullscreen .dene-sahne { aspect-ratio: auto; height: 100%; max-height: none; } /* uyum-yok-say: auto, yedek gerekmez */
#deneKutu::backdrop { background: rgba(26,43,76,.45); }
.dene-ust { display: flex; align-items: center; gap: 14px; padding: 14px 18px; flex-wrap: wrap; border-bottom: var(--kenar); }
.dene-ust b { font-family: var(--baslik); font-weight: 700; font-size: var(--y-22); }
.dene-ust .soluk { font-size: var(--y-14); flex: 1 1 260px; }
.dene-sahne { position: relative; aspect-ratio: 16/9; max-height: 82vh; background: var(--panel2); }
@supports not (aspect-ratio: 1 / 1) { .dene-sahne::before { content: ""; float: left; padding-top: 56.25%; } .dene-sahne { display: flow-root; } #deneKutu:fullscreen .dene-sahne::before { display: none; } }  /* ETAP (Chromium < 88): aspect-ratio yedeği */
.dene-sahne > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* ------------------------------------------------ lobi: oyuncular */
.oyuncu-liste { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.oyuncu-liste li { display: flex; align-items: center; gap: 9px; background: var(--panel); border: var(--kenar); border-radius: var(--r-hap); padding: 5px 14px 5px 5px; font-weight: 700;
  animation: girZipla .45s var(--yay-geri) both; }
.oyuncu-liste .at { border: 0; background: transparent; color: var(--soluk2); font-size: var(--y-18); line-height: 1; padding: 2px 5px; border-radius: var(--r-8); }
@media (hover: hover) { .oyuncu-liste .at:hover { color: #fff; background: var(--nar-koyu); } }
.oyuncu-liste.madalyonlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.oyuncu-liste li.madalyon { position: relative; flex-direction: column; gap: 4px; border-radius: var(--r-20); padding: 12px 6px 10px; text-align: center; background: var(--panel); box-shadow: var(--golge-1); }
.oyuncu-liste li.madalyon .ad { font-size: var(--y-14); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oyuncu-liste li.madalyon .nokta { position: absolute; top: 9px; right: 9px; }
.oyuncu-liste li.madalyon .at { position: absolute; top: 4px; left: 5px; opacity: 0; transition: opacity var(--sure-hizli); }
@media (hover: hover) { .oyuncu-liste li.madalyon:hover .at { opacity: 1; } }
.oyuncu-liste li.madalyon .at:focus { opacity: 1; }
.oyuncu-liste li.madalyon .at:focus-visible { opacity: 1; }   /* ayrı kural: Chromium < 86 :focus-visible'i tanımaz */
@media (hover: none) { .oyuncu-liste li.madalyon .at { opacity: .55; min-width: 44px; min-height: 44px; top: -4px; left: -4px; display: grid; place-items: center; font-size: var(--y-22); border-radius: var(--r-14); } }   /* dokunmatik tahtada hover yok: × hep görünür */
.takim-liste { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 10px; }
.takim-d { border: 0; border-radius: var(--r-20); padding: 18px 16px; font-family: var(--baslik); font-weight: 700; font-size: var(--y-22); color: var(--murekkep); box-shadow: inset 0 -4px 0 rgba(26,43,76,.14); transition: transform var(--sure-hizli) var(--yay); }
@media (hover: hover) { .takim-d:hover { transform: translateY(-1px); } }
.takim-d:active { transform: translateY(1px); }

.vitrin { position: relative; margin-bottom: 18px; border-radius: var(--r-20); overflow: hidden; border: var(--kenar); box-shadow: var(--golge-1); }
.vitrin canvas { width: 100%; aspect-ratio: 16/9; display: block; background: var(--panel2); } /* uyum-yok-say: tuvalin width/height nitelikleri oranı verir */
.vitrin-ad { position: absolute; left: 12px; bottom: 10px; margin: 0; font-family: var(--baslik); font-weight: 700; font-size: var(--y-18); background: #fff; color: var(--murekkep); padding: 3px 12px; border-radius: var(--r-8); }
.vitrin-ad:empty { display: none; }

/* ------------------------------------------------ baskı */
@media print {
  body { background: #fff; color: #000; }
  #zemin, .ust, .buyuk, .kursu, #konfetiTuval, .bildirim { display: none !important; }
  .kart { box-shadow: none; background: #fff; border: 1px solid #999; }
  .karne-tablo th, .karne-tablo td { border-bottom: 1px solid #999; }
  .oran { background: #555 !important; }
}
/* azaltılmış hareket: dosya sonunda, tek yerden (v2) */

/* ------------------------------------------------ soru görseli: düzen kaymasın */
#soruGorsel, #soruGorselO { min-height: 120px; display: grid; place-items: center; }
#soruGorsel:empty, #soruGorselO:empty { min-height: 0; }
@media (max-width: 640px) { #soruGorsel, #soruGorselO { min-height: 96px; } }

/* ================================================ karakter (kahraman) */
.karakter { display: block; overflow: visible; }
.karakter.canli { animation: karNefes 3.4s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes karNefes { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2.5%) scale(1.015, .985); } }
.kar-rozet { display: inline-grid; place-items: center; border-radius: 50%; border: 2px solid; overflow: hidden; flex: none; }
.kar-rozet .karakter { margin-bottom: -4%; }

/* --- karakter atölyesi (öğrenci) --- */
.atolye { display: grid; gap: 12px; margin: 4px 0 18px; }
.atolye-sahne { position: relative; display: grid; place-items: center; padding: 14px 12px 12px; border-radius: var(--r-20); border: var(--kenar);
  background-color: #fff; background-image: radial-gradient(70% 60% at 50% 40%, rgba(255,230,107,.35), transparent 70%); }
.atolye-sahne .karakter { position: relative; z-index: 1; }
.atolye-ad { font-family: var(--baslik); font-weight: 700; font-size: var(--y-22); margin-top: 2px; }
.atolye-ipucu { color: var(--soluk); font-size: var(--y-14); }
.atolye-zar { position: absolute; top: 10px; right: 10px; min-height: 48px; min-width: 48px; border: 1.5px solid var(--cizgi); border-radius: var(--r-14); background: #fff; color: var(--murekkep); padding: 6px 14px; font-weight: 700; font-size: var(--y-14); box-shadow: var(--golge-1); }
.atolye-zar:active { transform: translateY(1px); }
.sekmeler { display: grid; grid-auto-flow: column; gap: 4px; background: var(--panel2); padding: 4px; border-radius: var(--r-14); border: var(--kenar); }
.sekmeler button { min-height: 48px; border: 0; background: transparent; border-radius: var(--r-8); padding: 9px 6px; font-weight: 700; font-size: var(--y-14); color: var(--soluk); }
.sekmeler button[aria-selected="true"] { background: #fff; color: var(--tukenmez); box-shadow: var(--golge-1); }
.secim-satir { display: flex; gap: 9px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.secim-satir > button { flex: none; scroll-snap-align: center; border: 2px solid transparent; background: var(--panel2); border-radius: var(--r-14); padding: 6px; display: grid; place-items: center; gap: 2px; }
.secim-satir > button[aria-pressed="true"] { border-color: var(--tukenmez); background: var(--a-mavi); }
.secim-satir .etik { font-size: var(--y-14); font-weight: 700; color: var(--soluk); max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secim-satir > button[aria-pressed="true"] .etik { color: var(--tukenmez); }
.yama { width: 42px; height: 42px; border-radius: var(--r-14); display: block; border: 1.5px solid var(--cizgi); }

/* ================================================ final skor tablosu */
.final-kap { display: grid; gap: 18px; }
.odul-satir { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.odul { display: flex; align-items: center; gap: 10px; background: var(--panel); border: var(--kenar); border-radius: var(--r-20); padding: 8px 16px 8px 8px; box-shadow: var(--golge-1); }
.odul .sim { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-14); background: var(--fosfor); font-size: var(--y-22); }
.odul b { display: block; font-family: var(--baslik); font-weight: 700; font-size: var(--y-16); line-height: 1.1; }
.odul small { color: var(--soluk); font-size: var(--y-14); }
.kursu-tac { font-size: var(--y-36); line-height: 1; animation: tacZipla 1.6s var(--yay-geri) infinite; }
@keyframes tacZipla { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(4deg); } }
.skor-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.skor-liste li { display: grid; grid-template-columns: 36px auto 1fr auto; align-items: center; gap: 10px;
  background: var(--panel); border: var(--kenar); border-radius: var(--r-14); padding: 6px 16px 6px 8px; position: relative; overflow: hidden;
  animation: skorGir .45s var(--yay) both; }
@keyframes skorGir { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.skor-liste li::before { content: ""; position: absolute; top: 0; right: auto; bottom: 0; left: 0; width: var(--oran, 0%); background: var(--a-mavi); transition: width .9s var(--yay) var(--sure-orta); }
.skor-liste li > * { position: relative; }
.skor-liste li.ilk { background: var(--fosfor); border-color: #F0CF3A; }
.skor-liste li.ilk::before { background: rgba(255,255,255,.35); }
.skor-liste li.ilk .ayrinti { color: #5E4A00; }
.skor-liste .yer { font-family: var(--baslik); font-weight: 700; font-size: var(--y-22); text-align: center; color: var(--soluk); }
.skor-liste li.ilk .yer { color: var(--murekkep); }
.skor-liste .kisi { font-weight: 700; }
.skor-liste .ayrinti { color: var(--soluk); font-size: var(--y-14); }
.skor-liste .puan { font-family: var(--baslik); font-weight: 800; font-size: var(--y-28); font-variant-numeric: tabular-nums; }
.skor-liste li.ben { box-shadow: inset 0 0 0 2px var(--tukenmez); }
.skor-liste li.ben .kisi::after { content: " (sen)"; color: var(--tukenmez); font-size: var(--y-14); }
#ekranFinal { justify-content: flex-start; }
/* Tahtada tam sıralama iki sütun (sıra numarası her satırda yazılı): 25 kişilik sınıfta kaydırma yarıya iner */
@media (min-width: 1000px) { #finalListe { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; } }

/* ================================================ akıllı tahta modu */
.tahta-kisiler { display: flex; flex-wrap: wrap; gap: 14px; }
.tahta-kisi { display: grid; justify-items: center; gap: 6px; padding: 10px 12px 12px; border-radius: var(--r-20);
  background: var(--panel); border: var(--kenar); box-shadow: inset 0 -4px 0 var(--r); }
.tahta-kahraman { border: 0; background: transparent; padding: 0; border-radius: var(--r-14); transition: transform var(--sure-hizli) var(--yay-geri); }
@media (hover: hover) { .tahta-kahraman:hover { transform: scale(1.06) rotate(-3deg); } }
.tahta-kisi input { width: 128px; text-align: center; font-weight: 700; padding: 7px 8px; font-size: var(--y-16); }

body.tahta-modu { overflow: hidden; }
body.tahta-modu .kap > header, body.tahta-modu #devamKutu { display: none !important; }
body.tahta-modu .kap { max-width: none; padding: 0; height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
body.tahta-modu #ekranTahta { flex: 1; display: flex; flex-direction: column; min-height: 0; }
body.tahta-modu #tahtaOyun { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.tahta-ust { display: flex; align-items: center; gap: 14px; padding: 10px clamp(10px, 2vw, 20px); flex: none; }
.tahta-ust button { border: 1.5px solid var(--cizgi); border-radius: var(--r-14); background: var(--panel); color: var(--murekkep); padding: 7px 16px; font-weight: 700; box-shadow: var(--golge-1); }
.tahta-ust button:active { transform: translateY(1px); }
.tahta-sayac { font-family: var(--baslik); font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); color: var(--tukenmez); font-variant-numeric: tabular-nums; line-height: 1; }
.tahta-sayac.az { color: var(--nar-koyu); animation: nabiz 1s ease-in-out infinite; }
.tahta-ust #tahtaBilgi { margin-right: auto; }

.tahta-izgara { flex: 1; display: grid; gap: 12px; padding: 0 clamp(8px, 1.6vw, 16px) clamp(12px, 1.8vw, 20px); min-height: 0; }
.tahta-izgara.k1 { grid-template-columns: 1fr; }
.tahta-izgara.k2 { grid-template-columns: 1fr 1fr; }
.tahta-izgara.k4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
@media (orientation: portrait) { .tahta-izgara.k2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } }

.tahta-panel { display: flex; flex-direction: column; min-height: 0; gap: 8px; padding: clamp(10px, 1.4vw, 18px);
  border-radius: var(--r-20); background: var(--panel); border: var(--kenar); box-shadow: var(--golge-2); position: relative; overflow: hidden; }
.tahta-panel::before { content: ""; position: absolute; top: 0; right: 0; bottom: auto; left: 0; height: 7px; background: var(--r); }
.tahta-panel.onde { box-shadow: var(--golge-2), 0 0 0 4px var(--r); }
.tahta-panel > header { display: flex; align-items: center; gap: 10px; flex: none; padding-top: 6px; }
.tahta-panel > header .ad { font-family: var(--baslik); font-weight: 700; font-size: clamp(17px, 1.7vw, 25px); }
.tahta-panel > header .seri { background: var(--panel2); border-radius: var(--r-hap); padding: 3px 10px; font-weight: 700; font-size: var(--y-14); }
.tahta-panel > header .puan { margin-left: auto; font-family: var(--baslik); font-weight: 800; font-size: clamp(26px, 3vw, 42px);
  color: var(--murekkep); font-variant-numeric: tabular-nums; line-height: 1; }
.tahta-panel .soru { flex: 1 0 auto; display: block; align-content: center; font-family: var(--baslik); font-weight: 600; font-size: clamp(16px, 1.9vw, 31px); line-height: 1.22; margin: 0; text-wrap: balance; }
/* Chromium 80 blok öğede align-content'i tanımaz: tahta.js soruyu <span class="soru-ic"> içine alıp .ortala eklerse dikeyde ortalanır */
.tahta-panel .soru.ortala { display: flex; flex-direction: column; justify-content: center; }
.tahta-panel .s-gorsel { display: flex; justify-content: center; flex: 0 1 auto; min-height: 64px; overflow: hidden; }
.tahta-panel .s-gorsel:empty { display: none; }
.tahta-izgara.k4.sahneli .tahta-panel .s-gorsel { min-height: 44px; }
.tahta-panel .s-gorsel .gorsel { height: 100%; width: auto; max-height: min(20vh, 150px); margin-bottom: 0; box-shadow: none; }
.tahta-panel .secenekler { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; flex: none; }
.t-secenek { border: 0; border-radius: var(--r-14); color: var(--murekkep); font-family: var(--baslik); font-weight: 700; font-size: clamp(17px, 2vw, 31px);
  min-height: clamp(52px, 8vh, 96px); padding: 8px 10px; box-shadow: inset 0 -4px 0 rgba(26,43,76,.14); transition: transform .1s, box-shadow .1s; }
.t-secenek:active { transform: translateY(2px); box-shadow: none; }
.t-secenek[disabled] { opacity: .35; box-shadow: none; }
.t-secenek.dogru { opacity: 1; background: var(--yesil); outline: 4px solid var(--murekkep); outline-offset: 2px; }
.t-secenek.yanlis { opacity: .55; outline: 4px solid var(--nar-koyu); outline-offset: 2px; }
.geribildirim { flex: none; border-radius: var(--r-14); padding: 7px 12px; font-weight: 700; font-size: clamp(13px, 1.3vw, 18px); }
.geribildirim.iyi { background: var(--a-yesil); color: #1B6B3A; }
.geribildirim.kotu { background: var(--a-nar); color: var(--nar-koyu); }
.tahta-izgara.k4 .tahta-panel .s-gorsel .gorsel { max-height: min(13vh, 100px); }
.tahta-sahne { display: block; width: calc(100% - 2 * clamp(8px, 1.6vw, 16px)); margin: 0 auto 12px; flex: none;
  height: clamp(120px, 26vh, 260px); border-radius: var(--r-20); background: var(--panel2); border: var(--kenar); box-shadow: var(--golge-1); }

body.tahta-modu .tahta-sahne { height: clamp(110px, 24vh, 240px); }
.tahta-izgara.k4.sahneli .tahta-panel { padding: 8px 10px; gap: 5px; }
.tahta-izgara.k4.sahneli .tahta-panel .soru { font-size: clamp(13px, 1.4vw, 20px); }
.tahta-izgara.k4.sahneli .tahta-panel > header .puan { font-size: clamp(18px, 2vw, 30px); }
.tahta-izgara.k4.sahneli .t-secenek { min-height: clamp(38px, 5vh, 62px); font-size: clamp(14px, 1.5vw, 22px); }
.tahta-izgara.k4.sahneli .tahta-panel .s-gorsel .gorsel { max-height: min(9vh, 70px); }
.tahta-izgara.k4.sahneli .geribildirim { font-size: var(--y-14); padding: 4px 9px; }
.tahta-izgara.k2.sahneli .t-secenek { min-height: clamp(46px, 6.5vh, 80px); }

/* ================================================ Kare Seçimi */
#tahtaKare { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0;
  padding: 0 clamp(8px, 1.6vw, 16px) clamp(12px, 1.8vw, 20px); }
.kare-skor { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
.kare-takim-kart { display: flex; align-items: center; gap: 10px; background: var(--panel); border: var(--kenar);
  border-radius: var(--r-20); padding: 7px 12px 7px 8px; position: relative; box-shadow: var(--golge-1); }
.kare-takim-kart.sira { box-shadow: 0 0 0 4px var(--r), var(--golge-2); }
.kare-takim-kart .ad { font-family: var(--baslik); font-weight: 700; font-size: clamp(15px, 1.5vw, 21px); }
.kare-takim-kart .sk { font-family: var(--baslik); font-weight: 800; font-size: clamp(22px, 2.4vw, 36px); color: var(--murekkep); font-variant-numeric: tabular-nums; }
/* puan düzelt (+ / −): yan yana 44×40 görünür, görünmez dolguyla 48×48 dokunma alanı (v2.1; eskiden 26×19 alt alta) */
.kare-takim-kart .duzelt { display: flex; flex-direction: row; gap: 4px; }
.kare-takim-kart .duzelt button { position: relative; border: 0; background: var(--panel2); color: var(--soluk); border-radius: var(--r-8);
  width: 44px; height: 40px; line-height: 1; font-weight: 900; font-size: var(--y-22); padding: 0; touch-action: manipulation; }   /* uyum-yok-say: ::before ile 48 px */
.kare-takim-kart .duzelt button::before { content: ""; position: absolute; top: -4px; bottom: -4px; left: -2px; right: -2px; }
@media (hover: hover) { .kare-takim-kart .duzelt button:hover { background: var(--panel3); color: var(--murekkep); } }
.kare-takim-kart .duzelt button:active { transform: translateY(1px) scale(.96); }
.kare-izgara { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px, 1vw, 14px); min-height: 0; }
@media (max-width: 760px) { .kare-izgara { grid-template-columns: repeat(4, 1fr); } }
.kare-kutu { border: var(--kenar); border-radius: var(--r-20); background: var(--panel);
  box-shadow: inset 0 -4px 0 var(--panel3); font-family: var(--baslik); font-weight: 800; font-size: clamp(20px, 2.6vw, 38px);
  color: var(--tukenmez); display: grid; place-items: center; transition: transform var(--sure-hizli) var(--yay-geri), background var(--sure-hizli); }
@media (hover: hover) { .kare-kutu:hover:not([disabled]) { transform: translateY(-2px); background: var(--a-mavi); } }
.kare-kutu:active:not([disabled]) { transform: translateY(2px); }
.kare-kutu[disabled] { background: var(--panel2); color: var(--soluk2); box-shadow: none; opacity: .6; }
.kare-kutu[disabled]::after { content: "✓"; font-size: .7em; }
.kare-kutu[disabled] span { display: none; }

.kare-soru { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; background: rgba(26,43,76,.4); display: grid; place-items: center; padding: 3vh 3vw; }
.kare-soru-kutu { width: min(1100px, 96vw); max-height: 94vh; overflow: auto; background: var(--panel);
  border-radius: var(--r-20); padding: clamp(16px, 2.4vw, 32px); box-shadow: var(--golge-3); animation: kareAc .3s var(--yay-geri) both; }
@keyframes kareAc { from { transform: scale(.9); opacity: 0; } }
.kare-ust { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.kare-deger { font-family: var(--baslik); font-weight: 800; font-size: clamp(26px, 3.4vw, 46px); color: var(--murekkep); background: var(--fosfor); border-radius: var(--r-14); padding: 0 .4em; }
.kare-takim { font-weight: 700; font-size: clamp(15px, 1.7vw, 22px); }
.kare-sayac { margin-left: auto; font-family: var(--baslik); font-weight: 800; font-size: clamp(26px, 3vw, 42px); font-variant-numeric: tabular-nums; }
.kare-sayac.az { color: var(--nar-koyu); }
.kare-metin { font-family: var(--baslik); font-weight: 600; font-size: clamp(22px, 2.8vw, 42px); line-height: 1.22; margin: 0 0 12px; text-wrap: balance; }
.kare-secenekler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.kare-secenekler .t-secenek { min-height: clamp(58px, 9vh, 104px); font-size: clamp(19px, 2.4vw, 35px); }
.kare-geri { margin: 14px 0 0; border-radius: var(--r-14); padding: 10px 14px; font-weight: 700; font-size: clamp(14px, 1.6vw, 20px); color: var(--murekkep); }
.kare-geri.iyi { background: var(--a-yesil); }
.kare-geri.kotu { background: var(--a-nar); }
.kare-geri.calma { background: var(--a-sari); }

/* ================================================ öğrenci bazlı rapor */
.rapor { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 16px; align-items: start; margin-top: 14px; }
@media (max-width: 720px) { .rapor { grid-template-columns: 1fr; } }
.rapor-liste { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 6px; max-height: 440px; overflow: auto; }
.rapor-liste button { width: 100%; display: flex; align-items: center; gap: 10px; border: 1.5px solid transparent; background: var(--panel2);
  border-radius: var(--r-14); padding: 6px 12px 6px 6px; text-align: left; font-weight: 700; color: var(--murekkep); }
@media (hover: hover) { .rapor-liste button:hover { background: var(--panel3); } }
.rapor-liste button[aria-current="true"] { background: var(--a-mavi); border-color: var(--tukenmez); }
.rapor-liste .rapor-oran { margin-left: auto; font-family: var(--baslik); font-weight: 700; font-size: var(--y-18); font-variant-numeric: tabular-nums; background: none; height: auto; }
.rapor-liste .iyi { color: #1F8A4C; } .rapor-liste .orta { color: var(--safran-koyu); } .rapor-liste .zayif { color: var(--nar-koyu); }
.rapor-detay { background: var(--panel); border: var(--kenar); border-radius: var(--r-20); padding: 18px 20px; min-height: 200px; }
.rapor-detay h4 { font-family: var(--baslik); font-weight: 700; font-size: clamp(23px, 2.6vw, 32px); margin: 0 0 2px; }
.rapor-ozet { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; }
.rapor-ozet div { background: var(--panel2); border-radius: var(--r-14); padding: 8px 16px; }
.rapor-ozet small { display: block; color: var(--soluk); font-size: var(--y-14); }
.rapor-ozet b { font-family: var(--baslik); font-weight: 800; font-size: clamp(21px, 2.2vw, 28px); }
.rapor-satir { display: grid; grid-template-columns: minmax(0,1fr) 130px 52px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: var(--y-14); }
.rapor-satir .ad b { font-family: var(--baslik); font-weight: 700; }
.rapor-cubuk { height: 12px; border-radius: var(--r-hap); background: var(--panel3); overflow: hidden; }
.rapor-cubuk i { display: block; height: 100%; border-radius: var(--r-hap); transition: width .7s var(--yay); }
.rapor-oneri { margin: 16px 0 0; background: var(--a-sari); color: var(--murekkep); border-left: 4px solid var(--safran);
  border-radius: var(--r-8); padding: 11px 15px; font-weight: 600; }
.rapor-oneri b { color: var(--murekkep); }

/* ================================================ içerik bankası: görsel ve resimli seçenekler (tahta) */
.tahta-panel .s-gorsel svg { max-height: min(20vh, 150px); width: auto; height: auto; max-width: 100%; }
.tahta-izgara.k4 .tahta-panel .s-gorsel svg { max-height: min(13vh, 100px); }
.tahta-izgara.k4.sahneli .tahta-panel .s-gorsel svg { max-height: min(9vh, 70px); }
.kare-soru-kutu .s-gorsel { display: flex; justify-content: center; }
.kare-soru-kutu .s-gorsel svg { max-height: 26vh; width: auto; height: auto; max-width: 100%; }
.t-secenek.resimli { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.t-secenek .sec-resim { display: inline-grid; place-items: center; }
.t-secenek .sec-resim svg { height: clamp(40px, 9vh, 90px); width: auto; }
.tahta-izgara.k4 .t-secenek .sec-resim svg { height: clamp(28px, 5vh, 56px); }
.t-oku { border: 1.5px solid var(--cizgi); border-radius: var(--r-8); background: #fff; color: var(--murekkep); padding: 1px 8px; font-size: var(--y-18); line-height: 1.4; box-shadow: var(--golge-1); }
.t-oku:active { transform: translateY(1px); }
.tahta-ust .hb-dugme { position: static; }
.tahta-izgara.k4 .t-secenek.resimli { flex-direction: row; gap: 8px; }
.tahta-izgara.k4.sahneli .t-secenek .sec-resim svg { height: clamp(20px, 3.4vh, 36px); }
.tahta-izgara.k4.sahneli .tahta-panel .s-gorsel { max-height: 9vh; overflow: hidden; }
.tahta-panel .soru.uzun { flex: 1 1 auto; min-height: 0; overflow: auto; align-content: start; font-size: clamp(14px, 1.45vw, 23px); }
.tahta-izgara.k4 .tahta-panel .soru.uzun { font-size: clamp(12px, 1.1vw, 17px); }

/* ================================================ defter öğeleri (yeni sayfalar ve bölüm başlıkları için ortak) */
/* Sağ üstte, defter sayfasına yazılır gibi tarih: sitenin tek cesur tipografik öğesi */
.df-tarih { font-family: var(--baslik); font-weight: 800; letter-spacing: -.02em; line-height: .9; color: var(--tukenmez);
  font-size: clamp(56px, 9vw, 132px); font-variant-numeric: tabular-nums; margin: 0; }
.df-baslik { font-family: var(--baslik); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--murekkep); font-size: clamp(34px, 4.6vw, 60px); margin: 0 0 12px; }
.df-giris { font-size: clamp(18px, 1.5vw, 21px); color: var(--soluk); max-width: 60ch; }
/* bölüm ayracı: defterin kenarına takılan renkli sekme */
.df-ayrac { display: inline-flex; align-items: center; gap: 10px; font-family: var(--baslik); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px);
  color: var(--murekkep); margin: 0; letter-spacing: -.01em; }
.df-ayrac::before { content: ""; width: 14px; height: 30px; border-radius: 4px; background: var(--ayrac, var(--safran)); flex: none; }
.df-fosfor { background: linear-gradient(transparent 55%, var(--fosfor) 55%, var(--fosfor) 92%, transparent 92%); padding: 0 .08em; }


/* ================================================ v2: simge (sinif/simgeler.svg sprite) — her sayfada kullanılabilir
   <svg class="bk-simge" aria-hidden="true"><use href="/sinif/simgeler.svg#s-ses"></use></svg>
   24×24 ızgara, 2 px çizgi, yuvarlak uç; renk currentColor. Boylar: 20 (çip) / 24 (düğme, varsayılan) / 32 (HUD) / 40 (okul öncesi). */
.bk-simge { display: inline-block; width: 24px; height: 24px; flex: none; vertical-align: -.2em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.bk-simge.bk-s20 { width: 20px; height: 20px; }
.bk-simge.bk-s32 { width: 32px; height: 32px; }
.bk-simge.bk-s40 { width: 40px; height: 40px; }
.bk-simge.bk-s48 { width: 48px; height: 48px; }
/* ekran okuyucuya özel metin */
.bk-gizli { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================================================ v2: baskı (siyah-beyaz, kare zemin kapalı, şık ayrımı şekille) */
@media print {
  @page { margin: 12mm; }
  body { background-image: none !important; }
  .bk-toast-kap, .bk-perde, .bk-serit-baglanti { display: none !important; }
}

/* ================================================ v2: azaltılmış hareket — TEK YER
   Tüm geçişler 1 ms; konfeti ve sallanma kapanır; sonsuz döngüler tek kez oynar ve durur (maskot sabit pozda). */
@media (prefers-reduced-motion: reduce) {
  :root { --sure-hizli: 1ms; --sure-orta: 1ms; --sure-yavas: 1ms; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
    transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  #konfetiTuval, .kivilcim-kap, .bk-konfeti { display: none !important; }
}

/* ================================================ html.gap-yok yedeği (Chromium < 84: flex gap uygulanmaz) — ÜRETİLİR, elle düzenlemeyin.
   Yeniden üret: node araclar/uyumluluk-denetle.mjs --gap-yedek public/ortak.css   (sınıfı sinif/eski-tarayici.js koyar) */
/* gap-yok:basla */
/* 2026-10-20 · 37 kural · 0 kural JS yamasına bırakıldı (yönü başka kuralda değişiyor). Çocuk kuralları önce, kap işaretleri sonra. */
html.gap-yok .kap > * { --gy-kap: 0; } html.gap-yok .kap > :not(:last-child) { margin-bottom: 22px; }
html.gap-yok .ust > * { --gy-kap: 0; } html.gap-yok .ust > :not(:last-child) { margin-right: 14px; } html.gap-yok .ust > * { margin-bottom: 14px; }
html.gap-yok .marka > * { --gy-kap: 0; } html.gap-yok .marka > :not(:last-child) { margin-right: 11px; }
html.gap-yok .etiket > * { --gy-kap: 0; } html.gap-yok .etiket > :not(:last-child) { margin-right: 6px; }
html.gap-yok legend > * { --gy-kap: 0; } html.gap-yok legend > :not(:last-child) { margin-right: 10px; }
html.gap-yok .secimler > * { --gy-kap: 0; } html.gap-yok .secimler > :not(:last-child) { margin-right: 8px; } html.gap-yok .secimler > * { margin-bottom: 8px; }
html.gap-yok .cip label > * { --gy-kap: 0; } html.gap-yok .cip label > :not(:last-child) { margin-bottom: 1px; }
html.gap-yok .secenek > * { --gy-kap: 0; } html.gap-yok .secenek > :not(:last-child) { margin-right: 16px; }
html.gap-yok .dagilim-satir > * { --gy-kap: 0; } html.gap-yok .dagilim-satir > :not(:last-child) { margin-right: 12px; }
html.gap-yok .sira-liste li > * { --gy-kap: 0; } html.gap-yok .sira-liste li > :not(:last-child) { margin-right: 12px; }
html.gap-yok .yaris-ust > * { --gy-kap: 0; } html.gap-yok .yaris-ust > :not(:last-child) { margin-right: 16px; } html.gap-yok .yaris-ust > * { margin-bottom: 16px; }
html.gap-yok .yaris-ad > * { --gy-kap: 0; } html.gap-yok .yaris-ad > :not(:last-child) { margin-right: 9px; }
html.gap-yok .olay-liste li > * { --gy-kap: 0; } html.gap-yok .olay-liste li > :not(:last-child) { margin-right: 10px; }
html.gap-yok .kursu > * { --gy-kap: 0; } html.gap-yok .kursu > :not(:last-child) { margin-right: clamp(8px, 2vw, 18px); }
html.gap-yok .kursu-sutun > * { --gy-kap: 0; } html.gap-yok .kursu-sutun > :not(:last-child) { margin-bottom: 8px; }
html.gap-yok .galeri-kart > * { --gy-kap: 0; } html.gap-yok .galeri-kart > :not(:last-child) { margin-bottom: 6px; }
html.gap-yok .galeri-kart .ad > * { --gy-kap: 0; } html.gap-yok .galeri-kart .ad > :not(:last-child) { margin-right: 9px; }
html.gap-yok .galeri-kart .alt > * { --gy-kap: 0; } html.gap-yok .galeri-kart .alt > :not(:last-child) { margin-right: 10px; }
html.gap-yok .dene-ust > * { --gy-kap: 0; } html.gap-yok .dene-ust > :not(:last-child) { margin-right: 14px; } html.gap-yok .dene-ust > * { margin-bottom: 14px; }
html.gap-yok .oyuncu-liste > * { --gy-kap: 0; } html.gap-yok .oyuncu-liste > :not(:last-child) { margin-right: 10px; } html.gap-yok .oyuncu-liste > * { margin-bottom: 10px; }
html.gap-yok .oyuncu-liste li > * { --gy-kap: 0; } html.gap-yok .oyuncu-liste li > :not(:last-child) { margin-right: 9px; }
html.gap-yok .secim-satir > * { --gy-kap: 0; } html.gap-yok .secim-satir > :not(:last-child) { margin-right: 9px; }
html.gap-yok .odul-satir > * { --gy-kap: 0; } html.gap-yok .odul-satir > :not(:last-child) { margin-right: 10px; } html.gap-yok .odul-satir > * { margin-bottom: 10px; }
html.gap-yok .odul > * { --gy-kap: 0; } html.gap-yok .odul > :not(:last-child) { margin-right: 10px; }
html.gap-yok .tahta-kisiler > * { --gy-kap: 0; } html.gap-yok .tahta-kisiler > :not(:last-child) { margin-right: 14px; } html.gap-yok .tahta-kisiler > * { margin-bottom: 14px; }
html.gap-yok .tahta-ust > * { --gy-kap: 0; } html.gap-yok .tahta-ust > :not(:last-child) { margin-right: 14px; }
html.gap-yok .tahta-panel > * { --gy-kap: 0; } html.gap-yok .tahta-panel > :not(:last-child) { margin-bottom: 8px; }
html.gap-yok .tahta-panel > header > * { --gy-kap: 0; } html.gap-yok .tahta-panel > header > :not(:last-child) { margin-right: 10px; }
html.gap-yok #tahtaKare > * { --gy-kap: 0; } html.gap-yok #tahtaKare > :not(:last-child) { margin-bottom: 12px; }
html.gap-yok .kare-skor > * { --gy-kap: 0; } html.gap-yok .kare-skor > :not(:last-child) { margin-right: 10px; } html.gap-yok .kare-skor > * { margin-bottom: 10px; }
html.gap-yok .kare-takim-kart > * { --gy-kap: 0; } html.gap-yok .kare-takim-kart > :not(:last-child) { margin-right: 10px; }
html.gap-yok .kare-takim-kart .duzelt > * { --gy-kap: 0; } html.gap-yok .kare-takim-kart .duzelt > :not(:last-child) { margin-right: 4px; }
html.gap-yok .kare-ust > * { --gy-kap: 0; } html.gap-yok .kare-ust > :not(:last-child) { margin-right: 14px; }
html.gap-yok .rapor-liste button > * { --gy-kap: 0; } html.gap-yok .rapor-liste button > :not(:last-child) { margin-right: 10px; }
html.gap-yok .rapor-ozet > * { --gy-kap: 0; } html.gap-yok .rapor-ozet > :not(:last-child) { margin-right: 10px; } html.gap-yok .rapor-ozet > * { margin-bottom: 10px; }
html.gap-yok .t-secenek.resimli > * { --gy-kap: 0; } html.gap-yok .t-secenek.resimli > :not(:last-child) { margin-bottom: 2px; }
html.gap-yok .df-ayrac > * { --gy-kap: 0; } html.gap-yok .df-ayrac > :not(:last-child) { margin-right: 10px; }
html.gap-yok .kap { --gy-kap: 1; }
html.gap-yok .ust { --gy-kap: 1; }
html.gap-yok .marka { --gy-kap: 1; }
html.gap-yok .etiket { --gy-kap: 1; }
html.gap-yok legend { --gy-kap: 1; }
html.gap-yok .secimler { --gy-kap: 1; }
html.gap-yok .cip label { --gy-kap: 1; }
html.gap-yok .secenek { --gy-kap: 1; }
html.gap-yok .dagilim-satir { --gy-kap: 1; }
html.gap-yok .sira-liste li { --gy-kap: 1; }
html.gap-yok .yaris-ust { --gy-kap: 1; }
html.gap-yok .yaris-ad { --gy-kap: 1; }
html.gap-yok .olay-liste li { --gy-kap: 1; }
html.gap-yok .kursu { --gy-kap: 1; }
html.gap-yok .kursu-sutun { --gy-kap: 1; }
html.gap-yok .galeri-kart { --gy-kap: 1; }
html.gap-yok .galeri-kart .ad { --gy-kap: 1; }
html.gap-yok .galeri-kart .alt { --gy-kap: 1; }
html.gap-yok .dene-ust { --gy-kap: 1; }
html.gap-yok .oyuncu-liste { --gy-kap: 1; }
html.gap-yok .oyuncu-liste li { --gy-kap: 1; }
html.gap-yok .secim-satir { --gy-kap: 1; }
html.gap-yok .odul-satir { --gy-kap: 1; }
html.gap-yok .odul { --gy-kap: 1; }
html.gap-yok .tahta-kisiler { --gy-kap: 1; }
html.gap-yok .tahta-ust { --gy-kap: 1; }
html.gap-yok .tahta-panel { --gy-kap: 1; }
html.gap-yok .tahta-panel > header { --gy-kap: 1; }
html.gap-yok #tahtaKare { --gy-kap: 1; }
html.gap-yok .kare-skor { --gy-kap: 1; }
html.gap-yok .kare-takim-kart { --gy-kap: 1; }
html.gap-yok .kare-takim-kart .duzelt { --gy-kap: 1; }
html.gap-yok .kare-ust { --gy-kap: 1; }
html.gap-yok .rapor-liste button { --gy-kap: 1; }
html.gap-yok .rapor-ozet { --gy-kap: 1; }
html.gap-yok .t-secenek.resimli { --gy-kap: 1; }
html.gap-yok .df-ayrac { --gy-kap: 1; }
/* gap-yok:bitir */