fix(tema): geçiş maskesinde logo görünmüyordu — SVG katmanları CSS'e gömüldü; alttan uçuş + boşluk kapanışı koreografisi

Chrome, view-transition pseudo elemanında dosyadan url() ile yüklenen ikinci
maske katmanını (boyu 0'dan büyükken) tümden şeffaf çiziyor; iki SVG de
data URI olarak globals.css'e gömüldü. Koreografi (önceki oturum): işaret
ekranın altından ortaya süzülür, merkezden büyür, kareler arası boşluklar
dolu çizimle merkezden dışa kapanır; motion sürer. Geçici console tanıları
kaldırıldı, iptal edilen geçişin ready reddi yakalanıyor.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-10-08 23:33:56 +03:00
parent 5f7ea8bbcd
commit 9f401602a8
6 changed files with 193 additions and 67 deletions

View File

@@ -2,7 +2,6 @@ import { Suspense } from "react";
import Link from "next/link";
import { AnimasyonluMark } from "@/components/animasyonlu-mark";
import { SurumRozeti } from "@/components/surum-rozeti";
import { TEMA_ODAK_ID } from "@/lib/tema-gecisi";
import { KatalogArama } from "@/features/katalog/components/katalog-arama";
import { UserNav, UserNavFallback } from "@/features/kullanici/components/user-nav";
import { getRehberAramaKayitlari } from "@/lib/rehber";
@@ -24,13 +23,8 @@ export function SiteHeader() {
className="group flex min-w-0 shrink items-center font-bricolage"
>
{/* Inline animasyonlu mark: Link'teki `group` sayesinde hover'da
kareler danışman panelindeki nabız animasyonuyla canlanır.
id: tema geçişi maskesi bu noktadan yayılır (lib/tema-gecisi.ts). */}
<AnimasyonluMark
id={TEMA_ODAK_ID}
sadeceHover
className="size-8 sm:size-11"
/>
kareler danışman panelindeki nabız animasyonuyla canlanır. */}
<AnimasyonluMark sadeceHover className="size-8 sm:size-11" />
<span className="truncate transition-[opacity,translate] duration-300 ease-out in-data-[nav-baslik]:pointer-events-none in-data-[nav-baslik]:-translate-y-2 in-data-[nav-baslik]:opacity-0 motion-reduce:transition-opacity">
<span className="text-lg font-light tracking-tighter sm:text-3xl">
Kolay