/* Piksir v4 — site teması "Işıltı Ormanı" (sahip seçimi 2026-10-18, D68). canli.css'in ÜSTÜNE biner; her v2 sayfası bağlar.
   Yalnız html[data-tema="orman"] altında etkilidir: ?tema=aurora ya da ?tema=yok (v2) ve ?kabuk=eski kill-switch'i aynen çalışır.
   Kapsam ayrımı: burada YALNIZ ortak bileşenler (zemin, üst çubuk, düğme, kart, etiket, alt çubuk, logo, fare izi).
   Ana sayfanın kahramanı (video, sakinler, sis, mini oyun tahtası) canli-dunyalar.css'te kalır — o dosya yalnız ana sayfaya ve
   /marka/'ya bağlıdır ve buradaki token'ları tam çözünürlüklü sahneyle ezer. Oyun paketleri (U133) bu yüzden yalnız küçük
   sahneyi (orman-960.webp, ~64 KB) taşır. Metin kontrastı AA (MARKA_KIMLIGI §3); hareket kuralları canli.css §12 ile aynı. */

/* =================================================================== 0. Token'lar */
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-960.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;
  /* Bilgi kutusu / 5–6. sınıf bandı açık tonu: v2 koyu temanın çivit tonu (#232D55) orman zemininde yabancı kalıyordu → aynı
     mavi tonun yeşile yakın koyusu (bant rengi kimliği korunur, metin kontrastı artar). */
  --v2-blue-tint: #1C3046;
}
/* Bölüm paletleri (canli.css §13) koyu orman zemininde: başlık degradeleri açık tonlara çekilir (≥ 3:1). */
html[data-tema="orman"] [data-bolum="ogretmen"] { --c-baslik-2: #9EA2FF; --c-baslik-3: #5EE3F0; }
html[data-tema="orman"] [data-bolum="veli"] { --c-baslik-2: #FF9AAE; --c-baslik-3: #6FF0C2; }

/* =================================================================== 1. Zemin: üstte sönük orman sahnesi, aşağı doğru zemine erir */
html[data-tema="orman"].canli body.v2-page {
  background:
    linear-gradient(180deg, rgba(11,26,23,.74) 0, rgba(11,26,23,.9) 360px, #0B1A17 640px),
    radial-gradient(700px 420px at 92% 0%, rgba(255,182,39,.14), transparent 60%),
    var(--c-sahne-k) center top / 100% auto no-repeat,
    #0B1A17;
  color: var(--c-metin);
}

/* =================================================================== 2. Yazı, etiket */
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,.5); border-radius: 999px 999px 999px 4px; }
html[data-tema="orman"].canli .v2-brand span { background-image: linear-gradient(90deg, #FFF6CC, #FFD66B); }

/* =================================================================== 3. Düğmeler: fener ışığı, yaprak köşe */
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,.75), inset 0 -3px 0 rgba(140,80,0,.25); }
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); }
html[data-tema="orman"].canli .v2-btn--square { border-radius: 14px; }

/* =================================================================== 4. Kartlar: fener ışıklı yosun paneller */
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 8px; border: 1px solid rgba(110,231,160,.24);
  background: linear-gradient(170deg, rgba(34,70,52,.55), rgba(11,26,23,.72));
  box-shadow: inset 0 1px 0 rgba(255,246,204,.12), 0 24px 50px -24px rgba(0,8,4,.9);
}
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,0) 60%); }
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,.9); }
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% 12px; background: rgba(255,214,107,.1); border: 1px solid rgba(255,214,107,.45); }
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 .sec--tint { background: linear-gradient(180deg, transparent, rgba(110,231,160,.06), transparent); }

/* =================================================================== 5. Çubuklar */
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-topbar__nav a::after { background: linear-gradient(90deg, #FFD66B, #6EE7A0); }
html[data-tema="orman"].canli .v2-topbar__nav a:hover { background: rgba(110,231,160,.1); }
html[data-tema="orman"].canli .v2-bottomnav, html[data-tema="orman"].canli .v2-sitefoot { background: rgba(11,26,23,.85); border-top: 1px solid rgba(110,231,160,.18); }
html[data-tema="orman"].canli .v2-bottomnav a[aria-current="page"] { background: #FFD66B; color: #1F2E1C; }
html.efekt-az[data-tema="orman"].canli .v2-topbar, html.efekt-az[data-tema="orman"].canli .v2-bottomnav { background: rgba(11,26,23,.96); }

/* =================================================================== 6. Logo (canliTema.js → .marka-logo; canli-oneriler.css §1 ile aynı kurallar) */
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); }

/* =================================================================== 7. Fare izi: ateş böceği ışıltısı (canliTema.js tuvali); nokta izi kapalı */
.canli-tuval { position: fixed; inset: 0; z-index: 61; pointer-events: none; width: 100vw; height: 100vh; }
html[data-tema="orman"] .canli-iz { display: none; }
@media (prefers-reduced-motion: reduce) { .canli-tuval { display: none !important; } }
html.efekt-az .canli-tuval, html.a11y-calm .canli-tuval { display: none !important; }
@media print { .canli-tuval { display: none !important; } }