resim

<style>
.resim-alt{
position: relative;
}

.resim-alt .elementor-widget-container,
.resim-alt .wcf–image,
.resim-alt .elementor-image,
.resim-alt .elementor-image-box-wrapper{
position: relative;
display: block;
overflow: hidden !important;
}

.resim-alt img,
.resim-alt video,
.resim-alt picture img,
.resim-alt .wcf–image img,
.resim-alt .elementor-image img{
display: block;
width: 100%;
height: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
will-change: transform, opacity, clip-path;
border-radius: inherit;
}

.resim-alt.resim-alt–cover img,
.resim-alt.resim-alt–cover video{
width: 100%;
height: 100%;
object-fit: cover;
}

body.elementor-editor-active .resim-alt img,
body.elementor-editor-active .resim-alt video{
opacity: 1 !important;
clip-path: inset(0 0 0 0) !important;
-webkit-clip-path: inset(0 0 0 0) !important;
transform: none !important;
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const isEditor = document.body.classList.contains(“elementor-editor-active”);
if (isEditor) return;

if (typeof gsap === “undefined” || typeof ScrollTrigger === “undefined”) {
console.warn(“GSAP veya ScrollTrigger yüklenmemiş.”);
return;
}

gsap.registerPlugin(ScrollTrigger);

const getMedia = (scope) =>
scope.querySelector(“.wcf–image img, .elementor-image img, picture img, img, video”);

document.querySelectorAll(“.resim-alt”).forEach(function(scope){
if (scope.dataset.animReady === “1”) return;
scope.dataset.animReady = “1”;

const media = getMedia(scope);
if (!media) return;

gsap.set(media, {
force3D: true,
clipPath: “inset(100% 0 0 0)”,
WebkitClipPath: “inset(100% 0 0 0)”,
y: 24,
scale: 1.08
});

gsap.to(media, {
duration: 1.15,
ease: “power2.out”,
force3D: true,
clipPath: “inset(0% 0 0 0)”,
WebkitClipPath: “inset(0% 0 0 0)”,
y: 0,
scale: 1,
scrollTrigger: {
trigger: scope,
start: “top 40%”,
toggleActions: “play none none none”,
invalidateOnRefresh: true
}
});
});

ScrollTrigger.refresh();
});
</script>

/* =========================================================
resim-alt BİTİŞ
========================================================= */

<style>
.resim-ust{
position: relative;
}

.resim-ust .elementor-widget-container,
.resim-ust .wcf–image,
.resim-ust .elementor-image,
.resim-ust .elementor-image-box-wrapper{
position: relative;
display: block;
overflow: hidden !important;
}

.resim-ust img,
.resim-ust video,
.resim-ust picture img,
.resim-ust .wcf–image img,
.resim-ust .elementor-image img{
display: block;
width: 100%;
height: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
will-change: transform, opacity, clip-path;
border-radius: inherit;
}

.resim-ust.resim-ust–cover img,
.resim-ust.resim-ust–cover video{
width: 100%;
height: 100%;
object-fit: cover;
}

body.elementor-editor-active .resim-ust img,
body.elementor-editor-active .resim-ust video{
opacity: 1 !important;
clip-path: inset(0 0 0 0) !important;
-webkit-clip-path: inset(0 0 0 0) !important;
transform: none !important;
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const isEditor = document.body.classList.contains(“elementor-editor-active”);
if (isEditor) return;

if (typeof gsap === “undefined” || typeof ScrollTrigger === “undefined”) {
console.warn(“GSAP veya ScrollTrigger yüklenmemiş.”);
return;
}

gsap.registerPlugin(ScrollTrigger);

const getMedia = (scope) =>
scope.querySelector(“.wcf–image img, .elementor-image img, picture img, img, video”);

document.querySelectorAll(“.resim-ust”).forEach(function(scope){
if (scope.dataset.animReady === “1”) return;
scope.dataset.animReady = “1”;

const media = getMedia(scope);
if (!media) return;

gsap.set(media, {
force3D: true,
clipPath: “inset(0 0 100% 0)”,
WebkitClipPath: “inset(0 0 100% 0)”,
y: -24,
scale: 1.08
});

gsap.to(media, {
duration: 1.15,
ease: “power2.out”,
force3D: true,
clipPath: “inset(0 0 0% 0)”,
WebkitClipPath: “inset(0 0 0% 0)”,
y: 0,
scale: 1,
scrollTrigger: {
trigger: scope,
start: “top 40%”,
toggleActions: “play none none none”,
invalidateOnRefresh: true
}
});
});

ScrollTrigger.refresh();
});
</script>

