/* Piksir v4 — yaşayan dünyalar (D66): Derin Resif (dalgıç), Işıltı Ormanı (bahçıvan), Robot Kasabası (belediye başkanı).
   canli.css + canli-oneriler.css'in ÜSTÜNE biner; yalnız html[data-tema="resif"|"orman"|"kasaba"] altında etkilidir.
   Sahne derinliği: döngülü video (Higgsfield) → uzak sakinler (küçük, bulanık) → içerik → yakın sakinler ve parçacıklar;
   katmanlar imlece göre farklı hızda kayar (canliDunya.js). Hareket azaltma / Sakin mod / efekt-az → video yerine durağan kare,
   sakinler durur. Yalnız ana sayfa ve /marka/ bağlar. */

/* =================================================================== 0. Token'lar */
html[data-tema="resif"] {
  --c-metin: #E9FDFF; --c-metin-2: #A9D6E6; --c-zemin: #03162B;
  --c-v1: #FF8FC2; --c-v1b: #FF5FA8; --c-v2: #3DF5FF; --c-v2b: #0B8DC4; --c-v3: #3DF5FF; --c-v4: #8B6CFF;
  --c-cam: rgba(6, 43, 74, .52); --c-cam-kenar: rgba(61, 245, 255, .3); --c-golge: 0, 6, 20; --c-isik: 61, 245, 255;
  --c-baslik-1: #FFFFFF; --c-baslik-2: #3DF5FF; --c-baslik-3: #FF8FC2;
  --c-sahne: url("../../../assets/v4/dunya/resif.webp"); --c-sahne-k: url("../../../assets/v4/dunya/resif-960.webp");
  --c-sahne-ort: linear-gradient(90deg, rgba(3,22,43,.94) 0%, rgba(3,22,43,.8) 36%, rgba(3,22,43,0) 64%);
  --spark-goz: #E0FFFF; --spark-goz-koyu: #3DF5FF;
  --spk-g1: #FFFFFF; --spk-g2: #DDF6FF; --spk-g3: #8FD3EA; --spk-c: #062B4A; --spk-v1: #0B3D66; --spk-v2: #021A30;
  --spk-a1: #FFD1E8; --spk-a2: #FF5FA8; --spk-m: #FFC75F; --spk-y: #FF8FC2;
  --v2-ink: #E9FDFF; --v2-ink-2: #A9D6E6; --v2-ink-3: #6C98AD; --v2-paper: #03162B; --v2-surface: rgba(6, 43, 74, .6);
  --v2-sunken: rgba(61, 245, 255, .06); --v2-line: rgba(61, 245, 255, .22); --v2-grid: rgba(61, 245, 255, .1);
  --v2-link: #7FF8FF; --v2-on-ink: #03162B; --v2-shadow-color: rgba(0, 6, 20, .6);
  --v2-yellow: #FFC75F; --v2-yellow-ink: #FFD98F; --v2-blue-ink: #7FF8FF;
}
html[data-tema="orman"] {
  --c-metin: #FFF8DE; --c-metin-2: #C9D8C2; --c-zemin: #0B1A17;
  --c-v1: #FFD66B; --c-v1b: #FFB627; --c-v2: #6EE7A0; --c-v2b: #1F9E62; --c-v3: #6EE7A0; --c-v4: #B07CFF;
  --c-cam: rgba(16, 38, 32, .6); --c-cam-kenar: rgba(110, 231, 160, .26); --c-golge: 0, 8, 4; --c-isik: 255, 182, 39;
  --c-baslik-1: #FFF6CC; --c-baslik-2: #FFD66B; --c-baslik-3: #6EE7A0;
  --c-sahne: url("../../../assets/v4/dunya/orman.webp"); --c-sahne-k: url("../../../assets/v4/dunya/orman-960.webp");
  --c-sahne-ort: linear-gradient(90deg, rgba(11,26,23,.94) 0%, rgba(11,26,23,.78) 36%, rgba(11,26,23,0) 64%);
  --spark-goz: #FFF6CC; --spark-goz-koyu: #FFB627;
  --spk-g1: #FFF8E6; --spk-g2: #F1E6C6; --spk-g3: #C9B27A; --spk-c: #1F2E1C; --spk-v1: #24402A; --spk-v2: #0E1E12;
  --spk-a1: #FFE9A8; --spk-a2: #FFB627; --spk-m: #FFB627; --spk-y: #FF9F7A;
  --v2-ink: #FFF8DE; --v2-ink-2: #C9D8C2; --v2-ink-3: #869A82; --v2-paper: #0B1A17; --v2-surface: rgba(16, 38, 32, .66);
  --v2-sunken: rgba(110, 231, 160, .06); --v2-line: rgba(110, 231, 160, .2); --v2-grid: rgba(110, 231, 160, .1);
  --v2-link: #FFD66B; --v2-on-ink: #0B1A17; --v2-shadow-color: rgba(0, 8, 4, .6);
  --v2-yellow: #FFB627; --v2-yellow-ink: #FFD66B; --v2-green-ink: #8EF0B6;
}
html[data-tema="kasaba"] {
  --c-metin: #22303A; --c-metin-2: #4C5D69; --c-zemin: #EFFAF5;
  --c-v1: #FFC94D; --c-v1b: #FFB830; --c-v2: #4CC9A0; --c-v2b: #2E9E7E; --c-v3: #58A6FF; --c-v4: #FF8A65;
  --c-cam: #FFFFFF; --c-cam-kenar: #22303A; --c-golge: 34, 48, 58; --c-isik: 255, 184, 48;
  --c-baslik-1: #22303A; --c-baslik-2: #1F7F64; --c-baslik-3: #D1572F;
  --c-sahne: url("../../../assets/v4/dunya/kasaba.webp"); --c-sahne-k: url("../../../assets/v4/dunya/kasaba-960.webp");
  --c-sahne-ort: linear-gradient(90deg, rgba(239,250,245,.94) 0%, rgba(239,250,245,.7) 36%, rgba(239,250,245,0) 62%);
  --spark-goz: #E8FFF6; --spark-goz-koyu: #2EE6A8;
  --spk-g1: #FFFFFF; --spk-g2: #EAF7F2; --spk-g3: #BFE5D6; --spk-c: #22303A; --spk-v1: #2A3A48; --spk-v2: #121C24;
  --spk-a1: #FFE7A3; --spk-a2: #FFB830; --spk-m: #FFB830; --spk-y: #FF9F8A;
  --v2-paper: #EFFAF5; --v2-ink: #22303A; --v2-ink-2: #4C5D69; --v2-shadow-color: #22303A;
  --v2-font-display: "Atkinson Hyperlegible Next", system-ui, sans-serif;
}

