/* ==========================================================================
   YAPAY SINIF - MATEMATIK MOTORU  |  ORTAK STİL (Görsel Anayasa)
   Tasarım hedefi: Akıllı tahtada EN ARKADAKİ öğrenci de rahat görsün.
   - İçerik ekranın ~%95'ini kaplar, header ince (52px).
   - Tüm ölçüler --u birimiyle (ekrana göre ölçeklenir) verilir.
   ========================================================================== */

@font-face {
  font-family: 'TemelYazi';
  src: url('../../fontlar/temelyazi.otf') format('opentype');
  font-display: swap;
}

:root {
  /* Ekrana göre ölçek birimi: 1920x1080 tahtada ~18px, telefonda ~8px */
  --u: clamp(7px, min(0.95vw, 1.7vh), 22px);

  /* Renk anayasası (rol bazlı - tüm bileşenler bunları kullanır) */
  --zemin: #ffffff;
  --murekkep: #1e293b;
  --soluk: #64748b;
  --cizgi: #334155;
  --ince: #cbd5e1;
  --panel: #f8fafc;
  --vurgu: #fde68a;
  --bolunen: #2563eb;
  --bolen: #ea580c;
  --bolum: #16a34a;
  --kalan: #dc2626;
  --carpim: #7c3aed;
  --dogru: #16a34a;
  --yanlis: #dc2626;
  --marka: #4f46e5;
  --konu: #4f46e5;
  --oyun: #db2777;
  --kagit: #059669;

  --font-rakam: 'TemelYazi', 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
  --font-yazi: 'Segoe UI', 'Trebuchet MS', 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-yazi);
  color: var(--murekkep);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Üst çubuk (ince) ---------- */
