/* Piksir v4 — üç kimlik önerisi (D65): Atölye (mühendis), Oyuncak Kutusu (oyuncu), Masal Kitabı (hikâyeci).
   canli.css'in (v3 Aurora katmanı) ÜSTÜNE biner; yalnız html[data-tema="atolye"|"oyuncak"|"masal"] altında etkilidir.
   Yalnız ana sayfa ve /marka/ bağlar (seçim yapılana dek site teması Aurora). Logo: shared/services/markaLogo.js.
   Hareket kuralları canli.css §12 ile aynı: hareket azaltma / Sakin mod / efekt-az → akış, iz, eğilme, bulanıklık kapanır. */

/* =================================================================== 0. Token'lar */
html[data-tema="atolye"] {
  --c-metin: #E8FBFF; --c-metin-2: #A5C8D1; --c-zemin: #051318;
  --c-v1: #B6FF3B; --c-v1b: #62E000; --c-v2: #2EF2FF; --c-v2b: #00A3C4; --c-v3: #2EF2FF; --c-v4: #FF3DAE;
  --c-cam: rgba(8, 40, 48, .58); --c-cam-kenar: rgba(46, 242, 255, .32); --c-golge: 0, 0, 0; --c-isik: 46, 242, 255;
  --c-baslik-1: #FFFFFF; --c-baslik-2: #2EF2FF; --c-baslik-3: #B6FF3B;
  --c-sahne: url("../../../assets/v4/sahne/atolye.webp"); --c-sahne-k: url("../../../assets/v4/sahne/atolye-960.webp");
  --c-sahne-ort: linear-gradient(90deg, rgba(5,19,24,.97) 0%, rgba(5,19,24,.82) 36%, rgba(5,19,24,0) 64%);
  --spark-goz: #C9FFFF; --spark-goz-koyu: #2EF2FF;
  --spk-g1: #F2FBFD; --spk-g2: #A9C3CB; --spk-g3: #4E6A73; --spk-c: #03141A; --spk-v1: #06262E; --spk-v2: #000A0D;
  --spk-a1: #F4FFD0; --spk-a2: #8CF000; --spk-m: #B6FF3B; --spk-y: #FF3DAE;
  --v2-ink: #E8FBFF; --v2-ink-2: #A5C8D1; --v2-ink-3: #5E8790; --v2-paper: #051318; --v2-surface: rgba(8, 40, 48, .62);
  --v2-sunken: rgba(46, 242, 255, .06); --v2-line: rgba(46, 242, 255, .24); --v2-grid: rgba(46, 242, 255, .10);
  --v2-link: #2EF2FF; --v2-on-ink: #051318; --v2-shadow-color: rgba(0, 0, 0, .55);
  --v2-yellow: #B6FF3B; --v2-yellow-ink: #D8FF8A; --v2-yellow-tint: rgba(182, 255, 59, .12);
  --v2-blue: #2EF2FF; --v2-blue-ink: #8CF8FF; --v2-blue-tint: rgba(46, 242, 255, .12);
  --v2-font-display: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", monospace;
}
html[data-tema="oyuncak"] {
  --c-metin: #2B1B3D; --c-metin-2: #5A4A6E; --c-zemin: #FFF6E9;
  --c-v1: #FFC21A; --c-v1b: #FF9A00; --c-v2: #FF5A36; --c-v2b: #E8411E; --c-v3: #1E9BFF; --c-v4: #1FBF6A;
  --c-cam: #FFFFFF; --c-cam-kenar: #2B1B3D; --c-golge: 43, 27, 61; --c-isik: 255, 194, 26;
  --c-baslik-1: #2B1B3D; --c-baslik-2: #E8411E; --c-baslik-3: #7340F2;
  --c-sahne: url("../../../assets/v4/sahne/oyuncak.webp"); --c-sahne-k: url("../../../assets/v4/sahne/oyuncak-960.webp");
  --c-sahne-ort: linear-gradient(90deg, rgba(255,246,233,.98) 0%, rgba(255,246,233,.85) 36%, rgba(255,246,233,0) 62%);
  --spark-goz: #C9FBFF; --spark-goz-koyu: #2FC8FF;
  --spk-g1: #FFFFFF; --spk-g2: #FFF4DE; --spk-g3: #FFD6A0; --spk-c: #2B1B3D; --spk-v1: #33204A; --spk-v2: #1A1030;
  --spk-a1: #FFC7B8; --spk-a2: #FF5A36; --spk-m: #FFC21A; --spk-y: #FF8FA3;
  --v2-paper: #FFF6E9; --v2-ink: #2B1B3D; --v2-ink-2: #5A4A6E; --v2-shadow-color: #2B1B3D;
  --v2-font-display: "Atkinson Hyperlegible Next", system-ui, sans-serif;
}
html[data-tema="masal"] {
  --c-metin: #2E1A3F; --c-metin-2: #5E4370; --c-zemin: #FFF1E0;
  --c-v1: #FFB86B; --c-v1b: #FF6F59; --c-v2: #F25F8E; --c-v2b: #C2407A; --c-v3: #2EC4B6; --c-v4: #FFD166;
  --c-cam: #FFF8EE; --c-cam-kenar: rgba(58, 31, 77, .16); --c-golge: 90, 40, 60; --c-isik: 255, 184, 107;
  --c-baslik-1: #3A1F4D; --c-baslik-2: #D23C5C; --c-baslik-3: #B4521C;
  --c-sahne: url("../../../assets/v4/sahne/masal.webp"); --c-sahne-k: url("../../../assets/v4/sahne/masal-960.webp");
  --c-sahne-ort: linear-gradient(90deg, rgba(255,241,224,.92) 0%, rgba(255,241,224,.66) 36%, rgba(255,241,224,0) 62%);
  --spark-goz: #FFF1B8; --spark-goz-koyu: #FFC23D;
  --spk-g1: #FFF6E8; --spk-g2: #FFEBD0; --spk-g3: #F4CFA0; --spk-c: #3A1F4D; --spk-v1: #6A3592; --spk-v2: #3A1F4D;
  --spk-a1: #FFD0B0; --spk-a2: #FF6F59; --spk-m: #FFB86B; --spk-y: #F25F8E;
  --v2-paper: #FFF1E0; --v2-surface: #FFF8EE; --v2-sunken: #F7E6D2; --v2-ink: #2E1A3F; --v2-ink-2: #5E4370; --v2-line: rgba(58,31,77,.18);
  --v2-shadow-color: rgba(90, 40, 60, .35);
}

