{"id":30810,"date":"2026-04-16T20:35:31","date_gmt":"2026-04-16T17:35:31","guid":{"rendered":"https:\/\/zelglobal.com\/?page_id=30810"},"modified":"2026-04-16T20:43:06","modified_gmt":"2026-04-16T17:43:06","slug":"product-catalog","status":"publish","type":"page","link":"https:\/\/zelglobal.com\/en\/urun-katalogu\/","title":{"rendered":"Product Catalog"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"30810\" class=\"elementor elementor-30810\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-1694db7 e-flex e-con-boxed e-con e-parent\" data-id=\"1694db7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-815c8fe elementor-widget elementor-widget-html\" data-id=\"815c8fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Urbanist:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<div class=\"zel-flipbook-wrap\">\n  <div class=\"zel-flipbook-box\">\n    <div class=\"zel-flipbook-toolbar\">\n      <button type=\"button\" id=\"prevSpread\">\u00d6nceki<\/button>\n      <div class=\"zel-page-indicator\">\n        <span id=\"spreadLabel\">Y\u00fckleniyor...<\/span>\n      <\/div>\n      <button type=\"button\" id=\"nextSpread\">Sonraki<\/button>\n      <a class=\"zel-download-btn\" href=\"https:\/\/zelglobal.com\/wp-content\/uploads\/2026\/01\/fuar-katalog.pdf\" target=\"_blank\" rel=\"noopener\">\n        PDF \u0130ndir\n      <\/a>\n    <\/div>\n\n    <div class=\"zel-book-stage\">\n      <div class=\"zel-book-shadow\"><\/div>\n\n      <div class=\"zel-book\" id=\"zelBook\">\n        <div class=\"zel-page left-page\">\n          <canvas id=\"leftCanvas\"><\/canvas>\n        <\/div>\n        <div class=\"zel-page right-page\">\n          <canvas id=\"rightCanvas\"><\/canvas>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n  .zel-flipbook-wrap{\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 20px;\n    font-family: 'Urbanist', sans-serif;\n    color: #2f2f2f;\n  }\n\n  .zel-flipbook-box{\n    background:#fff;\n    border:1px solid #ececec;\n    border-radius:24px;\n    overflow:hidden;\n    box-shadow:0 10px 30px rgba(0,0,0,.04);\n  }\n\n  .zel-flipbook-toolbar{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    gap:14px;\n    padding:18px 20px;\n    border-bottom:1px solid #efefef;\n    background:#fcfcfb;\n    flex-wrap:wrap;\n  }\n\n  .zel-flipbook-toolbar button,\n  .zel-download-btn{\n    min-height:48px;\n    padding:12px 22px;\n    border:none;\n    border-radius:999px;\n    background:#96bf2d;\n    color:#fff !important;\n    font-family:'Urbanist', sans-serif;\n    font-size:16px;\n    font-weight:700;\n    cursor:pointer;\n    transition:all .25s ease;\n    text-decoration:none !important;\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    line-height:1;\n  }\n\n  .zel-flipbook-toolbar button:hover,\n  .zel-download-btn:hover{\n    background:#88ac2a;\n  }\n\n  .zel-flipbook-toolbar button:disabled{\n    opacity:.45;\n    cursor:not-allowed;\n  }\n\n  .zel-page-indicator{\n    min-width:170px;\n    text-align:center;\n    font-size:16px;\n    font-weight:600;\n    color:#666;\n  }\n\n  .zel-book-stage{\n    position:relative;\n    padding:26px 18px 30px;\n    background:\n      radial-gradient(circle at top left, rgba(150,191,45,.06), transparent 28%),\n      linear-gradient(180deg, #fafaf8 0%, #f4f4f1 100%);\n    overflow:hidden;\n  }\n\n  .zel-book-shadow{\n    position:absolute;\n    left:50%;\n    bottom:18px;\n    transform:translateX(-50%);\n    width:min(900px, 88%);\n    height:26px;\n    background:radial-gradient(ellipse at center, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) 72%);\n    filter:blur(10px);\n    pointer-events:none;\n  }\n\n  .zel-book{\n    position:relative;\n    width:100%;\n    max-width:1100px;\n    margin:0 auto;\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    background:#d7c7a7;\n    border-radius:12px;\n    overflow:hidden;\n    box-shadow:\n      0 18px 36px rgba(0,0,0,.10),\n      inset 0 0 0 1px rgba(0,0,0,.05);\n  }\n\n  .zel-book::before{\n    content:\"\";\n    position:absolute;\n    top:0;\n    bottom:0;\n    left:50%;\n    width:16px;\n    transform:translateX(-50%);\n    background:\n      linear-gradient(90deg,\n        rgba(0,0,0,.16) 0%,\n        rgba(255,255,255,.16) 20%,\n        rgba(0,0,0,.08) 48%,\n        rgba(255,255,255,.16) 70%,\n        rgba(0,0,0,.16) 100%);\n    z-index:2;\n    pointer-events:none;\n  }\n\n  .zel-page{\n    background:#fff;\n    display:flex;\n    align-items:flex-start;\n    justify-content:center;\n    position:relative;\n    overflow:hidden;\n    min-width:0;\n  }\n\n  .zel-page canvas{\n    width:100%;\n    height:auto;\n    display:block;\n    background:#fff;\n  }\n\n  .left-page{\n    border-right:1px solid #eee7d8;\n  }\n\n  .right-page{\n    border-left:1px solid #f5f1e8;\n  }\n\n  .zel-page.is-empty{\n    min-height:300px;\n    background:linear-gradient(180deg, #fbfbfb 0%, #f6f6f6 100%);\n  }\n\n  .zel-page.is-empty::after{\n    content:\"Sayfa yok\";\n    color:#aaa;\n    font-size:16px;\n    font-weight:600;\n    margin-top:40px;\n  }\n\n  @media (max-width: 991px){\n    .zel-flipbook-wrap{\n      padding:16px;\n    }\n  }\n\n  @media (max-width: 767px){\n    .zel-flipbook-wrap{\n      padding:12px;\n    }\n\n    .zel-flipbook-toolbar{\n      gap:10px;\n      padding:14px;\n    }\n\n    .zel-page-indicator{\n      width:100%;\n      min-width:0;\n      order:4;\n    }\n\n    .zel-book{\n      grid-template-columns:1fr;\n      max-width:700px;\n    }\n\n    .zel-book::before{\n      display:none;\n    }\n\n    .right-page{\n      display:none;\n    }\n\n    .left-page{\n      border-right:none;\n    }\n  }\n<\/style>\n\n<script type=\"module\">\n  import * as pdfjsLib from 'https:\/\/cdn.jsdelivr.net\/npm\/pdfjs-dist@4.0.269\/build\/pdf.min.mjs';\n\n  pdfjsLib.GlobalWorkerOptions.workerSrc =\n    'https:\/\/cdn.jsdelivr.net\/npm\/pdfjs-dist@4.0.269\/build\/pdf.worker.min.mjs';\n\n  const pdfUrl = 'https:\/\/zelglobal.com\/wp-content\/uploads\/2026\/01\/fuar-katalog.pdf';\n\n  const leftCanvas = document.getElementById('leftCanvas');\n  const rightCanvas = document.getElementById('rightCanvas');\n  const leftPageWrap = leftCanvas.closest('.zel-page');\n  const rightPageWrap = rightCanvas.closest('.zel-page');\n  const book = document.getElementById('zelBook');\n\n  const prevBtn = document.getElementById('prevSpread');\n  const nextBtn = document.getElementById('nextSpread');\n  const spreadLabel = document.getElementById('spreadLabel');\n\n  let pdfDoc = null;\n  let currentLeftPage = 1;\n  let rendering = false;\n\n  function getPageTargetWidth() {\n    const mobile = window.innerWidth <= 767;\n    const bookWidth = book.clientWidth || 1000;\n\n    if (mobile) {\n      return Math.floor(bookWidth);\n    }\n\n    return Math.floor(bookWidth \/ 2);\n  }\n\n  async function renderPageToCanvas(pageNumber, canvas, wrap) {\n    const ctx = canvas.getContext('2d');\n\n    if (!pageNumber || pageNumber > pdfDoc.numPages) {\n      canvas.width = 1;\n      canvas.height = 1;\n      canvas.style.width = '100%';\n      canvas.style.height = 'auto';\n      ctx.clearRect(0, 0, 1, 1);\n      wrap.classList.add('is-empty');\n      return;\n    }\n\n    wrap.classList.remove('is-empty');\n\n    const page = await pdfDoc.getPage(pageNumber);\n    const unscaled = page.getViewport({ scale: 1 });\n\n    const targetWidth = getPageTargetWidth();\n    const scale = targetWidth \/ unscaled.width;\n    const viewport = page.getViewport({ scale });\n\n    const outputScale = window.devicePixelRatio || 1;\n\n    canvas.width = Math.floor(viewport.width * outputScale);\n    canvas.height = Math.floor(viewport.height * outputScale);\n    canvas.style.width = '100%';\n    canvas.style.height = 'auto';\n\n    const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;\n\n    await page.render({\n      canvasContext: ctx,\n      viewport,\n      transform\n    }).promise;\n  }\n\n  async function renderSpread() {\n    if (!pdfDoc || rendering) return;\n\n    rendering = true;\n\n    try {\n      const mobile = window.innerWidth <= 767;\n      const leftPage = currentLeftPage;\n      const rightPage = mobile ? null : currentLeftPage + 1;\n\n      await renderPageToCanvas(leftPage, leftCanvas, leftPageWrap);\n      await renderPageToCanvas(rightPage, rightCanvas, rightPageWrap);\n\n      if (mobile) {\n        spreadLabel.textContent = `Sayfa ${leftPage} \/ ${pdfDoc.numPages}`;\n      } else {\n        const rightText = rightPage && rightPage <= pdfDoc.numPages ? rightPage : '-';\n        spreadLabel.textContent = `Sayfa ${leftPage} - ${rightText} \/ ${pdfDoc.numPages}`;\n      }\n\n      prevBtn.disabled = currentLeftPage <= 1;\n      nextBtn.disabled = mobile\n        ? currentLeftPage >= pdfDoc.numPages\n        : currentLeftPage + 1 >= pdfDoc.numPages;\n    } finally {\n      rendering = false;\n    }\n  }\n\n  prevBtn.addEventListener('click', async () => {\n    const step = window.innerWidth <= 767 ? 1 : 2;\n    currentLeftPage = Math.max(1, currentLeftPage - step);\n    await renderSpread();\n  });\n\n  nextBtn.addEventListener('click', async () => {\n    const step = window.innerWidth <= 767 ? 1 : 2;\n    const maxLeft = window.innerWidth <= 767\n      ? pdfDoc.numPages\n      : (pdfDoc.numPages % 2 === 0 ? pdfDoc.numPages - 1 : pdfDoc.numPages);\n\n    currentLeftPage = Math.min(maxLeft, currentLeftPage + step);\n    await renderSpread();\n  });\n\n  let resizeTimer = null;\n  window.addEventListener('resize', () => {\n    clearTimeout(resizeTimer);\n    resizeTimer = setTimeout(() => {\n      renderSpread();\n    }, 200);\n  });\n\n  async function initFlipbook() {\n    try {\n      pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;\n      await renderSpread();\n    } catch (err) {\n      spreadLabel.textContent = 'PDF y\u00fcklenemedi';\n      console.error(err);\n    }\n  }\n\n  initFlipbook();\n<\/script>\t\t\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>\u00d6nceki Y\u00fckleniyor&#8230; Sonraki PDF \u0130ndir<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-30810","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zelglobal.com\/en\/wp-json\/wp\/v2\/pages\/30810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zelglobal.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zelglobal.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zelglobal.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/zelglobal.com\/en\/wp-json\/wp\/v2\/comments?post=30810"}],"version-history":[{"count":19,"href":"https:\/\/zelglobal.com\/en\/wp-json\/wp\/v2\/pages\/30810\/revisions"}],"predecessor-version":[{"id":30830,"href":"https:\/\/zelglobal.com\/en\/wp-json\/wp\/v2\/pages\/30810\/revisions\/30830"}],"wp:attachment":[{"href":"https:\/\/zelglobal.com\/en\/wp-json\/wp\/v2\/media?parent=30810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}