/* carpim.css — Çarpım Koşusu (YARIŞMA anayasası): Steve koşucu + Minecraft zemin + 5sn süre çubuğu +
   seri-sonu ödül. Token'lar var(--…); Minecraft aksanları .carpim'a scope'lu değişkenler.
   Çocuk-güvenliği: geri bildirim + süre çubuğu AMBER/bal/yeşil — var(--sistem-kirmizi) çalışma yüzeyinde ASLA. */

.carpim {
  --mc-elmas: #38b7c9;
  --mc-elmas-acik: #d6f5f2;
  --mc-cim: #57ab41;
  max-width: var(--olcu-max);
  margin: 0 auto;
  padding: var(--bosluk);
}

/* --- Karşılama: seçili karakter görseli + ses metni yan yana. --- */
.carpim-giris-blok { display: flex; align-items: center; gap: .8rem; margin: .5rem 0 1rem; }
.ck-karakter-giris { flex: 0 0 auto; }
.ck-karakter-giris .ck-steve-svg, .ck-karakter-giris .ck-kedi-svg { height: 84px; width: auto; display: block; }
.ck-figur[hidden] { display: none; }

/* --- Karakter seçici (Steve / Kedi) — seçim localStorage'da hatırlanır. --- */
.ck-secim { display: flex; gap: .5rem; justify-content: center; margin: 0 0 1rem; }
.ck-secim-btn {
  min-height: var(--dokunma-min); padding: .4rem 1.1rem;
  font-family: var(--font-baslik); font-size: 1rem; color: var(--metin);
  background: var(--kart); border: 2px solid var(--coral-acik); border-radius: 999px; cursor: pointer;
}
.ck-secim-btn.aktif { background: var(--mc-elmas-acik); border-color: var(--mc-elmas); color: var(--coral-koyu); }
.ck-secim-btn:hover { border-color: var(--coral); }
.ck-secim-btn:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.ck-odul-tas { margin: .6rem 0 .2rem; padding: .7rem; border: 2px solid var(--yesil); border-radius: var(--radius);
  background: var(--kart); color: var(--metin); }
.ck-odul-tas[hidden] { display: none; }
/* Seri sonu sahnesi (kosu-ve-odul-plani §14): taşlar kuleye düşer; kule 3 sütun × 5 sıra, alttan dolar */
.ck-sahne-bas { margin: 0 0 .5rem; font-weight: 700; font-size: 1.05rem; }
.ck-sahne-not { margin: .5rem 0 .2rem; font-size: var(--punto-kucuk); font-weight: 600; }
.ck-sahne-alt { margin: .3rem 0 0; font-size: var(--punto-kucuk); color: var(--metin-soluk); }
.ck-sahne-link { display: inline-block; margin-top: .2rem; font-weight: 700; color: var(--coral-koyu); }
.ck-kule { position: relative; display: flex; flex-wrap: wrap-reverse; width: 7.2rem; margin: .2rem auto; gap: .15rem;
  padding: .2rem; border-bottom: 4px solid var(--yesil); }
.ck-kule-tas { width: 2rem; height: 1.25rem; border: 1px dashed var(--metin-soluk); border-radius: 2px; opacity: .5; }
.ck-kule-tas.dolu { border: 0; opacity: 1; }
.ck-kule-ikon { display: block; width: 100%; height: 100%; }
.ck-kule-tas.yeni { animation: tas-dus .5s cubic-bezier(.3, 1.5, .55, 1) both; }
.ck-kule-bayrak { position: absolute; top: -1.4rem; left: 50%; transform: translateX(-50%); font-size: 1.3rem; color: var(--coral); }
.ck-depo-yigin { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem; min-height: 1.6rem; }
.ck-depo-tas { width: 1.6rem; height: 1.6rem; }
.ck-depo-tas.yeni { animation: tas-dus .5s cubic-bezier(.3, 1.5, .55, 1) both; }
.ck-yeni-arac { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .6rem 0 .2rem;
  font-weight: 700; font-size: 1.1rem; color: var(--coral-koyu); }
