/* ilgeç — oynatıcı stili: oyun kabuğu, şablonlar, okuma kolaylığı, akıllı tahta modu ve çıktı */

.oyun {
  --oyun-yazi: var(--yazi);
  --oyun-olcek: 1;
  --kart-zemin: #fff;
  --kart-kenar: var(--kenar);
  font-family: var(--oyun-yazi);
  font-size: calc(17px * var(--oyun-olcek));
  color: var(--metin);
  background: var(--zemin);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
}
.oyun.yazi-atkinson { --oyun-yazi: "Atkinson Next", var(--yazi); }
.oyun.metin-buyuk { --oyun-olcek: 1.2; }
.oyun.aralik-genis { letter-spacing: .04em; word-spacing: .12em; line-height: 1.8; }
.oyun.tahta { --oyun-olcek: 1.32; }
.oyun.tahta.metin-buyuk { --oyun-olcek: 1.5; }
.oyun.kontrast {
  --metin: #000;
  --soluk: #1b1b1b;
  --kenar: #000;
  --kenar-koyu: #000;
  --zemin: #fff;
  --mavi-zemin: #fff3c4;
  --kart-kenar: #000;
}
.oyun.kontrast .kart, .oyun.kontrast .secenek, .oyun.kontrast .kelime { border-width: 3px; }

.oyun:fullscreen { background: var(--zemin); overflow: auto; }

