#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; } }
01 / 07
1
2
3
4
5
6
7
8
9
10
11
(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); })();