.ck-yeni-arac-ikon { width: 2.6rem; height: 2.6rem; animation: arac-gel .7s ease-out both .6s; }
@keyframes tas-dus { from { opacity: 0; transform: translateY(-2.5rem); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes arac-gel { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }
/* Koşu içinde taş anı: ipucu, "+1 taş!" yazısı, üst bara uçan taş */
.ck-tas-ipucu { margin: .1rem 0 .4rem; text-align: center; font-weight: 700; font-size: var(--punto-kucuk); color: var(--coral-koyu); }
.ck-tas-ipucu[hidden] { display: none; }
.carpim-yuzey { position: relative; }
.ck-tas-pop { position: absolute; top: .4rem; right: .8rem; font-weight: 700; font-size: 1.3rem; color: var(--yesil); opacity: 0; pointer-events: none; }
.ck-tas-pop.goster { animation: tas-pop 1.4s ease-out both; }
@keyframes tas-pop { 0% { opacity: 0; transform: translateY(.6rem) scale(.8); } 20% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1rem); } }
.tas-ucan { position: fixed; z-index: 50; width: 32px; height: 32px; pointer-events: none; transition: transform .85s cubic-bezier(.5, -0.3, .7, 1); }
@media (prefers-reduced-motion: reduce) {
  .ck-kule-tas.yeni, .ck-depo-tas.yeni, .ck-yeni-arac-ikon, .ck-tas-pop.goster { animation: none; opacity: 1; }
}
.ck-mod { display: flex; gap: .5rem; justify-content: center; margin: -.25rem 0 1rem; }
.ck-mod-btn {
  min-height: var(--dokunma-min); padding: .4rem 1.1rem;
  font-family: var(--font-baslik); font-size: 1rem; color: var(--metin);
  background: var(--kart); border: 2px solid var(--coral-acik); border-radius: 999px; cursor: pointer;
}
.ck-mod-btn.aktif { background: var(--mc-elmas-acik); border-color: var(--mc-elmas); color: var(--coral-koyu); }
.ck-mod-btn:hover { border-color: var(--coral); }
.ck-mod-btn:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.ck-ses {
  flex: 1; margin: 0;
  background: var(--mc-elmas-acik);
  color: var(--metin);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  font-size: var(--punto-govde);
  border: 1px solid var(--mc-elmas);
}

/* --- HUD: soru sayacı + süre bankası. --- */
.ck-hud {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  margin: 0 0 .8rem;
}
.ck-hud-oge {
  font-family: var(--font-baslik);
  font-size: 1.05rem;
  color: var(--metin);
  background: var(--kart);
  border: 2px solid var(--coral-acik);
  border-radius: var(--radius);
  padding: .4rem .8rem;
}
.ck-banka { color: var(--coral-koyu); border-color: var(--bal); background: var(--bal-acik); }
.ck-banka.eksi { color: var(--metin-soluk); border-color: var(--amber); background: var(--amber-acik); }

.carpim-ilerleme {
  text-align: center; color: var(--metin-soluk); font-size: var(--punto-kucuk);
  margin: 0 0 1rem; min-height: 1.2em;
}

/* --- Çalışma yüzeyi. --- */
.carpim-yuzey {
  background: var(--kart);
  border: 2px solid var(--coral-acik);
  border-radius: var(--radius);
  padding: 1.4rem 1.2rem;
  box-shadow: var(--golge);
}
.carpim-istem {
  text-align: center; font-size: 2.2rem; min-height: 2.6rem;
  margin: .4rem 0 1rem; color: var(--metin);
}

