:root {
  --zemin: #f6f5f8; --kart: #fff; --yazi: #1d1b22; --soluk: #6b6775; --cizgi: #e3e0ea;
  --ana: #e8318a; --ana-yazi: #fff; --hata: #c62828; --hata-zemin: #fdecec; --tamam: #1b7f4b;
}
@media (prefers-color-scheme: dark) {
  :root { --zemin: #141218; --kart: #1e1b24; --yazi: #ece9f2; --soluk: #a39fae; --cizgi: #34303d;
          --hata: #ff8a80; --hata-zemin: #3a1d1d; --tamam: #6fd39f; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zemin); color: var(--yazi);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.kap { max-width: 640px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
.bilgi { text-align: center; color: var(--soluk); padding: 48px 0; }
.ust { text-align: center; padding: 16px 0 8px; }
.ust img { max-height: 96px; max-width: 60%; object-fit: contain; border-radius: 14px; }
.ust h1 { font-size: 1.05rem; margin: 12px 0 2px; font-weight: 600; }
.ust h2 { font-size: 1.35rem; margin: 0; line-height: 1.25; }
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 16px; margin-top: 16px; }
.kart h3 { margin: 0 0 4px; font-size: 1.05rem; }
.kart .aciklama { color: var(--soluk); margin: 0 0 8px; font-size: .92rem; }
.ogrenci { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ogrenci b { font-size: 1.05rem; }
.ogrenci span { color: var(--soluk); white-space: nowrap; }
.aydinlatma { max-height: 220px; overflow: auto; white-space: pre-wrap; font-size: .88rem; color: var(--soluk);
  border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px; margin: 8px 0 12px; }
.soru { padding: 14px 0; border-top: 1px solid var(--cizgi); }
.soru:first-of-type { border-top: 0; }
.soru > .metin { font-weight: 600; margin: 0 0 8px; display: block; }
.soru .yardim { color: var(--soluk); font-size: .88rem; margin: -4px 0 8px; }
.zorunlu::after { content: " *"; color: var(--ana); }
.secenek { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; margin-top: 6px;
  border: 1px solid var(--cizgi); border-radius: 10px; cursor: pointer; }
.secenek:has(input:checked) { border-color: var(--ana); box-shadow: inset 0 0 0 1px var(--ana); }
.secenek input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--ana); flex: none; }
input[type=text], input[type=number], input[type=date], textarea {
  width: 100%; min-width: 0; font: inherit; color: inherit; background: var(--zemin);
  border: 1px solid var(--cizgi); border-radius: 10px; padding: 11px 12px; appearance: none; -webkit-appearance: none; }
input[type=date] { min-height: 46px; }
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, textarea:focus-visible, .dugme:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }
.olcek { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.olcek label { text-align: center; border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 0; cursor: pointer; }
.olcek label:has(input:checked) { background: var(--ana); color: var(--ana-yazi); border-color: var(--ana); }
.olcek input { position: absolute; opacity: 0; pointer-events: none; }
.olcek-uc { display: flex; justify-content: space-between; color: var(--soluk); font-size: .8rem; margin-top: 4px; }
.soru.eksik > .metin { color: var(--hata); }
.soru.eksik .secenek, .soru.eksik input, .soru.eksik textarea, .soru.eksik .olcek label { border-color: var(--hata); }
.uyari { background: var(--hata-zemin); color: var(--hata); border-radius: 10px; padding: 12px; margin-top: 16px; font-size: .95rem; }
.dugme { width: 100%; margin-top: 16px; padding: 15px; border: 0; border-radius: 12px; font: inherit; font-weight: 600;
  background: var(--ana); color: var(--ana-yazi); cursor: pointer; }
.dugme[disabled] { opacity: .55; cursor: default; }
.sonuc { text-align: center; padding: 40px 8px; }
.sonuc .isaret { font-size: 3rem; line-height: 1; color: var(--tamam); }
.sonuc h2 { margin: 12px 0 6px; }
.sonuc p { color: var(--soluk); margin: 0; }
.alt { text-align: center; color: var(--soluk); font-size: .78rem; margin-top: 24px; }

[hidden] { display: none !important; }