/* Piksir v3 — "Canlı" tasarım katmanı (D64). v2 bileşenlerinin ÜSTÜNE biner (katmansız kurallar @layer v2.*'yi ezer);
   v2 dosyaları değişmez → yedek/kill-switch güvencesi korunur. Üç tema: html[data-tema="ada"|"aurora"|"seker"].
   Hareket kuralları: prefers-reduced-motion ya da html.efekt-az → süzülme, akış, parçacık, bulanıklık kapanır.
   Yanıp sönme yok (WCAG 2.3.1: saniyede 3'ten az parlama); metin kontrastı her temada AA. Marka: docs/urun/MARKA_KIMLIGI.md */

/* ------------------------------------------------------------------ 1. Tema token'ları */
:root {
  --c-metin: #1B1846; --c-metin-2: #4A4778; --c-zemin: #F4F1FF;
  --c-v1: #FFC629; --c-v1b: #FF9A1F;            /* birincil: güneş sarısı → turuncu */
  --c-v2: #7B5CFF; --c-v2b: #3B6CFF;            /* ikincil: lavanta → mavi */
  --c-v3: #22D3EE; --c-v4: #FF6FB5;             /* ışık: camgöbeği, pembe */
  --c-cam: rgba(255,255,255,.62); --c-cam-kenar: rgba(255,255,255,.85); --c-golge: 40, 30, 120;
  --c-isik: 255, 214, 102; --c-baslik-1: #2A1F8F; --c-baslik-2: #6A45F5; --c-baslik-3: #1A7FD6;
  --c-sahne: url("../../../assets/v3/sahne/aurora.webp"); --c-sahne-k: url("../../../assets/v3/sahne/aurora-960.webp");
  --c-sahne-ort: linear-gradient(90deg, rgba(244,241,255,.96) 0%, rgba(244,241,255,.78) 34%, rgba(244,241,255,0) 62%);
  --spark-goz: #7CF3FF; --spark-goz-koyu: #22B7FF;
}
html[data-tema="aurora"] {
  --c-metin: #F6F4FF; --c-metin-2: #C9C4F4; --c-zemin: #0E0B2E;
  --c-v1: #FFD43B; --c-v1b: #FF8A3D; --c-v2: #A66CFF; --c-v2b: #5B7CFF; --c-v3: #3EF0FF; --c-v4: #FF5CD6;
  --c-cam: rgba(30,22,84,.48); --c-cam-kenar: rgba(170,150,255,.42); --c-golge: 0, 0, 0;
  --c-isik: 166, 108, 255; --c-baslik-1: #FFFFFF; --c-baslik-2: #C69CFF; --c-baslik-3: #3EF0FF;
  --c-sahne: url("../../../assets/v3/sahne/aurora.webp"); --c-sahne-k: url("../../../assets/v3/sahne/aurora-960.webp");
  --c-sahne-ort: linear-gradient(90deg, rgba(14,11,46,.94) 0%, rgba(14,11,46,.7) 36%, rgba(14,11,46,0) 64%);
  --spark-goz: #FFE066; --spark-goz-koyu: #FFB300;
  /* v2 token'larının koyu karşılıkları (bileşenler kendiliğinden uyum sağlasın) */
  --v2-ink: #F6F4FF; --v2-ink-2: #C9C4F4; --v2-ink-3: #8F89C9; --v2-paper: #0E0B2E; --v2-surface: rgba(30,22,84,.55);
  --v2-sunken: rgba(255,255,255,.06); --v2-line: rgba(170,150,255,.28); --v2-grid: rgba(170,150,255,.12);
  --v2-link: #8FD8FF; --v2-on-ink: #0E0B2E; --v2-shadow-color: rgba(0,0,0,.45);
}
/* ------------------------------------------------------------------ 2. Zemin, yazı */
html.canli body.v2-page {
  background: radial-gradient(1200px 700px at 85% -10%, rgba(var(--c-isik), .28), transparent 60%),
              radial-gradient(900px 600px at -10% 40%, color-mix(in srgb, var(--c-v2) 22%, transparent), transparent 60%),
              var(--c-zemin);
  color: var(--c-metin);
}
html.canli h1, html.canli h2 { color: var(--c-metin); letter-spacing: -.01em; }
html.canli .section-head p, html.canli .hero__lead { color: var(--c-metin-2); }
html.canli .eyebrow {
  display: inline-block; justify-self: start; padding: 4px 12px; border-radius: 999px; color: var(--c-metin);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-v2) 22%, transparent), color-mix(in srgb, var(--c-v3) 22%, transparent));
  border: 1px solid var(--c-cam-kenar);
}
/* Akan degrade başlık kelimesi */
html.canli .renkli {
  background: linear-gradient(100deg, var(--c-baslik-2), var(--c-baslik-3), var(--c-v4), var(--c-baslik-2));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: renkAk 9s ease-in-out infinite;
}
html.canli .vurgu-cizgi { position: relative; white-space: nowrap; }
html.canli .vurgu-cizgi::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .14em; border-radius: 99px;
  background: linear-gradient(90deg, var(--c-v1), var(--c-v1b)); transform-origin: left; animation: cizgiCiz 1.2s .4s both cubic-bezier(.2,.8,.2,1);
}
@keyframes renkAk { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes cizgiCiz { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------------ 3. Üst çubuk: cam */
html.canli .v2-topbar {
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--c-cam-kenar);
  background: color-mix(in srgb, var(--c-zemin) 55%, transparent); backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
html.canli .v2-topbar__nav a { position: relative; color: var(--c-metin); background: transparent; }
html.canli .v2-topbar__nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--c-v2), var(--c-v3)); transform: scaleX(0); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
html.canli .v2-topbar__nav a:hover { background: color-mix(in srgb, var(--c-v2) 12%, transparent); }
html.canli .v2-topbar__nav a:hover::after, html.canli .v2-topbar__nav a[aria-current="page"]::after { transform: scaleX(1); }
html.canli .v2-topbar__nav a[aria-current="page"] { background: transparent; color: var(--c-metin); }
html.canli .v2-brand span {
  background: linear-gradient(90deg, var(--c-baslik-1), var(--c-baslik-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-tema="aurora"].canli .v2-brand span { background-image: linear-gradient(90deg, #FFFFFF, #C69CFF); }

/* ------------------------------------------------------------------ 4. Düğmeler: degrade, parlama, ışık süpürmesi, dalga */
html.canli .v2-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s; }
html.canli .v2-btn--primary {
  color: #1B1846; border: 0;
  background: linear-gradient(180deg, #FFE07A 0%, var(--c-v1) 45%, var(--c-v1b) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -3px 0 rgba(0,0,0,.12) inset, 0 10px 24px -6px rgba(var(--c-isik), .75), 0 0 0 1px rgba(255,255,255,.5);
}
html.canli .v2-btn:not(.v2-btn--primary) {
  color: var(--c-metin); background: var(--c-cam); border: 1px solid var(--c-cam-kenar);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 22px -10px rgba(var(--c-golge), .45);
}
/* Fareyi izleyen iç ışık (canliEfekt.js --mx/--my yazar) */
html.canli .v2-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.65), transparent 60%);
}
/* Çapraz ışık süpürmesi */
html.canli .v2-btn::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform: skewX(-18deg);
}
html.canli .v2-btn:hover { transform: translateY(-2px) scale(1.02); filter: saturate(1.1); }
html.canli .v2-btn:hover::before { opacity: 1; }
html.canli .v2-btn:hover::after { animation: supur .8s cubic-bezier(.2,.8,.2,1); }
html.canli .v2-btn:active { transform: translateY(1px) scale(.98); }
html.canli .v2-btn--primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -3px 0 rgba(0,0,0,.12) inset, 0 16px 34px -6px rgba(var(--c-isik), .95), 0 0 0 1px rgba(255,255,255,.6); }
@keyframes supur { to { left: 130%; } }
.canli-dalga { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; transform: scale(0); opacity: .55;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); animation: dalga .65s ease-out forwards; }
@keyframes dalga { to { transform: scale(1); opacity: 0; } }

