:root {
  --zemin: #fff7ec; --kart: #ffffff; --yazi: #2b2118; --soluk: #7a6a5a; --cizgi: #ecdcc6;
  --ana: #f08a24; --ana-koyu: #c86a0c; --dogru: #3aa655; --yanlis: #e2553f; --yavas: #e8a317; --ezber: #2f8f4a;
  --gol: 0 2px 0 var(--cizgi);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --zemin: #1b1610; --kart: #271f17; --yazi: #f6ecdf; --soluk: #b7a48f; --cizgi: #3a2f23;
    --ana: #f5983a; --ana-koyu: #f5b26a;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--zemin); color: var(--yazi);
  font: 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
#uyg { max-width: 520px; margin: 0 auto; min-height: 100%; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
h1 { font-size: 26px; margin: 0; } h2 { font-size: 20px; margin: 0; }
.soluk { color: var(--soluk); }
.kart { background: var(--kart); border: 2px solid var(--cizgi); border-radius: 18px; padding: 16px; box-shadow: var(--gol); }
.satir { display: flex; align-items: center; gap: 12px; }
.bosluk { flex: 1; }
.orta { text-align: center; }

button, .dugme {
  font: inherit; font-weight: 700; color: #fff; background: var(--ana); border: 0; border-bottom: 4px solid var(--ana-koyu);
  border-radius: 14px; padding: 14px 18px; cursor: pointer; width: 100%;
}
button:active { transform: translateY(2px); border-bottom-width: 2px; }
button.ikincil { background: var(--kart); color: var(--yazi); border: 2px solid var(--cizgi); border-bottom-width: 4px; }
button.kucuk { width: auto; min-width: 44px; min-height: 44px; padding: 8px 12px; font-size: 15px; }
button:disabled { opacity: .5; }

input {
  font: inherit; width: 100%; padding: 14px; border-radius: 14px; border: 2px solid var(--cizgi);
  background: var(--kart); color: var(--yazi); user-select: text; -webkit-user-select: text;
}
.hata { color: var(--yanlis); min-height: 1.4em; font-weight: 600; }

/* maskot */
.maskot { width: 120px; height: 120px; margin: 0 auto; display: block; }
.maskot.ziplar { animation: ziplar .5s ease; }
.maskot.uzgun { animation: sallan .5s ease; }
@keyframes ziplar { 30% { transform: translateY(-18px) scale(1.04); } 60% { transform: translateY(0); } 80% { transform: translateY(-6px); } }
@keyframes sallan { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.balon { background: var(--kart); border: 2px solid var(--cizgi); border-radius: 16px; padding: 10px 14px; text-align: center; font-weight: 600; }

/* üst çubuk */
.ust { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.ust .hap { background: var(--kart); border: 2px solid var(--cizgi); border-radius: 999px; padding: 4px 12px; }
.cubuk { height: 14px; border-radius: 999px; background: var(--cizgi); overflow: hidden; }
.cubuk > i { display: block; height: 100%; background: var(--ana); border-radius: 999px; transition: width .4s; }

/* hız turu */
.soru { font-size: 64px; font-weight: 800; text-align: center; letter-spacing: 2px; padding: 8px 0; font-variant-numeric: tabular-nums; }
.cevap-kutu { font-size: 48px; font-weight: 800; text-align: center; min-height: 72px; border-radius: 16px; border: 3px solid var(--cizgi);
  background: var(--kart); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.cevap-kutu.dogru { border-color: var(--dogru); color: var(--dogru); }
.cevap-kutu.yavas { border-color: var(--yavas); color: var(--yavas); }
.cevap-kutu.yanlis { border-color: var(--yanlis); color: var(--yanlis); }
.sure { height: 10px; border-radius: 999px; background: var(--cizgi); overflow: hidden; }
.sure > i { display: block; height: 100%; width: 100%; background: var(--dogru); transform-origin: left; }
.sure.gec > i { background: var(--yavas); }
.tus-takim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tus-takim button { font-size: 28px; padding: 14px 0; background: var(--kart); color: var(--yazi); border: 2px solid var(--cizgi); border-bottom-width: 4px; }
.geri-bildirim { min-height: 2.6em; text-align: center; font-weight: 700; }

/* ızgara */
.izgara { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.izgara div { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--cizgi); color: var(--soluk); font-weight: 700; }
.izgara .b { background: transparent; color: var(--soluk); }
.izgara .k1 { background: #f8d9a8; color: #6b4a1a; } .izgara .k2 { background: #f2c26c; color: #5a3a08; }
.izgara .k3 { background: #8fd39f; color: #10401f; } .izgara .k4 { background: #4fb96c; color: #fff; } .izgara .k5 { background: var(--ezber); color: #fff; }
.izgara .zayif { background: #f4b3a6; color: #6b1d10; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }