/* =========================================================================== * HAREKET KATMANI * * Sozlesme: hicbir sey ziplamaz, sekmez, parildamaz. Izin verilen tek * hareket sozlugu: * * opacity 0 -> 1 * translateY <= 24px, tek yon, geri donusu yok * clip-path soldan/alttan acilma * scale yalnizca GORSELLERDE ve yalnizca 1.00 -> 1.04 * renk / cizgi her zaman serbest * * Ilk boyamada icerik GORUNURDUR. Gizleme yalnizca JS motoru basariyla * kurulunca () devreye girer — boylece bir JS * hatasi sayfayi bos birakmaz. * ======================================================================== */ /* --------------------------------------------------------------------------- * 1) Lenis — yumusak kaydirma icin gerekli taban kurallar * ------------------------------------------------------------------------ */ 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; } .lenis.lenis-smooth iframe { pointer-events: none; } /* --------------------------------------------------------------------------- * 3) Kart etkilesimleri * * Kartin kendisi 3px yukselir — bu, "kart tiklanabilir" bilgisini veren en * ucuz sinyal. Gorsel 1.04'e kadar buyur, tasma gizlenir. Ok kayar. * ------------------------------------------------------------------------ */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .svc, .person, .value, .post-row { transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .svc:hover, .person:hover, .post-row:hover { transform: translateY(-3px); } /* Gorsel bulunan kartlarda yavas bir yaklasma */ .svc__img, .person__photo, .post-row__img { transition: transform var(--dur-slow) var(--ease-out); will-change: transform; } .svc:hover .svc__img, .person:hover .person__photo, .post-row:hover .post-row__img { transform: scale(1.04); } } /* Ok / baglanti kaymasi — hover degil, focus'ta da calisir */ .link-arrow .icon, .svc__link .icon, .person__link .icon { transition: transform var(--dur) var(--ease-out); } .link-arrow:hover .icon, .link-arrow:focus-visible .icon, .svc:hover .svc__link .icon, .person:hover .person__link .icon { transform: translateX(4px); } /* --------------------------------------------------------------------------- * 4) Imlec parlakligi — kartin uzerinde yumusak bir isik lekesi * * Gradyan DEGIL: tek renkli, cok dusuk opaklikta bir daire. Marka * paletinin disina cikmaz ve yalnizca isaretleme cihazlarinda gorunur. * ------------------------------------------------------------------------ */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .glow { position: relative; isolation: isolate; } .glow::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 50%), rgb(93 112 86 / 0.10), transparent 60%); } .glow:hover::after { opacity: 1; } } /* --------------------------------------------------------------------------- * 5) Sayfa ilk acilisinda baslik + hero girisi * ------------------------------------------------------------------------ */ .motion-ready .chrome { opacity: 0; } /* --------------------------------------------------------------------------- * 6) Hareket azaltma — her sey aninda ve gorunur * ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .motion-ready .chrome { opacity: 1 !important; clip-path: none !important; transform: none !important; } }