/* ------------------------------------------------------------------ 5. Cam kartlar, ışık takibi, eğilme */
html.canli .v2-card, html.canli .verb, html.canli .step, html.canli .stats li, html.canli .grade {
  position: relative; background: var(--c-cam); border: 1px solid var(--c-cam-kenar);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 18px 40px -18px rgba(var(--c-golge), .45), 0 1px 0 rgba(255,255,255,.6) inset;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
html.canli .verb { background: linear-gradient(160deg, var(--_t), var(--c-cam)); }
html.canli .grade { background: linear-gradient(160deg, var(--band-tint), var(--c-cam)); }
html[data-tema="aurora"].canli .verb, html[data-tema="aurora"].canli .grade { background: linear-gradient(160deg, color-mix(in srgb, var(--_c, var(--band)) 26%, transparent), var(--c-cam)); }
html[data-tema="aurora"].canli .grade__title, html[data-tema="aurora"].canli .grade__num, html[data-tema="aurora"].canli .verb h3, html[data-tema="aurora"].canli .verb p { color: var(--c-metin); }
html.canli [data-tilt]:not(.step)::before {   /* .step::before adım numarasıdır (tanitim.css sayacı) — ışık lekesi onu ezmesin (D116) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.45), transparent 55%);
}
html.canli [data-tilt]:not(.step):hover::before { opacity: 1; }
html.canli [data-tilt]:hover { box-shadow: 0 30px 60px -22px rgba(var(--c-golge), .6), 0 0 0 1px var(--c-cam-kenar), 0 0 40px -10px rgba(var(--c-isik), .6); }
/* Kenarda dönen ışık halkası (yalnız öne çıkan kartlar) */
html.canli .isikli.isikli {
  border: 2px solid transparent;
  background: linear-gradient(160deg, color-mix(in srgb, #FFFFFF 78%, transparent), color-mix(in srgb, #FFFFFF 55%, transparent)) padding-box,
              conic-gradient(from var(--aci, 0deg), var(--c-v2), var(--c-v3), var(--c-v4), var(--c-v1), var(--c-v2)) border-box;
  animation: halka 6s linear infinite;
}
html[data-tema="aurora"].canli .isikli.isikli { background: linear-gradient(160deg, rgba(60,44,150,.85), rgba(20,14,60,.85)) padding-box,
  conic-gradient(from var(--aci, 0deg), var(--c-v2), var(--c-v3), var(--c-v4), var(--c-v1), var(--c-v2)) border-box; }
@property --aci { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes halka { to { --aci: 360deg; } }

/* ------------------------------------------------------------------ 6. Kahraman: sahne, paralaks, ışık akışı, parçacık */
html.canli .hero { position: relative; overflow: hidden; border-bottom: 0; min-height: min(92vh, 860px); display: grid; align-items: center; }
/* Odak/tıklama kahramanı içten kaydırmasın (hidden kutu programla kaydırılabilir; clip kaydırılamaz — D86) */
@supports (overflow: clip) { html.canli .hero { overflow: clip; } }
html.canli .hero.v2-paper-grid { background: none; }
html.canli .hero::before {
  content: ""; position: absolute; inset: -4%; z-index: 0; pointer-events: none;
  background: var(--c-sahne-ort), var(--c-sahne) right center / cover no-repeat;
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.06); transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (max-width: 760px) { html.canli .hero::before { background: linear-gradient(180deg, color-mix(in srgb, var(--c-zemin) 92%, transparent) 0%, color-mix(in srgb, var(--c-zemin) 70%, transparent) 55%, color-mix(in srgb, var(--c-zemin) 30%, transparent)), var(--c-sahne-k) 70% center / cover no-repeat; } }
html.canli .hero > .v2-container { position: relative; z-index: 2; }
html.canli .hero h1 { font-size: clamp(2.3rem, 4.8vw, 4.1rem); line-height: 1.02; text-shadow: 0 2px 30px color-mix(in srgb, var(--c-zemin) 80%, transparent); }
/* Işık akıntıları */
.isik-akis { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.isik-akis i {
  position: absolute; height: 2px; width: 46vw; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), rgba(var(--c-isik), .9), transparent);
  filter: blur(.6px) drop-shadow(0 0 8px rgba(var(--c-isik), .9)); transform: rotate(-14deg);
  animation: akis 7s linear infinite;
}
.isik-akis i:nth-child(1) { top: 22%; left: -50%; animation-delay: 0s; }
.isik-akis i:nth-child(2) { top: 48%; left: -50%; animation-delay: 2.4s; width: 34vw; }
.isik-akis i:nth-child(3) { top: 70%; left: -50%; animation-delay: 4.6s; width: 52vw; }
.isik-akis i:nth-child(4) { top: 34%; left: -50%; animation-delay: 5.8s; width: 26vw; }
@keyframes akis { 0% { transform: translateX(0) rotate(-14deg); opacity: 0; } 12% { opacity: 1; } 80% { opacity: .8; } 100% { transform: translateX(210vw) rotate(-14deg); opacity: 0; } }
/* Süzülen ışık tozları (deterministik konumlar — CSS) */
.isik-toz { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.isik-toz b { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.95);
  box-shadow: 0 0 12px 3px rgba(var(--c-isik), .8); animation: toz 9s ease-in-out infinite; opacity: .8; }
.isik-toz b:nth-child(1) { left: 58%; top: 18%; } .isik-toz b:nth-child(2) { left: 72%; top: 62%; animation-delay: -2s; }
.isik-toz b:nth-child(3) { left: 88%; top: 30%; animation-delay: -4s; } .isik-toz b:nth-child(4) { left: 64%; top: 82%; animation-delay: -6s; }
.isik-toz b:nth-child(5) { left: 94%; top: 74%; animation-delay: -1s; width: 4px; height: 4px; } .isik-toz b:nth-child(6) { left: 52%; top: 44%; animation-delay: -5s; width: 4px; height: 4px; }
@keyframes toz { 0%,100% { transform: translate3d(0,0,0) scale(1); opacity: .25; } 50% { transform: translate3d(14px,-28px,0) scale(1.4); opacity: 1; } }

/* ------------------------------------------------------------------ 7. 3B mini oyun */
html.canli .play {
  background: linear-gradient(160deg, color-mix(in srgb, #FFFFFF 70%, transparent), var(--c-cam)); border-radius: 28px;
  transform: perspective(1400px) rotateY(var(--ry, -6deg)) rotateX(var(--rx, 4deg));
  box-shadow: 0 40px 80px -30px rgba(var(--c-golge), .65), 0 0 0 1px var(--c-cam-kenar), 0 0 60px -20px rgba(var(--c-isik), .7);
}
html[data-tema="aurora"].canli .play { background: linear-gradient(160deg, rgba(60,44,150,.55), rgba(20,14,60,.55)); }
html.canli .play .v2-bubble { background: var(--c-cam); border-color: var(--c-cam-kenar); color: var(--c-metin); box-shadow: 0 8px 20px -10px rgba(var(--c-golge), .5); }
html.canli .board {
  transform: perspective(700px) rotateX(14deg); transform-origin: 50% 100%; overflow: visible; margin-top: -6px; border: 0; border-radius: 20px;
  background-color: color-mix(in srgb, #FFFFFF 86%, var(--c-v2) 14%);
  background-image: linear-gradient(color-mix(in srgb, var(--c-v2) 18%, transparent) 2px, transparent 2px), linear-gradient(90deg, color-mix(in srgb, var(--c-v2) 18%, transparent) 2px, transparent 2px);
  box-shadow: 0 2px 0 rgba(255,255,255,.9) inset, 0 18px 0 -6px color-mix(in srgb, var(--c-v2) 45%, #2A1F8F), 0 30px 40px -12px rgba(var(--c-golge), .55);
}
html[data-tema="aurora"].canli .board { background-color: rgba(40,30,110,.85); }
html.canli .board__wall::before {
  border: 0; border-radius: 12px; width: 76%; height: 76%;
  background: linear-gradient(160deg, #E9ECFF, #B8BEE8); box-shadow: 0 6px 0 #8C93C6, 0 12px 16px -6px rgba(var(--c-golge), .6), 0 1px 0 #fff inset;
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(60,50,140,.12) 6px 9px), linear-gradient(160deg, #E9ECFF, #B8BEE8);
}
html.canli .board__star .v2-icon { --v2-icon-fill: #FFD43B; color: #B87400; filter: drop-shadow(0 0 10px rgba(255,200,40,.95)); animation: yildizDon 3.6s ease-in-out infinite; }
@keyframes yildizDon { 0%,100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }
html.canli .board__spark svg { filter: drop-shadow(0 10px 6px rgba(var(--c-golge), .45)); }
html.canli .board__spark.is-happy svg { animation: zipla .6s cubic-bezier(.2,1.6,.4,1) 2; }
@keyframes zipla { 40% { transform: translateY(-26%) scale(1.08); } }
html.canli .prog { background: color-mix(in srgb, #FFFFFF 50%, transparent); border-color: color-mix(in srgb, var(--c-v2) 45%, transparent); }
html.canli .palette .v2-block, html.canli .prog .v2-block {
  border: 0; border-radius: 16px; color: #1B1846;
  background: linear-gradient(180deg, #FFFFFF, #E4E7FF); box-shadow: 0 6px 0 #9AA0D6, 0 12px 18px -8px rgba(var(--c-golge), .55), 0 1px 0 #fff inset;
  transition: transform .15s, box-shadow .15s;
}
html.canli .palette .v2-block:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #9AA0D6, 0 16px 22px -8px rgba(var(--c-golge), .6), 0 0 22px -4px rgba(var(--c-isik), .8); }
html.canli .palette .v2-block:active { transform: translateY(5px); box-shadow: 0 1px 0 #9AA0D6, 0 4px 8px -4px rgba(var(--c-golge), .5); }
html.canli .prog .v2-block.is-now { background: linear-gradient(180deg, #FFF3B8, var(--c-v1)); box-shadow: 0 6px 0 #D29A00, 0 0 24px -2px rgba(255,200,40,.9); }
/* Başarı kıvılcımları (homePage.js .is-got → CSS; deterministik konumlar) */
html.canli .board__star.is-got::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,230,120,.95) 0 8%, transparent 9%) 20% 30%/40% 40% no-repeat,
              radial-gradient(circle, rgba(124,243,255,.95) 0 8%, transparent 9%) 70% 20%/40% 40% no-repeat,
              radial-gradient(circle, rgba(255,111,181,.95) 0 8%, transparent 9%) 60% 75%/40% 40% no-repeat;
  animation: patla .8s ease-out forwards;
}
@keyframes patla { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }

/* ------------------------------------------------------------------ 8. Bölümler, kaydırınca beliriş */
html.canli .sec + .sec { border-top: 0; }
html.canli .sec--tint { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-v2) 8%, transparent), transparent); }
html.canli [data-belir] { opacity: 0; transform: translateY(28px) scale(.98); filter: blur(8px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1), filter .8s; }
html.canli [data-belir].gorundu { opacity: 1; transform: none; filter: none; }
html.canli .step::before { background: linear-gradient(135deg, var(--c-v1), var(--c-v1b)); box-shadow: 0 6px 16px -6px rgba(var(--c-isik), .9); border: 0; color: #1B1846; }
html.canli .stats b { background: linear-gradient(90deg, var(--c-baslik-2), var(--c-baslik-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.canli .v2-sitefoot { background: color-mix(in srgb, var(--c-zemin) 70%, transparent); border-top: 1px solid var(--c-cam-kenar); }
html.canli .v2-bottomnav { background: color-mix(in srgb, var(--c-zemin) 70%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--c-cam-kenar); }

/* ------------------------------------------------------------------ 9. Fare ışığı ve iz */
.canli-imlec { position: fixed; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%;
  pointer-events: none; z-index: 1; mix-blend-mode: soft-light; opacity: .9;
  background: radial-gradient(circle, rgba(var(--c-isik), .55), rgba(var(--c-isik), 0) 62%); will-change: transform; }
html[data-tema="aurora"] .canli-imlec { mix-blend-mode: screen; opacity: .55; }
.canli-iz { position: fixed; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; z-index: 60;
  background: radial-gradient(circle, #FFFFFF, rgba(var(--c-isik), .9) 45%, rgba(var(--c-isik), 0) 72%); will-change: transform, opacity; }

/* ------------------------------------------------------------------ 10. Canlı Piksir (sparkCanli.js) */
.spk { overflow: visible; }
.spk .spk-yuz { transform-box: view-box; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.spk .spk-bak { transition: transform .25s ease-out; }
.spk .spk-gozler { transform-box: fill-box; transform-origin: center; animation: kirp 4.2s var(--spk-faz, 0s) infinite; }
.spk .spk-mutlu { opacity: 0; transition: opacity .15s; }
.spk.spk-sevinc .spk-gozler { opacity: 0; }
.spk.spk-sevinc .spk-mutlu { opacity: 1; }
.spk.spk-sevinc { animation: zipla .7s cubic-bezier(.2,1.6,.4,1); }
.spk .spk-anten { animation: anten 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
html.canli .mission svg.spark, html.canli .play__top svg, html.canli .noresult svg { animation: suzul 5s ease-in-out infinite; }
@keyframes kirp { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.08); } 90% { transform: scaleY(1); } 92% { transform: scaleY(.1); } 94% { transform: scaleY(1); } }
@keyframes anten { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes suzul { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

/* ------------------------------------------------------------------ 11. Tasarım seçici (prototip) */
.tema-sec { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; gap: 6px; align-items: center; padding: 6px;
  border-radius: 999px; background: var(--c-cam); border: 1px solid var(--c-cam-kenar); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px -12px rgba(var(--c-golge), .55); font: 800 14px/1 var(--v2-font-body, system-ui); color: var(--c-metin); }
.tema-sec span { padding: 0 8px; }
.tema-sec button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; color: var(--c-metin); background: transparent; }
.tema-sec button[aria-pressed="true"] { background: linear-gradient(135deg, var(--c-v2), var(--c-v3)); color: #FFFFFF; }
@media (max-width: 1023.98px) { .tema-sec { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ------------------------------------------------------------------ 12. Az efekt: hareket azaltma ve zayıf cihaz */
@media (prefers-reduced-motion: reduce) {
  html.canli *, html.canli *::before, html.canli *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .isik-akis, .isik-toz, .canli-imlec, .canli-iz { display: none !important; }
  html.canli [data-belir] { opacity: 1; transform: none; filter: none; }
}
html.efekt-az .isik-akis, html.efekt-az .isik-toz, html.efekt-az .canli-imlec, html.efekt-az .canli-iz { display: none !important; }
html.efekt-az.canli .v2-card, html.efekt-az.canli .verb, html.efekt-az.canli .step, html.efekt-az.canli .grade, html.efekt-az.canli .stats li,
html.efekt-az.canli .v2-topbar, html.efekt-az.canli .v2-btn, html.efekt-az.canli .v2-bottomnav { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.efekt-az.canli [data-belir] { filter: none; }
html.efekt-az .isikli { animation: none; }
html.canli .play__note { color: var(--c-metin); }
html.canli .play__note svg { stroke: currentColor; }
html[data-tema="aurora"].canli .prog:empty::before { color: var(--c-metin-2); }
html.efekt-az.canli .v2-topbar, html.efekt-az.canli .v2-bottomnav { background: color-mix(in srgb, var(--c-zemin) 94%, transparent); }
/* a11y.js "Sakin mod" (html.a11y-calm) = hareket azaltma ile aynı */
html.a11y-calm .isik-akis, html.a11y-calm .isik-toz, html.a11y-calm .canli-imlec, html.a11y-calm .canli-iz { display: none !important; }
html.a11y-calm.canli [data-belir] { opacity: 1; transform: none; filter: none; }
@media (max-width: 760px) { .tema-sec span { display: none; } .tema-sec button { padding: 0 10px; } }
html[data-tema="aurora"].canli .v2-bottomnav a[aria-current="page"] { color: #1B1846; }

/* ------------------------------------------------------------------ 13. Bölüm paletleri (aynı aile, farklı vurgu — MARKA_KIMLIGI §3)
   Kullanım: <body data-bolum="ogrenci|ogretmen|veli">. Öğrenci = tema varsayılanı; öğretmen/okul = sakin indigo + camgöbeği;
   veli = sıcak mercan + nane. Metin renkleri temadan gelir (kontrast korunur). */
[data-bolum="ogretmen"] { --c-v1: #5EE3F0; --c-v1b: #2BB3D9; --c-v2: #4B4FD8; --c-v2b: #2A2F9E; --c-v3: #39C6A0; --c-v4: #8C7CFF;
  --c-isik: 94, 227, 240; --c-baslik-2: #3A3FC4; --c-baslik-3: #157FA3; }
[data-bolum="veli"] { --c-v1: #FFB38A; --c-v1b: #FF7F6B; --c-v2: #F0627A; --c-v2b: #D9455F; --c-v3: #4FD1A5; --c-v4: #FFC93C;
  --c-isik: 255, 160, 120; --c-baslik-2: #C93A55; --c-baslik-3: #1F8F6A; }
html[data-tema="aurora"] [data-bolum="ogretmen"] { --c-baslik-2: #9EA2FF; --c-baslik-3: #5EE3F0; }
html[data-tema="aurora"] [data-bolum="veli"] { --c-baslik-2: #FF9AAE; --c-baslik-3: #6FF0C2; }

/* ------------------------------------------------------------------ 14. Site geneli Aurora (sahip seçimi 2026-10-17)
   İç sayfalar ve oyunlar: üstte sönük kutup ışığı sahnesi, aşağı doğru zemin rengine erir (metin kontrastını etkilemez). */
html[data-tema="aurora"].canli body.v2-page {
  background:
    linear-gradient(180deg, rgba(14,11,46,.78) 0, rgba(14,11,46,.9) 360px, var(--c-zemin) 640px),
    var(--c-sahne-k) center top / 100% auto no-repeat,
    var(--c-zemin);
}
@media (min-width: 961px) { html[data-tema="aurora"].canli body.v2-page {
  background: linear-gradient(180deg, rgba(14,11,46,.78) 0, rgba(14,11,46,.9) 420px, var(--c-zemin) 760px), var(--c-sahne) center top / 100% auto no-repeat, var(--c-zemin); } }
/* Bölüm başlıklarındaki kalın açık çizgiler koyu zeminde göz yorar → yumuşat */
html[data-tema="aurora"].canli { --v2-line: rgba(170,150,255,.28); }

/* ------------------------------------------------------------------ 15. Yazdırma: kâğıt her zaman açık (veli raporu, sertifika, giriş kartları) */
@media print {
  html.canli, html.canli [data-bolum] {
    --v2-paper: #FFFFFF; --v2-surface: #FFFFFF; --v2-sunken: #F4F3EE; --v2-grid: #E6ECF5; --v2-line: #D6D8E4;
    --v2-ink: #1F1D3D; --v2-ink-2: #55536F; --v2-ink-3: #8A88A3; --v2-on-ink: #FFFFFF; --v2-link: #2448D6;
    --v2-yellow-ink: #7A5600; --v2-green-ink: #0C6E3E; --v2-blue-ink: #2448D6; --v2-tomato-ink: #B42E13;
    --v2-yellow-tint: #FFF1C7; --v2-green-tint: #DDF5E7; --v2-blue-tint: #E3EAFF; --v2-tomato-tint: #FFE4DC; --v2-shadow-color: #1F1D3D;
    --c-metin: #1F1D3D; --c-metin-2: #55536F; --c-zemin: #FFFFFF; --c-cam: #FFFFFF; --c-cam-kenar: #D6D8E4;
  }
  html.canli body.v2-page { background: #FFFFFF !important; color: #1F1D3D; }
  html.canli * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; }
  .canli-imlec, .canli-iz, .isik-akis, .isik-toz { display: none !important; }
}

/* ------------------------------------------------------------------ 16. Kaydırma çubukları (2026-10-19, sahip: "scrollar çok eski görünüyor")
   İnce, yuvarlak tutamak; ray şeffaf; üzerine gelince koyulaşır (açık temada koyulaşır, koyu temada parlar = metin rengine yaklaşır).
   Renk tema token'ından: --c-v2 (vurgu) + --c-metin + --c-zemin → Ada/Orman/Aurora/Stüdyo/Şeker kendiliğinden uyar; tutamak zemine
   ≥ 3:1 (WCAG 1.4.11). Canlı katman kapalıyken (?tema=yok, ?kabuk=eski) v2 mürekkep/kâğıt tonlarıyla sade gri sürüm.
   Katman: v2.base → bileşenlerin kendi kararı (ör. .v2-seg scrollbar-width:none) ve sayfa stilleri her zaman önce gelir.
   Chromium/Safari: ::-webkit-scrollbar (Chromium 121+ scrollbar-color görürse webkit sözde öğelerini yok sayar → standart özellikler
   yalnız webkit desteklemeyen motorda, yani Firefox'ta). Dokunmatik (hover yok / kaba işaretçi): sistemin bindirme çubuğu aynen.
   Yüksek kontrast (forced-colors) ve "daha fazla kontrast" tercihinde sistem çubuğu. Çubukta hareket/geçiş yok (hareket azaltmaya uygun).
   Blockly çalışma alanının SVG çubukları ve three.js tuvali bu kuralların dışındadır (onlar ::-webkit-scrollbar kullanmaz). */
@layer v2.base {
  :root {
    --kc-tutamak: color-mix(in srgb, var(--v2-ink, #1F1D3D) 55%, var(--v2-paper, #FFFDF8));
    --kc-tutamak-ust: color-mix(in srgb, var(--v2-ink, #1F1D3D) 80%, var(--v2-paper, #FFFDF8));
    --kc-ray: transparent;
  }
  html.canli {
    --kc-tutamak: color-mix(in srgb, color-mix(in srgb, var(--c-v2) 65%, var(--c-metin)) 76%, var(--c-zemin));
    --kc-tutamak-ust: color-mix(in srgb, var(--c-v2) 50%, var(--c-metin));
  }
  @media (hover: hover) and (pointer: fine) and (forced-colors: none) and (prefers-contrast: no-preference) {
    @supports not selector(::-webkit-scrollbar) {
      html { scrollbar-color: var(--kc-tutamak) var(--kc-ray); }
      * { scrollbar-width: thin; }
    }
    ::-webkit-scrollbar { width: 10px; height: 10px; background: var(--kc-ray); }
    ::-webkit-scrollbar-track { background: var(--kc-ray); }
    ::-webkit-scrollbar-thumb {
      background: var(--kc-tutamak); background-clip: padding-box;
      border: 2px solid transparent; border-radius: 999px; min-height: 40px;
    }
    ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--kc-tutamak-ust); }
    ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    /* Kendi scrollbar-width:thin kararını veren kutular Chromium'da standart çubuğu çizer → aynı renkler */
    .v2-chips, .ab-panel--dunya { scrollbar-color: var(--kc-tutamak) var(--kc-ray); }
  }
}