Ferro D\u00f6k\u00fcm Pro - 360\u00b0 \u00dcr\u00fcn Katalo\u011fu \/ Product Catalog<\/title>\r\n <style>\r\n \/* --- CSS Tasar\u0131m\u0131 --- *\/\r\n :root {\r\n --primary-color: #2c3e50;\r\n --accent-color: #e74c3c;\r\n --bg-color: #f4f4f9;\r\n --card-bg: #fff;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background-color: var(--bg-color);\r\n color: #333;\r\n margin: 0;\r\n padding: 20px;\r\n overflow-x: hidden;\r\n \/* user-select buraya ta\u015f\u0131nd\u0131 (Metin se\u00e7meyi engeller) *\/\r\n -webkit-user-select: none;\r\n user-select: none;\r\n }\r\n\r\n h1 {\r\n text-align: center;\r\n color: var(--primary-color);\r\n margin-bottom: 30px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n line-height: 1.3;\r\n }\r\n h1 .en-title {\r\n font-size: 0.6em;\r\n color: #7f8c8d;\r\n display: block;\r\n text-transform: none;\r\n font-weight: 400;\r\n }\r\n\r\n #product-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\r\n gap: 25px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .product-card {\r\n background: var(--card-bg);\r\n padding: 25px;\r\n border-radius: 12px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.08);\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n border: 1px solid transparent;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .product-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n border-color: var(--accent-color);\r\n }\r\n\r\n .product-card .thumbnail {\r\n width: 100%;\r\n height: 160px;\r\n object-fit: contain; \r\n margin-bottom: 15px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .product-card:hover .thumbnail {\r\n transform: scale(1.05); \r\n }\r\n\r\n .product-card h3 {\r\n margin: 0;\r\n font-size: 21px; \r\n color: var(--primary-color);\r\n line-height: 1.2;\r\n }\r\n \r\n .product-card h3 .en-name {\r\n display: block;\r\n font-size: 18px; \r\n color: #7f8c8d;\r\n margin-top: 4px;\r\n font-weight: normal;\r\n }\r\n\r\n .product-card .subtitle {\r\n font-size: 11px;\r\n color: #95a5a6;\r\n margin-top: 12px;\r\n line-height: 1.4;\r\n border-top: 1px solid #eee;\r\n padding-top: 8px;\r\n width: 100%;\r\n }\r\n\r\n #lightbox {\r\n display: none;\r\n position: fixed;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background: rgba(0, 0, 0, 0.95);\r\n z-index: 10000;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n #lightbox.open { display: flex; opacity: 1; }\r\n\r\n #lightbox-close {\r\n position: absolute;\r\n top: 15px;\r\n right: 25px;\r\n font-size: 50px;\r\n color: white;\r\n cursor: pointer;\r\n user-select: none;\r\n transition: color 0.2s;\r\n z-index: 10010;\r\n }\r\n #lightbox-close:hover { color: var(--accent-color); }\r\n\r\n #lightbox-title {\r\n color: white;\r\n margin: 0 0 15px 0;\r\n font-size: 29px; \r\n font-weight: 300;\r\n position: absolute;\r\n top: 20px;\r\n left: 30px;\r\n text-align: left;\r\n }\r\n #lightbox-title .en-name-light {\r\n display: block;\r\n font-size: 21px; \r\n color: #bdc3c7;\r\n }\r\n\r\n #viewer-container {\r\n width: 95%; \r\n height: 85vh; \r\n background: #fff;\r\n border-radius: 8px;\r\n position: relative;\r\n overflow: hidden; \r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n box-shadow: 0 0 40px rgba(0,0,0,0.5);\r\n }\r\n\r\n #product-360-image {\r\n max-width: 100%;\r\n max-height: 100%;\r\n display: block;\r\n user-select: none;\r\n pointer-events: none; \r\n transform-origin: 0 0; \r\n will-change: transform; \r\n }\r\n\r\n .controls-info {\r\n position: absolute;\r\n bottom: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: rgba(0,0,0,0.7);\r\n color: #ddd;\r\n padding: 10px 20px;\r\n border-radius: 30px;\r\n font-size: 13px;\r\n pointer-events: none;\r\n text-align: center;\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 15px;\r\n width: max-content;\r\n max-width: 90%;\r\n }\r\n\r\n #loading-overlay {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background: rgba(255,255,255,0.9);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n z-index: 10005;\r\n border-radius: 8px;\r\n }\r\n .spinner {\r\n border: 4px solid #f3f3f3;\r\n border-top: 4px solid var(--accent-color);\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n animation: spin 1s linear infinite;\r\n margin-bottom: 15px;\r\n }\r\n #loading-text {\r\n color: #555;\r\n font-weight: 500;\r\n text-align: center;\r\n line-height: 1.5;\r\n }\r\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <h1>\r\n Ferro D\u00f6k\u00fcm PRO - 360\u00b0 \u00dcr\u00fcn Katalo\u011fu\r\n <span class=\"en-title\">360\u00b0 Product Catalog<\/span>\r\n <\/h1>\r\n \r\n <div id=\"product-grid\"><\/div>\r\n\r\n <div id=\"lightbox\">\r\n <span id=\"lightbox-close\">×<\/span>\r\n <h2 id=\"lightbox-title\">\r\n <span id=\"lb-title-tr\">\u00dcr\u00fcn<\/span>\r\n <span id=\"lb-title-en\" class=\"en-name-light\">Product<\/span>\r\n <\/h2>\r\n \r\n <div id=\"viewer-container\">\r\n <div id=\"loading-overlay\">\r\n <div class=\"spinner\"><\/div>\r\n <div id=\"loading-text\">G\u00f6rseller Y\u00fckleniyor... <br> Loading Images...<\/div>\r\n <\/div>\r\n \r\n <img decoding=\"async\" id=\"product-360-image\" src=\"\" alt=\"360 Derece \u00dcr\u00fcn \/ 360 Degree Product\">\r\n <div style=\"position:absolute; top:0; left:0; width:100%; height:100%; cursor: ew-resize;\" id=\"interaction-layer\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"controls-info\">\r\n <span>\ud83d\udd04 D\u00f6nd\u00fcr (S\u00fcr\u00fckle) \/ Rotate (Drag)<\/span>\r\n <span>\ud83d\udd0d Zoom (Tekerlek \/ Scroll - Pinch)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const baseUrl = \"https:\/\/ferrodokum.com.tr\/ferro-dokum\/ferro-dokum-360-images\/\";\r\n \r\n const productList = [\r\n { id: 1, tr: \"Ta\u015f\u0131y\u0131c\u0131\", en: \"Air Bellows Support\", frames: 69 }, \r\n { id: 2, tr: \"Kabin Devirme Braketi\", en: \"Cabin Bracket\", frames: 68 }, \r\n { id: 3, tr: \"Yatak G\u00f6vdesi\", en: \"Pedestal\", frames: 68 },\r\n { id: 4, tr: \"Yatak G\u00f6vdesi\", en: \"Pedestal\", frames: 69 },\r\n { id: 5, tr: \"Egzoz Manifoldu\", en: \"Exhaust Manifold\", frames: 68 },\r\n { id: 6, tr: \"\u00d6n Support\", en: \"Front Support\", frames: 68 },\r\n { id: 7, tr: \"Porya\", en: \"Wheelhub\", frames: 68 },\r\n { id: 8, tr: \"Braket\", en: \"Bracket\", frames: 68 },\r\n { id: 9, tr: \"G\u00f6vde\", en: \"Housing\", frames: 69 },\r\n { id: 10, tr: \"Braket\", en: \"Bracket\", frames: 68 },\r\n { id: 11, tr: \"M.F. Braket\", en: \"Multi Function Bracket\", frames: 69 },\r\n { id: 12, tr: \"G\u00fc\u00e7lendirici\", en: \"Reinforcement\", frames: 69 },\r\n { id: 13, tr: \"Haval\u0131 Fren Diski\", en: \"Ventilated Brake Disc\", frames: 35 }, \r\n { id: 14, tr: \"Rotor\", en: \" Rotor\", frames: 35 },\r\n { id: 15, tr: \"Diferansiyel Kutusu\", en: \"Differential Housing\", frames: 36 },\r\n { id: 16, tr: \"Braket\", en: \"Bracket\", frames: 69 },\r\n { id: 17, tr: \"Fren Pabucu\", en: \"Brake Shoe\", frames: 68 },\r\n { id: 18, tr: \"G\u00f6vde\", en: \"Housing\", frames: 69 },\r\n { id: 19, tr: \"Fren Pabucu\", en: \"Brake Shoe\", frames: 68 },\r\n { id: 20, tr: \"\u00d6n Support\", en: \"Front Engine Support\", frames: 68 },\r\n { id: 21, tr: \"Diferansiyel Ta\u015f\u0131y\u0131c\u0131\", en: \"Carrier Differential\", frames: 64 },\r\n { id: 22, tr: \"Tutucu\", en: \"Front Axle Suspension\", frames: 69 },\r\n { id: 23, tr: \"Braket\", en: \"Bracket\", frames: 68 },\r\n { id: 24, tr: \"Yay Braketi\", en: \"Support, Stablizer\", frames: 68 },\r\n { id: 25, tr: \"G\u00f6vde\", en: \"Housing\", frames: 69 },\r\n { id: 26, tr: \"Haval\u0131 Fren Diski\", en: \"Ventilated Brake Disc\", frames: 68 },\r\n { id: 27, tr: \"Poryal\u0131 Disk\", en: \"Hub Disc\", frames: 68 },\r\n { id: 28, tr: \"Aks Kovan\u0131\", en: \"Housing Rear Axle\", frames: 68 },\r\n { id: 29, tr: \"Karter\", en: \"Oil Pan\", frames: 68 },\r\n { id: 30, tr: \"Arka Aks G\u00f6vdesi\", en: \"Rear Axle Housing\", frames: 35 },\r\n { id: 31, tr: \"G\u00f6vde\", en: \"Housing\", frames: 35 },\r\n { id: 32, tr: \"Dif.Kovan\u0131\", en: \"Housing\", frames: 35 },\r\n { id: 33, tr: \"G\u00f6vde\", en: \"Housing\", frames: 69 },\r\n { id: 34, tr: \"Orta Yatak G\u00f6vdesi\", en: \"Center Bearing Bracket\", frames: 68 }\r\n ];\r\n \r\n const grid = document.getElementById('product-grid');\r\n \r\n productList.forEach(product => {\r\n const folderNumber = product.id.toString().padStart(2, '0'); \r\n const folderName = `ferro-dokum-${folderNumber}`;\r\n const thumbnailSrc = `${baseUrl}${folderName}\/ferro1.png`;\r\n \r\n const card = document.createElement('div');\r\n card.className = 'product-card';\r\n card.innerHTML = `\r\n <img decoding=\"async\" class=\"thumbnail\" src=\"${thumbnailSrc}\" alt=\"${product.tr}\" loading=\"lazy\">\r\n <h3>${product.tr} <span class=\"en-name\">${product.en}<\/span><\/h3>\r\n <div class=\"subtitle\">360\u00b0 \u00dcr\u00fcn \u0130zleme <br> 360\u00b0 Product View<\/div>\r\n `;\r\n card.onclick = () => openLightbox(folderName, product.tr, product.en, product.frames);\r\n grid.appendChild(card);\r\n });\r\n\r\n let currentFolder = '';\r\n let currentFrame = 1;\r\n let totalFrames = 68; \r\n let imagesArray = []; \r\n let loadedImagesCount = 0;\r\n let forceLoadTimeout; \/\/ YEN\u0130: Zaman a\u015f\u0131m\u0131 sigortas\u0131 i\u00e7in de\u011fi\u015fken\r\n \r\n let state = {\r\n isDragging: false, startX: 0, startY: 0,\r\n velocity: 0, friction: 0.92, lastTime: 0, lastX: 0,\r\n scale: 1, panning: false, pointX: 0, pointY: 0,\r\n initialPinchDist: 0, initialPinchScale: 1\r\n };\r\n \r\n const lightbox = document.getElementById('lightbox');\r\n const imgElement = document.getElementById('product-360-image');\r\n const titleTr = document.getElementById('lb-title-tr');\r\n const titleEn = document.getElementById('lb-title-en');\r\n const viewer = document.getElementById('viewer-container');\r\n const interactionLayer = document.getElementById('interaction-layer');\r\n const loadingOverlay = document.getElementById('loading-overlay');\r\n const loadingText = document.getElementById('loading-text');\r\n\r\n function openLightbox(folderName, trName, enName, framesCount) {\r\n currentFolder = folderName;\r\n currentFrame = 1;\r\n totalFrames = framesCount || 68; \r\n titleTr.innerText = trName;\r\n titleEn.innerText = enName;\r\n imagesArray = [];\r\n loadedImagesCount = 0;\r\n \r\n state.scale = 1; state.pointX = 0; state.pointY = 0; state.velocity = 0;\r\n updateTransform(); \r\n\r\n lightbox.classList.add('open');\r\n loadingOverlay.style.display = 'flex';\r\n loadingText.innerHTML = `G\u00f6rseller Y\u00fckleniyor... <br> Loading Images...`;\r\n interactionLayer.style.cursor = 'wait';\r\n\r\n \/\/ YEN\u0130: 8 saniye sigortas\u0131. Y\u00fckleme tak\u0131l\u0131rsa zorla a\u00e7ar.\r\n clearTimeout(forceLoadTimeout);\r\n forceLoadTimeout = setTimeout(() => {\r\n if (loadedImagesCount < totalFrames) {\r\n console.log(\"Ba\u011flant\u0131 yava\u015f, tak\u0131lan g\u00f6rseller atlanarak sistem zorla a\u00e7\u0131ld\u0131.\");\r\n finishLoading();\r\n }\r\n }, 8000); \/\/ 8000 milisaniye = 8 saniye\r\n\r\n for (let i = 1; i <= totalFrames; i++) {\r\n const img = new Image();\r\n img.src = `${baseUrl}${currentFolder}\/ferro${i}.png`;\r\n img.onload = onImageLoad;\r\n img.onerror = onImageLoad; \r\n imagesArray.push(img);\r\n }\r\n }\r\n\r\n function onImageLoad() {\r\n loadedImagesCount++;\r\n let percentage = Math.round((loadedImagesCount \/ totalFrames) * 100);\r\n \r\n \/\/ E\u011fer %100'\u00fc ge\u00e7mezse metni g\u00fcncelle (sigorta nedeniyle 100'\u00fc a\u015fmas\u0131n\u0131 engeller)\r\n if(percentage <= 100) {\r\n loadingText.innerHTML = `Y\u00fckleniyor \/ Loading: %${percentage}`;\r\n }\r\n\r\n if (loadedImagesCount >= totalFrames) {\r\n finishLoading(); \r\n }\r\n }\r\n\r\n \/\/ YEN\u0130: Y\u00fcklemeyi bitirme i\u015flemini ayr\u0131 bir fonksiyona ald\u0131k\r\n function finishLoading() {\r\n clearTimeout(forceLoadTimeout); \/\/ Y\u00fckleme bittiyse sayac\u0131 durdur\r\n loadingOverlay.style.display = 'none';\r\n interactionLayer.style.cursor = 'ew-resize';\r\n updateImage();\r\n startInertiaLoop(); \r\n }\r\n\r\n document.getElementById('lightbox-close').onclick = closeLightbox;\r\n lightbox.onclick = (e) => { if(e.target === lightbox) closeLightbox(); }; \r\n\r\n function closeLightbox() {\r\n lightbox.classList.remove('open');\r\n clearTimeout(forceLoadTimeout); \/\/ \u00c7\u0131k\u0131\u015f yap\u0131ld\u0131\u011f\u0131nda sayac\u0131 durdur\r\n imagesArray = []; \r\n imgElement.src = ''; \r\n stopInertiaLoop();\r\n }\r\n\r\n function updateImage() {\r\n if (imagesArray.length > 0 && imagesArray[currentFrame - 1]) {\r\n imgElement.src = imagesArray[currentFrame - 1].src;\r\n }\r\n }\r\n\r\n function updateTransform() {\r\n if (state.scale > 1) {\r\n const vRect = viewer.getBoundingClientRect();\r\n const iRect = imgElement.getBoundingClientRect();\r\n state.pointX = Math.min(0, Math.max(state.pointX, vRect.width - iRect.width \/ state.scale * state.scale)); \r\n if(state.pointX > 0) state.pointX = 0;\r\n if(state.pointY > 0) state.pointY = 0;\r\n } else { state.pointX = 0; state.pointY = 0; }\r\n imgElement.style.transform = `translate(${state.pointX}px, ${state.pointY}px) scale(${state.scale})`;\r\n }\r\n\r\n let inertiaAnimationId;\r\n function startInertiaLoop() { if (!inertiaAnimationId) inertiaAnimationId = requestAnimationFrame(inertiaTick); }\r\n function stopInertiaLoop() { cancelAnimationFrame(inertiaAnimationId); inertiaAnimationId = null; }\r\n\r\n function inertiaTick() {\r\n if (lightbox.classList.contains('open') && !state.isDragging && Math.abs(state.velocity) > 0.1) {\r\n state.velocity *= state.friction;\r\n const frameChange = Math.round(state.velocity);\r\n if (frameChange !== 0) {\r\n currentFrame -= frameChange;\r\n while (currentFrame > totalFrames) currentFrame -= totalFrames;\r\n while (currentFrame < 1) currentFrame += totalFrames;\r\n updateImage();\r\n }\r\n }\r\n inertiaAnimationId = requestAnimationFrame(inertiaTick);\r\n }\r\n\r\n const handleStart = (x, y) => {\r\n state.isDragging = true; state.startX = x; state.startY = y;\r\n state.lastX = x; state.lastTime = performance.now();\r\n if (state.scale > 1) state.panning = true; else state.velocity = 0; \r\n };\r\n\r\n const handleMove = (x, y) => {\r\n if (!state.isDragging) return;\r\n const dx = x - state.startX;\r\n if (state.scale > 1 && state.panning) {\r\n interactionLayer.style.cursor = 'grabbing';\r\n state.pointX += x - state.lastX; state.pointY += y - state.lastY;\r\n updateTransform();\r\n } else {\r\n interactionLayer.style.cursor = 'ew-resize';\r\n const sensitivity = 8; \r\n if (Math.abs(dx) > sensitivity) {\r\n const framesToMove = Math.floor(dx \/ sensitivity);\r\n if (framesToMove !== 0) {\r\n currentFrame -= framesToMove;\r\n while (currentFrame > totalFrames) currentFrame -= totalFrames;\r\n while (currentFrame < 1) currentFrame += totalFrames;\r\n updateImage();\r\n const now = performance.now(); const dt = now - state.lastTime;\r\n if (dt > 0) state.velocity = (x - state.lastX) \/ dt * 10; \r\n state.startX = x; state.lastTime = now;\r\n }\r\n }\r\n }\r\n state.lastX = x; state.lastY = y;\r\n };\r\n\r\n const handleEnd = () => {\r\n state.isDragging = false; state.panning = false;\r\n interactionLayer.style.cursor = state.scale > 1 ? 'grab' : 'ew-resize';\r\n };\r\n\r\n interactionLayer.addEventListener('mousedown', (e) => { e.preventDefault(); handleStart(e.pageX, e.pageY); });\r\n window.addEventListener('mousemove', (e) => handleMove(e.pageX, e.pageY));\r\n window.addEventListener('mouseup', handleEnd);\r\n\r\n viewer.addEventListener('wheel', (e) => {\r\n if (!lightbox.classList.contains('open')) return;\r\n e.preventDefault();\r\n const xs = (e.pageX - state.pointX) \/ state.scale, ys = (e.pageY - state.pointY) \/ state.scale;\r\n const newScale = e.deltaY > 0 ? state.scale - 0.2 : state.scale + 0.2;\r\n state.scale = Math.min(Math.max(1, newScale), 4);\r\n state.pointX = e.pageX - xs * state.scale; state.pointY = e.pageY - ys * state.scale;\r\n updateTransform();\r\n interactionLayer.style.cursor = state.scale > 1 ? 'grab' : 'ew-resize';\r\n }, { passive: false });\r\n\r\n const getTouchDist = (touches) => Math.hypot(touches[0].pageX - touches[1].pageX, touches[0].pageY - touches[1].pageY);\r\n\r\n interactionLayer.addEventListener('touchstart', (e) => {\r\n if (e.touches.length === 1) handleStart(e.touches[0].pageX, e.touches[0].pageY);\r\n else if (e.touches.length === 2) { state.isDragging = false; state.initialPinchDist = getTouchDist(e.touches); state.initialPinchScale = state.scale; }\r\n }, { passive: false });\r\n\r\n interactionLayer.addEventListener('touchmove', (e) => {\r\n e.preventDefault(); \r\n if (e.touches.length === 1) handleMove(e.touches[0].pageX, e.touches[0].pageY);\r\n else if (e.touches.length === 2) {\r\n state.scale = Math.min(Math.max(1, state.initialPinchScale * (getTouchDist(e.touches) \/ state.initialPinchDist)), 4);\r\n updateTransform();\r\n }\r\n }, { passive: false });\r\n\r\n interactionLayer.addEventListener('touchend', (e) => {\r\n if (e.touches.length === 0) handleEnd();\r\n else if (e.touches.length === 1) { state.startX = e.touches[0].pageX; state.startY = e.touches[0].pageY; state.isDragging = true; }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ferro D\u00f6k\u00fcm Pro – 360\u00b0 \u00dcr\u00fcn Katalo\u011fu \/ Product Catalog Ferro D\u00f6k\u00fcm PRO – 360\u00b0 \u00dcr\u00fcn Katalo\u011fu 360\u00b0 Product Catalog × \u00dcr\u00fcn Product G\u00f6rseller Y\u00fckleniyor… Loading Images… 🔄 D\u00f6nd\u00fcr (S\u00fcr\u00fckle) \/ Rotate (Drag) 🔍 Zoom (Tekerlek \/ Scroll – Pinch)<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3995","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/pages\/3995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/comments?post=3995"}],"version-history":[{"count":67,"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/pages\/3995\/revisions"}],"predecessor-version":[{"id":4201,"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/pages\/3995\/revisions\/4201"}],"wp:attachment":[{"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/media?parent=3995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Ferro D\u00f6k\u00fcm Pro - 360\u00b0 \u00dcr\u00fcn Katalo\u011fu \/ Product Catalog<\/title>\r\n <style>\r\n \/* --- CSS Tasar\u0131m\u0131 --- *\/\r\n :root {\r\n --primary-color: #2c3e50;\r\n --accent-color: #e74c3c;\r\n --bg-color: #f4f4f9;\r\n --card-bg: #fff;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background-color: var(--bg-color);\r\n color: #333;\r\n margin: 0;\r\n padding: 20px;\r\n overflow-x: hidden;\r\n \/* user-select buraya ta\u015f\u0131nd\u0131 (Metin se\u00e7meyi engeller) *\/\r\n -webkit-user-select: none;\r\n user-select: none;\r\n }\r\n\r\n h1 {\r\n text-align: center;\r\n color: var(--primary-color);\r\n margin-bottom: 30px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n line-height: 1.3;\r\n }\r\n h1 .en-title {\r\n font-size: 0.6em;\r\n color: #7f8c8d;\r\n display: block;\r\n text-transform: none;\r\n font-weight: 400;\r\n }\r\n\r\n #product-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\r\n gap: 25px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .product-card {\r\n background: var(--card-bg);\r\n padding: 25px;\r\n border-radius: 12px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.08);\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n border: 1px solid transparent;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .product-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n border-color: var(--accent-color);\r\n }\r\n\r\n .product-card .thumbnail {\r\n width: 100%;\r\n height: 160px;\r\n object-fit: contain; \r\n margin-bottom: 15px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .product-card:hover .thumbnail {\r\n transform: scale(1.05); \r\n }\r\n\r\n .product-card h3 {\r\n margin: 0;\r\n font-size: 21px; \r\n color: var(--primary-color);\r\n line-height: 1.2;\r\n }\r\n \r\n .product-card h3 .en-name {\r\n display: block;\r\n font-size: 18px; \r\n color: #7f8c8d;\r\n margin-top: 4px;\r\n font-weight: normal;\r\n }\r\n\r\n .product-card .subtitle {\r\n font-size: 11px;\r\n color: #95a5a6;\r\n margin-top: 12px;\r\n line-height: 1.4;\r\n border-top: 1px solid #eee;\r\n padding-top: 8px;\r\n width: 100%;\r\n }\r\n\r\n #lightbox {\r\n display: none;\r\n position: fixed;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background: rgba(0, 0, 0, 0.95);\r\n z-index: 10000;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n #lightbox.open { display: flex; opacity: 1; }\r\n\r\n #lightbox-close {\r\n position: absolute;\r\n top: 15px;\r\n right: 25px;\r\n font-size: 50px;\r\n color: white;\r\n cursor: pointer;\r\n user-select: none;\r\n transition: color 0.2s;\r\n z-index: 10010;\r\n }\r\n #lightbox-close:hover { color: var(--accent-color); }\r\n\r\n #lightbox-title {\r\n color: white;\r\n margin: 0 0 15px 0;\r\n font-size: 29px; \r\n font-weight: 300;\r\n position: absolute;\r\n top: 20px;\r\n left: 30px;\r\n text-align: left;\r\n }\r\n #lightbox-title .en-name-light {\r\n display: block;\r\n font-size: 21px; \r\n color: #bdc3c7;\r\n }\r\n\r\n #viewer-container {\r\n width: 95%; \r\n height: 85vh; \r\n background: #fff;\r\n border-radius: 8px;\r\n position: relative;\r\n overflow: hidden; \r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n box-shadow: 0 0 40px rgba(0,0,0,0.5);\r\n }\r\n\r\n #product-360-image {\r\n max-width: 100%;\r\n max-height: 100%;\r\n display: block;\r\n user-select: none;\r\n pointer-events: none; \r\n transform-origin: 0 0; \r\n will-change: transform; \r\n }\r\n\r\n .controls-info {\r\n position: absolute;\r\n bottom: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: rgba(0,0,0,0.7);\r\n color: #ddd;\r\n padding: 10px 20px;\r\n border-radius: 30px;\r\n font-size: 13px;\r\n pointer-events: none;\r\n text-align: center;\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 15px;\r\n width: max-content;\r\n max-width: 90%;\r\n }\r\n\r\n #loading-overlay {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background: rgba(255,255,255,0.9);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n z-index: 10005;\r\n border-radius: 8px;\r\n }\r\n .spinner {\r\n border: 4px solid #f3f3f3;\r\n border-top: 4px solid var(--accent-color);\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n animation: spin 1s linear infinite;\r\n margin-bottom: 15px;\r\n }\r\n #loading-text {\r\n color: #555;\r\n font-weight: 500;\r\n text-align: center;\r\n line-height: 1.5;\r\n }\r\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <h1>\r\n Ferro D\u00f6k\u00fcm PRO - 360\u00b0 \u00dcr\u00fcn Katalo\u011fu\r\n <span class=\"en-title\">360\u00b0 Product Catalog<\/span>\r\n <\/h1>\r\n \r\n <div id=\"product-grid\"><\/div>\r\n\r\n <div id=\"lightbox\">\r\n <span id=\"lightbox-close\">×<\/span>\r\n <h2 id=\"lightbox-title\">\r\n <span id=\"lb-title-tr\">\u00dcr\u00fcn<\/span>\r\n <span id=\"lb-title-en\" class=\"en-name-light\">Product<\/span>\r\n <\/h2>\r\n \r\n <div id=\"viewer-container\">\r\n <div id=\"loading-overlay\">\r\n <div class=\"spinner\"><\/div>\r\n <div id=\"loading-text\">G\u00f6rseller Y\u00fckleniyor... <br> Loading Images...<\/div>\r\n <\/div>\r\n \r\n <img decoding=\"async\" id=\"product-360-image\" src=\"\" alt=\"360 Derece \u00dcr\u00fcn \/ 360 Degree Product\">\r\n <div style=\"position:absolute; top:0; left:0; width:100%; height:100%; cursor: ew-resize;\" id=\"interaction-layer\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"controls-info\">\r\n <span>\ud83d\udd04 D\u00f6nd\u00fcr (S\u00fcr\u00fckle) \/ Rotate (Drag)<\/span>\r\n <span>\ud83d\udd0d Zoom (Tekerlek \/ Scroll - Pinch)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const baseUrl = \"https:\/\/ferrodokum.com.tr\/ferro-dokum\/ferro-dokum-360-images\/\";\r\n \r\n const productList = [\r\n { id: 1, tr: \"Ta\u015f\u0131y\u0131c\u0131\", en: \"Air Bellows Support\", frames: 69 }, \r\n { id: 2, tr: \"Kabin Devirme Braketi\", en: \"Cabin Bracket\", frames: 68 }, \r\n { id: 3, tr: \"Yatak G\u00f6vdesi\", en: \"Pedestal\", frames: 68 },\r\n { id: 4, tr: \"Yatak G\u00f6vdesi\", en: \"Pedestal\", frames: 69 },\r\n { id: 5, tr: \"Egzoz Manifoldu\", en: \"Exhaust Manifold\", frames: 68 },\r\n { id: 6, tr: \"\u00d6n Support\", en: \"Front Support\", frames: 68 },\r\n { id: 7, tr: \"Porya\", en: \"Wheelhub\", frames: 68 },\r\n { id: 8, tr: \"Braket\", en: \"Bracket\", frames: 68 },\r\n { id: 9, tr: \"G\u00f6vde\", en: \"Housing\", frames: 69 },\r\n { id: 10, tr: \"Braket\", en: \"Bracket\", frames: 68 },\r\n { id: 11, tr: \"M.F. Braket\", en: \"Multi Function Bracket\", frames: 69 },\r\n { id: 12, tr: \"G\u00fc\u00e7lendirici\", en: \"Reinforcement\", frames: 69 },\r\n { id: 13, tr: \"Haval\u0131 Fren Diski\", en: \"Ventilated Brake Disc\", frames: 35 }, \r\n { id: 14, tr: \"Rotor\", en: \" Rotor\", frames: 35 },\r\n { id: 15, tr: \"Diferansiyel Kutusu\", en: \"Differential Housing\", frames: 36 },\r\n { id: 16, tr: \"Braket\", en: \"Bracket\", frames: 69 },\r\n { id: 17, tr: \"Fren Pabucu\", en: \"Brake Shoe\", frames: 68 },\r\n { id: 18, tr: \"G\u00f6vde\", en: \"Housing\", frames: 69 },\r\n { id: 19, tr: \"Fren Pabucu\", en: \"Brake Shoe\", frames: 68 },\r\n { id: 20, tr: \"\u00d6n Support\", en: \"Front Engine Support\", frames: 68 },\r\n { id: 21, tr: \"Diferansiyel Ta\u015f\u0131y\u0131c\u0131\", en: \"Carrier Differential\", frames: 64 },\r\n { id: 22, tr: \"Tutucu\", en: \"Front Axle Suspension\", frames: 69 },\r\n { id: 23, tr: \"Braket\", en: \"Bracket\", frames: 68 },\r\n { id: 24, tr: \"Yay Braketi\", en: \"Support, Stablizer\", frames: 68 },\r\n { id: 25, tr: \"G\u00f6vde\", en: \"Housing\", frames: 69 },\r\n { id: 26, tr: \"Haval\u0131 Fren Diski\", en: \"Ventilated Brake Disc\", frames: 68 },\r\n { id: 27, tr: \"Poryal\u0131 Disk\", en: \"Hub Disc\", frames: 68 },\r\n { id: 28, tr: \"Aks Kovan\u0131\", en: \"Housing Rear Axle\", frames: 68 },\r\n { id: 29, tr: \"Karter\", en: \"Oil Pan\", frames: 68 },\r\n { id: 30, tr: \"Arka Aks G\u00f6vdesi\", en: \"Rear Axle Housing\", frames: 35 },\r\n { id: 31, tr: \"G\u00f6vde\", en: \"Housing\", frames: 35 },\r\n { id: 32, tr: \"Dif.Kovan\u0131\", en: \"Housing\", frames: 35 },\r\n { id: 33, tr: \"G\u00f6vde\", en: \"Housing\", frames: 69 },\r\n { id: 34, tr: \"Orta Yatak G\u00f6vdesi\", en: \"Center Bearing Bracket\", frames: 68 }\r\n ];\r\n \r\n const grid = document.getElementById('product-grid');\r\n \r\n productList.forEach(product => {\r\n const folderNumber = product.id.toString().padStart(2, '0'); \r\n const folderName = `ferro-dokum-${folderNumber}`;\r\n const thumbnailSrc = `${baseUrl}${folderName}\/ferro1.png`;\r\n \r\n const card = document.createElement('div');\r\n card.className = 'product-card';\r\n card.innerHTML = `\r\n <img decoding=\"async\" class=\"thumbnail\" src=\"${thumbnailSrc}\" alt=\"${product.tr}\" loading=\"lazy\">\r\n <h3>${product.tr} <span class=\"en-name\">${product.en}<\/span><\/h3>\r\n <div class=\"subtitle\">360\u00b0 \u00dcr\u00fcn \u0130zleme <br> 360\u00b0 Product View<\/div>\r\n `;\r\n card.onclick = () => openLightbox(folderName, product.tr, product.en, product.frames);\r\n grid.appendChild(card);\r\n });\r\n\r\n let currentFolder = '';\r\n let currentFrame = 1;\r\n let totalFrames = 68; \r\n let imagesArray = []; \r\n let loadedImagesCount = 0;\r\n let forceLoadTimeout; \/\/ YEN\u0130: Zaman a\u015f\u0131m\u0131 sigortas\u0131 i\u00e7in de\u011fi\u015fken\r\n \r\n let state = {\r\n isDragging: false, startX: 0, startY: 0,\r\n velocity: 0, friction: 0.92, lastTime: 0, lastX: 0,\r\n scale: 1, panning: false, pointX: 0, pointY: 0,\r\n initialPinchDist: 0, initialPinchScale: 1\r\n };\r\n \r\n const lightbox = document.getElementById('lightbox');\r\n const imgElement = document.getElementById('product-360-image');\r\n const titleTr = document.getElementById('lb-title-tr');\r\n const titleEn = document.getElementById('lb-title-en');\r\n const viewer = document.getElementById('viewer-container');\r\n const interactionLayer = document.getElementById('interaction-layer');\r\n const loadingOverlay = document.getElementById('loading-overlay');\r\n const loadingText = document.getElementById('loading-text');\r\n\r\n function openLightbox(folderName, trName, enName, framesCount) {\r\n currentFolder = folderName;\r\n currentFrame = 1;\r\n totalFrames = framesCount || 68; \r\n titleTr.innerText = trName;\r\n titleEn.innerText = enName;\r\n imagesArray = [];\r\n loadedImagesCount = 0;\r\n \r\n state.scale = 1; state.pointX = 0; state.pointY = 0; state.velocity = 0;\r\n updateTransform(); \r\n\r\n lightbox.classList.add('open');\r\n loadingOverlay.style.display = 'flex';\r\n loadingText.innerHTML = `G\u00f6rseller Y\u00fckleniyor... <br> Loading Images...`;\r\n interactionLayer.style.cursor = 'wait';\r\n\r\n \/\/ YEN\u0130: 8 saniye sigortas\u0131. Y\u00fckleme tak\u0131l\u0131rsa zorla a\u00e7ar.\r\n clearTimeout(forceLoadTimeout);\r\n forceLoadTimeout = setTimeout(() => {\r\n if (loadedImagesCount < totalFrames) {\r\n console.log(\"Ba\u011flant\u0131 yava\u015f, tak\u0131lan g\u00f6rseller atlanarak sistem zorla a\u00e7\u0131ld\u0131.\");\r\n finishLoading();\r\n }\r\n }, 8000); \/\/ 8000 milisaniye = 8 saniye\r\n\r\n for (let i = 1; i <= totalFrames; i++) {\r\n const img = new Image();\r\n img.src = `${baseUrl}${currentFolder}\/ferro${i}.png`;\r\n img.onload = onImageLoad;\r\n img.onerror = onImageLoad; \r\n imagesArray.push(img);\r\n }\r\n }\r\n\r\n function onImageLoad() {\r\n loadedImagesCount++;\r\n let percentage = Math.round((loadedImagesCount \/ totalFrames) * 100);\r\n \r\n \/\/ E\u011fer %100'\u00fc ge\u00e7mezse metni g\u00fcncelle (sigorta nedeniyle 100'\u00fc a\u015fmas\u0131n\u0131 engeller)\r\n if(percentage <= 100) {\r\n loadingText.innerHTML = `Y\u00fckleniyor \/ Loading: %${percentage}`;\r\n }\r\n\r\n if (loadedImagesCount >= totalFrames) {\r\n finishLoading(); \r\n }\r\n }\r\n\r\n \/\/ YEN\u0130: Y\u00fcklemeyi bitirme i\u015flemini ayr\u0131 bir fonksiyona ald\u0131k\r\n function finishLoading() {\r\n clearTimeout(forceLoadTimeout); \/\/ Y\u00fckleme bittiyse sayac\u0131 durdur\r\n loadingOverlay.style.display = 'none';\r\n interactionLayer.style.cursor = 'ew-resize';\r\n updateImage();\r\n startInertiaLoop(); \r\n }\r\n\r\n document.getElementById('lightbox-close').onclick = closeLightbox;\r\n lightbox.onclick = (e) => { if(e.target === lightbox) closeLightbox(); }; \r\n\r\n function closeLightbox() {\r\n lightbox.classList.remove('open');\r\n clearTimeout(forceLoadTimeout); \/\/ \u00c7\u0131k\u0131\u015f yap\u0131ld\u0131\u011f\u0131nda sayac\u0131 durdur\r\n imagesArray = []; \r\n imgElement.src = ''; \r\n stopInertiaLoop();\r\n }\r\n\r\n function updateImage() {\r\n if (imagesArray.length > 0 && imagesArray[currentFrame - 1]) {\r\n imgElement.src = imagesArray[currentFrame - 1].src;\r\n }\r\n }\r\n\r\n function updateTransform() {\r\n if (state.scale > 1) {\r\n const vRect = viewer.getBoundingClientRect();\r\n const iRect = imgElement.getBoundingClientRect();\r\n state.pointX = Math.min(0, Math.max(state.pointX, vRect.width - iRect.width \/ state.scale * state.scale)); \r\n if(state.pointX > 0) state.pointX = 0;\r\n if(state.pointY > 0) state.pointY = 0;\r\n } else { state.pointX = 0; state.pointY = 0; }\r\n imgElement.style.transform = `translate(${state.pointX}px, ${state.pointY}px) scale(${state.scale})`;\r\n }\r\n\r\n let inertiaAnimationId;\r\n function startInertiaLoop() { if (!inertiaAnimationId) inertiaAnimationId = requestAnimationFrame(inertiaTick); }\r\n function stopInertiaLoop() { cancelAnimationFrame(inertiaAnimationId); inertiaAnimationId = null; }\r\n\r\n function inertiaTick() {\r\n if (lightbox.classList.contains('open') && !state.isDragging && Math.abs(state.velocity) > 0.1) {\r\n state.velocity *= state.friction;\r\n const frameChange = Math.round(state.velocity);\r\n if (frameChange !== 0) {\r\n currentFrame -= frameChange;\r\n while (currentFrame > totalFrames) currentFrame -= totalFrames;\r\n while (currentFrame < 1) currentFrame += totalFrames;\r\n updateImage();\r\n }\r\n }\r\n inertiaAnimationId = requestAnimationFrame(inertiaTick);\r\n }\r\n\r\n const handleStart = (x, y) => {\r\n state.isDragging = true; state.startX = x; state.startY = y;\r\n state.lastX = x; state.lastTime = performance.now();\r\n if (state.scale > 1) state.panning = true; else state.velocity = 0; \r\n };\r\n\r\n const handleMove = (x, y) => {\r\n if (!state.isDragging) return;\r\n const dx = x - state.startX;\r\n if (state.scale > 1 && state.panning) {\r\n interactionLayer.style.cursor = 'grabbing';\r\n state.pointX += x - state.lastX; state.pointY += y - state.lastY;\r\n updateTransform();\r\n } else {\r\n interactionLayer.style.cursor = 'ew-resize';\r\n const sensitivity = 8; \r\n if (Math.abs(dx) > sensitivity) {\r\n const framesToMove = Math.floor(dx \/ sensitivity);\r\n if (framesToMove !== 0) {\r\n currentFrame -= framesToMove;\r\n while (currentFrame > totalFrames) currentFrame -= totalFrames;\r\n while (currentFrame < 1) currentFrame += totalFrames;\r\n updateImage();\r\n const now = performance.now(); const dt = now - state.lastTime;\r\n if (dt > 0) state.velocity = (x - state.lastX) \/ dt * 10; \r\n state.startX = x; state.lastTime = now;\r\n }\r\n }\r\n }\r\n state.lastX = x; state.lastY = y;\r\n };\r\n\r\n const handleEnd = () => {\r\n state.isDragging = false; state.panning = false;\r\n interactionLayer.style.cursor = state.scale > 1 ? 'grab' : 'ew-resize';\r\n };\r\n\r\n interactionLayer.addEventListener('mousedown', (e) => { e.preventDefault(); handleStart(e.pageX, e.pageY); });\r\n window.addEventListener('mousemove', (e) => handleMove(e.pageX, e.pageY));\r\n window.addEventListener('mouseup', handleEnd);\r\n\r\n viewer.addEventListener('wheel', (e) => {\r\n if (!lightbox.classList.contains('open')) return;\r\n e.preventDefault();\r\n const xs = (e.pageX - state.pointX) \/ state.scale, ys = (e.pageY - state.pointY) \/ state.scale;\r\n const newScale = e.deltaY > 0 ? state.scale - 0.2 : state.scale + 0.2;\r\n state.scale = Math.min(Math.max(1, newScale), 4);\r\n state.pointX = e.pageX - xs * state.scale; state.pointY = e.pageY - ys * state.scale;\r\n updateTransform();\r\n interactionLayer.style.cursor = state.scale > 1 ? 'grab' : 'ew-resize';\r\n }, { passive: false });\r\n\r\n const getTouchDist = (touches) => Math.hypot(touches[0].pageX - touches[1].pageX, touches[0].pageY - touches[1].pageY);\r\n\r\n interactionLayer.addEventListener('touchstart', (e) => {\r\n if (e.touches.length === 1) handleStart(e.touches[0].pageX, e.touches[0].pageY);\r\n else if (e.touches.length === 2) { state.isDragging = false; state.initialPinchDist = getTouchDist(e.touches); state.initialPinchScale = state.scale; }\r\n }, { passive: false });\r\n\r\n interactionLayer.addEventListener('touchmove', (e) => {\r\n e.preventDefault(); \r\n if (e.touches.length === 1) handleMove(e.touches[0].pageX, e.touches[0].pageY);\r\n else if (e.touches.length === 2) {\r\n state.scale = Math.min(Math.max(1, state.initialPinchScale * (getTouchDist(e.touches) \/ state.initialPinchDist)), 4);\r\n updateTransform();\r\n }\r\n }, { passive: false });\r\n\r\n interactionLayer.addEventListener('touchend', (e) => {\r\n if (e.touches.length === 0) handleEnd();\r\n else if (e.touches.length === 1) { state.startX = e.touches[0].pageX; state.startY = e.touches[0].pageY; state.isDragging = true; }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ferro D\u00f6k\u00fcm Pro – 360\u00b0 \u00dcr\u00fcn Katalo\u011fu \/ Product Catalog Ferro D\u00f6k\u00fcm PRO – 360\u00b0 \u00dcr\u00fcn Katalo\u011fu 360\u00b0 Product Catalog × \u00dcr\u00fcn Product G\u00f6rseller Y\u00fckleniyor… Loading Images… 🔄 D\u00f6nd\u00fcr (S\u00fcr\u00fckle) \/ Rotate (Drag) 🔍 Zoom (Tekerlek \/ Scroll – Pinch)<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3995","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/pages\/3995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/comments?post=3995"}],"version-history":[{"count":67,"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/pages\/3995\/revisions"}],"predecessor-version":[{"id":4201,"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/pages\/3995\/revisions\/4201"}],"wp:attachment":[{"href":"https:\/\/www.ferrodokum.com.tr\/en\/wp-json\/wp\/v2\/media?parent=3995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}