Home

#gsf-stage { position: relative !important; width: 100% !important; min-height: 80vh !important; background-color: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif !important; margin: 20px 0 !important; }
#gsf-stage p, #gsf-stage br { display: none !important; margin: 0 !important; padding: 0 !important; } /* WP’nin eklediği boşlukları gizler */
.gsf-click-zone { position: absolute !important; top: 0 !important; width: 50% !important; height: 100% !important; z-index: 999998 !important; background: transparent !important; -webkit-tap-highlight-color: transparent !important; }
#gsf-zone-left { left: 0 !important; cursor: url(‘data:image/svg+xml;utf8,←’) 20 20, w-resize !important; }
#gsf-zone-right { right: 0 !important; cursor: url(‘data:image/svg+xml;utf8,→’) 20 20, e-resize !important; }
#gsf-pagination { position: absolute !important; bottom: 20px !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 4px !important; color: #333 !important; z-index: 999999 !important; pointer-events: none !important; }
#gsf-book-wrap { position: relative !important; width: 45vh !important; height: 70vh !important; perspective: 4000px !important; transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important; display: block !important; margin: 0 auto !important; }
#gsf-center-line { position: absolute !important; top: 0 !important; left: -1px !important; width: 2px !important; height: 100% !important; background-color: #ffffff !important; transform: translateZ(15px) !important; z-index: 9999 !important; pointer-events: none !important; }
#gsf-mockup-shadow { position: absolute !important; top: 2% !important; left:0 !important; width: 100% !important; height: 96% !important; background: transparent !important; box-shadow: 0 40px 80px rgba(0,0,0,0.25), 0 10px 25px rgba(0,0,0,0.1) !important; border-radius: 5px !important; transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important; z-index: -1 !important; pointer-events: none !important; }
.gsf-page { position: absolute !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform-origin: left center !important; transform-style: preserve-3d !important; -webkit-transform-style: preserve-3d !important; transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important; pointer-events: none !important; display: block !important; margin: 0 !important; }
.gsf-face { position: absolute !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; background-color: #fff !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02) !important; margin: 0 !important; }
.gsf-front { transform: translateZ(5px) !important; }
.gsf-back { transform: rotateY(180deg) translateZ(5px) !important; }
.gsf-edge { position: absolute !important; width: 10px !important; height: 100% !important; top: 0 !important; right: -5px !important; background-color: #e6e6e6 !important; transform: rotateY(90deg) !important; border-left: 1px solid #d4d4d4 !important; border-right: 1px solid #d4d4d4 !important; }
.gsf-spine-edge { position: absolute !important; width: 10px !important; height: 100% !important; top: 0 !important; left: -5px !important; background-color: #cfcfcf !important; transform: rotateY(-90deg) !important; border-right: 1px solid #bbb !important; }
#gsf-cover-hinge { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 12px !important; width: 6px !important; background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(255,255,255,0.2) 30%, rgba(0,0,0,0.3) 100%) !important; z-index: 20 !important; pointer-events: none !important; mix-blend-mode: multiply !important; }
.gsf-front::after { content: ” !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 8%, rgba(255,255,255,0.15) 20%, transparent 50%, rgba(0,0,0,0.03) 90%, rgba(0,0,0,0.1) 100%) !important; pointer-events: none !important; z-index: 10 !important; }
.gsf-back::after { content: ” !important; position: absolute !important; top: 0 !important; right: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(to left, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 8%, rgba(255,255,255,0.15) 20%, transparent 50%, rgba(0,0,0,0.03) 90%, rgba(0,0,0,0.1) 100%) !important; pointer-events: none !important; z-index: 10 !important; }
#gsf-page-1 .gsf-front::after { background: linear-gradient(to right, rgba(255,255,255,0.3) 0%, transparent 10%) !important; }
#gsf-page-6 .gsf-back::after { background: none !important; }
.gsf-img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; pointer-events: none !important; z-index: 1 !important; margin: 0 !important; padding: 0 !important; border: none !important; display: block !important; }
@media (max-width: 900px) { #gsf-book-wrap { width: 45vw !important; height: calc(45vw * 1.33) !important; } }
@media (max-width: 600px) { #gsf-book-wrap { width: 48vw !important; height: calc(48vw * 1.33) !important; } }

(function() {
window.gsfCurrent = 0;
window.gsfTotal = 6;
window.gsfIsAnimating = false;

window.gsfSyncBook = function() {
var bookWrap = document.getElementById(“gsf-book-wrap”);
var pagination = document.getElementById(“gsf-pagination”);
var mockupShadow = document.getElementById(“gsf-mockup-shadow”);

if(!bookWrap) return;

if (window.gsfCurrent === 0) {
bookWrap.style.transform = “translateX(0%)”;
mockupShadow.style.left = “0%”;
mockupShadow.style.width = “100%”;
} else if (window.gsfCurrent === window.gsfTotal) {
bookWrap.style.transform = “translateX(100%)”;
mockupShadow.style.left = “-100%”;
mockupShadow.style.width = “100%”;
} else {
bookWrap.style.transform = “translateX(50%)”;
mockupShadow.style.left = “-100%”;
mockupShadow.style.width = “200%”;
}

var currentStr = (window.gsfCurrent + 1 < 10) ? "0" + (window.gsfCurrent + 1) : (window.gsfCurrent + 1);
var totalStr = (window.gsfTotal + 1 = window.gsfTotal) return;
window.gsfIsAnimating = true;

var page = document.getElementById(“gsf-page-” + (window.gsfCurrent + 1));
if(page) {
page.style.zIndex = 100;
page.style.transform = “rotateY(-180deg)”;
}

window.gsfCurrent++;
window.gsfSyncBook();

setTimeout(function() {
if(page) page.style.zIndex = window.gsfCurrent;
window.gsfIsAnimating = false;
}, 1500);
};

window.gsfTurnPrev = function() {
if (window.gsfIsAnimating || window.gsfCurrent <= 0) return;
window.gsfIsAnimating = true;

var page = document.getElementById("gsf-page-" + window.gsfCurrent);
if(page) {
page.style.zIndex = 100;
page.style.transform = "rotateY(0deg)";
}

window.gsfCurrent–;
window.gsfSyncBook();

setTimeout(function() {
if(page) page.style.zIndex = window.gsfTotal – window.gsfCurrent;
window.gsfIsAnimating = false;
}, 1500);
};

document.addEventListener("keydown", function(e) {
if (e.key === "ArrowRight") window.gsfTurnNext();
else if (e.key === "ArrowLeft") window.gsfTurnPrev();
});

function initBook() {
for (var i = 1; i <= window.gsfTotal; i++) {
var p = document.getElementById("gsf-page-" + i);
if (p) p.style.zIndex = window.gsfTotal – i + 1;
}
window.gsfSyncBook();
}

document.addEventListener("DOMContentLoaded", initBook);
setTimeout(initBook, 500);
})();