/* =========================================================
resim-ust BİTİŞ
========================================================= */

<style>
.resim-sag{
position: relative;
}

.resim-sag .elementor-widget-container,
.resim-sag .wcf–image,
.resim-sag .elementor-image,
.resim-sag .elementor-image-box-wrapper{
position: relative;
display: block;
overflow: hidden !important;
}

.resim-sag img,
.resim-sag video,
.resim-sag picture img,
.resim-sag .wcf–image img,
.resim-sag .elementor-image img{
display: block;
width: 100%;
height: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
will-change: transform, opacity, clip-path;
border-radius: inherit;
}

.resim-sag.resim-sag–cover img,
.resim-sag.resim-sag–cover video{
width: 100%;
height: 100%;
object-fit: cover;
}

body.elementor-editor-active .resim-sag img,
body.elementor-editor-active .resim-sag video{
opacity: 1 !important;
clip-path: inset(0 0 0 0) !important;
-webkit-clip-path: inset(0 0 0 0) !important;
transform: none !important;
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const isEditor = document.body.classList.contains(“elementor-editor-active”);
if (isEditor) return;

if (typeof gsap === “undefined” || typeof ScrollTrigger === “undefined”) {
console.warn(“GSAP veya ScrollTrigger yüklenmemiş.”);
return;
}

gsap.registerPlugin(ScrollTrigger);

const getMedia = (scope) =>
scope.querySelector(“.wcf–image img, .elementor-image img, picture img, img, video”);

document.querySelectorAll(“.resim-sag”).forEach(function(scope){
if (scope.dataset.animReady === “1”) return;
scope.dataset.animReady = “1”;

const media = getMedia(scope);
if (!media) return;

gsap.set(media, {
force3D: true,
clipPath: “inset(0 100% 0 0)”,
WebkitClipPath: “inset(0 100% 0 0)”,
x: 24,
scale: 1.08
});

gsap.to(media, {
duration: 1.15,
ease: “power2.out”,
force3D: true,
clipPath: “inset(0 0% 0 0)”,
WebkitClipPath: “inset(0 0% 0 0)”,
x: 0,
scale: 1,
scrollTrigger: {
trigger: scope,
start: “top 40%”,
toggleActions: “play none none none”,
invalidateOnRefresh: true
}
});
});

ScrollTrigger.refresh();
});
</script>

/* =========================================================
resim-sag BİTİŞ
========================================================= */

<style>
.resim-sol{
position: relative;
}

.resim-sol .elementor-widget-container,
.resim-sol .wcf–image,
.resim-sol .elementor-image,
.resim-sol .elementor-image-box-wrapper{
position: relative;
display: block;
overflow: hidden !important;
}

.resim-sol img,
.resim-sol video,
.resim-sol picture img,
.resim-sol .wcf–image img,
.resim-sol .elementor-image img{
display: block;
width: 100%;
height: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
will-change: transform, opacity, clip-path;
border-radius: inherit;
}

.resim-sol.resim-sol–cover img,
.resim-sol.resim-sol–cover video{
width: 100%;
height: 100%;
object-fit: cover;
}

body.elementor-editor-active .resim-sol img,
body.elementor-editor-active .resim-sol video{
opacity: 1 !important;
clip-path: inset(0 0 0 0) !important;
-webkit-clip-path: inset(0 0 0 0) !important;
transform: none !important;
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const isEditor = document.body.classList.contains(“elementor-editor-active”);
if (isEditor) return;

if (typeof gsap === “undefined” || typeof ScrollTrigger === “undefined”) {
console.warn(“GSAP veya ScrollTrigger yüklenmemiş.”);
return;
}

gsap.registerPlugin(ScrollTrigger);

const getMedia = (scope) =>
scope.querySelector(“.wcf–image img, .elementor-image img, picture img, img, video”);

document.querySelectorAll(“.resim-sol”).forEach(function(scope){
if (scope.dataset.animReady === “1”) return;
scope.dataset.animReady = “1”;

const media = getMedia(scope);
if (!media) return;

gsap.set(media, {
force3D: true,
clipPath: “inset(0 0 0 100%)”,
WebkitClipPath: “inset(0 0 0 100%)”,
x: -24,
scale: 1.08
});

gsap.to(media, {
duration: 1.15,
ease: “power2.out”,
force3D: true,
clipPath: “inset(0 0 0 0%)”,
WebkitClipPath: “inset(0 0 0 0%)”,
x: 0,
scale: 1,
scrollTrigger: {
trigger: scope,
start: “top 40%”,
toggleActions: “play none none none”,
invalidateOnRefresh: true
}
});
});

ScrollTrigger.refresh();
});
</script>

