{"id":6906,"date":"2021-10-24T07:25:42","date_gmt":"2021-10-24T07:25:42","guid":{"rendered":"http:\/\/dummy.xtemos.com\/woodmart2\/elementor\/?page_id=6906"},"modified":"2026-01-08T12:58:04","modified_gmt":"2026-01-08T12:58:04","slug":"home-medical","status":"publish","type":"page","link":"https:\/\/unicare.com.tr\/","title":{"rendered":"Home Medical"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Precision Orthopedics | Ultra Premium Hero<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@200;400;700;800&family=Rajdhani:wght@600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <style>\n :root {\n --primary: #4ecdc4;\n --secondary: #00d2ff;\n --bg-dark: #05080a;\n --glass: rgba(255, 255, 255, 0.03);\n --glass-border: rgba(255, 255, 255, 0.1);\n }\n\n \/* --- FORCE ELEMENTOR RESET --- *\/\n .elementor-widget-html, .elementor-widget-html .elementor-widget-container {\n margin: 0 !important;\n padding: 0 !important;\n width: 100% !important;\n }\n\n body, html {\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n background-color: var(--bg-dark);\n font-family: 'Plus Jakarta Sans', sans-serif;\n }\n\n \/* --- HERO WRAPPER --- *\/\n .hero-section {\n width: 100vw !important;\n max-width: 100vw !important;\n position: relative !important;\n left: 50% !important;\n right: 50% !important;\n margin-left: -50vw !important;\n margin-right: -50vw !important;\n height: 100vh;\n min-height: 800px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background-color: var(--bg-dark);\n perspective: 1000px;\n }\n\n \/* Three.js Container *\/\n #canvas-container {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n z-index: 1;\n }\n\n \/* Overlay Vignette *\/\n .vignette {\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at 50% 50%, transparent 20%, #05080a 90%);\n z-index: 2;\n pointer-events: none;\n }\n\n \/* --- MAIN UI LAYER --- *\/\n .hero-content {\n position: relative;\n z-index: 10;\n width: 100%;\n max-width: 1600px;\n padding: 0 3%;\n display: grid;\n grid-template-columns: 1fr 1.2fr 1fr;\n gap: 20px;\n align-items: center;\n margin: 0 auto; \n height: 100%;\n pointer-events: none;\n }\n\n \/* Left Side *\/\n .text-block {\n pointer-events: auto;\n text-align: left;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 8px 16px;\n background: var(--glass);\n border: 1px solid var(--glass-border);\n border-radius: 100px;\n backdrop-filter: blur(10px);\n margin-bottom: 30px;\n }\n\n .badge-dot { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 10px var(--primary); animation: pulse 2s infinite; }\n .badge-text { color: #fff; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }\n\n h1 {\n font-size: clamp(45px, 6vw, 90px);\n font-weight: 800;\n line-height: 0.95;\n color: #fff;\n margin: 0 0 30px 0;\n letter-spacing: -2px;\n text-shadow: 0 10px 30px rgba(0,0,0,0.5);\n }\n\n .gradient-text {\n background: linear-gradient(135deg, var(--primary), var(--secondary), #fff);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n display: block;\n }\n\n .description {\n color: rgba(255, 255, 255, 0.7);\n font-size: 16px;\n line-height: 1.6;\n max-width: 450px;\n margin-bottom: 50px;\n border-left: 2px solid var(--primary);\n padding-left: 20px;\n }\n\n \/* Buttons *\/\n .btn-group { display: flex; align-items: center; gap: 20px; }\n\n .main-btn {\n position: relative; padding: 16px 35px; background: #fff; color: #000; text-decoration: none; font-weight: 800; border-radius: 12px; font-size: 13px; text-transform: uppercase; transition: 0.4s; display: flex; align-items: center; gap: 10px;\n }\n .main-btn:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(78, 205, 196, 0.3); background: var(--primary); color: #fff; }\n\n .sec-btn { color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; transition: 0.3s; display: flex; align-items: center; gap: 8px; }\n .sec-btn:hover { opacity: 1; padding-left: 5px; }\n\n \/* Right Side: Tech Cards *\/\n .tech-cards {\n pointer-events: auto;\n display: flex;\n flex-direction: column;\n gap: 25px;\n align-items: flex-end;\n justify-content: center;\n }\n\n .glass-card {\n background: var(--glass);\n border: 1px solid var(--glass-border);\n backdrop-filter: blur(20px);\n padding: 25px;\n border-radius: 20px;\n width: 280px;\n transition: 0.5s;\n position: relative;\n }\n .glass-card:hover { background: rgba(255,255,255,0.06); border-color: var(--primary); transform: translateX(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }\n\n .card-label { color: var(--primary); font-size: 10px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; display: block; letter-spacing: 1px; }\n .card-val { color: #fff; font-size: 28px; font-weight: 200; display: block; }\n .card-graph { height: 40px; margin-top: 20px; display: flex; align-items: flex-end; gap: 4px; }\n .bar { flex: 1; background: var(--primary); opacity: 0.3; border-radius: 2px; animation: barGrow 2s infinite ease-in-out; }\n\n @keyframes barGrow { 0%, 100% { height: 20%; } 50% { height: 80%; } }\n @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }\n\n @media (max-width: 1200px) {\n .hero-content { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; text-align: center; justify-items: center; padding-top: 100px; }\n .tech-cards { display: flex; flex-direction: row; width: 100%; justify-content: center; margin-top: -50px; }\n .text-block { text-align: center; align-items: center; display: flex; flex-direction: column; }\n .description { margin: 0 auto 30px; border-left: none; padding-left: 0; }\n .btn-group { justify-content: center; }\n }\n\n @media (max-width: 768px) {\n .tech-cards { display: none; }\n .btn-group { flex-direction: column; }\n }\n <\/style>\n<\/head>\n<body>\n\n <section class=\"hero-section\">\n \n <!-- 3D Canvas (Logo is INSIDE this) -->\n <div id=\"canvas-container\"><\/div>\n <div class=\"vignette\"><\/div>\n\n <!-- UI Content -->\n <div class=\"hero-content\">\n \n <!-- LEFT: Typography -->\n <div class=\"text-block\">\n <div class=\"badge\">\n <span class=\"badge-dot\"><\/span>\n <span class=\"badge-text\">Medical Grade Engineering<\/span>\n <\/div>\n\n <h1>\n Beyond <br>\n <span class=\"gradient-text\">Human Limits.<\/span>\n <\/h1>\n\n <p class=\"description\">\n Architecting the next generation of orthopedic recovery systems. High-frequency biomechanical support meeting aerospace-grade textile innovation.\n <\/p>\n\n <div class=\"btn-group\">\n <a href=\"https:\/\/unicare.com.tr\/?page_id=4439\" class=\"main-btn\">\n Contact Us \n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n <\/a>\n <a href=\"https:\/\/unicare.com.tr\/?page_id=4400\" class=\"sec-btn\">\n About Us\n <\/a>\n <\/div>\n <\/div>\n\n <!-- MIDDLE: Spacer -->\n <div><\/div>\n\n <!-- RIGHT: Tech Cards -->\n <div class=\"tech-cards\">\n <div class=\"glass-card\">\n <span class=\"card-label\">Biomechanical Stress<\/span>\n <span class=\"card-val\">0.042<small style=\"font-size: 14px; opacity: 0.5;\"> m\/s\u00b2<\/small><\/span>\n <div class=\"card-graph\">\n <div class=\"bar\" style=\"animation-delay: 0.1s\"><\/div>\n <div class=\"bar\" style=\"animation-delay: 0.3s\"><\/div>\n <div class=\"bar\" style=\"animation-delay: 0.2s\"><\/div>\n <div class=\"bar\" style=\"animation-delay: 0.5s\"><\/div>\n <div class=\"bar\" style=\"animation-delay: 0.4s\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"glass-card\" style=\"margin-right: 20px;\">\n <span class=\"card-label\">Fabric Breathability<\/span>\n <span class=\"card-val\">98.4<small style=\"font-size: 14px; opacity: 0.5;\"> %<\/small><\/span>\n <div class=\"card-graph\">\n <div class=\"bar\" style=\"animation-delay: 0.8s; background: var(--secondary);\"><\/div>\n <div class=\"bar\" style=\"animation-delay: 0.6s; background: var(--secondary);\"><\/div>\n <div class=\"bar\" style=\"animation-delay: 0.9s; background: var(--secondary);\"><\/div>\n <div class=\"bar\" style=\"animation-delay: 0.7s; background: var(--secondary);\"><\/div>\n <div class=\"bar\" style=\"animation-delay: 1s; background: var(--secondary);\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const container = document.getElementById('canvas-container');\n if(!container) return;\n\n const scene = new THREE.Scene();\n \/\/scene.fog = new THREE.FogExp2(0x05080a, 0.02);\n\n const camera = new THREE.PerspectiveCamera(60, container.clientWidth \/ container.clientHeight, 0.1, 1000);\n camera.position.z = 18; \n\n const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n container.appendChild(renderer.domElement);\n\n const crystalGroup = new THREE.Group();\n scene.add(crystalGroup);\n\n \/\/ --- 1. CORE LOGO (Center Element) ---\n let logoMesh;\n \/\/ NEW LOGO URL - Updated as requested\n const logoUrl = 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/85982dc2-de7d-49f7-88b3-e3f1d5239c4f-removebg-preview.png';\n \n const loader = new THREE.TextureLoader();\n loader.setCrossOrigin('anonymous');\n \n loader.load(\n logoUrl,\n (texture) => {\n \/\/ Calculate aspect ratio so the logo doesn't look stretched\n const image = texture.image;\n const aspect = image.width \/ image.height;\n \n \/\/ Base height = 4, adjust width based on aspect ratio\n const baseHeight = 4;\n const baseWidth = baseHeight * aspect;\n\n const geometry = new THREE.PlaneGeometry(baseWidth, baseHeight);\n const material = new THREE.MeshBasicMaterial({ \n map: texture, \n transparent: true, \n side: THREE.DoubleSide,\n opacity: 1\n });\n logoMesh = new THREE.Mesh(geometry, material);\n logoMesh.position.set(0, 0, 0);\n crystalGroup.add(logoMesh);\n },\n undefined,\n (err) => {\n console.log(\"Logo load failed, using fallback.\");\n \/\/ FALLBACK: If image fails, create a glowing text-like block\n const geometry = new THREE.BoxGeometry(6, 2, 0.5);\n const material = new THREE.MeshBasicMaterial({ color: 0x4ecdc4, wireframe: true });\n logoMesh = new THREE.Mesh(geometry, material);\n crystalGroup.add(logoMesh);\n }\n );\n\n \/\/ --- 2. OUTER STRUCTURE (Bio-Core) ---\n const coreGeo = new THREE.TorusKnotGeometry(4.5, 0.4, 150, 20, 2, 3);\n const coreMat = new THREE.MeshPhysicalMaterial({\n color: 0x4ecdc4,\n metalness: 0.9,\n roughness: 0.2,\n wireframe: true,\n transparent: true,\n opacity: 0.15,\n emissive: 0x002222\n });\n const core = new THREE.Mesh(coreGeo, coreMat);\n crystalGroup.add(core);\n\n \/\/ --- 3. RINGS ---\n const ringGeo = new THREE.TorusGeometry(8, 0.03, 16, 100);\n const ringMat = new THREE.MeshBasicMaterial({ color: 0x00d2ff, transparent: true, opacity: 0.3 });\n \n for(let i=0; i<3; i++) {\n const ring = new THREE.Mesh(ringGeo, ringMat);\n ring.rotation.x = Math.random() * Math.PI;\n ring.rotation.y = Math.random() * Math.PI;\n ring.userData = { rx: (Math.random()-0.5)*0.01, ry: (Math.random()-0.5)*0.01 };\n crystalGroup.add(ring);\n }\n\n \/\/ --- 4. PARTICLES ---\n const pCount = 1200;\n const pGeo = new THREE.BufferGeometry();\n const pPos = new Float32Array(pCount * 3);\n for(let i=0; i<pCount*3; i++) {\n pPos[i] = (Math.random() - 0.5) * 70;\n }\n pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3));\n const pMat = new THREE.PointsMaterial({\n size: 0.05,\n color: 0x4ecdc4,\n transparent: true,\n opacity: 0.4\n });\n const particles = new THREE.Points(pGeo, pMat);\n scene.add(particles);\n\n \/\/ --- LIGHTING ---\n const light1 = new THREE.PointLight(0x4ecdc4, 2, 50);\n light1.position.set(10, 10, 10);\n scene.add(light1);\n\n const light2 = new THREE.PointLight(0x00d2ff, 2, 50);\n light2.position.set(-10, -10, 5);\n scene.add(light2);\n\n scene.add(new THREE.AmbientLight(0xffffff, 0.8));\n\n \/\/ Force Center Position\n crystalGroup.position.set(0, 0, 0);\n\n \/\/ Variables\n let mouseX = 0, mouseY = 0;\n let targetX = 0, targetY = 0;\n\n document.addEventListener('mousemove', (e) => {\n mouseX = (e.clientX - window.innerWidth \/ 2) \/ 100;\n mouseY = (e.clientY - window.innerHeight \/ 2) \/ 100;\n });\n\n window.addEventListener('resize', () => {\n camera.aspect = container.clientWidth \/ container.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.clientWidth, container.clientHeight);\n crystalGroup.position.set(0, 0, 0);\n });\n\n function animate() {\n requestAnimationFrame(animate);\n\n targetX += (mouseX - targetX) * 0.05;\n targetY += (mouseY - targetY) * 0.05;\n\n \/\/ Rotate Group based on mouse\n crystalGroup.rotation.x = targetY * 0.2;\n crystalGroup.rotation.y = targetX * 0.2;\n\n \/\/ Keep Logo Facing Forward (Counter Rotation)\n if(logoMesh) {\n logoMesh.rotation.x = -crystalGroup.rotation.x;\n logoMesh.rotation.y = -crystalGroup.rotation.y;\n \n \/\/ Pulse Effect\n const pulse = 1 + Math.sin(Date.now() * 0.003) * 0.05;\n logoMesh.scale.set(pulse, pulse, 1);\n }\n\n \/\/ Animate Rings\n crystalGroup.children.forEach(child => {\n if (child.geometry && child.geometry.type === 'TorusGeometry') {\n child.rotation.x += child.userData.rx;\n child.rotation.y += child.userData.ry;\n }\n });\n\n \/\/ Spin Core\n core.rotation.z += 0.002;\n\n particles.rotation.y += 0.0005;\n\n renderer.render(scene, camera);\n }\n\n animate();\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-0170f20 e-flex e-con-boxed e-con e-parent\" data-id=\"0170f20\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2d4ad62 elementor-widget elementor-widget-html\" data-id=\"2d4ad62\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Unicare Product Ecosystem<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Elementor Reset *\/\n .elementor-widget-html, .elementor-widget-html .elementor-widget-container {\n margin: 0 !important;\n padding: 0 !important;\n }\n\n body { margin: 0; padding: 0; background-color: #050505; font-family: 'Plus Jakarta Sans', sans-serif; }\n\n \/* Main Wrapper *\/\n .ecosystem-fixed-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background-color: #050505; \/* Zinc 950ish *\/\n padding: 100px 0;\n overflow: hidden;\n display: flex;\n justify-content: center;\n }\n\n .eco-container-inner {\n width: 100%;\n max-width: 1400px;\n padding: 0 20px;\n }\n\n \/* Header *\/\n .eco-header-center {\n text-align: center;\n margin-bottom: 80px;\n }\n\n .eco-title-main {\n font-size: clamp(32px, 5vw, 48px);\n font-weight: 800;\n color: white;\n margin: 0;\n letter-spacing: -1px;\n }\n\n .eco-subtitle-teal {\n color: #4ecdc4;\n font-size: 13px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 3px;\n display: block;\n margin-bottom: 15px;\n }\n\n \/* Grid Layout *\/\n .eco-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 40px;\n justify-items: center;\n }\n\n \/* --- THE GRADIENT CARD (CSS Recreation of BackgroundGradient) --- *\/\n .gradient-card-wrapper {\n position: relative;\n border-radius: 22px;\n padding: 2px; \/* Thickness of the gradient border *\/\n background: #18181b; \/* Fallback *\/\n width: 100%;\n max-width: 380px;\n isolation: isolate;\n transition: transform 0.3s ease;\n }\n\n .gradient-card-wrapper:hover {\n transform: translateY(-5px);\n }\n\n \/* The Moving Gradient Background *\/\n .gradient-card-wrapper::before {\n content: \"\";\n position: absolute;\n inset: -2px;\n z-index: -1;\n background: conic-gradient(\n from 0deg, \n #4ecdc4, \n #00d2ff, \n #a855f7, \n #ff0080, \n #4ecdc4\n );\n border-radius: 24px;\n animation: rotateGradient 4s linear infinite;\n filter: blur(10px); \/* The Glow Effect *\/\n opacity: 0.6;\n }\n\n \/* A second layer for sharpness *\/\n .gradient-card-wrapper::after {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: -1;\n background: #18181b; \/* Card Background (Zinc 900) *\/\n border-radius: 22px;\n }\n\n @keyframes rotateGradient {\n 0% { --angle: 0deg; filter: blur(10px) hue-rotate(0deg); }\n 100% { --angle: 360deg; filter: blur(10px) hue-rotate(360deg); }\n }\n\n \/* We use a mask or pseudo element rotation for the movement *\/\n \/* Since CSS variables in gradients support is mixed, we use a simple rotation on the pseudo element *\/\n .gradient-card-wrapper::before {\n \/* Overwrite for animation *\/\n background: conic-gradient(from var(--angle, 0deg), #4ecdc4, #00d2ff, #a855f7, #4ecdc4);\n animation: spin 3s linear infinite;\n }\n \n @property --angle {\n syntax: '<angle>';\n initial-value: 0deg;\n inherits: false;\n }\n\n @keyframes spin {\n to { --angle: 360deg; }\n }\n\n \/* --- Card Content --- *\/\n .card-inner-content {\n background: #18181b; \/* Zinc 900 *\/\n border-radius: 22px;\n padding: 30px;\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n z-index: 2;\n }\n\n .card-image-box {\n height: 220px;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n }\n\n .card-image-box img {\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));\n transition: transform 0.5s ease;\n }\n\n .gradient-card-wrapper:hover .card-image-box img {\n transform: scale(1.1) rotate(-3deg);\n }\n\n .card-title {\n font-size: 20px;\n font-weight: 700;\n color: #e4e4e7; \/* Zinc 200 *\/\n margin: 10px 0 5px 0;\n }\n\n .card-desc {\n font-size: 14px;\n color: #a1a1aa; \/* Zinc 400 *\/\n line-height: 1.6;\n margin-bottom: 25px;\n flex-grow: 1;\n }\n\n \/* The Pill Button (from your React example) *\/\n .pill-button {\n background-color: #000; \/* Black bg *\/\n border-radius: 9999px; \/* Full rounded *\/\n padding: 6px 6px 6px 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-decoration: none;\n color: white;\n font-size: 12px;\n font-weight: 700;\n transition: 0.3s;\n width: fit-content;\n margin-top: auto;\n }\n\n .pill-button:hover {\n background-color: #27272a;\n }\n\n .pill-price-badge {\n background-color: #3f3f46; \/* Zinc 700 *\/\n color: white;\n font-size: 10px;\n padding: 4px 12px;\n border-radius: 9999px;\n margin-left: 12px;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"ecosystem-fixed-wrapper\">\n <div class=\"eco-container-inner\">\n \n <div class=\"eco-header-center\">\n <span class=\"eco-subtitle-teal\">Engineered Solutions<\/span>\n <h2 class=\"eco-title-main\">Product Ecosystem<\/h2>\n <\/div>\n\n <div class=\"eco-grid\">\n \n <!-- Card 1 -->\n <div class=\"gradient-card-wrapper\">\n <div class=\"card-inner-content\">\n <div class=\"card-image-box\">\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/MD-603-removebg-preview.png\" alt=\"Knee Brace\">\n <\/div>\n <h3 class=\"card-title\">Advanced Knee Braces<\/h3>\n <p class=\"card-desc\">\n Medical-grade hinged support for ACL\/MCL recovery. Features breathable knitting and reinforced stabilization.\n <\/p>\n <a href=\"#\" class=\"pill-button\">\n <span>Add to Quote<\/span>\n <span class=\"pill-price-badge\">ISO 13485<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Card 2 -->\n <div class=\"gradient-card-wrapper\">\n <div class=\"card-inner-content\">\n <div class=\"card-image-box\">\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/MD-700-removebg-preview.png\" alt=\"Ankle Support\">\n <\/div>\n <h3 class=\"card-title\">Ankle Stabilization<\/h3>\n <p class=\"card-desc\">\n Ergonomic design for malleolar protection. Ideal for post-op recovery and sports injury prevention.\n <\/p>\n <a href=\"#\" class=\"pill-button\">\n <span>Add to Quote<\/span>\n <span class=\"pill-price-badge\">CE Certified<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Card 3 -->\n <div class=\"gradient-card-wrapper\">\n <div class=\"card-inner-content\">\n <div class=\"card-image-box\">\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/MD-300-removebg-preview.png\" alt=\"Elbow Support\">\n <\/div>\n <h3 class=\"card-title\">Elbow Supports<\/h3>\n <p class=\"card-desc\">\n Targeted compression for epicondylitis (tennis elbow). Reduces strain on tendons during activity.\n <\/p>\n <a href=\"#\" class=\"pill-button\">\n <span>Add to Quote<\/span>\n <span class=\"pill-price-badge\">Premium<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Card 4 -->\n <div class=\"gradient-card-wrapper\">\n <div class=\"card-inner-content\">\n <div class=\"card-image-box\">\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/MD-401-removebg-preview.png\" alt=\"Wrist Splint\">\n <\/div>\n <h3 class=\"card-title\">Wrist Splints<\/h3>\n <p class=\"card-desc\">\n Rigid aluminum support for carpal tunnel syndrome. Adjustable straps ensure a custom medical fit.\n <\/p>\n <a href=\"#\" class=\"pill-button\">\n <span>Add to Quote<\/span>\n <span class=\"pill-price-badge\">Best Seller<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/div>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-3d29011 e-flex e-con-boxed e-con e-parent\" data-id=\"3d29011\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3eadbd8 elementor-widget elementor-widget-html\" data-id=\"3eadbd8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Unicare Manufacturing - Interactive<\/title>\n <!-- Fonts -->\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Jost:wght@400;700;900&display=swap\" rel=\"stylesheet\">\n <!-- GSAP for Draggable Interaction -->\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/Draggable.min.js\"><\/script>\n\n <style>\n \/* Elementor Reset *\/\n .elementor-widget-html, .elementor-widget-html .elementor-widget-container {\n margin: 0 !important;\n padding: 0 !important;\n }\n\n body { margin: 0; padding: 0; overflow-x: hidden; background-color: #080808; }\n\n \/* Main Container *\/\n .factory-drag-area {\n position: relative;\n width: 100vw;\n height: 100vh;\n min-height: 800px; \/* Minimum height to ensure space *\/\n background-color: #080808;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Jost', sans-serif;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n }\n\n \/* Background Text *\/\n .bg-text-layer {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n z-index: 0;\n pointer-events: none; \/* Allows clicking through text *\/\n width: 100%;\n padding: 0 20px;\n }\n\n .bg-title {\n font-size: clamp(40px, 8vw, 120px);\n font-weight: 900;\n color: #1a1a1a; \/* Very dark grey *\/\n line-height: 0.9;\n text-transform: uppercase;\n margin: 0;\n user-select: none;\n }\n\n .bg-subtitle {\n font-size: clamp(14px, 2vw, 24px);\n color: #4ecdc4;\n text-transform: uppercase;\n letter-spacing: 4px;\n margin-bottom: 20px;\n font-weight: 700;\n }\n\n \/* Draggable Cards *\/\n .drag-card {\n position: absolute;\n width: 320px;\n background: #111;\n border: 1px solid #333;\n border-radius: 12px;\n padding: 12px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n cursor: grab;\n transition: border-color 0.3s, transform 0.2s;\n display: flex;\n flex-direction: column;\n \/* Initial positions will be set inline or via classes *\/\n }\n\n .drag-card:active {\n cursor: grabbing;\n border-color: #4ecdc4;\n transform: scale(1.02);\n }\n\n .card-img-wrap {\n width: 100%;\n height: 240px;\n border-radius: 8px;\n overflow: hidden;\n margin-bottom: 12px;\n pointer-events: none; \/* Prevents image dragging ghost *\/\n }\n\n .card-img-wrap img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .card-content h3 {\n color: #fff;\n font-size: 18px;\n margin: 0 0 5px 0;\n font-weight: 700;\n }\n\n .card-content p {\n color: #888;\n font-size: 13px;\n margin: 0;\n }\n\n \/* Responsive Positions *\/\n @media (max-width: 768px) {\n .drag-card {\n width: 260px;\n }\n .card-img-wrap {\n height: 180px;\n }\n \/* Stack them slightly better on mobile *\/\n .pos-1 { top: 10% !important; left: 10% !important; }\n .pos-2 { top: 25% !important; left: 20% !important; }\n .pos-3 { top: 40% !important; left: 5% !important; }\n .pos-4 { top: 55% !important; left: 25% !important; }\n .pos-5 { top: 70% !important; left: 10% !important; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"factory-drag-area\" id=\"drag-container\">\n \n <!-- Background Layer -->\n <div class=\"bg-text-layer\">\n <div class=\"bg-subtitle\">Inside The Factory<\/div>\n <div class=\"bg-title\">Manufacturing<br>Excellence<\/div>\n <p style=\"color: #444; margin-top: 20px; max-width: 600px; margin-left: auto; margin-right: auto; font-size: 16px;\">\n Drag the cards to explore our ISO 13485 certified production lines.\n <\/p>\n <\/div>\n\n <!-- Card 1: State-of-Art Facility -->\n <div class=\"drag-card pos-1\" style=\"top: 15%; left: 20%; transform: rotate(-5deg);\">\n <div class=\"card-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/0BA1C937-8C2B-4E93-8750-6D87BC6725D2-scaled.webp\" alt=\"Factory\">\n <\/div>\n <div class=\"card-content\">\n <h3>State-of-Art Facility<\/h3>\n <p>5,000 sqm production area<\/p>\n <\/div>\n <\/div>\n\n <!-- Card 2: Quality Control -->\n <div class=\"drag-card pos-2\" style=\"top: 55%; left: 15%; transform: rotate(3deg);\">\n <div class=\"card-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/IMG_6907-scaled.webp\" alt=\"QC\">\n <\/div>\n <div class=\"card-content\">\n <h3>Quality Control<\/h3>\n <p>Rigorous ISO Standards<\/p>\n <\/div>\n <\/div>\n\n <!-- Card 3: Premium Materials -->\n <div class=\"drag-card pos-3\" style=\"top: 10%; left: 55%; transform: rotate(6deg);\">\n <div class=\"card-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/IMG_6916-scaled.webp\" alt=\"Materials\">\n <\/div>\n <div class=\"card-content\">\n <h3>Premium Materials<\/h3>\n <p>Sourced from top suppliers<\/p>\n <\/div>\n <\/div>\n\n <!-- Card 4: Precision Assembly -->\n <div class=\"drag-card pos-4\" style=\"top: 45%; left: 45%; transform: rotate(-2deg); z-index: 10;\">\n <div class=\"card-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/IMG_6920-scaled.webp\" alt=\"Assembly\">\n <\/div>\n <div class=\"card-content\">\n <h3>Precision Assembly<\/h3>\n <p>Expert craftsmanship<\/p>\n <\/div>\n <\/div>\n\n <!-- Card 5: Advanced Machinery -->\n <div class=\"drag-card pos-5\" style=\"top: 30%; right: 10%; transform: rotate(-8deg);\">\n <div class=\"card-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/IMG_6935-scaled.webp\" alt=\"Machinery\">\n <\/div>\n <div class=\"card-content\">\n <h3>Advanced Machinery<\/h3>\n <p>CNC Knitting Technology<\/p>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n \/\/ Initialize GSAP Draggable\n window.addEventListener('load', () => {\n gsap.registerPlugin(Draggable);\n\n Draggable.create(\".drag-card\", {\n type: \"x,y\",\n bounds: \"#drag-container\", \/\/ Keeps cards inside the area\n edgeResistance: 0.65,\n inertia: true, \/\/ Momentum effect\n zIndexBoost: true, \/\/ Brings clicked card to front\n onPress: function() {\n \/\/ Optional: Add a grab animation here\n gsap.to(this.target, { scale: 1.05, duration: 0.2 });\n },\n onRelease: function() {\n \/\/ Optional: Release animation\n gsap.to(this.target, { scale: 1, duration: 0.2 });\n }\n });\n \n \/\/ Initial entrance animation\n gsap.from(\".drag-card\", {\n y: 100,\n opacity: 0,\n duration: 1,\n stagger: 0.1,\n ease: \"power3.out\"\n });\n });\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-57e1476 e-flex e-con-boxed e-con e-parent\" data-id=\"57e1476\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c853b2 elementor-widget elementor-widget-html\" data-id=\"2c853b2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n \/* \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0627\u0644\u0645\u0646\u062a\u0648\u0631 *\/\n .elementor-widget-html, .elementor-widget-html .elementor-widget-container {\n margin: 0 !important;\n padding: 0 !important;\n }\n\n \/* \u0641\u0648\u0631\u0633 \u062a\u0645\u0627\u0645 \u0639\u0631\u0636 \u0648 \u067e\u0627\u0631\u0627\u0644\u0627\u06a9\u0633 *\/\n .parallax-fixed-wrapper {\n width: 100vw !important;\n position: relative !important;\n left: 50% !important;\n right: 50% !important;\n margin-left: -50vw !important;\n margin-right: -50vw !important;\n height: 650px !important;\n background-image: url('https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_yqyhvxyqyhvxyqyh.webp');\n background-attachment: fixed; \/* \u0627\u0641\u06a9\u062a \u067e\u0627\u0631\u0627\u0644\u0627\u06a9\u0633 *\/\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n\n \/* \u0644\u0627\u06cc\u0647 \u062a\u06cc\u0631\u0647 \u0631\u0648\u06cc \u0639\u06a9\u0633 *\/\n .parallax-overlay {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.7);\n z-index: 1;\n }\n\n .parallax-container-inner {\n position: relative;\n z-index: 10;\n text-align: center;\n width: 100%;\n max-width: 1400px;\n padding: 0 20px;\n }\n\n .parallax-title {\n font-family: 'Jost', sans-serif;\n font-size: clamp(32px, 6vw, 70px);\n font-weight: 900;\n color: white;\n margin-bottom: 40px;\n text-transform: uppercase;\n }\n\n \/* \u06a9\u0627\u0631\u062a \u0633\u062a\u0627\u0631\u0647 \u062f\u0646\u0628\u0627\u0644\u0647\u200c\u062f\u0627\u0631 (Comet Card) *\/\n .comet-card-fixed {\n position: relative;\n z-index: 20;\n border-radius: 20px;\n background-color: #111;\n overflow: hidden;\n width: fit-content;\n margin: 0 auto;\n box-shadow: 0 20px 50px rgba(0,0,0,0.5);\n }\n\n \/* \u0627\u0641\u06a9\u062a \u062f\u0646\u0628\u0627\u0644\u0647\u200c\u062f\u0627\u0631 \u0646\u0648\u0631\u06cc *\/\n .comet-card-fixed::after {\n content: \"\";\n position: absolute;\n top: calc(var(--y, 0) * 1px - 250px);\n left: calc(var(--x, 0) * 1px - 250px);\n width: 500px;\n height: 500px;\n background: radial-gradient(circle, rgba(78, 205, 196, 0.4) 0%, transparent 70%);\n opacity: 0;\n transition: opacity 0.3s;\n pointer-events: none;\n z-index: -1;\n }\n\n .comet-card-fixed:hover::after {\n opacity: 1;\n }\n\n .comet-inner-box {\n background-color: rgba(20, 20, 20, 0.9);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 19px;\n margin: 1px;\n padding: 50px;\n backdrop-filter: blur(15px);\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 320px;\n }\n\n .comet-inner-box h4 {\n color: white;\n font-family: 'Jost', sans-serif;\n font-size: 24px;\n font-weight: 700;\n margin: 0 0 10px 0;\n }\n\n .comet-inner-box p {\n color: #888;\n font-size: 14px;\n margin-bottom: 30px;\n max-width: 250px;\n line-height: 1.5;\n }\n\n .comet-btn {\n background-color: #fff;\n color: #000;\n text-decoration: none;\n padding: 14px 35px;\n font-weight: 800;\n text-transform: uppercase;\n font-size: 12px;\n letter-spacing: 1px;\n border-radius: 4px;\n transition: 0.3s;\n }\n\n .comet-btn:hover {\n background-color: #4ecdc4;\n transform: translateY(-2px);\n }\n<\/style>\n\n<div class=\"parallax-fixed-wrapper\">\n <div class=\"parallax-overlay\"><\/div>\n \n <div class=\"parallax-container-inner\">\n <span style=\"color:#4ecdc4; font-weight:800; text-transform:uppercase; letter-spacing:3px; font-size:12px; margin-bottom:15px; display:block;\">Medical Grade Performance<\/span>\n <h2 class=\"parallax-title\">Recovery is Business<\/h2>\n\n <div class=\"comet-card-fixed\" id=\"comet-trigger\">\n <div class=\"comet-inner-box\">\n <h4>Become a Partner<\/h4>\n <p>Join our global network of distributors and access exclusive B2B pricing.<\/p>\n <a href=\"https:\/\/unicare.com.tr\/?page_id=4439\" class=\"comet-btn\">Get Started →<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n (function() {\n const card = document.getElementById('comet-trigger');\n if (!card) return;\n\n card.addEventListener('mousemove', (e) => {\n const rect = card.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n card.style.setProperty('--x', x);\n card.style.setProperty('--y', y);\n });\n })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-d0d6948 e-flex e-con-boxed e-con e-parent\" data-id=\"d0d6948\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd2deb8 elementor-widget elementor-widget-html\" data-id=\"fd2deb8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n \/* \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0627\u0644\u0645\u0646\u062a\u0648\u0631 *\/\n .elementor-widget-html, .elementor-widget-html .elementor-widget-container {\n margin: 0 !important;\n padding: 0 !important;\n }\n\n \/* \u0641\u0648\u0631\u0633 \u062a\u0645\u0627\u0645 \u0639\u0631\u0636 *\/\n .target-fixed-wrapper {\n width: 100vw !important;\n position: relative !important;\n left: 50% !important;\n right: 50% !important;\n margin-left: -50vw !important;\n margin-right: -50vw !important;\n background-color: #111 !important;\n padding: 100px 0 !important;\n overflow: hidden !important;\n }\n\n .target-container-inner {\n width: 100%;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n }\n\n .target-header {\n text-align: center;\n margin-bottom: 60px;\n }\n\n .target-header h3 {\n font-family: 'Jost', sans-serif;\n font-size: 32px;\n font-weight: 700;\n color: white;\n text-transform: uppercase;\n display: inline-block;\n border-bottom: 2px solid #4ecdc4;\n padding-bottom: 10px;\n }\n\n \/* \u06a9\u0627\u0631\u062a\u200c\u0647\u0627\u06cc Spotlight *\/\n .spot-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 30px;\n }\n\n .spot-card {\n position: relative;\n border-radius: 12px;\n border: 1px solid #262626;\n background-color: #171717;\n padding: 40px 30px;\n overflow: hidden;\n height: 400px;\n display: flex;\n flex-direction: column;\n transition: border-color 0.3s;\n }\n\n \/* \u0647\u0627\u0644\u0647 \u0646\u0648\u0631\u06cc \u0645\u062a\u062d\u0631\u06a9 *\/\n .spot-card::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: radial-gradient(\n circle at var(--mouse-x, 50%) var(--mouse-y, 50%),\n rgba(78, 205, 196, 0.12),\n transparent 80%\n );\n opacity: 0;\n transition: opacity 0.5s;\n pointer-events: none;\n z-index: 1;\n }\n\n .spot-card:hover::before { opacity: 1; }\n\n \/* \u0634\u0628\u06a9\u0647 (Grid) \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u06a9\u0627\u0631\u062a *\/\n .spot-bg-grid {\n position: absolute;\n inset: 0;\n background-image: linear-gradient(to right, #262626 1px, transparent 1px), linear-gradient(to bottom, #262626 1px, transparent 1px);\n background-size: 2rem 2rem;\n mask-image: radial-gradient(ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%), black 10%, transparent 70%);\n -webkit-mask-image: radial-gradient(ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%), black 10%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n opacity: 0;\n transition: opacity 0.5s;\n }\n\n .spot-card:hover .spot-bg-grid { opacity: 1; }\n\n .spot-content { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; }\n .spot-icon { font-size: 45px; color: #4ecdc4; margin-bottom: 25px; }\n .spot-card h4 { color: white; font-family: 'Jost', sans-serif; font-size: 24px; margin: 0 0 20px 0; }\n \n .spot-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; }\n .spot-list li { color: #aaa; font-size: 14px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 10px; }\n .spot-list li i { color: #4ecdc4; font-size: 12px; margin-top: 4px; }\n\n @media (max-width: 768px) { .spot-grid { grid-template-columns: 1fr; } }\n<\/style>\n\n<div class=\"target-fixed-wrapper\">\n <div class=\"target-container-inner\">\n \n <div class=\"target-header\">\n <span style=\"color:#4ecdc4; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:2px; display:block; margin-bottom:10px;\">Our Partners<\/span>\n <h3>Who We Serve<\/h3>\n <\/div>\n\n <div class=\"spot-grid\">\n \n <div class=\"spot-card\" onmousemove=\"handleSpotlight(event)\">\n <div class=\"spot-bg-grid\"><\/div>\n <div class=\"spot-content\">\n <i class=\"fa-solid fa-hospital spot-icon\"><\/i>\n <h4>Hospitals<\/h4>\n <ul class=\"spot-list\">\n <li><i class=\"fa-solid fa-check\"><\/i> Bulk supply orders<\/li>\n <li><i class=\"fa-solid fa-check\"><\/i> Sterile packaging<\/li>\n <li><i class=\"fa-solid fa-check\"><\/i> Tender support<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"spot-card\" onmousemove=\"handleSpotlight(event)\">\n <div class=\"spot-bg-grid\"><\/div>\n <div class=\"spot-content\">\n <i class=\"fa-solid fa-prescription-bottle-medical spot-icon\"><\/i>\n <h4>Pharmacies<\/h4>\n <ul class=\"spot-list\">\n <li><i class=\"fa-solid fa-check\"><\/i> Retail-ready boxes<\/li>\n <li><i class=\"fa-solid fa-check\"><\/i> Low MOQ options<\/li>\n <li><i class=\"fa-solid fa-check\"><\/i> Barcode labeling<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"spot-card\" onmousemove=\"handleSpotlight(event)\">\n <div class=\"spot-bg-grid\"><\/div>\n <div class=\"spot-content\">\n <i class=\"fa-solid fa-store spot-icon\"><\/i>\n <h4>Medical Stores<\/h4>\n <ul class=\"spot-list\">\n <li><i class=\"fa-solid fa-check\"><\/i> Wide inventory<\/li>\n <li><i class=\"fa-solid fa-check\"><\/i> Marketing materials<\/li>\n <li><i class=\"fa-solid fa-check\"><\/i> Staff training<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"spot-card\" onmousemove=\"handleSpotlight(event)\">\n <div class=\"spot-bg-grid\"><\/div>\n <div class=\"spot-content\">\n <i class=\"fa-solid fa-globe spot-icon\"><\/i>\n <h4>Distributors<\/h4>\n <ul class=\"spot-list\">\n <li><i class=\"fa-solid fa-check\"><\/i> Exclusive territories<\/li>\n <li><i class=\"fa-solid fa-check\"><\/i> OEM\/ODM services<\/li>\n <li><i class=\"fa-solid fa-check\"><\/i> Logistics support<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n function handleSpotlight(e) {\n const card = e.currentTarget;\n const rect = card.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n card.style.setProperty('--mouse-x', `${x}px`);\n card.style.setProperty('--mouse-y', `${y}px`);\n }\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-189f426 e-flex e-con-boxed e-con e-parent\" data-id=\"189f426\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf8e00b elementor-widget elementor-widget-html\" data-id=\"bf8e00b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>3D Anatomy | Shop Sync<\/title>\n <script async src=\"https:\/\/unpkg.com\/es-module-shims@1.6.3\/dist\/es-module-shims.js\"><\/script>\n <script type=\"importmap\">\n {\n \"imports\": {\n \"three\": \"https:\/\/unpkg.com\/three@0.149.0\/build\/three.module.js\",\n \"three\/addons\/\": \"https:\/\/unpkg.com\/three@0.149.0\/examples\/jsm\/\"\n }\n }\n <\/script>\n <style>\n \/* --- \u0631\u0641\u0639 \u0645\u0634\u06a9\u0644 \u0633\u0641\u06cc\u062f\u06cc \u06a9\u0646\u0627\u0631\u0647\u200c\u0647\u0627 (Force Full Width) --- *\/\n .anatomy-section-wrapper {\n width: 100vw !important;\n position: relative !important;\n left: 50% !important;\n right: 50% !important;\n margin-left: -50vw !important;\n margin-right: -50vw !important;\n background-color: #050505 !important;\n padding: 60px 0;\n overflow: hidden;\n }\n\n .unicare-anatomy-app {\n background: #111;\n --dark: #222; --light: #333;\n --navy: #ffffff; --turquoise: #4ecdc4;\n --neon-glow: 0 0 15px var(--turquoise);\n display: flex; flex-direction: row; \n width: 100%; max-width: 1200px; \n height: 700px; margin: 0 auto; border-radius: 20px; padding: 25px;\n box-sizing: border-box; font-family: 'Jost', sans-serif; \n border: 1px solid rgba(255,255,255,0.05);\n box-shadow: 0 20px 50px rgba(0,0,0,0.8);\n }\n\n .unicare-anatomy-app .sidebar { width: 380px; display: flex; flex-direction: column; padding-right: 25px; overflow-y: auto; z-index: 10; }\n .unicare-anatomy-app .viewer-box { flex: 1; position: relative; border-radius: 12px; overflow: hidden; background: #000000; border: 1px solid #222; }\n .unicare-anatomy-app .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; flex-grow: 1; align-content: start; }\n\n .unicare-anatomy-app .btn {\n position: relative; background: #1a1a1a; color: #fff;\n font-weight: 700; font-size: 11px; cursor: pointer;\n letter-spacing: 1px; border: 1px solid #333; border-radius: 4px;\n transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 50px;\n text-transform: uppercase;\n }\n \n .unicare-anatomy-app .btn:hover { color: #000; background: #4ecdc4; border-color: #4ecdc4; transform: translateY(-2px); box-shadow: var(--neon-glow); }\n\n @media (max-width: 900px) {\n .unicare-anatomy-app { flex-direction: column-reverse; height: auto; min-height: 850px; padding: 15px; }\n .unicare-anatomy-app .sidebar { width: 100%; padding-right: 0; margin-top: 20px; }\n .unicare-anatomy-app .viewer-box { width: 100%; height: 400px; flex: none; }\n .unicare-anatomy-app .grid { grid-template-columns: repeat(3, 1fr); }\n }\n\n #canvas-anatomy { width: 100%; height: 100%; outline: none; display: block; }\n #status-msg { position: absolute; top: 20px; left: 20px; color: #4ecdc4; font-size: 10px; font-family: monospace; }\n .title { color: #fff; font-weight: 700; font-size: 22px; margin-bottom: 25px; text-align: center; }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"anatomy-section-wrapper\">\n <main class=\"unicare-anatomy-app\">\n <nav class=\"sidebar\">\n <h1 class=\"title\">Anatomy Control<\/h1>\n <div class=\"grid\">\n <button class=\"btn\" id=\"a-neck\" onclick=\"window.open('https:\/\/unicare.com.tr\/?product_cat=neckcervical')\">NECK<\/button>\n <button class=\"btn\" id=\"a-shoulder\" onclick=\"window.open('https:\/\/unicare.com.tr\/?product_cat=shoulder')\">SHOULDER<\/button>\n <button class=\"btn\" id=\"a-spine-upper\" onclick=\"window.open('https:\/\/unicare.com.tr\/?product_cat=upper-spine')\">UPPER SPINE<\/button>\n <button class=\"btn\" id=\"a-spine\" onclick=\"window.open('https:\/\/unicare.com.tr\/?product_cat=lumbarlower-spine')\">LUMBAR<\/button>\n <button class=\"btn\" id=\"a-chest\" onclick=\"window.open('https:\/\/unicare.com.tr\/?product_cat=thoraxchest')\">THORAX<\/button>\n <button class=\"btn\" id=\"a-arm\" onclick=\"window.open('https:\/\/unicare.com.tr\/?product_cat=arm')\">ARM<\/button>\n <button class=\"btn\" id=\"a-elbow\" onclick=\"window.open('https:\/\/unicare.com.tr\/?product_cat=elbow')\">ELBOW<\/button>\n <button class=\"btn\" id=\"a-hand\" onclick=\"window.open('https:\/\/unicare.com.tr\/?product_cat=wristhand-fingers')\">WRIST\/HAND<\/button>\n <button class=\"btn\" id=\"a-genital\" onclick=\"window.open('https:\/\/unicare.com.tr\/?product_cat=genital-area')\">GENITAL<\/button>\n <button class=\"btn\" id=\"a-leg\" onclick=\"window.open('https:\/\/unicare.com.tr\/?product_cat=leg')\">LEG<\/button>\n <button class=\"btn\" id=\"a-knee\" onclick=\"window.open('https:\/\/unicare.com.tr\/?product_cat=knee')\">KNEE<\/button>\n <button class=\"btn\" id=\"a-foot\" onclick=\"window.open('https:\/\/unicare.com.tr\/?product_cat=foot-ankle')\">FOOT\/ANKLE<\/button>\n <\/div>\n <\/nav>\n \n <section class=\"viewer-box\">\n <div id=\"status-msg\">SYSTEM READY<\/div>\n <div id=\"canvas-anatomy\"><\/div>\n <\/section>\n <\/main>\n<\/div>\n\n\n\n<script type=\"module\">\n import * as THREE from 'three';\n import { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\n import { GLTFLoader } from 'three\/addons\/loaders\/GLTFLoader.js';\n import { EffectComposer } from 'three\/addons\/postprocessing\/EffectComposer.js';\n import { RenderPass } from 'three\/addons\/postprocessing\/RenderPass.js';\n import { UnrealBloomPass } from 'three\/addons\/postprocessing\/UnrealBloomPass.js';\n\n const canvas = document.getElementById('canvas-anatomy');\n const statusMsg = document.getElementById('status-msg');\n const viewerBox = document.querySelector('.viewer-box');\n \n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x020205); \n scene.fog = new THREE.FogExp2(0x000000, 0.035);\n\n const camera = new THREE.PerspectiveCamera(45, viewerBox.clientWidth \/ viewerBox.clientHeight, 0.01, 1000);\n camera.position.set(0, 0, 10.0); \n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(viewerBox.clientWidth, viewerBox.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\n canvas.appendChild(renderer.domElement);\n\n const renderScene = new RenderPass(scene, camera);\n const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);\n bloomPass.threshold = 0.05; bloomPass.strength = 1.8; bloomPass.radius = 0.3;\n\n const composer = new EffectComposer(renderer);\n composer.addPass(renderScene);\n composer.addPass(bloomPass);\n\n scene.add(new THREE.AmbientLight(0x111111, 2.0)); \n const light1 = new THREE.PointLight(0x4ecdc4, 3.0, 30); scene.add(light1);\n const light2 = new THREE.PointLight(0xff00ff, 3.0, 30); scene.add(light2);\n const light3 = new THREE.PointLight(0xffffff, 2.0, 20); light3.position.set(0, 5, 5); scene.add(light3);\n\n const particlesGeo = new THREE.BufferGeometry();\n const particleCount = 1000;\n const posArray = new Float32Array(particleCount * 3);\n for(let i=0; i<particleCount * 3; i++) posArray[i] = (Math.random() - 0.5) * 12; \n particlesGeo.setAttribute('position', new THREE.BufferAttribute(posArray, 3));\n const particlesMat = new THREE.PointsMaterial({ size: 0.04, color: 0x4ecdc4, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending });\n const particlesMesh = new THREE.Points(particlesGeo, particlesMat);\n scene.add(particlesMesh);\n\n const gridHelper = new THREE.GridHelper(40, 40, 0x004455, 0x001122);\n gridHelper.position.y = -6.0;\n scene.add(gridHelper);\n\n const loader = new GLTFLoader();\n const clock = new THREE.Clock();\n let currentModel = null;\n let wireframeModel = null;\n let mixer = null;\n let activeLoadId = 0;\n\n \/\/ \u0646\u0642\u0634\u0647\u200c\u0628\u0631\u062f\u0627\u0631\u06cc \u0645\u062f\u0644\u200c\u0647\u0627 \u062b\u0627\u0628\u062a \u0645\u0627\u0646\u062f \u062a\u0627 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 \u06a9\u0627\u0631 \u06a9\u0646\u0646\u062f\n const modelsMap = {\n 'a-neck': 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/Neck-Stretching.glb',\n 'a-shoulder': 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/Shoulder-Rubbing.glb',\n 'a-spine-upper': 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/posht.glb',\n 'a-spine': 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/Situp-To-Idle.glb', \n 'a-chest': 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/Rifle-Idle.glb',\n 'a-arm': 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/Arm-Stretching.glb',\n 'a-elbow': 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/Illegal-Elbow-Punch.glb',\n 'a-hand': 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/Dice-Idle.glb',\n 'a-genital': 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/Pain-Gesture.glb',\n 'a-leg': 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/Leaning-On-A-Wall.glb',\n 'a-knee': 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/Stall-Soccerball.glb',\n 'a-foot': 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/Leaning-On-A-Wall.glb'\n };\n\n function normalizeModel(model) {\n model.updateMatrixWorld(true);\n const box = new THREE.Box3().setFromObject(model);\n const size = box.getSize(new THREE.Vector3());\n const maxDim = Math.max(size.x, size.y, size.z);\n if (maxDim === 0) return;\n const targetSize = 0.06;\n const scale = targetSize \/ maxDim;\n model.scale.set(scale, scale, scale);\n const newBox = new THREE.Box3().setFromObject(model);\n const center = newBox.getCenter(new THREE.Vector3());\n model.position.x -= center.x; model.position.z -= center.z; model.position.y -= center.y;\n model.position.y -= 5.5; \n }\n\n function loadModel(url) {\n const myLoadId = ++activeLoadId;\n statusMsg.style.display = 'block';\n statusMsg.innerText = \"INITIALIZING...\";\n loader.load(url, (gltf) => {\n if (myLoadId !== activeLoadId) return;\n if (currentModel) { scene.remove(currentModel); if (wireframeModel) scene.remove(wireframeModel); if (mixer) mixer.stopAllAction(); }\n currentModel = gltf.scene;\n currentModel.traverse((node) => { if (node.isMesh) node.material = new THREE.MeshPhysicalMaterial({ color: 0x050505, metalness: 1.0, roughness: 0.1, clearcoat: 1.0, emissive: 0x001133, emissiveIntensity: 0.5 }); });\n wireframeModel = currentModel.clone();\n wireframeModel.traverse((node) => { if (node.isMesh) node.material = new THREE.MeshBasicMaterial({ color: 0x4ecdc4, wireframe: true, transparent: true, opacity: 0.15, blending: THREE.AdditiveBlending }); });\n scene.add(currentModel); scene.add(wireframeModel);\n normalizeModel(currentModel); normalizeModel(wireframeModel);\n if (gltf.animations && gltf.animations.length > 0) {\n mixer = new THREE.AnimationMixer(currentModel);\n const mixer2 = new THREE.AnimationMixer(wireframeModel); \n const action = mixer.clipAction(gltf.animations[0]);\n const action2 = mixer2.clipAction(gltf.animations[0]);\n action.play(); action2.play();\n mixer.update = (delta) => { THREE.AnimationMixer.prototype.update.call(mixer, delta); mixer2.update(delta); };\n }\n setTimeout(() => { if (myLoadId === activeLoadId) statusMsg.style.display = 'none'; }, 1000);\n });\n }\n\n loadModel('https:\/\/unicare.com.tr\/wp-content\/uploads\/2025\/12\/Rifle-Idle.glb');\n const controls = new OrbitControls(camera, renderer.domElement);\n controls.enableDamping = true; controls.autoRotate = true; controls.autoRotateSpeed = 0.8; controls.target.set(0, -3.0, 0); \n\n function animate() {\n requestAnimationFrame(animate);\n const delta = clock.getDelta();\n if (mixer) mixer.update(delta);\n const time = Date.now() * 0.001;\n light1.position.x = Math.sin(time * 2) * 6; light1.position.z = Math.cos(time * 1.5) * 6;\n light2.position.x = Math.sin(time * 2 + 2) * 6; light2.position.z = Math.cos(time * 1.5 + 2) * 6;\n particlesMesh.rotation.y = time * 0.05; gridHelper.rotation.y = -time * 0.1;\n controls.update(); composer.render();\n }\n animate();\n\n const btns = document.querySelectorAll('.unicare-anatomy-app .btn');\n btns.forEach(btn => {\n btn.onmouseenter = () => {\n controls.autoRotate = false;\n if (wireframeModel) { wireframeModel.traverse((node) => { if (node.isMesh) { node.material.opacity = 0.6; node.material.color.setHex(0x4ecdc4); } }); }\n const url = modelsMap[btn.id];\n if (url) loadModel(url);\n };\n btn.onmouseleave = () => {\n controls.autoRotate = true;\n if (wireframeModel) { wireframeModel.traverse((node) => { if (node.isMesh) { node.material.opacity = 0.15; node.material.color.setHex(0x4ecdc4); } }); }\n };\n });\n\n window.addEventListener('resize', () => {\n const width = viewerBox.clientWidth; const height = viewerBox.clientHeight;\n camera.aspect = width \/ height; camera.updateProjectionMatrix();\n renderer.setSize(width, height); composer.setSize(width, height);\n });\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-8689a54 e-flex e-con-boxed e-con e-parent\" data-id=\"8689a54\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8301bd1 elementor-widget elementor-widget-html\" data-id=\"8301bd1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Deconstructed View<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;700;800&family=Jost:wght@700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Reset *\/\n .elementor-widget-html, .elementor-widget-html .elementor-widget-container { margin: 0 !important; padding: 0 !important; }\n body { margin: 0; background: #050505; font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; }\n\n \/* Wrapper *\/\n .explode-fixed-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background-color: #080808;\n padding: 100px 0;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n perspective: 1000px; \/* For 3D depth *\/\n }\n\n \/* Container *\/\n .explode-container {\n position: relative;\n width: 100%;\n max-width: 1200px;\n height: 600px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n \/* Header *\/\n .explode-header {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n text-align: center;\n z-index: 20;\n width: 100%;\n }\n\n .explode-subtitle {\n color: #4ecdc4;\n font-size: 12px;\n letter-spacing: 3px;\n text-transform: uppercase;\n font-weight: 700;\n }\n\n .explode-title {\n font-family: 'Jost', sans-serif;\n font-size: clamp(30px, 4vw, 48px);\n color: white;\n margin: 5px 0 0 0;\n }\n\n \/* The Layers Group *\/\n .layers-group {\n position: relative;\n width: 400px;\n height: 500px;\n transform-style: preserve-3d;\n transition: transform 0.1s ease-out;\n }\n\n \/* Common Layer Style *\/\n .product-layer {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n pointer-events: none;\n }\n\n \/* 1. Base Layer (Shadow\/Comfort) - Tinted Purple *\/\n .layer-base {\n background-image: url('https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/MD-603-removebg-preview.png');\n filter: brightness(0.5) sepia(1) hue-rotate(220deg) saturate(3) blur(2px);\n opacity: 0.6;\n transform: translateZ(-50px) scale(0.9);\n }\n\n \/* 2. Middle Layer (Structure) - High Contrast \/ Cyan Edge *\/\n .layer-mid {\n background-image: url('https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/MD-603-removebg-preview.png');\n filter: drop-shadow(0 0 5px #4ecdc4) grayscale(100%) contrast(1.5);\n opacity: 0.8;\n transform: translateZ(0px);\n mix-blend-mode: hard-light;\n }\n\n \/* 3. Top Layer (Real Product) *\/\n .layer-top {\n background-image: url('https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/MD-603-removebg-preview.png');\n transform: translateZ(50px) scale(1.05);\n filter: drop-shadow(0 20px 50px rgba(0,0,0,0.8));\n z-index: 10;\n }\n\n \/* Interaction State (Hovering Container) *\/\n .explode-fixed-wrapper:hover .layer-base {\n transform: translateX(-120px) translateZ(-50px) rotateY(-10deg);\n }\n\n .explode-fixed-wrapper:hover .layer-mid {\n transform: translateX(0px) translateZ(0px); \/* Center *\/\n }\n\n .explode-fixed-wrapper:hover .layer-top {\n transform: translateX(120px) translateZ(50px) rotateY(10deg);\n }\n\n \/* Labels (Lines pointing to layers) *\/\n .tech-label {\n position: absolute;\n color: #fff;\n font-size: 14px;\n font-weight: 700;\n opacity: 0;\n transition: 0.5s;\n display: flex;\n align-items: center;\n gap: 15px;\n pointer-events: none;\n }\n\n .tech-label::before {\n content: '';\n width: 40px;\n height: 1px;\n background: #4ecdc4;\n display: block;\n }\n\n .label-left { right: 60%; top: 40%; text-align: right; flex-direction: row-reverse; }\n .label-right { left: 60%; top: 30%; }\n .label-bottom { left: 55%; bottom: 20%; }\n\n .explode-fixed-wrapper:hover .tech-label {\n opacity: 1;\n transform: translateX(0);\n }\n \n .label-left { transform: translateX(20px); }\n .label-right { transform: translateX(-20px); }\n \n .label-desc {\n font-size: 10px;\n color: #888;\n font-weight: 400;\n display: block;\n margin-top: 3px;\n }\n\n \/* Mobile Fix *\/\n @media (max-width: 768px) {\n .layers-group { transform: scale(0.7); }\n \/* On mobile, force open slightly *\/\n .layer-base { transform: translateX(-40px) scale(0.9); }\n .layer-top { transform: translateX(40px) scale(1.05); }\n .tech-label { opacity: 1 !important; transform: none !important; }\n .label-left { right: 80%; }\n .label-right { left: 80%; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"explode-fixed-wrapper\" id=\"explode-area\">\n \n <div class=\"explode-header\">\n <span class=\"explode-subtitle\">MULTI-LAYER COMPOSITION<\/span>\n <h2 class=\"explode-title\">Deconstructed View<\/h2>\n <\/div>\n\n <div class=\"explode-container\">\n \n <!-- Interactive Labels -->\n <div class=\"tech-label label-left\">\n <div>\n COMFORT LINING\n <span class=\"label-desc\">Anti-bacterial coating<\/span>\n <\/div>\n <\/div>\n\n <div class=\"tech-label label-right\">\n <div>\n OUTER SHELL\n <span class=\"label-desc\">Breathable Matrix<\/span>\n <\/div>\n <\/div>\n\n <div class=\"tech-label label-bottom\">\n <div>\n CORE SUPPORT\n <span class=\"label-desc\">Alloy Stabilization<\/span>\n <\/div>\n <\/div>\n\n <!-- The 3D Layers -->\n <div class=\"layers-group\" id=\"layers-group\">\n <div class=\"product-layer layer-base\"><\/div> <!-- Purple Tint -->\n <div class=\"product-layer layer-mid\"><\/div> <!-- X-Ray\/High Contrast -->\n <div class=\"product-layer layer-top\"><\/div> <!-- Real Product -->\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n const container = document.getElementById('explode-area');\n const group = document.getElementById('layers-group');\n\n container.addEventListener('mousemove', (e) => {\n \/\/ Calculate Rotation based on mouse position\n const xAxis = (window.innerWidth \/ 2 - e.pageX) \/ 25;\n const yAxis = (window.innerHeight \/ 2 - e.pageY) \/ 25;\n \n \/\/ Apply slight rotation to the whole group for 3D feel\n group.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;\n });\n\n container.addEventListener('mouseleave', () => {\n \/\/ Reset rotation\n group.style.transform = `rotateY(0deg) rotateX(0deg)`;\n });\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-09095c9 e-flex e-con-boxed e-con e-parent\" data-id=\"09095c9\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a4ac255 elementor-widget elementor-widget-html\" data-id=\"a4ac255\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Nano-Fiber Simulation<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;700;800&family=Jost:wght@700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Elementor Reset *\/\n .elementor-widget-html, .elementor-widget-html .elementor-widget-container { margin: 0 !important; padding: 0 !important; }\n body { margin: 0; background: #050505; font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; }\n\n \/* Wrapper *\/\n .nano-fixed-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background-color: #030304;\n height: 100vh;\n min-height: 800px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* Content Container *\/\n .nano-content {\n position: absolute;\n z-index: 10;\n text-align: center;\n pointer-events: none; \/* Let clicks pass through to canvas *\/\n width: 100%;\n max-width: 1200px;\n padding: 0 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n height: 80%;\n }\n\n .nano-header {\n margin-top: 40px;\n }\n\n .nano-tag {\n color: #4ecdc4;\n border: 1px solid rgba(78, 205, 196, 0.3);\n background: rgba(0,0,0,0.5);\n padding: 8px 20px;\n border-radius: 50px;\n font-size: 11px;\n letter-spacing: 3px;\n text-transform: uppercase;\n margin-bottom: 20px;\n backdrop-filter: blur(5px);\n display: inline-block;\n transition: opacity 0.5s ease;\n }\n\n .nano-title {\n font-family: 'Jost', sans-serif;\n font-size: clamp(40px, 6vw, 80px);\n color: white;\n margin: 0;\n line-height: 1;\n text-shadow: 0 10px 30px rgba(0,0,0,0.8);\n }\n \n .nano-desc {\n color: rgba(255,255,255,0.6);\n max-width: 500px;\n margin: 20px auto 0;\n font-size: 16px;\n line-height: 1.6;\n }\n\n \/* Product Image (Behind the fibers or integrated) *\/\n .product-center {\n position: absolute;\n z-index: 5;\n height: 55vh;\n max-height: 550px;\n pointer-events: none;\n filter: drop-shadow(0 0 50px rgba(78, 205, 196, 0.15));\n transition: transform 0.1s ease-out, opacity 0.8s ease-in-out, filter 0.8s ease;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%); \/* Centering logic handled in JS for parallax *\/\n }\n\n \/* Canvas for Fibers *\/\n canvas#fiber-canvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 6; \/* On top of image *\/\n cursor: crosshair;\n }\n\n \/* Overlay Gradient *\/\n .vignette {\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at center, transparent 0%, #030304 90%);\n z-index: 7;\n pointer-events: none;\n }\n\n \/* Progress Bar for Slideshow *\/\n .slide-progress {\n position: absolute;\n bottom: 40px;\n width: 200px;\n height: 2px;\n background: rgba(255,255,255,0.1);\n border-radius: 2px;\n overflow: hidden;\n z-index: 12;\n }\n \n .progress-bar {\n height: 100%;\n background: #4ecdc4;\n width: 0%;\n animation: progress 5s linear infinite;\n }\n\n @keyframes progress {\n 0% { width: 0%; }\n 100% { width: 100%; }\n }\n\n <\/style>\n<\/head>\n<body>\n\n<div class=\"nano-fixed-wrapper\">\n \n <!-- Canvas for the Physics Simulation -->\n <canvas id=\"fiber-canvas\"><\/canvas>\n\n <!-- Product Image in Background -->\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/MD-603-removebg-preview.png\" class=\"product-center\" id=\"product-img\" alt=\"Nano Product\">\n \n <!-- Vignette to fade edges -->\n <div class=\"vignette\"><\/div>\n\n <!-- Text Overlay -->\n <div class=\"nano-content\">\n <div class=\"nano-header\">\n <div class=\"nano-tag\" id=\"product-tag\">Active Matrix: KNEE<\/div>\n <h1 class=\"nano-title\">Micro-Adaptive<br>Technology<\/h1>\n <\/div>\n \n <p class=\"nano-desc\">\n Interact with our proprietary weave. Millions of micro-fibers adjust independently to body movement, ensuring zero-slip stability across our entire range.\n <\/p>\n\n <div class=\"slide-progress\">\n <div class=\"progress-bar\" id=\"progress-bar\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n const canvas = document.getElementById('fiber-canvas');\n const ctx = canvas.getContext('2d');\n const productImg = document.getElementById('product-img');\n const productTag = document.getElementById('product-tag');\n const progressBar = document.getElementById('progress-bar');\n\n \/\/ Product Data\n const products = [\n { \n src: 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/MD-603-removebg-preview.png', \n tag: 'Active Matrix: KNEE' \n },\n { \n src: 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/MD-700-removebg-preview.png', \n tag: 'Stabilizer: ANKLE' \n },\n { \n src: 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/MD-300-removebg-preview.png', \n tag: 'Compression: ELBOW' \n },\n { \n src: 'https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/MD-401-removebg-preview.png', \n tag: 'Rigid Support: WRIST' \n }\n ];\n\n let currentProductIndex = 0;\n const slideDuration = 5000; \/\/ 5 seconds\n\n \/\/ --- Fiber Physics Setup ---\n let width, height;\n let particles = [];\n const particleCount = 450;\n let mouse = { x: -1000, y: -1000 };\n\n class Particle {\n constructor() {\n this.init();\n }\n\n init(explode = false) {\n const angle = Math.random() * Math.PI * 2;\n \/\/ If exploding (changing product), start from center\n const radius = explode ? Math.random() * 50 : Math.random() * 350 + 100;\n \n this.x = width \/ 2 + Math.cos(angle) * radius;\n this.y = height \/ 2 + Math.sin(angle) * radius;\n \n \/\/ Destination \/ Home\n const homeAngle = Math.random() * Math.PI * 2;\n const homeRadius = Math.random() * 300 + 120;\n this.originX = width \/ 2 + Math.cos(homeAngle) * homeRadius;\n this.originY = height \/ 2 + Math.sin(homeAngle) * homeRadius;\n \n this.vx = (Math.random() - 0.5) * 2;\n this.vy = (Math.random() - 0.5) * 2;\n this.friction = 0.92;\n this.ease = 0.08;\n \n this.size = Math.random() * 2 + 0.5;\n this.color = Math.random() > 0.6 ? '#4ecdc4' : '#ffffff';\n this.alpha = Math.random() * 0.5 + 0.1;\n this.tailLength = Math.random() * 25 + 5;\n }\n\n update() {\n \/\/ Mouse Interaction\n const dx = mouse.x - this.x;\n const dy = mouse.y - this.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n const forceDistance = 180;\n\n if (distance < forceDistance) {\n const force = (forceDistance - distance) \/ forceDistance;\n const angle = Math.atan2(dy, dx);\n const pushStrength = 12; \/\/ Stronger push\n \n this.vx -= Math.cos(angle) * force * pushStrength;\n this.vy -= Math.sin(angle) * force * pushStrength;\n }\n\n \/\/ Return to Home\n const homeDx = this.originX - this.x;\n const homeDy = this.originY - this.y;\n \n this.vx += homeDx * this.ease;\n this.vy += homeDy * this.ease;\n \n this.vx *= this.friction;\n this.vy *= this.friction;\n \n this.x += this.vx;\n this.y += this.vy;\n }\n\n draw() {\n ctx.beginPath();\n ctx.moveTo(this.x, this.y);\n const tailX = this.x - (this.vx * 3); \/\/ Longer trails based on speed\n const tailY = this.y - (this.vy * 3) - this.tailLength;\n ctx.lineTo(tailX, tailY);\n \n ctx.strokeStyle = this.color;\n ctx.lineWidth = this.size;\n ctx.globalAlpha = this.alpha;\n ctx.stroke();\n \n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fillStyle = '#fff';\n ctx.fill();\n }\n }\n\n function initParticles() {\n particles = [];\n for (let i = 0; i < particleCount; i++) {\n particles.push(new Particle());\n }\n }\n\n function animate() {\n ctx.clearRect(0, 0, width, height);\n \n ctx.globalAlpha = 0.03;\n ctx.strokeStyle = '#4ecdc4';\n \n particles.forEach(p => {\n p.update();\n p.draw();\n });\n\n requestAnimationFrame(animate);\n }\n\n function resize() {\n width = canvas.width = window.innerWidth;\n height = canvas.height = window.innerHeight;\n initParticles();\n }\n\n \/\/ --- Product Rotator Logic ---\n function nextProduct() {\n \/\/ 1. Fade Out\n productImg.style.opacity = '0';\n productImg.style.filter = 'blur(10px)';\n productTag.style.opacity = '0';\n \n setTimeout(() => {\n \/\/ 2. Change Source\n currentProductIndex = (currentProductIndex + 1) % products.length;\n productImg.src = products[currentProductIndex].src;\n productTag.innerText = products[currentProductIndex].tag;\n \n \/\/ 3. Reset Animation Bar\n const newBar = progressBar.cloneNode(true);\n progressBar.parentNode.replaceChild(newBar, progressBar);\n \n \/\/ 4. Fade In\n productImg.style.opacity = '1';\n productImg.style.filter = 'blur(0px) drop-shadow(0 0 50px rgba(78, 205, 196, 0.15))';\n productTag.style.opacity = '1';\n\n \/\/ 5. Trigger Particle \"Pulse\" (Re-init some to explode out)\n particles.forEach((p, i) => {\n if(i % 2 === 0) p.init(true); \/\/ Reset half particles to center\n });\n\n }, 800); \/\/ Wait for fade out\n }\n\n \/\/ Start Loop\n setInterval(nextProduct, slideDuration);\n\n\n \/\/ Listeners\n window.addEventListener('resize', resize);\n window.addEventListener('mousemove', e => {\n const rect = canvas.getBoundingClientRect();\n mouse.x = e.clientX - rect.left;\n mouse.y = e.clientY - rect.top;\n \n \/\/ Parallax\n const xPercent = (e.clientX \/ window.innerWidth - 0.5) * 30;\n const yPercent = (e.clientY \/ window.innerHeight - 0.5) * 30;\n \/\/ Apply transform while keeping it centered (-50%, -50%)\n productImg.style.transform = `translate(calc(-50% + ${xPercent}px), calc(-50% + ${yPercent}px))`;\n });\n\n window.addEventListener('touchmove', e => {\n const rect = canvas.getBoundingClientRect();\n mouse.x = e.touches[0].clientX - rect.left;\n mouse.y = e.touches[0].clientY - rect.top;\n });\n\n \/\/ Boot\n resize();\n animate();\n\n<\/script>\n\n<\/body>\n<\/html>\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>Precision Orthopedics | Ultra Premium Hero Medical Grade Engineering Beyond Human Limits. Architecting the next generation of orthopedic recovery systems.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6906","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/unicare.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/6906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unicare.com.tr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/unicare.com.tr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/unicare.com.tr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unicare.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6906"}],"version-history":[{"count":257,"href":"https:\/\/unicare.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/6906\/revisions"}],"predecessor-version":[{"id":29504,"href":"https:\/\/unicare.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/6906\/revisions\/29504"}],"wp:attachment":[{"href":"https:\/\/unicare.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}