/* ============================================================
   Matematik Oyunlari - ortak stil
   Tablet ve akilli tahta onceliklidir: buyuk dokunma alanlari,
   olceklenen tipografi, yatay kaydirma yok.
   ============================================================ */

:root {
  --mor:      #5b21b6;
  --mor-ac:   #7c3aed;
  --mor-cok:  #ede9fe;
  --turkuaz:  #0d9488;
  --turuncu:  #ea580c;
  --sari:     #f59e0b;
  --yesil:    #16a34a;
  --kirmizi:  #dc2626;
  --mavi:     #2563eb;
  --pembe:    #db2777;

  --zemin:      #f6f5fb;
  --kart:       #ffffff;
  --metin:      #1e1b2e;
  --metin-soluk:#5f5a75;
  --cizgi:      #e3e0ee;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;

  --golge:    0 2px 8px rgba(30, 27, 46, .07), 0 8px 24px rgba(30, 27, 46, .06);
  --golge-yk: 0 6px 16px rgba(30, 27, 46, .12), 0 16px 40px rgba(30, 27, 46, .10);

  /* akilli tahtada tek degiskenle buyutmek icin */
  --olcek: 1;
  --dokunma: 48px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Noto Sans", Arial, sans-serif;
  font-size: calc(clamp(15px, 1.05vw + 11px, 19px) * var(--olcek));
  line-height: 1.55;
  color: var(--metin);
  background: var(--zemin);
  overflow-x: hidden;
}

/* akilli tahta modu: govde olcegini buyutur */
body.tahta { --olcek: 1.35; --dokunma: 64px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
a  { color: var(--mor); }

.sarmal { width: min(1180px, 100% - 2rem); margin-inline: auto; }

/* ---------- ust bar ---------- */
.ustbar {
  background: linear-gradient(115deg, var(--mor) 0%, var(--mor-ac) 55%, var(--pembe) 130%);
  color: #fff;
  padding: .7rem 0;
  box-shadow: var(--golge);
  position: sticky;
  top: 0;
  z-index: 40;
}
.ustbar .sarmal { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.marka {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1.15rem; color: #fff; text-decoration: none;
}
.marka .amblem { font-size: 1.6rem; line-height: 1; }
.ustbar nav { margin-left: auto; display: flex; gap: .35rem; flex-wrap: wrap; }
.ustbar nav a {
  color: #fff; text-decoration: none;
  padding: .5rem .9rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  background: rgba(255,255,255,.13);
  min-height: var(--dokunma);
  display: inline-flex; align-items: center;
}
.ustbar nav a:hover, .ustbar nav a[aria-current="page"] { background: rgba(255,255,255,.28); }

/* ---------- dugmeler ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--dokunma); padding: .7rem 1.4rem;
  border: 0; border-radius: 999px;
  font: inherit; font-weight: 700;
  background: var(--mor); color: #fff;
  cursor: pointer; text-decoration: none;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: var(--golge);
  -webkit-tap-highlight-color: transparent;
}
.dugme:hover  { background: var(--mor-ac); box-shadow: var(--golge-yk); }
.dugme:active { transform: translateY(2px); }
.dugme:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.dugme.ikincil { background: #fff; color: var(--mor); border: 2px solid var(--cizgi); }
.dugme.ikincil:hover { border-color: var(--mor-ac); background: var(--mor-cok); }
.dugme.yesil   { background: var(--yesil); }
.dugme.kirmizi { background: var(--kirmizi); }
.dugme.turuncu { background: var(--turuncu); }
.dugme.buyuk   { font-size: 1.15rem; padding: .95rem 2rem; }

/* ---------- kartlar / izgara ---------- */
.izgara {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.kart {
  background: var(--kart); border-radius: var(--r-m);
  box-shadow: var(--golge); padding: 1.15rem;
  border: 1px solid var(--cizgi);
}

.oyun-kart {
  display: flex; flex-direction: column; gap: .5rem;
  text-decoration: none; color: inherit;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r-m); padding: 1.15rem;
  box-shadow: var(--golge);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative; overflow: hidden;
}
.oyun-kart::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--renk, var(--mor));
}
.oyun-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-yk); border-color: var(--renk, var(--mor)); }
.oyun-kart .ikon { font-size: 2.4rem; line-height: 1; }
.oyun-kart .ad   { font-weight: 800; font-size: 1.08rem; }
.oyun-kart .acik { color: var(--metin-soluk); font-size: .93rem; margin: 0; }
.oyun-kart .alt  { margin-top: auto; padding-top: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; }