/* =========================================================
resim-sol BİTİŞ
========================================================= */

<style>
.resim-x{
position: relative;
perspective: 500px;
transform-style: preserve-3d;
}

.resim-x .elementor-widget-container,
.resim-x .wcf–image,
.resim-x .elementor-image,
.resim-x .elementor-image-box-wrapper{
position: relative;
display: block;
transform-style: preserve-3d;
perspective: 500px;
}

.resim-x img,
.resim-x video,
.resim-x picture img,
.resim-x .wcf–image img,
.resim-x .elementor-image img{
display: block;
width: 100%;
height: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
will-change: transform, opacity;
border-radius: inherit;
}

.resim-x.resim-x–cover img,
.resim-x.resim-x–cover video{
width: 100%;
height: 100%;
object-fit: cover;
}

body.elementor-editor-active .resim-x img,
body.elementor-editor-active .resim-x video{
opacity: 1 !important;
transform: none !important;
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const isEditor = document.body.classList.contains(“elementor-editor-active”);
if (isEditor) return;

if (typeof gsap === “undefined” || typeof ScrollTrigger === “undefined”) {
console.warn(“GSAP veya ScrollTrigger yüklenmemiş.”);
return;
}

gsap.registerPlugin(ScrollTrigger);

const getMedia = (scope) =>
scope.querySelector(“.wcf–image img, .elementor-image img, picture img, img, video”);

document.querySelectorAll(“.resim-x”).forEach(function(scope){
if (scope.dataset.animReady === “1”) return;
scope.dataset.animReady = “1”;

const media = getMedia(scope);
if (!media) return;

gsap.set(scope, { perspective: 500 });

gsap.set(media, {
force3D: true,
opacity: 0.2,
rotationX: -18,
scale: 1.04,
transformOrigin: “top center”
});

gsap.to(media, {
duration: 1.15,
ease: “power2.out”,
force3D: true,
opacity: 1,
rotationX: 0,
scale: 1,
scrollTrigger: {
trigger: scope,
start: “top 65%”,
toggleActions: “play none none reverse”,
invalidateOnRefresh: true
}
});
});

ScrollTrigger.refresh();
});
</script>

/* =========================================================
resim-x BİTİŞ
========================================================= */

<style>
.resim-y{
position: relative;
perspective: 500px;
transform-style: preserve-3d;
}

.resim-y .elementor-widget-container,
.resim-y .wcf–image,
.resim-y .elementor-image,
.resim-y .elementor-image-box-wrapper{
position: relative;
display: block;
transform-style: preserve-3d;
perspective: 500px;
}

.resim-y img,
.resim-y video,
.resim-y picture img,
.resim-y .wcf–image img,
.resim-y .elementor-image img{
display: block;
width: 100%;
height: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
will-change: transform, opacity;
border-radius: inherit;
}

.resim-y.resim-y–cover img,
.resim-y.resim-y–cover video{
width: 100%;
height: 100%;
object-fit: cover;
}

body.elementor-editor-active .resim-y img,
body.elementor-editor-active .resim-y video{
opacity: 1 !important;
transform: none !important;
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const isEditor = document.body.classList.contains(“elementor-editor-active”);
if (isEditor) return;

if (typeof gsap === “undefined” || typeof ScrollTrigger === “undefined”) {
console.warn(“GSAP veya ScrollTrigger yüklenmemiş.”);
return;
}

gsap.registerPlugin(ScrollTrigger);

const getMedia = (scope) =>
scope.querySelector(“.wcf–image img, .elementor-image img, picture img, img, video”);

document.querySelectorAll(“.resim-y”).forEach(function(scope){
if (scope.dataset.animReady === “1”) return;
scope.dataset.animReady = “1”;

const media = getMedia(scope);
if (!media) return;

gsap.set(scope, { perspective: 500 });

gsap.set(media, {
force3D: true,
opacity: 0,
rotationY: -18,
scale: 1.04,
transformOrigin: “center center”
});

gsap.to(media, {
duration: 1.15,
ease: “power2.out”,
force3D: true,
opacity: 1,
rotationY: 0,
scale: 1,
scrollTrigger: {
trigger: scope,
start: “top 45%”,
toggleActions: “play none none reverse”,
invalidateOnRefresh: true
}
});
});

ScrollTrigger.refresh();
});
</script>