/* =================================================================== 1. Ortak: logo değişimi, zemin */
html.canli .v2-brand .marka-logo { display: none; }
html.canli[data-logo] .v2-brand > svg, html.canli[data-logo] .v2-brand > span:not(.marka-logo) { display: none; }
html.canli[data-logo] .v2-brand .marka-logo { display: inline-flex; align-items: center; }
html.canli[data-logo] .v2-brand .marka-logo svg { width: auto; height: 48px; overflow: visible; }
html.canli[data-logo] .v2-sitefoot .v2-brand .marka-logo svg { height: 40px; }
@media (max-width: 420px) { html.canli[data-logo] .v2-topbar .v2-brand .marka-logo svg { height: 40px; } }
html.canli[data-logo] .marka-logo .ml-isaret { transition: transform .5s cubic-bezier(.2,1.6,.4,1); transform-origin: 60px 60px; transform-box: view-box; }
html.canli[data-logo] .v2-brand:hover .ml-isaret { transform: rotate(-8deg) scale(1.08); }

html[data-tema="atolye"].canli body.v2-page {
  background: radial-gradient(900px 600px at 80% -10%, rgba(46,242,255,.16), transparent 60%),
              radial-gradient(700px 500px at -10% 60%, rgba(182,255,59,.08), transparent 60%),
              linear-gradient(rgba(46,242,255,.05) 1px, transparent 1px) 0 0 / 32px 32px,
              linear-gradient(90deg, rgba(46,242,255,.05) 1px, transparent 1px) 0 0 / 32px 32px, #051318;
}
html[data-tema="oyuncak"].canli body.v2-page {
  background: radial-gradient(circle at 12px 12px, rgba(43,27,61,.07) 2.2px, transparent 2.6px) 0 0 / 28px 28px, #FFF6E9;
}
html[data-tema="masal"].canli body.v2-page {
  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(255,184,107,.35), transparent 60%),
    repeating-linear-gradient(17deg, rgba(90,40,60,.025) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #FFE7CF, #FFF1E0 600px);
}