.etiket {
  display: inline-block; padding: .2rem .7rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  background: var(--mor-cok); color: var(--mor);
}
.etiket.gri  { background: #eef0f4; color: var(--metin-soluk); }
.etiket.acik { background: #d1fae5; color: #065f46; }

/* ---------- sinif secimi ---------- */
/* Sekiz sinif karti var: telefonda 2, genis ekranda 4 sutun.
   Tek sutuna dusseydi ana sayfanin yarisi sinif kartlarindan ibaret olurdu. */
.sinif-izgara { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .sinif-izgara { gap: 1rem; grid-template-columns: repeat(4, 1fr); } }
.sinif-kart {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; padding: 1.1rem .8rem; text-decoration: none; color: #fff;
  border-radius: var(--r-l); box-shadow: var(--golge);
  transition: transform .12s ease, box-shadow .15s ease;
  min-height: 108px;
}
.sinif-kart:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--golge-yk); }
.sinif-kart b   { font-size: 2.3rem; line-height: 1; font-weight: 900; }
.sinif-kart i   { font-style: normal; font-weight: 700; font-size: .95rem; }
.sinif-kart small { opacity: .85; font-size: .82rem; }
@media (min-width: 760px) {
  .sinif-kart   { gap: .35rem; padding: 1.8rem 1rem; min-height: 145px; }
  .sinif-kart b { font-size: 2.9rem; }
  .sinif-kart i { font-size: 1.05rem; }
}
.s1 { background: linear-gradient(135deg, #22c55e, #15803d); }
.s2 { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.s3 { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.s4 { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.s5 { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.s6 { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.s7 { background: linear-gradient(135deg, #6366f1, #4338ca); }
.s8 { background: linear-gradient(135deg, #ec4899, #be185d); }
/* Henuz oyun etiketlenmemis sinif: kart durur ama one cikmaz. */
.sinif-kart.bos { opacity: .45; }
.sinif-kart.bos:hover { opacity: 1; }

/* ---------- oyun sahnesi ---------- */
.sahne {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--zemin);
}
.hud {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem 1rem;
  background: var(--kart); border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; z-index: 30;
}
.hud .kutu {
  display: flex; flex-direction: column; align-items: center;
  min-width: 84px; padding: .3rem .8rem;
  background: var(--zemin); border-radius: var(--r-s);
}
.hud .kutu small { font-size: .72rem; color: var(--metin-soluk); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hud .kutu b { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.hud .baslik { font-weight: 800; margin-right: auto; }
.hud .geri { text-decoration: none; }
.hud .arac { display: flex; gap: .35rem; }
.hud .arac button {
  width: var(--dokunma); height: var(--dokunma);
  border: 1px solid var(--cizgi); background: var(--kart);
  border-radius: var(--r-s); font-size: 1.25rem; cursor: pointer;
}
.hud .arac button:hover { background: var(--mor-cok); }
.kutu.uyari b { color: var(--kirmizi); animation: nabiz .7s ease-in-out infinite; }
@keyframes nabiz { 50% { transform: scale(1.14); } }

#alan {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 1rem; padding: 1.2rem 1rem 2.5rem;
  width: min(1000px, 100%); margin-inline: auto;
}
/* Akilli tahtada genis durmasi gereken oyunlar bu sinifi ekler
   (ornegin Hizli Islem): 1000 piksellik genel sinir 1920'lik bir
   ekranda yarim kaliyor. */
#alan.genis { width: min(1600px, 100%); }

/* ---------- ortak oyun parcalari ---------- */
.soru-kutu {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-l);
  box-shadow: var(--golge); padding: 1.5rem; text-align: center;
  width: 100%;
}
.soru-metin { font-size: clamp(1.4rem, 3.6vw, 2.3rem); font-weight: 800; margin: 0 0 .4rem; }
.soru-alt   { color: var(--metin-soluk); margin: 0; }

.secenekler { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); width: 100%; }
.secenek {
  min-height: calc(var(--dokunma) + 14px);
  font: inherit; font-size: 1.3rem; font-weight: 800;
  background: var(--kart); color: var(--metin);
  border: 3px solid var(--cizgi); border-radius: var(--r-m);
  cursor: pointer; padding: .8rem 1rem;
  transition: transform .08s ease, border-color .12s, background .12s;
  -webkit-tap-highlight-color: transparent;
}
.secenek:hover:not(:disabled) { border-color: var(--mor-ac); background: var(--mor-cok); }
.secenek:active:not(:disabled) { transform: translateY(2px); }
.secenek.dogru  { border-color: var(--yesil);   background: #dcfce7; color: #14532d; }
.secenek.yanlis { border-color: var(--kirmizi); background: #fee2e2; color: #7f1d1d; }
.secenek.solgun { opacity: .3; }
.secenek:disabled { cursor: default; }

.bildirim {
  font-size: 1.2rem; font-weight: 800; min-height: 1.8em;
  text-align: center;
}
.bildirim.iyi  { color: var(--yesil); }
.bildirim.kotu { color: var(--kirmizi); }

/* ---------- modal ---------- */
.perde {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 16, 40, .62);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.perde[hidden] { display: none !important; }
.modal {
  background: var(--kart); border-radius: var(--r-l);
  box-shadow: var(--golge-yk);
  padding: 1.8rem; width: min(460px, 100%);
  text-align: center; max-height: 92dvh; overflow-y: auto;
}
.modal h2 { margin-bottom: .3rem; }
.modal .buyuk-puan { font-size: 3.4rem; font-weight: 900; color: var(--mor); line-height: 1; margin: .3rem 0; }
/* Sure yarisi: "1:23.45" puandan uzun, rakamlar da esit genislikte olmali. */
.modal .buyuk-puan.sure { font-size: 3rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.modal .kulvar-etiket { font-weight: 800; color: var(--mor); }
.modal input[type="text"] {
  width: 100%; min-height: var(--dokunma);
  padding: .7rem 1rem; font: inherit; font-size: 1.1rem;
  border: 2px solid var(--cizgi); border-radius: var(--r-s);
  margin: .5rem 0 1rem; text-align: center;
}
.modal input[type="text"]:focus { outline: 3px solid var(--mor-cok); border-color: var(--mor-ac); }
.modal .dugmeler { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ---------- zorluk secimi ---------- */
.baslangic { text-align: center; width: 100%; }
.zorluk-secim { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin: 1.2rem 0; }
.zorluk-secim button {
  font: inherit; font-weight: 800; cursor: pointer;
  min-height: calc(var(--dokunma) + 18px); min-width: 130px;
  padding: .8rem 1.4rem; border-radius: var(--r-m);
  border: 3px solid var(--cizgi); background: var(--kart);
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.zorluk-secim button small { font-weight: 600; color: var(--metin-soluk); font-size: .8rem; }
.zorluk-secim button[aria-pressed="true"] { border-color: var(--mor); background: var(--mor-cok); color: var(--mor); }
.zorluk-secim button[data-z="kolay"][aria-pressed="true"] { border-color: var(--yesil); background:#dcfce7; color:#14532d; }
.zorluk-secim button[data-z="zor"][aria-pressed="true"]   { border-color: var(--kirmizi); background:#fee2e2; color:#7f1d1d; }

/* Oyuna ozel ek secim satiri: secenek sayisi cok olabildigi icin
   dugmeler zorluk dugmelerinden daha dar ve daha kisa tutulur. */
.secim-baslik {
  margin: 1.4rem 0 .1rem; font-weight: 800; color: var(--metin-soluk);
  font-size: .95rem;
}
.zorluk-secim.ek-secim { gap: .5rem; margin: .6rem 0 1.2rem; }
.zorluk-secim.ek-secim button {
  min-width: 0; min-height: var(--dokunma);
  padding: .55rem 1rem; border-width: 2px;
  font-size: .95rem;
}
.zorluk-secim.ek-secim button small { font-size: .72rem; }

/* ---------- skor tablosu ---------- */
.tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.skor { width: 100%; border-collapse: collapse; background: var(--kart); border-radius: var(--r-m); overflow: hidden; }
table.skor th, table.skor td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--cizgi); }
table.skor th { background: var(--mor-cok); color: var(--mor); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
table.skor td.puan { font-weight: 800; font-variant-numeric: tabular-nums; }
table.skor td.sira { font-weight: 800; width: 3rem; }

.bos-durum { text-align: center; color: var(--metin-soluk); padding: 2.5rem 1rem; }

/* ---------- alt bilgi ---------- */
footer.altbilgi {
  margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--cizgi);
  color: var(--metin-soluk); font-size: .9rem; text-align: center;
}

/* ---------- yardimcilar ---------- */
.gizle { display: none !important; }
.orta  { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* oyun sahnesinde metin secimi / uzun basma menusu kapali */
.sahne, .sahne * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sahne input, .sahne .secilebilir { -webkit-user-select: text; user-select: text; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- sekmeler (skorlar sayfasi) ---------- */
.sekme-serit {
  display: flex; gap: .4rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--cizgi);
  margin: 1.5rem 0 1.5rem;
}
.sekme {
  font: inherit; font-weight: 700; cursor: pointer;
  min-height: var(--dokunma); padding: .6rem 1.3rem;
  border: 2px solid transparent; border-bottom: 0;
  border-radius: var(--r-m) var(--r-m) 0 0;
  background: transparent; color: var(--metin-soluk);
  margin-bottom: -2px;
}
.sekme:hover { color: var(--mor); background: var(--mor-cok); }
.sekme[aria-selected="true"] {
  background: var(--kart); color: var(--mor);
  border-color: var(--cizgi); border-bottom: 2px solid var(--kart);
}

/* ---------- kisisel skor listesi ---------- */
.skor-liste { list-style: none; margin: 0; padding: 0; }
.skor-liste li {
  display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
  padding: .35rem 0; border-bottom: 1px solid var(--cizgi);
}
.skor-liste li:last-child { border-bottom: 0; }
.skor-sira { min-width: 1.6rem; font-weight: 800; }

/* Kulvar: sure yarislarinda kural+zorluk grubu (bkz. skor-deposu.js). */
.kulvar-baslik {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  margin: 1rem 0 .2rem; font-size: .92rem; color: var(--metin-soluk);
  text-transform: uppercase; letter-spacing: .03em;
}
.kulvar-baslik:first-child { margin-top: 0; }
.kulvar-rekor {
  font-size: 1rem; font-weight: 900; color: var(--mor);
  text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums;
}

/* ---------- ustbardaki marka logosu (sag ust) ---------- */
/* Logo matematik.musterengames.com adresine baglidir; dokunma alani
   gorselden biraz genis olsun diye bagi ayrica pedliyoruz. */
.ustbar-logo-bag {
  display: inline-flex; align-items: center;
  margin-left: .9rem; flex-shrink: 0;
  padding: .3rem; border-radius: var(--r-s);
  min-height: var(--dokunma);
  transition: background .15s ease, transform .1s ease;
}
.ustbar-logo-bag:hover { background: rgba(255, 255, 255, .16); }
.ustbar-logo-bag:active { transform: translateY(1px); }
.ustbar-logo-bag:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ustbar-logo {
  height: 30px; width: auto; display: block;
  /* Beyaz zeminli logoyu mor bar uzerinde ayirmak icin yumusak bir golge */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28));
}
@media (max-width: 700px) {
  .ustbar .sarmal { row-gap: .5rem; }
  .ustbar-logo-bag { margin-left: auto; }
  .ustbar-logo { height: 26px; }
}

/* ---------- hidden ozniteligi her zaman kazansin ----------
   .ky-ozet { display:flex } gibi sinif kurallari, tarayicinin
   [hidden]{display:none} varsayilanini ozgulluk yuzunden eziyordu;
   gizlenmesi gereken bolumler ekranda kaliyordu. */
[hidden] { display: none !important; }

/* ---------- kesir gosterimi (bkz. C.kesirEl / C.ifadeEl) ----------
   Kesirler defterdeki gibi yazilir: pay ustte, cizgi ortada, payda altta.
   Satir icinde metinle birlikte kullanilabilsin diye inline-flex. */
.kesir {
  display: inline-flex; align-items: center; gap: .28em;
  vertical-align: middle; line-height: 1;
}
.kesir-tam { font-weight: inherit; }
.kesir-yig {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; line-height: 1.08;
  font-size: .84em;                 /* iki katli oldugu icin biraz kucuk */
}
.kesir-pay   { padding: 0 .18em; }
.kesir-payda { padding: 0 .18em; border-top: .09em solid currentColor; }