/* --- Geri bildirim — renk TEK BAŞINA değil (ikon+metin). KIRMIZI YOK. --- */
.carpim-geri {
  margin: .2rem 0 1rem; padding: .8rem .95rem; border-radius: var(--radius);
  font-size: var(--punto-govde); line-height: var(--satir-yuksek); text-align: center;
}
.carpim-geri.dogru { background: rgba(95, 185, 126, .16); border: 1px solid var(--yesil); color: var(--metin); }
.carpim-geri.amber { background: var(--amber-acik); border: 1px solid var(--amber); color: var(--metin); }
.carpim-geri.notr  { background: var(--zemin); border: 1px solid var(--coral-acik); color: var(--metin-soluk); }

/* --- İKİ ŞIK — ≥44px + odak halkası. --- */
.carpim-secenekler {
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; max-width: 22rem; margin: 0 auto;
}
.ck-secenek {
  min-height: var(--dokunma-min);
  padding: .9rem .6rem;
  font-family: var(--font-baslik); font-size: 1.5rem; color: var(--metin);
  background: var(--kart); border: 2px solid var(--coral-acik); border-radius: var(--radius); cursor: pointer;
}
.ck-secenek:hover { background: var(--bal-acik); border-color: var(--coral); }
.ck-secenek:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

.carpim-yonerge {
  text-align: center; color: var(--metin-soluk); font-size: var(--punto-kucuk); margin: 1rem 0 0;
}

/* ============================ KOŞU ŞERİDİ (Steve + Minecraft zemin) ============================ */
.carpim-serit {
  position: relative; height: 104px; margin: .6rem 0 1rem;
  border-radius: var(--radius); overflow: hidden;
  background: #8fd0f0; border: 2px solid var(--mc-elmas);
}
.serit-backdrop { position: absolute; inset: 0; display: flex; width: 200%; will-change: transform; }
.serit-tile { flex: 0 0 50%; height: 100%; }
.mc-svg { display: block; width: 100%; height: 100%; }

/* --- Koşucu = STEVE (ortalı). His katmanları efekt renkleri var(--…). --- */
.serit-steve { position: absolute; left: 50%; margin-left: -33px; bottom: 2px; width: 66px; height: 96px; z-index: 2; }
.figure { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; will-change: transform; }
.ck-steve-svg, .ck-kedi-svg { display: block; height: 92px; width: auto; }

/* Bacak temposu — YALNIZ koşu şeridindeki Steve (karşılama Steve statik). */
.serit-steve .leg-b, .serit-steve .leg-f {
  transform-box: fill-box; transform-origin: 50% 6%; animation: leg-swing .5s ease-in-out infinite;
}
.serit-steve .leg-f { animation-name: leg-swing-ters; }
@keyframes leg-swing      { 0%, 100% { transform: rotate(12deg); }  50% { transform: rotate(-12deg); } }
@keyframes leg-swing-ters { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }

/* Hız çizgileri + parıltı (kıvılcım) — yalnız tepkilerde. */
.speedlines { position: absolute; left: -14px; top: 30%; width: 44px; opacity: 0; z-index: 1; }
.speedlines svg { display: block; width: 100%; height: auto; }
.speedlines line { stroke: var(--bal); stroke-width: 3; stroke-linecap: round; }
.glow { position: absolute; right: -4px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--bal); opacity: 0; z-index: 3; }

/* --- TEPKİLER (spec: erken doğru → FANTASTİK; geç ama süre-içi → HAFİF; yanlış/timeout → TOKEZLE). --- */
/* HAFİF: küçük zıplama. */
.serit-steve.hafif .figure { animation: steve-hop .5s ease-out; }
@keyframes steve-hop { 0% { transform: translateY(0); } 45% { transform: translateY(-12px); } 100% { transform: translateY(0); } }