/* ---------- Üst çubuk ---------- */
.oyun-ust {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1rem;
  background: var(--lacivert);
  color: #fff;
  position: relative;
  flex-wrap: wrap;
}
.oyun-logo { height: 36px; width: auto; flex: none; }
.oyun-baslik { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.oyun-baslik strong { font-weight: 850; font-size: 1.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oyun-sablon-adi { color: #a9c4e4; font-weight: 700; font-size: .82em; }
.oyun-gosterge { display: flex; gap: .45rem; align-items: center; font-variant-numeric: tabular-nums; font-weight: 850; }
.oyun-gosterge > span {
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: .2rem .7rem;
  display: inline-flex; align-items: center; gap: .3rem;
}
.oyun-puan { color: var(--kehribar); }
.oyun-sure.az-kaldi { background: var(--yanlis) !important; }
.oyun-dugmeler { display: flex; flex-wrap: wrap; gap: .35rem; }
.oyun-ikon {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  width: 2.5rem; height: 2.5rem; border-radius: 10px; display: grid; place-items: center;
}
.oyun-ikon.oyun-arac {
  width: auto; min-width: 2.5rem; padding: 0 .7rem; display: inline-flex; gap: .4rem;
  align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; font-size: .86rem;
}
.oyun-ikon:hover { background: rgba(255, 255, 255, .14); }
.oyun-ikon[aria-pressed="true"] { background: var(--kehribar); color: var(--lacivert); }
.oyun-ikon .simge { width: 1.3rem; height: 1.3rem; }
.oyun-menu {
  position: absolute; right: .75rem; top: calc(100% + .35rem); z-index: 30;
  background: #fff; color: var(--metin); border-radius: var(--r); padding: 1rem;
  box-shadow: 0 16px 40px rgba(6, 35, 66, .28); display: grid; gap: .65rem; width: min(300px, calc(100vw - 24px));
  font-size: 16px; letter-spacing: normal; word-spacing: normal;
}
@media (max-width: 640px) {
  .oyun-ust { padding: .5rem .75rem; gap: .5rem; }
  .oyun-logo { display: none; }
  .oyun-gosterge { order: 3; width: 100%; justify-content: flex-start; }
  .oyun-dugmeler { width: 100%; }
  .oyun-ikon.oyun-arac:not(.oyun-gezinme) .oyun-etiket { display: none; }
  .oyun-ikon.oyun-arac:not(.oyun-gezinme) { padding-inline: .55rem; }
}

/* ---------- Sahne ---------- */
.oyun-sahne {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 18px 2.5rem;
}
.oyun.tahta .oyun-sahne { max-width: none; padding-inline: 2.5rem; }
.oyun-alan { display: grid; gap: 1.1rem; }

/* ---------- Giriş ve sonuç ekranları ---------- */
.oyun-giris, .oyun-son { max-width: 760px; margin: 1rem auto 0; text-align: center; display: grid; gap: 1rem; justify-items: center; }
.oyun-giris h1 { font-size: 2.1em; margin: 0; }
.oyun-aciklama { color: var(--soluk); margin: 0; }
.oyun-yonerge {
  font-size: 1.12em; font-weight: 700; margin: 0; background: #fff; border: 1px solid var(--kenar);
  border-radius: var(--r-buyuk); padding: .85rem 1.1rem; display: flex; align-items: center; gap: .6rem; text-align: left;
}
.dugme-basla { font-size: 1.25em; padding: .9rem 2.2rem; }
.oyun-giris-alt { display: grid; gap: .8rem; justify-items: center; width: 100%; }
.sablon-degistir { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; }
.sablon-degistir-baslik { font-weight: 800; color: var(--soluk); font-size: .92em; margin-right: .2rem; }
.cip {
  display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-weight: 750; font-size: .88em;
  background: #fff; color: var(--lacivert); border: 2px solid var(--kenar); border-radius: 999px; padding: .3rem .75rem; cursor: pointer;
}
.cip:hover { border-color: var(--mavi-acik); }
.cip.secili, .cip[aria-checked="true"] { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.cip .simge { width: 1.05em; height: 1.05em; }

.rumuz-sec { width: 100%; display: grid; gap: .6rem; }
.rumuz-sec h2 { font-size: 1.15em; margin: 0; }
.rumuz-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.rumuz-izgara button {
  font: inherit; font-weight: 800; background: #fff; border: 2px solid var(--kenar); border-radius: var(--r); padding: .7rem .5rem; cursor: pointer; color: var(--lacivert);
}
.rumuz-izgara button[aria-pressed="true"] { background: var(--kehribar); border-color: var(--kehribar); }

.oyun-son-yildiz { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--kehribar); color: var(--lacivert); display: grid; place-items: center; }
.oyun-son-yildiz .simge { width: 2.6rem; height: 2.6rem; fill: currentColor; }
.oyun-son h2 { font-size: 1.9em; margin: 0; }
.oyun-son-puan { display: flex; align-items: baseline; gap: .4rem; }
.oyun-son-puan b { font-size: 3.4em; font-weight: 900; color: var(--lacivert); line-height: 1; font-variant-numeric: tabular-nums; }
.oyun-son-puan span { font-weight: 800; color: var(--soluk); }
.oyun-son-ozet { color: var(--soluk); font-weight: 700; margin: 0; }
.oyun-son-dugmeler { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.oyun-gonderim { margin: 0; font-weight: 750; color: var(--soluk); min-height: 1.4em; }
.oyun-gonderim.basari { color: var(--dogru); }
.oyun-gonderim.hata { color: var(--yanlis); }
.oyun-hedef { width: 100%; max-width: 480px; display: grid; gap: .4rem; background: #fff; border: 1px solid var(--kenar); border-radius: var(--r); padding: .8rem 1rem; }
.hedef-cubuk { height: 14px; border-radius: 999px; background: var(--mavi-zemin); overflow: hidden; }
.hedef-cubuk span { display: block; height: 100%; background: linear-gradient(90deg, var(--mavi), var(--kehribar)); border-radius: 999px; }

.yanit-listesi { list-style: none; padding: 0; margin: 0; width: 100%; text-align: left; display: grid; gap: .4rem; }
.yanit-listesi li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; background: #fff; border: 1px solid var(--kenar); border-radius: var(--r); padding: .6rem .8rem; }
.yanit-listesi li > div { display: grid; gap: .1rem; }
.yanit-listesi .yanit-isaret { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.yanit-listesi .dogru .yanit-isaret { background: var(--dogru); }
.yanit-listesi .yanlis .yanit-isaret { background: var(--yanlis); }
.yanit-listesi .acik .yanit-isaret { background: var(--mavi); }
.yanit-listesi .yanit-isaret .simge { width: 1rem; height: 1rem; }
.yanit-listesi .beklenen { color: var(--dogru); font-weight: 750; }
.yanit-listesi .yanit-not { color: var(--soluk); font-size: .92em; }

.hata-bildir { width: 100%; text-align: left; margin-top: .5rem; }
.hata-bildir summary { cursor: pointer; color: var(--soluk); font-weight: 750; font-size: .92em; }
.hata-bildir textarea { margin: .6rem 0; }

/* ---------- Ortak öğeler ---------- */
.medya { display: inline-flex; flex-direction: column; align-items: center; gap: .4rem; max-width: 100%; }
.medya img { max-height: 220px; width: auto; max-width: 100%; border-radius: 10px; object-fit: contain; }
.medya-metin { white-space: pre-line; overflow-wrap: anywhere; }
.ses-dugme {
  display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: none;
  background: var(--mavi-zemin); color: var(--mavi-koyu); border: 0; cursor: pointer;
}
.ses-dugme:hover { background: var(--mavi); color: #fff; }
.ses-dugme .simge { width: 1.15rem; height: 1.15rem; }

.soru-kart {
  background: #fff; border: 1px solid var(--kart-kenar); border-radius: var(--r-buyuk); padding: 1.5rem 1.25rem;
  text-align: center; font-size: 1.4em; font-weight: 800; color: var(--lacivert); min-height: 5.5rem;
  display: grid; place-items: center;
}
.soru-kart.kucuk { font-size: 1.1em; min-height: 0; padding: 1rem 1.2rem; }
.soru-kart .medya img { max-height: 280px; }

.secenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.secenekler.iki { max-width: 640px; margin-inline: auto; width: 100%; }
.secenekler.kucuk { gap: .5rem; }
.secenekler.tek-sutun { grid-template-columns: 1fr; }
@media (max-width: 560px) { .secenekler { grid-template-columns: 1fr; } }
.secenek {
  font: inherit; font-weight: 750; text-align: left; cursor: pointer; color: var(--metin);
  background: #fff; border: 2px solid var(--kart-kenar); border-radius: var(--r); padding: .85rem 1rem;
  display: flex; align-items: center; gap: .75rem; min-height: 3.6rem;
  transition: border-color .12s, background .12s, transform .06s;
}
.secenekler.kucuk .secenek { min-height: 2.9rem; padding: .6rem .8rem; }
.secenek:hover:not([disabled]) { border-color: var(--mavi-acik); background: #fbfdff; }
.secenek:active:not([disabled]) { transform: scale(.99); }
.secenek[disabled] { cursor: default; }
.secenek.secili { border-color: var(--kehribar); background: var(--kehribar-zemin); }
.secenek.dogru { border-color: var(--dogru); background: var(--dogru-zemin); }
.secenek.yanlis { border-color: var(--yanlis); background: var(--yanlis-zemin); }
.secenek-harf {
  flex: none; width: 2rem; height: 2rem; border-radius: 8px; display: grid; place-items: center;
  background: var(--mavi-zemin); color: var(--mavi-koyu); font-weight: 900;
}
.secenek.dogru .secenek-harf { background: var(--dogru); color: #fff; }
.secenek.yanlis .secenek-harf { background: var(--yanlis); color: #fff; }
.secenek .medya { align-items: flex-start; }
.secenek .medya img { max-height: 120px; }
.dy-dugme { justify-content: center; font-size: 1.2em; min-height: 4.5rem; }
.dy-dugme .simge { width: 1.5em; height: 1.5em; }
.dy-dogru .simge { color: var(--dogru); }
.dy-yanlis .simge { color: var(--yanlis); }
.dy-cift { display: inline-flex; align-items: center; gap: .9rem; flex-wrap: wrap; justify-content: center; }
.dy-ok { color: var(--kehribar-koyu); font-weight: 900; }

.klavye-ipucu { text-align: center; color: var(--silik); font-size: .85em; font-weight: 650; margin: 0; }
@media (hover: none) { .klavye-ipucu { display: none; } }

.geri-bildirim {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; justify-content: space-between;
  border-radius: var(--r); padding: .8rem 1rem; font-weight: 700; border: 2px solid;
}
.geri-bildirim.dogru { background: var(--dogru-zemin); border-color: #9fd8bb; color: #0b5a37; }
.geri-bildirim.yanlis { background: var(--yanlis-zemin); border-color: #efb1ab; color: #8c211b; }
.geri-bildirim > span { flex-basis: 100%; order: 2; font-weight: 650; color: var(--metin); }
.geri-bildirim .dugme { margin-left: auto; }
.metin-dogru { color: var(--dogru); }
.metin-yanlis { color: var(--yanlis); }

.oyun-alt-cubuk { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; margin-top: .5rem; }

/* ---------- Kartlar ve sürükle-bırak ---------- */
.havuz {
  display: flex; flex-wrap: wrap; gap: .55rem; align-content: flex-start; align-items: flex-start;
  min-height: 4.2rem; padding: .75rem; border-radius: var(--r-buyuk);
  background: #e9eef5; border: 2px dashed var(--kenar-koyu);
}
.havuz:empty::before { content: "Tüm kartlar yerleştirildi"; color: var(--silik); font-weight: 700; font-size: .9em; margin: auto; }
.kart, .kelime {
  background: var(--kart-zemin); border: 2px solid var(--kart-kenar); border-radius: var(--r);
  padding: .55rem .8rem; font-weight: 750; cursor: grab; user-select: none; -webkit-user-select: none;
  touch-action: none; box-shadow: 0 2px 0 rgba(6, 35, 66, .08); position: relative;
  display: inline-flex; align-items: center; gap: .4rem; flex-direction: column;
  transition: border-color .1s, box-shadow .1s;
}
.kelime { flex-direction: row; padding: .35rem .7rem; border-radius: 999px; }
.kart .medya img { max-height: 110px; }
.kart:hover, .kelime:hover { border-color: var(--mavi-acik); }
.kart.secili, .kelime.secili { border-color: var(--kehribar); box-shadow: 0 0 0 4px rgba(254, 179, 35, .35); }
.kart.suruklenen, .kelime.suruklenen { opacity: .35; }
.hayalet {
  position: fixed; z-index: 1000; pointer-events: none; opacity: .95; transform: rotate(-2deg) scale(1.03);
  box-shadow: 0 16px 32px rgba(6, 35, 66, .3) !important; margin: 0 !important;
}
.kart.kilitli, .kelime.kilitli { cursor: default; }
.kart.dogru, .kelime.dogru { border-color: var(--dogru); background: var(--dogru-zemin); }
.kart.yanlis, .kelime.yanlis { border-color: var(--yanlis); background: var(--yanlis-zemin); }
.kart-duzeltme { color: var(--dogru); font-weight: 850; font-size: .82em; }
.kart-aciklama { color: var(--soluk); font-weight: 600; font-size: .8em; max-width: 26ch; }
.secim-var .yuva, .secim-var .hedef-kutu, .secim-var .bosluk-yuva, .secim-var .etiket-hedef, .secim-var .zaman-eksen { outline: 3px dashed var(--kehribar); outline-offset: 2px; }
.ustunde { background: var(--kehribar-zemin) !important; border-color: var(--kehribar) !important; }
[role="button"]:focus-visible { outline: 3px solid var(--kehribar); outline-offset: 2px; }

/* Eşleştirme */
.eslestir-izgara { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.eslestir-sol { display: grid; gap: .6rem; }
.eslestir-satir {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; align-items: stretch;
  background: #fff; border: 2px solid var(--kart-kenar); border-radius: var(--r); padding: .5rem;
}
.eslestir-oge { display: flex; align-items: center; font-weight: 800; color: var(--lacivert); padding: .3rem .4rem; }
.yuva {
  min-height: 3rem; border: 2px dashed var(--kenar-koyu); border-radius: var(--r-kucuk);
  display: flex; align-items: center; justify-content: center; padding: .2rem; background: #f6f9fc;
}
.yuva .kart { width: 100%; box-shadow: none; }
.eslestir-satir.dogru { border-color: var(--dogru); background: var(--dogru-zemin); }
.eslestir-satir.yanlis { border-color: var(--yanlis); background: var(--yanlis-zemin); }
.duzeltme { grid-column: 1 / -1; color: var(--dogru); font-weight: 800; font-size: .9em; display: flex; gap: .3rem; align-items: center; }
.eslestir-izgara .havuz { position: sticky; top: .75rem; }
@media (max-width: 720px) {
  .eslestir-izgara { grid-template-columns: 1fr; }
  .eslestir-izgara .havuz { position: static; order: -1; }
}

/* Gruplama, kanıt, Venn */
.grup-alan, .kanit-alan, .venn-alan, .zincir-alan, .harita-alan, .bosluk-alan { display: grid; gap: 1rem; }
.grup-kutular { display: grid; grid-template-columns: repeat(var(--sutun, 2), minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 720px) { .grup-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .grup-kutular { grid-template-columns: 1fr; } }
.grup-kutu { background: #fff; border: 2px solid var(--kart-kenar); border-radius: var(--r-buyuk); padding: .7rem; min-height: 9rem; display: grid; align-content: start; gap: .5rem; }
.grup-kutu h3 { margin: 0; font-size: 1em; text-align: center; background: var(--lacivert); color: #fff; border-radius: var(--r-kucuk); padding: .4rem .5rem; }
.grup-icerik { display: flex; flex-wrap: wrap; gap: .4rem; align-content: flex-start; min-height: 3rem; }
.guc-guclu h3 { background: var(--dogru); }
.guc-orta h3 { background: var(--mavi); }
.guc-zayif h3 { background: var(--kehribar); color: var(--lacivert); }
.guc-ilgisiz h3 { background: #7a8ca5; }
.iddia { background: var(--lacivert); color: #fff; border-radius: var(--r-buyuk); padding: 1rem 1.2rem; display: grid; gap: .2rem; font-size: 1.15em; }
.iddia-etiket { color: var(--kehribar); font-weight: 900; font-size: .78em; letter-spacing: .04em; }
.kanit-kart { max-width: 34ch; text-align: left; align-items: flex-start; }
.gerekce-alan textarea { font-size: 1em; }

.venn-sema { position: relative; display: grid; grid-template-columns: 1fr .7fr 1fr; aspect-ratio: 16 / 10; margin-inline: auto; width: min(100%, 860px); isolation: isolate; }
.venn-daire { position: absolute; top: 0; height: 100%; aspect-ratio: 1; border-radius: 50%; z-index: -1; }
.venn-a { left: 0; background: rgba(10, 127, 219, .14); border: 3px solid var(--mavi); }
.venn-b { right: 0; background: rgba(254, 179, 35, .18); border: 3px solid var(--kehribar); }
.venn-bolge { padding: 16% .8rem 1rem; display: grid; align-content: start; justify-items: center; gap: .5rem; border-radius: 40px; }
.venn-bolge.venn-orta { padding-top: 22%; }
.venn-bolge h3 { margin: 0; font-size: .95em; text-align: center; }
.venn-orta h3 { color: var(--kehribar-koyu); }
.venn-icerik { display: flex; flex-direction: column; gap: .35rem; align-items: center; width: 100%; }
.venn-icerik .kart { max-width: 100%; }
.venn-disari { background: #fff; border: 2px dashed var(--kenar-koyu); border-radius: var(--r-buyuk); padding: .7rem; }
.venn-disari h3 { margin: 0 0 .4rem; font-size: .95em; }
@media (max-width: 640px) {
  .venn-sema { grid-template-columns: 1fr; aspect-ratio: auto; gap: .6rem; }
  .venn-bolge, .venn-bolge.venn-orta { padding: .9rem .8rem; }
  .venn-daire { display: none; }
  .venn-bolge { border: 3px solid var(--mavi); background: rgba(10, 127, 219, .08); border-radius: var(--r-buyuk); }
  .venn-orta { border-color: var(--kehribar-koyu); background: rgba(254, 179, 35, .12); }
  .venn-bolge:last-of-type { border-color: var(--kehribar); }
}

/* Sıralama */
.sira-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; max-width: 720px; margin-inline: auto; width: 100%; }
.sira-oge {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .6rem;
  background: #fff; border: 2px solid var(--kart-kenar); border-radius: var(--r); padding: .5rem .6rem; cursor: grab; touch-action: none; user-select: none;
}
.sira-oge .medya { align-items: flex-start; font-weight: 750; }
.sira-oge .medya img { max-height: 80px; }
.sira-oge.secili { border-color: var(--kehribar); box-shadow: 0 0 0 4px rgba(254, 179, 35, .35); }
.sira-oge.suruklenen { opacity: .35; }
.sira-oge.dogru { border-color: var(--dogru); background: var(--dogru-zemin); }
.sira-oge.yanlis { border-color: var(--yanlis); background: var(--yanlis-zemin); }
.sira-oge .kart-duzeltme { grid-column: 3 / -1; }
.sira-no { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--lacivert); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: .9em; }
.tutamak { color: var(--silik); display: grid; }
.sira-dugmeler { display: flex; gap: .2rem; }
.mini-dugme { width: 2.2rem; height: 2.2rem; border-radius: 8px; border: 1px solid var(--kenar); background: #f5f8fc; color: var(--lacivert); display: grid; place-items: center; cursor: pointer; }
.mini-dugme:hover { background: var(--mavi-zemin); }
.sira-liste.kilitli .sira-dugmeler, .sira-liste.kilitli .tutamak { visibility: hidden; }

/* Çark */
.cark-alan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.cark-kap { position: relative; width: min(100%, 460px); margin-inline: auto; }
.cark { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 20px rgba(6, 35, 66, .18)); font-family: var(--oyun-yazi); }
.cark-donen { transform-origin: 0 0; }
.cark-ok { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid var(--lacivert); z-index: 2; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.cark-kontrol { display: grid; gap: .8rem; justify-items: start; }
.cark-cevir { font-size: 1.3em; padding: .9rem 2.6rem; }
.cark-sonuc, .kutu-panel {
  grid-column: 1 / -1; background: #fff; border: 3px solid var(--kehribar); border-radius: var(--r-buyuk);
  padding: 1.25rem; display: grid; gap: .8rem; justify-items: center; text-align: center;
}
.cark-secilen, .kutu-icerik { font-size: 1.5em; font-weight: 850; color: var(--lacivert); }
.cark-cevap { font-size: 1.15em; font-weight: 750; color: var(--dogru); }
@media (max-width: 720px) { .cark-alan { grid-template-columns: 1fr; } .cark-kontrol { justify-items: center; } }

/* Boşluk doldurma */
.bosluk-metin { background: #fff; border: 1px solid var(--kart-kenar); border-radius: var(--r-buyuk); padding: 1.25rem 1.4rem; font-size: 1.15em; line-height: 2.5; font-weight: 600; }
.bosluk-yuva {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-direction: column;
  min-width: 7rem; min-height: 2.4rem; margin: 0 .2rem; border: 2px dashed var(--kenar-koyu); border-radius: 999px; background: #f6f9fc; line-height: 1.2; padding: 1px 3px;
}
.bosluk-yuva.dogru { border-color: var(--dogru); border-style: solid; background: var(--dogru-zemin); }
.bosluk-yuva.yanlis { border-color: var(--yanlis); border-style: solid; background: var(--yanlis-zemin); }
.kelime-havuzu { justify-content: center; }

/* Doğru-yanlış, hafıza */
.hafiza-kart {
  display: grid; width: min(100%, 560px); aspect-ratio: 16 / 10; margin: 0 auto; border: 0; padding: 0; cursor: pointer;
  background: transparent; perspective: 1400px; font: inherit;
}
.hafiza-yuz {
  grid-area: 1 / 1; display: grid; place-items: center; border-radius: 22px; padding: 1.5rem; text-align: center;
  font-size: 1.5em; font-weight: 850; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3, .8, .3, 1);
  border: 2px solid var(--kart-kenar);
}
.hafiza-yuz.on { background: #fff; color: var(--lacivert); }
.hafiza-yuz.arka { background: var(--lacivert); color: #fff; transform: rotateY(180deg); }
.hafiza-yuz.arka small { display: block; font-size: .55em; color: #b9cbe3; margin-top: .5rem; }
.hafiza-kart.cevrildi .on { transform: rotateY(-180deg); }
.hafiza-kart.cevrildi .arka { transform: rotateY(0); }
.hafiza-dugmeler { justify-content: center; margin-top: 1rem; }

/* Kelime avı */
.avi-alan { display: grid; grid-template-columns: auto minmax(200px, 1fr); gap: 1.5rem; align-items: start; }
.avi-izgara { display: grid; gap: 3px; user-select: none; touch-action: none; }
.avi-satir { display: grid; grid-template-columns: repeat(var(--boyut), 1fr); gap: 3px; }
.avi-hucre {
  width: clamp(1.7rem, calc((100vw - 60px) / var(--boyut)), 2.6rem); aspect-ratio: 1; font: inherit; font-weight: 850; font-size: clamp(.8rem, 2.4vw, 1.15rem);
  border: 1px solid var(--kenar); background: #fff; border-radius: 6px; color: var(--lacivert); cursor: pointer; padding: 0;
}
.oyun.tahta .avi-hucre { width: clamp(1.7rem, calc((100vw - 120px) / var(--boyut)), 3.4rem); font-size: 1.5rem; }
.avi-hucre.onizleme, .avi-hucre.baslangic { background: var(--kehribar); }
.avi-hucre.bulundu { color: #fff; border-color: transparent; }
.avi-hucre.renk0 { background: #0579e0; } .avi-hucre.renk1 { background: #13804f; } .avi-hucre.renk2 { background: #6a4fc9; }
.avi-hucre.renk3 { background: #c2362f; } .avi-hucre.renk4 { background: #0d3462; } .avi-hucre.renk5 { background: #b86b00; }
.avi-hucre.kacan { background: var(--yanlis-zemin); outline: 2px solid var(--yanlis); }
.avi-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.avi-liste li { background: #fff; border: 1px solid var(--kenar); border-radius: var(--r-kucuk); padding: .35rem .6rem; font-weight: 750; }
.avi-liste li.bulundu { text-decoration: line-through; color: var(--silik); background: var(--dogru-zemin); }
.avi-yan h3 { margin-top: 0; }
@media (max-width: 760px) { .avi-alan { grid-template-columns: 1fr; justify-items: center; } }

.titre { animation: titre .35s; }
@keyframes titre { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

/* Çapraz bulmaca */
.bulmaca-alan { display: grid; grid-template-columns: minmax(0, auto) minmax(240px, 1fr); gap: 1.5rem; align-items: start; }
.bulmaca-kap { overflow-x: auto; padding-bottom: .5rem; }
.bulmaca-izgara { display: grid; grid-template-columns: repeat(var(--sutun), 2.4rem); grid-auto-rows: 2.4rem; gap: 2px; }
.oyun.tahta .bulmaca-izgara { grid-template-columns: repeat(var(--sutun), 3.1rem); grid-auto-rows: 3.1rem; }
.bulmaca-hucre { position: relative; background: #fff; border: 2px solid var(--lacivert); border-radius: 4px; }
.bulmaca-hucre input {
  width: 100%; height: 100%; border: 0; padding: 0; text-align: center; font: inherit; font-weight: 900; font-size: 1.15em;
  text-transform: uppercase; background: transparent; color: var(--lacivert); border-radius: 0;
}
.bulmaca-hucre input:focus { background: var(--kehribar-zemin); box-shadow: none; outline: 0; }
.bulmaca-hucre.aktif-soz { background: var(--mavi-zemin); }
.bulmaca-hucre.dogru { background: var(--dogru-zemin); border-color: var(--dogru); }
.bulmaca-hucre.yanlis { background: var(--yanlis-zemin); border-color: var(--yanlis); }
.bulmaca-hucre.yanlis::after { content: attr(data-dogru); position: absolute; right: 2px; bottom: 0; font-size: .6em; font-weight: 900; color: var(--dogru); }
.bulmaca-no { position: absolute; left: 2px; top: 0; font-size: .58em; font-weight: 900; color: var(--soluk); pointer-events: none; }
.bulmaca-bos { display: block; }
.bulmaca-ipuclari { display: grid; gap: 1rem; }
.bulmaca-ipuclari h3 { margin: 0 0 .35rem; font-size: 1em; }
.bulmaca-ipuclari ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.ipucu-dugme { font: inherit; text-align: left; background: #fff; border: 1px solid var(--kenar); border-radius: var(--r-kucuk); padding: .4rem .6rem; cursor: pointer; width: 100%; display: flex; gap: .3rem; align-items: center; color: var(--metin); font-weight: 650; }
.bulmaca-ipuclari li.aktif .ipucu-dugme { border-color: var(--kehribar); background: var(--kehribar-zemin); }
.ipucu-dugme .medya { flex-direction: row; }
.ipucu-dugme .medya img { max-height: 48px; }
@media (max-width: 860px) { .bulmaca-alan { grid-template-columns: 1fr; } }

/* Harf dizme */
.harf-yuvalar, .harf-havuz { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin: 1rem 0; }
.harf-yuva {
  width: 3rem; height: 3.4rem; border-bottom: 4px solid var(--lacivert); display: grid; place-items: center;
  font-size: 1.6em; font-weight: 900; color: var(--lacivert); border-radius: 6px 6px 0 0; background: #fff;
}
.harf-bosluk { width: 1.2rem; }
.harf-yuvalar.dogru .harf-yuva { border-color: var(--dogru); background: var(--dogru-zemin); }
.harf-yuvalar.yanlis .harf-yuva { border-color: var(--yanlis); }
.harf-tas {
  width: 3rem; height: 3.2rem; font: inherit; font-size: 1.5em; font-weight: 900; color: var(--lacivert); cursor: pointer;
  background: var(--kehribar); border: 0; border-radius: 10px; box-shadow: 0 4px 0 #c98700;
}
.harf-yuva .harf-tas { width: 100%; height: 100%; box-shadow: none; background: transparent; }
.harf-tas:active { transform: translateY(2px); box-shadow: 0 2px 0 #c98700; }

/* Sürpriz kutu */
.kutu-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .75rem; }
.surpriz {
  aspect-ratio: 1; border: 0; border-radius: 16px; font: inherit; font-size: 1.8em; font-weight: 900; color: #fff; cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .18); transition: transform .12s;
}
.surpriz:hover { transform: translateY(-3px); }
.surpriz.renk0 { background: var(--mavi); } .surpriz.renk1 { background: var(--kehribar); color: var(--lacivert); } .surpriz.renk2 { background: var(--lacivert-2); }
.surpriz.renk3 { background: #13804f; } .surpriz.renk4 { background: #6a4fc9; } .surpriz.renk5 { background: #c2362f; }
.surpriz.acildi { background: #dde5ef; color: var(--silik); box-shadow: none; transform: none; cursor: default; }

/* Dikte */
.dikte-alan { display: grid; gap: 1rem; justify-items: center; max-width: 620px; margin: 0 auto; }
.dikte-dinle { font-size: 1.3em; padding: 1rem 2.2rem; }
.dikte-ipucu { color: var(--soluk); font-weight: 700; margin: 0; }
.dikte-form { display: flex; gap: .5rem; width: 100%; }
.dikte-girdi { font-size: 1.4em !important; font-weight: 800 !important; text-align: center; }
.dikte-sonuc { max-width: 620px; margin: 1rem auto 0; }

/* Görsel şablonlar */
.gorsel-alan { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.gorsel-alan.tek { grid-template-columns: 1fr; }
@media (max-width: 760px) { .gorsel-alan { grid-template-columns: 1fr; } }
.gorsel-kap { position: relative; display: block; width: 100%; line-height: 0; border-radius: var(--r); overflow: visible; background: #fff; border: 1px solid var(--kart-kenar); }
.gorsel-kap > img { width: 100%; height: auto; border-radius: var(--r); user-select: none; -webkit-user-drag: none; }
.isaretci { position: absolute; transform: translate(-50%, -50%); line-height: 1.2; z-index: 2; }
.isaretci-no {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--kehribar); color: var(--lacivert); font-weight: 900; font-size: .85rem; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
button.isaretci { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.isaretci.aktif .isaretci-no { background: var(--mavi); color: #fff; transform: scale(1.15); }
.isaretci.dogru .isaretci-no { background: var(--dogru); color: #fff; }
.isaretci.yanlis .isaretci-no { background: var(--yanlis); color: #fff; }
.etiket-hedef { display: flex; align-items: center; gap: .3rem; }
.etiket-hedef .etiket-yuvasi {
  position: absolute; left: calc(100% + .2rem); top: 50%; transform: translateY(-50%);
  min-width: 5.5rem; min-height: 2rem; border: 2px dashed var(--kenar-koyu); border-radius: 999px; background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 1px 3px; white-space: nowrap;
}
.etiket-hedef.sola .etiket-yuvasi { left: auto; right: calc(100% + .2rem); }
.etiket-hedef.dogru .etiket-yuvasi { border: 2px solid var(--dogru); background: var(--dogru-zemin); }
.etiket-hedef.yanlis .etiket-yuvasi { border: 2px solid var(--yanlis); background: var(--yanlis-zemin); }
.etiket-yuvasi .kelime { font-size: .85em; padding: .2rem .5rem; }
.konum-soru { text-align: center; font-size: 1.4em; font-weight: 800; color: var(--lacivert); margin-bottom: .8rem; }
.konum-soru strong { color: var(--mavi-koyu); }
.konum-kap { cursor: crosshair; }
.konum-kap:focus-visible { outline: 4px solid var(--kehribar); }
.konum-isaret { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); z-index: 3; }
.konum-isaret.dogru { background: var(--dogru); }
.konum-isaret.yanlis { background: var(--yanlis); }
.konum-dogru { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 3px dashed var(--dogru); background: rgba(19, 128, 79, .15); z-index: 2; line-height: 1.2; }
.konum-dogru span { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); background: var(--dogru); color: #fff; font-weight: 800; font-size: .8rem; padding: .1rem .45rem; border-radius: 6px; white-space: nowrap; }
.konum-imlec { position: absolute; width: 28px; height: 28px; transform: translate(-50%, -50%); border: 3px solid var(--kehribar); border-radius: 50%; z-index: 3; box-shadow: 0 0 0 2px #fff; }
.eser-panel { background: #fff; border: 1px solid var(--kart-kenar); border-radius: var(--r-buyuk); padding: 1rem 1.1rem; display: grid; gap: .7rem; }
.eser-panel h3 { margin: 0; }
.diyagram-liste { padding-left: 0; list-style: none; display: grid; gap: .5rem; margin: 0; }
.diyagram-liste li { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .4rem; }
.diyagram-liste li.dogru input { border-color: var(--dogru); background: var(--dogru-zemin); }
.diyagram-liste li.yanlis input { border-color: var(--yanlis); background: var(--yanlis-zemin); }
.diyagram-liste .kart-duzeltme { grid-column: 2; }
.diyagram-liste label { font-weight: 900; }
.diyagram-yan h3 { margin-top: 0; }

/* Zaman çizelgesi */
.zaman-kaydir { overflow-x: auto; padding: .5rem 0 1rem; }
.zaman-serit { position: relative; min-width: 640px; padding-top: calc(var(--satir-sayisi, 1) * 3.4rem + .5rem); }
.zaman-eksen { position: relative; height: 3.4rem; border-top: 4px solid var(--lacivert); margin-inline: 1.5rem; }
.zaman-cizgi { position: absolute; top: -4px; width: 2px; height: 12px; background: var(--lacivert); }
.zaman-cizgi span { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-size: .78em; font-weight: 800; color: var(--soluk); white-space: nowrap; }
.zaman-imlec { position: absolute; top: -16px; width: 4px; height: 26px; background: var(--kehribar); transform: translateX(-50%); font-size: .75em; font-weight: 900; }
.zaman-kart { position: absolute; bottom: calc(3.4rem + var(--satir, 0) * 3.4rem + .3rem); transform: translateX(-50%); max-width: 11rem; font-size: .85em; padding: .35rem .55rem; margin-inline: 1.5rem; }
.havuz .zaman-kart { position: relative; bottom: auto; transform: none; margin: 0; left: auto !important; }
.zaman-kart::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 2px; height: 8px; background: var(--lacivert); }
.havuz .zaman-kart::after { display: none; }
.zaman-dogru { position: absolute; top: -10px; width: 14px; height: 14px; border-radius: 50%; transform: translateX(-50%); border: 3px solid #fff; }
.zaman-dogru.dogru { background: var(--dogru); }
.zaman-dogru.yanlis { background: var(--yanlis); }

/* Hatayı bul */
.hata-bilgi { text-align: center; font-weight: 800; color: var(--kehribar-koyu); margin: 0; }
.adim-liste { display: grid; gap: .5rem; padding-left: 1.6rem; margin: 0; max-width: 760px; margin-inline: auto; width: 100%; font-weight: 800; color: var(--lacivert); }
.adim-liste li { padding-left: .3rem; }
.adim {
  width: 100%; font: inherit; font-weight: 700; text-align: left; background: #fff; color: var(--metin); cursor: pointer;
  border: 2px solid var(--kart-kenar); border-radius: var(--r); padding: .7rem .9rem;
}
.adim:hover:not([disabled]) { border-color: var(--mavi-acik); }
.adim.secili { border-color: var(--kehribar); background: var(--kehribar-zemin); }
.adim.dogru { border-color: var(--dogru); background: var(--dogru-zemin); }
.adim.yanlis { border-color: var(--yanlis); background: var(--yanlis-zemin); }
.adim.kacan { border-color: var(--yanlis); border-style: dashed; }
.adim-metin { white-space: pre-line; font-family: inherit; }
.adim-aciklama { display: grid; gap: .2rem; margin-top: .4rem; font-weight: 650; color: var(--metin); background: #fff; border-left: 4px solid var(--dogru); padding: .4rem .7rem; border-radius: 0 var(--r-kucuk) var(--r-kucuk) 0; }
.duzelt-alan { margin-top: .4rem; font-weight: 700; }
.duzelt-alan.dogru input { border-color: var(--dogru); }
.duzelt-alan.yanlis input { border-color: var(--yanlis); }

/* Tahmin-gözle-açıkla */
.tga-adimlar { list-style: none; padding: 0; margin: 0 auto 1rem; display: flex; gap: .4rem; justify-content: center; counter-reset: tga; }
.tga-adimlar li { counter-increment: tga; font-weight: 800; color: var(--silik); background: #fff; border: 2px solid var(--kenar); border-radius: 999px; padding: .3rem .8rem; }
.tga-adimlar li::before { content: counter(tga) ". "; }
.tga-adimlar li.aktif { border-color: var(--kehribar); color: var(--lacivert); background: var(--kehribar-zemin); }
.tga-adimlar li.tamam { border-color: var(--dogru); color: var(--dogru); }
.tga-govde { display: grid; gap: .8rem; max-width: 760px; margin: 1rem auto 0; }
.tga-govde h3 { margin: 0; }
.guven { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-weight: 750; color: var(--soluk); }
.guven .cip {
  background: #fff !important; color: #123f6b !important; border-color: #8fb8df !important;
  min-height: 44px; opacity: 1 !important;
}
.guven .cip:hover { background: #edf6ff !important; border-color: #287bc1 !important; }
.guven .cip.secili,
.guven .cip[aria-checked="true"] {
  background: #0b5fa5 !important; color: #fff !important; border-color: #0b5fa5 !important;
  box-shadow: 0 3px 0 rgba(3, 40, 77, .2);
}
.guven .cip.secili:hover,
.guven .cip[aria-checked="true"]:hover { background: #084b83 !important; border-color: #084b83 !important; }
.tga-gozlem { background: #fff; border: 3px solid var(--mavi); border-radius: var(--r-buyuk); padding: 1rem; text-align: center; font-weight: 750; }
.tga-ogretmen { background: var(--mavi-zemin); border-radius: var(--r); padding: .8rem 1rem; }
.tga-ogretmen p { margin: .3rem 0 0; }

/* Neden-sonuç zinciri */
.zincir { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 0; justify-items: center; width: min(100%, 560px); }
.zincir-halka { width: 100%; min-height: 3.4rem; border-radius: var(--r); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: .3rem; }
.zincir-halka.sabit { background: var(--lacivert); color: #fff; font-weight: 850; padding: .8rem 1rem; }
.zincir-halka.yuva { border: 2px dashed var(--kenar-koyu); background: #f6f9fc; }
.zincir-halka.yuva .kart { width: 100%; }
.zincir-halka.dogru { border: 2px solid var(--dogru); background: var(--dogru-zemin); }
.zincir-halka.yanlis { border: 2px solid var(--yanlis); background: var(--yanlis-zemin); }
.zincir-ok { color: var(--kehribar-koyu); font-weight: 850; font-size: .85em; display: grid; justify-items: center; padding: .15rem 0; }
.zincir-ok::before { content: ""; width: 3px; height: 14px; background: var(--kehribar); }
.zincir-ok::after { content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid var(--kehribar); }

/* Kavram haritası */
.harita-kaydir { overflow-x: auto; }
.harita-tuval { position: relative; width: 100%; min-width: 580px; aspect-ratio: 16 / 10; background: #fff; border: 1px solid var(--kart-kenar); border-radius: var(--r-buyuk); color: var(--lacivert-2); }
.harita-cizgiler { position: absolute; inset: 0; width: 100%; height: 100%; }
.harita-cizgiler line { stroke: currentColor; stroke-width: 2.5; }
.harita-kavram {
  position: absolute; transform: translate(-50%, -50%); background: var(--lacivert); color: #fff; font-weight: 850;
  border-radius: 999px; padding: .5rem 1rem; max-width: 12rem; text-align: center; z-index: 2; line-height: 1.25;
}
.harita-kavram.yuva { background: #f6f9fc; border: 2px dashed var(--lacivert); min-width: 7rem; min-height: 2.6rem; padding: .2rem; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.harita-bag {
  position: absolute; transform: translate(-50%, -50%); background: #fff; color: var(--kehribar-koyu); font-weight: 800; font-size: .88em;
  border: 2px solid var(--kehribar); border-radius: 8px; padding: .15rem .5rem; z-index: 2; white-space: nowrap;
}
.harita-bag.yuva { border-style: dashed; min-width: 6rem; min-height: 2.1rem; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: .1rem; }
.harita-tuval .yuva.dogru { border-style: solid; border-color: var(--dogru); background: var(--dogru-zemin); }
.harita-tuval .yuva.yanlis { border-style: solid; border-color: var(--yanlis); background: var(--yanlis-zemin); }
.harita-tuval .kelime { font-size: .85em; padding: .2rem .55rem; }

/* Karar matrisi */
table.matris { width: 100%; border-collapse: collapse; background: #fff; }
.matris th, .matris td { border: 1px solid var(--kenar); padding: .5rem .6rem; text-align: center; }
.matris thead th { background: var(--lacivert); color: #fff; font-weight: 800; }
.matris thead th small { color: var(--kehribar); font-weight: 900; }
.matris tbody th { text-align: left; font-weight: 800; color: var(--lacivert); background: #f7f9fc; }
.matris select { width: auto; min-width: 4rem; text-align: center; }
.matris-toplam { font-weight: 900; font-size: 1.1em; }
.matris-toplam.en-yuksek { background: var(--kehribar-zemin); color: var(--kehribar-koyu); }

/* Metin anlama */
.okuma-alan { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.okuma-metin { background: #fff; border: 1px solid var(--kart-kenar); border-radius: var(--r-buyuk); padding: 1.25rem 1.4rem; line-height: 1.75; font-size: 1.05em; max-height: 75vh; overflow: auto; }
.okuma-metin h2 { margin-top: 0; }
.okuma-panel { display: grid; gap: .75rem; position: sticky; top: .75rem; }
.okuma-panel h3 { margin: 0; }
.cumle { border-radius: 4px; transition: background .12s; }
.secim-modu .cumle { cursor: pointer; background: rgba(10, 127, 219, .06); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.secim-modu .cumle:hover { background: rgba(10, 127, 219, .16); }
.cumle.secili { background: var(--kehribar-zemin) !important; box-shadow: inset 0 -3px 0 var(--kehribar); }
.cumle.kanit-dogru { background: var(--dogru-zemin); box-shadow: inset 0 -3px 0 var(--dogru); }
.cumle.kanit-yanlis { background: var(--yanlis-zemin); box-shadow: inset 0 -3px 0 var(--yanlis); }
.kanit-ipucu { font-weight: 800; color: var(--kehribar-koyu); margin: 0; }
@media (max-width: 800px) { .okuma-alan { grid-template-columns: 1fr; } .okuma-panel { position: static; } .okuma-metin { max-height: none; } }

/* Dil bilgisi */
.dil-cumleler { display: grid; gap: .8rem; max-width: 820px; margin: 0 auto; width: 100%; padding-left: 1.6rem; font-size: 1.15em; line-height: 2.3; font-weight: 600; }
.dil-cumle { padding-left: .3rem; }
.dil-dugme { font: inherit; background: none; border: 0; border-bottom: 2px dotted var(--kenar-koyu); padding: .05rem .2rem; margin: 0 -.05rem; border-radius: 6px 6px 0 0; cursor: pointer; color: var(--metin); }
.dil-dugme:hover:not([disabled]) { background: var(--mavi-zemin); }
.dil-dugme.secili { background: var(--kehribar-zemin); box-shadow: inset 0 -3px 0 var(--kehribar); }
.dil-dugme.dogru { background: var(--dogru-zemin); box-shadow: inset 0 -3px 0 var(--dogru); }
.dil-dugme.yanlis { background: var(--yanlis-zemin); box-shadow: inset 0 -3px 0 var(--yanlis); }
.dil-dugme.kacan { box-shadow: inset 0 -3px 0 var(--yanlis); text-decoration: underline dashed var(--yanlis); }
.dil-dugme[disabled] { cursor: default; color: var(--metin); }
.dil-hedef { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; line-height: 1.3; margin: 0 .15rem; padding: .1rem .3rem; border-radius: 8px; background: var(--mavi-zemin); }
.dil-soz { font-weight: 850; color: var(--lacivert); }
.dil-hedef select { font-size: .72em; padding: .1rem .3rem; width: auto; }
.dil-hedef.dogru { background: var(--dogru-zemin); }
.dil-hedef.yanlis { background: var(--yanlis-zemin); }

/* ================= Önizleme çerçevesi (stüdyo) ================= */
.onizleme-kap .oyun { min-height: 520px; border-radius: var(--r-buyuk); overflow: hidden; border: 1px solid var(--kenar); }

/* ================= Çalışma kâğıdı çıktısı ================= */
.calisma-kagidi { background: #fff; color: #000; max-width: 800px; margin: 0 auto; padding: 2rem 2.2rem; border: 1px solid var(--kenar); border-radius: var(--r); font-size: 15px; }
.kagit-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px solid #000; padding-bottom: .6rem; margin-bottom: 1rem; }
.kagit-ust h1 { font-size: 1.4rem; margin: 0; color: #000; }
.kagit-ust .kagit-meta { font-size: .85rem; color: #333; }
.kagit-ust img { height: 34px; width: auto; }
.kagit-bilgi { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; margin-bottom: 1rem; font-weight: 700; }
.kagit-bilgi span { border-bottom: 1px solid #000; padding-bottom: .15rem; }
.kagit-anahtar-baslik { color: var(--yanlis); font-weight: 900; }
.calisma-kagidi .medya { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; }
.calisma-kagidi .medya img { max-height: 90px; }
.calisma-kagidi .ses-dugme { display: none; }
.yazdir-yonerge { font-weight: 800; margin-bottom: .8rem; }
.yazdir-test { display: grid; gap: .8rem; padding-left: 1.4rem; }
.yazdir-secenekler { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1rem; }
.yazdir-secenekler.yatay { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.yazdir-secenekler li { display: flex; gap: .35rem; align-items: center; }
.kutucuk { font-weight: 800; }
.anahtar, .anahtar td { font-weight: 900; color: #0a6b3d; }
li.anahtar .kutucuk { background: #0a6b3d; color: #fff; border-radius: 50%; padding: 0 .3rem; }
.yazdir-eslestir { width: 100%; border-collapse: collapse; }
.yazdir-eslestir td { padding: .45rem .3rem; vertical-align: middle; }
.yazdir-eslestir .no, .yazdir-eslestir .harf { font-weight: 900; width: 2rem; }
.cevap-cizgi { display: inline-block; min-width: 3rem; border-bottom: 1px solid #000; text-align: center; font-weight: 900; color: #0a6b3d; }
.cevap-cizgi.uzun { min-width: 14rem; }
.yazdir-bankasi { display: flex; flex-wrap: wrap; gap: .4rem .6rem; border: 2px solid #000; border-radius: 8px; padding: .6rem; margin-bottom: 1rem; }
.yazdir-bankasi span { border: 1px solid #666; border-radius: 999px; padding: .1rem .6rem; }
.yazdir-gruplar, .yazdir-tablo, .yazdir-hafiza { width: 100%; border-collapse: collapse; }
.yazdir-gruplar th, .yazdir-gruplar td, .yazdir-tablo th, .yazdir-tablo td, .yazdir-hafiza td { border: 1px solid #000; padding: .45rem; }
.yazdir-gruplar th, .yazdir-tablo th { background: #eee; }
.yazma-hucre { height: 2.2rem; }
.yazdir-tablo td.orta { text-align: center; }
.yazdir-hafiza td { width: 50%; height: 4.5rem; text-align: center; }
.yazdir-sira, .yazdir-liste { display: grid; gap: .5rem; padding-left: 1.4rem; }
.yazdir-sira { list-style: none; padding-left: 0; }
.yazdir-sira li { display: flex; gap: .7rem; align-items: center; }
.numara-kutu { width: 2rem; height: 2rem; border: 2px solid #000; display: grid; place-items: center; font-weight: 900; color: #0a6b3d; flex: none; }
.yazdir-kesme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.yazdir-kesme div { border: 1px dashed #000; min-height: 5rem; display: grid; place-items: center; padding: .5rem; text-align: center; }
.yazdir-bosluk-metin { line-height: 2.4; }
.yazdir-bosluk { display: inline-block; min-width: 7rem; border-bottom: 1px solid #000; text-align: center; font-weight: 900; color: #0a6b3d; }
.yazdir-dy { display: grid; gap: .6rem; padding-left: 1.4rem; }
.yazdir-dy li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.dy-kutular { display: flex; gap: .6rem; font-weight: 900; }
.dy-kutular span { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid #999; }
.dy-kutular span.daire { border: 3px solid #0a6b3d; color: #0a6b3d; }
.yazdir-avi { border-collapse: collapse; margin: 0 auto 1rem; }
.yazdir-avi td { width: 1.9rem; height: 1.9rem; border: 1px solid #999; text-align: center; font-weight: 800; }
.yazdir-avi td.anahtar { background: #cfeedd; }
.yazdir-bulmaca { border-collapse: collapse; margin: 0 auto 1rem; }
.yazdir-bulmaca td { width: 2rem; height: 2rem; text-align: center; font-weight: 900; position: relative; color: #0a6b3d; }
.yazdir-bulmaca td.harf { border: 1.5px solid #000; }
.yazdir-bulmaca sup { position: absolute; left: 2px; top: 1px; font-size: .6rem; color: #000; }
.yazdir-harf { display: grid; gap: .8rem; padding-left: 1.4rem; }
.yazdir-harf li { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.karisik { font-weight: 900; letter-spacing: .15em; }
.yazdir-dikte { display: grid; gap: 1.2rem; padding-left: 1.6rem; }
.yazdir-gorsel { max-width: 560px; margin: 0 auto 1rem; }
.yazma-alani { border: 1px solid #000; border-radius: 6px; min-height: 3rem; padding: .35rem .5rem; margin: .4rem 0 .8rem; color: #444; font-size: .9rem; }
.yazma-alani.buyuk { min-height: 6rem; }
.yazdir-iddia { border: 2px solid #000; padding: .6rem; border-radius: 8px; }
.yazdir-adimlar { display: grid; gap: .4rem; padding-left: 1.6rem; }
.yazdir-adimlar li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.yazdir-adimlar .cevap-cizgi { flex: 1; min-width: 8rem; }
.yazdir-zincir { list-style: none; padding: 0; display: grid; gap: .2rem; justify-items: center; }
.yazdir-zincir .sabit { border: 2px solid #000; padding: .5rem 1rem; font-weight: 800; }
.yazdir-zincir .ok { font-size: .85rem; color: #555; }
.yazma-kutu { border: 1.5px dashed #000; min-height: 2.6rem; width: min(100%, 420px); display: grid; place-items: center; font-weight: 800; color: #0a6b3d; }
.yazdir-harita { min-width: 0; color: #000; }
.yazdir-harita .harita-kavram { background: #fff; color: #000; border: 2px solid #000; }
.yazdir-harita .harita-bag { color: #000; border-color: #000; }
.yazdir-okuma p { line-height: 1.7; }
.anahtar-cizgi { text-decoration: underline 3px #0a6b3d; }
.yazdir-dil { display: grid; gap: .9rem; padding-left: 1.6rem; line-height: 2.2; }
.alti-cizili { text-decoration: underline 2px; }
.alti-cizili sub { font-size: .7rem; color: #0a6b3d; }
.yazdir-eksen-kap { padding: 1.5rem 1rem 2.5rem; }
.yazdir-eksen { margin: 0; }
.yazdir-liste.harfli { list-style: lower-alpha; }
.yazdir-venn { min-height: 260px; margin-bottom: 1rem; }
.yazdir-venn .venn-a, .yazdir-venn .venn-b { background: transparent; border-color: #000; }
.yazdir-venn .venn-bolge div { font-weight: 800; color: #0a6b3d; font-size: .9rem; }

@media print {
  body { background: #fff !important; }
  .calisma-kagidi { border: 0; padding: 0; max-width: none; font-size: 12.5pt; }
  .calisma-kagidi .isaretci-no { box-shadow: none; border-color: #000; }
  .kagit-sayfa-sonu { break-before: page; }
  .yazdir-test > li, .yazdir-dy li, .yazdir-adimlar li { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .hafiza-yuz { transition: none; }
  .titre { animation: none; }
}

/* ================= Oynatma sayfası ================= */
body.oyun-sayfa { background: var(--zemin); min-height: 100vh; }
main.oyun-sayfa-ana { flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.oyun-kok { flex: 1; display: flex; flex-direction: column; }
.sahip-cubugu {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; justify-content: center;
  background: var(--kehribar-zemin); color: #5a3a00; font-weight: 700; font-size: .9rem; padding: .45rem 1rem; border-bottom: 1px solid #f1d38e;
}
.sahip-cubugu a { color: var(--lacivert); font-weight: 850; }
.gomulu-kaynak { text-align: center; font-size: .8rem; margin: 0; padding: .3rem; }
.gomulu-kaynak a { color: var(--soluk); }
body.gomulu main.oyun-sayfa-ana { min-height: 0; }
.coklu-not { margin: .6rem 0 0; font-weight: 800; color: var(--kehribar-koyu); font-size: .95rem; }
.yazdir-test .coklu-not { display: block; margin: .15rem 0 0; font-weight: 700; color: inherit; }

/* İsteğe bağlı görsel giriş sahnesi */
.gorsel-sahne{position:relative;width:min(100%,780px);aspect-ratio:16/9;margin:1rem auto 1.25rem;overflow:hidden;border:1px solid rgba(32,53,75,.16);border-radius:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.sahne-oran-4-3{aspect-ratio:4/3}.sahne-oran-1-1{aspect-ratio:1}.sahne-oran-9-16{width:min(100%,430px);aspect-ratio:9/16}
.sahne-desen-nokta{background-image:radial-gradient(rgba(8,47,91,.12) 1.2px,transparent 1.2px);background-size:20px 20px}.sahne-desen-izgara{background-image:linear-gradient(rgba(8,47,91,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(8,47,91,.08) 1px,transparent 1px);background-size:32px 32px}.sahne-desen-kagit{background-image:repeating-linear-gradient(0deg,rgba(8,47,91,.055) 0 1px,transparent 1px 28px)}.sahne-desen-isik{background-image:radial-gradient(circle at 50% 35%,rgba(255,255,255,.95),transparent 58%)}
.sahne-nesne{position:absolute;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;border:0;padding:0;background:transparent;transform:rotate(var(--sahne-donus,0deg));animation-duration:var(--sahne-sure,800ms);animation-delay:var(--sahne-gecikme,0ms);animation-fill-mode:both;animation-timing-function:var(--sahne-egim,cubic-bezier(.2,.8,.2,1));animation-iteration-count:var(--sahne-tekrar,1)}
.sahne-nesne>img{width:100%;height:100%;border:var(--sahne-kenar-k,0) solid var(--sahne-kenar,#cbd8e4);border-radius:var(--sahne-yuvarlak,16%)}.sahne-golgeli>img{filter:drop-shadow(0 10px 12px rgba(3,40,77,.2))}.sahne-metin{display:grid;place-items:center;width:100%;height:100%;padding:.65rem .8rem;border:var(--sahne-kenar-k,0) solid var(--sahne-kenar,#cbd8e4);border-radius:var(--sahne-yuvarlak,16%);background:var(--sahne-arka,rgba(255,255,255,.9));font-size:clamp(.75rem,var(--sahne-yazi,28px),4rem);font-weight:800;color:var(--sahne-renk,#20354b);line-height:1.2;text-align:center;overflow:hidden}.sahne-golgeli .sahne-metin{box-shadow:0 8px 25px rgba(3,40,77,.15)}.sahne-ucboyut{display:grid;place-items:center;width:100%;height:100%;border:var(--sahne-kenar-k,0) solid var(--sahne-kenar,#cbd8e4);border-radius:var(--sahne-yuvarlak,24%);background:linear-gradient(145deg,#fff7e5 8%,var(--sahne-arka,#ffb525) 55%,#c55e37 100%);box-shadow:-10px 12px 0 #173b5d,0 20px 32px rgba(3,40,77,.25);font-size:clamp(2rem,7vw,5.5rem);color:var(--sahne-renk,#03284d);transform:perspective(600px) rotateX(9deg) rotateY(-13deg)}
.sahne-sekil{display:block;width:100%;height:100%;background:var(--sahne-arka,#2f8ae5);border:var(--sahne-kenar-k,0) solid var(--sahne-kenar,#cbd8e4);border-radius:var(--sahne-yuvarlak,16%)}.sahne-golgeli .sahne-sekil{filter:drop-shadow(0 10px 12px rgba(3,40,77,.2))}.sahne-sekil-daire{border-radius:50%}.sahne-sekil-ucgen{clip-path:polygon(50% 0,100% 100%,0 100%)}.sahne-sekil-yildiz{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 93%,50% 72%,21% 93%,32% 57%,2% 35%,39% 35%)}.sahne-sekil-ok{clip-path:polygon(0 32%,60% 32%,60% 0,100% 50%,60% 100%,60% 68%,0 68%)}.sahne-sekil-cizgi{height:12%;border-radius:999px}.sahne-gizli{display:none}.gorsel-sahne-duzenle .sahne-gizli{display:flex;opacity:.18!important}.sahne-kilitli{cursor:not-allowed!important}
.sahne-anim-belir{animation-name:sahne-belir}.sahne-anim-yukari{animation-name:sahne-yukari}.sahne-anim-asagi{animation-name:sahne-asagi}.sahne-anim-sol{animation-name:sahne-sol}.sahne-anim-sag{animation-name:sahne-sag}.sahne-anim-buyu{animation-name:sahne-buyu}.sahne-anim-zipla{animation-name:sahne-zipla}.sahne-anim-salin{animation-name:sahne-salin;animation-direction:alternate}.sahne-anim-don{animation-name:sahne-don}.sahne-anim-nabiz{animation-name:sahne-nabiz}.sahne-anim-yok{animation:none}
@keyframes sahne-belir{from{opacity:0}to{opacity:1}}@keyframes sahne-yukari{from{opacity:0;translate:0 35px}to{opacity:1;translate:0 0}}@keyframes sahne-asagi{from{opacity:0;translate:0 -35px}to{opacity:1;translate:0 0}}@keyframes sahne-sol{from{opacity:0;translate:-45px 0}to{opacity:1;translate:0 0}}@keyframes sahne-sag{from{opacity:0;translate:45px 0}to{opacity:1;translate:0 0}}@keyframes sahne-buyu{0%{opacity:0;scale:.55}70%{scale:1.08}100%{opacity:1;scale:1}}@keyframes sahne-zipla{0%,100%{translate:0 0}45%{translate:0 -18px}65%{translate:0 3px}}@keyframes sahne-salin{from{translate:0 -5px}to{translate:0 7px}}@keyframes sahne-don{to{rotate:360deg}}@keyframes sahne-nabiz{50%{scale:1.08}}
@media(prefers-reduced-motion:reduce){.sahne-nesne{animation:none!important;transition:none!important}}
@media(max-width:640px){.gorsel-sahne{border-radius:14px;margin:.75rem auto 1rem}.sahne-ucboyut{box-shadow:-5px 7px 0 #173b5d,0 12px 22px rgba(3,40,77,.2)}}