/* =================================================================== 2. ATÖLYE — neon robot laboratuvarı */
html[data-tema="atolye"].canli h1, html[data-tema="atolye"].canli h2, html[data-tema="atolye"].canli h3 { font-family: var(--v2-font-display); letter-spacing: -.02em; }
html[data-tema="atolye"].canli .hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); text-shadow: 0 0 24px rgba(46,242,255,.25); }
html[data-tema="atolye"].canli .renkli {
  background-image: linear-gradient(100deg, #2EF2FF, #B6FF3B 40%, #2EF2FF 70%, #FF3DAE);
  filter: drop-shadow(0 0 14px rgba(46,242,255,.55));
}
html[data-tema="atolye"].canli .v2-tag, html[data-tema="atolye"].canli .eyebrow {
  font-family: var(--v2-font-mono); background: rgba(46,242,255,.08); color: #8CF8FF; border: 1px solid rgba(46,242,255,.5); border-radius: 6px;
}
html[data-tema="atolye"].canli .v2-tag::before, html[data-tema="atolye"].canli .eyebrow::before { content: "> "; color: #B6FF3B; }
html[data-tema="atolye"].canli .v2-tag::after, html[data-tema="atolye"].canli .eyebrow::after {
  content: ""; display: inline-block; width: .55em; height: 1em; margin-left: 4px; vertical-align: -2px; background: #B6FF3B; animation: imlecYan 1.1s steps(1) infinite;
}
@keyframes imlecYan { 50% { opacity: 0; } }
html[data-tema="atolye"].canli .v2-btn--primary {
  color: #03141A; background: linear-gradient(180deg, #E4FF9E, #B6FF3B 45%, #62E000);
  box-shadow: 0 0 0 1px rgba(182,255,59,.8), 0 0 26px -2px rgba(182,255,59,.7), 0 1px 0 rgba(255,255,255,.7) inset; border-radius: 12px;
}
html[data-tema="atolye"].canli .v2-btn:not(.v2-btn--primary) {
  color: #E8FBFF; background: rgba(46,242,255,.06); border: 1px solid rgba(46,242,255,.55); border-radius: 12px;
  box-shadow: 0 0 18px -8px rgba(46,242,255,.9) inset;
}
/* Köşe parantezli holografik paneller */
html[data-tema="atolye"].canli .v2-card, html[data-tema="atolye"].canli .verb, html[data-tema="atolye"].canli .step,
html[data-tema="atolye"].canli .stats li, html[data-tema="atolye"].canli .grade {
  border-radius: 14px; border: 1px solid rgba(46,242,255,.28);
  background: linear-gradient(160deg, rgba(14,54,64,.72), rgba(4,20,26,.72));
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 24px 50px -24px rgba(0,0,0,.8), 0 0 30px -18px rgba(46,242,255,.8) inset;
  --kose: linear-gradient(#2EF2FF, #2EF2FF);
  background-image:
    linear-gradient(#2EF2FF, #2EF2FF), linear-gradient(#2EF2FF, #2EF2FF), linear-gradient(#B6FF3B, #B6FF3B), linear-gradient(#B6FF3B, #B6FF3B),
    linear-gradient(160deg, rgba(14,54,64,.72), rgba(4,20,26,.72));
  background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px, auto;
  background-position: 8px 8px, 8px 8px, calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), 0 0;
  background-repeat: no-repeat;
}
html[data-tema="atolye"].canli .verb h3, html[data-tema="atolye"].canli .verb p, html[data-tema="atolye"].canli .grade__title,
html[data-tema="atolye"].canli .grade__num, html[data-tema="atolye"].canli .verb small { color: var(--c-metin); }
html[data-tema="atolye"].canli .verb__ic, html[data-tema="atolye"].canli .grade__ic, html[data-tema="atolye"].canli .facts li > span {
  background: rgba(46,242,255,.1); border: 1px solid rgba(46,242,255,.6); box-shadow: 0 0 16px -4px rgba(46,242,255,.8);
}
html[data-tema="atolye"].canli .verb__ic .v2-icon, html[data-tema="atolye"].canli .facts .v2-icon { color: #2EF2FF; }
html[data-tema="atolye"].canli [data-tilt]:hover { box-shadow: 0 0 0 1px rgba(46,242,255,.7), 0 0 40px -6px rgba(46,242,255,.6), 0 30px 60px -24px rgba(0,0,0,.9); }
/* Tarama çizgisi: kartın üstünden bir kez geçer */
html[data-tema="atolye"].canli [data-tilt]::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none; border-radius: inherit; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(46,242,255,.18), transparent);
}
html[data-tema="atolye"].canli [data-tilt]:hover::after { animation: tara 1.1s ease-out; }
@keyframes tara { 0% { opacity: 1; transform: translateY(-100%); } 100% { opacity: 0; transform: translateY(260%); } }
html[data-tema="atolye"].canli .step::before { background: transparent; color: #B6FF3B; border: 1px solid #B6FF3B; box-shadow: 0 0 14px -2px rgba(182,255,59,.8); font-family: var(--v2-font-mono); border-radius: 8px; }
html[data-tema="atolye"].canli .stats b { background-image: linear-gradient(90deg, #2EF2FF, #B6FF3B); filter: drop-shadow(0 0 10px rgba(46,242,255,.5)); font-family: var(--v2-font-mono); }
html[data-tema="atolye"].canli .v2-topbar { background: rgba(5,19,24,.62); border-bottom: 1px solid rgba(46,242,255,.25); }
html[data-tema="atolye"].canli .v2-topbar__nav a::after { background: linear-gradient(90deg, #2EF2FF, #B6FF3B); box-shadow: 0 0 10px #2EF2FF; }
html[data-tema="atolye"].canli .v2-bottomnav, html[data-tema="atolye"].canli .v2-sitefoot { background: rgba(5,19,24,.8); }
html[data-tema="atolye"].canli .v2-bottomnav a[aria-current="page"] { color: #03141A; background: #B6FF3B; }
/* Devre akışı (canliTema.js .devre SVG'si) */
.devre { position: absolute; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; }
.devre path { fill: none; stroke: rgba(46,242,255,.18); stroke-width: 1.5; }
.devre .devre__akis { stroke: #2EF2FF; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 26 1200; filter: drop-shadow(0 0 6px #2EF2FF); animation: devreAk 4.5s linear infinite; }
.devre .devre__akis:nth-of-type(3n) { stroke: #B6FF3B; filter: drop-shadow(0 0 6px #B6FF3B); }
.devre .devre__akis:nth-of-type(4n) { stroke: #FF3DAE; filter: drop-shadow(0 0 6px #FF3DAE); }
.devre circle { fill: #051318; stroke: rgba(46,242,255,.55); stroke-width: 1.5; }
@keyframes devreAk { from { stroke-dashoffset: 1226; } to { stroke-dashoffset: 0; } }
/* Mini oyun: holografik konsol */
html[data-tema="atolye"].canli .isikli.isikli {
  border-radius: 18px; border: 1px solid rgba(46,242,255,.5);
  background: linear-gradient(160deg, rgba(10,48,58,.88), rgba(3,16,21,.92)) padding-box, conic-gradient(from var(--aci, 0deg), #2EF2FF, #B6FF3B, #FF3DAE, #2EF2FF) border-box;
  border: 2px solid transparent; box-shadow: 0 0 60px -20px rgba(46,242,255,.9), 0 40px 80px -30px rgba(0,0,0,.9);
}
html[data-tema="atolye"].canli .play .v2-bubble { background: rgba(46,242,255,.08); border-color: rgba(46,242,255,.5); color: #E8FBFF; font-family: var(--v2-font-mono); }
html[data-tema="atolye"].canli .board {
  transform: perspective(700px) rotateX(24deg); background-color: rgba(0,10,13,.9); border-radius: 12px;
  background-image: linear-gradient(rgba(46,242,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(46,242,255,.35) 1px, transparent 1px);
  box-shadow: 0 0 0 1px rgba(46,242,255,.6), 0 0 40px -6px rgba(46,242,255,.7), 0 22px 0 -10px rgba(46,242,255,.25);
}
html[data-tema="atolye"].canli .board__wall::before {
  background: linear-gradient(180deg, rgba(255,61,174,.35), rgba(255,61,174,.08)); border: 1.5px solid #FF3DAE; border-radius: 6px;
  box-shadow: 0 0 18px -2px rgba(255,61,174,.9), 0 8px 0 -2px rgba(255,61,174,.35), 0 0 0 1px rgba(255,61,174,.3) inset; background-image: none;
}
html[data-tema="atolye"].canli .board__star .v2-icon { --v2-icon-fill: #B6FF3B; color: #E4FF9E; filter: drop-shadow(0 0 12px #B6FF3B); }
html[data-tema="atolye"].canli .palette .v2-block, html[data-tema="atolye"].canli .prog .v2-block {
  color: #E8FBFF; background: linear-gradient(180deg, rgba(46,242,255,.16), rgba(46,242,255,.04)); border: 1px solid rgba(46,242,255,.6); border-radius: 10px;
  box-shadow: 0 5px 0 rgba(0,163,196,.55), 0 0 16px -6px rgba(46,242,255,.9); font-family: var(--v2-font-mono);
}
html[data-tema="atolye"].canli .palette .v2-block:hover { box-shadow: 0 8px 0 rgba(0,163,196,.55), 0 0 26px -2px rgba(46,242,255,1); }
html[data-tema="atolye"].canli .prog { background: rgba(0,10,13,.6); border: 1px dashed rgba(46,242,255,.5); }
html[data-tema="atolye"].canli .prog .v2-block.is-now { background: rgba(182,255,59,.25); border-color: #B6FF3B; box-shadow: 0 0 20px #B6FF3B; }
html[data-tema="atolye"].canli .board__iz::before { background: radial-gradient(circle, rgba(46,242,255,.65), rgba(46,242,255,0) 70%); }

/* =================================================================== 3. OYUNCAK KUTUSU — parlak plastik, çıkartma, zıplama */
html[data-tema="oyuncak"].canli h1, html[data-tema="oyuncak"].canli h2 { font-family: var(--v2-font-display); font-weight: 800; letter-spacing: -.025em; }
html[data-tema="oyuncak"].canli .hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.3rem); line-height: 1.14; color: #2B1B3D;
  text-shadow: 0 2px 0 #FFC21A, 0 4px 0 #FFC21A, 0 6px 0 #2B1B3D, 0 12px 18px rgba(43,27,61,.18);
}
html[data-tema="oyuncak"].canli .renkli {
  background: none; color: #FF5A36; -webkit-text-fill-color: #FF5A36; animation: none;
  text-shadow: 0 2px 0 #FFC21A, 0 4px 0 #FFC21A, 0 6px 0 #2B1B3D, 0 12px 18px rgba(43,27,61,.18);
}
html[data-tema="oyuncak"].canli .renkli .harf { display: inline-block; animation: harfZipla 3.2s cubic-bezier(.3,1.6,.5,1) infinite; animation-delay: calc(var(--i) * 90ms); }
@keyframes harfZipla { 0%, 70%, 100% { transform: translateY(0) scale(1); } 76% { transform: translateY(-14%) scale(1.06, .94); } 84% { transform: translateY(2%) scale(.96, 1.05); } }
html[data-tema="oyuncak"].canli .v2-tag, html[data-tema="oyuncak"].canli .eyebrow {
  background: #8A5CFF; color: #FFFFFF; border: 3px solid #2B1B3D; border-radius: 999px; box-shadow: 0 4px 0 #2B1B3D; transform: rotate(-2deg); font-weight: 800;
}
html[data-tema="oyuncak"].canli .v2-btn {
  border: 3px solid #2B1B3D; border-radius: 18px; font-weight: 800;
  transition: transform .25s cubic-bezier(.3,1.8,.5,1), box-shadow .2s;
}
html[data-tema="oyuncak"].canli .v2-btn--primary { color: #2B1B3D; background: linear-gradient(180deg, #FFE27A, #FFC21A 50%, #FF9A00); box-shadow: 0 6px 0 #2B1B3D, inset 0 3px 0 rgba(255,255,255,.8), inset 0 -4px 0 rgba(0,0,0,.12); }
html[data-tema="oyuncak"].canli .v2-btn:not(.v2-btn--primary) { color: #2B1B3D; background: #FFFFFF; box-shadow: 0 6px 0 #2B1B3D, inset 0 -4px 0 rgba(43,27,61,.08); backdrop-filter: none; }
html[data-tema="oyuncak"].canli .v2-btn:hover { transform: translateY(-3px) rotate(-1.5deg) scale(1.03); }
html[data-tema="oyuncak"].canli .v2-btn--primary:hover { box-shadow: 0 9px 0 #2B1B3D, inset 0 3px 0 rgba(255,255,255,.8), inset 0 -4px 0 rgba(0,0,0,.12); }
html[data-tema="oyuncak"].canli .v2-btn:active { transform: translateY(5px) scale(.97); box-shadow: 0 1px 0 #2B1B3D; }
/* Plastik karolar: kalın kenar + renkli taban */
html[data-tema="oyuncak"].canli .v2-card, html[data-tema="oyuncak"].canli .verb, html[data-tema="oyuncak"].canli .step,
html[data-tema="oyuncak"].canli .stats li, html[data-tema="oyuncak"].canli .grade {
  border: 3px solid #2B1B3D; border-radius: 26px; backdrop-filter: none; background: #FFFFFF;
  box-shadow: 0 8px 0 var(--taban, #2B1B3D), 0 18px 30px -14px rgba(43,27,61,.35);
  transition: transform .35s cubic-bezier(.3,1.7,.5,1), box-shadow .3s;
}
html[data-tema="oyuncak"].canli .verb { background: linear-gradient(180deg, #FFFFFF 0 55%, var(--_t) 55%); }
html[data-tema="oyuncak"].canli .verbs > li:nth-child(1) { --taban: #FFB000; } html[data-tema="oyuncak"].canli .verbs > li:nth-child(2) { --taban: #FF5A36; }
html[data-tema="oyuncak"].canli .verbs > li:nth-child(3) { --taban: #1FBF6A; } html[data-tema="oyuncak"].canli .verbs > li:nth-child(4) { --taban: #1E9BFF; }
html[data-tema="oyuncak"].canli .grade { background: var(--band-tint); --taban: var(--band); }
html[data-tema="oyuncak"].canli .stats li:nth-child(1) { --taban: #FF5A36; } html[data-tema="oyuncak"].canli .stats li:nth-child(2) { --taban: #FFB000; }
html[data-tema="oyuncak"].canli .stats li:nth-child(3) { --taban: #1E9BFF; } html[data-tema="oyuncak"].canli .stats li:nth-child(4) { --taban: #8A5CFF; }
html[data-tema="oyuncak"].canli .stats b { background: none; color: #2B1B3D; -webkit-text-fill-color: #2B1B3D; text-shadow: 0 3px 0 var(--taban); }
html[data-tema="oyuncak"].canli [data-tilt]:hover { box-shadow: 0 12px 0 var(--taban, #2B1B3D), 0 26px 36px -14px rgba(43,27,61,.45); }
html[data-tema="oyuncak"].canli [data-tilt]::before { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.7), transparent 55%); }
html[data-tema="oyuncak"].canli .verb__ic, html[data-tema="oyuncak"].canli .grade__ic { border: 3px solid #2B1B3D; box-shadow: 0 4px 0 #2B1B3D; border-radius: 16px; }
html[data-tema="oyuncak"].canli .step::before { background: #FF5A36; color: #FFFFFF; border: 3px solid #2B1B3D; box-shadow: 0 4px 0 #2B1B3D; }
html[data-tema="oyuncak"].canli .v2-topbar { background: rgba(255,246,233,.9); border-bottom: 3px solid #2B1B3D; }
html[data-tema="oyuncak"].canli .v2-topbar__nav a::after { height: 5px; background: #FF5A36; border-radius: 9px; }
html[data-tema="oyuncak"].canli .sec--tint { background: #FFE9C7; border-block: 3px solid #2B1B3D; }
html[data-tema="oyuncak"].canli .v2-bottomnav { background: #FFFFFF; border-top: 3px solid #2B1B3D; }
/* Süzülen oyuncak şekiller (canliTema.js .sekiller) */
.sekiller { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sekiller i { position: absolute; display: block; border: 3px solid #2B1B3D; box-shadow: 0 6px 0 #2B1B3D, inset 0 4px 0 rgba(255,255,255,.55);
  animation: sekilSuz 6s ease-in-out infinite; transform: translate3d(var(--sx, 0), var(--sy, 0), 0); }
.sekiller i:nth-child(1) { left: 46%; top: 14%; width: 44px; height: 44px; border-radius: 12px; background: #FF5A36; rotate: 14deg; }
.sekiller i:nth-child(2) { left: 52%; top: 76%; width: 38px; height: 38px; border-radius: 50%; background: #1E9BFF; animation-delay: -1.5s; }
.sekiller i:nth-child(3) { left: 40%; top: 58%; width: 0; height: 0; border: 0; box-shadow: none; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 40px solid #1FBF6A; filter: drop-shadow(0 5px 0 #2B1B3D); animation-delay: -3s; }
.sekiller i:nth-child(4) { left: 92%; top: 10%; width: 54px; height: 22px; border-radius: 999px; background: #8A5CFF; animation-delay: -4.2s; rotate: -18deg; }
.sekiller i:nth-child(5) { left: 4%; top: 86%; width: 30px; height: 30px; border-radius: 8px; background: #FFC21A; animation-delay: -2.4s; rotate: 30deg; }
@keyframes sekilSuz { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }
/* Mini oyun: oyuncak kutusu + izometrik diorama */
html[data-tema="oyuncak"].canli .isikli.isikli {
  border: 4px solid #2B1B3D; border-radius: 30px; background: linear-gradient(180deg, #FFFFFF, #FFF1DB); animation: none;
  box-shadow: 0 10px 0 #2B1B3D, 0 30px 50px -20px rgba(43,27,61,.5), inset 0 -10px 0 rgba(255,194,26,.25);
}
html[data-tema="oyuncak"].canli .play { transform: perspective(1400px) rotateY(var(--ry, -5deg)) rotateX(var(--rx, 3deg)) rotate(1deg); }
html[data-tema="oyuncak"].canli .play .v2-bubble { background: #FFFFFF; border: 3px solid #2B1B3D; box-shadow: 0 4px 0 #2B1B3D; color: #2B1B3D; font-weight: 800; }
html[data-tema="oyuncak"].canli .board {
  transform: perspective(900px) rotateX(50deg) rotateZ(-28deg) scale(.8); transform-origin: 50% 55%; transform-style: preserve-3d;
  margin: -28px 0 -6px; background-color: #7ED957; border-radius: 18px;
  background-image: linear-gradient(rgba(43,27,61,.18) 2px, transparent 2px), linear-gradient(90deg, rgba(43,27,61,.18) 2px, transparent 2px);
  box-shadow: 0 0 0 4px #2B1B3D, 10px 14px 0 4px #3E8F2C, 10px 14px 0 8px #2B1B3D;
}
html[data-tema="oyuncak"].canli .board__cell { transform-style: preserve-3d; }
html[data-tema="oyuncak"].canli .board__wall::before {
  width: 80%; height: 80%; border-radius: 10px; border: 3px solid #2B1B3D; background: #FF5A36; background-image: none;
  transform: translateZ(26px); box-shadow: inset 0 4px 0 rgba(255,255,255,.5);
}
html[data-tema="oyuncak"].canli .board__wall::after {
  content: ""; position: absolute; left: 10%; width: 80%; top: 90%; height: 26px; background: #C7381A; border: 3px solid #2B1B3D; border-top: 0;
  transform-origin: top; transform: rotateX(90deg); border-radius: 0 0 8px 8px;
}
html[data-tema="oyuncak"].canli .board__star .v2-icon, html[data-tema="oyuncak"].canli .board__spark svg {
  transform-origin: 50% 100%; transform: rotateZ(28deg) rotateX(-62deg) translateY(-6%);
}
html[data-tema="oyuncak"].canli .board__star .v2-icon { --v2-icon-fill: #FFC21A; color: #2B1B3D; filter: drop-shadow(0 4px 0 #2B1B3D); animation: none; }
html[data-tema="oyuncak"].canli .board__spark svg { filter: drop-shadow(0 6px 0 rgba(43,27,61,.35)); width: 92%; height: 92%; }
html[data-tema="oyuncak"].canli .board__spark.is-happy svg { animation: none; }
html[data-tema="oyuncak"].canli .board__spark.is-happy { animation: oyZipla .5s cubic-bezier(.3,1.6,.5,1) 2; }
@keyframes oyZipla { 40% { transform: translateZ(40px); } }
html[data-tema="oyuncak"].canli .palette .v2-block, html[data-tema="oyuncak"].canli .prog .v2-block {
  border: 3px solid #2B1B3D; border-radius: 16px; color: #2B1B3D; font-weight: 800; box-shadow: 0 6px 0 #2B1B3D, inset 0 3px 0 rgba(255,255,255,.6);
}
html[data-tema="oyuncak"].canli .palette .v2-block:nth-child(1) { background: #FFC21A; } html[data-tema="oyuncak"].canli .palette .v2-block:nth-child(2) { background: #1E9BFF; color: #FFFFFF; }
html[data-tema="oyuncak"].canli .palette .v2-block:nth-child(3) { background: #FF5A36; color: #FFFFFF; } html[data-tema="oyuncak"].canli .palette .v2-block:nth-child(4) { background: #1FBF6A; color: #FFFFFF; }
html[data-tema="oyuncak"].canli .palette .v2-block:hover { transform: translateY(-4px) rotate(-3deg); box-shadow: 0 10px 0 #2B1B3D, inset 0 3px 0 rgba(255,255,255,.6); }
html[data-tema="oyuncak"].canli .palette .v2-block:active { transform: translateY(5px); box-shadow: 0 1px 0 #2B1B3D; }
html[data-tema="oyuncak"].canli .prog { background: #FFF1DB; border: 3px dashed #2B1B3D; }
html[data-tema="oyuncak"].canli .prog .v2-block { background: #FFFFFF; animation: blokDus .45s cubic-bezier(.3,1.7,.5,1); }
@keyframes blokDus { from { transform: translateY(-30px) scale(.6); opacity: 0; } }
html[data-tema="oyuncak"].canli .board__iz::before { background: radial-gradient(circle, rgba(255,255,255,.75) 0 30%, rgba(255,255,255,0) 32%); transform: translateZ(1px); }

/* =================================================================== 4. MASAL KİTABI — kâğıt katmanları, açılır sayfalar */
html[data-tema="masal"].canli .hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.3rem); color: #3A1F4D;
  text-shadow: 3px 3px 0 #FFD166, 6px 6px 0 #F25F8E, 10px 14px 18px rgba(58,31,77,.25);
}
html[data-tema="masal"].canli .hero__lead, html[data-tema="masal"].canli .hero__trust { color: #3A1F4D; }
html[data-tema="masal"].canli .hero__lead { background: rgba(255,248,238,.78); padding: 14px 18px; border-radius: 4px 18px 4px 18px; box-shadow: 4px 6px 0 rgba(58,31,77,.18); }
html[data-tema="masal"].canli .renkli { background: none; color: #C2304F; -webkit-text-fill-color: #C2304F; animation: none; text-shadow: 3px 3px 0 #FFF4E4, 6px 6px 0 #3A1F4D; }
html[data-tema="masal"].canli h2 { text-shadow: 2px 2px 0 #FFB86B; }
html[data-tema="masal"].canli .v2-tag, html[data-tema="masal"].canli .eyebrow {
  background: #2EC4B6; color: #12302E; border: 0; border-radius: 3px; transform: rotate(-2deg); box-shadow: 3px 3px 0 #3A1F4D; font-weight: 800;
  clip-path: polygon(0 8%, 4% 0, 96% 4%, 100% 0, 98% 92%, 100% 100%, 3% 96%, 0 100%);
}
html[data-tema="masal"].canli .v2-btn { border: 2px solid #3A1F4D; border-radius: 6px 16px 6px 16px; }
html[data-tema="masal"].canli .v2-btn--primary { color: #2E1A3F; background: linear-gradient(180deg, #FFC38A, #FF8A64); box-shadow: 4px 5px 0 #3A1F4D; }
html[data-tema="masal"].canli .v2-btn:not(.v2-btn--primary) { color: #2E1A3F; background: #FFF8EE; box-shadow: 4px 5px 0 #F25F8E; backdrop-filter: none; }
html[data-tema="masal"].canli .v2-btn:hover { transform: translate(-2px, -2px) rotate(-1deg); }
html[data-tema="masal"].canli .v2-btn--primary:hover { box-shadow: 7px 8px 0 #3A1F4D; }
html[data-tema="masal"].canli .v2-btn:active { transform: translate(3px, 4px); box-shadow: 0 0 0 #3A1F4D; }
/* Kâğıt kartlar: hafif dönük, köşede bant, katman gölgesi */
html[data-tema="masal"].canli .v2-card, html[data-tema="masal"].canli .verb, html[data-tema="masal"].canli .step,
html[data-tema="masal"].canli .stats li, html[data-tema="masal"].canli .grade {
  border: 0; border-radius: 4px; backdrop-filter: none; background: #FFF8EE;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 5px 6px 0 rgba(242,95,142,.35), 10px 12px 0 rgba(58,31,77,.12), 0 18px 30px -18px rgba(90,40,60,.5);
}
html[data-tema="masal"].canli .verb { background: linear-gradient(180deg, #FFF8EE, color-mix(in srgb, var(--_t) 60%, #FFF8EE)); }
html[data-tema="masal"].canli .grade { background: linear-gradient(180deg, #FFF8EE, color-mix(in srgb, var(--band-tint) 80%, #FFF8EE)); }
html[data-tema="masal"].canli .verbs > li:nth-child(odd), html[data-tema="masal"].canli .grades > a:nth-child(even), html[data-tema="masal"].canli .stats li:nth-child(odd) { rotate: -1.2deg; }
html[data-tema="masal"].canli .verbs > li:nth-child(even), html[data-tema="masal"].canli .grades > a:nth-child(odd), html[data-tema="masal"].canli .stats li:nth-child(even) { rotate: .9deg; }
html[data-tema="masal"].canli .verb::after, html[data-tema="masal"].canli .grade::after, html[data-tema="masal"].canli .role::after {
  content: ""; position: absolute; top: -10px; left: 50%; width: 78px; height: 22px; translate: -50% 0; rotate: -3deg; pointer-events: none;
  background: rgba(46,196,182,.55); box-shadow: 0 1px 2px rgba(58,31,77,.2);
  clip-path: polygon(0 10%, 6% 0, 12% 12%, 20% 0, 30% 10%, 40% 0, 50% 10%, 60% 0, 70% 12%, 80% 0, 90% 10%, 100% 0, 100% 90%, 92% 100%, 82% 88%, 70% 100%, 60% 90%, 48% 100%, 36% 88%, 24% 100%, 12% 90%, 0 100%);
}
html[data-tema="masal"].canli [data-tilt]:hover { box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 8px 10px 0 rgba(242,95,142,.4), 16px 20px 0 rgba(58,31,77,.14), 0 26px 40px -18px rgba(90,40,60,.55); }
html[data-tema="masal"].canli .step::before { background: #FFD166; color: #3A1F4D; border: 2px solid #3A1F4D; box-shadow: 3px 3px 0 #3A1F4D; }
html[data-tema="masal"].canli .stats b { background: none; color: #D23C5C; -webkit-text-fill-color: #D23C5C; text-shadow: 2px 2px 0 #FFD166; }
html[data-tema="masal"].canli .v2-topbar { background: rgba(255,241,224,.86); border-bottom: 0; box-shadow: 0 3px 0 rgba(242,95,142,.35), 0 6px 0 rgba(58,31,77,.1); }
html[data-tema="masal"].canli .v2-topbar__nav a::after { background: #F25F8E; height: 4px; border-radius: 2px; }
html[data-tema="masal"].canli .sec--tint { background: linear-gradient(180deg, transparent, rgba(255,184,107,.18) 20%, rgba(242,95,142,.1) 80%, transparent); }
/* Kâğıt bulutlar katmanı (canliTema.js .kagit-katman) — paralaks */
.kagit-katman { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.kagit-katman svg { position: absolute; bottom: -2px; left: -5%; width: 110%; height: auto; transform: translate3d(var(--kx, 0), 0, 0); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.kagit-katman .k1 { fill: #FFB86B; filter: drop-shadow(0 -4px 0 rgba(58,31,77,.18)); }
.kagit-katman .k2 { fill: #F25F8E; filter: drop-shadow(0 -4px 0 rgba(58,31,77,.2)); }
.kagit-katman .k3 { fill: #FFF1E0; filter: drop-shadow(0 -5px 0 rgba(58,31,77,.18)); }
.kagit-yildiz { position: absolute; width: 18px; height: 18px; background: #FFD166; z-index: 1; pointer-events: none;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: yildizSall 4s ease-in-out infinite; }
@keyframes yildizSall { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.25); } }
/* Mini oyun: açılır kitap */
html[data-tema="masal"].canli .isikli.isikli {
  border: 0; border-radius: 6px 22px 22px 6px; animation: none; background: #FFF8EE;
  box-shadow: -8px 0 0 #C2407A, -14px 0 0 #3A1F4D, 8px 10px 0 rgba(242,95,142,.45), 16px 20px 0 rgba(58,31,77,.15), 0 40px 60px -30px rgba(90,40,60,.6);
}
html[data-tema="masal"].canli .play::after {   /* kurdele ayraç */
  content: ""; position: absolute; top: -8px; right: 34px; width: 26px; height: 74px; background: #2EC4B6; z-index: 3;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); box-shadow: 0 2px 0 rgba(0,0,0,.2);
}
html[data-tema="masal"].canli .play .v2-bubble { background: #FFFFFF; border: 2px solid #3A1F4D; border-radius: 18px 18px 18px 4px; box-shadow: 3px 3px 0 #F25F8E; color: #2E1A3F; }
html[data-tema="masal"].canli .board {
  transform: perspective(800px) rotateX(38deg); transform-origin: 50% 80%; transform-style: preserve-3d; border-radius: 4px;
  background-color: #FFEBD0; margin: -6px 0 -10px;
  background-image: linear-gradient(rgba(58,31,77,.14) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(58,31,77,.14) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(58,31,77,.12), transparent 8%, transparent 92%, rgba(58,31,77,.12));
  box-shadow: 0 6px 0 #F4CFA0, 0 10px 0 #E2B07C, 0 24px 30px -10px rgba(90,40,60,.55);
}
html[data-tema="masal"].canli .board__cell { transform-style: preserve-3d; }
html[data-tema="masal"].canli .board__wall::before {
  width: 74%; height: 92%; border: 2px solid #3A1F4D; border-radius: 40% 40% 4px 4px; background: #2EC4B6; background-image: none;
  box-shadow: inset -8px 0 0 rgba(0,0,0,.12); transform-origin: 50% 100%; transform: rotateX(-74deg); animation: acil 1.1s cubic-bezier(.3,1.5,.5,1) both;
}
.board__wall:nth-child(2)::before { animation-delay: .15s; }
@keyframes acil { from { transform: rotateX(0deg); } to { transform: rotateX(-74deg); } }
html[data-tema="masal"].canli .board__star .v2-icon, html[data-tema="masal"].canli .board__spark svg { transform-origin: 50% 100%; transform: rotateX(-50deg); }
html[data-tema="masal"].canli .board__star .v2-icon { --v2-icon-fill: #FFD166; color: #3A1F4D; animation: none; filter: drop-shadow(2px 3px 0 #F25F8E); }
html[data-tema="masal"].canli .board__spark svg { filter: drop-shadow(3px 4px 0 rgba(58,31,77,.3)); }
html[data-tema="masal"].canli .palette .v2-block, html[data-tema="masal"].canli .prog .v2-block {
  color: #2E1A3F; background: #FFF8EE; border: 2px solid #3A1F4D; border-radius: 4px 12px 4px 12px; box-shadow: 3px 4px 0 #F25F8E;
}
html[data-tema="masal"].canli .palette .v2-block:hover { transform: translate(-2px, -3px) rotate(-2deg); box-shadow: 5px 7px 0 #F25F8E; }
html[data-tema="masal"].canli .prog { background: #FFF1E0; border: 2px dashed rgba(58,31,77,.45); }
html[data-tema="masal"].canli .prog .v2-block.is-now { background: #FFD166; }
html[data-tema="masal"].canli .board__iz::before { background: radial-gradient(circle, rgba(242,95,142,.45) 0 22%, transparent 24%); }

/* =================================================================== 5. Ortak yeni efektler (canliTema.js) */
/* Piksir'in geçtiği kareler: iz */
.board__iz { position: absolute; width: calc(100% / var(--cols)); height: calc(100% / var(--rows)); left: calc(var(--x) * 100% / var(--cols)); top: calc(var(--y) * 100% / var(--rows)); pointer-events: none; z-index: 1; }
.board__iz::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; animation: izSon 1.8s ease-out forwards; }
@keyframes izSon { from { opacity: 1; transform: scale(.6); } 30% { opacity: 1; transform: scale(1); } to { opacity: .35; transform: scale(.9); } }
/* Hareket bulanıklığı: Piksir kayarken ve başlık belirirken */
html.canli .board__spark.hizli svg { filter: blur(1.4px) drop-shadow(-10px 0 4px rgba(var(--c-isik), .35)); }
html.canli .bulanik-gir { display: inline-block; animation: bulanikGir 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms + .1s); }
@keyframes bulanikGir { from { opacity: 0; filter: blur(14px); transform: translateX(-34px) skewX(-12deg); } to { opacity: 1; filter: none; transform: none; } }
/* Fare izi tuvali */
.canli-tuval { position: fixed; inset: 0; z-index: 61; pointer-events: none; width: 100vw; height: 100vh; }
html[data-tema="atolye"] .canli-iz, html[data-tema="oyuncak"] .canli-iz, html[data-tema="masal"] .canli-iz { display: none; }
html[data-tema="oyuncak"] .canli-imlec { mix-blend-mode: multiply; opacity: .35; }
html[data-tema="masal"] .canli-imlec { mix-blend-mode: soft-light; opacity: .8; }
/* Tasarım seçici (yalnız öneri sayfalarında, canliTema.js) */
.tema-sec { font-family: var(--v2-font-body); }
.tema-sec button { display: inline-flex; align-items: center; gap: 6px; }
.tema-sec button svg { width: 22px; height: 22px; }
html[data-tema="oyuncak"] .tema-sec { background: #FFFFFF; border: 3px solid #2B1B3D; box-shadow: 0 5px 0 #2B1B3D; }
html[data-tema="oyuncak"] .tema-sec button[aria-pressed="true"] { background: #FF5A36; }
html[data-tema="masal"] .tema-sec { background: #FFF8EE; border: 2px solid #3A1F4D; box-shadow: 4px 4px 0 #F25F8E; }
html[data-tema="masal"] .tema-sec button[aria-pressed="true"] { background: #3A1F4D; }
html[data-tema="atolye"] .tema-sec { background: rgba(5,19,24,.85); border-color: rgba(46,242,255,.5); }
html[data-tema="atolye"] .tema-sec button[aria-pressed="true"] { background: linear-gradient(135deg, #2EF2FF, #B6FF3B); color: #03141A; }

/* =================================================================== 6. Az efekt */
@media (prefers-reduced-motion: reduce) {
  .devre, .sekiller, .kagit-yildiz, .canli-tuval { display: none !important; }
  html.canli .bulanik-gir { animation: none; }
  .board__wall::before { animation: none !important; }
}
html.efekt-az .devre, html.efekt-az .sekiller, html.efekt-az .canli-tuval, html.a11y-calm .devre, html.a11y-calm .sekiller, html.a11y-calm .canli-tuval { display: none !important; }
html.efekt-az .bulanik-gir, html.a11y-calm .bulanik-gir { animation: none; }
/* Süs katmanları imlece göre (canliEfekt --px/--py) ters yönde kayar → derinlik */
.hero .devre { transform: translate3d(calc(var(--px, 0px) * -1.4), calc(var(--py, 0px) * -1.4), 0) scale(1.05); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.hero .sekiller { transform: translate3d(calc(var(--px, 0px) * -2.2), calc(var(--py, 0px) * -2.2), 0); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
html.canli .belirdi .bulanik-gir { animation: none; opacity: 1; filter: none; transform: none; }