/* FANTASTİK: yüksek takla + öne fırlama. */
.serit-steve.fantastik .figure { animation: steve-flip .8s cubic-bezier(.3,.9,.4,1); }
@keyframes steve-flip {
  0%   { transform: translate(0, 0) rotate(0); }
  35%  { transform: translate(10px, -34px) rotate(-180deg); }
  70%  { transform: translate(4px, -14px) rotate(-360deg); }
  100% { transform: translate(0, 0) rotate(-360deg); }
}
.serit-steve.fantastik .leg-b, .serit-steve.fantastik .leg-f,
.serit-steve.hafif .leg-b, .serit-steve.hafif .leg-f { animation-duration: .26s; }
.serit-steve.fantastik .speedlines { animation: speed-cizgi .8s ease-out; }
.serit-steve.hafif .speedlines     { animation: speed-cizgi .5s ease-out; }
.serit-steve.fantastik .glow { animation: glow-puls .8s ease; }
.serit-steve.hafif .glow     { animation: glow-puls .5s ease; }
@keyframes speed-cizgi { 0% { opacity: 0; transform: translateX(6px); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateX(-12px); } }
@keyframes glow-puls   { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: .6; } 100% { opacity: 0; transform: scale(1.3); } }

/* TOKEZLE: nazik geri-tılt (ceza-alarm değil; kırmızı yok). */
.serit-steve.tokezle .figure { animation: steve-tokezle .7s ease; }
@keyframes steve-tokezle { 0% { transform: rotate(0) translateX(0); } 30% { transform: rotate(-9deg) translateX(-5px); } 60% { transform: rotate(4deg); } 100% { transform: rotate(0) translateX(0); } }
.serit-steve.tokezle .leg-b, .serit-steve.tokezle .leg-f { animation-play-state: paused; }

/* reduced-motion statik flaş. */
.serit-steve.flash { box-shadow: 0 0 0 3px var(--bal); border-radius: var(--radius); }

/* ============================ SÜRE ÇUBUĞU (5 sn) ============================ */
/* Amber/bal — kırmızı-alarm YOK (çocuk-güvenliği). Azalınca ambere kayar. */
.ck-sure {
  height: 14px; border-radius: 999px; background: var(--zemin);
  border: 1px solid var(--coral-acik); overflow: hidden; margin: 0 0 1rem;
}
.ck-sure-dolu {
  height: 100%; width: 100%; border-radius: 999px;
  background: var(--yesil); transition: width .12s linear;
}
.ck-sure.az .ck-sure-dolu { background: var(--amber); transition: none; }
@media (prefers-reduced-motion: reduce) { .ck-sure-dolu { transition: none; } }

