/* ===================================================================== Animasyonlar Giriş efektleri yalnızca varken uygulanır; bu sınıfı main.js ekler. Böylece JavaScript çalışmazsa hiçbir öge opacity:0 durumunda takılı kalmaz. ===================================================================== */ /* ---------------------- Scroll ile belirme ------------------------ */ .js-var [data-anim] { opacity: 0; transition: opacity 760ms cubic-bezier(.22, .68, .32, 1), transform 760ms cubic-bezier(.22, .68, .32, 1); transition-delay: var(--gecikme, 0ms); } .js-var [data-anim="yukari"] { transform: translateY(28px); } .js-var [data-anim="soldan"] { transform: translateX(-36px); } .js-var [data-anim="sagdan"] { transform: translateX(36px); } .js-var [data-anim="olcek"] { transform: scale(.94); } .js-var [data-anim="belir"] { transform: none; } .js-var [data-anim].gorunur { opacity: 1; transform: none; } /* -------------------------- Hero metni ---------------------------- */ .js-var .hero__ad span > i { transform: translateY(105%); opacity: 0; transition: transform 900ms cubic-bezier(.18, .74, .28, 1), opacity 700ms ease; } .js-var .hero__ad.gorunur span > i { transform: translateY(0); opacity: 1; } .js-var .hero__ust .cizgi { transform: scaleX(0); transition: transform 800ms cubic-bezier(.22,.68,.32,1) 200ms; } .js-var .hero__ust.gorunur .cizgi { transform: scaleX(1); } /* Hero halkaları */ .desen-halka { transform-origin: center; animation: halkaNefes 14s ease-in-out infinite; opacity: .8; } .desen-halka--2 { animation-duration: 18s; animation-direction: reverse; } .desen-halka--3 { animation-duration: 22s; } @keyframes halkaNefes { 0%, 100% { transform: scale(1) rotate(0deg); opacity: .35; } 50% { transform: scale(1.06) rotate(8deg); opacity: .8; } } /* Kaydırma ipucu çizgisi */ @keyframes kaydirIpucu { 0% { top: -60%; } 100% { top: 100%; } } /* --------------------- Çalışma alanı ikonları --------------------- */ @keyframes cizgiCiz { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } } /* ---------------------- Kademeli (stagger) ------------------------ */ .js-var [data-kademeli] > * { opacity: 0; transform: translateY(22px); transition: opacity 620ms cubic-bezier(.22, .68, .32, 1), transform 620ms cubic-bezier(.22, .68, .32, 1); } .js-var [data-kademeli].gorunur > * { opacity: 1; transform: none; } /* Seminer sekmesi değişince yeniden giriş */ .seminer-liste.tazele > * { animation: kartGiris 520ms cubic-bezier(.22, .68, .32, 1) backwards; } @keyframes kartGiris { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* --------------------------- Lightbox ----------------------------- */ @keyframes lightboxGiris { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } /* --------------------------- Mobil menü --------------------------- */ /* Link girişleri gecikmeleri JS tarafından --sira ile verilir */ .mobil-menu.acik .mobil-menu__liste a { transition-delay: calc(var(--sira, 0) * 60ms + 120ms); } .mobil-menu__alt { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease 420ms, transform 500ms ease 420ms; } .mobil-menu.acik .mobil-menu__alt { opacity: 1; transform: none; } /* ------------------------ Yükleme durumu -------------------------- */ .dugme.yukleniyor { pointer-events: none; opacity: .75; } .dugme.yukleniyor::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: don 700ms linear infinite; } @keyframes don { to { transform: rotate(360deg); } } /* ================================================================== HAREKET AZALTMA Kullanıcı işletim sisteminde "hareketi azalt" seçtiyse tüm animasyonlar kapanır, içerik doğrudan görünür. ================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js-var [data-anim], .js-var [data-kademeli] > *, .js-var .hero__ad span > i { opacity: 1 !important; transform: none !important; } .js-var .hero__ust .cizgi { transform: scaleX(1) !important; } .hero__asagi-cizgi::after { display: none; } .desen-halka { animation: none; opacity: .4; } .alan-kart__ikon svg * { stroke-dashoffset: 0 !important; } } /* ===================================================================== AÇILIŞ ANİMASYONU — Adalet Terazisi (hacimli / 3B) --------------------------------------------------------------------- Zaman çizgisi (toplam ~2,5 sn): 0,00 – 0,55 sahne belirir, terazi hafifçe döner (CSS 3B perspektif) 0,30 – 0,85 alttaki cümle belirir (terazi ile birlikte) 0,50 – 1,70 kiriş eğilir: MELEK AĞIR BASAR (aşağı), şeytan yukarı kalkar 0,75 – 1,80 melek parlar, şeytan söner 2,00 – 2,50 perde açılır, hero haritası devralır Not: Perde kalktıktan sonra hero'da ~3,2 sn'lik dünya→büro zoom'u oynuyor (bu dosyanın sonundaki HERO HARİTASI bölümü). Toplam giriş süresi makul kalsın diye terazi 4,9 sn'den 2,5 sn'ye indirildi. Yön notu: "Adalet, terazinin ağır basan tarafındadır" cümlesi gereği ağırlık melek tarafındadır; bu yüzden SOL kefe iner, SAĞ kefe kalkar. Sahne baştan sona yavaşça döndüğü için terazi düz bir çizim değil, gerçekten hacimli bir cisim gibi okunur. Ayarlar: js/acilis-ayar.js ===================================================================== */ .acilis { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 40%, #1A2D45 0%, #0F1C2E 46%, #070E18 100%); animation: perdeKalk 550ms cubic-bezier(.6, 0, .2, 1) 1980ms forwards; } /* Animasyon oynatılmayacaksa hiç çizilmesin */ .acilis-atla .acilis { display: none; } /* Perde açıkken sayfa kaydırılamasın */ .acilis-oynuyor, .acilis-oynuyor body { overflow: hidden; } @keyframes perdeKalk { to { opacity: 0; visibility: hidden; pointer-events: none; } } .acilis__ic { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; padding: 2rem; } /* ---------------------- 3B sahne ---------------------------------- */ .terazi-sahne { perspective: 1500px; perspective-origin: 50% 44%; } .terazi-3d { transform-style: preserve-3d; animation: sahneDon 2530ms cubic-bezier(.28, .5, .25, 1) both; } /* Sahne yavaşça döner — hacim hissini veren asıl hareket bu */ @keyframes sahneDon { 0% { transform: rotateY(-24deg) rotateX(11deg) translateZ(-90px); } 22% { transform: rotateY(-13deg) rotateX(7deg) translateZ(-20px); } 62% { transform: rotateY(-1deg) rotateX(3.5deg) translateZ(0); } 100% { transform: rotateY(7deg) rotateX(2deg) translateZ(20px); } } .terazi { width: min(84vw, 620px); height: auto; overflow: visible; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: teraziBelir 520ms cubic-bezier(.22, .68, .32, 1) 60ms forwards; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .5)); } @keyframes teraziBelir { from { opacity: 0; transform: translateY(26px) scale(.93); } to { opacity: 1; transform: none; } } .terazi__golge { animation: golgeKay 1200ms cubic-bezier(.34, .12, .18, 1) 500ms both; } /* Ağırlık sola kayınca zemin gölgesi de hafifçe sola kayar */ @keyframes golgeKay { 0% { transform: translateX(0) scaleX(1); } 58% { transform: translateX(-16px) scaleX(1.06); } 100% { transform: translateX(-11px) scaleX(1.04); } } /* ------------------------- Kiriş ---------------------------------- */ .terazi__kiris { transform-box: view-box; transform-origin: 280px 110px; animation: kirisEgil 1200ms cubic-bezier(.34, .12, .18, 1) 500ms both; } @keyframes kirisEgil { 0% { transform: rotate(0deg); } 40% { transform: rotate(-9.4deg); } 62% { transform: rotate(-13.7deg); } /* hafif taşma */ 82% { transform: rotate(-11.3deg); } /* geri salınım */ 100% { transform: rotate(-12deg); } /* oturma */ } /* Kefeler yatay kalır; yalnızca kiriş ucunun gittiği kadar yer değiştirir. 200 birim kol × sin(12°) ≈ 41,6 dikey, × (1−cos12°) ≈ 4,4 yatay. */ .kefe--sol { animation: kefeIner 1200ms cubic-bezier(.34, .12, .18, 1) 500ms both; } .kefe--sag { animation: kefeKalkar 1200ms cubic-bezier(.34, .12, .18, 1) 500ms both; } /* Sol kefe (melek) ağır basar → iner */ @keyframes kefeIner { 0% { transform: translate(0, 0); } 40% { transform: translate(3.4px, 32.6px); } 62% { transform: translate(5.0px, 47.5px); } 82% { transform: translate(4.1px, 39.2px); } 100% { transform: translate(4.4px, 41.6px); } } /* Sağ kefe (şeytan) hafif kalır → kalkar */ @keyframes kefeKalkar { 0% { transform: translate(0, 0); } 40% { transform: translate(-3.4px, -32.6px); } 62% { transform: translate(-5.0px, -47.5px); } 82% { transform: translate(-4.1px, -39.2px); } 100% { transform: translate(-4.4px, -41.6px); } } /* ---------------------------- Melek ------------------------------- */ .figur--melek { opacity: .5; animation: melekParla 1050ms cubic-bezier(.3, .5, .2, 1) 750ms forwards; } .melek__kanat { opacity: .95; } @keyframes melekParla { from { opacity: .5; filter: none; } to { opacity: 1; filter: drop-shadow(0 0 9px rgba(240, 220, 175, .7)) drop-shadow(0 0 26px rgba(232, 201, 138, .32)); } } /* --------------------------- Şeytan ------------------------------- */ .figur--seytan { opacity: 1; animation: seytanSon 1050ms cubic-bezier(.3, .5, .2, 1) 750ms forwards; } @keyframes seytanSon { from { opacity: 1; filter: saturate(1) brightness(1); } to { opacity: .62; filter: saturate(.55) brightness(.8); } } /* ---------------------------- Yazı -------------------------------- */ .acilis__yazi { margin: 0; font-family: var(--yazi-baslik); font-size: clamp(1.05rem, 2.6vw, 1.5rem); letter-spacing: .015em; color: rgba(248, 246, 243, .84); text-align: center; max-width: 26ch; opacity: 0; animation: yaziBelir 550ms cubic-bezier(.22, .68, .32, 1) 300ms forwards; } @keyframes yaziBelir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* --------------------------- Atla düğmesi ------------------------- */ .acilis__atla { position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 4vw, 2.5rem); padding: .6rem 1.25rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(248, 246, 243, .6); border: 1px solid rgba(248, 246, 243, .2); border-radius: 999px; opacity: 0; animation: yaziBelir 400ms ease 450ms forwards; transition: color var(--gecis-hizli), border-color var(--gecis-hizli); } .acilis__atla:hover { color: var(--altin-acik); border-color: var(--altin); } /* ------------------- Hareket azaltma / güvenlik ------------------- */ @media (prefers-reduced-motion: reduce) { /* acilis-ayar.js zaten perdeyi hiç göstermez; yine de garanti olsun */ .acilis { display: none; } } /* ===================================================================== HERO HARİTASI — "dünyadan büroya" zoom --------------------------------------------------------------------- Zaman çizgisi (perde kalktıktan sonra, toplam ~3,7 sn): 0,00 – 0,70 yalnızca küre görünür, hafifçe büyür 0,68 – 1,25 çapraz geçiş: küre söner, düz harita açılır 1,12 – 1,49 Türkiye görünümü bir an durur 1,63 – 2,58 Türkiye → Muğla 2,58 – 3,40 Muğla → büro (300×) 2,98 – 3,68 büro işareti ve dalgalar belirir Son kare hero'nun kalıcı arka planı olarak durur. Kamera değerleri sınır verisinden hesaplandı (equirectangular, dünya 2000×1000; görüntü penceresi 1600×900): Türkiye translate(-13332.8px, -2969.6px) scale(12) Muğla translate(-54574.4px, -13701.2px) scale(48) Büro scale(300) — yaklaşık 81 km genişliğinde bir alan Hedef nokta sağa alındı (1150,430) — hero yazıları solda durduğu için büro işareti onların arkasında kalmasın. ===================================================================== */ .hero__harita { /* Kameranın ve büro işaretinin buluştuğu hedef nokta (viewBox 1600x900). Tek kaynak: kamera kareleri bunu calc() ile kullanır, böylece mobilde tek satır değiştirmek yetiyor. */ --hx: 1150px; --hy: 430px; position: absolute; inset: 0; z-index: -3; /* hero__gorsel (-2) ve desen (-1) altında */ overflow: hidden; opacity: 0; transition: opacity 900ms ease; } .hero__harita.hazir { opacity: 1; } .hero__harita .harita { width: 100%; height: 100%; display: block; } /* Haritanın üstüne, yazıların okunması için koyu perde */ .hero__harita::after { content: ""; position: absolute; inset: 0; /* Yazıların solundan sağa açılan perde: metin tarafı koyu, harita tarafı görünür kalır. */ background: linear-gradient(100deg, rgba(10,20,33,.88) 0%, rgba(12,23,38,.7) 38%, rgba(12,23,38,.34) 68%, rgba(10,20,33,.5) 100%), linear-gradient(180deg, rgba(10,20,33,.42) 0%, transparent 30%, rgba(10,20,33,.62) 100%); pointer-events: none; } /* Harita geldiyse fotoğraf yer tutucusu ikinci bir koyu perde eklemesin */ .hero.harita-var .hero__gorsel { display: none; } /* --------------------------- Küre --------------------------------- */ .harita__kure { transform-box: view-box; transform-origin: 800px 450px; transform: scale(.86); opacity: 1; } .oynat .harita__kure { animation: hKureCik 1250ms cubic-bezier(.42, 0, .58, 1) forwards; } @keyframes hKureCik { 0% { transform: scale(.86); opacity: 1; } 56% { transform: scale(1.20); opacity: 1; } /* 0,70 sn — buraya kadar sahne kürenin */ 100% { transform: scale(1.78); opacity: 0; } /* 1,25 sn — düz haritaya devreder */ } /* ------------------------ Düz harita / kamera --------------------- */ .harita__kamera { transform: translate(calc(var(--hx) - 14332.8px), calc(var(--hy) - 3399.6px)) scale(12); opacity: 0; } .oynat .harita__kamera { animation: hKamera 3400ms cubic-bezier(.44, .02, .2, 1) forwards; } @keyframes hKamera { /* Ölçek × dünya koordinatı sabitleri: Türkiye (1194.4, 283.3)×12 · Muğla (1157.8, 294.4)×48 · Büro (1161.75, 296.547)×300 Opaklık 22%'ye (0,68 sn) kadar 0 kalır: küre sönmeden düz harita açılmasın. */ 0% { transform: translate(calc(var(--hx) - 14332.8px), calc(var(--hy) - 3399.6px)) scale(12); opacity: 0; } 22% { transform: translate(calc(var(--hx) - 14332.8px), calc(var(--hy) - 3399.6px)) scale(12); opacity: 0; } 36% { transform: translate(calc(var(--hx) - 14332.8px), calc(var(--hy) - 3399.6px)) scale(12); opacity: 1; } 48% { transform: translate(calc(var(--hx) - 14332.8px), calc(var(--hy) - 3399.6px)) scale(12); opacity: 1; } /* Türkiye bir an durur */ 76% { transform: translate(calc(var(--hx) - 55574.4px), calc(var(--hy) - 14131.2px)) scale(48); opacity: 1; } /* Muğla */ 100% { transform: translate(calc(var(--hx) - 348525.0px), calc(var(--hy) - 88964.1px)) scale(300); opacity: 1; } /* büro */ } } /* Fethiye / büro */ } /* Uzak katmanlar yakınlaşınca kaybolur: kaba çizgileri gizler, yerini ince çizilmiş Muğla kıyısı alır. */ .oynat .h-duz-kara, .oynat .h-duz-tr { animation: hUzakSon 3400ms linear forwards; } @keyframes hUzakSon { 0%, 66% { opacity: 1; } 86% { opacity: .25; } 100% { opacity: 0; } } .h-iller, .h-mugla { opacity: 0; } .oynat .h-iller { animation: hBelir 900ms ease 1850ms forwards; } .oynat .h-mugla { animation: hBelir 900ms ease 2150ms forwards; } @keyframes hBelir { to { opacity: 1; } } /* --------------------------- Büro işareti ------------------------- */ .harita__pin { opacity: 0; } .oynat .harita__pin { animation: hPinBelir 700ms cubic-bezier(.22,.68,.32,1) 2980ms forwards; } @keyframes hPinBelir { from { opacity: 0; transform: translate(var(--hx), var(--hy)) scale(.4); } to { opacity: 1; transform: translate(var(--hx), var(--hy)) scale(1); } } /* Dar ekranda 16:9 harita yandan kırpılır; hedefi ortaya ve aşağıya al yoksa büro işareti ekranın dışında kalıyor. */ @media (max-width: 900px) { /* Ortadan biraz sola: tam ortada "aşağı kaydır" çizgisi geçiyor, etiket plakasının üstüne biniyordu. */ .hero__harita { --hx: 690px; --hy: 700px; } } .h-yazi { fill: #E0C289; } .h-yazi--ad { font-family: var(--yazi-baslik); font-size: 28px; font-weight: 600; letter-spacing: .02em; fill: #F2DCAC; } .h-yazi--alt { font-family: var(--yazi-govde); font-size: 13px; font-weight: 600; letter-spacing: .2em; fill: #D8B98A; } /* İşaret ve yazı harita üzerinde kaybolmasın */ .harita__pin { filter: drop-shadow(0 2px 6px rgba(7, 14, 24, .9)); } .h-dalga { opacity: 0; transform-box: fill-box; transform-origin: center; } .oynat .h-dalga--1 { animation: hDalga 2600ms ease-out 3400ms infinite; } .oynat .h-dalga--2 { animation: hDalga 2600ms ease-out 4700ms infinite; } @keyframes hDalga { 0% { opacity: .65; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.9); } } /* Hareket azaltma: harita hiç yüklenmez (harita.js kontrol eder), yine de garanti olsun */ @media (prefers-reduced-motion: reduce) { .hero__harita { display: none; } }