/* Piksir — yedek site teması "Stüdyo" (D71): açık, ferah, 3B stüdyo görünümü (maarif-robotik-3d arayüzünden esinlenildi;
   kod ya da görsel kopyalanmadı — yalnız görsel dil: lavanta-beyaz zemin, beyaz yüzer kartlar, çivit degrade düğme, hap menü,
   ışık bulutları, ışıklı kaide). canli.css'in ÜSTÜNE biner; yalnız html[data-tema="studyo"] altında etkilidir.
   Açmak: ?tema=studyo (sekmede hatırlanır) ya da canliEfekt.js VARSAYILAN = "studyo". Görsel varlık yok (paket bütçesi U133).
   Metin kontrastı AA; hareket canli.css §12 kurallarıyla kapanır (hareket azaltma, Sakin mod, efekt-az). */

/* =================================================================== 0. Token'lar */
html[data-tema="studyo"] {
  --c-metin: #12153D; --c-metin-2: #4B5070; --c-zemin: #F6F8FF;
  --c-v1: #6C63FF; --c-v1b: #4338CA; --c-v2: #514DE5; --c-v2b: #3B36C8; --c-v3: #06B6D4; --c-v4: #F472B6;
  --c-cam: rgba(255,255,255,.82); --c-cam-kenar: rgba(81,77,229,.14); --c-golge: 49, 46, 129; --c-isik: 99, 102, 241;
  --c-baslik-1: #12153D; --c-baslik-2: #514DE5; --c-baslik-3: #0891B2;
  --c-sahne: none; --c-sahne-k: none; --c-sahne-ort: none;
  --spark-goz: #7CF3FF; --spark-goz-koyu: #22B7FF;
  --v2-paper: #F6F8FF; --v2-surface: #FFFFFF; --v2-sunken: #EEF1FC; --v2-grid: rgba(81,77,229,.07); --v2-line: #E3E7F5;
  --v2-ink: #12153D; --v2-ink-2: #4B5070; --v2-ink-3: #6B7090; --v2-on-ink: #FFFFFF; --v2-link: #4338CA;
  --v2-shadow-color: transparent; --v2-offset: 0px; --v2-stroke: 1.5px; --v2-stroke-soft: 1px;
  --v2-font-display: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --st-kenar: #E3E7F5; --st-golge: 0 1px 2px rgba(18,21,61,.04), 0 12px 32px -12px rgba(49,46,129,.18);
  --st-golge-ust: 0 2px 4px rgba(18,21,61,.05), 0 24px 48px -16px rgba(49,46,129,.28);
  --st-birincil: linear-gradient(135deg, #6C63FF 0%, #514DE5 55%, #3B36C8 100%);
}

/* =================================================================== 1. Zemin: ışık bulutları (yavaş süzülür) */
html[data-tema="studyo"].canli body.v2-page {
  color: var(--c-metin);
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(108,99,255,.16), transparent 62%),
    radial-gradient(760px 480px at 92% 4%, rgba(6,182,212,.13), transparent 60%),
    radial-gradient(700px 600px at 50% 110%, rgba(244,114,182,.08), transparent 60%),
    #F6F8FF;
  background-attachment: fixed;
}
html[data-tema="studyo"].canli h1, html[data-tema="studyo"].canli h2 { font-family: var(--v2-font-display); font-weight: 800; letter-spacing: -.025em; }
html[data-tema="studyo"].canli .renkli { background-image: linear-gradient(100deg, #514DE5, #06B6D4 45%, #6C63FF 75%, #514DE5); }
html[data-tema="studyo"].canli .v2-paper-grid { background-image: none; }

/* =================================================================== 2. Yumuşak kenarlar: koyu çerçeve yerine ince açık kenar + gölge */
html[data-tema="studyo"] :where(.v2-card, .v2-block, .v2-input, .v2-notice, .v2-bubble, .verb, .step, .stats li, .grade, .role,
  .tn-akis li, .tn-sss details, .tn-cta, .gs-card, .gs-panel, .gs-stage, .gs-main > section) { border-color: var(--st-kenar); }
html[data-tema="studyo"].canli .v2-card, html[data-tema="studyo"].canli .verb, html[data-tema="studyo"].canli .step,
html[data-tema="studyo"].canli .stats li, html[data-tema="studyo"].canli .grade, html[data-tema="studyo"].canli .tn-akis li, html[data-tema="studyo"].canli .tn-cta {
  background: #FFFFFF; border: 1px solid var(--st-kenar); border-radius: 24px; box-shadow: var(--st-golge);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-tema="studyo"].canli .verb { background: linear-gradient(180deg, #FFFFFF 55%, color-mix(in srgb, var(--_c, #514DE5) 9%, #FFFFFF)); }
html[data-tema="studyo"].canli .grade { background: linear-gradient(180deg, #FFFFFF 40%, color-mix(in srgb, var(--band) 16%, #FFFFFF)); }
html[data-tema="studyo"].canli [data-tilt]::before { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(108,99,255,.12), transparent 60%); }
html[data-tema="studyo"].canli [data-tilt]:hover { box-shadow: var(--st-golge-ust), 0 0 0 1px rgba(81,77,229,.18); }
html[data-tema="studyo"].canli .verb__ic, html[data-tema="studyo"].canli .facts li > span, html[data-tema="studyo"].canli .tn-akis li > span {
  border: 0; border-radius: 16px; background: linear-gradient(135deg, #EEF0FF, #E0F7FB); box-shadow: inset 0 0 0 1px rgba(81,77,229,.12);
}
html[data-tema="studyo"].canli .step::before, html[data-tema="studyo"].canli .tn-kurulum li::before {
  background: var(--st-birincil); color: #FFFFFF; border: 0; box-shadow: 0 8px 18px -6px rgba(81,77,229,.6);
}
html[data-tema="studyo"].canli .stats b { background-image: linear-gradient(90deg, #514DE5, #06B6D4); }

/* =================================================================== 3. Etiket: noktalı hap */
html[data-tema="studyo"].canli .eyebrow, html[data-tema="studyo"].canli .v2-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(81,77,229,.16);
  background: rgba(255,255,255,.9); color: #3B36C8; font-family: var(--v2-font-body); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 4px 12px -6px rgba(49,46,129,.25);
}
html[data-tema="studyo"].canli .eyebrow::before, html[data-tema="studyo"].canli .v2-tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #514DE5; box-shadow: 0 0 0 3px rgba(81,77,229,.18); animation: stNabiz 2.4s ease-in-out infinite;
}
@keyframes stNabiz { 0%,100% { box-shadow: 0 0 0 3px rgba(81,77,229,.18); } 50% { box-shadow: 0 0 0 6px rgba(81,77,229,.05); } }

/* =================================================================== 4. Düğmeler: çivit degrade + beyaz hap */
html[data-tema="studyo"].canli .v2-btn { border-radius: 14px; }
html[data-tema="studyo"].canli .v2-btn--primary { color: #FFFFFF; border: 0; background: var(--st-birincil);
  box-shadow: 0 10px 24px -8px rgba(81,77,229,.65), inset 0 1px 0 rgba(255,255,255,.25); }
html[data-tema="studyo"].canli .v2-btn--primary:hover { box-shadow: 0 16px 32px -10px rgba(81,77,229,.75), inset 0 1px 0 rgba(255,255,255,.3); }
html[data-tema="studyo"].canli .v2-btn:not(.v2-btn--primary) { color: #12153D; background: #FFFFFF; border: 1px solid var(--st-kenar); box-shadow: 0 6px 16px -10px rgba(49,46,129,.35); backdrop-filter: none; }
html[data-tema="studyo"].canli .v2-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
html[data-tema="studyo"].canli .v2-btn::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); }

/* =================================================================== 5. Üst çubuk: ortalanmış hap menü */
html[data-tema="studyo"].canli .v2-topbar { background: rgba(246,248,255,.78); border-bottom: 1px solid rgba(81,77,229,.08); }
html[data-tema="studyo"].canli .v2-topbar__nav { padding: 5px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--st-kenar); box-shadow: var(--st-golge); }
html[data-tema="studyo"].canli .v2-topbar__nav a { border-radius: 999px; padding: 0 16px; color: #4B5070; }
html[data-tema="studyo"].canli .v2-topbar__nav a::after { display: none; }
html[data-tema="studyo"].canli .v2-topbar__nav a:hover { background: #EEF1FC; color: #12153D; }
html[data-tema="studyo"].canli .v2-topbar__nav a[aria-current="page"] { background: #12153D; color: #FFFFFF; }
html[data-tema="studyo"].canli .v2-brand span { background-image: linear-gradient(90deg, #12153D, #514DE5); }
html[data-tema="studyo"].canli .v2-bottomnav { background: rgba(255,255,255,.92); border-top: 1px solid var(--st-kenar); }
html[data-tema="studyo"].canli .v2-bottomnav a[aria-current="page"] { background: #12153D; color: #FFFFFF; }
html[data-tema="studyo"].canli .v2-sitefoot { background: #FFFFFF; border-top: 1px solid var(--st-kenar); }
html[data-tema="studyo"].canli .sec + .sec { border-top: 0; }
html[data-tema="studyo"].canli .sec--tint { background: linear-gradient(180deg, transparent, rgba(81,77,229,.035), transparent); }

/* =================================================================== 6. Kahraman: ışık halkası ve ızgara (ana sayfa ve tanıtım sayfaları) */
html[data-tema="studyo"].canli .hero::before {
  background:
    radial-gradient(420px 420px at 78% 46%, rgba(108,99,255,.20), transparent 70%),
    radial-gradient(300px 300px at 88% 70%, rgba(6,182,212,.16), transparent 70%);
  animation: stBulut 14s ease-in-out infinite alternate;
}
@keyframes stBulut { from { transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.02); } to { transform: translate3d(calc(var(--px, 0px) - 18px), calc(var(--py, 0px) + 12px), 0) scale(1.08); } }
html[data-tema="studyo"].canli .hero::after, html[data-tema="studyo"].canli .tn-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(81,77,229,.16) 1.2px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
}
html[data-tema="studyo"].canli .tn-hero__in { position: relative; z-index: 1; }
html[data-tema="studyo"].canli .hero h1 { color: #12153D; text-shadow: none; }
html[data-tema="studyo"].canli .isik-akis i { background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), rgba(108,99,255,.7), transparent); }
html[data-tema="studyo"].canli .isik-toz b { background: #FFFFFF; box-shadow: 0 0 12px 3px rgba(108,99,255,.55); }

/* Işıklı kaide: tanıtım sayfası Piksir'i ve ana sayfa oyun kartı üzerinde süzülür */
html[data-tema="studyo"].canli .tn-hero__yan { position: relative; padding-bottom: 34px; }
html[data-tema="studyo"].canli .tn-hero__yan svg { animation: stSuzul 5.5s ease-in-out infinite; filter: drop-shadow(0 26px 22px rgba(49,46,129,.25)); }
html[data-tema="studyo"].canli .tn-hero__yan::before {
  content: ""; position: absolute; left: 50%; top: min(196px, 44vw); width: min(240px, 56vw); height: 46px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(ellipse at center, rgba(108,99,255,.45), rgba(6,182,212,.18) 45%, transparent 70%);
  box-shadow: 0 0 0 2px rgba(81,77,229,.25), 0 0 0 10px rgba(81,77,229,.07); animation: stKaide 5.5s ease-in-out infinite;
}
@keyframes stSuzul { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes stKaide { 0%,100% { opacity: 1; transform: translateX(-50%) scale(1); } 50% { opacity: .7; transform: translateX(-50%) scale(.9); } }

/* =================================================================== 7. Ana sayfa mini oyun: beyaz stüdyo masası, kabarık küpler */
html[data-tema="studyo"].canli .isikli.isikli {
  border: 1px solid transparent; border-radius: 28px; animation: halka 8s linear infinite;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, conic-gradient(from var(--aci, 0deg), #C7C4FF, #A5F3FC, #FBCFE8, #C7C4FF) border-box;
  box-shadow: var(--st-golge-ust);
}
html[data-tema="studyo"].canli .play { transform: perspective(1400px) rotateY(var(--ry, -5deg)) rotateX(var(--rx, 3deg)); }
html[data-tema="studyo"].canli .play .v2-bubble { background: #FFFFFF; border: 1px solid var(--st-kenar); color: #12153D; box-shadow: 0 6px 16px -10px rgba(49,46,129,.4); }
html[data-tema="studyo"].canli .board {
  background-color: #F1F3FE; transform: perspective(760px) rotateX(18deg); border-radius: 20px;
  background-image: linear-gradient(rgba(81,77,229,.13) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(81,77,229,.13) 1.5px, transparent 1.5px);
  box-shadow: inset 0 0 0 1px rgba(81,77,229,.14), 0 18px 0 -8px #DDE1F7, 0 30px 40px -14px rgba(49,46,129,.35);
}
html[data-tema="studyo"].canli .board__wall::before {
  border: 0; border-radius: 12px; width: 74%; height: 74%;
  background: linear-gradient(160deg, #FFFFFF, #E4E7FB); box-shadow: 0 7px 0 #C9CEF2, 0 14px 18px -8px rgba(49,46,129,.45), inset 0 1px 0 #FFFFFF;
}
html[data-tema="studyo"].canli .board__star .v2-icon { --v2-icon-fill: #FDBA21; color: #B45309; filter: drop-shadow(0 0 10px rgba(253,186,33,.8)); }
html[data-tema="studyo"].canli .palette .v2-block, html[data-tema="studyo"].canli .prog .v2-block {
  color: #12153D; border: 1px solid var(--st-kenar); border-radius: 16px; background: #FFFFFF; box-shadow: 0 6px 0 #E3E7F5, 0 12px 18px -10px rgba(49,46,129,.35);
}
html[data-tema="studyo"].canli .palette .v2-block:hover { box-shadow: 0 9px 0 #E3E7F5, 0 16px 22px -10px rgba(49,46,129,.45), 0 0 0 3px rgba(81,77,229,.12); }
html[data-tema="studyo"].canli .prog { background: #F6F8FF; border: 1px dashed rgba(81,77,229,.35); }
html[data-tema="studyo"].canli .prog .v2-block.is-now { background: #EEF0FF; border-color: #514DE5; box-shadow: 0 0 0 3px rgba(81,77,229,.2); }

/* =================================================================== 8. İmleç, iz, az efekt */
html[data-tema="studyo"] .canli-imlec { mix-blend-mode: multiply; opacity: .35; }
html[data-tema="studyo"] .canli-iz { background: radial-gradient(circle, #FFFFFF, rgba(99,102,241,.75) 45%, rgba(99,102,241,0) 72%); }
html.efekt-az[data-tema="studyo"].canli body.v2-page { background-attachment: scroll; }
html.efekt-az[data-tema="studyo"] .eyebrow::before, html.a11y-calm[data-tema="studyo"] .eyebrow::before,
html.efekt-az[data-tema="studyo"] .v2-tag::before, html.a11y-calm[data-tema="studyo"] .v2-tag::before { animation: none; }
html.efekt-az[data-tema="studyo"].canli .hero::before, html.a11y-calm[data-tema="studyo"].canli .hero::before,
html.efekt-az[data-tema="studyo"].canli .tn-hero__yan svg, html.a11y-calm[data-tema="studyo"].canli .tn-hero__yan svg,
html.efekt-az[data-tema="studyo"].canli .tn-hero__yan::before, html.a11y-calm[data-tema="studyo"].canli .tn-hero__yan::before { animation: none; }
html[data-tema="studyo"].canli .v2-topbar__nav { margin-inline: auto; }
html[data-tema="studyo"].canli .tn-hero, html[data-tema="studyo"].canli .hero { border-bottom: 1px solid var(--st-kenar); }