/* ============================ USTALIK HARİTASI (soluk/bal/yeşil; KIRMIZI YOK) ============================ */
.carpim-harita { margin: 1.6rem 0 0; }
.carpim-harita-bas { font-family: var(--font-baslik); color: var(--coral-koyu); font-size: 1.1rem; text-align: center; margin: 0 0 .8rem; }
.carpim-harita-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.carpim-harita-bolge {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .7rem .5rem; border-radius: var(--radius); text-align: center;
  border: 2px solid var(--coral-acik); background: var(--kart);
}
.hb-ikon  { font-size: 1.4rem; line-height: 1; }
.hb-ad    { font-size: var(--punto-kucuk); font-weight: 600; color: var(--metin); }
.hb-durum { font-size: .8rem; color: var(--metin-soluk); }
.carpim-harita-bolge.durum-soluk { border-color: var(--coral-acik); }
.carpim-harita-bolge.durum-soluk .hb-ikon { color: var(--metin-soluk); }
.carpim-harita-bolge.durum-yari  { border-color: var(--bal); background: var(--bal-acik); }
.carpim-harita-bolge.durum-yari  .hb-ikon { color: var(--bal); }
.carpim-harita-bolge.durum-dolu  { border-color: var(--yesil); background: rgba(95, 185, 126, .12); }
.carpim-harita-bolge.durum-dolu  .hb-ikon { color: var(--yesil); }
button.carpim-harita-bolge { font: inherit; color: inherit; cursor: pointer; }
button.carpim-harita-bolge:hover { border-color: var(--coral); }
button.carpim-harita-bolge:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.carpim-harita-bolge.secili { border-color: var(--mc-elmas); box-shadow: 0 0 0 3px var(--mc-elmas-acik); }
.carpim-harita-not { margin: .6rem 0 0; text-align: center; color: var(--metin-soluk); font-size: var(--punto-kucuk); }
@media (max-width: 480px) { .carpim-harita-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================ SERİ-SONU ÖDÜL PANELİ ============================ */
.ck-odul {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(46, 42, 40, .34);
}
.ck-odul[hidden] { display: none; }
.ck-odul-ic {
  background: var(--kart); border: 3px solid var(--mc-elmas);
  border-radius: var(--radius); padding: 1.6rem 1.8rem; text-align: center;
  max-width: 22rem; box-shadow: var(--golge);
  max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); overflow-y: auto;   /* kısa ekranda kutu kendi içinde kayar */
}
.ck-odul-yildiz { display: block; margin: .2rem 0 .6rem; font-size: 2.6rem; letter-spacing: .1em; color: var(--bal); line-height: 1; }
.ck-item-svg { width: 120px; height: 120px; display: block; image-rendering: pixelated; }
.ck-odul-baslik { font-family: var(--font-baslik); color: var(--coral-koyu); font-size: 1.3rem; margin: .2rem 0 .2rem; }
.ck-odul-puan { color: var(--metin); margin: 0 0 1rem; font-size: var(--punto-kucuk); }
.ck-btn {
  min-height: var(--dokunma-min); padding: .7rem 1.4rem;
  font-family: var(--font-baslik); font-size: 1.1rem; color: #fff;
  background: var(--coral); border: none; border-radius: var(--radius); cursor: pointer;
}
.ck-btn:hover { background: var(--coral-koyu); }
.ck-btn:focus-visible { outline: 3px solid var(--bal); outline-offset: 2px; }
.ck-odul.gorunur .ck-odul-ic { animation: odul-buyu .5s ease both; }
@keyframes odul-buyu { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============================ KONU ADIMINA GÖMÜLÜ MOLA ============================ */
.adim-mola-not { color: var(--metin-soluk); font-size: var(--punto-kucuk); margin: .2rem 0 1rem; }
.carpim-adim .carpim-oyun { max-width: none; margin: 0; padding: 0; }

/* ============================ TEST İNŞAAT ŞERİDİ + EV İNŞASI ============================ */
/* Test gövdesi: sol inşaat şeridi + sağ sorular. */
.test-govde { display: flex; gap: 1rem; align-items: flex-start; }
.test-govde .sorular { flex: 1 1 auto; min-width: 0; }
.insa-serit {
  flex: 0 0 auto; width: 140px; position: sticky; top: 6.5rem; align-self: flex-start;
  margin-top: 1.2rem; text-align: center;   /* üst bara yapışmasın: bar (~2.3rem) + ~3 satır boşluk */
}
/* Doğa patikası — SABİT sahne (kaymaz; dikkat dağıtmasın). İki tile dikey doldurur. */
.insa-yol {
  position: relative; height: 240px; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--mc-cim); box-shadow: var(--golge);
}
.insa-zemin { position: absolute; inset: 0; display: flex; flex-direction: column; height: 100%; }
.patika-tile { flex: 1 1 0; min-height: 0; }
.patika-svg { display: block; width: 100%; height: 100%; }
/* Karakter — DAHA BÜYÜK, yolun ortasında, bacaklar yürür. */
.insa-figur { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); }
.insa-figur .ck-steve-svg, .insa-figur .ck-kedi-svg { height: 88px; width: auto; display: block; }
.insa-figur .ck-figur[hidden] { display: none; }
/* Karakter SABİT durur (yürümez); yalnız patika kayar. */
/* Abartılı sevinç: yüksek takla; üzülme: nazik çökme (kırmızı-alarm yok). */
.insa-figur.sevin { animation: insa-sevin .85s cubic-bezier(.3,.9,.4,1); }
.insa-figur.uzul  { animation: insa-uzul .8s ease; }
@keyframes insa-sevin {
  0% { transform: translateX(-50%) translateY(0) rotate(0); }
  35% { transform: translateX(-50%) translateY(-36px) rotate(-180deg); }
  70% { transform: translateX(-50%) translateY(-14px) rotate(-360deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(-360deg); }
}
@keyframes insa-uzul {
  0% { transform: translateX(-50%) translateY(0) rotate(0); }
  40% { transform: translateX(-50%) translateY(6px) rotate(-8deg); }
  70% { transform: translateX(-50%) translateY(6px) rotate(6deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(0); }
}
/* Küpler — Minecraft blok görünümü (aynı renk, dolu); artan/azalan animasyonlu. */
.insa-kupler { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin: .6rem 0 .25rem; min-height: 26px; }
.insa-kup { width: 26px; height: 28px; display: inline-block; line-height: 0; filter: drop-shadow(0 2px 1px rgba(0,0,0,.25)); }
.insa-kup .kup-svg { width: 100%; height: 100%; display: block; }
.insa-kup.kup-ekle { animation: kup-ekle .3s cubic-bezier(.3,1.5,.5,1); }
.insa-kup.kup-cik  { animation: kup-cik .24s ease forwards; }
@keyframes kup-ekle { from { transform: scale(0) rotate(-25deg); } to { transform: scale(1) rotate(0); } }
@keyframes kup-cik  { from { transform: scale(1); opacity: 1; } to { transform: scale(0); opacity: 0; } }
/* "N blok" — küplerin ALTINDA, ikon yok. Kaynak notu: molalardan gelenler. */
.insa-sayac { font-family: var(--font-baslik); color: var(--metin); font-size: 1rem; margin: .1rem 0 .15rem; }
.insa-kaynak { color: var(--coral-koyu); font-size: .78rem; margin: 0; min-height: 1em; }

/* Ev inşası (test sonu) — eşleşen ev blok-blok belirir (kademeli). */
.ev-insa { margin: .8rem 0 1rem; text-align: center; }
.ev-insa-not { font-family: var(--font-baslik); color: var(--coral-koyu); font-size: 1.05rem; margin: 0 0 .6rem; }
.ev-yuva { display: flex; justify-content: center; }
.ev-oge { margin: 0; text-align: center; }
.ev-oge[hidden] { display: none; }
.ev-svg { width: 240px; max-width: 100%; height: auto; image-rendering: pixelated; display: block; }
/* İzometrik yapı sahnesi: gökyüzü kartı, güneş, bulut; yapı ortada ve büyük. */
.ev-oge { position: relative; padding: 1rem .75rem .5rem; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(circle at 86% 16%, var(--gok-gunes) 0 6%, transparent 6.5%),
              radial-gradient(ellipse 13% 4% at 20% 16%, var(--kart) 96%, transparent 100%),
              radial-gradient(ellipse 8% 4% at 25% 12%, var(--kart) 96%, transparent 100%),
              radial-gradient(ellipse 10% 3% at 62% 24%, var(--kart) 96%, transparent 100%),
              linear-gradient(180deg, var(--gok-ust), var(--gok-alt)); box-shadow: var(--golge); }
.ev-svg.ev-iso { width: 100%; max-width: 440px; margin: 0 auto; image-rendering: auto; filter: drop-shadow(0 6px 6px rgba(40, 60, 30, .25)); }
.ev-oge .ev-ad { display: inline-block; background: var(--kart); border-radius: 999px; padding: .2rem 1rem; box-shadow: var(--golge); }
.ev-ad { font-family: var(--font-baslik); color: var(--metin); font-size: 1.2rem; margin-top: .4rem; }
.ev-blok { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: ev-koy .3s ease forwards; }
@keyframes ev-koy { from { opacity: 0; transform: translateY(-4px) scaleY(.2); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .test-govde { flex-direction: column; }
  .insa-serit { width: 100%; position: static; margin-top: .6rem; }
  .insa-yol { height: 150px; }
  .insa-figur .ck-steve-svg, .insa-figur .ck-kedi-svg { height: 74px; }
}

/* ============================ HAREKET ERİŞİLEBİLİRLİĞİ ============================ */
@media (prefers-reduced-motion: reduce) {
  .carpim-geri, .carpim-istem, .ck-secenek { transition: none; animation: none; }
  .ck-odul.gorunur .ck-odul-ic { animation: none; }
  /* Steve koşusu + tepkiler statik; süre çubuğu bilgi olarak kalır (JS sürer). */
  .serit-steve .leg-b, .serit-steve .leg-f, .glow, .speedlines,
  .serit-steve.hafif .figure, .serit-steve.fantastik .figure, .serit-steve.tokezle .figure,
  .serit-steve.hafif .speedlines, .serit-steve.fantastik .speedlines,
  .serit-steve.hafif .glow, .serit-steve.fantastik .glow { animation: none; }
  .serit-steve.tokezle .figure { transform: none; }
  /* İnşaat: bloklar anında görünür; patika akışı + yürüme + sevinç/üzülme animasyonsuz. */
  .ev-blok { opacity: 1; animation: none; transform: none; }
  .insa-figur.sevin, .insa-figur.uzul { animation: none; }
  .insa-kup.kup-ekle, .insa-kup.kup-cik { animation: none; }
}
/* Test sonu ustası: seçili karakter, kazandığı en iyi aracı tutarak yapının önünde durur. */
.ev-yuva { position: relative; }
.ev-usta { position: absolute; left: 4%; bottom: 2.8rem; z-index: 2; display: flex; align-items: flex-end; pointer-events: none; }
.ev-usta .ck-figur[hidden], .ev-usta-esya-yer[hidden] { display: none; }
.ev-usta-svg { height: 104px; width: auto; display: block; filter: drop-shadow(0 4px 3px rgba(0,0,0,.25)); }
.ev-usta-arac { margin-left: -14px; margin-bottom: 30px; transform: rotate(-25deg); transform-origin: 50% 90%; }
.ev-usta-esya { width: 46px; height: 46px; display: block; image-rendering: pixelated; animation: usta-salla 1.6s ease-in-out infinite; }
@keyframes usta-salla { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
@media (prefers-reduced-motion: reduce) { .ev-usta-esya { animation: none; } }

/* === Bölünebilme Koşusu dönütü (kosu_bolunebilme.js): yanlışta koşu durur, kural o sayının üstünde gösterilir.
   Amber zemin (hata-güvenli renk), kırmızı yok; bakılacak rakamlar parlar, ötekiler okunur kalır (soluk yasağı). === */
.bk-donut {
  margin: .75rem 0; padding: .9rem 1rem; border-radius: var(--radius);
  background: var(--amber-acik); border: 2px solid var(--amber);
}
.bk-sayi { display: flex; justify-content: center; gap: .3rem; margin-bottom: .6rem; }
.bk-rakam {
  min-width: 2.2rem; padding: .2rem .4rem; border-radius: 8px; text-align: center;
  font-family: var(--font-baslik); font-size: 1.8rem; color: var(--metin-soluk); background: var(--kart);
  border: 2px solid var(--nesne-tas-acik);
}
.bk-rakam.hi { color: var(--metin); background: var(--bal); border-color: var(--nesne-tahta); font-weight: 700; }
.bk-satir { margin: .3rem 0; color: var(--metin); }
.bk-kural { font-weight: 700; }
.bk-sonuc { margin: .5rem 0 .7rem; font-family: var(--font-baslik); font-weight: 600; color: var(--metin); }
.bk-devam { min-height: var(--dokunma-min); }
.bk-ozet { margin: .6rem 0; }
.bk-ozet p { margin: 0 0 .4rem; }
.bk-calis { font-family: var(--font-baslik); color: var(--coral-koyu); }