/* =================================================================== 1. Zemin ve sahne katmanları */
html[data-tema="resif"].canli body.v2-page {
  background: radial-gradient(900px 500px at 70% -10%, rgba(61,245,255,.18), transparent 60%),
              linear-gradient(180deg, #052A4A 0%, #03162B 55%, #020D1A 100%) fixed;
}
html[data-tema="orman"].canli body.v2-page {
  background: radial-gradient(800px 500px at 90% 0%, rgba(255,182,39,.12), transparent 60%),
              radial-gradient(700px 600px at 0% 70%, rgba(176,124,255,.1), transparent 60%), #0B1A17;
}
html[data-tema="kasaba"].canli body.v2-page {
  background: linear-gradient(rgba(34,48,58,.05) 1px, transparent 1px) 0 0 / 40px 23px,
              linear-gradient(60deg, rgba(34,48,58,.04) 1px, transparent 1px) 0 0 / 40px 23px, #EFFAF5;
}
/* Döngülü sahne videosu (canliDunya.js .dunya-video). Altında durağan kare (hero::before) kalır. */
.dunya-video { position: absolute; inset: -3%; z-index: 0; width: 106%; height: 106%; object-fit: cover; object-position: right center; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease; transform: translate3d(var(--px, 0), var(--py, 0), 0); }
.dunya-video.hazir { opacity: 1; }
.dunya-ort { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--c-sahne-ort); }
/* Sakinler: uzak (z 1, küçük + bulanık) ve yakın (z 3, büyük, keskin) */
.sakinler { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sakinler--uzak { z-index: 1; }
.sakinler--yakin { z-index: 3; }
.sakin { position: absolute; left: 0; top: 0; will-change: transform; transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none; }
.sakinler--uzak .sakin { filter: blur(1.4px) saturate(.85) brightness(.85); opacity: .85; }
.sakinler--yakin .sakin { filter: drop-shadow(0 18px 24px rgba(var(--c-golge), .45)); }
html[data-tema="resif"] .sakin--denizanasi { filter: drop-shadow(0 0 22px rgba(255,95,168,.55)) drop-shadow(0 18px 24px rgba(0,6,20,.4)); }
html[data-tema="orman"] .sakin--atesbocegi { filter: drop-shadow(0 0 18px rgba(255,182,39,.9)); }
/* Işık huzmeleri (resif) ve sis (orman): CSS katmanı */
html[data-tema="resif"].canli .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: repeating-linear-gradient(100deg, transparent 0 60px, rgba(127,248,255,.08) 60px 90px, transparent 90px 170px);
  animation: huzme 9s ease-in-out infinite alternate;
}
@keyframes huzme { from { transform: translateX(-30px) skewX(-6deg); } to { transform: translateX(30px) skewX(6deg); } }
html[data-tema="orman"].canli .hero::after {
  content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 45%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 30% 80%, rgba(176,124,255,.18), transparent 60%), radial-gradient(ellipse at 70% 90%, rgba(110,231,160,.12), transparent 60%);
  filter: blur(10px); animation: sis 14s ease-in-out infinite alternate;
}
@keyframes sis { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
/* Mobil: video yok (veri ve pil); durağan kare + sakinler */
@media (max-width: 760px) { .dunya-video { display: none; } }

/* =================================================================== 2. DERİN RESİF */
html[data-tema="resif"].canli .hero h1 { color: #E9FDFF; text-shadow: 0 0 28px rgba(61,245,255,.35), 0 4px 24px rgba(0,6,20,.6); }
html[data-tema="resif"].canli .renkli { background-image: linear-gradient(100deg, #3DF5FF, #9AF9FF 30%, #FF8FC2 60%, #3DF5FF); filter: drop-shadow(0 0 16px rgba(61,245,255,.5)); }
html[data-tema="resif"].canli .hero__lead, html[data-tema="resif"].canli .hero__trust { color: #CFF3FA; text-shadow: 0 2px 12px rgba(0,6,20,.8); }
html[data-tema="resif"].canli .v2-tag, html[data-tema="resif"].canli .eyebrow { background: rgba(61,245,255,.12); color: #BFFBFF; border: 1px solid rgba(61,245,255,.5); border-radius: 999px; }
html[data-tema="resif"].canli .v2-btn { border-radius: 999px; }
html[data-tema="resif"].canli .v2-btn--primary { color: #03162B; background: linear-gradient(180deg, #FFC2DE, #FF8FC2 45%, #FF5FA8); box-shadow: 0 10px 30px -8px rgba(255,95,168,.8), inset 0 2px 0 rgba(255,255,255,.7); }
html[data-tema="resif"].canli .v2-btn:not(.v2-btn--primary) { color: #E9FDFF; background: rgba(61,245,255,.08); border: 1px solid rgba(61,245,255,.55); box-shadow: inset 0 0 20px -8px rgba(61,245,255,.9); }
/* Kabarcık kartlar + kostik ışık */
html[data-tema="resif"].canli .v2-card, html[data-tema="resif"].canli .verb, html[data-tema="resif"].canli .step,
html[data-tema="resif"].canli .stats li, html[data-tema="resif"].canli .grade {
  border-radius: 28px; border: 1px solid rgba(61,245,255,.26); background: linear-gradient(170deg, rgba(14,80,120,.55), rgba(3,22,43,.7));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -20px 40px -20px rgba(61,245,255,.25), 0 24px 50px -24px rgba(0,6,20,.9);
}
html[data-tema="resif"].canli [data-tilt]::before {
  opacity: .0; background:
    radial-gradient(120px 60px at calc(var(--mx, 50%) - 30px) var(--my, 50%), rgba(127,248,255,.25), transparent 70%),
    radial-gradient(90px 40px at calc(var(--mx, 50%) + 40px) calc(var(--my, 50%) + 20px), rgba(127,248,255,.2), transparent 70%);
}
html[data-tema="resif"].canli [data-tilt]:hover::before { opacity: 1; }
html[data-tema="resif"].canli .verb h3, html[data-tema="resif"].canli .verb p, html[data-tema="resif"].canli .verb small,
html[data-tema="resif"].canli .grade__title, html[data-tema="resif"].canli .grade__num { color: var(--c-metin); }
html[data-tema="resif"].canli .verb__ic, html[data-tema="resif"].canli .grade__ic, html[data-tema="resif"].canli .facts li > span { border-radius: 50%; background: rgba(61,245,255,.12); border: 1px solid rgba(61,245,255,.55); box-shadow: inset 0 -6px 12px rgba(61,245,255,.25); }
html[data-tema="resif"].canli .step::before { background: radial-gradient(circle at 35% 30%, #FFFFFF, #3DF5FF 40%, #0B8DC4); color: #03162B; border: 0; }
html[data-tema="resif"].canli .stats b { background-image: linear-gradient(90deg, #3DF5FF, #FF8FC2); }
html[data-tema="resif"].canli .v2-topbar { background: rgba(3,22,43,.55); border-bottom: 1px solid rgba(61,245,255,.2); }
html[data-tema="resif"].canli .v2-bottomnav, html[data-tema="resif"].canli .v2-sitefoot { background: rgba(3,22,43,.82); }
html[data-tema="resif"].canli .v2-bottomnav a[aria-current="page"] { background: #3DF5FF; color: #03162B; }
/* Mini oyun: deniz tabanı */
html[data-tema="resif"].canli .isikli.isikli {
  border-radius: 34px; border: 2px solid transparent; box-shadow: 0 0 70px -20px rgba(61,245,255,.8), 0 40px 80px -30px rgba(0,6,20,.95);
  background: linear-gradient(170deg, rgba(14,80,120,.85), rgba(3,22,43,.92)) padding-box, conic-gradient(from var(--aci, 0deg), #3DF5FF, #8B6CFF, #FF5FA8, #3DF5FF) border-box;
}
html[data-tema="resif"].canli .play .v2-bubble { background: rgba(255,255,255,.12); border: 1px solid rgba(127,248,255,.6); color: #E9FDFF; border-radius: 22px; }
html[data-tema="resif"].canli .board {
  transform: perspective(760px) rotateX(30deg); border-radius: 22px; transform-style: preserve-3d;
  background-color: #E8C98E; background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.3) 0 2px, transparent 3px),
    linear-gradient(rgba(6,43,74,.18) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(6,43,74,.18) 1.5px, transparent 1.5px),
    linear-gradient(180deg, #F1D9A6, #D9B271);
  background-size: 46px 46px, 52px 52px, calc(100% / var(--cols)) calc(100% / var(--rows)), calc(100% / var(--cols)) calc(100% / var(--rows)), auto;
  box-shadow: 0 16px 0 -4px #B88E4E, 0 0 50px -10px rgba(61,245,255,.55), 0 30px 40px -12px rgba(0,6,20,.8);
}
html[data-tema="resif"].canli .board__cell { transform-style: preserve-3d; }
html[data-tema="resif"].canli .board__wall::before {   /* mercan kaya */
  width: 76%; height: 88%; border: 0; border-radius: 46% 54% 30% 30% / 60% 60% 20% 20%; background-image: none;
  background: radial-gradient(circle at 30% 30%, #FFB3D6, #FF5FA8 50%, #B8336E); transform-origin: 50% 100%; transform: rotateX(-62deg);
  box-shadow: 0 0 18px rgba(255,95,168,.7), inset -6px -8px 0 rgba(0,0,0,.18);
}
html[data-tema="resif"].canli .board__star .v2-icon, html[data-tema="resif"].canli .board__spark svg { transform-origin: 50% 100%; transform: rotateX(-40deg); }
html[data-tema="resif"].canli .board__star .v2-icon { --v2-icon-fill: #FFC75F; color: #FFFFFF; filter: drop-shadow(0 0 14px #FFC75F); }
html[data-tema="resif"].canli .board__spark::after {   /* dalış kabarcığı */
  content: ""; position: absolute; inset: 4% 8%; border-radius: 50%; pointer-events: none; transform-origin: 50% 100%; transform: rotateX(-40deg);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 22%), radial-gradient(circle, rgba(127,248,255,0) 58%, rgba(127,248,255,.45) 70%, rgba(127,248,255,0) 74%);
}
html[data-tema="resif"].canli .palette .v2-block, html[data-tema="resif"].canli .prog .v2-block {
  color: #E9FDFF; border-radius: 18px; border: 1px solid rgba(61,245,255,.5); background: linear-gradient(180deg, rgba(61,245,255,.22), rgba(61,245,255,.05));
  box-shadow: 0 6px 0 rgba(11,141,196,.55), inset 0 2px 0 rgba(255,255,255,.25);
}
html[data-tema="resif"].canli .prog { background: rgba(3,22,43,.55); border: 1px dashed rgba(61,245,255,.5); }
html[data-tema="resif"].canli .board__iz::before { inset: 30%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(127,248,255,.4) 40%, rgba(127,248,255,0) 70%); animation: kabarcik 1.6s ease-out forwards; }
@keyframes kabarcik { from { opacity: 1; transform: translateY(0) scale(.6); } to { opacity: 0; transform: translateY(-40px) scale(1.2); } }

/* =================================================================== 3. IŞILTI ORMANI */
html[data-tema="orman"].canli .hero h1 { color: #FFF6CC; text-shadow: 0 0 34px rgba(255,182,39,.45), 0 4px 22px rgba(0,8,4,.7); }
html[data-tema="orman"].canli .renkli { background-image: linear-gradient(100deg, #FFD66B, #FFB627 40%, #6EE7A0 70%, #FFD66B); filter: drop-shadow(0 0 18px rgba(255,182,39,.55)); }
html[data-tema="orman"].canli .hero__lead, html[data-tema="orman"].canli .hero__trust { color: #E6EEDC; text-shadow: 0 2px 12px rgba(0,8,4,.85); }
html[data-tema="orman"].canli .v2-tag, html[data-tema="orman"].canli .eyebrow { background: rgba(110,231,160,.12); color: #C8F7D9; border: 1px solid rgba(110,231,160,.45); border-radius: 999px 999px 999px 4px; }
html[data-tema="orman"].canli .v2-btn { border-radius: 18px 18px 18px 6px; }
html[data-tema="orman"].canli .v2-btn--primary { color: #1F2E1C; background: linear-gradient(180deg, #FFF0B0, #FFD66B 40%, #FFB627); box-shadow: 0 0 34px -6px rgba(255,182,39,.85), inset 0 2px 0 rgba(255,255,255,.7); }
html[data-tema="orman"].canli .v2-btn:not(.v2-btn--primary) { color: #FFF8DE; background: rgba(110,231,160,.08); border: 1px solid rgba(110,231,160,.5); }
/* Fener ışığıyla aydınlanan kartlar: ışık imleci izler */
html[data-tema="orman"].canli .v2-card, html[data-tema="orman"].canli .verb, html[data-tema="orman"].canli .step,
html[data-tema="orman"].canli .stats li, html[data-tema="orman"].canli .grade {
  border-radius: 24px 24px 24px 6px; border: 1px solid rgba(110,231,160,.22); background: linear-gradient(165deg, rgba(31,70,54,.7), rgba(11,26,23,.82));
  box-shadow: inset 0 1px 0 rgba(255,246,204,.12), 0 24px 50px -24px rgba(0,8,4,.95);
}
html[data-tema="orman"].canli [data-tilt]::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,214,107,.22), rgba(255,182,39,.06) 40%, transparent 65%); }
html[data-tema="orman"].canli [data-tilt]:hover { box-shadow: 0 0 0 1px rgba(255,214,107,.45), 0 0 50px -14px rgba(255,182,39,.6), 0 30px 60px -24px rgba(0,8,4,.95); }
html[data-tema="orman"].canli .verb h3, html[data-tema="orman"].canli .verb p, html[data-tema="orman"].canli .verb small,
html[data-tema="orman"].canli .grade__title, html[data-tema="orman"].canli .grade__num { color: var(--c-metin); }
html[data-tema="orman"].canli .verb__ic, html[data-tema="orman"].canli .grade__ic, html[data-tema="orman"].canli .facts li > span { border-radius: 50% 50% 50% 8px; background: rgba(255,214,107,.12); border: 1px solid rgba(255,214,107,.5); }
html[data-tema="orman"].canli .verb__ic .v2-icon, html[data-tema="orman"].canli .facts .v2-icon { color: #FFD66B; }
html[data-tema="orman"].canli .step::before { background: radial-gradient(circle, #FFF6CC, #FFB627 60%); color: #1F2E1C; border: 0; box-shadow: 0 0 20px rgba(255,182,39,.8); }
html[data-tema="orman"].canli .stats b { background-image: linear-gradient(90deg, #FFD66B, #6EE7A0); }
html[data-tema="orman"].canli .v2-topbar { background: rgba(11,26,23,.6); border-bottom: 1px solid rgba(110,231,160,.18); }
html[data-tema="orman"].canli .v2-bottomnav, html[data-tema="orman"].canli .v2-sitefoot { background: rgba(11,26,23,.85); }
html[data-tema="orman"].canli .v2-bottomnav a[aria-current="page"] { background: #FFD66B; color: #1F2E1C; }
/* Mini oyun: yosunlu orman zemini, mantar engeller */
html[data-tema="orman"].canli .isikli.isikli {
  border-radius: 30px 30px 30px 8px; border: 2px solid transparent; box-shadow: 0 0 70px -24px rgba(255,182,39,.7), 0 40px 80px -30px rgba(0,8,4,.95);
  background: linear-gradient(165deg, rgba(31,70,54,.9), rgba(11,26,23,.95)) padding-box, conic-gradient(from var(--aci, 0deg), #FFD66B, #6EE7A0, #B07CFF, #FFD66B) border-box;
}
html[data-tema="orman"].canli .play .v2-bubble { background: rgba(255,246,204,.1); border: 1px solid rgba(255,214,107,.5); color: #FFF8DE; }
html[data-tema="orman"].canli .board {
  transform: perspective(760px) rotateX(34deg); transform-style: preserve-3d; border-radius: 26px;
  background-color: #2F6B3E; background-image:
    radial-gradient(circle at 25% 35%, rgba(110,231,160,.35) 0 3px, transparent 4px), radial-gradient(circle at 75% 65%, rgba(110,231,160,.25) 0 2px, transparent 3px),
    linear-gradient(rgba(11,26,23,.35) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(11,26,23,.35) 1.5px, transparent 1.5px),
    radial-gradient(ellipse at 50% 40%, #4C9A5A, #2A5E36);
  background-size: 38px 38px, 44px 44px, calc(100% / var(--cols)) calc(100% / var(--rows)), calc(100% / var(--cols)) calc(100% / var(--rows)), auto;
  box-shadow: 0 14px 0 -4px #5A3D22, 0 0 50px -14px rgba(255,182,39,.5), 0 30px 40px -12px rgba(0,8,4,.9);
}
html[data-tema="orman"].canli .board__cell { transform-style: preserve-3d; }
html[data-tema="orman"].canli .board__wall::before {   /* mantar şapkası (beyaz benekli) */
  width: 84%; height: 56%; align-self: start; margin-top: 8%; border: 2px solid #1F2E1C; border-radius: 50% 50% 18% 18% / 80% 80% 20% 20%;
  background: radial-gradient(circle at 30% 40%, #FFF 0 6%, transparent 7%), radial-gradient(circle at 65% 30%, #FFF 0 8%, transparent 9%), radial-gradient(circle at 55% 65%, #FFF 0 5%, transparent 6%), linear-gradient(180deg, #FF6B57, #C9382A);
  transform-origin: 50% 160%; transform: rotateX(-64deg); animation: mantarAc 1s cubic-bezier(.3,1.5,.5,1) both;
}
html[data-tema="orman"].canli .board__wall::after {   /* sap */
  content: ""; position: absolute; left: 38%; width: 24%; top: 50%; height: 44%; border: 2px solid #1F2E1C; border-radius: 8px 8px 12px 12px; background: #F5E6C4;
  transform-origin: 50% 100%; transform: rotateX(-64deg); z-index: -1;
}
@keyframes mantarAc { from { transform: rotateX(0) scale(.4); } to { transform: rotateX(-64deg) scale(1); } }
html[data-tema="orman"].canli .board__star .v2-icon, html[data-tema="orman"].canli .board__spark svg { transform-origin: 50% 100%; transform: rotateX(-46deg); }
html[data-tema="orman"].canli .board__star .v2-icon { --v2-icon-fill: #FFD66B; color: #FFF6CC; filter: drop-shadow(0 0 16px #FFB627); }
html[data-tema="orman"].canli .palette .v2-block, html[data-tema="orman"].canli .prog .v2-block {
  color: #FFF8DE; border-radius: 16px 16px 16px 4px; border: 1px solid rgba(110,231,160,.45); background: linear-gradient(180deg, rgba(110,231,160,.2), rgba(110,231,160,.05));
  box-shadow: 0 6px 0 #1F5A3A, inset 0 2px 0 rgba(255,246,204,.18);
}
html[data-tema="orman"].canli .prog { background: rgba(11,26,23,.6); border: 1px dashed rgba(110,231,160,.45); }
html[data-tema="orman"].canli .prog .v2-block.is-now { background: rgba(255,214,107,.3); border-color: #FFD66B; box-shadow: 0 0 20px rgba(255,182,39,.8); }
html[data-tema="orman"].canli .board__iz::before { inset: 32%; background: radial-gradient(circle, rgba(255,246,204,.95), rgba(255,182,39,.5) 40%, rgba(255,182,39,0) 70%); }

/* =================================================================== 4. ROBOT KASABASI */
html[data-tema="kasaba"].canli h1, html[data-tema="kasaba"].canli h2 { font-family: var(--v2-font-display); font-weight: 800; letter-spacing: -.02em; }
html[data-tema="kasaba"].canli .hero h1 { color: #22303A; text-shadow: 2px 2px 0 #B8F5DE, 4px 4px 0 #4CC9A0, 6px 6px 0 #22303A, 12px 16px 20px rgba(34,48,58,.18); line-height: 1.1; }
html[data-tema="kasaba"].canli .renkli { background: none; color: #D1572F; -webkit-text-fill-color: #D1572F; animation: none; text-shadow: 2px 2px 0 #FFE2D6, 4px 4px 0 #FF8A65, 6px 6px 0 #22303A; }
html[data-tema="kasaba"].canli .v2-tag, html[data-tema="kasaba"].canli .eyebrow { background: #FFB830; color: #22303A; border: 2px solid #22303A; border-radius: 8px; box-shadow: 3px 3px 0 #22303A; font-weight: 800; }
html[data-tema="kasaba"].canli .v2-btn { border: 2px solid #22303A; border-radius: 12px; font-weight: 800; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
html[data-tema="kasaba"].canli .v2-btn--primary { color: #22303A; background: linear-gradient(180deg, #FFDB80, #FFB830); box-shadow: 3px 3px 0 #E09A10, 6px 6px 0 #22303A; }
html[data-tema="kasaba"].canli .v2-btn:not(.v2-btn--primary) { color: #22303A; background: #FFFFFF; box-shadow: 3px 3px 0 #4CC9A0, 6px 6px 0 #22303A; backdrop-filter: none; }
html[data-tema="kasaba"].canli .v2-btn:hover { transform: translate(-3px, -3px); }
html[data-tema="kasaba"].canli .v2-btn--primary:hover { box-shadow: 3px 3px 0 #E09A10, 6px 6px 0 #E09A10, 9px 9px 0 #22303A; }
html[data-tema="kasaba"].canli .v2-btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 #22303A; }
/* İzometrik blok kartlar: sağ-alta yükselen kalınlık */
html[data-tema="kasaba"].canli .v2-card, html[data-tema="kasaba"].canli .verb, html[data-tema="kasaba"].canli .step,
html[data-tema="kasaba"].canli .stats li, html[data-tema="kasaba"].canli .grade {
  border: 2px solid #22303A; border-radius: 14px; background: #FFFFFF; backdrop-filter: none;
  box-shadow: 4px 4px 0 var(--yan, #4CC9A0), 8px 8px 0 var(--yan, #4CC9A0), 10px 10px 0 #22303A;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
html[data-tema="kasaba"].canli .verbs > li:nth-child(1) { --yan: #FFB830; } html[data-tema="kasaba"].canli .verbs > li:nth-child(2) { --yan: #FF8A65; }
html[data-tema="kasaba"].canli .verbs > li:nth-child(3) { --yan: #4CC9A0; } html[data-tema="kasaba"].canli .verbs > li:nth-child(4) { --yan: #58A6FF; }
html[data-tema="kasaba"].canli .verb { background: linear-gradient(180deg, #FFFFFF 0 60%, var(--_t) 60%); }
html[data-tema="kasaba"].canli .grade { background: var(--band-tint); --yan: var(--band); }
html[data-tema="kasaba"].canli [data-tilt]:hover { transform: translate(-4px, -4px) !important; box-shadow: 4px 4px 0 var(--yan, #4CC9A0), 8px 8px 0 var(--yan, #4CC9A0), 12px 12px 0 var(--yan, #4CC9A0), 14px 14px 0 #22303A; }
html[data-tema="kasaba"].canli .verb__ic, html[data-tema="kasaba"].canli .grade__ic { border: 2px solid #22303A; border-radius: 10px; box-shadow: 3px 3px 0 #22303A; }
html[data-tema="kasaba"].canli .step::before { background: #4CC9A0; color: #22303A; border: 2px solid #22303A; border-radius: 8px; box-shadow: 3px 3px 0 #22303A; }
html[data-tema="kasaba"].canli .stats b { background: none; color: #22303A; -webkit-text-fill-color: #22303A; text-shadow: 3px 3px 0 #4CC9A0; }
html[data-tema="kasaba"].canli .v2-topbar { background: rgba(239,250,245,.88); border-bottom: 2px solid #22303A; }
html[data-tema="kasaba"].canli .v2-topbar__nav a::after { background: #FFB830; height: 4px; }
html[data-tema="kasaba"].canli .sec--tint { background: #DDF4EA; border-block: 2px solid #22303A; }
html[data-tema="kasaba"].canli .v2-bottomnav { background: #FFFFFF; border-top: 2px solid #22303A; }
/* Mini oyun: kasaba meydanı (izometrik), küp evler */
html[data-tema="kasaba"].canli .isikli.isikli {
  border: 2px solid #22303A; border-radius: 22px; background: #FFFFFF; animation: none;
  box-shadow: 6px 6px 0 #4CC9A0, 12px 12px 0 #4CC9A0, 14px 14px 0 #22303A, 0 40px 60px -30px rgba(34,48,58,.5);
}
html[data-tema="kasaba"].canli .play .v2-bubble { background: #FFFFFF; border: 2px solid #22303A; box-shadow: 3px 3px 0 #22303A; color: #22303A; font-weight: 800; }
html[data-tema="kasaba"].canli .board {
  transform: perspective(900px) rotateX(52deg) rotateZ(-30deg) scale(.82); transform-origin: 50% 55%; transform-style: preserve-3d; margin: -28px 0 -6px;
  border-radius: 14px; background-color: #C9D3D9; background-image:
    linear-gradient(90deg, transparent 47%, #FFFFFF 47% 53%, transparent 53%), linear-gradient(rgba(34,48,58,.25) 2px, transparent 2px), linear-gradient(90deg, rgba(34,48,58,.25) 2px, transparent 2px);
  background-size: 22px 100%, calc(100% / var(--cols)) calc(100% / var(--rows)), calc(100% / var(--cols)) calc(100% / var(--rows));
  background-position: 0 50%, -1px -1px, -1px -1px;
  box-shadow: 0 0 0 3px #22303A, 10px 12px 0 3px #8FA0AA, 10px 12px 0 6px #22303A;
}
html[data-tema="kasaba"].canli .board__cell { transform-style: preserve-3d; }
html[data-tema="kasaba"].canli .board__wall::before {   /* küp evin çatısı + pencereler */
  width: 78%; height: 78%; border-radius: 6px; border: 2px solid #22303A; transform: translateZ(30px);
  background: radial-gradient(circle at 30% 30%, #FFE07A 0 9%, transparent 10%), radial-gradient(circle at 70% 70%, #FFE07A 0 9%, transparent 10%), #FF8A65;
}
html[data-tema="kasaba"].canli .board__wall::after {
  content: ""; position: absolute; left: 11%; width: 78%; top: 89%; height: 30px; background: #D1572F; border: 2px solid #22303A; border-top: 0;
  transform-origin: top; transform: rotateX(90deg); border-radius: 0 0 6px 6px;
  background-image: radial-gradient(circle at 30% 50%, #FFE07A 0 12%, transparent 13%), radial-gradient(circle at 70% 50%, #FFE07A 0 12%, transparent 13%);
}
html[data-tema="kasaba"].canli .board__star .v2-icon, html[data-tema="kasaba"].canli .board__spark svg { transform-origin: 50% 100%; transform: rotateZ(30deg) rotateX(-64deg) translateY(-6%); }
html[data-tema="kasaba"].canli .board__star .v2-icon { --v2-icon-fill: #FFB830; color: #22303A; filter: drop-shadow(0 4px 0 #22303A); animation: none; }
html[data-tema="kasaba"].canli .board__spark svg { width: 92%; height: 92%; }
html[data-tema="kasaba"].canli .palette .v2-block, html[data-tema="kasaba"].canli .prog .v2-block {
  border: 2px solid #22303A; border-radius: 10px; color: #22303A; background: #FFFFFF; box-shadow: 3px 3px 0 #4CC9A0, 5px 5px 0 #22303A; font-weight: 800;
}
html[data-tema="kasaba"].canli .palette .v2-block:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 #4CC9A0, 6px 6px 0 #4CC9A0, 8px 8px 0 #22303A; }
html[data-tema="kasaba"].canli .palette .v2-block:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 #22303A; }
html[data-tema="kasaba"].canli .prog { background: #EFFAF5; border: 2px dashed #22303A; }
html[data-tema="kasaba"].canli .prog .v2-block.is-now { background: #FFB830; }
html[data-tema="kasaba"].canli .board__iz::before { inset: 38% 20%; border-radius: 3px; background: #FFB830; transform: translateZ(1px); animation: izSon 2.4s ease-out forwards; }

/* =================================================================== 5. Seçici, fare izi */
html[data-tema="resif"] .canli-iz, html[data-tema="orman"] .canli-iz, html[data-tema="kasaba"] .canli-iz { display: none; }
html[data-tema="kasaba"] .canli-imlec { mix-blend-mode: multiply; opacity: .3; }
html[data-tema="kasaba"] .tema-sec { background: #FFFFFF; border: 2px solid #22303A; box-shadow: 4px 4px 0 #22303A; }
html[data-tema="kasaba"] .tema-sec button[aria-pressed="true"] { background: #4CC9A0; color: #22303A; }
html[data-tema="resif"] .tema-sec button[aria-pressed="true"] { background: linear-gradient(135deg, #3DF5FF, #FF8FC2); color: #03162B; }
html[data-tema="orman"] .tema-sec button[aria-pressed="true"] { background: linear-gradient(135deg, #FFD66B, #6EE7A0); color: #1F2E1C; }
.tema-sec { flex-wrap: wrap; max-width: calc(100vw - 96px); }

/* =================================================================== 6. Az efekt */
@media (prefers-reduced-motion: reduce) {
  .dunya-video, .sakinler { display: none !important; }
  html.canli .hero::after { animation: none !important; }
}
html.efekt-az .dunya-video, html.a11y-calm .dunya-video, html.efekt-az .sakinler, html.a11y-calm .sakinler { display: none !important; }
html.efekt-az.canli .hero::after, html.a11y-calm.canli .hero::after { animation: none; }