/* Piksir v3 — site teması "Ada" (sahip seçimi 2026-10-19, D81). canli.css'in ÜSTÜNE biner; her v2 sayfası bağlar.
   Yalnız html[data-tema="ada"] altında etkilidir: ?tema=orman (önceki site teması, yedek/orman-2026-10-19), ?tema=yok (v2) ve
   ?kabuk=eski kill-switch'i aynen çalışır. Bileşen kuralları (cam kart, degrade düğme, ışık halkası) canli.css'ten gelir — Ada
   canli.css'in açık temel paletidir; burada token'lar, iç sayfa zemini ve süzülen renk bulutları var.
   Paket bütçesi (U133): yalnız küçük sahne (ada-960.webp, ~36 KB). Tam sahne ana sayfada canli-temalar.css'ten gelir.
   Fare izi (yaylı ışık topu) canliTema.js'te; kahramanda imleci Rehber Piksir izler (rehberSpark.js). Hareket kuralları canli.css §12 ile aynı. */

/* =================================================================== 0. Token'lar */
html[data-tema="ada"] {
  --c-metin: #1B1846; --c-metin-2: #4A4778; --c-zemin: #F4F1FF;
  --c-v1: #9B7BFF; --c-v1b: #4F6BFF;            /* birincil: lavanta → mavi (2026-10-27 sahip: sarı düğme yok, mor) */
  --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: 123, 92, 255; --c-baslik-1: #2A1F8F; --c-baslik-2: #6A45F5; --c-baslik-3: #1A7FD6;
  --c-sahne: url("../../../assets/v3/sahne/ada-960.webp"); --c-sahne-k: url("../../../assets/v3/sahne/ada-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;
  background-color: #F4F1FF;
}

/* =================================================================== 1. Zemin: üstte yüzen adalar, altta süzülen renk bulutları
   Gövde zemini aşağıda saydamlaşır; arkadaki sabit katman (html::before) yalnız transform ile kayar (ucuz, kompozitörde). */
/* Üst sahne (D86): gövde zemini yerine ayrı katman (html::after) — maskeyle aşağı doğru eriyerek biter; görsel artık bir çizgide
   "boşluğa" kesilmez. Sayfayla kayar (absolute), içeriğin arkasında (z -1). Kahraman alanı olan sayfada sahneyi .hero çizer. */
html[data-tema="ada"].canli body.v2-page { background: transparent; }
html[data-tema="ada"].canli::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 640px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,241,255,.42) 0%, rgba(244,241,255,.72) 55%, rgba(244,241,255,.9) 100%),
              var(--c-sahne-k) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
}
@media (min-width: 961px) { html[data-tema="ada"].canli::after { height: 780px; background-image: linear-gradient(180deg, rgba(244,241,255,.36) 0%, rgba(244,241,255,.7) 55%, rgba(244,241,255,.9) 100%), var(--c-sahne); } }
html[data-tema="ada"].canli:has(.hero)::after { display: none; }
/* Kahraman görselinin alt kenarı sayfa rengine erir (sert çizgi yok) */
html[data-tema="ada"].canli .hero::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
}
html[data-tema="ada"].canli::before {
  content: ""; position: fixed; inset: -18vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 28vmax at 18% 32%, rgba(123,92,255,.20), transparent 70%),
    radial-gradient(34vmax 28vmax at 84% 22%, rgba(34,211,238,.20), transparent 70%),
    radial-gradient(40vmax 30vmax at 72% 84%, rgba(255,111,181,.16), transparent 70%),
    radial-gradient(30vmax 24vmax at 26% 86%, rgba(255,198,41,.16), transparent 70%);
  animation: adaBulut 32s ease-in-out infinite alternate;
}
@keyframes adaBulut {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3vmax, -2vmax, 0) rotate(5deg) scale(1.05); }
  100% { transform: translate3d(-2vmax, 2vmax, 0) rotate(-4deg) scale(1.08); }
}
/* Kareli defter bölümleri saydam: gökyüzü ve renk bulutları arkadan görünür, kare çizgileri lavanta tonunda kalır */
html[data-tema="ada"].canli .v2-paper-grid {
  background-color: transparent;
  background-image: linear-gradient(rgba(123,92,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(123,92,255,.07) 1px, transparent 1px);
}

/* Sayfa kahramanlarının (tn-hero, kx-hero, mf-hero, gz-hero…) kalın mürekkep alt çizgisi Ada'da kaba duruyordu (D86):
   çizgi yerine bölüm altına yumuşak bir lavanta geçişi. */
html[data-tema="ada"].canli main > section[class*="hero"], html[data-tema="ada"].canli main > header[class*="hero"] {
  border-bottom: 0; box-shadow: 0 1px 0 rgba(123,92,255,.10), 0 24px 40px -36px rgba(123,92,255,.35);
}

/* =================================================================== 2. Renkli dokunuşlar */
html[data-tema="ada"].canli .v2-tag--yellow {
  background: linear-gradient(90deg, #B9A3FF, #7B5CFF); border: 1px solid rgba(255,255,255,.9); color: #FFFFFF;
  box-shadow: 0 6px 18px -8px rgba(91,72,255,.8);
}
html[data-tema="ada"].canli .v2-topbar { background: rgba(244,241,255,.58); }

/* =================================================================== 3. Fare izi: yaylı ışık topu (canliTema.js)
   Işık topu: 260 px yumuşak renkli hale, imleci yumuşak bir yayla izler; renk tonu yavaşça döner (--ton). */
.canli-isik-topu {
  position: fixed; left: 0; top: 0; z-index: 61; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(124,243,255,.11) 0%, rgba(123,92,255,.06) 40%, rgba(255,111,181,.03) 60%, rgba(255,111,181,0) 72%);
  filter: hue-rotate(var(--ton, 0deg)) blur(14px); transition: opacity .8s; will-change: transform;
}
.canli-isik-topu.gorunur { opacity: .85; }
html[data-tema="ada"] .canli-imlec { display: none; }
html[data-tema="ada"] .canli-iz { display: none; }
@media (prefers-reduced-motion: reduce) { .canli-isik-topu { display: none !important; } }
html.efekt-az .canli-isik-topu, html.a11y-calm .canli-isik-topu { display: none !important; }

/* =================================================================== 4. Az efekt ve yazdırma */
@media (prefers-reduced-motion: reduce) { html[data-tema="ada"].canli::before { animation: none; } }
html.efekt-az[data-tema="ada"].canli::before, html.a11y-calm[data-tema="ada"].canli::before { animation: none; }
@media print {
  html[data-tema="ada"].canli::before, html[data-tema="ada"].canli::after, .canli-isik-topu { display: none !important; }
}

/* Sayfa başlıkları (sahip, 2026-10-20: "Oyunlar başlığının puntosunu tüm sayfalarda küçült"): iç sayfaların h1'i tek ölçüde.
   Ana sayfa kahramanı (.hero h1), oyun sayfaları (.v2-game-page) ve yazdırma raporu (.pa-rapor) hariç. */
html.canli body.v2-page:not(.v2-game-page) main h1:not(.hero h1):not(.pa-rapor h1) { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem); line-height: 1.08; }

