{"id":140,"date":"2026-02-22T16:02:29","date_gmt":"2026-02-22T16:02:29","guid":{"rendered":"https:\/\/www.bazform.com\/?page_id=140"},"modified":"2026-02-22T19:04:17","modified_gmt":"2026-02-22T19:04:17","slug":"blok-configurator","status":"publish","type":"page","link":"https:\/\/www.bazform.com\/index.php\/blok-configurator\/","title":{"rendered":"BLOK CONFIGURATOR"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Configurator<\/p>\n\n\n\n<!-- BAZFORM \u2014 BLOK CONFIGURATOR (TEK PAR\u00c7A \/ Ba\u015ftan) -->\n<script type=\"module\" src=\"https:\/\/unpkg.com\/@google\/model-viewer\/dist\/model-viewer.min.js\"><\/script>\n\n<style>\n  :root{\n    --bg:#ffffff;\n    --text:#0b1220;\n    --muted:#6b7280;\n    --line:rgba(0,0,0,.08);\n    --card:#9aa0a6;\n    --panel:#ffffff;\n    --shadow:0 18px 50px rgba(0,0,0,.08);\n    --radius:22px;\n    --chipLine:rgba(0,0,0,.18);\n    --chipBg:#ffffff;\n    --chipActive:#0b0b0c;\n    --chipActiveText:#ffffff;\n    --btn:#0b0b0c;\n    --btnText:#ffffff;\n  }\n\n  .bf-wrap{\n    max-width: 1180px;\n    margin: 0 auto;\n    padding: 28px 18px 60px;\n    color: var(--text);\n    font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Inter,Helvetica,Arial,sans-serif;\n  }\n\n  .bf-head{ margin-bottom: 18px; }\n  .bf-title{ font-size: 34px; letter-spacing: -0.02em; margin:0; }\n  .bf-sub{ margin: 6px 0 0; color: var(--muted); font-size: 14px; }\n\n  .bf-grid{\n    display:grid;\n    grid-template-columns: 1.2fr .9fr;\n    gap: 26px;\n    align-items:start;\n  }\n\n  \/* LEFT *\/\n  .bf-viewer{\n    display:grid;\n    grid-template-columns: 1fr .52fr;\n    gap: 16px;\n    align-items:start;\n  }\n\n  .bf-card{\n    background: var(--card);\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n    overflow:hidden;\n    position:relative;\n    transition: opacity .45s ease, transform .55s cubic-bezier(.2,.9,.2,1);\n  }\n  .bf-card.big{ height: 520px; }\n  .bf-card.small{ height: 280px; align-self:start; opacity:.95; }\n\n  model-viewer{ width:100%; height:100%; background:transparent; }\n\n  .bf-card::after{\n    content:\"\";\n    position:absolute;\n    inset:0;\n    border-radius: var(--radius);\n    pointer-events:none;\n    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);\n  }\n\n  \/* Size se\u00e7imine g\u00f6re: se\u00e7ilmeyen kart fade *\/\n  .bf-size-state[data-size=\"15\"] .bf-card.small{ opacity:0; transform: translateY(14px) scale(.98); pointer-events:none; }\n  .bf-size-state[data-size=\"30\"] .bf-card.big  { opacity:0; transform: translateY(14px) scale(.98); pointer-events:none; }\n\n  \/* RIGHT PANEL *\/\n  .bf-panel{\n    background: var(--panel);\n    border: 1px solid var(--line);\n    border-radius: 26px;\n    box-shadow: 0 18px 50px rgba(0,0,0,.06);\n    padding: 22px 20px;\n\n    \/* Sa\u011f men\u00fc kendi i\u00e7inde kayacak *\/\n    max-height: calc(100vh - 160px);\n    overflow: auto;\n    scroll-behavior: smooth;\n  }\n\n  .bf-productName{\n    font-size: 40px;\n    margin: 4px 0 2px;\n    letter-spacing: -0.03em;\n  }\n  .bf-price{ margin:0 0 18px; color: var(--muted); font-size: 18px; }\n\n  .bf-step{\n    padding: 18px 0;\n    border-top: 1px solid var(--line);\n    scroll-margin-top: 18px;\n  }\n  .bf-step:first-of-type{ border-top:none; padding-top: 8px; }\n  .bf-stepTitle{\n    font-size: 12px;\n    letter-spacing: .18em;\n    font-weight: 700;\n    color: rgba(11,18,32,.62);\n    margin: 0 0 10px;\n  }\n  .bf-hint{ margin:10px 0 0; color: var(--muted); font-size: 13px; line-height:1.45; }\n\n  .bf-chips{ display:flex; flex-wrap:wrap; gap:10px; }\n  .bf-chip{\n    border: 1px solid var(--chipLine);\n    background: var(--chipBg);\n    color: var(--text);\n    border-radius: 999px;\n    padding: 10px 14px;\n    font-size: 14px;\n    cursor:pointer;\n    user-select:none;\n    transition: transform .08s ease, background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;\n  }\n  .bf-chip:active{ transform: scale(.98); }\n  .bf-chip[aria-pressed=\"true\"]{\n    background: var(--chipActive);\n    color: var(--chipActiveText);\n    border-color: var(--chipActive);\n  }\n\n  .bf-select{\n    width:100%;\n    border: 1px solid var(--line);\n    border-radius: 14px;\n    padding: 12px 14px;\n    font-size: 14px;\n    background:#fff;\n    outline:none;\n  }\n\n  .bf-btn{\n    width:100%;\n    border:none;\n    border-radius: 999px;\n    padding: 14px 16px;\n    font-size: 16px;\n    background: var(--btn);\n    color: var(--btnText);\n    cursor:pointer;\n    transition: transform .08s ease, opacity .2s ease;\n  }\n  .bf-btn:active{ transform: scale(.99); }\n\n  .bf-summary{ margin-top:10px; color: var(--muted); font-size: 13px; }\n\n  \/* ADIM ADIM G\u00d6R\u00dcN\u00dcRL\u00dcK: sadece aktif ad\u0131m g\u00f6sterilsin *\/\n  .bf-step[data-visible=\"0\"]{ display:none; }\n\n  @media (max-width: 980px){\n    .bf-grid{ grid-template-columns: 1fr; }\n    .bf-viewer{ grid-template-columns: 1fr; }\n    .bf-card.big{ height: 460px; }\n    .bf-card.small{ display:none; }\n    .bf-panel{ max-height: none; }\n  }\n<\/style>\n\n<div class=\"bf-wrap\">\n  <div class=\"bf-head\">\n    <h1 class=\"bf-title\">BLOK CONFIGURATOR<\/h1>\n    <p class=\"bf-sub\">Se\u00e7im yapt\u0131k\u00e7a sa\u011f panel ad\u0131m ad\u0131m ilerler (panel kayar).<\/p>\n  <\/div>\n\n  <div class=\"bf-grid bf-size-state\" id=\"bfRoot\" data-size=\"15\">\n    <!-- LEFT -->\n    <div class=\"bf-viewer\">\n      <div class=\"bf-card big\">\n        <model-viewer id=\"mvBig\"\n          src=\"\"\n          camera-controls\n          touch-action=\"pan-y\"\n          exposure=\"1\"\n          shadow-intensity=\"0.6\"\n          ar\n          ar-modes=\"webxr scene-viewer quick-look\"\n          alt=\"Bazform BLOK\">\n        <\/model-viewer>\n      <\/div>\n\n      <div class=\"bf-card small\">\n        <model-viewer id=\"mvSmall\"\n          src=\"\"\n          camera-controls\n          touch-action=\"pan-y\"\n          exposure=\"1\"\n          shadow-intensity=\"0.6\"\n          ar\n          ar-modes=\"webxr scene-viewer quick-look\"\n          alt=\"Bazform BLOK small\">\n        <\/model-viewer>\n      <\/div>\n    <\/div>\n\n    <!-- RIGHT -->\n    <aside class=\"bf-panel\" id=\"bfPanel\">\n      <div style=\"padding-bottom:10px;\">\n        <div class=\"bf-productName\">BLOK<\/div>\n        <div class=\"bf-price\" id=\"bfPrice\">2500 TL<\/div>\n      <\/div>\n\n      <!-- STEP 1: SIZE -->\n      <section class=\"bf-step\" id=\"stepSize\" data-step=\"size\" data-visible=\"1\">\n        <div class=\"bf-stepTitle\">SIZE<\/div>\n        <div class=\"bf-chips\">\n          <button class=\"bf-chip\" type=\"button\" data-size=\"15\" aria-pressed=\"true\">15 cm<\/button>\n          <button class=\"bf-chip\" type=\"button\" data-size=\"30\" aria-pressed=\"false\">30 cm<\/button>\n        <\/div>\n        <p class=\"bf-hint\">Se\u00e7im yapt\u0131ktan sonra otomatik bir sonraki ad\u0131ma ge\u00e7ece\u011fiz.<\/p>\n      <\/section>\n\n      <!-- STEP 2: BASE COLOR -->\n      <section class=\"bf-step\" id=\"stepBase\" data-step=\"base\" data-visible=\"0\">\n        <div class=\"bf-stepTitle\">BASE COLOR<\/div>\n        <div class=\"bf-chips\">\n          <button class=\"bf-chip\" type=\"button\" data-base=\"BLACK\" aria-pressed=\"true\">Black<\/button>\n          <button class=\"bf-chip\" type=\"button\" data-base=\"BROWN\" aria-pressed=\"false\">Brown<\/button>\n          <button class=\"bf-chip\" type=\"button\" data-base=\"YELLOW\" aria-pressed=\"false\">Yellow<\/button>\n          <button class=\"bf-chip\" type=\"button\" data-base=\"RED\" aria-pressed=\"false\">Red<\/button>\n        <\/div>\n      <\/section>\n\n      <!-- STEP 3: SHADE -->\n      <section class=\"bf-step\" id=\"stepShade\" data-step=\"shade\" data-visible=\"0\">\n        <div class=\"bf-stepTitle\">SHADE<\/div>\n        <select class=\"bf-select\" id=\"shadeSelect\">\n          <option value=\"NONE\">\u0130stemiyorum<\/option>\n          <option value=\"AMBER\">Amber<\/option>\n          <option value=\"SMOKE\">Smoke<\/option>\n          <option value=\"WHITE\">White<\/option>\n        <\/select>\n        <p class=\"bf-hint\">Shade\u2019ler ayr\u0131ca ayr\u0131 \u00fcr\u00fcn olarak da sat\u0131labilir.<\/p>\n      <\/section>\n\n      <!-- STEP 4: FINISH -->\n      <section class=\"bf-step\" id=\"stepFinish\" data-step=\"finish\" data-visible=\"0\">\n        <div class=\"bf-stepTitle\">FINISH<\/div>\n        <button class=\"bf-btn\" id=\"finishBtn\" type=\"button\">Al\u0131\u015fveri\u015fi tamamla<\/button>\n        <div class=\"bf-summary\" id=\"bfSummary\"><\/div>\n      <\/section>\n    <\/aside>\n  <\/div>\n<\/div>\n\n<script>\n(() => {\n  \/\/ =========================\n  \/\/ GLB LINK (BURAYI DE\u011e\u0130\u015eT\u0130R)\n  \/\/ =========================\n  const MODEL_URL = \"https:\/\/www.bazform.com\/wp-content\/uploads\/BLOKglb.glb\";\n\n  \/\/ =========================\n  \/\/ STATE\n  \/\/ =========================\n  const state = {\n    size: \"15\",\n    base: \"BLACK\",\n    shade: \"NONE\",\n  };\n\n  const root   = document.getElementById(\"bfRoot\");\n  const panel  = document.getElementById(\"bfPanel\");\n  const mvBig  = document.getElementById(\"mvBig\");\n  const mvSmall= document.getElementById(\"mvSmall\");\n\n  mvBig.src   = MODEL_URL;\n  mvSmall.src = MODEL_URL;\n\n  const stepSize   = document.getElementById(\"stepSize\");\n  const stepBase   = document.getElementById(\"stepBase\");\n  const stepShade  = document.getElementById(\"stepShade\");\n  const stepFinish = document.getElementById(\"stepFinish\");\n\n  const shadeSelect = document.getElementById(\"shadeSelect\");\n  const summaryEl   = document.getElementById(\"bfSummary\");\n  const finishBtn   = document.getElementById(\"finishBtn\");\n\n  \/\/ =========================\n  \/\/ HELPERS\n  \/\/ =========================\n  function setVisible(stepEl, yes){\n    stepEl.setAttribute(\"data-visible\", yes ? \"1\" : \"0\");\n  }\n\n  function scrollPanelTo(stepEl){\n    \/\/ Panel i\u00e7i kayma\n    const top = stepEl.offsetTop - 10;\n    panel.scrollTo({ top, behavior: \"smooth\" });\n  }\n\n  function setPressed(selector, attr, value){\n    document.querySelectorAll(selector).forEach(btn => {\n      const on = btn.getAttribute(attr) === value;\n      btn.setAttribute(\"aria-pressed\", on ? \"true\" : \"false\");\n    });\n  }\n\n  function applySizeVisual(){\n    root.setAttribute(\"data-size\", state.size);\n  }\n\n  \/\/ placeholder: base se\u00e7imi \u201chissettirsin\u201d diye minik exposure fark\u0131\n  function applyBaseFeedback(){\n    const map = { BLACK: 0.95, BROWN: 1.0, YELLOW: 1.05, RED: 1.02 };\n    const e = map[state.base] ?? 1.0;\n    mvBig.exposure   = String(e);\n    mvSmall.exposure = String(e);\n  }\n\n  function updateSummary(){\n    const shadeText = (state.shade === \"NONE\") ? \"Shade yok\" : `Shade: ${state.shade}`;\n    summaryEl.textContent = `Se\u00e7im: ${state.size} cm \u2022 Base: ${state.base} \u2022 ${shadeText}`;\n  }\n\n  \/\/ Wizard ak\u0131\u015f\u0131: bir sonraki step'i a\u00e7 + paneli kayd\u0131r\n  function goToBase(){\n    setVisible(stepBase, true);\n    scrollPanelTo(stepBase);\n  }\n  function goToShade(){\n    setVisible(stepShade, true);\n    scrollPanelTo(stepShade);\n  }\n  function goToFinish(){\n    setVisible(stepFinish, true);\n    scrollPanelTo(stepFinish);\n  }\n\n  \/\/ Init\n  applySizeVisual();\n  applyBaseFeedback();\n  updateSummary();\n\n  \/\/ =========================\n  \/\/ EVENTS\n  \/\/ =========================\n\n  \/\/ SIZE\n  stepSize.querySelectorAll(\"[data-size]\").forEach(btn => {\n    btn.addEventListener(\"click\", () => {\n      const v = btn.dataset.size;\n      state.size = v;\n\n      setPressed('#stepSize [data-size]', \"data-size\", v);\n      applySizeVisual();\n\n      \/\/ bir sonraki ad\u0131m\u0131 a\u00e7 ve kayd\u0131r\n      goToBase();\n      updateSummary();\n    });\n  });\n\n  \/\/ BASE\n  stepBase.querySelectorAll(\"[data-base]\").forEach(btn => {\n    btn.addEventListener(\"click\", () => {\n      const v = btn.dataset.base;\n      state.base = v;\n\n      setPressed('#stepBase [data-base]', \"data-base\", v);\n      applyBaseFeedback();\n\n      \/\/ bir sonraki ad\u0131m\u0131 a\u00e7 ve kayd\u0131r\n      goToShade();\n      updateSummary();\n    });\n  });\n\n  \/\/ SHADE\n  shadeSelect.addEventListener(\"change\", () => {\n    state.shade = shadeSelect.value;\n\n    \/\/ finish'i a\u00e7 ve kayd\u0131r\n    goToFinish();\n    updateSummary();\n  });\n\n  \/\/ FINISH (\u015fimdilik checkout)\n  finishBtn.addEventListener(\"click\", () => {\n    window.location.href = \"\/checkout\/\";\n  });\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Configurator BLOK CONFIGURATOR Se\u00e7im yapt\u0131k\u00e7a sa\u011f panel ad\u0131m ad\u0131m ilerler (panel kayar). BLOK 2500 TL SIZE 15 cm 30 cm [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-140","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.bazform.com\/index.php\/wp-json\/wp\/v2\/pages\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bazform.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bazform.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bazform.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bazform.com\/index.php\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":6,"href":"https:\/\/www.bazform.com\/index.php\/wp-json\/wp\/v2\/pages\/140\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/www.bazform.com\/index.php\/wp-json\/wp\/v2\/pages\/140\/revisions\/167"}],"wp:attachment":[{"href":"https:\/\/www.bazform.com\/index.php\/wp-json\/wp\/v2\/media?parent=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}