/* ════════════════════════════════════════════════════════════ landing.css — KontakCRM tanıtım sayfaları için modern görsel katman Bu dosya design.css'in ÜZERİNE yüklenir; panel/app etkilenmez. Kurulum gerektirmez. Modern native CSS + GSAP/Lenis (CDN) ile uyumlu. ════════════════════════════════════════════════════════════ */ /* ── Yumuşak kaydırma altyapısı (Lenis ile uyumlu) ── */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ── Tipografi cilası: başlıklarda daha sıkı tracking + optik denge ── */ .lp-h1 { letter-spacing: -0.035em; text-wrap: balance; } .lp-section-title { letter-spacing: -0.028em; text-wrap: balance; } .lp-sub, .lp-section-lead { text-wrap: pretty; } /* ── GSAP reveal: JS yüklenmeden önce içeriği gizleme (FOUC önleme) ── .js-anim sınıfı 'e JS ile eklenir; yoksa her şey görünür kalır. */ html.js-anim [data-reveal] { opacity: 0; transform: translateY(28px); will-change: transform, opacity; } html.js-anim [data-reveal-fade] { opacity: 0; } @media (prefers-reduced-motion: reduce) { html.js-anim [data-reveal], html.js-anim [data-reveal-fade] { opacity: 1 !important; transform: none !important; } } /* ── Kartlarda gelişmiş derinlik + yumuşak hover ── */ .lp-feature-visual .lp-visual-card, .lp-compare-col, .lp-hl, .lp-faq-item, .lp-installment { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .35s ease; } /* Özellik kartları: hover'da yumuşak yükselme + ışıltı */ .lp-hl { position: relative; overflow: hidden; isolation: isolate; } .lp-hl::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 0%, rgba(91,94,240,0.07), transparent 60%); opacity: 0; transition: opacity .45s ease; } .lp-hl:hover::before { opacity: 1; } .lp-hl:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(22,22,29,0.10); } /* Karşılaştırma vurgu kartı: ince animasyonlu kenar parıltısı */ .lp-compare-hero { position: relative; } .lp-compare-hero::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, #5b5ef0, #7c4dff, #5b5ef0); background-size: 200% 200%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; animation: lpBorderFlow 6s linear infinite; pointer-events: none; } @keyframes lpBorderFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @media (prefers-reduced-motion: reduce) { .lp-compare-hero::after { animation: none; } } /* ── Cam efektli (glassmorphism) gezinme çubuğu ── */ .pub-nav { -webkit-backdrop-filter: saturate(180%) blur(0px); backdrop-filter: saturate(180%) blur(0px); transition: backdrop-filter .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease; } .pub-nav.scrolled { background: rgba(255,255,255,0.72) !important; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid rgba(22,22,29,0.06); } /* ── Butonlarda modern mikro-etkileşim (magnetic destekli) ── */ .lp-btn-lg, .lp-btn-white { position: relative; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .25s ease; } .lp-btn-primary { position: relative; overflow: hidden; } /* parlama süpürmesi */ .lp-btn-primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-18deg); transition: left .7s cubic-bezier(.16,1,.3,1); pointer-events: none; } .lp-btn-primary:hover::after { left: 140%; } .lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(91,94,240,0.34); } /* ── Hero görsel kartına 3B eğim (pointer parallax JS ile) ── */ .lp-hero-visual { perspective: 1200px; transform-style: preserve-3d; } .lp-hero-visual .lp-visual-card { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s cubic-bezier(.16,1,.3,1); } /* ── Kişi durumu chip'lerinde nazik nabız (sadece "Başarılı") ── */ @keyframes lpPulseSoft { 0%, 100% { box-shadow: 0 0 0 0 rgba(24,145,74,0.0); } 50% { box-shadow: 0 0 0 4px rgba(24,145,74,0.10); } } /* ── Bölüm etiketlerine (eyebrow) ince animasyonlu çizgi ── */ .lp-section-tag { position: relative; display: inline-flex; align-items: center; gap: 10px; } .lp-section-tag::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #5b5ef0, #7c4dff); display: inline-block; } /* ── Akıllı liste / mockup kartlarında üst ışık çizgisi ── */ .lp-visual-card { position: relative; } /* ── Fiyat & güven rozetlerinde yumuşak giriş ── */ .lp-cta-trust span { transition: transform .3s ease; } .lp-cta-trust span:hover { transform: translateY(-2px); } /* ── SSS aç/kapa: içerik yumuşak açılış ── */ .lp-faq-item { transition: box-shadow .35s ease, border-color .35s ease, background .35s ease; } .lp-faq-a { overflow: hidden; } /* ── Kart logoları: nazik gri→renk geçişi (zaten vardı, yumuşatma) ── */ .lp-cards img { transition: opacity .35s ease, transform .35s ease, filter .35s ease; } /* ── Mobilde 3B eğim ve ağır efektleri kapat (performans) ── */ @media (max-width: 760px) { .lp-hero-visual .lp-visual-card { transform: none !important; } } /* ── Görüş alanına giren bölümlerde scroll-driven parıltı (destekleyen tarayıcılarda) ── */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .lp-compare, .lp-highlights, .lp-installment, .lp-faq { /* GSAP zaten yönetiyor; burada yalnızca destek katmanı bırakıldı */ } } }