/* =========================================================
resim-y BİTİŞ
========================================================= */

<style>
.resim-scale{
position: relative;
}

.resim-scale .elementor-widget-container,
.resim-scale .wcf–image,
.resim-scale .elementor-image{
position: relative;
overflow: hidden !important;
display: block;
}

.resim-scale img,
.resim-scale .wcf–image img,
.resim-scale .elementor-image img,
.resim-scale picture img,
.resim-scale video{
display: block;
width: 100%;
height: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
will-change: transform, opacity;
}

.resim-scale.resim-scale–cover img,
.resim-scale.resim-scale–cover video{
width: 100%;
height: 100%;
object-fit: cover;
}

body.elementor-editor-active .resim-scale img,
body.elementor-editor-active .resim-scale video{
transform: none !important;
opacity: 1 !important;
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const isEditor = document.body.classList.contains(“elementor-editor-active”);
if (isEditor) return;

if (typeof gsap === “undefined” || typeof ScrollTrigger === “undefined”) {
console.warn(“GSAP veya ScrollTrigger yüklenmemiş.”);
return;
}

gsap.registerPlugin(ScrollTrigger);

document.querySelectorAll(“.resim-scale”).forEach(function(scope){
if (scope.dataset.scaleInit === “1”) return;
scope.dataset.scaleInit = “1”;

var img = scope.querySelector(“.wcf–image img, .elementor-image img, img, picture img, video”);
if (!img) return;

gsap.set(img, {
scale: 0.5,
transformOrigin: “top center”,
force3D: true,
willChange: “transform”
});

gsap.to(img, {
scale: 1,
ease: “power2.out”,
scrollTrigger: {
trigger: scope,
start: “top 95%”,
end: “top 35%”,
scrub: 1.2,
invalidateOnRefresh: true
}
});
});

ScrollTrigger.refresh();
});
</script>

/* =========================================================
resim-scale BİTİŞ
========================================================= */

<style>

.akis-sag{
position: relative;
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
}

/* İstersen taşmaları gizlemek için yardımcı class */
.akis-sag-mask{
overflow: hidden !important;
}

/* Elementor editörde normal görünsün */
body.elementor-editor-active .akis-sag{
transform: none !important;
opacity: 1 !important;
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const isEditor = document.body.classList.contains(“elementor-editor-active”);
if (isEditor) return;

if (typeof gsap === “undefined” || typeof ScrollTrigger === “undefined”) {
console.warn(“GSAP veya ScrollTrigger yüklenmemiş.”);
return;
}

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(“.akis-sag”).forEach((el) => {
if (el.dataset.akisSagInit === “1”) return;
el.dataset.akisSagInit = “1”;

gsap.set(el, {
x: 60,
opacity: 0,
force3D: true
});

ScrollTrigger.create({
trigger: el,
start: “top 85%”,
end: “bottom 15%”,
invalidateOnRefresh: true,
onEnter: () => {
gsap.to(el, {
x: 0,
opacity: 1,
duration: 0.8,
ease: “power2.out”,
overwrite: “auto”
});
},
onEnterBack: () => {
gsap.to(el, {
x: 0,
opacity: 1,
duration: 0.8,
ease: “power2.out”,
overwrite: “auto”
});
},
onLeaveBack: () => {
gsap.set(el, {
x: 60,
opacity: 0
});
}
});
});

ScrollTrigger.refresh();
});
</script>

/* =========================================================
akis-sag BİTİŞ
========================================================= */

<style>
.akis-sol{
position: relative;
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
}

/* İstersen taşmaları gizlemek için yardımcı class */
.akis-sol-mask{
overflow: hidden !important;
}

