/* Rehber (okul öncesi hattı) — icerik/rehber.js kendisi bağlar; elle bağlamak da serbest.
   Önekler: rh- (rehber: maskot rozeti, kulak, hayalet el, altyazı) · ck- (çocuk kipi, icerik/cocuk-kipi.js).
   Token'lar ortak.css'ten gelir; oyunlar ortak.css bağlamadığı için her var() yedek değerlidir.
   Chromium 80: flex gap, aspect-ratio, :is/:where/:has, inset kısa yazımı YOK. */

/* ===================================================================== 1) rozet: Bilge + kulak (sol üst, hep aynı yer) */
.rh-rozet {
  --rh-boy: 72px;
  position: fixed; left: 12px; top: 12px; z-index: 60;
  display: -webkit-box; display: flex; align-items: center;
  padding: 6px; border-radius: 24px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 0 0 1.5px rgba(217, 225, 238, .9), 0 2px 4px rgba(26, 43, 76, .06), 0 14px 30px -16px rgba(26, 43, 76, .38);
  font-family: var(--govde, "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif);
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: manipulation;
  transition: transform 400ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease-out, top 400ms cubic-bezier(.16, 1, .3, 1);
}
.rh-rozet.rh-oo { --rh-boy: 88px; }
.rh-rozet.rh-gomulu { position: relative; left: auto; top: auto; z-index: auto; }
.rh-rozet.rh-bos { display: none !important; }
.rh-rozet.rh-gizli { opacity: 0; transform: translateX(-18px) scale(.96); pointer-events: none; }
.rh-rozet > * + * { margin-left: 8px; }
@media (max-width: 600px) { .rh-rozet, .rh-rozet.rh-oo { --rh-boy: 64px; left: 8px; padding: 4px; border-radius: 20px; } .rh-rozet > * + * { margin-left: 4px; } }

/* Bilge (dokununca "göster": hayalet el demosu; demo yoksa talimatı okur) */
.rh-maskot {
  position: relative; display: block; flex: none;
  width: var(--rh-boy); height: var(--rh-boy); padding: 0; margin: 0; border: 0; cursor: pointer;
  border-radius: 20px; background: transparent; overflow: visible;
  transition: transform 120ms ease-out;
}
.rh-maskot:active { transform: scale(.95); }
.rh-maskot-zemin {
  position: absolute; left: 5%; right: 5%; top: 10%; bottom: 0; border-radius: 999px;
  background: radial-gradient(circle at 50% 30%, #FFFFFF 0%, #EEF3FF 55%, #DCE6FF 100%);
  box-shadow: inset 0 0 0 2px rgba(42, 75, 215, .10), inset 0 -4px 0 rgba(42, 75, 215, .08);
}
.rh-poz {
  position: absolute; left: 2%; top: -12%; width: 96%; height: 110%; object-fit: contain;
  opacity: 0; transition: opacity 220ms ease-out; pointer-events: none;
  -webkit-user-drag: none; filter: drop-shadow(0 3px 3px rgba(26, 43, 76, .18));
}
.rh-poz.rh-acik { opacity: 1; }
.rh-maskot.rh-zipla .rh-govde { animation: rhZipla 460ms cubic-bezier(.34, 1.56, .64, 1); }
.rh-govde { position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform-origin: 50% 100%; }
@keyframes rhZipla { 0% { transform: scale(1, 1); } 25% { transform: scale(1.08, .9); } 55% { transform: translateY(-8px) scale(.96, 1.06); } 100% { transform: none; } }

/* el rozeti: "Bilge sana gösterir" — yalnız demo varken */
.rh-maskot-el {
  position: absolute; left: -4px; bottom: -4px; width: 34px; height: 34px; border-radius: 999px;
  background: #FFFFFF; box-shadow: 0 0 0 2px var(--birincil, #3B36D9), 0 4px 10px -4px rgba(26, 43, 76, .5);
  display: none; align-items: center; justify-content: center;
}
.rh-maskot-el svg { width: 24px; height: 24px; }
.rh-demo-var .rh-maskot-el { display: -webkit-box; display: flex; }
@media (max-width: 600px) { .rh-maskot-el { width: 28px; height: 28px; } .rh-maskot-el svg { width: 19px; height: 19px; } }

/* Tekrar dinle (kulak) */
.rh-kulak {
  position: relative; flex: none; display: -webkit-box; display: flex; align-items: center; justify-content: center;
  width: var(--rh-boy); height: var(--rh-boy); padding: 0; margin: 0; border: 0; cursor: pointer;
  border-radius: 20px; color: #FFFFFF;
  background: linear-gradient(180deg, #3A5BE6 0%, var(--birincil, #3B36D9) 100%);
  box-shadow: 0 4px 0 var(--birincil-koyu, #2A25A8), 0 10px 18px -10px rgba(31, 57, 168, .8);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.rh-kulak:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--birincil-koyu, #2A25A8), 0 6px 12px -10px rgba(31, 57, 168, .8); }
.rh-kulak svg { width: 58%; height: 58%; overflow: visible; }
.rh-kulak .rh-dalga { opacity: 1; transition: opacity 120ms ease-out; }
.rh-konusuyor .rh-kulak .rh-dalga1 { animation: rhDalga 900ms ease-in-out infinite; }
.rh-konusuyor .rh-kulak .rh-dalga2 { animation: rhDalga 900ms ease-in-out 180ms infinite; }
@keyframes rhDalga { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.rh-kulak:focus { outline: none; }
.rh-kulak:focus-visible, .rh-maskot:focus-visible { outline: 3px solid var(--vurgu, #FFE66B); outline-offset: 3px; }

/* ses henüz açılamadı (tarayıcı ilk dokunuşu bekliyor): kulak davet eder */
.rh-davet .rh-kulak::after {
  content: ""; position: absolute; left: -6px; top: -6px; right: -6px; bottom: -6px; border-radius: 24px;
  border: 3px solid var(--birincil, #3B36D9); opacity: 0; animation: rhDavet 1400ms cubic-bezier(.16, 1, .3, 1) infinite;
}
@keyframes rhDavet { 0% { opacity: .7; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.18); } }

/* ===================================================================== 2) hayalet el demosu */
.rh-el {
  position: fixed; left: 0; top: 0; z-index: 2147482000; width: 84px; height: 97px; pointer-events: none;
  opacity: 0; will-change: transform, opacity;
  transition: transform 850ms cubic-bezier(.65, 0, .35, 1), opacity 220ms ease-out;
}
.rh-el svg { display: block; width: 100%; height: 100%; overflow: visible;
  transform-origin: 30% 6%; transition: transform 140ms ease-out;
  filter: drop-shadow(0 10px 12px rgba(26, 43, 76, .28)) drop-shadow(0 2px 2px rgba(26, 43, 76, .18)); }
.rh-el img { display: block; width: 100%; height: auto; transform-origin: 34% 4%; transition: transform 140ms ease-out;
  filter: drop-shadow(0 10px 12px rgba(26, 43, 76, .28)) drop-shadow(0 2px 2px rgba(26, 43, 76, .18)); -webkit-user-drag: none; }
.rh-el.rh-bas img { transform: scale(.86) translateY(4px); }
.rh-el.rh-nazik img { animation: rhNazik .7s ease-in-out; }
@keyframes rhNazik { 0%, 100% { transform: none; } 20% { transform: translateX(-9px) rotate(-7deg); } 40% { transform: translateX(9px) rotate(7deg); } 60% { transform: translateX(-5px) rotate(-3deg); } 80% { transform: translateX(5px); } }
html.az-hareket .rh-el.rh-nazik img { animation: none; }
.rh-el.rh-gor { opacity: .93; }
.rh-el.rh-bas svg { transform: scale(.86) translateY(4px); }
.rh-el.rh-yavas { transition: transform 1250ms cubic-bezier(.65, 0, .35, 1), opacity 220ms ease-out; }
.rh-el.rh-anlik { transition: opacity 220ms ease-out; }
@media (max-width: 600px) { .rh-el { width: 62px; height: 72px; } }

.rh-halka {
  position: fixed; left: 0; top: 0; z-index: 2147481999; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 999px; pointer-events: none; border: 5px solid var(--birincil, #3B36D9);
  background: rgba(42, 75, 215, .14); opacity: .85; transform: scale(.3);
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1), opacity 620ms ease-out;
}
.rh-halka.rh-yay { transform: scale(1.25); opacity: 0; }
.rh-halka.rh-ic { border-color: #FFFFFF; background: transparent; border-width: 3px; }

.rh-spot {
  position: fixed; left: 0; top: 0; z-index: 2147481990; pointer-events: none; border-radius: 22px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 0 0 7px rgba(42, 75, 215, .55), 0 0 0 200vmax rgba(26, 43, 76, .26);
  opacity: 0; transition: opacity 320ms ease-out, transform 600ms cubic-bezier(.16, 1, .3, 1), width 600ms cubic-bezier(.16, 1, .3, 1), height 600ms cubic-bezier(.16, 1, .3, 1);
}
.rh-spot.rh-gor { opacity: 1; }

.rh-iz { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2147481995; pointer-events: none; overflow: visible; }
.rh-iz path { fill: none; stroke: #FFFFFF; stroke-width: 9; stroke-linecap: round; opacity: .9; }
.rh-iz path.rh-iz-ust { stroke: var(--birincil, #3B36D9); stroke-width: 5; stroke-dasharray: 2 13; opacity: 1; }
.rh-iz .rh-iz-cizgi { transition: stroke-dashoffset 1250ms cubic-bezier(.65, 0, .35, 1); }

.rh-kopya { position: fixed; left: 0; top: 0; z-index: 2147481998; pointer-events: none; opacity: 0; transform-origin: 50% 50%;
  transition: transform 1250ms cubic-bezier(.65, 0, .35, 1), opacity 220ms ease-out; border-radius: 16px;
  box-shadow: 0 18px 34px -14px rgba(26, 43, 76, .55); }
.rh-kopya.rh-gor { opacity: .82; }
.rh-kopya-nokta { width: 72px; height: 72px; border-radius: 999px; background: rgba(42, 75, 215, .22); border: 4px dashed var(--birincil, #3B36D9); }

/* ===================================================================== 3) altyazı */
.rh-altyazi {
  position: fixed; left: 0; right: 0; bottom: 20px; z-index: 2147481900; margin: 0 auto; box-sizing: border-box;
  width: -webkit-fit-content; width: fit-content; max-width: min(920px, calc(100vw - 32px));
  display: -webkit-box; display: flex; align-items: flex-start;
  padding: 12px 20px 12px 14px; border-radius: 20px; pointer-events: none;
  background: rgba(26, 43, 76, .92); color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(26, 43, 76, .1), 0 20px 40px -20px rgba(26, 43, 76, .6);
  font-family: var(--govde, "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif);
  font-weight: 700; font-size: clamp(20px, 2.1vw, 34px); line-height: 1.3; letter-spacing: .005em;
  opacity: 0; transform: translateY(12px);
  transition: opacity 220ms ease-out, transform 400ms cubic-bezier(.16, 1, .3, 1);
}
.rh-altyazi.rh-gor { opacity: 1; transform: none; }
.rh-altyazi.rh-ust { bottom: auto; top: 20px; transform: translateY(-12px); }
.rh-altyazi.rh-ust.rh-gor { transform: none; }
.rh-altyazi-simge { flex: none; width: 1.2em; height: 1.2em; margin: .05em 12px 0 0; color: var(--vurgu, #FFE66B); }
.rh-altyazi-metin { display: block; }
.rh-soz { color: rgba(255, 255, 255, .55); transition: color 120ms ease-out, background-color 120ms ease-out; border-radius: 8px; padding: 0 .08em; }
.rh-soz.rh-gecti { color: #FFFFFF; }
.rh-soz.rh-simdi { color: #1A2B4C; background: var(--vurgu, #FFE66B); }
@media (max-width: 600px) { .rh-altyazi { bottom: 12px; padding: 10px 14px 10px 10px; font-size: 19px; } }

/* ayar satırı (öğretmen ayar ekranına) */
.rh-ayar { display: -webkit-inline-box; display: inline-flex; align-items: center; min-height: 48px; cursor: pointer;
  font: 600 16px/1.25 var(--govde, "Atkinson Hyperlegible Next", system-ui, sans-serif); color: var(--metin, #1A2B4C); }
.rh-ayar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rh-anahtar { position: relative; flex: none; width: 48px; height: 28px; margin-right: 12px; border-radius: 999px;
  background: var(--cizgi, #D9E1EE); transition: background-color 120ms ease-out; }
.rh-anahtar::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 999px; background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(26, 43, 76, .3); transition: transform 220ms cubic-bezier(.16, 1, .3, 1); }
.rh-ayar input:checked + .rh-anahtar { background: var(--birincil, #3B36D9); }
.rh-ayar input:checked + .rh-anahtar::after { transform: translateX(20px); }
.rh-ayar input:focus-visible + .rh-anahtar { box-shadow: 0 0 0 3px var(--vurgu, #FFE66B); }
.rh-ayar small { display: block; font-weight: 400; font-size: 14px; color: var(--metin-2, #56647F); }

/* ===================================================================== 4) çocuk kipi (cocuk-kipi.js) */
html.ck-kilit, html.ck-kilit body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
html.ck-kilit #salonDon, html.ck-kilit .tk-cik, html.ck-kilit .tk-sekme, html.ck-kilit .tk-cik-perde, html.ck-kilit .hb-dugme,
html.ck-kilit .sh-rozet, html.ck-kilit .as-serit, html.ck-kilit .as-platform, html.ck-kilit .as-geri, html.ck-kilit #as-menu, html.ck-kilit [data-ck-gizle],
html.ck-kilit .bk-ust-serit, html.ck-kilit #ustSerit, html.ck-kilit .tts-gosterge { display: none !important; }

.ck-kabuk { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;
  background: linear-gradient(180deg, #D6E7FF 0%, #EAF3FF 44%, #F7FBFF 70%, #FFFFFF 100%);
  font-family: var(--govde, "Atkinson Hyperlegible Next", system-ui, sans-serif); color: var(--metin, #1A2B4C); }
.ck-manzara { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; pointer-events: none; }
.ck-bulut { position: absolute; pointer-events: none; opacity: .95; }
.ck-izgara {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  display: grid; grid-gap: clamp(20px, 2.4vw, 44px); width: min(1560px, calc(100vw - 260px), calc((100vh - 230px) * 2.3));
}
.ck-izgara.ck-s2 { grid-template-columns: repeat(2, 1fr); width: min(1240px, calc(100vw - 260px), calc((100vh - 250px) * 1.55)); }
.ck-izgara.ck-s3 { grid-template-columns: repeat(3, 1fr); }
.ck-izgara.ck-tek { width: min(1240px, calc(100vw - 260px), calc((100vh - 250px) * 3.1)); }
@media (max-width: 900px) { .ck-izgara, .ck-izgara.ck-s2, .ck-izgara.ck-s3 { width: calc(100vw - 32px); top: 56%; } }
@media (max-width: 600px) { .ck-izgara.ck-s3 { grid-template-columns: repeat(2, 1fr); } .ck-izgara { grid-gap: 12px; top: 58%; } }

.ck-kart {
  position: relative; display: block; padding: 0; margin: 0; border: 0; cursor: pointer; text-align: left;
  border-radius: 32px; background: #FFFFFF; color: inherit;
  box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 8px rgba(26, 43, 76, .08), 0 24px 46px -26px rgba(26, 43, 76, .55);
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms ease-out, opacity 220ms ease-out;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  opacity: 0; transform: translateY(18px) scale(.97);
}
.ck-kart.ck-gir { opacity: 1; transform: none; transition: transform 520ms cubic-bezier(.16, 1, .3, 1), opacity 320ms ease-out, box-shadow 220ms ease-out; }
.ck-kart:active { transform: scale(.98); }
.ck-kart.ck-secili { transform: translateY(-8px) scale(1.035); z-index: 2;
  box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 12px var(--ck-renk, #3B36D9), 0 34px 60px -26px rgba(26, 43, 76, .6); }
.ck-izgara.ck-biri-secili .ck-kart:not(.ck-secili) { opacity: .62; }
.ck-gorsel { position: relative; display: block; width: 100%; height: 0; padding-top: 62.5%; border-radius: 26px; overflow: hidden; background: #E9EEF8; }
.ck-gorsel img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ck-bant { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--ck-renk, #3B36D9); }
.ck-oynat {
  position: absolute; left: 50%; top: 50%; width: clamp(96px, 9vw, 150px); height: clamp(96px, 9vw, 150px); margin: 0; padding: 0; border: 0;
  border-radius: 999px; background: var(--basari, #1E9E5A); color: #FFFFFF; cursor: pointer;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .92), 0 6px 0 var(--basari-koyu, #1B6B3A), 0 24px 40px -14px rgba(27, 107, 58, .8);
  display: -webkit-box; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translate(-50%, -50%) scale(.82); pointer-events: none;
  transition: transform 400ms cubic-bezier(.34, 1.56, .64, 1), opacity 220ms ease-out;
}
.ck-oynat svg { width: 46%; height: 46%; margin-left: 8%; }
@media (max-width: 600px) { .ck-oynat { width: 64px; height: 64px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .92), 0 4px 0 var(--basari-koyu, #1B6B3A); } .ck-ses-rozet { width: 40px; height: 40px; right: 8px; top: 8px; } .ck-ses-rozet svg { width: 22px; height: 22px; } .ck-kart { border-radius: 22px; } .ck-gorsel { border-radius: 18px; } }
.ck-secili .ck-oynat { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.ck-ses-rozet { position: absolute; right: 14px; top: 14px; width: 56px; height: 56px; border-radius: 999px; background: rgba(255, 255, 255, .94);
  color: var(--birincil, #3B36D9); display: -webkit-box; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -8px rgba(26, 43, 76, .6); }
.ck-ses-rozet svg { width: 30px; height: 30px; }

/* oyun çerçevesi */
.ck-oyun { position: fixed; left: 0; top: 0; width: 100%; height: 100%; border: 0; z-index: 5; background: #FFFFFF;
  opacity: 0; transition: opacity 400ms ease-out; }
.ck-oyun.ck-gor { opacity: 1; }
.ck-uc { position: fixed; z-index: 30; pointer-events: none; border-radius: 32px; overflow: hidden; background: #E9EEF8;
  transition: left 420ms cubic-bezier(.65, 0, .35, 1), top 420ms cubic-bezier(.65, 0, .35, 1), width 420ms cubic-bezier(.65, 0, .35, 1), height 420ms cubic-bezier(.65, 0, .35, 1), border-radius 420ms ease-out, opacity 320ms ease-out; }
.ck-uc img { width: 100%; height: 100%; object-fit: cover; }

/* yetişkin köşesi: görünmez, sağ üst */
.ck-kose { position: fixed; right: 0; top: 0; width: 76px; height: 76px; z-index: 2147483100; background: transparent; touch-action: manipulation; }
.ck-kose-iz { position: fixed; right: 18px; top: 18px; width: 40px; height: 40px; margin: 0; border-radius: 999px; z-index: 2147483101; pointer-events: none;
  border: 3px solid rgba(26, 43, 76, .35); opacity: 0; transform: scale(.6); transition: opacity 160ms ease-out, transform 400ms cubic-bezier(.16, 1, .3, 1); }
.ck-kose-iz.ck-gor { opacity: 1; transform: scale(1); }

/* perdeler: yetişkin kapısı, tam ekrana dön, oyun bitti */
.ck-perde { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 2147483200; display: -webkit-box; display: flex; align-items: center; justify-content: center;
  background: rgba(26, 43, 76, .52); opacity: 0; transition: opacity 220ms ease-out; padding: 16px; }
.ck-perde.ck-gor { opacity: 1; }
.ck-perde.ck-acik-zemin { background: rgba(234, 243, 255, .96); }
.ck-kutu { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #FFFFFF; border-radius: 28px; padding: 28px;
  box-shadow: 0 4px 10px rgba(26, 43, 76, .06), 0 30px 70px -30px rgba(26, 43, 76, .55);
  transform: translateY(10px) scale(.98); transition: transform 400ms cubic-bezier(.16, 1, .3, 1); }
.ck-gor .ck-kutu { transform: none; }
.ck-kutu h2 { margin: 0 56px 6px 0; font: 800 28px/1.15 var(--baslik, "Bricolage Grotesque", system-ui, sans-serif); color: var(--metin, #1A2B4C); }
.ck-kutu p { margin: 0 0 16px; font-size: 18px; line-height: 1.45; color: var(--metin-2, #56647F); }
.ck-kutu .ck-soru { font: 800 30px/1.2 var(--baslik, "Bricolage Grotesque", system-ui, sans-serif); color: var(--metin, #1A2B4C); margin: 4px 0 16px; }
.ck-sayilar { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; }
.ck-sayi { min-height: 72px; border-radius: 18px; border: 2px solid var(--cizgi, #D9E1EE); background: #FFFFFF; cursor: pointer;
  font: 800 30px/1 var(--baslik, "Bricolage Grotesque", system-ui, sans-serif); color: var(--metin, #1A2B4C); font-variant-numeric: tabular-nums;
  transition: transform 120ms ease-out, border-color 120ms ease-out, background-color 120ms ease-out; }
.ck-sayi:active { transform: scale(.97); }
.ck-sayi.ck-yanlis { border-color: var(--hata, #C2462A); background: var(--hata-zemin, #FFEDE6); animation: ckSalla 300ms ease-out; }
@keyframes ckSalla { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } }
.ck-kapat { position: absolute; right: 16px; top: 16px; width: 48px; height: 48px; border-radius: 14px; border: 0; background: var(--yuzey-2, #F4F6FB);
  color: var(--metin, #1A2B4C); cursor: pointer; display: -webkit-box; display: flex; align-items: center; justify-content: center; }
.ck-kapat svg { width: 24px; height: 24px; }
.ck-menu { display: grid; grid-gap: 10px; }
.ck-menu button { display: -webkit-box; display: flex; align-items: center; min-height: 64px; padding: 0 18px; border-radius: 18px; cursor: pointer; text-align: left;
  border: 2px solid var(--cizgi, #D9E1EE); background: #FFFFFF; font: 700 20px/1.2 var(--govde, "Atkinson Hyperlegible Next", system-ui, sans-serif); color: var(--metin, #1A2B4C);
  transition: transform 120ms ease-out, border-color 120ms ease-out; }
.ck-menu button:active { transform: scale(.98); }
.ck-menu button svg { flex: none; width: 28px; height: 28px; margin-right: 14px; color: var(--birincil, #3B36D9); }
.ck-menu button.ck-birincil { background: var(--birincil, #3B36D9); border-color: var(--birincil, #3B36D9); color: #FFFFFF; }
.ck-menu button.ck-birincil svg { color: #FFFFFF; }
.ck-menu button.ck-tehlike svg { color: var(--hata, #C2462A); }

.ck-dev { display: -webkit-box; display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--birincil, #3B36D9); color: #FFFFFF; box-shadow: 0 0 0 12px rgba(255, 255, 255, .9), 0 10px 0 var(--birincil-koyu, #2A25A8), 0 40px 70px -24px rgba(31, 57, 168, .8);
  transition: transform 120ms ease-out; }
.ck-dev:active { transform: scale(.97); }
.ck-dev svg { width: 46%; height: 46%; }
.ck-dev.ck-yesil { background: var(--basari, #1E9E5A); box-shadow: 0 0 0 12px rgba(255, 255, 255, .9), 0 10px 0 var(--basari-koyu, #1B6B3A), 0 40px 70px -24px rgba(27, 107, 58, .8); }
.ck-bitti-ic { display: -webkit-box; display: flex; align-items: center; justify-content: center; }
.ck-bitti-ic > * + * { margin-left: 48px; }
.ck-bitti-ic img { width: 240px; height: 240px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(26, 43, 76, .25)); }
@media (max-width: 600px) { .ck-bitti-ic { flex-direction: column; } .ck-bitti-ic > * + * { margin-left: 0; margin-top: 28px; } .ck-bitti-ic img { width: 160px; height: 160px; } .ck-dev { width: 150px; height: 150px; } }

/* öğretmen kurulum ekranı (cocuk.html) */
.ck-kurulum { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: auto; background: var(--zemin, #F7F9FE); }
.ck-k-ic { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; grid-gap: 32px; max-width: 1600px; height: 100%; margin: 0 auto; padding: 28px 32px; box-sizing: border-box; }
.ck-k-sol { display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; min-height: 0; }
.ck-k-sol > * + * { margin-top: 16px; }
.ck-k-ust { display: -webkit-box; display: flex; align-items: center; }
.ck-k-ust img { width: 84px; height: 84px; margin-right: 14px; object-fit: contain; }
.ck-k-ust h1 { margin: 0; font: 800 40px/1.05 var(--baslik, "Bricolage Grotesque", system-ui, sans-serif); color: var(--metin, #1A2B4C); }
.ck-k-ust p { margin: 4px 0 0; font-size: 16px; color: var(--metin-2, #56647F); }
.ck-k-acik { margin: 0; font-size: 18px; line-height: 1.5; color: var(--metin, #1A2B4C); }
.ck-k-etiket { display: block; margin: 0 0 8px; font: 700 14px/1 var(--govde, "Atkinson Hyperlegible Next", system-ui, sans-serif); letter-spacing: .04em; text-transform: uppercase; color: var(--metin-2, #56647F); }
.ck-yas { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; }
.ck-yas button { min-height: 56px; border-radius: 16px; border: 2px solid var(--cizgi, #D9E1EE); background: #FFFFFF; cursor: pointer;
  font: 700 20px/1 var(--govde, "Atkinson Hyperlegible Next", system-ui, sans-serif); color: var(--metin, #1A2B4C); transition: border-color 120ms ease-out, background-color 120ms ease-out; }
.ck-yas button[aria-pressed="true"] { border-color: var(--secili-kenar, #3B36D9); background: var(--secili-zemin, #E6F0FF); color: var(--secili-metin, #2A25A8); }
.ck-cikis-bilgi { display: -webkit-box; display: flex; align-items: center; padding: 14px 16px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 0 0 1.5px var(--cizgi, #D9E1EE); }
.ck-cikis-bilgi svg { flex: none; width: 92px; height: 64px; margin-right: 14px; }
.ck-cikis-bilgi p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--metin-2, #56647F); }
.ck-cikis-bilgi b { color: var(--metin, #1A2B4C); }
.ck-k-alt { margin-top: auto !important; }
/* tahtada nasıl görüneceği: seçilen oyunlarla canlı küçük önizleme (yalnız yüksek ekranda) */
.ck-onizleme { position: relative; flex: 0 1 auto; border-radius: 22px; overflow: hidden; height: 0; padding-top: 56.25%;
  background: linear-gradient(180deg, #D6E7FF 0%, #EAF3FF 55%, #F7FBFF 100%); box-shadow: 0 0 0 1.5px var(--cizgi, #D9E1EE), 0 18px 36px -24px rgba(26, 43, 76, .45); }
.ck-onizleme .ck-manzara { height: 34%; }
.ck-o-izgara { position: absolute; left: 50%; top: 54%; width: 62%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 6%; }
.ck-o-izgara.ck-s3 { grid-template-columns: repeat(3, 1fr); width: 76%; grid-gap: 5%; }
.ck-o-izgara span { display: block; position: relative; height: 0; padding-top: 62.5%; border-radius: 8px; overflow: hidden; background: #E9EEF8; box-shadow: 0 0 0 2px #FFFFFF, 0 6px 12px -8px rgba(26, 43, 76, .5); }
.ck-o-izgara img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-o-maskot { position: absolute; left: 3%; top: 4%; width: 12%; }
.ck-o-etiket { position: absolute; right: 10px; bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(26, 43, 76, .78); color: #FFFFFF; font: 700 12px/1.2 var(--govde, system-ui, sans-serif); }
@media (max-height: 860px) { .ck-onizleme { display: none; } }
.ck-baslat { display: -webkit-box; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 72px; border-radius: 20px; border: 0; cursor: pointer;
  background: var(--birincil, #3B36D9); color: #FFFFFF; font: 800 24px/1 var(--baslik, "Bricolage Grotesque", system-ui, sans-serif);
  box-shadow: 0 4px 0 var(--birincil-koyu, #2A25A8), 0 18px 30px -16px rgba(31, 57, 168, .7); transition: transform 120ms ease-out, opacity 220ms ease-out; }
.ck-baslat:active { transform: translateY(2px); }
.ck-baslat[disabled] { opacity: .45; cursor: not-allowed; }
.ck-baslat svg { width: 28px; height: 28px; margin-right: 12px; }
.ck-k-not { margin: 8px 0 0; font-size: 14px; color: var(--metin-2, #56647F); text-align: center; }
.ck-k-sag { display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; min-height: 0; background: #FFFFFF; border-radius: 28px;
  box-shadow: 0 0 0 1.5px var(--cizgi, #D9E1EE), 0 20px 40px -30px rgba(26, 43, 76, .4); padding: 20px; }
.ck-k-sag-ust { display: -webkit-box; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.ck-k-sag-ust h2 { margin: 0; font: 800 24px/1.1 var(--baslik, "Bricolage Grotesque", system-ui, sans-serif); color: var(--metin, #1A2B4C); }
.ck-sayac { font: 700 16px/1 var(--govde, "Atkinson Hyperlegible Next", system-ui, sans-serif); color: var(--metin-2, #56647F); font-variant-numeric: tabular-nums; }
.ck-sayac b { color: var(--birincil, #3B36D9); font-size: 20px; }
.ck-secim { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-gap: 14px; align-content: start; padding: 4px; }
.ck-sec { position: relative; display: block; padding: 0; border: 0; border-radius: 18px; background: #FFFFFF; cursor: pointer; text-align: left;
  box-shadow: 0 0 0 2px var(--cizgi, #D9E1EE); transition: box-shadow 120ms ease-out, transform 120ms ease-out; }
.ck-sec:active { transform: scale(.98); }
.ck-sec[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--secili-kenar, #3B36D9); }
.ck-sec .ck-gorsel { border-radius: 16px 16px 0 0; }
.ck-sec span.ck-ad { display: block; padding: 10px 12px 12px; font: 700 16px/1.2 var(--govde, "Atkinson Hyperlegible Next", system-ui, sans-serif); color: var(--metin, #1A2B4C); }
.ck-tik { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 999px; background: #FFFFFF; color: transparent;
  box-shadow: 0 0 0 2px #AEBBD2, 0 2px 6px rgba(26, 43, 76, .25); display: -webkit-box; display: flex; align-items: center; justify-content: center; transition: background-color 120ms ease-out, color 120ms ease-out; }
.ck-tik svg { width: 22px; height: 22px; }
.ck-sec[aria-pressed="true"] .ck-tik { background: var(--birincil, #3B36D9); color: #FFFFFF; box-shadow: none; }
.ck-sira { position: absolute; left: 10px; top: 10px; min-width: 32px; height: 32px; border-radius: 999px; background: var(--birincil, #3B36D9); color: #FFFFFF;
  font: 800 18px/32px var(--baslik, "Bricolage Grotesque", system-ui, sans-serif); text-align: center; display: none; }
.ck-sec[aria-pressed="true"] .ck-sira { display: block; }
@media (max-width: 900px) {
  .ck-kurulum { position: static; min-height: 100vh; }
  .ck-k-ic { display: block; height: auto; padding: 16px; }
  .ck-k-sag { margin-top: 20px; padding: 14px; }
  .ck-secim { grid-template-columns: repeat(2, 1fr); grid-gap: 10px; overflow: visible; }
  .ck-k-ust h1 { font-size: 32px; }
  .ck-k-alt { position: -webkit-sticky; position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(180deg, rgba(247, 249, 254, 0), var(--zemin, #F7F9FE) 30%); }
}

/* ===================================================================== az hareket: konum hareketi yok, yalnız saydamlık */
@media (prefers-reduced-motion: reduce) {
  .rh-rozet, .rh-el, .rh-kopya, .rh-spot, .ck-kart, .ck-uc, .ck-kutu, .ck-oynat { transition-property: opacity !important; }
  .rh-maskot.rh-zipla .rh-govde, .rh-konusuyor .rh-kulak .rh-dalga1, .rh-konusuyor .rh-kulak .rh-dalga2, .rh-davet .rh-kulak::after, .ck-sayi.ck-yanlis { animation: none !important; }
  .rh-halka { transition: opacity 400ms ease-out !important; transform: scale(1) !important; }
}
body.az-hareket .rh-maskot.rh-zipla .rh-govde, body.az-hareket .rh-konusuyor .rh-kulak .rh-dalga1, body.az-hareket .rh-konusuyor .rh-kulak .rh-dalga2 { animation: none !important; }