/* ============================================================ T-QwP — Hareket katmanı ------------------------------------------------------------ El çizimi sistemin hareket dili: yumuşak ve sinematik DEĞİL, hızlı ve tokat gibi. Geçişler 100 ms; ivme yok, "snap" var. Kağıt parçaları oynar, döner, yassılır — süzülmez. Renkler styles.css'teki değişkenlerden gelir; burada renk tanımlanmaz. ============================================================ */ :root { --hizli: 100ms; --orta: 220ms; } /* ============================================================ 1. ORTAM — kağıdın üstünde gezinen silik kurşun izleri ============================================================ */ body::before { content: ''; position: fixed; inset: -20%; z-index: -2; pointer-events: none; opacity: .5; background: radial-gradient(38% 32% at 18% 22%, rgba(255, 77, 77, .07), transparent 70%), radial-gradient(34% 40% at 82% 70%, rgba(45, 93, 161, .07), transparent 72%); animation: kagit-kay 40s ease-in-out infinite alternate; } @keyframes kagit-kay { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(2%, -1.5%, 0) rotate(1.5deg); } } /* ============================================================ 2. SCROLL İLE ORTAYA ÇIKMA Kağıt masaya bırakılıyormuş gibi: hafif eğik gelir, düzelir. .anim-ready sınıfını JS 'e ekler; JS yoksa hiçbir şey gizlenmez. ============================================================ */ .anim-ready .reveal { opacity: 0; transform: translate3d(0, 20px, 0) rotate(-3deg); transition: opacity var(--orta) ease-out, transform var(--orta) cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i, 0) * 70ms); } .anim-ready .reveal.in { opacity: 1; transform: none; } /* Kartların kendi duruş açısı korunsun — reveal bitince styles.css devralır */ .anim-ready .feature.reveal.in:nth-child(odd) { transform: rotate(-1deg); } .anim-ready .feature.reveal.in:nth-child(even) { transform: rotate(1deg); } .anim-ready .step.reveal.in:nth-child(odd) { transform: rotate(1deg); } .anim-ready .step.reveal.in:nth-child(even) { transform: rotate(-1.5deg); } .anim-ready .reveal-right { transform: translate3d(30px, 14px, 0) rotate(3deg); } .anim-ready .reveal-left { transform: translate3d(-30px, 14px, 0) rotate(-3deg); } @media (max-width: 900px) { .anim-ready .reveal-right, .anim-ready .reveal-left { transform: translate3d(0, 20px, 0) rotate(-2deg); } } /* ============================================================ 3. HERO GİRİŞİ ============================================================ */ .anim-ready .hero .eyebrow, .anim-ready .hero .display, .anim-ready .hero .lede, .anim-ready .hero .btn-row, .anim-ready .hero .hero-note { opacity: 0; animation: not-birak 380ms cubic-bezier(.34, 1.56, .64, 1) forwards; } .anim-ready .hero .eyebrow { animation-delay: 60ms; } .anim-ready .hero .display { animation-delay: 140ms; } .anim-ready .hero .lede { animation-delay: 240ms; } .anim-ready .hero .btn-row { animation-delay: 320ms; } .anim-ready .hero .hero-note { animation-delay: 400ms; } @keyframes not-birak { from { opacity: 0; transform: translate3d(0, 22px, 0) rotate(-2.5deg); } to { opacity: 1; transform: none; } } /* Eyebrow kendi eğikliğini korusun */ .anim-ready .hero .eyebrow { animation-name: not-birak-egik; } @keyframes not-birak-egik { from { opacity: 0; transform: translate3d(0, 22px, 0) rotate(-8deg); } to { opacity: 1; transform: rotate(-1.5deg); } } /* Hero başlığındaki ünlem — sallanan kalem */ .sallan { display: inline-block; animation: sallan 2.4s ease-in-out infinite; transform-origin: 50% 90%; color: var(--kirmizi); } @keyframes sallan { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } } /* ============================================================ 4. NAVİGASYON ============================================================ */ .nav { transition: box-shadow var(--orta) ease; } .nav.scrolled { box-shadow: 0 4px 0 0 var(--kurson); } /* Sayfa ilerleme çizgisi — elle çekilmiş kalın kalem izi */ .nav-progress { position: absolute; left: 0; bottom: -3px; height: 3px; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; background: var(--kirmizi); pointer-events: none; } .brand-mark { transition: transform var(--hizli) ease; } .brand:hover .brand-mark { transform: rotate(6deg) scale(1.08); } .lang button:active { transform: scale(.94); } /* ============================================================ 5. KARTLAR — imleç yaklaşınca "jiggle" styles.css hover'ı zaten çeviriyor; burada sadece hız ve dekoratif eklentiler var. ============================================================ */ .feature, .step, .panel, .dl-card { transition: transform var(--hizli) ease, box-shadow var(--hizli) ease; } /* Bant: karta yapıştırılmış şeffaf koli bandı */ .bant::before { content: ''; position: absolute; top: -12px; left: 50%; width: 84px; height: 24px; transform: translateX(-50%) rotate(-3deg); background: rgba(45, 45, 45, .1); border-left: 2px dashed rgba(45, 45, 45, .18); border-right: 2px dashed rgba(45, 45, 45, .18); pointer-events: none; } /* Raptiye: kırmızı toplu iğne */ .raptiye::before { content: ''; position: absolute; top: -11px; left: 50%; width: 20px; height: 20px; transform: translateX(-50%); background: var(--kirmizi); border: 3px solid var(--kurson); border-radius: 50%; box-shadow: 2px 2px 0 0 var(--kurson); pointer-events: none; } /* İkonlar üzerine gelince dönsün */ .feature:hover .feature-icon { transform: rotate(-10deg) scale(1.08); } .feature-icon { transition: transform var(--hizli) ease; } /* Adım numarası zıplasın */ .step:hover .step-num { transform: rotate(-8deg) scale(1.1); } .step-num { transition: transform var(--hizli) ease; } /* ============================================================ 6. SSS / TABLO ============================================================ */ .faq details { transition: transform var(--hizli) ease, box-shadow var(--hizli) ease; } .faq details[open] { box-shadow: var(--golge-lg); } .faq details[open] p { animation: not-birak 220ms ease-out; } .faq summary::after { transition: transform var(--hizli) ease; } .faq details[open] summary::after { transform: rotate(180deg); } tbody tr { transition: background-color var(--hizli) ease; } /* ============================================================ 7. ÇAĞRI BANDI — hafifçe nefes alan kağıt ============================================================ */ .cta { position: relative; overflow: hidden; } .cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(45, 45, 45, .09) 1.5px, transparent 1.5px); background-size: 20px 20px; animation: cta-nefes 8s ease-in-out infinite alternate; } @keyframes cta-nefes { from { opacity: .5; transform: translate(0, 0); } to { opacity: 1; transform: translate(6px, 4px); } } .cta .wrap { position: relative; z-index: 1; } /* ============================================================ 8. YUKARI DÖN — köşeye iliştirilmiş küçük not ============================================================ */ .to-top { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 54px; height: 54px; display: grid; place-items: center; font-family: var(--f-baslik); font-size: 22px; color: var(--kurson); background: var(--postit); border: 3px solid var(--kurson); border-radius: var(--wobbly-sm); box-shadow: var(--golge); cursor: pointer; opacity: 0; transform: translateY(14px) rotate(-6deg); pointer-events: none; transition: opacity var(--orta) ease, transform var(--orta) cubic-bezier(.34, 1.56, .64, 1); } .to-top.show { opacity: 1; transform: rotate(-6deg); pointer-events: auto; } .to-top:hover { transform: rotate(4deg) scale(1.06); background: var(--kirmizi); color: var(--beyaz); } .to-top:active { box-shadow: none; transform: translate(4px, 4px) rotate(-6deg); } /* ============================================================ 9. EL ÇİZİMİ SÜSLER ============================================================ */ /* Zıplayan küçük daire — hero görselinin yanında */ .zipla { animation: zipla 3s ease-in-out infinite; } @keyframes zipla { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(4deg); } } /* Kesikli ok / kıvrım yolları kendiliğinden çizilsin */ .ciz path { stroke-dasharray: 300; stroke-dashoffset: 300; animation: ciz 1.4s ease-out forwards; } @keyframes ciz { to { stroke-dashoffset: 0; } } /* Dar ekranda dekoratif fazlalıklar gizlenir — çizgiler taşmasın */ @media (max-width: 900px) { .sadece-genis { display: none !important; } } /* ============================================================ 10. HAREKET AZALTMA TERCİHİ ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .anim-ready .reveal, .anim-ready .hero .eyebrow, .anim-ready .hero .display, .anim-ready .hero .lede, .anim-ready .hero .btn-row, .anim-ready .hero .hero-note { opacity: 1 !important; transform: none !important; } body::before { animation: none; } }