/* ---------- kesir gösterimi ---------- */
.kes { display: inline-flex; align-items: center; vertical-align: middle; gap: 2px; margin: 0 2px; font-variant-numeric: tabular-nums; }
.kes-tam { font-size: 1.15em; margin-right: 2px; }
.kes-k { display: inline-flex; flex-direction: column; text-align: center; line-height: 1.05; }
.kes-k i { font-style: normal; padding: 0 4px; }
.kes-k i:first-child { border-bottom: .09em solid currentColor; }

/* ---------- görseller ---------- */
.gorsel { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
.g-pasta { max-width: 220px; } .g-cubuk { max-width: 340px; } .g-aci { max-width: 260px; }
.g-dolu { fill: var(--ana); stroke: var(--yazi); stroke-width: 2; } .g-dizi .g-dolu { stroke: none; }
.g-bos { fill: var(--kart); stroke: var(--yazi); stroke-width: 2; }
.g-dolu2 { fill: color-mix(in srgb, var(--ana) 28%, var(--kart)); }
.g-kontur { stroke: var(--yazi); }
.g-cizgi { stroke: var(--yazi); } .g-ince { stroke: var(--yazi); stroke-width: 1; opacity: .35; }
.g-yazi { fill: var(--yazi); } .g-soluk { fill: var(--soluk); }
.g-isaret { fill: var(--yanlis); } .g-isaret-yazi { fill: var(--yanlis); }
.g-isaret-cizgi { stroke: var(--ana-koyu); } .g-kesik-cizgi { stroke: var(--soluk); stroke-dasharray: 5 4; }
.g-kesik { stroke-dasharray: 6 4; } .g-kesen { stroke: var(--ana-koyu); } .g-ok { stroke: var(--yazi); }
.g-aci-dilim { fill: color-mix(in srgb, var(--ana) 55%, transparent); }
.g-torba { fill: color-mix(in srgb, var(--ana) 22%, var(--kart)); stroke: var(--yazi); } .g-torba-agiz { stroke: var(--yazi); }
.g-hit { fill: transparent; } .g-sec-nokta { fill: var(--ana); stroke: var(--yazi); stroke-width: 2; }
.g-dilim { transition: fill .15s; }
.dokunulur .g-dilim, .dokunulur .g-hit { cursor: pointer; }
.g-tablo-kap { max-width: 360px; }
.g-tablo-baslik { text-align: center; font-weight: 800; margin-bottom: 6px; }
.g-tablo { width: 100%; border-collapse: collapse; text-align: center; font-variant-numeric: tabular-nums; }
.g-tablo th, .g-tablo td { border: 2px solid var(--cizgi); padding: 8px 6px; }
.g-tablo th { background: color-mix(in srgb, var(--ana) 22%, var(--kart)); }

/* ---------- ders ekranı ---------- */
.ders-soru { font-size: 21px; font-weight: 700; line-height: 1.5; text-align: center; padding: 4px 2px; user-select: text; -webkit-user-select: text; }
.ders-govde { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.sik-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sik-liste.tek { grid-template-columns: 1fr; }
.sik { background: var(--kart); color: var(--yazi); border: 2px solid var(--cizgi); border-bottom-width: 4px; font-size: 20px; min-height: 60px; }
.sik.secili { border-color: var(--ana); background: color-mix(in srgb, var(--ana) 16%, var(--kart)); }
.sik.dogru { border-color: var(--dogru); background: color-mix(in srgb, var(--dogru) 20%, var(--kart)); }
.sik.yanlis { border-color: var(--yanlis); background: color-mix(in srgb, var(--yanlis) 18%, var(--kart)); }
.girdi-alan { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 34px; font-weight: 800; flex-wrap: wrap; }
.girdi-kutu { min-width: 68px; min-height: 60px; padding: 4px 10px; border: 3px solid var(--cizgi); border-radius: 14px; background: var(--kart); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; cursor: pointer; }
.girdi-kutu.aktif { border-color: var(--ana); }
.girdi-kesir { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.girdi-kesir .cizgi { width: 100%; height: 4px; background: var(--yazi); border-radius: 2px; }
.klavye { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.klavye button { font-size: 24px; padding: 10px 0; min-height: 52px; background: var(--kart); color: var(--yazi); border: 2px solid var(--cizgi); border-bottom-width: 4px; }
.klavye button.gonder { background: var(--ana); color: #fff; border-color: var(--ana-koyu); }
.sonuc-panel { border-radius: 18px; padding: 14px 16px; }
.sonuc-panel.dogru { background: color-mix(in srgb, var(--dogru) 22%, var(--kart)); border: 2px solid var(--dogru); }
.sonuc-panel.yanlis { background: color-mix(in srgb, var(--yanlis) 16%, var(--kart)); border: 2px solid var(--yanlis); }
.sonuc-panel b.baslik { display: block; font-size: 19px; margin-bottom: 4px; }
.sonuc-panel .aciklama { margin: 4px 0 10px; line-height: 1.45; }
.ipucu { text-align: center; font-weight: 700; color: var(--ana-koyu); min-height: 1.4em; }

/* ---------- ana ekran / yol ---------- */
.unite { background: var(--kart); border: 2px solid var(--cizgi); border-radius: 18px; box-shadow: var(--gol); overflow: hidden; }
.unite-baslik { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; width: 100%; background: transparent; color: var(--yazi); border: 0; border-radius: 0; text-align: left; font-weight: 800; }
.unite-baslik:active { transform: none; }
.unite-baslik .ik { font-size: 26px; }
.unite-baslik small { display: block; font-weight: 600; color: var(--soluk); }
.rozet { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--ana); color: #fff; }
.rozet.sinif6 { background: #6a5acd; }
.yol { display: flex; flex-direction: column; gap: 6px; padding: 6px 16px 22px; }
.dugum-kap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.dugum { width: 78px; height: 78px; border-radius: 50%; border: 0; border-bottom: 6px solid var(--ana-koyu); background: var(--ana); color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; padding: 0; }
.dugum.tamam { background: var(--ezber); border-bottom-color: #1e6b34; }
.dugum.kilitli { background: var(--cizgi); border-bottom-color: color-mix(in srgb, var(--cizgi) 70%, #000); color: var(--soluk); }
.dugum.acik { animation: nabiz 1.6s ease-in-out infinite; }
.dugum-yildiz { font-size: 13px; letter-spacing: 1px; height: 18px; }
.dugum-ad { font-size: 13px; font-weight: 700; text-align: center; max-width: 160px; line-height: 1.2; }
@keyframes nabiz { 50% { transform: scale(1.06); } }
.sohbet { background: var(--kart); border: 2px solid var(--cizgi); border-radius: 16px; padding: 12px 14px; font-weight: 600; }
.ust-satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.ust-satir .hap { background: var(--kart); border: 2px solid var(--cizgi); border-radius: 999px; padding: 4px 12px; }

/* ---------- çarpım ---------- */
.chip-satir { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 56px; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--cizgi); background: var(--kart); color: var(--yazi); font-weight: 800; border-bottom-width: 4px; width: auto; }
.chip small { font-size: 11px; color: var(--soluk); font-weight: 700; }
.chip.tam { border-color: var(--ezber); background: color-mix(in srgb, var(--ezber) 18%, var(--kart)); }
.lejant { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 14px; }
.lejant span { display: flex; align-items: center; gap: 8px; }
.lejant i { width: 20px; height: 20px; border-radius: 6px; flex: none; border: 2px solid rgba(0,0,0,.12); }
.izgara .bilinmiyor { background: var(--cizgi); color: var(--soluk); }
.izgara .secili-hucre { outline: 3px solid var(--yazi); outline-offset: 1px; }
.detay { min-height: 64px; }
.izgara div[data-h] { cursor: pointer; }

/* ---------- animasyonlu ders (anlatım) ---------- */
.an-sahne { min-height: 230px; display: flex; align-items: center; justify-content: center; }
.an-metin { font-size: 19px; line-height: 1.55; text-align: center; min-height: 5.2em; }
.an-noktalar { display: flex; gap: 6px; justify-content: center; }
.an-noktalar i { width: 10px; height: 10px; border-radius: 50%; background: var(--cizgi); }
.an-noktalar i.on { background: var(--ana); }
.g-dilim.yeni { animation: dilimGel .5s ease both; }
@keyframes dilimGel { from { opacity: 0; transform: scale(.9); } }

/* ---------- admin ---------- */
.gunluk-grafik { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.gunluk-grafik div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 10px; color: var(--soluk); }
.gunluk-grafik i { display: block; width: 100%; border-radius: 6px 6px 0 0; background: var(--ana); min-height: 2px; }
.gunluk-grafik i.tamam { background: var(--ezber); }
.tablo-basit { width: 100%; border-collapse: collapse; font-size: 15px; }
.tablo-basit td, .tablo-basit th { padding: 6px 4px; border-bottom: 1px solid var(--cizgi); text-align: left; }
.tablo-basit th { color: var(--soluk); font-weight: 700; font-size: 13px; }

/* ---------- alttan panel ---------- */
.sheet-arka { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; z-index: 10; animation: gel .15s ease; }
.sheet { width: 100%; max-width: 520px; background: var(--zemin); border-radius: 22px 22px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); animation: yuksel .2s ease; }
@keyframes yuksel { from { transform: translateY(40px); } }
@keyframes gel { from { opacity: 0; } }
.unite .yol[hidden] { display: none; }
@media (max-height: 700px) { .klavye button { min-height: 44px; padding: 6px 0; } .ders-soru { font-size: 19px; } }