/* Elementor editörde normal görünsün */
body.elementor-editor-active .akis-sol{
transform: none !important;
opacity: 1 !important;
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const isEditor = document.body.classList.contains(“elementor-editor-active”);
if (isEditor) return;

if (typeof gsap === “undefined” || typeof ScrollTrigger === “undefined”) {
console.warn(“GSAP veya ScrollTrigger yüklenmemiş.”);
return;
}

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(“.akis-sol”).forEach((el) => {
if (el.dataset.akisSolInit === “1”) return;
el.dataset.akisSolInit = “1”;

gsap.set(el, {
x: -60,
opacity: 0,
force3D: true
});

ScrollTrigger.create({
trigger: el,
start: “top 85%”,
end: “bottom 15%”,
invalidateOnRefresh: true,
onEnter: () => {
gsap.to(el, {
x: 0,
opacity: 1,
duration: 0.8,
ease: “power2.out”,
overwrite: “auto”
});
},
onEnterBack: () => {
gsap.to(el, {
x: 0,
opacity: 1,
duration: 0.8,
ease: “power2.out”,
overwrite: “auto”
});
},
onLeaveBack: () => {
gsap.set(el, {
x: -60,
opacity: 0
});
}
});
});

ScrollTrigger.refresh();
});
</script>

/* =========================================================
akis-sol BİTİŞ
========================================================= */

<style>
.akis-alt{
position: relative;
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
}

/* İstersen taşmaları gizlemek için yardımcı class */
.akis-alt-mask{
overflow: hidden !important;
}

/* Elementor editörde normal görünsün */
body.elementor-editor-active .akis-alt{
transform: none !important;
opacity: 1 !important;
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const isEditor = document.body.classList.contains(“elementor-editor-active”);
if (isEditor) return;

if (typeof gsap === “undefined” || typeof ScrollTrigger === “undefined”) {
console.warn(“GSAP veya ScrollTrigger yüklenmemiş.”);
return;
}

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(“.akis-alt”).forEach((el) => {
if (el.dataset.akisAltInit === “1”) return;
el.dataset.akisAltInit = “1”;

gsap.set(el, {
y: 60,
opacity: 0,
force3D: true
});

ScrollTrigger.create({
trigger: el,
start: “top 85%”,
end: “bottom 15%”,
invalidateOnRefresh: true,
onEnter: () => {
gsap.to(el, {
y: 0,
opacity: 1,
duration: 0.8,
ease: “power2.out”,
overwrite: “auto”
});
},
onEnterBack: () => {
gsap.to(el, {
y: 0,
opacity: 1,
duration: 0.8,
ease: “power2.out”,
overwrite: “auto”
});
},
onLeaveBack: () => {
gsap.set(el, {
y: 60,
opacity: 0
});
}
});
});

ScrollTrigger.refresh();
});
</script>

/* =========================================================
akis-alt BİTİŞ
========================================================= */

<style>
.akis-ust{
position: relative;
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
}

/* İstersen taşmaları gizlemek için yardımcı class */
.akis-ust-mask{
overflow: hidden !important;
}

/* Elementor editörde normal görünsün */
body.elementor-editor-active .akis-ust{
transform: none !important;
opacity: 1 !important;
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const isEditor = document.body.classList.contains(“elementor-editor-active”);
if (isEditor) return;

if (typeof gsap === “undefined” || typeof ScrollTrigger === “undefined”) {
console.warn(“GSAP veya ScrollTrigger yüklenmemiş.”);
return;
}

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(“.akis-ust”).forEach((el) => {
if (el.dataset.akisUstInit === “1”) return;
el.dataset.akisUstInit = “1”;

gsap.set(el, {
y: -60,
opacity: 0,
force3D: true
});

ScrollTrigger.create({
trigger: el,
start: “top 85%”,
end: “bottom 15%”,
invalidateOnRefresh: true,
onEnter: () => {
gsap.to(el, {
y: 0,
opacity: 1,
duration: 0.8,
ease: “power2.out”,
overwrite: “auto”
});
},
onEnterBack: () => {
gsap.to(el, {
y: 0,
opacity: 1,
duration: 0.8,
ease: “power2.out”,
overwrite: “auto”
});
},
onLeaveBack: () => {
gsap.set(el, {
y: -60,
opacity: 0
});
}
});
});

ScrollTrigger.refresh();
});
</script>

/* =========================================================
akis-ust BİTİŞ
========================================================= */