.ysm-ust {
  height: 52px; display: flex; align-items: center; gap: 12px;
  padding: 0 14px; border-bottom: 2px solid var(--ince); background: #fff;
}
.ysm-ust .geri {
  text-decoration: none; color: var(--murekkep); font-weight: 800; font-size: 15px;
  padding: 6px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--ince);
  white-space: nowrap;
}
.ysm-ust .baslik {
  font-weight: 900; font-size: 17px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ysm-sekme { display: flex; gap: 6px; }
.ysm-sekme a {
  text-decoration: none; font-weight: 900; font-size: 14px; padding: 7px 14px; border-radius: 999px;
  border: 2px solid var(--ince); color: var(--soluk); background: #fff; white-space: nowrap;
}
.ysm-sekme a.aktif.konu { background: var(--konu); border-color: var(--konu); color: #fff; }
.ysm-sekme a.aktif.oyun { background: var(--oyun); border-color: var(--oyun); color: #fff; }
.ysm-sekme a.aktif.kagit { background: var(--kagit); border-color: var(--kagit); color: #fff; }
.ysm-ikon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--ince);
  background: var(--panel); font-size: 18px; line-height: 1;
}

/* ---------- Sahne: kalan tüm alan ---------- */
.ysm-sayfa { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.ysm-sahne { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }

/* ---------- Alt kontrol çubuğu ---------- */
.ysm-alt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-top: 2px solid var(--ince); background: var(--panel);
}
.ysm-btn {
  border: 0; border-radius: 16px; padding: 12px 26px; font-weight: 900;
  font-size: clamp(16px, calc(var(--u) * 1.5), 28px); color: #fff; background: var(--marka);
  box-shadow: 0 5px 0 rgba(0,0,0,.22); transition: transform .08s, box-shadow .08s;
}
.ysm-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.22); }
.ysm-btn:disabled { opacity: .4; cursor: not-allowed; }
.ysm-btn.ikincil { background: #fff; color: var(--murekkep); border: 2px solid var(--ince); box-shadow: 0 5px 0 var(--ince); }
.ysm-btn.oyun { background: var(--oyun); }
.ysm-btn.kagit { background: var(--kagit); }
.ysm-sayac { font-weight: 900; font-size: clamp(15px, calc(var(--u) * 1.4), 26px); color: var(--soluk); }
.ysm-noktalar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ysm-noktalar i { width: 12px; height: 12px; border-radius: 50%; background: var(--ince); display: block; }
.ysm-noktalar i.bitti { background: var(--dogru); }
.ysm-noktalar i.simdi { background: var(--marka); transform: scale(1.35); }

/* ---------- Konu anlatımı yerleşimi ---------- */
.ysm-konu { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 28vw); }
.ysm-konu .gorsel {
  min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--u) * 1.2); position: relative;
}
.ysm-konu .anlatim {
  border-left: 2px solid var(--ince); background: var(--panel);
  display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 2);
}
.ysm-konu .etiket {
  align-self: flex-start; font-weight: 900; font-size: calc(var(--u) * 1.15); letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--konu); border-radius: 999px; padding: 4px 14px;
}
.ysm-konu .etiket.sen { background: var(--oyun); }
.ysm-konu h2 { margin: 0; font-size: calc(var(--u) * 2.3); line-height: 1.15; font-weight: 900; }
.ysm-konu .metin { font-size: calc(var(--u) * 1.9); line-height: 1.35; font-weight: 700; color: #334155; }
.ysm-konu .metin b { color: var(--marka); }
.ysm-konu .oku { align-self: flex-start; }

@media (max-width: 820px) {
  .ysm-konu { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .ysm-konu .anlatim { border-left: 0; border-top: 2px solid var(--ince); padding: 12px 16px; gap: 6px; }
  .ysm-konu h2 { font-size: 19px; }
  .ysm-konu .metin { font-size: 16px; }
  .ysm-sekme a { padding: 6px 9px; font-size: 12px; }
  .ysm-noktalar { display: none; }
  .ysm-sayac { white-space: nowrap; }
  .ysm-ust .baslik { display: none; }
}

/* ---------- Oyun yerleşimi ---------- */
.ysm-oyun { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ysm-oyun .durum {
  display: flex; align-items: center; gap: 16px; padding: 10px 18px;
  border-bottom: 2px solid var(--ince); background: var(--panel);
}
.ysm-oyun .ilerleme { flex: 1; height: 16px; background: var(--ince); border-radius: 99px; overflow: hidden; }
.ysm-oyun .ilerleme i { display: block; height: 100%; width: 0; background: var(--oyun); transition: width .4s; }
.ysm-oyun .puan { font-weight: 900; font-size: clamp(16px, calc(var(--u) * 1.5), 28px); color: var(--oyun); white-space: nowrap; }
.ysm-oyun .gorev { padding: calc(var(--u) * 1.1) calc(var(--u) * 2) 0; }
.ysm-oyun .gorev small { font-weight: 900; color: var(--oyun); font-size: calc(var(--u) * 1.2); letter-spacing: .08em; text-transform: uppercase; }
.ysm-oyun .gorev h2 { margin: 2px 0 0; font-size: calc(var(--u) * 2.4); line-height: 1.2; font-weight: 900; }
.ysm-oyun .alan { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--u) * 1.2); position: relative; }
.ysm-geri-bildirim {
  position: absolute; left: 50%; bottom: calc(var(--u) * 1.5); transform: translate(-50%, 20px); opacity: 0;
  padding: 12px 28px; border-radius: 18px; color: #fff; font-weight: 900;
  font-size: calc(var(--u) * 1.9); transition: all .25s; pointer-events: none; z-index: 20; text-align: center;
  max-width: 92%;
}
.ysm-geri-bildirim.goster { opacity: 1; transform: translate(-50%, 0); }
.ysm-geri-bildirim.iyi { background: var(--dogru); }
.ysm-geri-bildirim.kotu { background: var(--yanlis); }

/* ---------- Seçenek düğmeleri ve tuş takımı ---------- */
.ysm-secenekler { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 14), 1fr)); gap: calc(var(--u) * 1.2); width: 100%; }
.ysm-secenek {
  border: 3px solid var(--ince); background: #fff; border-radius: 22px; padding: calc(var(--u) * 1.5) calc(var(--u) * 1);
  font-weight: 900; font-size: calc(var(--u) * 3); font-family: var(--font-rakam); color: var(--murekkep);
  box-shadow: 0 6px 0 var(--ince);
}
.ysm-secenek:hover { border-color: var(--marka); }
.ysm-secenek.dogru { background: #dcfce7; border-color: var(--dogru); box-shadow: 0 6px 0 var(--dogru); }
.ysm-secenek.yanlis { background: #fee2e2; border-color: var(--yanlis); box-shadow: 0 6px 0 var(--yanlis); animation: ysm-sars .35s; }

.ysm-tuslar { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .7); width: calc(var(--u) * 20); flex: none; }
.ysm-tuslar .ekran {
  grid-column: 1 / -1; min-height: calc(var(--u) * 4.6); border: 3px solid var(--marka); border-radius: 16px; background: #fff;
  font-family: var(--font-rakam); font-weight: 900; font-size: calc(var(--u) * 3.3); text-align: center; line-height: calc(var(--u) * 4.4); color: var(--murekkep);
}
.ysm-tuslar button {
  border: 2px solid var(--ince); background: #fff; border-radius: 14px; font-family: var(--font-rakam);
  font-size: calc(var(--u) * 2.6); font-weight: 900; padding: calc(var(--u) * .8) 0; box-shadow: 0 4px 0 var(--ince); color: var(--murekkep);
}
.ysm-tuslar button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ince); }
.ysm-tuslar .tamam { grid-column: span 2; background: var(--dogru); color: #fff; border-color: var(--dogru); box-shadow: 0 4px 0 #15803d; font-family: var(--font-yazi); }
.ysm-tuslar .sil { background: #fee2e2; border-color: #fecaca; box-shadow: 0 4px 0 #fecaca; }

@keyframes ysm-sars { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
.ysm-sars { animation: ysm-sars .35s; }

/* ---------- Bileşen ortak kapları ---------- */
.ysm-b { width: 100%; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); }
.ysm-b > svg { max-width: 100%; max-height: 100%; width: 100%; height: 100%; }
.ysm-b .svg-kap { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.ysm-b .svg-kap > svg { width: 100%; height: 100%; }
.ysm-b text { font-family: var(--font-rakam); }
.ysm-ipucu {
  position: absolute; left: 14px; top: 10px; background: var(--vurgu); border: 2px solid #f59e0b; color: #78350f;
  font-weight: 900; font-size: calc(var(--u) * 1.4); border-radius: 12px; padding: 4px 12px; z-index: 10;
}

/* Paylaştırma bileşeni */
.ysm-pay { flex-direction: column; justify-content: space-between; gap: calc(var(--u) * 1); align-items: stretch; padding: 0 1%; }
.ysm-pay .havuz {
  min-height: calc(var(--u) * 9); border: 3px dashed var(--ince); border-radius: 22px; background: var(--panel);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--u) * .5); padding: calc(var(--u) * .8);
}
.ysm-pay .havuz.kalanli { border-color: var(--kalan); background: #fef2f2; }
.ysm-pay .tabaklar { flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); min-height: 0; padding-bottom: calc(var(--u) * 2.6); }
.ysm-pay .tabak { flex: 1; max-width: calc(var(--u) * 24); aspect-ratio: 1.35 / 1; border: 4px solid var(--cizgi); border-radius: 50%; background: radial-gradient(ellipse at center, #fff 0 58%, #e2e8f0 59% 64%, #fff 65%); display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: calc(var(--u) * .2); padding: 8% 6%; position: relative; cursor: pointer; transition: transform .1s; }
.ysm-pay .tabak:active { transform: scale(.97); }
.ysm-pay .tabak .ad { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * -2.4); text-align: center; font-weight: 800; color: var(--soluk); font-size: calc(var(--u) * 1.3); }
.ysm-pay .nesne { width: var(--ns, calc(var(--u) * 3.4)); height: var(--ns, calc(var(--u) * 3.4)); display: block; flex: none; }
.ysm-pay .alt-bar { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.5); min-height: calc(var(--u) * 5); flex-wrap: wrap; }
.ysm-ifade { font-family: var(--font-rakam); font-weight: 900; font-size: calc(var(--u) * 3.6); display: flex; gap: .35em; align-items: baseline; flex-wrap: wrap; justify-content: center; }
.ysm-ifade .bn { color: var(--bolunen); } .ysm-ifade .bl { color: var(--bolen); }
.ysm-ifade .bm { color: var(--bolum); } .ysm-ifade .kl { color: var(--kalan); }
.ysm-ifade small { font-family: var(--font-yazi); font-size: .45em; font-weight: 900; color: var(--kalan); }

/* Sağlama bileşeni */
.ysm-saglama { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 2.5); }
.ysm-saglama .sol { flex: 1 1 calc(var(--u) * 26); min-width: 0; }
.ysm-saglama .denklem { display: flex; align-items: center; gap: calc(var(--u) * 1); font-family: var(--font-rakam); font-size: calc(var(--u) * 4.2); font-weight: 900; flex-wrap: wrap; justify-content: center; }
.ysm-saglama .kutu {
  min-width: calc(var(--u) * 8); padding: calc(var(--u) * .5) calc(var(--u) * 1); text-align: center; border: 4px solid; border-radius: 20px; background: #fff;
  display: flex; flex-direction: column; align-items: center;
}
.ysm-saglama .kutu small { font-family: var(--font-yazi); font-size: calc(var(--u) * 1.2); letter-spacing: .06em; font-weight: 900; text-transform: uppercase; }
.ysm-saglama .kutu.bos { border-style: dashed; background: #fffbeb; }
.ysm-saglama .kutu.sira { animation: ysm-nabiz 1s infinite; box-shadow: 0 0 0 6px rgba(251,191,36,.5); }
.ysm-saglama .islem-satiri { font-family: var(--font-rakam); font-size: calc(var(--u) * 3); font-weight: 900; color: var(--soluk); text-align: center; }
@keyframes ysm-nabiz { 50% { box-shadow: 0 0 0 12px rgba(251,191,36,.15); } }

/* Bitiş ekranı */
.ysm-bitis { position: absolute; inset: 0; background: #fff; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); text-align: center; padding: 20px; }
.ysm-bitis .yildizlar { font-size: calc(var(--u) * 9); letter-spacing: .1em; }
.ysm-bitis .yildizlar span { display: inline-block; animation: ysm-yildiz .6s both; }
.ysm-bitis .yildizlar span.sonuk { filter: grayscale(1); opacity: .25; }
.ysm-bitis h1 { margin: 0; font-size: calc(var(--u) * 4.4); font-weight: 900; }
.ysm-bitis .ozet { display: flex; gap: calc(var(--u) * 2); flex-wrap: wrap; justify-content: center; }
.ysm-bitis .ozet div { background: var(--panel); border: 2px solid var(--ince); border-radius: 20px; padding: calc(var(--u) * 1) calc(var(--u) * 2.4); }
.ysm-bitis .ozet b { display: block; font-size: calc(var(--u) * 3.4); }
.ysm-bitis .ozet span { font-weight: 800; color: var(--soluk); font-size: calc(var(--u) * 1.3); }
.ysm-bitis .dugmeler { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
@keyframes ysm-yildiz { from { transform: scale(0) rotate(-90deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

.ysm-yukleniyor { margin: auto; font-weight: 900; font-size: 22px; color: var(--soluk); }

/* Bölme şablonu: sağ panel (soru + tuş takımı / ileri-geri) */
.ysm-bolme .sag { width: calc(var(--u) * 21); flex: none; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); align-items: stretch; justify-content: center; }
.ysm-bolme .sag .soru { font-weight: 900; font-size: calc(var(--u) * 2.1); line-height: 1.3; background: var(--vurgu); border: 3px solid #f59e0b; color: #78350f; border-radius: 18px; padding: calc(var(--u) * .9) calc(var(--u) * 1.1); text-align: center; font-family: var(--font-rakam); }
.ysm-bolme .sag .kontrol { display: flex; gap: calc(var(--u) * .8); }
.ysm-bolme .sag .kontrol .ysm-btn { flex: 1; padding-left: 0; padding-right: 0; }
.ysm-bolme .sag .sayac { text-align: center; font-weight: 900; color: var(--soluk); font-size: calc(var(--u) * 1.4); }
.ysm-bolme .sag .ysm-tuslar { width: 100%; }
.ysm-saglama .sol { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2); }
.bosluk { display: inline-block; min-width: 1.6em; border-bottom: 4px solid currentColor; text-align: center; line-height: 1.1; }
.bosluk .cevap { display: inline; visibility: hidden; }
body.cevap-acik .bosluk .cevap { visibility: visible; color: var(--dogru); }
.cevap { display: none; }
body.cevap-acik .cevap { display: inline; }
g.cevap text { fill: #15803d; }

/* ---------- Ek bileşenler: sayı girişli ve denetimli etkileşim düzeni ---------- */
.ysm-giris { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 2.5); }
.ysm-giris .sol { flex: 1 1 calc(var(--u) * 26); min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); }
.ysm-giris .sol > svg { width: 100%; height: auto; max-height: 72vh; }
.ysm-giris .soru { font-weight: 900; font-size: calc(var(--u) * 2.1); line-height: 1.3; background: var(--vurgu); border: 3px solid #f59e0b; color: #78350f; border-radius: 18px; padding: calc(var(--u) * .9) calc(var(--u) * 1.4); text-align: center; font-family: var(--font-rakam); }
.ysm-kontrol { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.2); align-items: center; justify-content: center; }
.ysm-kontrol .ysm-btn { min-width: calc(var(--u) * 6); }
.ysm-kontrol .grup { display: flex; align-items: center; gap: calc(var(--u) * .8); font-family: var(--font-rakam); font-weight: 900; font-size: calc(var(--u) * 2.6); color: var(--murekkep); }
.ysm-kontrol .grup span { min-width: calc(var(--u) * 6); text-align: center; }
.ysm-kontrol .grup small { font-family: var(--font-yazi); font-size: calc(var(--u) * 1.3); color: var(--soluk); text-transform: uppercase; letter-spacing: .06em; }
.ysm-secim { display: flex; gap: calc(var(--u) * 1.2); flex-wrap: wrap; justify-content: center; }
.ysm-secim button { border: 3px solid var(--ince); background: #fff; border-radius: 16px; padding: calc(var(--u) * .8); box-shadow: 0 5px 0 var(--ince); }
.ysm-secim button svg { width: calc(var(--u) * 7); height: calc(var(--u) * 7); display: block; }
.ysm-secim button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ince); }