/* =================================================================== 9. Stüdyo fonu (2026-10-28 sahip: "kart görsellerine uygun, bulutların yerine")
   Yüzen ada bulut görseli yerine kart görselleriyle aynı dil: lavanta stüdyo ışığı, parlak cam küreler, ince mor halka.
   Saf CSS (görsel dosyası yok); arkadaki renk lekeleri de yalnız lavanta-mor. Kahramanlı sayfada (.hero) üst katman zaten gizli. */
html[data-tema="ada"].canli::after, html[data-tema="ada"].canli::after {
  background:
    /* cam küreler: tam daire gövde + ayrı parlama katmanı (merkez kaydırılmaz, kutudan taşmaz) */
    radial-gradient(circle 24px at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0)) calc(91% - 18px) calc(96px + 21px) / 75px 75px no-repeat,
    radial-gradient(circle 75px at 50% 50%, rgba(214,204,255,.62) 0, rgba(170,145,255,.48) 55%, rgba(123,92,255,.34) 88%, rgba(123,92,255,0) 100%) 91% 96px / 150px 150px no-repeat,
    radial-gradient(circle 9px at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0)) calc(74% - 7px) calc(34px + 8px) / 28px 28px no-repeat,
    radial-gradient(circle 28px at 50% 50%, rgba(214,204,255,.62) 0, rgba(170,145,255,.48) 55%, rgba(123,92,255,.34) 88%, rgba(123,92,255,0) 100%) 74% 34px / 56px 56px no-repeat,
    radial-gradient(circle 13px at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0)) calc(4% - 10px) calc(300px + 12px) / 42px 42px no-repeat,
    radial-gradient(circle 42px at 50% 50%, rgba(214,204,255,.62) 0, rgba(170,145,255,.48) 55%, rgba(123,92,255,.34) 88%, rgba(123,92,255,0) 100%) 4% 300px / 84px 84px no-repeat,
    radial-gradient(circle 5px at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0)) calc(38% - 4px) calc(70px + 4px) / 15px 15px no-repeat,
    radial-gradient(circle 15px at 50% 50%, rgba(214,204,255,.62) 0, rgba(170,145,255,.48) 55%, rgba(123,92,255,.34) 88%, rgba(123,92,255,0) 100%) 38% 70px / 30px 30px no-repeat,
    /* ince mor halka */
    radial-gradient(circle, rgba(155,123,255,0) 57%, rgba(155,123,255,.32) 60%, rgba(255,255,255,.55) 61.5%, rgba(155,123,255,.22) 63%, rgba(155,123,255,0) 66%) 99% -40px / 360px 360px no-repeat,
    /* stüdyo ışığı */
    radial-gradient(55% 60% at 82% 12%, rgba(155,123,255,.30), rgba(155,123,255,0) 70%),
    radial-gradient(45% 55% at 8% 0%, rgba(196,181,253,.42), rgba(196,181,253,0) 70%),
    radial-gradient(70% 40% at 50% 100%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #E9E2FF 0%, #F1EDFF 55%, #F4F1FF 100%);
}
@media (max-width: 760px) {
  html[data-tema="ada"].canli::after {
    background:
      radial-gradient(circle 14px at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0)) calc(96% - 11px) calc(70px + 13px) / 45px 45px no-repeat,
      radial-gradient(circle 45px at 50% 50%, rgba(214,204,255,.62) 0, rgba(170,145,255,.48) 55%, rgba(123,92,255,.34) 88%, rgba(123,92,255,0) 100%) 96% 70px / 90px 90px no-repeat,
      radial-gradient(circle 7px at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0)) calc(6% - 5px) calc(220px + 6px) / 22px 22px no-repeat,
      radial-gradient(circle 22px at 50% 50%, rgba(214,204,255,.62) 0, rgba(170,145,255,.48) 55%, rgba(123,92,255,.34) 88%, rgba(123,92,255,0) 100%) 6% 220px / 44px 44px no-repeat,
      radial-gradient(60% 50% at 85% 10%, rgba(155,123,255,.28), rgba(155,123,255,0) 70%),
      linear-gradient(180deg, #E9E2FF 0%, #F4F1FF 100%);
  }
}
html[data-tema="ada"].canli::before {
  background:
    radial-gradient(38vmax 28vmax at 18% 32%, rgba(123,92,255,.16), transparent 70%),
    radial-gradient(34vmax 28vmax at 84% 22%, rgba(155,123,255,.16), transparent 70%),
    radial-gradient(40vmax 30vmax at 72% 84%, rgba(91,108,255,.12), transparent 70%),
    radial-gradient(30vmax 24vmax at 26% 86%, rgba(196,181,253,.20), transparent 70%);
}

/* 9b. Stüdyo fonu bütün sayfalarda (2026-10-28 sahip: "burada kullandığın arka plan görselini anasayfada ve diğer sayfalarda da kullan").
   Kahramanlı sayfalar (ana sayfa, /marka/): yüzen ada görseli (.hero::before) yerine üstteki stüdyo fonu (html::after) görünür.
   Oyun sayfaları (oyun-sade.css, agentblocks-tek.css): bulut kıvrımı deseni yerine aynı fon; desen kuralları !important olduğu için
   buradaki geçersiz kılma da !important ve #_ ile. Ana sayfa gövdesindeki kıvrım deseni (ada-ana.css) de kalkar: zemin her yerde aynı. */
html[data-tema="ada"].canli:has(.hero)::after { display: block; }
html[data-tema="ada"].canli .hero::before { background: none; }
html[data-tema="ada"].canli:not(#_) body.v2-page { background: transparent !important; }