/* ============================================================================= cinema-micro.css — mikro etkileşim katmanı stilleri (v3.0 §6) ============================================================================= Davranış: assets/js/cinema-micro.js. Tüm efektler cinema-core.js'in sınıflarıyla kapılanır (.cine-lite / .cine-full); .cine-off'ta hiçbir kural eşleşmez. Yalnız transform/opacity anime edilir; fiziksel değil MANTIKSAL özellikler (RTL: ar + he). Renkler cinema.css token'larından. Bölümler: A+B) Mıknatıs + 3D tilt + parlama (full) C) Kinetik tipografi (lite + full) D) Kenar ışını — border beam (lite + full, yalnız kilit öğeler) E) Sayfa geçiş perdesi + kaynak yükleyici (full) F) Footer paskalya yumurtası (lite + full) ========================================================================== */ /* ============================================================================= A + B) MIKNATIS + 3D TILT + PARLAMA (yalnız .cine-full) ----------------------------------------------------------------------------- JS yalnızca --mag-x/--mag-y (px) ve --tilt-rx/--tilt-ry (deg) + --tilt-mx/--tilt-my (%) değişkenlerini yazar; transform TEK kuralda birleşir → mıknatıs ve tilt aynı öğede (.option-card--primary) çakışmaz. .is-magging / .is-tilting yalnız etkileşim sürerken durur; kalkınca orijinal stiller (home-options.css / yeni.css) aynen geri gelir. ========================================================================== */ .cine-full .cine-tilt { position: relative; /* parlama katmanı (::after) için konak */ } .cine-full .cine-mag.is-magging, .cine-full .cine-tilt.is-tilting { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) perspective(900px) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg)); /* JS her kare yazar → transform'u geçişten çıkar (çifte yumuşatma olmasın); renk/gölge geçişleri orijinal süreleriyle sürsün. */ transition-property: border-color, box-shadow, background-color, background, color, opacity; will-change: transform; } /* Mevcut hover davranışları KORUNUR (additif söz): home-options.css'in translateY(-4px) kalkışı ve yeni.css'in buton kalkışı/baskısı, birleşik transform'un sonuna yeniden eklenir. */ .cine-full .option-card.is-tilting:hover, .cine-full .option-card.is-tilting:focus-visible, .cine-full .option-card.is-magging:hover, .cine-full .option-card.is-magging:focus-visible { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) perspective(900px) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg)) translateY(-4px); } .cine-full .btn.is-magging:hover { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) translateY(-2px); /* yeni.css .btn--primary:hover kalkışı */ } .cine-full .btn.is-magging:active { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) scale(0.97); /* yeni.css .btn:active baskısı */ } /* --- Parlama (sheen): imleci izleyen radyal ışık süpürmesi --- */ .cine-full .cine-tilt::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient( 260px circle at var(--tilt-mx, 50%) var(--tilt-my, 50%), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05) 40%, transparent 65% ); transition: opacity 260ms ease; } .cine-full .cine-tilt.is-tilting:hover::after { opacity: 1; } /* Açık temada beyaz parlama kaybolur → marka mavisi tonuna dön */ .cine-full[data-theme="light"] .cine-tilt::after { background: radial-gradient( 260px circle at var(--tilt-mx, 50%) var(--tilt-my, 50%), rgba(79, 141, 255, 0.16), rgba(79, 141, 255, 0.06) 40%, transparent 65% ); } /* ============================================================================= C) KİNETİK TİPOGRAFİ (lite + full) ----------------------------------------------------------------------------- JS başlığı kelime maskelerine böler. .kinetic-ready gizli durumu YALNIZCA gözlemden hemen önce eklenir → JS/IO yoksa metin hep görünür. .kinetic-in ile kelimeler 70ms arayla (--kw-d, inline) yükselerek girer; tek sefer, döngü yok. ========================================================================== */ .kinetic-ready .kword { display: inline-block; overflow: hidden; /* Maske çıkıntıları (ç, g, diakritik) kırpmasın diye nefes payı */ padding-block: 0.14em; margin-block: -0.14em; vertical-align: bottom; } .kinetic-ready .kword > span { display: inline-block; transform: translateY(108%); opacity: 0; } .kinetic-in .kword > span { transform: translateY(0); opacity: 1; transition: transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 420ms ease; transition-delay: var(--kw-d, 0ms); } /* Emniyet ağı: kullanıcı hareketi azaltmışsa kelimeler asla saklanmaz */ @media (prefers-reduced-motion: reduce) { .kinetic-ready .kword > span { transform: none; opacity: 1; transition: none; } } /* ============================================================================= D) KENAR IŞINI — border beam (lite + full, YALNIZ kilit öğeler) ----------------------------------------------------------------------------- Saf CSS: iki katmanlı maske (xor) pseudo-öğeyi 1.5px'lik halkaya indirir; konik gradyandaki ışık @property'li --beam-angle ile döner. @property desteklemeyen tarayıcıda animasyon çalışmaz → sabit, sakin bir parıltı kalır (zarif düşüş). Hedefler: .option-card--primary + .glass-panel--beam (istatistik bölümünün opt-in sınıfı). Her iki konak da position:relative. NOT: ::before kullanılır; ::after parlama (sheen) katmanına ayrılmıştır. ========================================================================== */ @property --beam-angle { syntax: ""; inherits: false; initial-value: 0deg; } .cine-lite .option-card--primary::before, .cine-full .option-card--primary::before, .cine-lite .glass-panel--beam::before, .cine-full .glass-panel--beam::before { content: ""; position: absolute; inset: -1px; /* mevcut 1px kenarlığın üstüne otur */ z-index: 1; border-radius: inherit; padding: 1.5px; /* iz kalınlığı */ pointer-events: none; background: conic-gradient( from var(--beam-angle), transparent 0deg, transparent 296deg, var(--cine-glow-soft, rgba(79, 141, 255, 0.18)) 322deg, var(--cine-glow, #4f8dff) 344deg, rgba(255, 255, 255, 0.85) 352deg, transparent 360deg ); /* xor maskesi: yalnız halka (kenar) boyanır, iç tamamen boş kalır */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.9; animation: cine-beam-spin 5.5s linear infinite; } .cine-lite[data-theme="light"] .option-card--primary::before, .cine-full[data-theme="light"] .option-card--primary::before, .cine-lite[data-theme="light"] .glass-panel--beam::before, .cine-full[data-theme="light"] .glass-panel--beam::before { opacity: 0.6; /* açık zeminde daha sessiz */ } @keyframes cine-beam-spin { to { --beam-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .option-card--primary::before, .glass-panel--beam::before { animation: none; } } /* (E) Sayfa geçiş perdesi + kaynak yükleyici KALDIRILDI — 2026-07-03 kullanıcı isteği: gezinme anında ve native. */ /* ============================================================================= F) FOOTER PASKALYA YUMURTASI (lite + full — JS lazy kurar) ----------------------------------------------------------------------------- Konak footer zaten position:relative + overflow:hidden (yeni-footer.css) — giriş kenardan doğal maskelenir. Sarmalayıcı yalnız KENDİ konumunu kurar, footer'a hiçbir stil dayatmaz. Çok sessiz: opacity ≤ .55, bant dostu renk. ========================================================================== */ .cine-hauler { position: absolute; inset-block-start: 8px; inset-inline-end: 12%; /* park yeri */ inline-size: 72px; color: #93a9cf; /* koyu banda uyumlu soluk mavi-gri siluet */ opacity: 0.5; pointer-events: none; will-change: transform; } .cine-hauler.is-driving { transition: transform 2.8s cubic-bezier(0.22, 0.65, 0.25, 1); } .cine-hauler svg { display: block; inline-size: 100%; block-size: auto; } /* RTL: seyir yönü inline-start'tan (sağdan) → siluet aynalanır */ [dir="rtl"] .cine-hauler svg { transform: scaleX(-1); } /* Dörtlü flaşör: park edince TAM İKİ yanıp sönme, sonra söner ve kalır */ .cine-hauler__blink { fill: var(--cine-ember, #ffb454); opacity: 0; } .cine-hauler.is-parked .cine-hauler__blink { animation: cine-hazard 0.55s linear 2; } @keyframes cine-hazard { 0%, 45% { opacity: 0.9; } 50%, 100% { opacity: 0; } }