/* Soru Havuzu: sitenin ortak aile dili (site-family) — keskin köşeler, koyu mürekkep, kiremit vurgu,
   mono üst etiketler, düz gri bantlar. Yeni bir görsel aile kurmaz. */
.havuz-sayfa {
  --h-ink: #22242d;
  --h-muted: #62656d;
  --h-line: #22242d30;
  --h-line-soft: #22242d1a;
  --h-panel: #eeeef0;
  --h-paper: #ffffff;
  --h-card: #ffffff;
  --h-accent: #c44732;
  --h-accent-soft: #fff0ed;
  --h-good: #2f6b4a;
  --h-good-soft: #e5ece8;
  --h-warn: #8a5a0c;
  --h-bad: #c44732;
  --h-golge: 3px 3px 0 #22242d26;
  background: var(--h-paper);
  color: var(--h-ink);
}

.havuz-sayfa .skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.havuz-sayfa .skip-link:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip-path: none; padding: 12px; background: #fff; z-index: 100; }
[hidden] { display: none !important; }

.havuz { max-width: 1040px; margin: 0 auto; padding: 56px 24px 96px; display: flex; flex-direction: column; gap: 56px; font-family: 'IBM Plex Sans', system-ui, sans-serif; }

/* Başlık dili: sitenin işlevsel sayfa başlığıyla aynı */
.ust-etiket { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 11px/1.5 'IBM Plex Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-accent); }
.ust-etiket::before { content: ''; width: 24px; height: 1px; background: currentColor; }
.havuz h1, .atolye-giris h1 { font-size: clamp(38px, 4.4vw, 56px); font-weight: 700; line-height: 1.04; letter-spacing: -0.05em; margin: 18px 0 18px; }
.havuz h1 span, .atolye-giris h1 span { color: var(--h-accent); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.havuz h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 8px; }
.havuz h3 { font-size: 16px; font-weight: 600; margin: 4px 0; line-height: 1.35; }
.havuz h4 { font: 500 11px/1.5 'IBM Plex Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; margin: 18px 0 8px; color: var(--h-muted); }
.bolum-etiket { margin: 0 0 6px; font: 500 11px/1.5 'IBM Plex Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-accent); }
.kazanim-etiket { font: 500 12px/1.4 'IBM Plex Mono', monospace; color: var(--h-accent); margin: 0; }
.giris-metin { font-size: 16px; line-height: 1.65; max-width: 640px; margin: 0; color: var(--h-muted); }
.kucuk-not { color: var(--h-muted); font-size: 14px; line-height: 1.55; margin: 8px 0 0; }

/* Düğmeler: tek aile, tek yükseklik */
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
.birincil, .ikincil {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 0 20px; border-radius: 2px; font: 600 14px 'IBM Plex Sans', sans-serif; white-space: nowrap;
  transition: transform 0.15s, background-color 0.15s, border-color 0.15s;
}
.birincil { background: var(--h-ink); color: #fff; border: 1px solid var(--h-ink); box-shadow: var(--h-golge); }
.birincil:hover:not(:disabled) { background: var(--h-accent); border-color: var(--h-accent); transform: translateY(-1px); }
.ikincil { background: #fff; color: var(--h-ink); border: 1px solid var(--h-line); }
.ikincil:hover:not(:disabled) { border-color: var(--h-ink); }
.metin-dugme { background: none; border: 0; padding: 4px 0; color: var(--h-ink); font: 600 14px 'IBM Plex Sans', sans-serif; border-bottom: 1px solid var(--h-ink); border-radius: 0; }
.metin-dugme:hover { color: var(--h-accent); border-color: var(--h-accent); }
.metin-dugme.sessiz { border-bottom-color: transparent; color: var(--h-muted); font-weight: 500; }
.metin-dugme.sessiz:hover { color: var(--h-ink); }
select, textarea, input[type="text"], input[type="password"], input[type="number"] {
  font: 15px 'IBM Plex Sans', sans-serif; color: var(--h-ink); background: #fff; border: 1px solid var(--h-line); border-radius: 2px; padding: 11px 12px;
}
input:focus, textarea:focus, select:focus { border-color: var(--h-ink); outline: none; }
button:focus-visible, a:focus-visible, textarea:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, [contenteditable]:focus-visible {
  outline: 2px solid var(--h-accent); outline-offset: 2px;
}

/* Bölümlü seçici */
.ikili { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--h-line); border-radius: 2px; background: #fff; }
.ikili button { min-height: 40px; border: 0; border-radius: 0; background: none; padding: 0 16px; font: 500 14px 'IBM Plex Sans', sans-serif; color: var(--h-muted); }
.ikili button + button { border-left: 1px solid var(--h-line); }
.ikili button:hover { color: var(--h-ink); }
.ikili button[aria-pressed="true"] { background: var(--h-ink); color: #fff; }

/* Öğrenci: hazırlık */
.adim-baslik { display: grid; grid-template-columns: 48px 1fr; gap: 0 8px; align-items: baseline; margin-bottom: 20px; }
.adim-no { font: 500 13px 'IBM Plex Mono', monospace; color: var(--h-accent); }
.adim-baslik h2 { margin: 0; }
.adim-baslik p { grid-column: 2; margin: 6px 0 0; color: var(--h-muted); font-size: 15px; }
.secim { border-top: 1px solid var(--h-ink); padding-top: 28px; }
.secim-satir { display: flex; flex-wrap: wrap; gap: 28px; padding-left: 56px; }
.secim-alan { display: flex; flex-direction: column; gap: 8px; }
.alan-etiket { font: 500 11px/1.5 'IBM Plex Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-muted); }
.konular { border: 0; padding: 0 0 0 56px; margin: 28px 0 0; }
.konular legend { display: flex; gap: 16px; align-items: baseline; padding: 0; margin-bottom: 10px; }
.konu-listesi { border-top: 1px solid var(--h-line-soft); }
.konu { display: grid; grid-template-columns: 24px 64px 1fr; gap: 8px; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--h-line-soft); cursor: pointer; }
.konu:hover { background: #fafafa; }
.konu input { accent-color: var(--h-ink); width: 16px; height: 16px; margin: 0; align-self: center; }
.konu-kod { font: 500 13px 'IBM Plex Mono', monospace; color: var(--h-accent); }
.konu-metin { font-size: 15px; line-height: 1.45; color: var(--h-muted); }
.konu:has(input:checked) .konu-metin { color: var(--h-ink); }
.secim-sonu { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 28px 0 0 56px; }
.secim-ozet { margin: 0; font: 500 13px 'IBM Plex Mono', monospace; color: var(--h-muted); }
.isaret { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--h-muted); cursor: pointer; }
.isaret input { accent-color: var(--h-ink); }
.dugme-satiri { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; }

/* Öğrenci: ekranda çalışma kâğıdı */
.calisma-kagidi { background: #fff; border: 1px solid var(--h-line); padding: 48px 56px; box-shadow: var(--h-golge); }
.calisma-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--h-ink); }
.calisma-ust h2 { margin: 0; }
.ilerleme { font: 500 13px 'IBM Plex Mono', monospace; color: var(--h-muted); }
.calisma-kagidi > .kucuk-not { margin-top: 14px; }
.soru-listesi { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-direction: column; gap: 44px; counter-reset: soru; }
.soru-karti { counter-increment: soru; position: relative; padding-left: 48px; }
.soru-karti::before { content: counter(soru, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: 500 14px 'IBM Plex Mono', monospace; color: var(--h-accent); }
.soru-ust { display: flex; justify-content: space-between; margin: 0 0 10px; font-size: 13px; color: var(--h-muted); }
.durum-kutusu { margin: 0 0 12px; padding-left: 16px; border-left: 2px solid var(--h-line); line-height: 1.65; color: #3c3f47; }
.soru-metni { font-weight: 600; font-size: 17px; line-height: 1.5; margin: 0 0 16px; }
.cevap-yeri {
  width: 100%; box-sizing: border-box; resize: vertical; border: 0; border-radius: 0; padding: 0 2px; margin-bottom: 16px;
  font: 16px/32px 'IBM Plex Sans', sans-serif; background: repeating-linear-gradient(transparent 0 31px, #d4d3cf 31px 32px);
}
.cevap-yeri:focus { outline: none; background-color: #fcfbf8; }
.anahtar { margin-top: 18px; padding: 20px 24px; background: var(--h-panel); }
.ornek-cevap { line-height: 1.65; margin: 0; }
.olcut { border: 0; border-top: 1px solid var(--h-line); margin: 16px 0 0; padding: 12px 0 0; }
.olcut legend { font-weight: 600; font-size: 15px; padding: 0 0 6px; }
.duzey { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 8px 0; cursor: pointer; }
.duzey input { grid-row: span 2; margin-top: 4px; accent-color: var(--h-ink); }
.duzey-ad { font-weight: 600; font-size: 14px; }
.duzey-tanim { font-size: 14px; color: var(--h-muted); line-height: 1.5; }
.soru-puani { font: 500 13px 'IBM Plex Mono', monospace; margin: 16px 0 0; }
.calisma-kagidi .dugme-satiri { border-top: 1px solid var(--h-line); padding-top: 28px; margin-top: 44px; }

/* Öğrenci: sonuç */
.sonuc { background: var(--h-panel); padding: 40px; }
.sonuc-ozet { font-size: 17px; margin: 0 0 24px; }
.sonuc-izgara { border-top: 1px solid var(--h-line); }
.sonuc-kart { display: grid; grid-template-columns: 64px 1fr auto; gap: 4px 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--h-line); }
.sonuc-kart h3 { grid-column: 2; grid-row: 1; margin: 0; font-weight: 500; }
.sonuc-kart .kazanim-etiket { grid-column: 1; grid-row: 1; }
.sonuc-oran { grid-column: 3; grid-row: 1; margin: 0; font: 600 20px 'IBM Plex Mono', monospace; text-align: right; }
.sonuc-seviye { grid-column: 2; margin: 0; font-size: 13px; font-weight: 600; }
.sonuc-kart a { grid-column: 2 / 4; color: var(--h-ink); font-size: 14px; font-weight: 600; text-underline-offset: 3px; }
.iyi .sonuc-seviye { color: var(--h-good); }
.orta .sonuc-seviye { color: var(--h-warn); }
.zayif .sonuc-seviye { color: var(--h-bad); }
.bos .sonuc-seviye { color: var(--h-muted); font-weight: 500; }
.sonuc .dugme-satiri { margin-top: 28px; }

/* Hızlı öğren */
.hizli { border-top: 1px solid var(--h-ink); padding-top: 28px; }
.hizli-kartlar { margin-top: 16px; border-top: 1px solid var(--h-line-soft); }
.hizli-kart { border-bottom: 1px solid var(--h-line-soft); }
.hizli-kart summary { padding: 18px 4px; cursor: pointer; font-weight: 600; font-size: 16px; display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; list-style: none; }
.hizli-kart summary::-webkit-details-marker { display: none; }
.hizli-kart summary::after { content: '+'; font: 400 20px 'IBM Plex Mono', monospace; color: var(--h-muted); }
.hizli-kart[open] summary::after { content: '−'; }
.hizli-icerik { padding: 0 4px 22px 72px; line-height: 1.65; max-width: 720px; }
.hizli-icerik ul { padding-left: 18px; margin: 10px 0; }
.dene { background: var(--h-panel); padding: 14px 16px; }

.ogretmen-baglanti { margin: 0; padding: 22px 24px; background: var(--h-panel); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.ogretmen-baglanti p { margin: 0; color: var(--h-muted); }
.ogretmen-baglanti a { color: var(--h-ink); font-weight: 600; text-underline-offset: 4px; }

@media (max-width: 700px) {
  .havuz { padding: 32px 16px 64px; gap: 40px; }
  .secim-satir, .konular, .secim-sonu { padding-left: 0; margin-left: 0; }
  .adim-baslik { grid-template-columns: 36px 1fr; }
  .konu { grid-template-columns: 24px 48px 1fr; }
  .calisma-kagidi { padding: 24px 18px; }
  .soru-karti { padding-left: 36px; }
  .sonuc { padding: 24px 18px; }
  .hizli-icerik { padding-left: 4px; }
  .ikili button { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }