/* motor.mjs: pilot/park.html stilinden üretildi, elle düzenlemeyin */

/* Layout: çocuk ekranı. Ana sayfa büyük renkli oyun karoları; oyunda üstte ev düğmesi ve 8 tur noktası, ortada tek büyük sahne. */
.park {
  --bg: #fff6e8; --surface: #ffffff; --soft: #fdebd0; --ink: #2b2140; --muted: #6d6380; --line: #f0dcc0;
  --c0: #ff6b6b; --c1: #ffb84d; --c2: #4cc38a; --c3: #6c8cff; --c4: #b77bff; --c5: #2ec4d6;
  --sky: #dff3ff; --ok: #2fae6b; --font: "Baloo 2", "Nunito", system-ui, sans-serif;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .park { --bg: #1d1830; --surface: #2a2342; --soft: #352c52; --ink: #f6f0ff; --muted: #b9aed0; --line: #43396a;
    --c0: #ff8080; --c1: #ffc66e; --c2: #5fd39b; --c3: #8aa3ff; --c4: #c79bff; --c5: #4fd6e6; --sky: #23304a; --ok: #5fd39b; color-scheme: dark; }
}
:root[data-theme="dark"] .park { --bg: #1d1830; --surface: #2a2342; --soft: #352c52; --ink: #f6f0ff; --muted: #b9aed0; --line: #43396a;
  --c0: #ff8080; --c1: #ffc66e; --c2: #5fd39b; --c3: #8aa3ff; --c4: #c79bff; --c5: #4fd6e6; --sky: #23304a; --ok: #5fd39b; color-scheme: dark; }
.park *, .park *::before, .park *::after { box-sizing: border-box; }
.park { margin: 0; background: var(--bg); color: var(--ink); font: 600 18px/1.4 var(--font); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
.park { max-width: 56rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 14px 40px; min-height: 100vh; }
.park button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
.park :focus-visible { outline: 4px solid var(--c3); outline-offset: 3px; border-radius: 12px; }
.park h1, .park h2 { margin: 0; line-height: 1.1; }
.park .em { font-family: var(--emoji); line-height: 1; display: inline-block; font-size: 44px; transition: transform .2s; }
.park .em.big { font-size: clamp(64px, 16vw, 104px); } .park .em.mid { font-size: clamp(40px, 9vw, 60px); } .park .em.sm { font-size: clamp(22px, 5vw, 30px); }
.park .em.sil { filter: brightness(0) opacity(.45); }
.park .pair { display: inline-flex; gap: 2px; align-items: center; }
.park .pair .em { font-size: clamp(30px, 7vw, 44px); }

/* Ana sayfa */
.park .phead { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px 16px; }
.park .phead h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 800; color: var(--c0); text-shadow: 3px 3px 0 var(--c1); }
.park .sound { font-size: 30px; width: 58px; height: 58px; border-radius: 50%; background: var(--surface); box-shadow: 0 4px 0 var(--line); }
.park .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 16px; }
.park .tile { border-radius: 28px; padding: 18px 14px 16px; display: grid; justify-items: center; gap: 4px; text-align: center; background: var(--surface); box-shadow: 0 6px 0 var(--tc, var(--line)); border: 4px solid var(--tc, var(--line)); transition: transform .12s; }
.park .tile:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--tc); }
.park .tile.c0 { --tc: var(--c0); } .park .tile.c1 { --tc: var(--c1); } .park .tile.c2 { --tc: var(--c2); } .park .tile.c3 { --tc: var(--c3); } .park .tile.c4 { --tc: var(--c4); } .park .tile.c5 { --tc: var(--c5); }
.park .t-icon { font-family: var(--emoji); font-size: 64px; line-height: 1.1; animation: bob 2.4s ease-in-out infinite; }
.park .tile b { font-size: 1.35rem; font-weight: 800; }
.park .tile small { font: 600 .74rem/1.25 system-ui, sans-serif; color: var(--muted); }
.park .sticks { margin-top: 26px; background: var(--surface); border-radius: 24px; padding: 14px 18px; }
.park .sticks h2 { font-size: 1.3rem; margin-bottom: 6px; } .park .sticks .em { font-size: 40px; margin: 2px; } .park .sticks p { margin: 0; color: var(--muted); }
.park .pnote { font: 500 .8rem/1.4 system-ui, sans-serif; color: var(--muted); margin-top: 14px; }

/* Oyun çerçevesi */
.park .gbar { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; }
.park .homeb { font-family: var(--emoji); font-size: 30px; width: 60px; height: 60px; border-radius: 50%; background: var(--surface); box-shadow: 0 4px 0 var(--line); flex: none; }
.park .dots { flex: 1; display: flex; gap: 8px; justify-content: center; }
.park .dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--line); }
.park .dots i.on { background: var(--c2); } .park .dots i.now { background: var(--c1); transform: scale(1.3); }
.park .gname { font-family: var(--emoji); font-size: 36px; width: 60px; text-align: center; flex: none; }
.park .ask { margin: 0 0 12px; text-align: center; font-size: clamp(1.35rem, 5.6vw, 2.1rem); font-weight: 800; letter-spacing: .02em; color: var(--ink); background: var(--soft); border-radius: 22px; padding: 10px 14px; line-height: 1.15; }
.park .tiny { margin: 0; font: 600 .85rem/1.3 system-ui, sans-serif; color: var(--muted); text-align: center; }
.park .stage { position: relative; background: var(--surface); border-radius: 32px; min-height: min(64vh, 540px); padding: 18px; display: grid; place-items: center; overflow: hidden; box-shadow: 0 8px 0 var(--line); }
.park .opt.num { font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 800; color: var(--ink); }
@media (max-width: 380px) { .park .stage { padding: 8px; } .park .opts { gap: 10px; } .park .digits { gap: 8px; } }
.park .cheer { text-align: center; font-size: 2rem; font-weight: 800; color: var(--c0); height: 52px; opacity: 0; transform: scale(.6); transition: .25s; }
.park .cheer.show { opacity: 1; transform: scale(1); }
.park .spark { position: absolute; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; animation: spark .7s ease-out forwards; }
@keyframes spark { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); opacity: 0; } }
.park .shake { animation: shake .45s ease; }
@keyframes shake { 20% { transform: translateX(-10px) rotate(-3deg); } 40% { transform: translateX(10px) rotate(3deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
.park .hand { position: absolute; left: 0; top: 0; font-family: var(--emoji); font-size: 54px; pointer-events: none; z-index: 5; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); }
.park .dragging { z-index: 10; position: relative; cursor: grabbing; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .2)); }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes popin { from { transform: scale(.3); } 70% { transform: scale(1.2); } to { transform: scale(1); } }
.park .filled { animation: popin .4s ease-out; }

/* Gölge Avı */
.park .golge { display: grid; gap: 34px; justify-items: center; width: 100%; }
.park .hero { background: var(--sky); border-radius: 50%; width: clamp(112px, 30vw, 180px); aspect-ratio: 1; display: grid; place-items: center; cursor: grab; box-shadow: 0 6px 0 var(--line); }
.park .shadows { display: flex; gap: clamp(8px, 2.5vw, 24px); flex-wrap: nowrap; justify-content: center; }
.park .shadow { width: clamp(80px, 24vw, 150px); aspect-ratio: 1; border-radius: 24px; background: var(--soft); display: grid; place-items: center; border: 4px dashed var(--line); }
.park .shadow .em.big, .park .hero .em.big { font-size: clamp(52px, 14vw, 100px); }
.park .shadow.filled { border: 4px solid var(--c2); background: var(--sky); }

/* Balon */
.park .balloons { display: flex; flex-wrap: wrap; gap: clamp(10px, 3vw, 22px); justify-content: center; align-items: flex-end; max-width: 640px; padding: 20px 0; }
.park .balloon { position: relative; width: clamp(92px, 23vw, 124px); aspect-ratio: .85; border-radius: 50% 50% 46% 46%; display: grid; place-items: center; animation: float 3s ease-in-out infinite var(--d); transform: translateX(var(--x)); box-shadow: inset -10px -12px 0 rgba(0, 0, 0, .1); }
.park .balloon.c0 { background: var(--c0); } .park .balloon.c1 { background: var(--c1); } .park .balloon.c2 { background: var(--c2); } .park .balloon.c3 { background: var(--c3); } .park .balloon.c4 { background: var(--c4); } .park .balloon.c5 { background: var(--c5); }
.park .balloon .b-in { background: rgba(255, 255, 255, .85); border-radius: 50%; width: 78%; aspect-ratio: 1; display: grid; place-items: center; }
.park .balloon .b-in .em { font-size: clamp(34px, 8vw, 50px); }
.park .balloon .b-in .pair .em { font-size: clamp(20px, 5.4vw, 36px); }
.park .pod .pair .em, .park .opt .pair .em { font-size: clamp(22px, 6vw, 40px); }
.park .string { position: absolute; bottom: -26px; left: 50%; width: 2px; height: 26px; background: var(--muted); }
.park .balloon.popped { animation: pop .3s ease-out forwards; }
@keyframes float { 50% { transform: translate(var(--x), -14px); } }
@keyframes pop { to { transform: scale(1.6); opacity: 0; } }

/* Boncuk */
/* Kolye her zaman tek sıra: boncuk boyu kolyedeki boncuk sayısına göre küçülür */
.park .neck { position: relative; display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; padding: 18px 0; width: 100%; max-width: 760px; container-type: inline-size; }
.park .string-line { position: absolute; left: 2%; right: 2%; top: 50%; height: 4px; background: var(--muted); border-radius: 2px; opacity: .5; }
.park .bead { position: relative; flex: none; width: min(72px, calc((100cqw - (var(--n) - 1) * 4px) / var(--n))); aspect-ratio: 1; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: 0 3px 0 var(--line); }
.park .bead .em { font-size: min(46px, calc(62cqw / var(--n))); } .park .bead.new .em { animation: popin .35s ease-out; }
.park .bead.slot { border: 4px dashed var(--line); background: var(--soft); } .park .bead.glow { border-color: var(--c1); animation: glow 1s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 8px rgba(255, 184, 77, .35); } }
.park .bowls { display: flex; gap: clamp(12px, 4vw, 28px); justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.park .bowl { width: clamp(96px, 24vw, 128px); aspect-ratio: 1.3; border-radius: 0 0 60px 60px; background: var(--c5); display: grid; place-items: center; box-shadow: 0 6px 0 rgba(0, 0, 0, .15); padding-bottom: 8px; }
.park .bowl:active { transform: translateY(4px); }

/* Hayvan tablosu ve şapka */
.park .tablo, .park .sapka { display: grid; gap: 26px; justify-items: center; width: 100%; }
.park .grid { display: grid; gap: 10px; background: var(--soft); padding: 12px; border-radius: 24px; }
.park .grid.g2 { grid-template-columns: repeat(2, clamp(80px, 22vw, 116px)); } .park .grid.g3 { grid-template-columns: repeat(3, clamp(64px, 20vw, 104px)); }
.park .cellx { aspect-ratio: 1; border-radius: 18px; background: var(--surface); display: grid; place-items: center; }
.park .cellx.hole { border: 4px dashed var(--c1); background: var(--soft); } .park .cellx.hole.filled { border: 4px solid var(--c2); background: var(--surface); }
.park .q { font-size: 2.6rem; font-weight: 800; color: var(--c1); }
.park .opts { display: flex; gap: clamp(12px, 3vw, 22px); flex-wrap: wrap; justify-content: center; }
.park .opt { width: clamp(76px, 24vw, 124px); aspect-ratio: 1; border-radius: 24px; background: var(--sky); display: grid; place-items: center; box-shadow: 0 6px 0 var(--line); }
.park .opt:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.park .trick { display: flex; align-items: center; gap: clamp(8px, 2vw, 16px); }
.park .pod { width: clamp(78px, 22vw, 120px); aspect-ratio: 1; border-radius: 22px; background: var(--sky); display: grid; place-items: center; transition: opacity .3s; }
.park .pod.hole { border: 4px dashed var(--c1); background: var(--soft); } .park .pod.hole.filled { border: 4px solid var(--c2); background: var(--sky); }
.park .pod.poof { animation: popin .5s ease-out; }
.park .hat { font-family: var(--emoji); font-size: clamp(48px, 11vw, 66px); line-height: 1; }
.park .hat.wiggle { animation: wig .7s ease; } @keyframes wig { 25% { transform: rotate(-14deg); } 50% { transform: rotate(12deg) translateY(-6px); } 75% { transform: rotate(-8deg); } }

/* Ayna kanat */
.park .bf { display: flex; align-items: center; gap: 4px; padding: 0; }
.park .wing { display: grid; grid-template-columns: repeat(3, clamp(30px, 9vw, 74px)); gap: 5px; padding: clamp(6px, 2vw, 14px); background: color-mix(in srgb, var(--c4) 22%, var(--surface)); }
.park .wing.L { border-radius: 60% 18% 18% 60% / 50% 30% 30% 50%; transform-origin: right center; } .park .wing.Rt { border-radius: 18% 60% 60% 18% / 30% 50% 50% 30%; transform-origin: left center; }
.park .wc { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .7); display: grid; place-items: center; }
.park .wc.tap { background: var(--surface); box-shadow: 0 3px 0 var(--line); } .park .wc .pop-in { animation: popin .35s ease-out; }
.park .body { width: 16px; flex: none; align-self: stretch; margin: 14px 0; border-radius: 12px; background: var(--ink); }
.park .bf.flap .wing.L { animation: flapL .35s ease-in-out 4; } .park .bf.flap .wing.Rt { animation: flapR .35s ease-in-out 4; }
@keyframes flapL { 50% { transform: scaleX(.55); } } @keyframes flapR { 50% { transform: scaleX(.55); } }

/* Yapboz */
.park .yapboz { display: grid; gap: 28px; justify-items: center; }
.park .board { display: grid; gap: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 0 var(--line); background: var(--sky); }
.park .pz { position: relative; display: block; overflow: hidden; background: var(--sky); outline: 1px solid rgba(0, 0, 0, .06); }
.park .pz-in { position: absolute; inset: 0; } .park .pz-in .em { position: absolute; display: grid; place-items: center; }
.park .pzslot { background: var(--soft); outline: 4px dashed var(--c1); outline-offset: -4px; }
.park .pzslot.filled { outline: 4px solid var(--c2); }
.park .pieces { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.park .drag-pc { border-radius: 12px; overflow: hidden; box-shadow: 0 5px 0 var(--line); cursor: grab; touch-action: none; }

/* Küp say */
.park .kup { display: grid; gap: 22px; justify-items: center; width: 100%; }
.park .tower { width: min(100%, 300px); height: auto; } .park .tower.hop { animation: hop .5s ease-out 2; }
@keyframes hop { 40% { transform: translateY(-16px); } }

/* Aynısını bul */
.park .ayni { display: grid; gap: 22px; justify-items: center; }
.park .target-card { width: clamp(120px, 32vw, 160px); aspect-ratio: 1; border-radius: 26px; background: var(--sun, #fff3c4); background: color-mix(in srgb, var(--c1) 25%, var(--surface)); display: grid; place-items: center; border: 4px solid var(--c1); }
.park .card-in { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.park .corner { position: absolute; } .park .corner.tl { left: 8%; top: 6%; } .park .corner.tr { right: 8%; top: 6%; } .park .corner.bl { left: 8%; bottom: 6%; } .park .corner.br { right: 8%; bottom: 6%; }
.park .opts.cards.many { display: grid; grid-template-columns: repeat(3, auto); }
.park .opt.card { width: clamp(76px, 24vw, 124px); }

/* Döndür oturt */
.park .dondur { display: grid; gap: 26px; justify-items: center; }
.park .frame { position: relative; width: clamp(140px, 38vw, 200px); aspect-ratio: 1; border-radius: 28px; background: var(--soft); border: 4px dashed var(--line); display: grid; place-items: center; }
.park .frame .placed { position: absolute; inset: 0; display: grid; place-items: center; animation: popin .4s ease-out; }
.park .spinner { position: relative; width: clamp(120px, 32vw, 170px); aspect-ratio: 1; border-radius: 50%; background: var(--sky); box-shadow: 0 6px 0 var(--line); display: grid; place-items: center; }
.park .spinner .em.turn { animation: turn90 .25s ease-out; } @keyframes turn90 { from { rotate: -90deg; } }
.park .arrow-ic { position: absolute; right: -4px; top: -4px; width: 44px; height: 44px; border-radius: 50%; background: var(--c1); color: #fff; font-size: 28px; display: grid; place-items: center; }

/* Hafıza */
.park .mem { display: grid; grid-template-columns: repeat(var(--cols), clamp(54px, 17vw, 100px)); gap: clamp(8px, 2vw, 14px); }
.park .mcard { position: relative; aspect-ratio: 1; border-radius: 18px; background: var(--c3); box-shadow: 0 5px 0 rgba(0, 0, 0, .15); display: grid; place-items: center; }
.park .mcard .front { display: none; } .park .mcard .back { font-family: var(--emoji); font-size: clamp(26px, 7vw, 40px); }
.park .mcard.open { background: var(--surface); border: 3px solid var(--line); animation: flipin .25s ease-out; } .park .mcard.open .front { display: grid; } .park .mcard.open .back { display: none; }
.park .mcard.done { border-color: var(--c2); }
@keyframes flipin { from { transform: scaleX(.2); } }

/* Hazine şifresi */
.park .sifre { display: grid; gap: 18px; justify-items: center; }
.park .key { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; background: var(--soft); border-radius: 20px; padding: 10px 14px; }
.park .kp { display: inline-flex; align-items: center; gap: 4px; font-size: 1.5rem; font-weight: 800; } .park .kp .dg { color: var(--c3); }
.park .code { display: flex; gap: 6px; flex-wrap: nowrap; }
.park .cd { display: grid; justify-items: center; gap: 6px; } .park .cd .em.mid { font-size: clamp(26px, 7vw, 48px); }
.park .ans { width: clamp(40px, 11vw, 64px); height: clamp(40px, 11vw, 64px); border-radius: 16px; border: 4px dashed var(--line); display: grid; place-items: center; font-size: 2rem; font-weight: 800; }
.park .ans.cur { border-color: var(--c1); }
.park .chest { font-family: var(--emoji); font-size: clamp(56px, 15vw, 80px); line-height: 1; } .park .chest.open { animation: popin .5s ease-out; }
.park .digits { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.park .digits .opt { width: clamp(56px, 19vw, 96px); }

/* Ne ile gider */
.park .iliski { display: grid; gap: 22px; justify-items: center; }
.park .pairrow { display: flex; align-items: center; gap: 14px; }
.park .link { font-size: 2rem; color: var(--muted); }

/* Günün testi, seviye, veli bölümü */
.park .daily { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 16px; border-radius: 26px; background: linear-gradient(135deg, var(--c3), var(--c4)); color: #fff; text-align: left; box-shadow: 0 6px 0 color-mix(in srgb, var(--c4) 70%, #000); }
.park .daily .em { font-size: 48px; } .park .dtext { flex: 1; display: grid; } .park .dtext b { font-size: 1.5rem; } .park .dtext small { font: 600 .9rem/1.3 system-ui, sans-serif; opacity: .95; }
.park .go-b { background: #fff; color: var(--c3); border-radius: 999px; padding: 8px 18px; font-weight: 800; font-size: 1.1rem; }
.park .daily.done { background: var(--surface); color: var(--ink); box-shadow: 0 5px 0 var(--line); } .park .daily.done small { color: var(--muted); }
.park .daily:not(.done):active { transform: translateY(4px); }
.park .tile { position: relative; } .park .lvl { position: absolute; top: 10px; right: 10px; font: 800 .72rem/1 system-ui, sans-serif; background: var(--tc, var(--line)); color: #fff; padding: 5px 8px; border-radius: 999px; }
.park .tbadge { margin: 0 0 8px; text-align: center; font-weight: 800; color: var(--c3); }
/* Günün Testi: soru şeridi (20 düğme, 4 bölüm), boş bırak / önceki, yapışık "Sınavı bitir" */
.park .tcount { flex: 1; text-align: center; font-weight: 800; color: var(--muted); }
.park .tnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 12px; }
.park .tgrp { display: flex; gap: 4px; padding: 5px; border-radius: 16px; background: var(--surface); box-shadow: 0 3px 0 var(--line); }
.park .tnb { width: 36px; height: 38px; border-radius: 11px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: 800 16px var(--font); cursor: pointer; padding: 0; transition: transform .12s; }
.park .tnb:hover { transform: translateY(-2px); }
.park .tnb.ok { background: var(--c2); border-color: transparent; color: #fff; }
.park .tnb.bad { background: var(--c0); border-color: transparent; color: #fff; }
.park .tnb.bos { background: color-mix(in srgb, var(--c1) 30%, var(--surface)); border: 2px dashed var(--c1); }
.park .tnb.cur { transform: scale(1.14); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
@media (max-width: 460px) { .park .tnb { width: 29px; height: 34px; font-size: 13px; border-radius: 9px; border-width: 2px; } .park .tgrp { gap: 3px; padding: 3px; border-radius: 12px; } .park .tnav { gap: 5px; } .park .tnb.cur { transform: scale(1.08); } }
.park .tq-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.park .tq-nav .big-btn { width: auto; min-width: 150px; }
.park .tq-finish { margin: 16px 0 6px; display: flex; justify-content: center; }
.park .tq-finish .fin { width: min(440px, 100%); font-size: 24px; background: var(--c0); color: #fff; box-shadow: 0 6px 0 color-mix(in srgb, var(--c0) 70%, #000); animation: finglow 1.6s ease-out infinite; }
@keyframes finglow { 0%, 100% { box-shadow: 0 6px 0 color-mix(in srgb, var(--c0) 70%, #000), 0 0 0 0 color-mix(in srgb, var(--c0) 60%, transparent); }
  60% { box-shadow: 0 6px 0 color-mix(in srgb, var(--c0) 70%, #000), 0 0 0 18px transparent; } }
@media (prefers-reduced-motion: reduce) { .park .tq-finish .fin { animation: none; } }
.park .tq-confirm { width: min(560px, 100%); padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 3px solid var(--c1); box-shadow: 0 6px 0 var(--line); text-align: center; display: grid; gap: 12px; }
.park .tq-confirm .row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.park .tq-confirm .big-btn { width: auto; }
.park .pbar { flex: 1; height: 16px; border-radius: 99px; background: var(--line); overflow: hidden; } .park .pbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--c2), var(--c5)); border-radius: 99px; transition: width .3s; }
.park .lvup { font-size: 1.3rem; font-weight: 800; color: var(--c2); margin: 0; }
.park .parents { margin-top: 18px; background: var(--surface); border-radius: 22px; padding: 4px 16px; }
.park .parents summary { cursor: pointer; padding: 12px 0; font-size: 1.15rem; font-weight: 800; }
.park .why-list { display: grid; gap: 10px; padding-bottom: 8px; }
.park .why { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; }
.park .why .em { font-size: 32px; } .park .why b { font-size: 1.05rem; } .park .why small { font: 600 .78rem/1.3 system-ui, sans-serif; color: var(--muted); }
.park .why p { margin: 2px 0 0; font: 500 .9rem/1.4 system-ui, sans-serif; color: var(--ink); }
.park .linkb { font: 700 .8rem system-ui, sans-serif; color: var(--c3); text-decoration: underline; padding: 2px 4px; } .park .linkb.on { color: var(--ink); text-decoration: none; background: var(--soft); border-radius: 8px; }

/* Sınıf seçimi, lig, puan */
.park .grades { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.park .gchip { min-height: 52px; padding: 0 20px; border-radius: 999px; background: var(--surface); border: 3px solid var(--line); font-size: 1.15rem; font-weight: 800; }
.park .gchip.on { background: var(--c3); border-color: var(--c3); color: #fff; }
.park .league { background: var(--surface); border-radius: 24px; padding: 14px 16px; margin-bottom: 18px; display: grid; gap: 10px; box-shadow: 0 5px 0 var(--line); }
.park .lhead { display: flex; gap: 12px; align-items: center; } .park .lhead .em { font-size: 40px; } .park .lhead b { font-size: 1.3rem; display: block; } .park .lhead small { font: 600 .85rem/1.3 system-ui, sans-serif; color: var(--muted); }
.park .ltable { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 14px; font: 600 .85rem/1.2 system-ui, sans-serif; }
.park .ltable li { display: grid; grid-template-columns: 1.8em minmax(0, 1fr) auto; gap: 6px; padding: 4px 8px; border-radius: 10px; break-inside: avoid; }
.park .ltable li.up { background: color-mix(in srgb, var(--c2) 18%, transparent); } .park .ltable li.down { background: color-mix(in srgb, var(--c0) 14%, transparent); }
.park .ltable li.me { outline: 3px solid var(--c1); font-weight: 800; } .park .ltable b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .park .ltable i { font-style: normal; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .park .ltable { columns: 1; } }
.park .score { flex: none; min-width: 72px; text-align: center; font-size: 1.2rem; font-weight: 800; background: var(--surface); border-radius: 999px; padding: 8px 12px; box-shadow: 0 4px 0 var(--line); }
.park .gain { font-size: 1.2rem; } .park .gain small { font: 600 .9rem/1.3 system-ui, sans-serif; color: var(--muted); }

/* Resmi düzelt */
.park .tapboard .tp { padding: 0; cursor: pointer; outline: 2px solid rgba(255, 255, 255, .8); outline-offset: -1px; }
.park .pz-in.turnin { animation: turnin .25s ease-out; } @keyframes turnin { from { rotate: -90deg; } }

/* Tavşan yolu */
.park .yol { display: grid; gap: 14px; justify-items: center; }
.park .ygrid { display: grid; grid-template-columns: repeat(var(--n), clamp(40px, 13vw, 76px)); gap: 4px; background: color-mix(in srgb, var(--c2) 25%, var(--surface)); padding: 8px; border-radius: 18px; }
.park .yc { aspect-ratio: 1; border-radius: 10px; background: color-mix(in srgb, var(--c2) 12%, var(--surface)); display: grid; place-items: center; }
.park .yc .em.mid { font-size: clamp(28px, 8vw, 46px); }
.park .plan { display: flex; flex-wrap: wrap; gap: 4px; min-height: 44px; align-items: center; justify-content: center; background: var(--soft); border-radius: 14px; padding: 6px 10px; max-width: 100%; }
.park .pstep { font-family: var(--emoji); font-size: 26px; }
.park .arrows { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.park .opt.arr { width: clamp(56px, 16vw, 80px); font-family: var(--emoji); font-size: clamp(28px, 8vw, 40px); } .park .opt.arr.go { background: color-mix(in srgb, var(--c2) 35%, var(--surface)); }

/* Uğur böceği */
.park .bugs { display: grid; gap: 10px; justify-items: center; }
.park .field { position: relative; border-radius: 22px; background: color-mix(in srgb, var(--c2) 16%, var(--surface)); }
.park .bug { position: absolute; font-family: var(--emoji); font-size: clamp(26px, 7vw, 36px); line-height: 1; padding: 4px; }
.park .bug.caught { animation: flyjar .45s ease-in forwards; pointer-events: none; } @keyframes flyjar { to { transform: translate(-50%, 200px) scale(.2); opacity: 0; } }
.park .jar { margin: 0; font-size: 1.8rem; font-weight: 800; }

/* Ne kayboldu */
.park .kayip { display: grid; gap: 22px; justify-items: center; }
.park .shelf { position: relative; display: flex; gap: clamp(4px, 1.5vw, 12px); padding: clamp(8px, 2vw, 14px); border-radius: 22px; background: var(--soft); overflow: hidden; }
.park .slotk { width: clamp(36px, 11vw, 76px); aspect-ratio: 1; border-radius: 16px; background: var(--surface); display: grid; place-items: center; }
.park .slotk .em.mid { font-size: clamp(24px, 7vw, 48px); }
.park .curtain { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--c0) 0 18px, color-mix(in srgb, var(--c0) 75%, #000) 18px 22px); transform: scaleY(0); transform-origin: top; transition: transform .45s ease; }
.park .shelf.closed .curtain { transform: scaleY(1); }

/* Küçükten büyüğe */
.park .sirala { display: grid; gap: 26px; justify-items: center; }
.park .rowslots { display: flex; gap: 6px; align-items: flex-end; padding: 10px; border-radius: 18px; background: var(--soft); }
.park .rslot { width: clamp(42px, 12vw, 84px); height: clamp(60px, 18vw, 100px); display: grid; place-items: end center; border-bottom: 4px solid var(--line); }
.park .pile { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: flex-end; }
.park .opt.sz { width: clamp(68px, 19vw, 104px); }

/* Sepete at */
.park .sepet { display: grid; gap: 30px; justify-items: center; }
.park .now { width: clamp(130px, 34vw, 170px); aspect-ratio: 1; border-radius: 50%; background: var(--sky); display: grid; place-items: center; animation: bob 2s ease-in-out infinite; }
.park .baskets { display: flex; gap: clamp(12px, 4vw, 26px); }
.park .basket { width: clamp(120px, 36vw, 170px); border-radius: 22px 22px 60px 60px; background: var(--c1); color: #3a2a00; display: grid; justify-items: center; gap: 4px; padding: 14px 8px 20px; box-shadow: 0 6px 0 rgba(0, 0, 0, .15); }
.park .basket b { font-size: 1.05rem; } .park .basket:active { transform: translateY(4px); }

/* ===== Günün Testi: BİLSEM kalıbındaki soru çizimleri (üreteçlerin SVG sınıfları) ===== */
.park { --paper: #ffffff; --surface-2: #f6efe4; --accent: #0b7a78; --accent-soft: #d5eeec; --hl: #e3590b; --sun: #f0a531; --robot: #2f4652; --goal: #f0a531;
  --sh-blue: #2d6bd6; --sh-orange: #dc6418; --sh-green: #218e55; --sh-purple: #7550cf; --sh-pink: #cc3a74; --sh-teal: #0d8486; --okc: #1b9355; --badc: #cc4636; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .park { --paper: #2f2850; --surface-2: #3a3160; --accent: #3cc0bc; --accent-soft: #173f42; --hl: #ff8b4d; --sun: #f6bc58; --robot: #c8dade; --goal: #f6bc58;
  --sh-blue: #7aa7ff; --sh-orange: #ff9a57; --sh-green: #5bcb8c; --sh-purple: #ae96ff; --sh-pink: #ff80ae; --sh-teal: #48cfcf; --okc: #4ac784; --badc: #f07b6b; } }
:root[data-theme="dark"] .park { --paper: #2f2850; --surface-2: #3a3160; --accent: #3cc0bc; --accent-soft: #173f42; --hl: #ff8b4d; --sun: #f6bc58; --robot: #c8dade; --goal: #f6bc58;
  --sh-blue: #7aa7ff; --sh-orange: #ff9a57; --sh-green: #5bcb8c; --sh-purple: #ae96ff; --sh-pink: #ff80ae; --sh-teal: #48cfcf; --okc: #4ac784; --badc: #f07b6b; }
.park .f-blue { fill: var(--sh-blue); } .park .f-orange { fill: var(--sh-orange); } .park .f-green { fill: var(--sh-green); }
.park .f-purple { fill: var(--sh-purple); } .park .f-pink { fill: var(--sh-pink); } .park .f-teal { fill: var(--sh-teal); }
.park .o-blue, .park .o-orange, .park .o-green, .park .o-purple, .park .o-pink, .park .o-teal { fill: var(--paper); stroke-width: 5; }
.park .o-blue { stroke: var(--sh-blue); } .park .o-orange { stroke: var(--sh-orange); } .park .o-green { stroke: var(--sh-green); }
.park .o-purple { stroke: var(--sh-purple); } .park .o-pink { stroke: var(--sh-pink); } .park .o-teal { stroke: var(--sh-teal); }
.park .arrow-blue, .park .arrow-orange, .park .arrow-green, .park .arrow-purple, .park .arrow-pink, .park .arrow-teal { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.park .arrow-blue { stroke: var(--sh-blue); } .park .arrow-orange { stroke: var(--sh-orange); } .park .arrow-green { stroke: var(--sh-green); }
.park .arrow-purple { stroke: var(--sh-purple); } .park .arrow-pink { stroke: var(--sh-pink); } .park .arrow-teal { stroke: var(--sh-teal); }
.park .cell { stroke: var(--paper); stroke-width: 2.5; } .park .hi-cell { stroke: var(--hl); stroke-width: 4.5; }
.park .base { fill: var(--paper); stroke: var(--ink); stroke-width: 4.5; } .park .sel-ring .base { stroke: var(--hl); }
.park .ink-o { fill: none; stroke: var(--ink); stroke-width: 3.5; } .park .ink-line { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; } .park .ink-fill { fill: var(--ink); }
.park .svg-label { font: 800 20px var(--font); fill: var(--ink); } .park .svg-text { font: 800 14px system-ui, sans-serif; fill: var(--ink); } .park .svg-small { font: 800 12px system-ui, sans-serif; fill: var(--muted); } .park .svg-num { font: 800 17px var(--font); fill: var(--muted); }
.park .q-box { fill: var(--surface-2); stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 5; } .park .q-mark { font: 800 30px var(--font); fill: var(--accent); }
.park .tile-box { fill: var(--paper); stroke: var(--line); stroke-width: 2; } .park .target-frame { fill: var(--paper); stroke: var(--accent); stroke-width: 3; } .park .rule-card { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; }
.park .mark-ok { fill: none; stroke: var(--okc); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .park .mark-bad { fill: none; stroke: var(--badc); stroke-width: 3.5; stroke-linecap: round; }
.park .grid-bg { fill: var(--paper); stroke: var(--line); stroke-width: 2; } .park .grid-line { stroke: var(--line); stroke-width: 1.5; }
.park .robot { fill: var(--robot); } .park .robot-eye { fill: var(--paper); } .park .faint { opacity: .35; } .park .goal { fill: var(--goal); stroke: var(--ink); stroke-width: 1.2; }
.park .cmd-chip { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; } .park .chip-ico { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.park .ghost { opacity: .2; } .park .diff-ring { fill: none; stroke: var(--hl); stroke-width: 3.5; stroke-dasharray: 6 4; } .park .bracket { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.park .anim-rot { transform-box: fill-box; transform-origin: center; animation: spinq 1.4s cubic-bezier(.5, 0, .3, 1) .4s both; } @keyframes spinq { from { transform: rotate(0deg); } to { transform: rotate(var(--to)); } }
.park .path-draw { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.park .answer-pop { animation: popin .5s ease-out; }

.park .tstage { display: grid; gap: 14px; place-items: stretch; align-content: start; }
.park .tq-stem { background: var(--soft); border-radius: 22px; padding: 12px; display: grid; place-items: center; }
.park .tq-stem svg { width: 100%; max-width: 420px; max-height: 300px; height: auto; }
.park .tq-opts { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.park .tq-opts.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .park .tq-opts.n5, .park .tq-opts.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 4 şık: tablette tek sıra (resmî demo düzeni). 660 px altında 2×2: tek sırada çizim kalite kapısının ölçtüğü 107 px'in altına düşer */
@media (max-width: 659px) { .park .tq-opts.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .park .tq-opts.n4:not(.wide) { max-width: 480px; margin-inline: auto; } }
.park .tq-opt { position: relative; aspect-ratio: 1; border-radius: 20px; background: var(--surface); border: 3px solid var(--line); padding: 10px; display: grid; place-items: center; box-shadow: 0 4px 0 var(--line); }
.park .tq-opt b { position: absolute; top: 6px; left: 10px; font-size: 1.1rem; color: var(--muted); } .park .tq-opt svg { width: 88%; height: 88%; }
.park .tq-opt.is-ok { border-color: var(--okc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--okc) 30%, transparent); }
.park .tq-opt.is-bad { border-color: var(--badc); } .park .tq-opt.is-answer { border-color: var(--okc); border-style: dashed; }
.park .tq-ex { border-radius: 20px; padding: 12px 14px; display: grid; gap: 8px; justify-items: center; text-align: center; background: var(--soft); }
.park .tq-ex.ok { background: color-mix(in srgb, var(--okc) 15%, var(--surface)); } .park .tq-ex.bad { background: color-mix(in srgb, var(--badc) 10%, var(--surface)); }
.park .tq-ex p { margin: 0; font: 600 1rem/1.4 system-ui, sans-serif; } .park .tq-ex p b { font-family: var(--font); font-size: 1.2rem; }
.park .tq-vis svg { width: 100%; max-width: 320px; max-height: 200px; height: auto; }
.park .tstage { max-width: 720px; margin: 0 auto; width: 100%; }
.park .tq-stem.wide svg { max-width: 100%; max-height: 220px; }
@media (max-width: 380px) { .park .tq-stem { padding: 6px; border-radius: 16px; } .park .tq-opts { gap: 8px; } .park .tq-opt { padding: 6px; border-radius: 16px; } }
/* Üst çubuk dar telefonda taşmasın (320 px'te puan ekran dışına çıkıyordu) */
.park .dots { min-width: 0; gap: clamp(3px, 1.5vw, 8px); } .park .dots i { flex: none; width: clamp(9px, 3.2vw, 16px); height: clamp(9px, 3.2vw, 16px); }
@media (max-width: 380px) { .park .gbar { gap: 8px; } .park .homeb { width: 50px; height: 50px; font-size: 25px; } .park .score { min-width: 0; padding: 6px 10px; font-size: 1.05rem; } }
.park .tq-opt[aria-pressed="true"] { border-color: var(--c3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c3) 30%, transparent); transform: translateY(-2px); }
.park .tq-opt:disabled { cursor: default; transform: none; }
.park .tq-opt.is-ok, .park .tq-opt.is-ok[aria-pressed="true"] { border-color: var(--okc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--okc) 30%, transparent); }
.park .tq-opt.is-bad, .park .tq-opt.is-bad[aria-pressed="true"] { border-color: var(--badc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--badc) 25%, transparent); }
.park .tq-opt:disabled:not(.is-ok):not(.is-bad):not(.is-answer) { opacity: .55; }
.park .tq-mark { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 1.1rem/1 system-ui, sans-serif; }
.park .is-ok .tq-mark, .park .is-answer .tq-mark { background: var(--okc); } .park .is-bad .tq-mark { background: var(--badc); }
.park .tq-sub { margin: 0; text-align: center; font: 700 1.05rem/1.35 system-ui, sans-serif; }
.park .tq-go { display: flex; justify-content: center; } .park .tq-go[hidden] { display: none; }
.park .tq-go .big-btn:disabled { opacity: .45; box-shadow: none; }
/* Anlat: soru ekranında kademeli ipucu (Gözde okur) */
.park .tq-go:has(.hint-b) { flex-wrap: wrap; gap: 10px; }
.park .hint-b[hidden] { display: none; }
.park .tq-hints { display: grid; gap: 8px; margin: 4px 0 10px; }
.park .tq-hints:empty { display: none; }
.park .tq-hint { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--soft); font-weight: 700; }
.park .tq-hint p { margin: 0; }
.park .tq-hint .tq-vis { margin-top: 8px; }
.park .tq-hint-n { font-size: 1.3rem; line-height: 1.2; }
.park .tq-head { font-family: var(--font) !important; font-size: 1.45rem !important; font-weight: 800 !important; }
.park .tq-ex.ok .tq-head { color: var(--okc); } .park .tq-ex.bad .tq-head { color: var(--badc); }
.park .tq-how { width: 100%; text-align: left; } .park .tq-how summary { cursor: pointer; text-align: center; font-weight: 800; padding: 4px 0; }
.park .tq-steps { margin: 8px 0 0; padding-left: 1.4rem; display: grid; gap: 10px; }
.park .tq-steps li p { margin: 0 0 6px; } .park .tq-steps .tq-vis { display: grid; place-items: center; }
.park .tdone { gap: 14px; }
.park .tres { list-style: none; margin: 0; padding: 0; width: min(100%, 420px); display: grid; gap: 6px; }
.park .tres li { display: flex; justify-content: space-between; gap: 12px; background: var(--surface); border-radius: 14px; padding: 8px 14px; font: 700 1rem/1.3 system-ui, sans-serif; border-left: 6px solid var(--c1); }
.park .tres li.full { border-left-color: var(--c2); } .park .tres b { font-family: var(--font); font-size: 1.15rem; }
.park .trec-h { margin: 6px 0 0; font-size: 1.3rem; } .park .trec { width: min(100%, 720px); }
.park .sec-h { margin: 18px 0 10px; font-size: 1.5rem; }
.park .tile.rec { outline: 4px dashed var(--tc); outline-offset: 4px; }
.park .recb { position: absolute; top: 10px; left: 10px; font: 800 .72rem/1 system-ui, sans-serif; background: var(--ink); color: var(--bg); padding: 5px 8px; border-radius: 999px; }
.park .two { display: grid; gap: 10px; } .park .two p { margin: 0; font: 500 .92rem/1.45 system-ui, sans-serif; } .park .two b { display: block; font-family: var(--font); font-size: 1.1rem; }
.park .why-h { margin: 14px 0 8px; font-size: 1.1rem; }

/* ===== Yeni soru tipleri: küp, bakış açısı, siluet, hafıza, şifre, resimli ilişki ===== */
.park { --cu-t: #d6e4ff; --cu-l: #8fb0f2; --cu-r: #5c82d0; --cu-edge: #23324f; --cu-floor: #e9d3ae; --sil: #2b2140; --hl-face: #ffb26b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .park { --cu-t: #a9bfff; --cu-l: #6f8fe0; --cu-r: #4a69b8; --cu-edge: #10172b; --cu-floor: #40366a; --sil: #0b0716; --hl-face: #ff9a57; } }
:root[data-theme="dark"] .park { --cu-t: #a9bfff; --cu-l: #6f8fe0; --cu-r: #4a69b8; --cu-edge: #10172b; --cu-floor: #40366a; --sil: #0b0716; --hl-face: #ff9a57; }
.park .cu-t { fill: var(--cu-t); } .park .cu-l { fill: var(--cu-l); } .park .cu-r { fill: var(--cu-r); }
.park .cu polygon { stroke: var(--cu-edge); stroke-width: 1.6; stroke-linejoin: round; }
.park .cu-floor { fill: var(--cu-floor); stroke: color-mix(in srgb, var(--cu-floor) 70%, var(--ink)); stroke-width: 1.2; }
.park .cu.miss polygon { fill: var(--accent-soft); stroke: var(--accent); stroke-dasharray: 4 3; }
.park .cu.hl-t .cu-t, .park .cu.hl-l .cu-l, .park .cu.hl-r .cu-r { fill: var(--hl-face); }
.park .cu-lab { font: 800 22px var(--font); fill: var(--ink); }
.park .cu-num { font: 800 20px var(--font); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.park .cu-box { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 5; }
.park .num-opt { font: 800 54px var(--font); fill: var(--ink); }
.park .eye-w { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; } .park .eye-p { fill: var(--ink); }
.park .look { fill: none; stroke: var(--hl); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.park .kf-t { fill: var(--paper); } .park .kf-l { fill: color-mix(in srgb, var(--paper) 86%, var(--ink)); } .park .kf-r { fill: color-mix(in srgb, var(--paper) 74%, var(--ink)); }
.park .kf-t, .park .kf-l, .park .kf-r { stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.park .kf-hi { stroke: var(--okc); stroke-width: 3.5; }
.park .kq { font-family: var(--font); font-weight: 800; fill: var(--accent); }
.park .sil { fill: var(--sil); stroke: var(--sil); stroke-width: 4; stroke-linejoin: round; }
.park .faint-sil .sil { opacity: .3; }
.park .sl-part { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.park .sl-trace { fill: none; stroke: var(--hl); stroke-width: 2.5; stroke-dasharray: 5 4; }
.park .sl-wrong { fill: none; stroke: var(--badc); stroke-width: 3; stroke-dasharray: 5 4; }
.park .sl-fit { fill: none; stroke: var(--okc); stroke-width: 3; }   /* yanlış şıkta gölgeye oturan parça: düz yeşil */
.park .hf-slot { fill: var(--surface-2); }
.park .sf-dbox { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; } .park .sf-dbox.hi { fill: var(--accent-soft); stroke: var(--accent); }
.park .sf-digit { font: 800 28px var(--font); fill: var(--ink); } .park .sf-digit.big { font-size: 36px; }
.park .sf-key { fill: none; stroke: var(--accent); stroke-width: 2.5; } .park .sf-lab { font: 800 15px var(--font); fill: var(--accent); letter-spacing: 2px; }
.park .emo { font-family: var(--emoji); }
.park .ok-box { stroke: var(--okc); stroke-width: 3; }
.park .tq-stem.memo { padding: 18px; } .park .tq-stem.memo svg { max-height: 280px; }
.park .memo-bar { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.park .memo-bar span { display: block; height: 100%; width: 100%; background: var(--c3); transform-origin: left; animation: memoout linear forwards; }
@keyframes memoout { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.park .tq-opts.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.park .tq-opts.wide .tq-opt { aspect-ratio: 5 / 2; padding: 8px 10px 8px 34px; }
.park .tq-opts.wide .tq-opt svg { width: 100%; height: 100%; }
@media (max-width: 380px) { .park .tq-opts.wide { grid-template-columns: 1fr; } }
.park .tq-opts.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Süreli Deneme: sayaç son 10 sn; şık düzeni Günün Testi ile aynı */
/* Telefonda 2×2 şıklar ekrana sığmayabilir (kart boyu kalite kapısının 107 px ölçüsüne bağlı, küçültülmüyor): düğme altta sabit kalır */
.park .tq-opts.row4 ~ .tq-go { position: sticky; bottom: 0; padding: 12px 0 14px; background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 40%); z-index: 2; }
.park .dn-timer { min-width: 64px; text-align: center; font-weight: 800; font-size: 1.05rem; color: #fff; background: var(--badc); border-radius: 999px; padding: 4px 10px; }
.park .dn-timer[hidden] { display: none; }
.park .dn-rules { text-align: left; max-width: 34em; margin: 0 auto 12px; display: grid; gap: 6px; }
/* Çözümlü örnek (ilk karşılaşma) ve soru türleri kitaplığı */
.park .intro-new { display: block; font-size: .85rem; font-weight: 800; color: var(--c3); letter-spacing: .02em; margin-bottom: 4px; }
.park .intro-lead { text-align: center; font: 700 1rem/1.4 system-ui, sans-serif; color: var(--muted); margin: 0; }
.park .intro-tip { background: var(--soft); border-radius: 14px; padding: 10px 14px; font-weight: 700; }
.park .tstage.intro .tq-opt { cursor: default; }
.park .lib-b { width: 100%; display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 16px; padding: 12px 16px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); font: 800 1.1rem/1.2 var(--font); color: var(--ink); }
.park .lib-b small { font: 600 .85rem/1.2 system-ui, sans-serif; color: var(--muted); }
.park .lib-h { font-size: 1.4rem; margin: 0; }
.park .tiles.lib { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 10px; margin-top: 12px; }
.park .tiles.lib .lib-t { background: var(--surface); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); padding: 12px 8px; border-radius: 20px; }
.park .tiles.lib .lib-t b { font-size: 1.1rem; }
.park .tiles.lib .lib-t small { color: var(--muted); }
/* Kum Saati: kart (dolunca turuncu, dolmadan sade), hareketli kum saati */
.park .dn-home { background: linear-gradient(135deg, #b4611a, #8a4314); box-shadow: 0 6px 0 #5e2c0b; }
.park .dn-home .go-b { color: #8a4314; }
.park .dn-home.locked { background: var(--surface); color: var(--ink); box-shadow: 0 5px 0 var(--line); } .park .dn-home.locked small { color: var(--muted); }
.park .dn-home.locked:active { transform: none; }
.park .ks-ic { flex: none; width: 56px; height: 72px; display: grid; place-items: center; border-radius: 16px; }
.park .dn-home:not(.locked) .ks-ic { background: #fff4e2; }
.park .ks-count { font-weight: 800; font-size: 1.2rem; color: var(--muted); }
.park .ks-big { display: grid; place-items: center; animation: popin .6s ease-out; }
/* Sesli yönerge: 🔊 yeniden dinle (dokunma alanı ~44 px) */
.park .ask .say-b { display: inline-grid; place-items: center; vertical-align: middle; width: 2.1em; height: 2.1em; margin: -.3em 0 -.3em .4em; padding: 0; border: 0; border-radius: 50%; background: var(--surface); box-shadow: 0 3px 0 var(--line); font-size: max(.75em, 20px); line-height: 1; cursor: pointer; }
.park .say-b.sm { display: inline-grid; place-items: center; vertical-align: middle; width: 36px; height: 36px; margin: -4px 0 -4px 8px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 0 var(--line); font-size: 17px; line-height: 1; cursor: pointer; }
.park .say-all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 4px 0 8px; padding: 0 16px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 800 1rem/1 var(--font); cursor: pointer; }
.park .ask .say-b:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.park .dn-unlock { max-width: 520px; width: 100%; margin: 4px auto; text-align: left; animation: popin .6s ease-out .3s both; }
.park .dn-pts { max-width: 34em; margin: 0 auto 10px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, #b4611a 14%, var(--surface)); color: var(--ink); border: 2px solid color-mix(in srgb, #b4611a 40%, var(--surface)); font-weight: 700; }
.park .ks .ks-glass { fill: color-mix(in srgb, #9fd3ff 22%, transparent); stroke: #6f9fc4; stroke-width: 2; }
.park .ks .ks-wood { fill: #a0662f; }
.park .ks .ks-sand { fill: #f0b43c; }
.park .ks .ks-stream { stroke: #f0b43c; stroke-width: 1.8; stroke-dasharray: 2 2.5; opacity: 0; }
.park .ks.anim .ks-flip { transform-box: view-box; transform-origin: 50% 50%; animation: ks-flip 6s ease-in-out infinite; }
.park .ks.anim .ks-top, .park .ks.anim .ks-bot { transform-box: fill-box; transform-origin: 50% 100%; }
.park .ks.anim .ks-top { animation: ks-top 6s linear infinite; } .park .ks.anim .ks-bot { animation: ks-bot 6s linear infinite; }
.park .ks.anim .ks-stream { animation: ks-stream 6s linear infinite, ks-drip .5s linear infinite; }
@keyframes ks-top { 0% { transform: scaleY(1); } 80%, 100% { transform: scaleY(0); } }
@keyframes ks-bot { 0% { transform: scaleY(0); } 80%, 100% { transform: scaleY(1); } }
@keyframes ks-flip { 0%, 84% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
@keyframes ks-stream { 0%, 2% { opacity: 0; } 4%, 77% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes ks-drip { to { stroke-dashoffset: -9; } }
@media (prefers-reduced-motion: reduce) { .park .ks.anim * { animation: none !important; } .park .ks.anim .ks-bot { transform: scaleY(0); } }
.park .dn-review { display: grid; gap: 10px; text-align: left; width: 100%; }
.park .dn-item { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.park .dn-item.ok { border-color: color-mix(in srgb, var(--okc) 45%, var(--line)); } .park .dn-item.bad { border-color: color-mix(in srgb, var(--badc) 45%, var(--line)); }
.park .dn-item summary { cursor: pointer; font-weight: 800; } .park .dn-item summary small { font-weight: 600; color: var(--muted); }
.park .dn-m { display: inline-block; width: 1.4em; text-align: center; }
.park .dn-item .tq-opts { margin-top: 8px; } .park .dn-item .tq-opt { cursor: default; }

/* ===== Seviye Tespiti: çocuk ve veli ekranları ===== */
.park .daily.tsp-home { background: linear-gradient(135deg, #0b7a78, #17a5a0); box-shadow: 0 6px 0 #075452; }
.park .daily.tsp-home .em { font-family: var(--emoji); }
.park .daily.tsp-home .go-b { color: #0b7a78; }
.park .daily.tsp-home.tsp-done-card { background: var(--surface); color: var(--ink); border: 3px solid #0b7a78; box-shadow: 0 5px 0 var(--line); }
.park .tsp-done-card small { color: var(--muted); } .park .daily.tsp-home.tsp-done-card .go-b { background: #0b7a78; color: #fff; }
.park .tsp-done-card .dtext b { font-size: 1.3rem; }
.park .tsp-info { max-width: 44rem; margin: 0 auto; }
.park .tsp-card { background: var(--surface); border-radius: 24px; padding: 18px 18px 20px; display: grid; gap: 14px; box-shadow: 0 5px 0 var(--line); text-align: left; font: 500 1rem/1.5 system-ui, sans-serif; }
.park .tsp-card p { margin: 0; } .park .tsp-card h2 { font: 800 1.5rem/1.15 var(--font); }
.park .tsp-eyebrow { font: 800 .78rem/1.2 system-ui, sans-serif !important; letter-spacing: .08em; text-transform: uppercase; color: #0b7a78; }
.park .tsp-rules { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.park .tsp-field { display: grid; gap: 8px; font-weight: 700; } .park .tsp-field small { font-weight: 500; color: var(--muted); }
.park .tsp-field input { font: 600 1.1rem/1.2 system-ui, sans-serif; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; user-select: text; -webkit-user-select: text; }
.park .tsp-field input:focus { outline: 3px solid #0b7a78; outline-offset: 1px; }
.park .tsp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.park .tsp-chip { min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--bg); border: 3px solid var(--line); font: 800 1.05rem/1 var(--font); }
.park .tsp-chip[aria-checked="true"] { background: #0b7a78; border-color: #0b7a78; color: #fff; }
.park .tsp-small { font: 500 .85rem/1.4 system-ui, sans-serif; color: var(--muted); margin: 0; }
.park .tsp-warn { padding: 10px 12px; border-radius: 12px; background: var(--soft); font-weight: 700; }
.park .tsp-howto { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; font: 700 1rem/1.3 system-ui, sans-serif; }
.park .tsp-howto li { display: flex; align-items: center; gap: 8px; background: var(--soft); border-radius: 999px; padding: 6px 14px 6px 6px; }
.park .tsp-howto b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c3); color: #fff; font: 800 .95rem/1 var(--font); flex: none; }
/* Onay düğmesi telefonda 2×2 şıkların altında kalmasın: altta sabit */
.park .tsp .tq-go { position: sticky; bottom: 0; z-index: 2; flex-wrap: wrap; gap: 10px; padding: 12px 0 14px; background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 40%); }
.park .tsp-skipw { display: flex; justify-content: center; margin-top: -6px; }
.park .tsp-skip { min-height: 52px; font-size: 1.1rem; } .park .tsp-skip[hidden] { display: none; }
.park .tsp-next { margin: 0; min-height: 64px; display: grid; place-items: center; font: 800 1.5rem/1.2 var(--font); color: #0b7a78; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .park .tsp-next, :root:not([data-theme="light"]) .park .tsp-eyebrow { color: #3cc0bc; } }
:root[data-theme="dark"] .park .tsp-next, :root[data-theme="dark"] .park .tsp-eyebrow { color: #3cc0bc; }
.park .tsp-done .tsp-card { width: min(100%, 36rem); }
.park .tsp-done > .tsp-small { text-align: center; max-width: 30em; }
.park .tsp-veli .big-btn:disabled { opacity: .45; box-shadow: none; cursor: default; }

/* ===== Seviye tespit raporu (veli): tasarim/ornek-rapor.html görünümü, .rp altında kapsüllü ===== */
.park .rp { --bg: #e8f1f2; --surface: #ffffff; --surface-2: #f2f7f8; --line: #cfdfe3; --ink: #16313a; --muted: #4f6b74; --accent: #0b7a78; --accent-ink: #ffffff; --accent-soft: #d5eeec;
  --ok: #1b9355; --ok-soft: #e1f4e8; --ok-ink: #11663a; --sun: #e39a1f; --sun-soft: #fdf0d8; --sun-ink: #7d5100; --bad: #cc4636; --bad-soft: #fbe6e2; --bad-ink: #a13325;
  --na: #7f969c; --na-soft: #eef3f4; --shape-hl: #f0a531; --band: #16313a; --band-ink: #fdf0d8; --paper: #ffffff; --soft: #f2f7f8;
  --font-display: "Baloo 2", "Nunito", system-ui, sans-serif; --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 16px; --shadow: 0 1px 0 rgba(22, 49, 58, .06), 0 10px 26px -16px rgba(22, 49, 58, .3);
  color: var(--ink); font: 400 17px/1.55 var(--font-body); user-select: text; -webkit-user-select: text; overflow-wrap: break-word; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .park .rp {
  --bg: #0e1d22; --surface: #152a31; --surface-2: #1b333b; --line: #2c4a53; --ink: #e5f0f2; --muted: #9ab4bb; --accent: #3cc0bc; --accent-ink: #052022; --accent-soft: #173f42;
  --ok: #4ac784; --ok-soft: #173a29; --ok-ink: #8fe0b5; --sun: #f6bc58; --sun-soft: #3a3020; --sun-ink: #f6c875; --bad: #f07b6b; --bad-soft: #3f221e; --bad-ink: #f7a598;
  --na: #87a0a7; --na-soft: #1b333b; --shape-hl: #f6bc58; --band: #f6bc58; --band-ink: #1a1405; --paper: #152a31; --soft: #1b333b;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 12px 28px -16px rgba(0, 0, 0, .7); color-scheme: dark; }
  :root:not([data-theme="light"]) .park:has(> .rp) { background: #0e1d22; } }
:root[data-theme="dark"] .park .rp {
  --bg: #0e1d22; --surface: #152a31; --surface-2: #1b333b; --line: #2c4a53; --ink: #e5f0f2; --muted: #9ab4bb; --accent: #3cc0bc; --accent-ink: #052022; --accent-soft: #173f42;
  --ok: #4ac784; --ok-soft: #173a29; --ok-ink: #8fe0b5; --sun: #f6bc58; --sun-soft: #3a3020; --sun-ink: #f6c875; --bad: #f07b6b; --bad-soft: #3f221e; --bad-ink: #f7a598;
  --na: #87a0a7; --na-soft: #1b333b; --shape-hl: #f6bc58; --band: #f6bc58; --band-ink: #1a1405; --paper: #152a31; --soft: #1b333b;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 12px 28px -16px rgba(0, 0, 0, .7); color-scheme: dark; }
.park:has(> .rp) { background: #e8f1f2; }
:root[data-theme="dark"] .park:has(> .rp) { background: #0e1d22; }
.park:has(> .rp) { padding-top: 0; }
.park .rp .wrap { max-width: 50rem; margin-inline: auto; }
.park .rp h1, .park .rp h2, .park .rp h3, .park .rp h4 { margin: 0; text-wrap: balance; }
.park .rp h1, .park .rp h2, .park .rp h3 { font-family: var(--font-display); line-height: 1.15; }
.park .rp h1 { font-size: clamp(1.9rem, 5.5vw, 2.85rem); font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.park .rp h2 { font-size: clamp(1.4rem, 3.4vw, 1.75rem); font-weight: 700; }
.park .rp h3 { font-size: 1.12rem; font-weight: 700; }
.park .rp p { margin: 0; }
.park .rp :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.park .rp .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.park .rp .eyebrow { font: 800 .76rem/1.2 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.park .rp .lede { color: var(--muted); max-width: 40em; }
.park .rp .band { background: var(--band); color: var(--band-ink); font-size: .9rem; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.park .rp .band .wrap { padding-block: 9px; }
@media (min-width: 57rem) { .park .rp .band { margin-inline: 0; border-radius: 0 0 12px 12px; } }
.park .rp-bar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 14px; }
.park .rp-tb { min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: 800 .95rem/1 var(--font-body); }
.park .rp-tb:hover { border-color: var(--accent); }
.park .rp .head { display: grid; gap: 10px; padding-block: 22px 4px; }
.park .rp .brand { display: flex; align-items: center; gap: 10px; font: 800 1.3rem/1 var(--font-display); color: var(--accent); }
.park .rp .brand svg { width: 26px; height: 26px; flex: none; }
.park .rp .meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .95rem; }
.park .rp .meta b { color: var(--ink); font-weight: 800; }
.park .rp-main { display: grid; gap: 52px; padding-block: 30px 40px; }
.park .rp-main > section { display: grid; gap: 16px; min-width: 0; }
.park .rp .status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 7px; border-radius: 999px; font-weight: 800; font-size: .82rem; line-height: 1.4; white-space: nowrap; }
.park .rp .status svg { width: 14px; height: 14px; flex: none; }
.park .rp .s-rahat { background: var(--ok-soft); color: var(--ok-ink); }
.park .rp .s-gelisiyor { background: var(--sun-soft); color: var(--sun-ink); }
.park .rp .s-birlikte { background: var(--bad-soft); color: var(--bad-ink); }
.park .rp .s-yetersiz { background: var(--na-soft); color: var(--muted); box-shadow: inset 0 0 0 1px var(--na); }
.park .rp .sumcard { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: grid; gap: 16px; }
.park .rp .summary { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.park .rp .summary li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; }
.park .rp .summary li > svg { width: 18px; height: 18px; margin-top: 4px; }
.park .rp .summary .g-ok { color: var(--ok); } .park .rp .summary .g-focus { color: var(--bad); } .park .rp .summary .g-also { color: var(--sun); }
.park .rp .counts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.park .rp .cond { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 680px) { .park .rp .cond { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.park .rp .cond div { background: var(--surface); padding: 12px 14px; display: grid; gap: 3px; align-content: start; }
.park .rp .cond dt { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.park .rp .cond dd { margin: 0; font-weight: 700; font-size: .98rem; }
.park .rp .note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: var(--muted); font-size: .95rem; }
.park .rp .note svg { width: 18px; height: 18px; margin-top: 3px; color: var(--sun); }
.park .rp .statlegend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; color: var(--muted); }
.park .rp .statlegend li { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); align-items: center; gap: 12px; }
.park .rp .statlegend .status { justify-self: start; }
@media (max-width: 600px) { .park .rp .statlegend { gap: 10px; } .park .rp .statlegend li { grid-template-columns: minmax(0, 1fr); gap: 3px; } }
.park .rp .marklegend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; color: var(--muted); }
.park .rp .marklegend li { display: flex; align-items: center; gap: 6px; }
.park .rp .marklegend svg { width: 16px; height: 16px; flex: none; }
.park .rp .areas { display: grid; gap: 24px; margin-top: 4px; }
.park .rp .area { display: grid; gap: 10px; }
.park .rp .rp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 660px) { .park .rp .rp-pair { grid-template-columns: minmax(0, 1fr); } }
.park .rp .tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.park .rp .tcard header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.park .rp .tcard h4 { font: 800 1.08rem/1.25 var(--font-body); }
.park .rp .what { color: var(--muted); font-size: .9rem; }
.park .rp .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.park .rp .steps li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); font-size: .84rem; font-weight: 800; }
.park .rp .steps svg { width: 18px; height: 18px; flex: none; }
.park .rp .mk-ok svg { color: var(--ok); } .park .rp .mk-no svg { color: var(--bad); } .park .rp .mk-q svg { color: var(--na); } .park .rp .mk-q { color: var(--muted); }
.park .rp .obs { font-size: .95rem; }
.park .rp .obs-note { font-size: .84rem; color: var(--muted); }
.park .rp .errs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.park .rp .errs > li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.park .rp .errs > li > div { display: grid; gap: 4px; }
.park .rp .cnt { display: grid; justify-items: center; line-height: 1; padding-top: 2px; }
.park .rp .cnt b { font: 800 2rem/1 var(--font-display); color: var(--bad-ink); font-variant-numeric: tabular-nums; }
.park .rp .cnt span { font-size: .78rem; font-weight: 800; color: var(--muted); margin-top: 4px; }
.park .rp .errs h3 { font: 800 1.02rem/1.3 var(--font-body); }
.park .rp .errs p { color: var(--muted); font-size: .93rem; }
.park .rp .errs .rp-ptx { color: var(--ink); }
.park .rp .rp-tipline { font-size: .93rem; color: var(--ink) !important; background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; margin-top: 4px; }
.park .rp .rp-empty { color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px 16px; }
.park .rp .qpanel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: grid; gap: 16px; min-width: 0; }
.park .rp .qhead { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .9rem; color: var(--muted); font-weight: 700; }
.park .rp .qtext { font-weight: 800; font-size: 1.08rem; }
.park .rp .qsub { color: var(--muted); font-weight: 700; }
.park .rp .qtarget { display: grid; place-items: center; padding: 14px; background: var(--surface-2); border-radius: 12px; }
.park .rp .qtarget svg { width: 100%; max-width: 340px; max-height: 260px; height: auto; }
.park .rp .qtarget.wide svg { max-width: 100%; max-height: 200px; }
.park .rp .qopts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .park .rp .qopts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.park .rp .qopts.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.park .rp .qopts li { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 10px 8px 12px; border: 2px solid var(--line); border-radius: 14px; min-width: 0; }
.park .rp .qopts li.right { border-color: var(--ok); } .park .rp .qopts li.picked { border-color: var(--bad); }
.park .rp .qopts svg { width: 100%; max-width: 110px; height: auto; aspect-ratio: 1; }
.park .rp .qopts.wide svg { max-width: 100%; aspect-ratio: auto; }
.park .rp .optk { justify-self: start; font: 800 .95rem/1 var(--font-body); color: var(--muted); }
.park .rp .tag { font-size: .76rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; text-align: center; }
.park .rp .tag.ok { background: var(--ok-soft); color: var(--ok-ink); } .park .rp .tag.no { background: var(--bad-soft); color: var(--bad-ink); }
.park .rp .qexplain { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.park .rp .qexplain p { max-width: 42em; }
.park .rp .rp-quote { border-left: 4px solid var(--accent); padding: 4px 0 4px 12px; font-weight: 700; }
.park .rp .rp-how .tq-steps { margin: 0; padding-left: 1.4rem; display: grid; gap: 12px; }
.park .rp .rp-how .tq-steps li p { margin: 0 0 6px; font-size: .97rem; } .park .rp .rp-how .tq-steps b { font-weight: 800; }
.park .rp .rp-how .tq-vis { display: grid; place-items: center; background: var(--surface-2); border-radius: 12px; padding: 8px; }
.park .rp .rp-how .tq-vis svg { width: 100%; max-width: 320px; max-height: 200px; height: auto; }
.park .rp .acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .park .rp .acts { grid-template-columns: minmax(0, 1fr); } }
.park .rp .act { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.park .rp .act .for { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.park .rp .act .mat { font-size: .9rem; color: var(--muted); }
.park .rp .act ol { margin: 0; padding-left: 1.25em; display: grid; gap: 5px; font-size: .95rem; }
.park .rp .weeks { list-style: none; margin: 0; padding: 0; display: grid; }
.park .rp .weeks li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.park .rp .weeks li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 400px) { .park .rp .weeks li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.park .rp .wk { font: 800 1.05rem/1.4 var(--font-display); color: var(--accent); }
.park .rp .weeks h3 { font: 800 1.02rem/1.35 var(--font-body); }
.park .rp .weeks p { color: var(--muted); font-size: .95rem; margin-top: 2px; }
.park .rp .rp-daily, .park .rp .rp-start { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; }
.park .rp .rp-daily ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
@media (max-width: 600px) { .park .rp .rp-daily ul { grid-template-columns: minmax(0, 1fr); } }
.park .rp .rp-daily li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: .95rem; }
.park .rp .rp-daily li svg { width: 16px; height: 16px; margin-top: 4px; color: var(--accent); }
.park .rp .rp-start > p { color: var(--muted); font-size: .93rem; }
.park .rp .rp-start ul { list-style: none; margin: 0; padding: 0; display: grid; }
.park .rp .rp-start li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.park .rp .rs-n { font-weight: 800; } .park .rp .rs-d { font-weight: 700; font-size: .9rem; text-align: right; min-width: 9.5em; }
@media (max-width: 520px) { .park .rp .rp-start li { grid-template-columns: minmax(0, 1fr) auto; } .park .rp .rs-d { grid-column: 1 / -1; text-align: left; min-width: 0; color: var(--muted); } }
.park .rp .expect { max-width: 44em; }
.park .rp .offer { background: var(--accent-soft); border-radius: var(--radius); padding: 22px; display: grid; gap: 14px; }
.park .rp .offer ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.park .rp .price { font: 800 1.35rem/1.2 var(--font-display); }
.park .rp .terms { color: var(--muted); font-size: .95rem; }
.park .rp .btn { justify-self: start; display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 800 1.02rem/1 var(--font-body); cursor: pointer; transition: filter .15s ease; }
.park .rp .btn:hover { filter: brightness(1.08); }
.park .rp .offer-note { font-size: .9rem; color: var(--muted); }
.park .rp .price span { font-weight: 700; font-size: 1.05rem; }
.park .rp .price-sub { margin-top: -8px; color: var(--muted); font-size: .95rem; }
.park .rp .offer-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.park .rp .btn.rp-alt { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.park .rp .rp-link { justify-self: start; background: none; border: 0; padding: 4px 0; color: var(--accent); font: 800 1rem var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.park .rp .not { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; max-width: 44em; }
.park .rp details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 18px; }
.park .rp summary { cursor: pointer; padding: 14px 0; font-weight: 800; }
.park .rp details ul { margin: 0 0 18px; padding-left: 1.2em; display: grid; gap: 6px; font-size: .95rem; max-width: 44em; }
.park .rp-foot { padding-block: 8px 24px; color: var(--muted); font-size: .88rem; }
@media print {
  @page { margin: 14mm 12mm; }
  .park, .park, .park:has(> .rp) { background: #fff !important; }
  .park { max-width: none; padding: 0 !important; min-height: 0; }
  .park .rp { --bg: #fff; --surface: #fff; --surface-2: #f2f7f8; --line: #cfdfe3; --ink: #16313a; --muted: #4f6b74; --accent: #0b7a78; --accent-soft: #e3f3f2;
    --ok: #1b9355; --ok-soft: #e1f4e8; --ok-ink: #11663a; --sun: #e39a1f; --sun-soft: #fdf0d8; --sun-ink: #7d5100; --bad: #cc4636; --bad-soft: #fbe6e2; --bad-ink: #a13325;
    --na: #7f969c; --na-soft: #eef3f4; --shape-hl: #f0a531; --paper: #fff; --soft: #f2f7f8; --shadow: none;
    --sh-blue: #2d6bd6; --sh-orange: #dc6418; --sh-green: #218e55; --sh-purple: #7550cf; --sh-pink: #cc3a74; --sh-teal: #0d8486; --okc: #1b9355; --badc: #cc4636; --hl: #e3590b;
    font-size: 11pt; color-scheme: light; }
  .park .rp * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .park .rp-noprint, .park .rp .band { display: none !important; }
  .park .rp-main { gap: 26px; padding-block: 16px 10px; }
  .park .rp h2 { break-after: avoid; }
  .park .rp .sumcard, .park .rp .tcard, .park .rp .act, .park .rp .errs > li, .park .rp .qpanel, .park .rp .weeks li, .park .rp .rp-daily, .park .rp .rp-start, .park .rp .cond, .park .rp .offer, .park .rp details { break-inside: avoid; }
  .park .rp .sumcard, .park .rp .qpanel { border: 1px solid var(--line); }
}

/* Bitiş */
.park .done { display: grid; justify-items: center; gap: 18px; padding-top: 40px; text-align: center; }
.park .sticker { font-family: var(--emoji); font-size: 140px; line-height: 1; animation: popin .6s ease-out, bob 2s ease-in-out .6s infinite; }
.park .done h1 { font-size: 2.4rem; color: var(--c0); }
.park .row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.park .big-btn { min-height: 64px; padding: 0 28px; border-radius: 999px; background: var(--c2); color: #fff; font-size: 1.4rem; font-weight: 800; box-shadow: 0 6px 0 rgba(0, 0, 0, .18); }
.park .big-btn.soft { background: var(--surface); color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .park *, .park *::before, .park *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }