/* ==========================================================================
OR-BEY | Hareket Katmanı (motion.css)
Tüm animasyonlar burada. style.css'e dokunmadan hareketi kapatabilirsiniz.
Kural: Hiçbir şey JS olmadan gizli kalmaz.
Gizleme kuralları yalnızca varken devreye girer.
========================================================================== */
:root {
--hiz-yavas: 1.2s;
--hiz-orta: 0.9s;
--hiz-hizli: 0.5s;
--egri: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out: keskin çıkış, yumuşak oturma */
--egri-yumusak: cubic-bezier(0.22, 0.61, 0.36, 1);
--egri-yay: cubic-bezier(0.34, 1.56, 0.64, 1); /* hafif yaylanma */
/* Sitenin kendi styles.css'i CSS değişkeni kullanmıyor; bu iki değer
demodan geliyor ve burada tanımlanıyor ki motion.css kendi başına
yeterli olsun, styles.css'e hiç dokunmayalım. */
--altin: #B39B74;
--arayuz: 'DM Sans', sans-serif;
}
/* ==========================================================================
1. AÇILIŞ PERDESİ (PRELOADER)
========================================================================== */
.preloader {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: #0d0d0d;
overflow: hidden;
}
.preloader__grid {
position: absolute;
inset: 0;
display: flex;
}
.preloader__grid span {
flex: 1;
height: 100%;
background: #0d0d0d;
transform: translateY(0);
transition: transform 1s var(--egri);
}
.preloader__ic {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
transition: opacity 0.5s ease, transform 0.7s var(--egri);
}
.preloader__logo {
display: flex;
gap: 8px;
height: 46px;
filter: brightness(0) saturate(100%) invert(69%) sepia(31%) saturate(545%) hue-rotate(352deg) brightness(91%) contrast(86%);
opacity: 0;
transform: translateY(16px);
animation: onYukleLogo 1.1s var(--egri) 0.15s forwards;
}
.preloader__logo img { height: 100%; width: auto; object-fit: contain; }
@keyframes onYukleLogo {
to { opacity: 1; transform: translateY(0); }
}
.preloader__cizgi {
position: relative;
width: 220px;
height: 2px;
background: rgba(255, 255, 255, 0.14);
overflow: hidden;
border-radius: 2px;
}
.preloader__cizgi i {
position: absolute;
inset: 0;
display: block;
background: var(--altin);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s linear;
}
.preloader__yuzde {
font-family: var(--arayuz);
font-size: 12px;
letter-spacing: 0.28em;
color: rgba(255, 255, 255, 0.55);
font-variant-numeric: tabular-nums;
}
/* Kapanış: içerik solar, dikey şeritler yukarı kalkar */
.preloader.kapaniyor .preloader__ic {
opacity: 0;
transform: translateY(-20px);
}
.preloader.kapaniyor .preloader__grid span {
transform: translateY(-101%);
}
.preloader.kapaniyor .preloader__grid span:nth-child(1) { transition-delay: 0.00s; }
.preloader.kapaniyor .preloader__grid span:nth-child(2) { transition-delay: 0.07s; }
.preloader.kapaniyor .preloader__grid span:nth-child(3) { transition-delay: 0.14s; }
.preloader.kapaniyor .preloader__grid span:nth-child(4) { transition-delay: 0.21s; }
.preloader.kapaniyor .preloader__grid span:nth-child(5) { transition-delay: 0.28s; }
.preloader.bitti { pointer-events: none; visibility: hidden; }
/* ==========================================================================
2. KAYDIRMA İLERLEME ÇUBUĞU
========================================================================== */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2px;
z-index: 1100;
background: transparent;
pointer-events: none;
}
.scroll-progress i {
display: block;
height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--altin), #e0cba8, var(--altin));
transform: scaleX(0);
transform-origin: left center;
}
/* ==========================================================================
3. YAPIŞKAN İMLEÇ
Bu bölüm css/motion-header.css'e taşındı: imleç artık tüm sitede.
========================================================================== */
/* ==========================================================================
4. ORTAK AÇILIŞ ANİMASYONU MOTORU ([data-reveal])
========================================================================== */
.js-on [data-reveal] {
opacity: 0;
will-change: transform, opacity;
transition-property: opacity, transform, filter, clip-path;
transition-duration: var(--hiz-orta);
transition-timing-function: var(--egri);
}
/* Varyantlar — başlangıç durumları */
.js-on [data-reveal="up"] { transform: translateY(46px); }
.js-on [data-reveal="down"] { transform: translateY(-32px); }
.js-on [data-reveal="left"] { transform: translateX(60px); }
.js-on [data-reveal="right"] { transform: translateX(-60px); }
.js-on [data-reveal="fade"] { transform: none; }
.js-on [data-reveal="scale"] { transform: scale(0.9); }
.js-on [data-reveal="pop"] { transform: translateY(28px) scale(0.96); }
.js-on [data-reveal="blur"] { transform: translateY(22px); filter: blur(12px); }
.js-on [data-reveal="clip-up"] { transform: translateY(60px) scale(1.05); }
.js-on [data-reveal="clip-yan"] { transform: translateX(-40px); }
.js-on [data-reveal="perde"] { transform: translateY(50px); }
/* ÖNEMLİ: Açılış öncesi durumda clip-path KULLANILMIYOR.
clip-path: inset(100%) veren bir kutu, IntersectionObserver tarafından
"hiç görünmedi" sayılıyor; eleman görünmediği için açılmıyor, açılmadığı
için de görünmüyor — kilitleniyor. Perde etkisi bu yüzden ayrı bir
::before paneliyle (aşağıda) yapılıyor. */
/* Görünür duruma geçiş.
filter burada sıfırlanmaz: journey logosu gibi kalıcı renk filtresi olan
öğelerin filtresi silinmesin. Yalnızca "blur" varyantı filtresini bırakır. */
.js-on [data-reveal].gorundu {
opacity: 1;
transform: none;
}
.js-on [data-reveal="blur"].gorundu { filter: none; }
/* Uzun/yumuşak varyantlar için süre farkı */
.js-on [data-reveal="clip-up"],
.js-on [data-reveal="perde"],
.js-on [data-reveal="clip-yan"] { transition-duration: var(--hiz-yavas); }
/* Paralaks uygulanan kutularda transform'u JS her karede yazar.
Geçiş listesinden transform'u çıkarmazsak paralaks 1 saniye geriden gelir. */
.js-on [data-reveal][data-parallax],
.js-on [data-reveal][data-parallax-yumusak] {
transition-property: opacity, filter, clip-path;
}
/* ==========================================================================
5. BAŞLIK KELİME MASKESİ (split text)
========================================================================== */
.satir { display: block; }
.kelime-kutu {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding-bottom: 0.14em;
margin-bottom: -0.14em;
}
.kelime {
display: inline-block;
will-change: transform;
}
.js-on .kelime {
transform: translateY(110%) rotate(3deg);
opacity: 0;
transition: transform 1s var(--egri), opacity 0.7s ease;
}
.js-on .gorundu .kelime,
.js-on .kelime.gorundu {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
/* ==========================================================================
6. GÖRSEL YÜKLEME (lazy load + blur-up)
========================================================================== */
.gorsel-kutu {
position: relative;
overflow: hidden;
background-color: #e9e7e3;
}
.gorsel-kutu::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg,
rgba(255, 255, 255, 0) 20%,
rgba(255, 255, 255, 0.28) 50%,
rgba(255, 255, 255, 0) 80%);
background-size: 220% 100%;
animation: parilti 1.5s linear infinite;
opacity: 1;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: 2;
}
.gorsel-kutu.yuklendi::after { opacity: 0; animation: none; }
@keyframes parilti {
0% { background-position: 140% 0; }
100% { background-position: -60% 0; }
}
img.lazy {
filter: blur(14px);
transform: scale(1.06);
transition: filter 0.85s var(--egri-yumusak), transform 1.1s var(--egri-yumusak), opacity 0.5s ease;
}
img.lazy.yuklendi {
filter: blur(0);
transform: scale(1);
}
/* Karanlık zeminlerdeki kutular için iskelet rengi */
.gorsel-kutu--koyu { background-color: #1a1c1e; }
.gorsel-kutu--koyu::after {
background: linear-gradient(100deg,
rgba(255, 255, 255, 0) 20%,
rgba(255, 255, 255, 0.10) 50%,
rgba(255, 255, 255, 0) 80%);
background-size: 220% 100%;
}
/* ==========================================================================
7. HERO
========================================================================== */
/* Perde kalkarken hero görseli ortadan iki yana açılır.
clip-path yalnızca burada güvenli: bu katman IntersectionObserver ile
izlenmiyor (izlenseydi "hiç görünmedi" sayılıp kilitlenirdi). */
.js-on .hero-media {
clip-path: inset(0 26% 0 26%);
transition: clip-path 1.7s var(--egri) 0.15s;
}
.hazir .hero-media { clip-path: inset(0 0 0 0); }
.hero-media__zoom {
transform: scale(1.22);
transition: transform 2.4s var(--egri);
}
.hazir .hero-media__zoom {
transform: scale(1);
animation: kenBurns 26s ease-in-out 2.6s infinite alternate;
}
/* Journey arka planı da yavaşça nefes alır */
.journey-media__zoom {
transform: scale(1.06);
animation: kenBurns 32s ease-in-out infinite alternate;
}
@keyframes kenBurns {
from { transform: scale(1); }
to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
}
/* Hero üstüne ince altın çizgi geçişi */
.hero-cizgi {
position: absolute;
left: 50%;
bottom: 0;
width: 1px;
height: 90px;
background: linear-gradient(180deg, rgba(179, 155, 116, 0), var(--altin));
z-index: 3;
transform-origin: bottom center;
transform: translateX(-50%) scaleY(0);
transition: transform 1.2s var(--egri) 1.1s;
}
.hazir .hero-cizgi { transform: translateX(-50%) scaleY(1); }
/* ==========================================================================
8. HEADER — yalnızca ana sayfadaki açılış koreografisi
--------------------------------------------------------------------------
Header'ın kalıcı davranışı (küçülme, gizlenme, alt çizgi, buton hover'ı)
css/motion-header.css içinde ve tüm sitede geçerli. Burada sadece açılış
perdesi kalkarken header'ın yukarıdan inmesi var — bu ana sayfaya özel.
Gizleme kuralı bilerek .js-on ile koşullandı: JS çalışmazsa header
yukarıda takılı kalmasın, olduğu yerde görünsün.
========================================================================== */
.js-on .header { transform: translateX(-50%) translateY(-100%); }
.hazir .header { transform: translateX(-50%) translateY(0); }
/* Aşağı inerken gizlenme kuralı, yukarıdaki .hazir kuralını yenmeli. */
.hazir .header.gizli { transform: translateX(-50%) translateY(-100%); }
/* ==========================================================================
9. HERO KARTLARI
========================================================================== */
.card {
transition: transform 0.55s var(--egri), box-shadow 0.55s var(--egri);
}
/* Işık lekesi. Giriş ile çıkış bilerek farklı hızda:
fareyi getirir getirmez anında aydınlanır (0.1s), fare çekilince
yumuşakça söner (0.4s). Tek bir 0.45s "ease" kullanıldığında eğrinin
başı yavaş olduğu için aydınlanma geç kalmış gibi hissediliyordu. */
.card::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
rgba(255, 255, 255, 0.45), transparent 62%);
opacity: 0;
transition: opacity 0.4s ease;
}
.card-dark::before {
background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
rgba(179, 155, 116, 0.42), transparent 62%);
}
.card:hover::before {
opacity: 1;
transition-duration: 0.1s;
transition-timing-function: linear;
}
.card-ok { transition: opacity 0.25s ease, transform 0.45s var(--egri); transform: translate(-6px, 6px); }
.card:hover .card-ok { opacity: 0.75; transform: translate(0, 0); }
.card:hover {
--kaldir: -10px;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}
/* Kart giriş animasyonu: sarmalayıcı yükselir, kart 3D eğim için serbest kalır */
.js-on .kart-sar {
opacity: 0;
transform: translateY(70px);
transition-property: opacity, transform, filter;
transition-duration: 0.85s, 0.95s, 0.4s;
transition-timing-function: var(--egri), var(--egri), ease;
}
/* Gecikmeler açılış sırasına göre: perde → hero görseli → başlık → kartlar */
.js-on .hero-cards.gorundu .kart-sar { opacity: 1; transform: none; }
.js-on .hero-cards.gorundu .kart-sar:nth-child(1) { transition-delay: 0.70s; }
.js-on .hero-cards.gorundu .kart-sar:nth-child(2) { transition-delay: 0.79s; }
.js-on .hero-cards.gorundu .kart-sar:nth-child(3) { transition-delay: 0.88s; }
.js-on .hero-cards.gorundu .kart-sar:nth-child(4) { transition-delay: 0.97s; }
/* Bir karta gelince diğerleri hafifçe geri çekilir (odak etkisi).
Bilerek çok yumuşak: kartlar "sönmüş" değil, yalnızca bir adım geride. */
.js-on .hero-cards:has(.card:hover) .kart-sar:not(:hover) {
filter: opacity(0.74);
}
/* ==========================================================================
10. ABOUT
========================================================================== */
.img-kutu img { transition: transform 1.4s var(--egri-yumusak), filter 0.85s var(--egri-yumusak); }
.about-images:hover .img-kutu.arka img { transform: scale(1.05); }
.about-images:hover .img-kutu.on img { transform: scale(1.05); }
/* Görsel üzerinden geçen altın perde */
.img-kutu::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
background: var(--altin);
transform-origin: right center;
transform: scaleX(0);
pointer-events: none;
}
.js-on .img-kutu.perde-oyna::before {
animation: perdeGec 1.15s var(--egri) forwards;
}
@keyframes perdeGec {
0% { transform: scaleX(0); transform-origin: left center; }
45% { transform: scaleX(1); transform-origin: left center; }
55% { transform: scaleX(1); transform-origin: right center; }
100% { transform: scaleX(0); transform-origin: right center; }
}
/* Altın buton — dolan zemin + kayan ok */
.btn-discover::before,
.btn-send::before {
content: "";
position: absolute;
inset: 0;
background: #8f7a58;
transform: translateY(101%);
transition: transform 0.55s var(--egri);
z-index: 1;
}
.btn-discover:hover::before,
.btn-send:hover::before { transform: translateY(0); }
.btn-discover svg,
.btn-send svg { transition: transform 0.5s var(--egri); }
.btn-discover:hover svg { transform: translateX(5px); }
.btn-send:hover svg { transform: translate(4px, -4px); }
/* Magnetik buton (JS translate uygular) */
.magnetik { transition: transform 0.4s var(--egri); }
/* ==========================================================================
11. SERVICES
========================================================================== */
.service-card {
transition: transform 0.6s var(--egri), box-shadow 0.6s var(--egri);
}
.service-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
rgba(179, 155, 116, 0.16), transparent 65%);
opacity: 0;
transition: opacity 0.45s ease;
}
.service-card::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: var(--altin);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.6s var(--egri);
z-index: 3;
}
.service-card:hover { --kaldir: -10px; box-shadow: 0 26px 50px rgba(0, 0, 0, 0.09); }
.service-card:hover::before {
opacity: 1;
transition-duration: 0.1s;
transition-timing-function: linear;
}
.service-card:hover::after { transform: scaleX(1); }
/* İkon ve başlık kartın önünde durur — 3D eğimde derinlik hissi verir */
.service-icon-kutu { transform: translateZ(34px); transition: transform 0.7s var(--egri); }
.service-title { transform: translateZ(20px); transition: transform 0.7s var(--egri), color 0.4s ease; }
.service-desc { transform: translateZ(10px); transition: transform 0.7s var(--egri); }
.service-icon { transition: transform 0.7s var(--egri); }
.service-card:hover .service-icon { transform: translateY(-8px) scale(1.07) rotate(-3deg); }
.service-card:hover .service-title { color: var(--altin); }
/* Sarmalayıcı açılış animasyonunu taşır */
.js-on .servis-sar {
transition-property: opacity, transform, filter;
transition-duration: 1s, 1s, 0.4s;
transition-timing-function: var(--egri), var(--egri), ease;
}
/* Bir karta gelince diğerleri hafifçe geri çekilir */
.js-on .services-grid:has(.service-card:hover) .servis-sar:not(:hover) {
filter: opacity(0.72);
}
/* ==========================================================================
12. JOURNEY
========================================================================== */
.journey-kutu {
transition: transform 0.7s var(--egri), box-shadow 0.7s var(--egri);
}
/* Yukarı kalkan perde — clip-path yerine bu kullanılır (IO kilitlenmesin). */
.js-on .journey-kutu::before {
content: "";
position: absolute;
inset: 0;
z-index: 4;
background: #14181c;
transform: translateY(0);
transition: transform 1.05s var(--egri);
pointer-events: none;
}
.js-on .journey-sar.gorundu .journey-kutu::before {
transform: translateY(-101%);
transition-delay: 0.15s;
}
.journey-kutu img { transition: transform 1.4s var(--egri-yumusak); }
.journey-kutu:hover { --kaldir: -10px; --sc: 1.02; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.62); }
.journey-kutu:hover img { transform: scale(1.09); }
.js-on .journey-sar {
transition-property: opacity, transform, filter;
transition-duration: var(--hiz-yavas), var(--hiz-yavas), 0.4s;
transition-timing-function: var(--egri), var(--egri), ease;
}
/* Journey görsellerinde odak etkisi BİLEREK yok.
Bunlar gerçek fabrika/kurucu fotoğrafları; kararmaları "devre dışı"
gibi okunuyor ve kurumsal izlenimi zedeliyor. Yalnızca üzerine gelinen
görsel öne çıkar, diğerleri olduğu gibi kalır. */
.journey-logo {
transition: transform 0.8s var(--egri), opacity 0.8s ease;
}
/* Journey metni paragraf sırası */
.js-on .journey-text p {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.9s var(--egri), transform 0.9s var(--egri);
}
.js-on .journey-text.gorundu p { opacity: 1; transform: none; }
.js-on .journey-text.gorundu p:nth-child(1) { transition-delay: 0.05s; }
.js-on .journey-text.gorundu p:nth-child(2) { transition-delay: 0.15s; }
.js-on .journey-text.gorundu p:nth-child(3) { transition-delay: 0.25s; }
.js-on .journey-text.gorundu p:nth-child(4) { transition-delay: 0.35s; }
/* ==========================================================================
13. STATS
========================================================================== */
.js-on .stat-divider {
transform: scaleY(0);
transition: transform 0.9s var(--egri);
}
.js-on .stats-container.gorundu .stat-divider { transform: scaleY(1); }
/* Ayraçlar kapsayıcının 1., 3., 5., 7. ve 9. çocuğudur. */
.js-on .stats-container.gorundu .stat-divider:nth-child(1) { transition-delay: 0.05s; }
.js-on .stats-container.gorundu .stat-divider:nth-child(3) { transition-delay: 0.15s; }
.js-on .stats-container.gorundu .stat-divider:nth-child(5) { transition-delay: 0.25s; }
.js-on .stats-container.gorundu .stat-divider:nth-child(7) { transition-delay: 0.35s; }
.js-on .stats-container.gorundu .stat-divider:nth-child(9) { transition-delay: 0.45s; }
/* Rakam makarası */
.sayac-pencere {
display: inline-flex;
overflow: hidden;
height: 1em;
vertical-align: bottom;
}
.sayac-serit {
display: inline-flex;
flex-direction: column;
line-height: 1;
will-change: transform;
}
.sayac-serit span {
height: 1em;
display: flex;
align-items: center;
justify-content: center;
}
.js-on .stat-label {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.8s var(--egri) 0.35s, transform 0.8s var(--egri) 0.35s;
}
.js-on .stats-container.gorundu .stat-label { opacity: 1; transform: none; }
/* ==========================================================================
14. CONTACT FORM
========================================================================== */
.input-group input,
.input-group textarea {
transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--egri);
}
.input-group input:focus,
.input-group textarea:focus {
border-color: var(--altin);
box-shadow: 0 8px 24px rgba(179, 155, 116, 0.18);
transform: translateY(-2px);
}
.input-group::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--altin);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.5s var(--egri);
border-radius: 2px;
pointer-events: none;
}
.input-group:focus-within::after { transform: scaleX(1); }
.js-on .contact-form .input-group,
.js-on .contact-form .btn-send {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.8s var(--egri), transform 0.8s var(--egri);
}
.js-on .contact-form.gorundu .input-group,
.js-on .contact-form.gorundu .btn-send { opacity: 1; transform: none; }
.js-on .contact-form.gorundu .form-row:nth-child(1) .input-group:nth-child(1) { transition-delay: 0.05s; }
.js-on .contact-form.gorundu .form-row:nth-child(1) .input-group:nth-child(2) { transition-delay: 0.12s; }
.js-on .contact-form.gorundu .form-row:nth-child(2) .input-group:nth-child(1) { transition-delay: 0.19s; }
.js-on .contact-form.gorundu .form-row:nth-child(2) .input-group:nth-child(2) { transition-delay: 0.26s; }
.js-on .contact-form.gorundu .textarea-group { transition-delay: 0.33s; }
.js-on .contact-form.gorundu .btn-send { transition-delay: 0.40s; }
/* ==========================================================================
15. FOOTER
========================================================================== */
.footer-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 1px;
background: var(--altin);
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.45s var(--egri);
}
.footer-links a { transition: color 0.3s ease; }
.footer-links a:hover { color: var(--altin); }
.footer-links a:hover::after { transform: scaleX(1); transform-origin: left center; }
.footer-socials a {
transition: transform 0.45s var(--egri-yay), color 0.3s ease;
}
.footer-socials a:hover { color: var(--altin); transform: translateY(-5px) scale(1.12); }
.js-on .footer-socials a {
opacity: 0;
transform: translateY(14px);
}
.js-on .footer-socials.gorundu a {
opacity: 1;
transform: none;
transition: opacity 0.6s var(--egri), transform 0.6s var(--egri), color 0.3s ease;
}
.js-on .footer-socials.gorundu a:nth-child(1) { transition-delay: 0.05s; }
.js-on .footer-socials.gorundu a:nth-child(2) { transition-delay: 0.13s; }
.js-on .footer-socials.gorundu a:nth-child(3) { transition-delay: 0.21s; }
.js-on .footer-socials.gorundu a:nth-child(4) { transition-delay: 0.29s; }
/* ==========================================================================
16. YÜZEN BUTONLAR
========================================================================== */
.whatsapp-float {
transition: transform 0.4s var(--egri), box-shadow 0.4s ease;
opacity: 0;
transform: translateY(24px) scale(0.7);
}
.hazir .whatsapp-float {
opacity: 1;
transform: translateY(0) scale(1);
transition: transform 0.7s var(--egri-yay) 1.6s, opacity 0.5s ease 1.6s, box-shadow 0.4s ease;
}
.hazir .whatsapp-float:hover {
transform: translateY(-4px) scale(1.06);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
transition-delay: 0s;
}
.whatsapp-float::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid #25D366;
animation: nabiz 2.6s ease-out infinite;
pointer-events: none;
}
@keyframes nabiz {
0% { transform: scale(1); opacity: 0.6; }
70% { transform: scale(1.55); opacity: 0; }
100% { transform: scale(1.55); opacity: 0; }
}
/* Aşağı kaydırma oku burada tanımlanmıyor: sitenin kendi kuralları
(css/styles.css) daha yeni ve daha belirgin — okun boyutu, konumu,
iki katmanlı gölgesi ve arkasındaki hale orada ayarlı. Buradan tekrar
yazılsaydı o ayarlar ezilir, ok ekranın altından taşardı. */
/* ==========================================================================
17. DİL DEĞİŞİM GEÇİŞİ
========================================================================== */
.dil-degisiyor .main-container {
opacity: 0.25;
filter: blur(3px);
}
.main-container {
transition: opacity 0.35s ease, filter 0.35s ease;
}
/* ==========================================================================
17b. AÇILDIKTAN SONRAKİ HOVER'LAR
[data-reveal].gorundu kuralı "transform: none" dediği için, açılma
animasyonu biten öğelerin hover'ları daha güçlü seçicilerle yazılmalı.
========================================================================== */
.js-on .footer-socials.gorundu a:hover { transform: translateY(-5px) scale(1.12); }
/* ==========================================================================
19. 3D EĞİM MOTORU
Kartın transform'u tek bir yerden kurulur; parçaları CSS değişkenleriyle
beslenir: --rx/--ry = fareye göre eğim (JS)
--kaldir = hover'da yükselme (CSS)
--sc = hover'da büyüme (CSS)
Böylece JS satır içi transform yazmaz, hiçbir kural diğerini ezmez.
========================================================================== */
.js-on [data-egim] {
transform-style: preserve-3d;
transform:
translateY(var(--kaldir, 0px))
rotateX(var(--rx, 0deg))
rotateY(var(--ry, 0deg))
scale(var(--sc, 1));
transition: transform 0.5s var(--egri), box-shadow 0.55s var(--egri);
}
/* Fare kartı terk edince eğim daha yumuşak sıfırlanır */
.js-on [data-egim].egim-cikis {
transition: transform 0.9s var(--egri), box-shadow 0.55s var(--egri);
}
/* Kart içeriği yüzeyin biraz önünde durur */
.card-title { transform: translateZ(26px); }
.card-desc { transform: translateZ(14px); }
.card-ok { transform: translate(-6px, 6px) translateZ(30px); }
.card:hover .card-ok { transform: translate(0, 0) translateZ(30px); }
/* Dokunmatik cihazlarda 3D eğim kapalı */
@media (hover: none), (max-width: 992px) {
.js-on [data-egim] { transform: translateY(var(--kaldir, 0px)) scale(var(--sc, 1)); }
.card-title, .card-desc, .card-ok,
.service-icon-kutu, .service-title, .service-desc { transform: none; }
.card:hover .card-ok { transform: translate(0, 0); }
}
/* ==========================================================================
20. İKİ KATMANLI ETİKET
Bu bölüm css/motion-header.css'e taşındı (tüm sitede geçerli).
========================================================================== */
/* ==========================================================================
21. HEADER GİRİŞİ (perde kalkınca sırayla iner)
========================================================================== */
.js-on .hd-giris {
opacity: 0;
transform: translateY(-16px);
transition: opacity 0.75s var(--egri), transform 0.75s var(--egri);
}
.hazir .hd-giris { opacity: 1; transform: none; }
.hazir .logo-container.hd-giris { transition-delay: 0.10s; }
.hazir .nav-links.hd-giris { transition-delay: 0.18s; }
.hazir .lang-switcher.hd-giris { transition-delay: 0.46s; }
.hazir .contact-btn-desktop.hd-giris { transition-delay: 0.54s; }
.js-on .nav-links.hd-giris a {
opacity: 0;
transform: translateY(-12px);
transition: opacity 0.6s var(--egri), transform 0.6s var(--egri), color 0.35s ease;
}
.hazir .nav-links.hd-giris a { opacity: 1; transform: none; }
.hazir .nav-links.hd-giris a:nth-child(1) { transition-delay: 0.24s; }
.hazir .nav-links.hd-giris a:nth-child(2) { transition-delay: 0.29s; }
.hazir .nav-links.hd-giris a:nth-child(3) { transition-delay: 0.34s; }
.hazir .nav-links.hd-giris a:nth-child(4) { transition-delay: 0.39s; }
.hazir .nav-links.hd-giris a:nth-child(5) { transition-delay: 0.44s; }
.hazir .nav-links.hd-giris a:nth-child(6) { transition-delay: 0.49s; }
/* ==========================================================================
22. GÖVDE METİNLERİ — kelime kelime maskeden açılma
========================================================================== */
.js-on [data-satir] .kelime-kutu { padding-bottom: 0.22em; margin-bottom: -0.22em; }
.js-on [data-satir] .kelime {
transform: translateY(105%);
transition: transform 0.85s var(--egri), opacity 0.55s ease;
}
/* Bu kural bilerek daha güçlü yazıldı: yukarıdaki gizleme kuralıyla genel
".gorundu .kelime" kuralı aynı ağırlıkta olduğu için, sonra gelen gizleme
kuralı kazanıyor ve metin hiç açılmıyordu. */
.js-on [data-satir].gorundu .kelime {
transform: none;
opacity: 1;
}
/* ==========================================================================
23. FİLM GRANI
Orta gri gürültü + "overlay" karışımı: beyaz alanlar neredeyse hiç
etkilenmez, fotoğraflı koyu alanlara doku katar.
========================================================================== */
.gran {
position: fixed;
inset: 0;
z-index: 9997;
pointer-events: none;
opacity: 0.28;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
background-size: 180px 180px;
}
/* ==========================================================================
25. İSTATİSTİK BANDINDA IŞIK GEÇİŞİ
========================================================================== */
.stats-section::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(105deg,
transparent 35%,
rgba(255, 255, 255, 0.22) 50%,
transparent 65%);
transform: translateX(-120%);
}
.stats-section { position: relative; }
.stats-section.parlak::after {
animation: bandIsigi 1.6s var(--egri) 0.25s both;
}
@keyframes bandIsigi {
from { transform: translateX(-120%); }
to { transform: translateX(120%); }
}
/* ==========================================================================
18. HAREKET AZALTMA TERCİHİ
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.js-on [data-reveal],
.js-on .kelime,
.js-on .card,
.js-on .stat-label,
.js-on .contact-form .input-group,
.js-on .contact-form .btn-send,
.js-on .journey-text p,
.js-on .footer-socials a,
.js-on .kart-sar,
.js-on .servis-sar,
.js-on .journey-sar,
.js-on .hd-giris,
.js-on .nav-links.hd-giris a {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
filter: none !important;
}
.js-on [data-egim] { transform: none !important; }
.js-on .journey-kutu::before { transform: translateY(-101%) !important; }
.card-title, .card-desc, .card-ok,
.service-icon-kutu, .service-title, .service-desc { transform: none !important; }
.kayan__b { display: none; }
.gran { display: none; }
.stats-section.parlak::after { animation: none; }
/* filter yalnızca bulanıklık varyantında sıfırlanır; kalıcı renk
filtreleri (journey logosu) korunur. */
.js-on [data-reveal="blur"] { filter: none !important; }
.js-on .stat-divider { transform: none !important; }
img.lazy { filter: none !important; transform: none !important; }
.gorsel-kutu::after { display: none; }
}
/* ==========================================================================
26. YERLEŞİM UYARLAMASI (yalnızca ana sayfa)
--------------------------------------------------------------------------
Demoda bu kurallar style.css içindeydi. Sitenin kendi styles.css'ine
dokunmamak için buraya alındı; motion.css styles.css'ten SONRA
yüklendiği için aynı ağırlıktaki kurallarda bunlar geçerli olur.
Hareket için gereken tek yapısal değişiklik: hero ve journey arka
planlarının CSS background'undan ayrı bir ![]()
katmanına taşınması.
Paralaks, ortadan açılma ve yavaş yakınlaşma ancak öyle mümkün.
========================================================================== */
/* --- Hero medya katmanı ------------------------------------------------ */
.hero-section { overflow: hidden; }
.hero-media {
position: absolute;
/* Üstten/alttan taşırılır: paralaksla kayarken kenarda boşluk açılmasın */
inset: -12% 0 -12% 0;
z-index: 0;
will-change: transform;
}
.hero-media__zoom { width: 100%; height: 100%; overflow: hidden; }
.hero-media__zoom img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Karartma, görselin CSS background'unda değil ayrı katmanda.
Bölümün kendi background'undaki degrade JS kapalıyken yedek olarak durur. */
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.48) 44.71%, rgba(0, 0, 0, 0.8) 100%);
pointer-events: none;
}
.hero-content { z-index: 2; }
/* --- Hero kartları ----------------------------------------------------- */
.kart-sar { width: 316px; height: 178px; perspective: 1100px; }
.card { position: relative; overflow: hidden; }
/* Işık lekesi (::before) kartın altında kalsın, yazılar üstte */
.card-title, .card-desc { position: relative; z-index: 2; }
.card-ok {
position: absolute;
right: 20px;
bottom: 18px;
z-index: 2;
width: 20px;
height: 20px;
opacity: 0;
color: #333333;
}
.card-dark .card-ok { color: #E6E6E6; }
/* --- Hakkımızda görselleri --------------------------------------------- */
.about-images .img-kutu { position: absolute; overflow: hidden; }
.img-kutu.arka { width: 568px; height: 423px; top: 0; left: 0; }
.img-kutu.on {
width: 400px;
height: 320px;
right: 0;
bottom: 0;
border: 6px solid #FFFFFF;
box-sizing: content-box;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
/* Görsel kutuyu her koşulda doldurur.
"height: 100%" tek başına yetmiyor: mobilde kutunun yüksekliği
aspect-ratio'dan (height: auto) geliyor ve iOS Safari bu durumda
çocuğun yüzdelik yüksekliğini çözmeyip görseli kendi doğal boyunda
bırakıyor. O zaman altta .gorsel-kutu'nun gri zemini bir şerit
olarak görünüyordu. Mutlak konumlandırma bu farktan etkilenmez. */
.img-kutu img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* --- Servis kartları ---------------------------------------------------- */
.servis-sar { display: flex; perspective: 1200px; }
/* Kart, sarmalayıcının tamamını doldurmalı. Sarmalayıcı flex olduğu için
genişlik vermezsek kart içeriği kadar daralıyor; mobilde açıklama metni
gizlendiğinden altı kartın altısı da farklı genişlikte çıkıyordu.
Sarmalayıcı öncesi düzende kart doğrudan grid hücresiydi, bu kural o
davranışı geri getirir. */
.servis-sar > .service-card { width: 100%; }
.service-card { position: relative; overflow: hidden; }
.service-desc, .service-title, .service-icon-kutu { position: relative; z-index: 2; }
.service-icon-kutu { display: flex; justify-content: center; }
/* --- Journey medya katmanı --------------------------------------------- */
/* Medya katmanı bölümden bilerek taşkın (paralaks kayarken kenarda boşluk
açılmasın diye). Bu yüzden bölümün kendisi taşanı kırpmalı; yoksa katman
yukarıda Servisler bölümünün, aşağıda İstatistikler'in üzerine biniyor.
.hero-section'da bu kural zaten vardı, journey'de eksikti. */
.journey-section { overflow: hidden; }
.journey-media {
position: absolute;
inset: -18% 0 -18% 0;
z-index: 0;
overflow: hidden;
will-change: transform;
}
.journey-media__zoom { width: 100%; height: 100%; overflow: hidden; }
.journey-media__zoom img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.journey-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(10, 15, 20, 0.15) 0%, rgba(10, 15, 20, 0.45) 100%);
pointer-events: none;
}
.journey-container { position: relative; z-index: 2; }
.journey-sar { width: calc(25% - 15px); perspective: 1000px; }
.journey-kutu {
position: relative;
width: 100%;
height: 220px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* styles.css'teki ".journey-images-row img" kuralını (genişlik %25) ezer:
görsel artık kutunun içinde, kutuyu tamamen doldurmalı. */
.journey-kutu img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0;
box-shadow: none;
}
/* --- Mobil / tablet ------------------------------------------------------ */
@media (max-width: 992px) {
.kart-sar { width: 100%; height: auto; perspective: none; }
/* Sitenin mobil kuralı görselleri 2'şerli diziyordu (calc(50% - 10px)).
Görsel artık sarmalayıcının içinde; ölçüyü sarmalayıcı taşımalı,
yoksa satır taşar. */
.journey-sar {
width: calc(50% - 10px);
perspective: none;
margin-bottom: 10px;
}
/* Satır ekranın iki kenarına sıfırlanıyordu; sayfanın geri kalanıyla
(başlık, metin, kartlar) aynı 20px payı alsın. Kutu genişliği yüzde
olduğu için padding'e göre kendiliğinden küçülür. */
.journey-images-row { padding: 0 20px; }
.about-images .img-kutu.arka {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 568 / 423;
}
/* Öndeki küçük görsel: sitenin sarmalayıcı öncesi mobil kuralında
bottom: -20px ile arka görselin biraz aşağısına taşıyordu. Ben 0
vermiştim, o yüzden alt kenarı arka görsele yapışıp yanlış duruyordu.
Özgün değere döndürüldü. */
.about-images .img-kutu.on {
position: absolute;
width: 60%;
height: auto;
aspect-ratio: 400 / 320;
bottom: -20px;
right: -10px;
}
/* Arka plan katmanları mobilde de kayar. Katman bölümden belirgin
biçimde daha uzun tutulur ki kayarken üstte/altta bölümün koyu
zemini açıkta kalmasın. (Önce "inset: 0" vermiştim; katman bölümle
aynı boyda olduğu için birkaç piksellik kayma bile hero'nun üstünde
siyah bir şerit bırakıyordu.) */
.hero-media { inset: -20% 0; }
.journey-media { inset: -24% 0; }
}
/* --- Butonlardaki dolan zemin ------------------------------------------
Sitenin kendi kuralında .btn-discover ve .btn-send konumlandırılmamış.
Dolan katman (::before) bu yüzden butona değil sayfaya göre yerleşip
dev bir altın şerit olarak taşıyordu. Buton bir yığın bağlamı yapılıp
(isolation) katman metnin ARKASINA alınıyor: zemin dolarken yazı
okunur kalıyor. */
.btn-discover,
.btn-send {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-discover::before,
.btn-send::before {
z-index: -1;
}
/* --- Bölüm arka planları: JS açıkken görsel yerine koyu zemin ----------
Hero görseli ayrı bir katmanda ortadan iki yana açılıyor. Bölümün kendi
arka planında da aynı görsel dursaydı açılma hiç görünmezdi (görsel zaten
arkada tam duruyor olurdu) ve aynı dosya iki kez indirilirdi. Bu yüzden
JS açıkken arka plan görseli kapatılıp koyu bir zemin bırakılıyor; perde
kalkarken görsel gerçekten ortadan açılarak geliyor.
JS kapalıysa index.php'deki