{"id":2187,"date":"2025-08-27T16:41:57","date_gmt":"2025-08-27T13:41:57","guid":{"rendered":"https:\/\/www.gizir.com\/?page_id=2187"},"modified":"2026-04-30T17:00:13","modified_gmt":"2026-04-30T14:00:13","slug":"visualizer","status":"publish","type":"page","link":"https:\/\/www.gizir.com\/ru\/visualizer\/","title":{"rendered":"\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2187\" class=\"elementor elementor-2187\" data-elementor-settings=\"{&quot;element_pack_global_tooltip_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true}}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-988de01 e-con-full e-flex e-con e-parent\" data-id=\"988de01\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-42b6c6a elementor-widget elementor-widget-html\" data-id=\"42b6c6a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- === Gizir \u2013 Brand Picker + Color Selector | Clean Final Version === -->\r\n\r\n<style>\r\n\/* =========================================================\r\n   GIZIR VISUALIZER \u2013 CLEAN FINAL\r\n   Desktop + Tablet + Mobile\r\n========================================================= *\/\r\n\r\ndiv#gfWrap{\r\n  max-height:100vh !important;\r\n}\r\n\r\ndiv#wrapper-navbar{\r\n  z-index:99999 !important;\r\n}\r\n\r\n\/* ---------- Scene ---------- *\/\r\n\r\n.gf-wrap{\r\n  position:relative;\r\n  overflow:hidden;\r\n  background:#f5f5f5;\r\n}\r\n\r\n.gf-stage{\r\n  position:relative;\r\n  aspect-ratio:16\/9;\r\n  z-index:1;\r\n}\r\n\r\n.gf-stage .layer{\r\n  position:absolute;\r\n  inset:0;\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n  opacity:0;\r\n  transition:opacity .45s ease;\r\n  will-change:opacity;\r\n}\r\n\r\n.gf-stage .layer.active{\r\n  opacity:1;\r\n}\r\n\r\n\/* ---------- Brand Screen ---------- *\/\r\n\r\n.brand-screen{\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:20;\r\n  display:grid;\r\n  grid-template-columns:repeat(4,1fr);\r\n  background:#111;\r\n}\r\n\r\n.brand-screen::before{\r\n  content:\"Select a collection to start visualizing\";\r\n  position:absolute;\r\n  top:112px;\r\n  left:50%;\r\n  transform:translateX(-50%);\r\n  z-index:6;\r\n  color:rgba(255,255,255,.92);\r\n  font-size:12px;\r\n  font-weight:500;\r\n  letter-spacing:.08em;\r\n  text-transform:uppercase;\r\n  padding:8px 18px;\r\n  border-radius:999px;\r\n  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));\r\n  backdrop-filter:blur(18px) saturate(1.15);\r\n  -webkit-backdrop-filter:blur(18px) saturate(1.15);\r\n  border:1px solid rgba(255,255,255,.24);\r\n  box-shadow:\r\n    0 14px 40px rgba(0,0,0,.24),\r\n    inset 0 1px 0 rgba(255,255,255,.25);\r\n  white-space:nowrap;\r\n  pointer-events:none;\r\n}\r\n\r\n.brand-tile{\r\n  position:relative;\r\n  overflow:hidden;\r\n  cursor:pointer;\r\n  isolation:isolate;\r\n  border:0;\r\n  border-right:1px solid rgba(255,255,255,.12);\r\n  background:none;\r\n  padding:0;\r\n}\r\n\r\n.brand-tile::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:0;\r\n  background:var(--tile) center\/cover no-repeat;\r\n  filter:saturate(.9);\r\n  transition:transform .55s ease, filter .35s ease;\r\n}\r\n\r\n.brand-tile::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:1;\r\n  background:\r\n    linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.32) 42%,rgba(0,0,0,.58) 100%);\r\n  transition:background .35s ease;\r\n}\r\n\r\n.brand-tile:hover::before{\r\n  transform:scale(1.055);\r\n  filter:saturate(1.08) contrast(1.04) brightness(1.04);\r\n}\r\n\r\n.brand-tile:hover::after{\r\n  background:\r\n    linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.24) 45%,rgba(0,0,0,.48) 100%);\r\n}\r\n\r\n.brand-logo{\r\n  position:absolute;\r\n  inset:auto 0 9%;\r\n  z-index:2;\r\n  display:grid;\r\n  place-items:center;\r\n  text-align:center;\r\n  transition:transform .35s ease;\r\n}\r\n\r\n.brand-logo::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  width:72%;\r\n  height:90px;\r\n  border-radius:999px;\r\n  background:rgba(0,0,0,.22);\r\n  filter:blur(24px);\r\n  z-index:-1;\r\n  opacity:.75;\r\n}\r\n\r\n.brand-logo img{\r\n  max-width:62%;\r\n  max-height:64px;\r\n  filter:\r\n    drop-shadow(0 8px 18px rgba(0,0,0,.45))\r\n    drop-shadow(0 1px 1px rgba(255,255,255,.12));\r\n}\r\n\r\n.brand-tile:hover .brand-logo{\r\n  transform:translateY(-10px);\r\n}\r\n\r\n.gizir-brand-type{\r\n  display:block;\r\n  margin-top:12px;\r\n  color:rgba(255,255,255,.86);\r\n  font-size:13px;\r\n  font-weight:500;\r\n  letter-spacing:.02em;\r\n  text-shadow:0 3px 12px rgba(0,0,0,.55);\r\n}\r\n\r\n\/* ---------- Color Panel ---------- *\/\r\n\r\n.gf-tray{\r\n  position:relative;\r\n  z-index:10;\r\n}\r\n\r\n.gf-toggle{\r\n  position:fixed;\r\n  right:24px;\r\n  bottom:24px;\r\n  z-index:1001;\r\n  display:none;\r\n  border:1px solid #111;\r\n  border-radius:999px;\r\n  padding:12px 18px;\r\n  cursor:pointer;\r\n  background:#111;\r\n  color:#fff;\r\n  font-size:14px;\r\n  font-weight:600;\r\n  line-height:1;\r\n  box-shadow:0 14px 34px rgba(0,0,0,.24);\r\n}\r\n\r\n.gf-panel{\r\n  position:fixed;\r\n  right:20px;\r\n  bottom:20px;\r\n  z-index:1002;\r\n  width:min(560px,92vw);\r\n  height:auto;\r\n  max-height:calc(100vh - 120px);\r\n  padding:14px;\r\n  border-radius:16px;\r\n  display:flex;\r\n  flex-direction:column;\r\n  overflow:hidden;\r\n  background:rgba(255,255,255,.95);\r\n  backdrop-filter:blur(18px) saturate(1.1);\r\n  -webkit-backdrop-filter:blur(18px) saturate(1.1);\r\n  border:1px solid rgba(255,255,255,.65);\r\n  box-shadow:\r\n    0 28px 80px rgba(0,0,0,.24),\r\n    inset 0 1px 0 rgba(255,255,255,.75);\r\n}\r\n\r\n.gf-panel.closed{\r\n  display:none;\r\n}\r\n\r\n.gf-panel::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  left:14px;\r\n  right:14px;\r\n  bottom:0;\r\n  height:42px;\r\n  z-index:5;\r\n  pointer-events:none;\r\n  border-radius:0 0 16px 16px;\r\n  background:linear-gradient(\r\n    180deg,\r\n    rgba(255,255,255,0) 0%,\r\n    rgba(255,255,255,.88) 68%,\r\n    rgba(255,255,255,.97) 100%\r\n  );\r\n}\r\n\r\n.gf-title{\r\n  margin:0 0 12px;\r\n  padding-bottom:10px;\r\n  border-bottom:1px solid rgba(0,0,0,.07);\r\n  display:flex;\r\n  gap:10px;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  font:600 15px\/1.2 system-ui,-apple-system,Segoe UI,sans-serif;\r\n  color:#111;\r\n  background:transparent;\r\n  flex:0 0 auto;\r\n}\r\n\r\n.gf-left{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:8px;\r\n}\r\n\r\n.gf-body{\r\n  flex:0 1 auto;\r\n  min-height:0;\r\n  overflow-y:auto;\r\n  overscroll-behavior:contain;\r\n  -webkit-overflow-scrolling:touch;\r\n  padding-bottom:18px;\r\n}\r\n\r\n\/* ---------- Header Buttons ---------- *\/\r\n\r\n.gf-back{\r\n  height:34px;\r\n  padding:0 14px;\r\n  border-radius:999px;\r\n  border:1px solid rgba(0,0,0,.08);\r\n  background:linear-gradient(180deg,#fff,#f3f3f3);\r\n  color:#1f1f1f;\r\n  font-size:13px;\r\n  font-weight:500;\r\n  letter-spacing:.01em;\r\n  cursor:pointer;\r\n  box-shadow:\r\n    0 6px 16px rgba(0,0,0,.07),\r\n    inset 0 1px 0 rgba(255,255,255,.9);\r\n  transition:transform .2s ease, background .2s ease, color .2s ease;\r\n}\r\n\r\n.gf-back:hover{\r\n  transform:translateY(-1px);\r\n  background:linear-gradient(180deg,#111,#252525);\r\n  color:#fff;\r\n  border-color:#111;\r\n}\r\n\r\n.gf-minimize{\r\n  width:34px;\r\n  height:34px;\r\n  border:1px solid #111;\r\n  border-radius:50%;\r\n  cursor:pointer;\r\n  display:grid;\r\n  place-items:center;\r\n  background:#111;\r\n  color:#fff;\r\n  font-size:18px;\r\n  line-height:1;\r\n  font-weight:600;\r\n  box-shadow:0 8px 22px rgba(0,0,0,.16);\r\n  transition:transform .2s ease, background .2s ease;\r\n}\r\n\r\n.gf-minimize:hover{\r\n  transform:translateY(-1px);\r\n  background:#222;\r\n}\r\n\r\n.gf-fullview{\r\n  display:none;\r\n}\r\n\r\n\/* ---------- Panel Logo ---------- *\/\r\n\r\n#gfBrandName.gizir-title-logo{\r\n  font-size:0;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n}\r\n\r\n#gfBrandName.gizir-title-logo .gizir-panel-logo-badge{\r\n  height:32px;\r\n  min-width:104px;\r\n  padding:5px 12px;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border-radius:999px;\r\n  background:#fff;\r\n  border:1px solid rgba(0,0,0,.08);\r\n  box-shadow:0 6px 18px rgba(0,0,0,.08);\r\n}\r\n\r\n#gfBrandName.gizir-title-logo img{\r\n  display:block;\r\n  max-width:112px;\r\n  max-height:21px;\r\n  object-fit:contain;\r\n}\r\n\r\n\/* ---------- Swatches ---------- *\/\r\n\r\n.gf-swatches{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,minmax(0,1fr));\r\n  gap:12px;\r\n}\r\n\r\n.gf-swatch{\r\n  position:relative;\r\n  overflow:hidden;\r\n  display:grid;\r\n  grid-template-rows:auto auto;\r\n  place-items:center;\r\n  gap:4px;\r\n  border-radius:14px;\r\n  padding:10px;\r\n  border:1px solid rgba(0,0,0,.08);\r\n  background:linear-gradient(180deg,#fff,#fafafa);\r\n  cursor:pointer;\r\n  box-shadow:0 6px 18px rgba(0,0,0,.045);\r\n  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;\r\n}\r\n\r\n.gf-swatch:hover{\r\n  transform:translateY(-3px);\r\n  box-shadow:0 14px 32px rgba(0,0,0,.10);\r\n}\r\n\r\n.gf-dot{\r\n  width:100%;\r\n  height:74px;\r\n  border-radius:10px;\r\n  border:1px solid rgba(0,0,0,.08);\r\n  background-size:cover;\r\n  background-position:center;\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.45),\r\n    inset 0 -10px 18px rgba(0,0,0,.035);\r\n}\r\n\r\n.gf-label{\r\n  margin-top:2px;\r\n  font-size:12px;\r\n  font-weight:600;\r\n  line-height:1.1;\r\n  color:#333;\r\n  letter-spacing:.02em;\r\n}\r\n\r\n.gf-swatch[aria-pressed=\"true\"]{\r\n  border-color:#111;\r\n  box-shadow:\r\n    0 12px 30px rgba(0,0,0,.14),\r\n    0 0 0 2px #111 inset;\r\n}\r\n\r\n.gf-swatch[aria-pressed=\"true\"]::after{\r\n  content:\"\u2713\";\r\n  position:absolute;\r\n  top:10px;\r\n  right:10px;\r\n  width:22px;\r\n  height:22px;\r\n  display:grid;\r\n  place-items:center;\r\n  border-radius:50%;\r\n  background:#111;\r\n  color:#fff;\r\n  font-size:13px;\r\n  font-weight:700;\r\n  box-shadow:0 6px 16px rgba(0,0,0,.22);\r\n}\r\n\r\n\/* ---------- Scene Focus ---------- *\/\r\n\r\n.gf-wrap:has(.gf-panel:not(.closed)) .gf-stage{\r\n  filter:brightness(.98) saturate(1);\r\n  transform:scale(1.005);\r\n  transition:filter .35s ease, transform .35s ease;\r\n}\r\n\r\n.gf-wrap:has(.gf-panel:not(.closed))::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  pointer-events:none;\r\n  z-index:9;\r\n  background:radial-gradient(circle at center, rgba(255,255,255,0) 52%, rgba(0,0,0,.05) 100%);\r\n}\r\n\r\n\/* ---------- Tablet ---------- *\/\r\n\r\n@media (max-width:1100px){\r\n  .brand-screen{\r\n    grid-template-columns:repeat(2,1fr);\r\n  }\r\n\r\n  .brand-logo img{\r\n    max-width:65%;\r\n    max-height:52px;\r\n  }\r\n}\r\n\r\n\/* ---------- Mobile ---------- *\/\r\n\r\n@media (max-width:768px){\r\n\r\n  #gfWrap,\r\n  .gf-wrap{\r\n    height:100svh !important;\r\n    min-height:100svh !important;\r\n    max-height:none !important;\r\n    overflow:hidden !important;\r\n    position:relative !important;\r\n  }\r\n\r\n  .gf-stage{\r\n    position:absolute !important;\r\n    inset:0 !important;\r\n    width:100% !important;\r\n    height:100svh !important;\r\n    min-height:100svh !important;\r\n    aspect-ratio:auto !important;\r\n    z-index:1 !important;\r\n    background:#111 !important;\r\n  }\r\n\r\n  .gf-stage .layer{\r\n    width:100% !important;\r\n    height:100% !important;\r\n    object-fit:cover !important;\r\n    object-position:center 62% !important;\r\n  }\r\n\r\n  .gf-tray{\r\n    position:relative !important;\r\n    z-index:20 !important;\r\n  }\r\n\r\n  .gf-wrap:has(.gf-panel:not(.closed)) .gf-stage{\r\n    filter:brightness(.98) saturate(1) !important;\r\n    transform:none !important;\r\n  }\r\n\r\n  .gf-wrap:has(.gf-panel:not(.closed))::after{\r\n    display:none !important;\r\n    content:none !important;\r\n  }\r\n\r\n  .brand-screen{\r\n    grid-template-columns:1fr !important;\r\n    height:100svh !important;\r\n    animation:gizirBrandFadeIn .35s ease both;\r\n  }\r\n\r\n  .brand-screen::before,\r\n  .brand-screen::after{\r\n    display:none !important;\r\n    content:none !important;\r\n  }\r\n\r\n  .brand-tile{\r\n    min-height:25svh !important;\r\n    border-right:0 !important;\r\n    border-bottom:1px solid rgba(255,255,255,.12) !important;\r\n    animation:gizirTileRise .45s ease both;\r\n  }\r\n\r\n  .brand-tile:nth-child(1){ animation-delay:.02s; }\r\n  .brand-tile:nth-child(2){ animation-delay:.06s; }\r\n  .brand-tile:nth-child(3){ animation-delay:.10s; }\r\n  .brand-tile:nth-child(4){ animation-delay:.14s; }\r\n\r\n  .brand-logo{\r\n    inset:auto 0 12% !important;\r\n  }\r\n\r\n  .brand-logo img{\r\n    max-width:50% !important;\r\n    max-height:46px !important;\r\n  }\r\n\r\n  .brand-logo::before{\r\n    width:64%;\r\n    height:70px;\r\n  }\r\n\r\n  .gizir-brand-type{\r\n    font-size:11px !important;\r\n    margin-top:6px !important;\r\n  }\r\n\r\n  .gf-panel{\r\n    left:50% !important;\r\n    right:auto !important;\r\n    bottom:0 !important;\r\n    transform:translateX(-50%) !important;\r\n    width:100vw !important;\r\n    max-height:68svh !important;\r\n    padding:10px 14px 14px !important;\r\n    border-radius:20px 20px 0 0 !important;\r\n    box-shadow:0 -12px 45px rgba(0,0,0,.22) !important;\r\n  }\r\n\r\n  .gf-panel::before{\r\n    content:\"\";\r\n    width:44px;\r\n    height:4px;\r\n    border-radius:999px;\r\n    background:rgba(0,0,0,.18);\r\n    display:block;\r\n    margin:0 auto 10px;\r\n  }\r\n\r\n  .gf-panel::after{\r\n    height:34px;\r\n    border-radius:0 0 18px 18px;\r\n  }\r\n\r\n  .gf-title{\r\n    display:grid !important;\r\n    grid-template-columns:auto 1fr auto !important;\r\n    grid-template-areas:\"back logo full\" !important;\r\n    align-items:center !important;\r\n    column-gap:8px !important;\r\n    padding:0 0 8px !important;\r\n    margin:0 0 8px !important;\r\n    border-bottom:0 !important;\r\n    background:transparent !important;\r\n    box-shadow:none !important;\r\n  }\r\n\r\n  .gf-left{\r\n    display:contents !important;\r\n  }\r\n\r\n  .gf-back{\r\n    grid-area:back !important;\r\n    justify-self:start !important;\r\n    height:32px !important;\r\n    padding:0 11px !important;\r\n    font-size:12px !important;\r\n    white-space:nowrap !important;\r\n  }\r\n\r\n  #gfBrandName{\r\n    grid-area:logo !important;\r\n    justify-self:center !important;\r\n    align-self:center !important;\r\n    width:auto !important;\r\n    min-width:0 !important;\r\n  }\r\n\r\n  #gfBrandName.gizir-title-logo .gizir-panel-logo-badge{\r\n    height:26px !important;\r\n    min-width:auto !important;\r\n    padding:3px 8px !important;\r\n  }\r\n\r\n  #gfBrandName.gizir-title-logo img{\r\n    max-width:78px !important;\r\n    max-height:16px !important;\r\n  }\r\n\r\n  .gf-minimize{\r\n    display:none !important;\r\n  }\r\n\r\n  .gf-fullview{\r\n    grid-area:full !important;\r\n    justify-self:end !important;\r\n    display:inline-flex !important;\r\n    align-items:center !important;\r\n    justify-content:center !important;\r\n    height:32px !important;\r\n    padding:0 12px !important;\r\n    border:1px solid #111 !important;\r\n    border-radius:999px !important;\r\n    background:#111 !important;\r\n    color:#fff !important;\r\n    font-size:11px !important;\r\n    font-weight:700 !important;\r\n    line-height:1 !important;\r\n    white-space:nowrap !important;\r\n    box-shadow:0 8px 18px rgba(0,0,0,.16) !important;\r\n    cursor:pointer !important;\r\n  }\r\n\r\n  .gf-body{\r\n    max-height:calc(68svh - 66px) !important;\r\n    overflow-y:auto !important;\r\n    padding-right:0 !important;\r\n    padding-bottom:18px !important;\r\n  }\r\n\r\n  .gf-swatches{\r\n    grid-template-columns:repeat(2,minmax(0,1fr)) !important;\r\n    gap:8px !important;\r\n  }\r\n\r\n  .gf-swatch{\r\n    padding:7px !important;\r\n    border-radius:13px !important;\r\n  }\r\n\r\n  .gf-dot{\r\n    height:52px !important;\r\n    border-radius:9px !important;\r\n  }\r\n\r\n  .gf-label{\r\n    font-size:11px !important;\r\n    font-weight:700 !important;\r\n  }\r\n\r\n  .gf-swatch[aria-pressed=\"true\"]::after{\r\n    top:8px !important;\r\n    right:8px !important;\r\n    width:20px !important;\r\n    height:20px !important;\r\n    font-size:12px !important;\r\n  }\r\n\r\n  .gf-wrap.gizir-full-view-mode .gf-panel{\r\n    display:none !important;\r\n  }\r\n\r\n  .gf-wrap.gizir-full-view-mode .gf-toggle{\r\n    display:inline-block !important;\r\n    z-index:9999 !important;\r\n    background:#111 !important;\r\n    color:#fff !important;\r\n    border-radius:999px !important;\r\n  }\r\n\r\n  .gf-toggle{\r\n    right:12px !important;\r\n    bottom:max(env(safe-area-inset-bottom),12px) !important;\r\n    padding:10px 13px !important;\r\n    font-size:12px !important;\r\n  }\r\n\r\n  @keyframes gizirBrandFadeIn{\r\n    from{opacity:0;}\r\n    to{opacity:1;}\r\n  }\r\n\r\n  @keyframes gizirTileRise{\r\n    from{\r\n      opacity:0;\r\n      transform:translateY(14px);\r\n    }\r\n    to{\r\n      opacity:1;\r\n      transform:translateY(0);\r\n    }\r\n  }\r\n}\r\n\r\n\/* ---------- Small Mobile ---------- *\/\r\n\r\n@media (max-width:420px){\r\n\r\n  .gf-panel{\r\n    max-height:66svh !important;\r\n  }\r\n\r\n  .gf-body{\r\n    max-height:calc(66svh - 66px) !important;\r\n  }\r\n\r\n  .gf-title{\r\n    column-gap:6px !important;\r\n  }\r\n\r\n  .gf-back{\r\n    padding:0 9px !important;\r\n    font-size:11px !important;\r\n  }\r\n\r\n  .gf-fullview{\r\n    padding:0 10px !important;\r\n    font-size:10px !important;\r\n  }\r\n\r\n  #gfBrandName.gizir-title-logo img{\r\n    max-width:68px !important;\r\n    max-height:15px !important;\r\n  }\r\n\r\n  .gf-stage .layer{\r\n    object-position:center 64% !important;\r\n  }\r\n\r\n  .gf-dot{\r\n    height:50px !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"gf-wrap\" id=\"gfWrap\">\r\n  <div class=\"gf-stage\" aria-hidden=\"true\">\r\n    <img class=\"layer active\" id=\"gfImgA\" alt=\"\">\r\n    <img class=\"layer\" id=\"gfImgB\" alt=\"\">\r\n  <\/div>\r\n\r\n  <div class=\"brand-screen\" id=\"brandScreen\" aria-label=\"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0431\u0440\u0435\u043d\u0434\"><\/div>\r\n\r\n  <div class=\"gf-tray\" id=\"colorTray\" style=\"display:none\">\r\n    <button class=\"gf-toggle\" id=\"gfToggle\">\u0412\u044b\u0431\u043e\u0440 \u0446\u0432\u0435\u0442\u0430<\/button>\r\n\r\n    <div class=\"gf-panel\" id=\"gfPanel\" aria-label=\"\u0412\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0446\u0432\u0435\u0442\u0430\">\r\n      <div class=\"gf-title\">\r\n        <div class=\"gf-left\">\r\n          <button class=\"gf-back\" id=\"gfBack\" type=\"button\">\u2190 \u0411\u0440\u0435\u043d\u0434\u044b<\/button>\r\n          <span id=\"gfBrandName\">\u2013<\/span>\r\n        <\/div>\r\n\r\n        <button class=\"gf-fullview\" id=\"gfFullView\" type=\"button\">Full View<\/button>\r\n        <button class=\"gf-minimize\" id=\"gfMinimize\" type=\"button\" aria-label=\"Minimize color panel\">\u2013<\/button>\r\n      <\/div>\r\n\r\n      <div class=\"gf-body\">\r\n        <div class=\"gf-swatches\" id=\"gfSwatches\" role=\"tablist\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(()=> {\r\n\r\n\/* =========================================================\r\n   LOGO URL ALANI\r\n   Buradan logolar\u0131 rahat\u00e7a de\u011fi\u015ftirebilirsin.\r\n   brandLogo: ilk marka se\u00e7im ekran\u0131ndaki logo\r\n   panelLogo: a\u00e7\u0131lan renk paleti \u00fcst\u00fcndeki logo\r\n========================================================= *\/\r\n\r\nconst BRANDS = {\r\n  madera: {\r\n    label: \"Madera\",\r\n    type: \"Natural European Oak Veneered Panel\",\r\n\r\n    brandLogo: \"https:\/\/www.gizir.com\/assets\/brand-logos\/madera.png\",\r\n    panelLogo: \"https:\/\/www.gizir.com\/wp-content\/uploads\/2025\/07\/Madera-Logo.png\",\r\n\r\n    tile: \"https:\/\/www.gizir.com\/assets\/brand-tiles\/madera.jpg\",\r\n    thumbsBase: \"https:\/\/www.gizir.com\/assets\/madera-renk\/\",\r\n    lifeBase: \"https:\/\/www.gizir.com\/assets\/madera-lifestyle\/\",\r\n    thumbExt: \".png\",\r\n    lifeExt: \".jpg\",\r\n    items: [\r\n      { code:\"VM000\", thumb:\"vm000\", life:\"VM000\" },\r\n      { code:\"VM500\", thumb:\"vm500\", life:\"VM500\" },\r\n      { code:\"VM501\", thumb:\"vm501\", life:\"VM501\" },\r\n      { code:\"VM502\", thumb:\"vm502\", life:\"VM502\" },\r\n      { code:\"VM503\", thumb:\"vm503\", life:\"VM503\" },\r\n      { code:\"VM504\", thumb:\"vm504\", life:\"VM504\" },\r\n      { code:\"VM505\", thumb:\"vm505\", life:\"VM505\" },\r\n      { code:\"VM506\", thumb:\"vm506\", life:\"VM506\" },\r\n      { code:\"VM507\", thumb:\"vm507\", life:\"VM507\" }\r\n    ]\r\n  },\r\n\r\n  polylac: {\r\n    label: \"Polylac\",\r\n    type: \"High Reflective Multi-Layered Panel\",\r\n\r\n    brandLogo: \"https:\/\/www.gizir.com\/assets\/brand-logos\/polylac.png\",\r\n    panelLogo: \"https:\/\/www.gizir.com\/wp-content\/uploads\/2025\/07\/Polylac-scaled.png\",\r\n\r\n    tile: \"https:\/\/www.gizir.com\/assets\/brand-tiles\/polylac.jpg\",\r\n    thumbsBase: \"https:\/\/www.gizir.com\/assets\/polylac-renk-v2\/\",\r\n    lifeBase: \"https:\/\/www.gizir.com\/assets\/polylac-lifestyle-v2\/\",\r\n    thumbExt: \".png\",\r\n    lifeExt: \".jpg\",\r\n    items: [\"9513\",\"9523\",\"9407\",\"9436\",\"9527\",\"9528\",\"9545\",\"9440\"]\r\n  },\r\n\r\n  technomatt: {\r\n    label: \"Technomatt\",\r\n    type: \"Anti-Fingerprint Acrylic Panel\",\r\n\r\n    brandLogo: \"https:\/\/www.gizir.com\/assets\/brand-logos\/technomatt.png\",\r\n    panelLogo: \"https:\/\/www.gizir.com\/wp-content\/uploads\/2025\/09\/Technomatt-scaled.png\",\r\n\r\n    tile: \"https:\/\/www.gizir.com\/assets\/brand-tiles\/technomatt.jpg\",\r\n    thumbsBase: \"https:\/\/www.gizir.com\/assets\/technomatt-renk-v2\/\",\r\n    lifeBase: \"https:\/\/www.gizir.com\/assets\/technomatt-lifestyle-v2\/\",\r\n    thumbExt: \".png\",\r\n    lifeExt: \".jpg\",\r\n    items: [\"AF10\",\"AF11\",\"AF22\",\"AF25\",\"AF30\",\"AF34\",\"AF35\",\"AF36\",\"AF37\",\"AF38\",\"AF39\",\"AF41\",\"AF50\",\"AF51\",\"AF60\",\"AF70\"]\r\n  },\r\n\r\n  ecomatt: {\r\n    label: \"Ecomatt\",\r\n    type: \"Anti-Fingerprint Pet Panel\",\r\n\r\n    brandLogo: \"https:\/\/www.gizir.com\/assets\/brand-logos\/ecomatt.png\",\r\n    panelLogo: \"https:\/\/www.gizir.com\/wp-content\/uploads\/2026\/04\/Ecomatt.png\",\r\n\r\n    tile: \"https:\/\/www.gizir.com\/assets\/brand-tiles\/ecomatt.jpg\",\r\n    thumbsBase: \"https:\/\/www.gizir.com\/assets\/ecomatt-renk\/\",\r\n    lifeBase: \"https:\/\/www.gizir.com\/assets\/ecomatt-lifestyle\/\",\r\n    thumbExt: \".png\",\r\n    lifeExt: \".jpg\",\r\n    items: [\"PT10\",\"PT26\",\"PT27\",\"PT34\",\"PT36\",\"PT38\",\"PT39\",\"PT40\"]\r\n  }\r\n};\r\n\r\nfunction itemToNames(item){\r\n  if(typeof item === \"string\"){\r\n    return { code:item, thumb:item, life:item };\r\n  }\r\n\r\n  return {\r\n    code: item.code || item.thumb || item.life,\r\n    thumb: item.thumb || item.code || item.life,\r\n    life: item.life || item.code || item.thumb\r\n  };\r\n}\r\n\r\nconst imgA = document.getElementById(\"gfImgA\");\r\nconst imgB = document.getElementById(\"gfImgB\");\r\nconst brandScreen = document.getElementById(\"brandScreen\");\r\nconst tray = document.getElementById(\"colorTray\");\r\nconst panel = document.getElementById(\"gfPanel\");\r\nconst toggle = document.getElementById(\"gfToggle\");\r\nconst back = document.getElementById(\"gfBack\");\r\nconst fullView = document.getElementById(\"gfFullView\");\r\nconst minimize = document.getElementById(\"gfMinimize\");\r\nconst list = document.getElementById(\"gfSwatches\");\r\nconst brandNameEl = document.getElementById(\"gfBrandName\");\r\n\r\nlet currentBrandKey = null;\r\nlet CONFIG = null;\r\nlet buttons = [];\r\nlet showingA = true;\r\n\r\nconst isMobile = () => window.matchMedia(\"(max-width:768px)\").matches;\r\nconst uThumb = (name) => `${CONFIG.thumbsBase}${name}${CONFIG.thumbExt}`;\r\nconst uLife = (name) => `${CONFIG.lifeBase}${name}${CONFIG.lifeExt}`;\r\n\r\nfunction crossfadeTo(src){\r\n  const show = showingA ? imgB : imgA;\r\n  const hide = showingA ? imgA : imgB;\r\n\r\n  const pre = new Image();\r\n  pre.decoding = \"async\";\r\n  pre.loading = \"eager\";\r\n  pre.src = src;\r\n\r\n  pre.onload = () => {\r\n    show.src = src;\r\n    show.classList.add(\"active\");\r\n    hide.classList.remove(\"active\");\r\n    showingA = !showingA;\r\n  };\r\n\r\n  pre.onerror = () => {\r\n    const fallback = src.replace(\/\\.jpg$\/i, \".jpeg\");\r\n    const p2 = new Image();\r\n    p2.src = fallback;\r\n\r\n    p2.onload = () => {\r\n      show.src = fallback;\r\n      show.classList.add(\"active\");\r\n      hide.classList.remove(\"active\");\r\n      showingA = !showingA;\r\n    };\r\n  };\r\n}\r\n\r\nfunction updatePanelLogo(){\r\n  if(!CONFIG) return;\r\n\r\n  brandNameEl.classList.add(\"gizir-title-logo\");\r\n  brandNameEl.innerHTML = `\r\n    <span class=\"gizir-panel-logo-badge\">\r\n      <img decoding=\"async\" src=\"${CONFIG.panelLogo}\" alt=\"${CONFIG.label} logo\">\r\n    <\/span>\r\n  `;\r\n}\r\n\r\nfunction setActive(btn, pushState = true){\r\n  buttons.forEach(b => {\r\n    b.setAttribute(\"aria-pressed\", b === btn ? \"true\" : \"false\");\r\n  });\r\n\r\n  const name = btn.dataset.name;\r\n  crossfadeTo(uLife(name));\r\n\r\n  if(pushState){\r\n    const url = new URL(location.href);\r\n    url.searchParams.set(\"brand\", currentBrandKey);\r\n    url.searchParams.set(\"style\", name);\r\n    history.replaceState({}, \"\", url);\r\n  }\r\n}\r\n\r\nfunction preloadAll(){\r\n  CONFIG.items.forEach(item => {\r\n    const names = itemToNames(item);\r\n    const src = uLife(names.life);\r\n\r\n    const link = document.createElement(\"link\");\r\n    link.rel = \"preload\";\r\n    link.as = \"image\";\r\n    link.href = src;\r\n    document.head.appendChild(link);\r\n\r\n    const im = new Image();\r\n    im.decoding = \"async\";\r\n    im.loading = \"eager\";\r\n    im.src = src;\r\n    im.onerror = () => {\r\n      new Image().src = src.replace(\/\\.jpg$\/i, \".jpeg\");\r\n    };\r\n  });\r\n}\r\n\r\nfunction renderBrandTiles(){\r\n  brandScreen.innerHTML = \"\";\r\n\r\n  Object.entries(BRANDS).forEach(([key, conf]) => {\r\n    const tile = document.createElement(\"button\");\r\n    tile.type = \"button\";\r\n    tile.className = \"brand-tile\";\r\n    tile.style.setProperty(\"--tile\", `url('${conf.tile}')`);\r\n    tile.setAttribute(\"aria-label\", conf.label);\r\n\r\n    const logoWrap = document.createElement(\"span\");\r\n    logoWrap.className = \"brand-logo\";\r\n    logoWrap.innerHTML = `\r\n      <img src=\"${conf.brandLogo}\" alt=\"${conf.label} logo\" loading=\"lazy\" decoding=\"async\">\r\n      <span class=\"gizir-brand-type\">${conf.type}<\/span>\r\n    `;\r\n\r\n    tile.appendChild(logoWrap);\r\n    tile.addEventListener(\"click\", () => loadBrand(key));\r\n    brandScreen.appendChild(tile);\r\n  });\r\n}\r\n\r\nfunction loadBrand(key, initialStyle = null){\r\n  currentBrandKey = key;\r\n  CONFIG = BRANDS[key];\r\n\r\n  updatePanelLogo();\r\n\r\n  list.innerHTML = \"\";\r\n  buttons = CONFIG.items.map((item, index) => {\r\n    const names = itemToNames(item);\r\n\r\n    const btn = document.createElement(\"button\");\r\n    btn.type = \"button\";\r\n    btn.className = \"gf-swatch\";\r\n    btn.dataset.name = names.life;\r\n    btn.setAttribute(\"role\", \"tab\");\r\n    btn.setAttribute(\"aria-pressed\", index === 0 ? \"true\" : \"false\");\r\n\r\n    const dot = document.createElement(\"span\");\r\n    dot.className = \"gf-dot\";\r\n    dot.style.backgroundImage = `url('${uThumb(names.thumb)}')`;\r\n\r\n    const label = document.createElement(\"span\");\r\n    label.className = \"gf-label\";\r\n    label.textContent = names.code;\r\n\r\n    btn.append(dot, label);\r\n    list.appendChild(btn);\r\n\r\n    btn.addEventListener(\"click\", () => setActive(btn));\r\n\r\n    btn.addEventListener(\"keydown\", e => {\r\n      const i = buttons.indexOf(btn);\r\n\r\n      if([\"ArrowRight\",\"ArrowDown\"].includes(e.key)){\r\n        e.preventDefault();\r\n        const next = buttons[(i + 1) % buttons.length];\r\n        next.focus();\r\n        setActive(next);\r\n      }\r\n\r\n      if([\"ArrowLeft\",\"ArrowUp\"].includes(e.key)){\r\n        e.preventDefault();\r\n        const prev = buttons[(i - 1 + buttons.length) % buttons.length];\r\n        prev.focus();\r\n        setActive(prev);\r\n      }\r\n    });\r\n\r\n    return btn;\r\n  });\r\n\r\n  const startBtn = buttons.find(b => b.dataset.name === initialStyle) || buttons[0];\r\n  const firstSrc = uLife(startBtn.dataset.name);\r\n\r\n  imgA.src = firstSrc;\r\n  imgA.classList.add(\"active\");\r\n  imgB.src = firstSrc;\r\n  showingA = true;\r\n\r\n  if(\"requestIdleCallback\" in window){\r\n    requestIdleCallback(preloadAll, { timeout:1500 });\r\n  }else{\r\n    setTimeout(preloadAll, 600);\r\n  }\r\n\r\n  brandScreen.style.display = \"none\";\r\n  tray.style.display = \"\";\r\n  panel.classList.remove(\"closed\");\r\n  wrap.classList.remove(\"gizir-full-view-mode\");\r\n  toggle.style.display = \"none\";\r\n\r\n  const url = new URL(location.href);\r\n  url.searchParams.set(\"brand\", key);\r\n  url.searchParams.set(\"style\", startBtn.dataset.name);\r\n  history.replaceState({}, \"\", url);\r\n}\r\n\r\nback.addEventListener(\"click\", () => {\r\n  tray.style.display = \"none\";\r\n  brandScreen.style.display = \"\";\r\n\r\n  const url = new URL(location.href);\r\n  url.searchParams.delete(\"brand\");\r\n  url.searchParams.delete(\"style\");\r\n  history.replaceState({}, \"\", url);\r\n});\r\n\r\nminimize.addEventListener(\"click\", () => {\r\n  if(isMobile()) return;\r\n\r\n  panel.classList.add(\"closed\");\r\n  toggle.textContent = \"Open Color Selector\";\r\n  toggle.style.display = \"inline-block\";\r\n});\r\n\r\nfullView.addEventListener(\"click\", () => {\r\n  if(!isMobile()) return;\r\n\r\n  wrap.classList.add(\"gizir-full-view-mode\");\r\n  panel.classList.add(\"closed\");\r\n  toggle.textContent = \"Open Colors\";\r\n  toggle.style.display = \"inline-block\";\r\n});\r\n\r\ntoggle.addEventListener(\"click\", () => {\r\n  wrap.classList.remove(\"gizir-full-view-mode\");\r\n  panel.classList.remove(\"closed\");\r\n  toggle.style.display = \"none\";\r\n  toggle.textContent = isMobile() ? \"Color Selector\" : \"Open Color Selector\";\r\n});\r\n\r\nrenderBrandTiles();\r\n\r\nconst qs = new URLSearchParams(location.search);\r\nconst qBrand = qs.get(\"brand\");\r\nconst qStyle = qs.get(\"style\");\r\n\r\nif(qBrand && BRANDS[qBrand]){\r\n  loadBrand(qBrand, qStyle);\r\n}\r\n\r\ndocument.querySelector(\".gf-body\")?.addEventListener(\"wheel\", e => {\r\n  e.stopPropagation();\r\n}, { passive:true });\r\n\r\n})();\r\n<\/script>\r\n\r\n<script>\r\n(function(){\r\n\r\n  \/* Eksik wrap tan\u0131m\u0131n\u0131 global olarak tamamlar *\/\r\n  window.wrap = document.getElementById(\"gfWrap\");\r\n\r\n  const wrapEl = document.getElementById(\"gfWrap\");\r\n  const panel = document.getElementById(\"gfPanel\");\r\n  const toggle = document.getElementById(\"gfToggle\");\r\n  const minimize = document.getElementById(\"gfMinimize\");\r\n  const fullView = document.getElementById(\"gfFullView\");\r\n\r\n  if(!wrapEl || !panel || !toggle) return;\r\n\r\n  const isMobile = () => window.matchMedia(\"(max-width:768px)\").matches;\r\n\r\n  \/* Open Colors \/ Open Color Selector butonu *\/\r\n  toggle.onclick = function(){\r\n    wrapEl.classList.remove(\"gizir-full-view-mode\");\r\n    panel.classList.remove(\"closed\");\r\n    toggle.style.display = \"none\";\r\n    toggle.textContent = isMobile() ? \"Color Selector\" : \"Open Color Selector\";\r\n  };\r\n\r\n  \/* Masa\u00fcst\u00fc\/tablet minimize butonu *\/\r\n  if(minimize){\r\n    minimize.onclick = function(){\r\n      if(isMobile()) return;\r\n\r\n      panel.classList.add(\"closed\");\r\n      toggle.textContent = \"Open Color Selector\";\r\n      toggle.style.display = \"inline-block\";\r\n    };\r\n  }\r\n\r\n  \/* Mobil Full View butonu *\/\r\n  if(fullView){\r\n    fullView.onclick = function(){\r\n      if(!isMobile()) return;\r\n\r\n      wrapEl.classList.add(\"gizir-full-view-mode\");\r\n      panel.classList.add(\"closed\");\r\n      toggle.textContent = \"Open Colors\";\r\n      toggle.style.display = \"inline-block\";\r\n    };\r\n  }\r\n\r\n})();\r\n<\/script>\r\n\r\n<style>\r\n\/* === Mobile Full View Pinch & Pan === *\/\r\n\r\n@media (max-width:768px){\r\n\r\n  .gf-wrap.gizir-full-view-mode .gf-stage{\r\n    touch-action:none !important;\r\n    overflow:hidden !important;\r\n  }\r\n\r\n  .gf-wrap.gizir-full-view-mode .gf-stage .layer{\r\n    transform:\r\n      translate3d(var(--gv-x, 0px), var(--gv-y, 0px), 0)\r\n      scale(var(--gv-scale, 1)) !important;\r\n    transform-origin:center center !important;\r\n    transition:transform .08s linear !important;\r\n  }\r\n\r\n  .gf-wrap.gizir-full-view-mode.gf-zoom-reset .gf-stage .layer{\r\n    transition:transform .28s ease !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n\r\n  const wrap = document.getElementById(\"gfWrap\");\r\n  const stage = document.querySelector(\".gf-stage\");\r\n  const fullViewBtn = document.getElementById(\"gfFullView\");\r\n  const toggle = document.getElementById(\"gfToggle\");\r\n  const back = document.getElementById(\"gfBack\");\r\n\r\n  if(!wrap || !stage) return;\r\n\r\n  let scale = 1;\r\n  let x = 0;\r\n  let y = 0;\r\n\r\n  let startX = 0;\r\n  let startY = 0;\r\n  let baseX = 0;\r\n  let baseY = 0;\r\n\r\n  let startDistance = 0;\r\n  let startScale = 1;\r\n  let lastTap = 0;\r\n\r\n  const isMobile = () => window.matchMedia(\"(max-width:768px)\").matches;\r\n\r\n  function applyTransform(){\r\n    wrap.style.setProperty(\"--gv-scale\", scale);\r\n    wrap.style.setProperty(\"--gv-x\", x + \"px\");\r\n    wrap.style.setProperty(\"--gv-y\", y + \"px\");\r\n  }\r\n\r\n  function resetZoom(){\r\n    scale = 1;\r\n    x = 0;\r\n    y = 0;\r\n\r\n    wrap.classList.add(\"gf-zoom-reset\");\r\n    applyTransform();\r\n\r\n    setTimeout(() => {\r\n      wrap.classList.remove(\"gf-zoom-reset\");\r\n    }, 300);\r\n  }\r\n\r\n  function getDistance(t1, t2){\r\n    const dx = t1.clientX - t2.clientX;\r\n    const dy = t1.clientY - t2.clientY;\r\n    return Math.sqrt(dx * dx + dy * dy);\r\n  }\r\n\r\n  function limitPosition(){\r\n    const maxMove = 180 * scale;\r\n\r\n    x = Math.max(-maxMove, Math.min(maxMove, x));\r\n    y = Math.max(-maxMove, Math.min(maxMove, y));\r\n  }\r\n\r\n  stage.addEventListener(\"touchstart\", function(e){\r\n    if(!isMobile()) return;\r\n    if(!wrap.classList.contains(\"gizir-full-view-mode\")) return;\r\n\r\n    if(e.touches.length === 1){\r\n      const now = Date.now();\r\n\r\n      if(now - lastTap < 280){\r\n        resetZoom();\r\n        lastTap = 0;\r\n        return;\r\n      }\r\n\r\n      lastTap = now;\r\n\r\n      startX = e.touches[0].clientX;\r\n      startY = e.touches[0].clientY;\r\n      baseX = x;\r\n      baseY = y;\r\n    }\r\n\r\n    if(e.touches.length === 2){\r\n      startDistance = getDistance(e.touches[0], e.touches[1]);\r\n      startScale = scale;\r\n    }\r\n  }, { passive:false });\r\n\r\n  stage.addEventListener(\"touchmove\", function(e){\r\n    if(!isMobile()) return;\r\n    if(!wrap.classList.contains(\"gizir-full-view-mode\")) return;\r\n\r\n    e.preventDefault();\r\n\r\n    if(e.touches.length === 1 && scale > 1){\r\n      x = baseX + (e.touches[0].clientX - startX);\r\n      y = baseY + (e.touches[0].clientY - startY);\r\n\r\n      limitPosition();\r\n      applyTransform();\r\n    }\r\n\r\n    if(e.touches.length === 2){\r\n      const currentDistance = getDistance(e.touches[0], e.touches[1]);\r\n      scale = startScale * (currentDistance \/ startDistance);\r\n\r\n      scale = Math.max(1, Math.min(3, scale));\r\n\r\n      if(scale === 1){\r\n        x = 0;\r\n        y = 0;\r\n      }\r\n\r\n      limitPosition();\r\n      applyTransform();\r\n    }\r\n  }, { passive:false });\r\n\r\n  stage.addEventListener(\"touchend\", function(){\r\n    if(scale <= 1.02){\r\n      resetZoom();\r\n    }\r\n  });\r\n\r\n  if(fullViewBtn){\r\n    fullViewBtn.addEventListener(\"click\", function(){\r\n      setTimeout(resetZoom, 80);\r\n    });\r\n  }\r\n\r\n  if(toggle){\r\n    toggle.addEventListener(\"click\", resetZoom);\r\n  }\r\n\r\n  if(back){\r\n    back.addEventListener(\"click\", resetZoom);\r\n  }\r\n\r\n})();\r\n<\/script>\r\n\r\n<style>\r\n\/* === Gizir Visualizer \u2013 Editable Button Colors \/ Hover Effects === *\/\r\n\r\n:root{\r\n  \/* Brands \/ Back butonu *\/\r\n  --gv-back-bg: #ffffff;\r\n  --gv-back-text: #1f1f1f;\r\n  --gv-back-hover-bg: #E91D2D;\r\n  --gv-back-hover-text: #ffffff;\r\n\r\n\r\n  \/* Full View butonu *\/\r\n  --gv-full-bg: #ffffff;\r\n  --gv-full-text: #000000;\r\n  --gv-full-hover-bg: #E91D2D;\r\n  --gv-full-hover-text: #ffffff;\r\n\r\n\r\n  \/* Masa\u00fcst\u00fc minimize butonu *\/\r\n  --gv-min-bg: #ffffff;\r\n  --gv-min-text: #000000;\r\n  --gv-min-hover-bg: #E91D2D;\r\n  --gv-min-hover-text: #ffffff;\r\n\r\n  \/* Open Color Selector \/ Open Colors butonu *\/\r\n  --gv-toggle-bg: #ffffff;\r\n  --gv-toggle-text: #000000;\r\n  --gv-toggle-hover-bg: #E91D2D;\r\n  --gv-toggle-hover-text: #ffffff;\r\n}\r\n\r\n\/* Brands \/ Back *\/\r\n.gf-back{\r\n  background:var(--gv-back-bg) !important;\r\n  color:var(--gv-back-text) !important;\r\n  border:1px solid var(--gv-back-border) !important;\r\n}\r\n\r\n.gf-back:hover{\r\n  background:var(--gv-back-hover-bg) !important;\r\n  color:var(--gv-back-hover-text) !important;\r\n  border-color:var(--gv-back-hover-border) !important;\r\n}\r\n\r\n\/* Full View *\/\r\n.gf-fullview{\r\n  background:var(--gv-full-bg) !important;\r\n  color:var(--gv-full-text) !important;\r\n  border:1px solid var(--gv-full-border) !important;\r\n}\r\n\r\n.gf-fullview:hover{\r\n  background:var(--gv-full-hover-bg) !important;\r\n  color:var(--gv-full-hover-text) !important;\r\n  border-color:var(--gv-full-hover-border) !important;\r\n}\r\n\r\n\/* Minimize *\/\r\n.gf-minimize{\r\n  background:var(--gv-min-bg) !important;\r\n  color:var(--gv-min-text) !important;\r\n  border:1px solid var(--gv-min-border) !important;\r\n}\r\n\r\n.gf-minimize:hover{\r\n  background:var(--gv-min-hover-bg) !important;\r\n  color:var(--gv-min-hover-text) !important;\r\n  border-color:var(--gv-min-hover-border) !important;\r\n}\r\n\r\n\/* Open Color Selector \/ Open Colors - genel *\/\r\n.gf-toggle{\r\n  background:var(--gv-toggle-bg) !important;\r\n  color:var(--gv-toggle-text) !important;\r\n  border:1px solid var(--gv-toggle-border) !important;\r\n}\r\n\r\n.gf-toggle:hover{\r\n  background:var(--gv-toggle-hover-bg) !important;\r\n  color:var(--gv-toggle-hover-text) !important;\r\n  border-color:var(--gv-toggle-hover-border) !important;\r\n}\r\n\r\n\/* Mobil Full View sonras\u0131 \u00e7\u0131kan Open Colors butonu *\/\r\n@media (max-width:768px){\r\n  .gf-wrap.gizir-full-view-mode .gf-toggle{\r\n    display:inline-flex !important;\r\n    align-items:center !important;\r\n    justify-content:center !important;\r\n\r\n    background:var(--gv-toggle-bg) !important;\r\n    color:var(--gv-toggle-text) !important;\r\n    border:1px solid var(--gv-toggle-border) !important;\r\n\r\n    border-radius:999px !important;\r\n    padding:11px 16px !important;\r\n\r\n    font-size:12px !important;\r\n    font-weight:700 !important;\r\n    line-height:1 !important;\r\n\r\n    right:14px !important;\r\n    bottom:max(env(safe-area-inset-bottom),14px) !important;\r\n\r\n    box-shadow:0 10px 28px rgba(0,0,0,.20) !important;\r\n    z-index:9999 !important;\r\n  }\r\n\r\n  .gf-wrap.gizir-full-view-mode .gf-toggle:hover{\r\n    background:var(--gv-toggle-hover-bg) !important;\r\n    color:var(--gv-toggle-hover-text) !important;\r\n    border-color:var(--gv-toggle-hover-border) !important;\r\n  }\r\n\r\n  .gf-wrap.gizir-full-view-mode .gf-toggle:active{\r\n    transform:scale(.96) !important;\r\n  }\r\n}\r\n\r\n\/* Ortak ge\u00e7i\u015f *\/\r\n.gf-back,\r\n.gf-fullview,\r\n.gf-minimize,\r\n.gf-toggle{\r\n  transition:\r\n    background .22s ease,\r\n    color .22s ease,\r\n    border-color .22s ease,\r\n    transform .22s ease,\r\n    box-shadow .22s ease !important;\r\n}\r\n\r\n\/* Hover hareketi *\/\r\n.gf-back:hover,\r\n.gf-fullview:hover,\r\n.gf-minimize:hover,\r\n.gf-toggle:hover{\r\n  transform:translateY(-1px) !important;\r\n}\r\n<\/style>\r\n\r\n<style>\r\n\/* === Desktop \/ Tablet Header True Center Fix === *\/\r\n@media (min-width:769px){\r\n\r\n  .gf-title{\r\n    display:grid !important;\r\n    grid-template-columns:1fr auto 1fr !important;\r\n    align-items:center !important;\r\n    column-gap:12px !important;\r\n  }\r\n\r\n  .gf-left{\r\n    display:contents !important;\r\n  }\r\n\r\n  .gf-back{\r\n    grid-column:1 !important;\r\n    justify-self:start !important;\r\n  }\r\n\r\n  #gfBrandName{\r\n    grid-column:2 !important;\r\n    justify-self:center !important;\r\n    align-self:center !important;\r\n    width:auto !important;\r\n    min-width:0 !important;\r\n    margin:0 !important;\r\n  }\r\n\r\n  .gf-minimize{\r\n    grid-column:3 !important;\r\n    justify-self:end !important;\r\n    margin:0 !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<style>\r\n\/* === Tablet Color Area Premium 2 Column Fix === *\/\r\n@media (min-width:600px) and (max-width:1024px){\r\n\r\n  \/* Panel sa\u011f\/sol bo\u015fluklu dursun *\/\r\n  .gf-panel{\r\n    width:min(680px, calc(100vw - 72px)) !important;\r\n    left:50% !important;\r\n    right:auto !important;\r\n    transform:translateX(-50%) !important;\r\n  }\r\n\r\n  \/* Renkler tablet i\u00e7in 2 s\u00fctun *\/\r\n  .gf-panel .gf-swatches{\r\n    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;\r\n    gap:12px !important;\r\n  }\r\n\r\n  \/* Kartlar daha dengeli *\/\r\n  .gf-panel .gf-swatch{\r\n    padding:10px !important;\r\n    border-radius:14px !important;\r\n    min-height:auto !important;\r\n  }\r\n\r\n  \/* Renk numunesi yukar\u0131 do\u011fru daha b\u00fcy\u00fck *\/\r\n  .gf-panel .gf-dot{\r\n    height:78px !important;\r\n    border-radius:11px !important;\r\n  }\r\n\r\n  \/* Kod yaz\u0131s\u0131 *\/\r\n  .gf-panel .gf-label{\r\n    font-size:12px !important;\r\n    font-weight:700 !important;\r\n    margin-top:3px !important;\r\n  }\r\n\r\n  \/* Se\u00e7ili i\u015faret *\/\r\n  .gf-panel .gf-swatch[aria-pressed=\"true\"]::after{\r\n    top:9px !important;\r\n    right:9px !important;\r\n    width:22px !important;\r\n    height:22px !important;\r\n    font-size:13px !important;\r\n  }\r\n}\r\n\r\n\/* Daha dar tablet \/ b\u00fcy\u00fck mobil *\/\r\n@media (min-width:600px) and (max-width:760px){\r\n\r\n  .gf-panel{\r\n    width:calc(100vw - 48px) !important;\r\n  }\r\n\r\n  .gf-panel .gf-dot{\r\n    height:68px !important;\r\n  }\r\n\r\n  .gf-panel .gf-swatches{\r\n    gap:10px !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<style>\r\n\/* === Gizir Visualizer \u2013 Editable Color Swatch Styles === *\/\r\n\r\n:root{\r\n  \/* Renk kart\u0131n\u0131n d\u0131\u015f kutusu *\/\r\n  --gv-swatch-card-bg: #ffffff;\r\n  --gv-swatch-card-border: rgba(0,0,0,.08);\r\n  --gv-swatch-card-shadow: 0 6px 18px rgba(0,0,0,.045);\r\n\r\n  \/* Hover *\/\r\n  --gv-swatch-hover-bg: #ffffff;\r\n  --gv-swatch-hover-border: rgba(233,29,45,.35);\r\n  --gv-swatch-hover-shadow: 0 14px 32px rgba(0,0,0,.10);\r\n\r\n  \/* Se\u00e7ili kart *\/\r\n  --gv-swatch-active-border: #E91D2D;\r\n  --gv-swatch-active-inner-border: #E91D2D;\r\n  --gv-swatch-active-shadow: 0 12px 30px rgba(0,0,0,.14);\r\n\r\n  \/* Renk numunesinin i\u00e7 alan\u0131 *\/\r\n  --gv-dot-border: rgba(0,0,0,.08);\r\n  --gv-dot-inner-shadow-top: rgba(255,255,255,.45);\r\n  --gv-dot-inner-shadow-bottom: rgba(0,0,0,.035);\r\n\r\n  \/* Renk kodu yaz\u0131s\u0131 *\/\r\n  --gv-label-color: #333333;\r\n  --gv-label-active-color: #111111;\r\n\r\n  \/* Check ikonu *\/\r\n  --gv-check-bg: #111111;\r\n  --gv-check-color: #ffffff;\r\n}\r\n\r\n\/* Kart d\u0131\u015f kutusu *\/\r\n.gf-swatch{\r\n  background:var(--gv-swatch-card-bg) !important;\r\n  border:1px solid var(--gv-swatch-card-border) !important;\r\n  box-shadow:var(--gv-swatch-card-shadow) !important;\r\n}\r\n\r\n\/* Kart hover *\/\r\n.gf-swatch:hover{\r\n  background:var(--gv-swatch-hover-bg) !important;\r\n  border-color:var(--gv-swatch-hover-border) !important;\r\n  box-shadow:var(--gv-swatch-hover-shadow) !important;\r\n}\r\n\r\n\/* Se\u00e7ili kart *\/\r\n.gf-swatch[aria-pressed=\"true\"]{\r\n  border-color:var(--gv-swatch-active-border) !important;\r\n  box-shadow:\r\n    var(--gv-swatch-active-shadow),\r\n    0 0 0 2px var(--gv-swatch-active-inner-border) inset !important;\r\n}\r\n\r\n\/* \u0130\u00e7teki renk\/panel numunesi *\/\r\n.gf-dot{\r\n  border:1px solid var(--gv-dot-border) !important;\r\n  box-shadow:\r\n    inset 0 1px 0 var(--gv-dot-inner-shadow-top),\r\n    inset 0 -10px 18px var(--gv-dot-inner-shadow-bottom) !important;\r\n}\r\n\r\n\/* Renk kodu *\/\r\n.gf-label{\r\n  color:var(--gv-label-color) !important;\r\n}\r\n\r\n.gf-swatch[aria-pressed=\"true\"] .gf-label{\r\n  color:var(--gv-label-active-color) !important;\r\n}\r\n\r\n\/* Check i\u015fareti *\/\r\n.gf-swatch[aria-pressed=\"true\"]::after{\r\n  background:var(--gv-check-bg) !important;\r\n  color:var(--gv-check-color) !important;\r\n}\r\n<\/style>\r\n\r\n<style>\r\n\/* === Header ile renk kutular\u0131 aras\u0131 bo\u015fluk === *\/\r\n\r\n.gf-title{\r\n  margin-bottom:18px !important;\r\n}\r\n\r\n\/* Renk gridinin \u00fcst bo\u015flu\u011fu *\/\r\n.gf-body{\r\n  padding-top:6px !important;\r\n}\r\n<\/style>\r\n\r\n<style>\r\n\/* === Gizir Visualizer \u2013 Final Touch UX Controls === *\/\r\n\r\n\/* Mobil dokunmatik hissi *\/\r\n.gf-body{\r\n  -webkit-overflow-scrolling:touch !important;\r\n  overscroll-behavior:contain !important;\r\n  touch-action:pan-y !important;\r\n}\r\n\r\n.gf-swatch,\r\n.gf-back,\r\n.gf-fullview,\r\n.gf-minimize,\r\n.gf-toggle{\r\n  -webkit-tap-highlight-color:transparent !important;\r\n}\r\n\r\n\/* Mobil Full View pinch \/ pan *\/\r\n@media (max-width:768px){\r\n\r\n  .gf-wrap.gizir-full-view-mode .gf-stage{\r\n    touch-action:none !important;\r\n    overflow:hidden !important;\r\n  }\r\n\r\n  .gf-wrap.gizir-full-view-mode .gf-stage .layer.active{\r\n    transform:\r\n      translate3d(var(--gv-pan-x,0px), var(--gv-pan-y,0px), 0)\r\n      scale(var(--gv-zoom,1)) !important;\r\n    transform-origin:center center !important;\r\n    transition:transform .08s linear !important;\r\n  }\r\n\r\n  .gf-wrap.gv-reset-zoom .gf-stage .layer.active{\r\n    transition:transform .25s ease !important;\r\n  }\r\n}\r\n\r\n\/* Masa\u00fcst\u00fcnde header dikey s\u00fcr\u00fcklenebilir hissi *\/\r\n@media (min-width:769px){\r\n  .gf-title{\r\n    cursor:ns-resize !important;\r\n    user-select:none !important;\r\n  }\r\n\r\n  .gf-title:active{\r\n    cursor:ns-resize !important;\r\n  }\r\n\r\n  .gf-panel.gv-dragging{\r\n    transition:none !important;\r\n  }\r\n\r\n  .gf-panel.gv-ready-minimize{\r\n    transform:translateY(14px) scale(.985) !important;\r\n    opacity:.92 !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n\r\n  const wrap = document.getElementById(\"gfWrap\");\r\n  const panel = document.getElementById(\"gfPanel\");\r\n  const title = document.querySelector(\".gf-title\");\r\n  const toggle = document.getElementById(\"gfToggle\");\r\n  const stage = document.querySelector(\".gf-stage\");\r\n  const fullView = document.getElementById(\"gfFullView\");\r\n  const back = document.getElementById(\"gfBack\");\r\n\r\n  if(!wrap || !panel || !title || !toggle || !stage) return;\r\n\r\n  const isMobile = () => window.matchMedia(\"(max-width:768px)\").matches;\r\n\r\n  \/* =========================\r\n     MOBILE FULL VIEW ZOOM\/PAN\r\n  ========================= *\/\r\n\r\n  let zoom = 1;\r\n  let panX = 0;\r\n  let panY = 0;\r\n\r\n  let startX = 0;\r\n  let startY = 0;\r\n  let baseX = 0;\r\n  let baseY = 0;\r\n\r\n  let startDistance = 0;\r\n  let startZoom = 1;\r\n  let lastTap = 0;\r\n\r\n  function applyZoom(){\r\n    wrap.style.setProperty(\"--gv-zoom\", zoom);\r\n    wrap.style.setProperty(\"--gv-pan-x\", panX + \"px\");\r\n    wrap.style.setProperty(\"--gv-pan-y\", panY + \"px\");\r\n  }\r\n\r\n  function resetZoom(){\r\n    zoom = 1;\r\n    panX = 0;\r\n    panY = 0;\r\n\r\n    wrap.classList.add(\"gv-reset-zoom\");\r\n    applyZoom();\r\n\r\n    setTimeout(function(){\r\n      wrap.classList.remove(\"gv-reset-zoom\");\r\n    }, 260);\r\n  }\r\n\r\n  function getDistance(t1, t2){\r\n    const dx = t1.clientX - t2.clientX;\r\n    const dy = t1.clientY - t2.clientY;\r\n    return Math.sqrt(dx * dx + dy * dy);\r\n  }\r\n\r\n  function limitPan(){\r\n    const maxX = 180 * zoom;\r\n    const maxY = 180 * zoom;\r\n\r\n    panX = Math.max(-maxX, Math.min(maxX, panX));\r\n    panY = Math.max(-maxY, Math.min(maxY, panY));\r\n  }\r\n\r\n  stage.addEventListener(\"touchstart\", function(e){\r\n    if(!isMobile()) return;\r\n    if(!wrap.classList.contains(\"gizir-full-view-mode\")) return;\r\n\r\n    if(e.touches.length === 1){\r\n      const now = Date.now();\r\n\r\n      if(now - lastTap < 280){\r\n        resetZoom();\r\n        lastTap = 0;\r\n        return;\r\n      }\r\n\r\n      lastTap = now;\r\n\r\n      startX = e.touches[0].clientX;\r\n      startY = e.touches[0].clientY;\r\n      baseX = panX;\r\n      baseY = panY;\r\n    }\r\n\r\n    if(e.touches.length === 2){\r\n      startDistance = getDistance(e.touches[0], e.touches[1]);\r\n      startZoom = zoom;\r\n    }\r\n  }, { passive:false });\r\n\r\n  stage.addEventListener(\"touchmove\", function(e){\r\n    if(!isMobile()) return;\r\n    if(!wrap.classList.contains(\"gizir-full-view-mode\")) return;\r\n\r\n    e.preventDefault();\r\n\r\n    if(e.touches.length === 1 && zoom > 1){\r\n      panX = baseX + (e.touches[0].clientX - startX);\r\n      panY = baseY + (e.touches[0].clientY - startY);\r\n      limitPan();\r\n      applyZoom();\r\n    }\r\n\r\n    if(e.touches.length === 2){\r\n      const currentDistance = getDistance(e.touches[0], e.touches[1]);\r\n\r\n      zoom = startZoom * (currentDistance \/ startDistance);\r\n      zoom = Math.max(1, Math.min(3, zoom));\r\n\r\n      if(zoom <= 1.02){\r\n        zoom = 1;\r\n        panX = 0;\r\n        panY = 0;\r\n      }\r\n\r\n      limitPan();\r\n      applyZoom();\r\n    }\r\n  }, { passive:false });\r\n\r\n  stage.addEventListener(\"touchend\", function(){\r\n    if(!isMobile()) return;\r\n    if(zoom <= 1.02) resetZoom();\r\n  });\r\n\r\n  if(fullView){\r\n    fullView.addEventListener(\"click\", function(){\r\n      setTimeout(resetZoom, 80);\r\n    });\r\n  }\r\n\r\n  if(toggle){\r\n    toggle.addEventListener(\"click\", resetZoom);\r\n  }\r\n\r\n  if(back){\r\n    back.addEventListener(\"click\", resetZoom);\r\n  }\r\n\r\n  \/* =========================\r\n     DESKTOP HEADER DRAG DOWN\r\n  ========================= *\/\r\n\r\n  let dragging = false;\r\n  let startDragY = 0;\r\n  let dragY = 0;\r\n\r\n  title.addEventListener(\"mousedown\", function(e){\r\n    if(isMobile()) return;\r\n\r\n    if(\r\n      e.target.closest(\"button\") ||\r\n      e.target.closest(\".gf-swatch\") ||\r\n      e.target.closest(\"img\")\r\n    ) return;\r\n\r\n    dragging = true;\r\n    startDragY = e.clientY;\r\n    dragY = 0;\r\n\r\n    panel.classList.add(\"gv-dragging\");\r\n  });\r\n\r\n  window.addEventListener(\"mousemove\", function(e){\r\n    if(!dragging) return;\r\n\r\n    dragY = e.clientY - startDragY;\r\n\r\n    if(dragY > 0){\r\n      const limited = Math.min(dragY, 80);\r\n      panel.style.transform = `translateY(${limited}px)`;\r\n    }\r\n\r\n    if(dragY > 42){\r\n      panel.classList.add(\"gv-ready-minimize\");\r\n    }else{\r\n      panel.classList.remove(\"gv-ready-minimize\");\r\n    }\r\n  });\r\n\r\n  window.addEventListener(\"mouseup\", function(){\r\n    if(!dragging) return;\r\n\r\n    dragging = false;\r\n    panel.classList.remove(\"gv-dragging\");\r\n    panel.classList.remove(\"gv-ready-minimize\");\r\n    panel.style.transform = \"\";\r\n\r\n    if(dragY > 60){\r\n      panel.classList.add(\"closed\");\r\n      toggle.textContent = \"Open Color Selector\";\r\n      toggle.style.display = \"inline-block\";\r\n    }\r\n  });\r\n\r\n})();\r\n<\/script>\r\n\r\n<script>\r\n(function(){\r\n\r\n  const wrap = document.getElementById(\"gfWrap\");\r\n  const stage = document.querySelector(\".gf-stage\");\r\n\r\n  if(!wrap || !stage) return;\r\n\r\n  let panX = 0;\r\n  let panY = 0;\r\n  let startX = 0;\r\n  let startY = 0;\r\n  let baseX = 0;\r\n  let baseY = 0;\r\n\r\n  const isMobile = () => window.matchMedia(\"(max-width:768px)\").matches;\r\n\r\n  function applyPan(){\r\n    wrap.style.setProperty(\"--gv-pan-x\", panX + \"px\");\r\n    wrap.style.setProperty(\"--gv-pan-y\", panY + \"px\");\r\n    wrap.style.setProperty(\"--gv-zoom\", \"1.12\");\r\n  }\r\n\r\n  function limitPan(){\r\n    panX = Math.max(-180, Math.min(180, panX));\r\n    panY = Math.max(-40, Math.min(40, panY));\r\n  }\r\n\r\n  stage.addEventListener(\"touchstart\", function(e){\r\n    if(!isMobile()) return;\r\n    if(!wrap.classList.contains(\"gizir-full-view-mode\")) return;\r\n    if(e.touches.length !== 1) return;\r\n\r\n    startX = e.touches[0].clientX;\r\n    startY = e.touches[0].clientY;\r\n    baseX = panX;\r\n    baseY = panY;\r\n  }, { passive:false });\r\n\r\n  stage.addEventListener(\"touchmove\", function(e){\r\n    if(!isMobile()) return;\r\n    if(!wrap.classList.contains(\"gizir-full-view-mode\")) return;\r\n    if(e.touches.length !== 1) return;\r\n\r\n    e.preventDefault();\r\n\r\n    panX = baseX + (e.touches[0].clientX - startX);\r\n    panY = baseY + (e.touches[0].clientY - startY);\r\n\r\n    limitPan();\r\n    applyPan();\r\n  }, { passive:false });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Color Selector \u2190 Brands \u2013 Full View \u2013<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2187","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.gizir.com\/ru\/wp-json\/wp\/v2\/pages\/2187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gizir.com\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.gizir.com\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.gizir.com\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gizir.com\/ru\/wp-json\/wp\/v2\/comments?post=2187"}],"version-history":[{"count":69,"href":"https:\/\/www.gizir.com\/ru\/wp-json\/wp\/v2\/pages\/2187\/revisions"}],"predecessor-version":[{"id":5020,"href":"https:\/\/www.gizir.com\/ru\/wp-json\/wp\/v2\/pages\/2187\/revisions\/5020"}],"wp:attachment":[{"href":"https:\/\/www.gizir.com\/ru\/wp-json\/wp\/v2\/media?parent=2187"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}