Leadership Core<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n \/* --- VARIABLES --- *\/\n :root {\n --primary: #4ecdc4;\n --accent: #FF9F1C;\n --bg-dark: #050505;\n --card-bg: rgba(20, 20, 25, 0.4);\n --border: rgba(255, 255, 255, 0.1);\n }\n\n body { margin: 0; background: var(--bg-dark); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; color: #fff; }\n\n \/* --- WRAPPER --- *\/\n .team-section {\n padding: 120px 0;\n background: radial-gradient(circle at center, #0a0a0a 0%, #000000 100%);\n position: relative;\n overflow: hidden;\n }\n\n .team-bg-grid {\n position: absolute;\n inset: 0;\n background-image: \n linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\n background-size: 40px 40px;\n opacity: 0.5;\n pointer-events: none;\n }\n\n .team-container {\n max-width: 1600px; \/* Increased max-width to fit 3 cards comfortably *\/\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n z-index: 10;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n \/* --- HEADER --- *\/\n .team-header {\n text-align: center;\n margin-bottom: 80px;\n }\n\n .team-header h2 {\n font-family: 'Rajdhani', sans-serif;\n font-size: 48px;\n text-transform: uppercase;\n margin: 0 0 10px;\n letter-spacing: 2px;\n }\n\n .team-header span {\n color: var(--primary);\n font-size: 14px;\n letter-spacing: 4px;\n text-transform: uppercase;\n font-weight: 700;\n }\n\n \/* --- GRID (Single Row) --- *\/\n .team-grid {\n display: flex;\n justify-content: center;\n gap: 30px;\n flex-wrap: wrap;\n width: 100%;\n align-items: flex-end; \/* Align bottom to handle different heights if any *\/\n }\n\n \/* --- ID CARD --- *\/\n .id-card {\n width: 360px;\n min-height: 500px;\n background: var(--card-bg);\n border: 1px solid var(--border);\n border-radius: 20px;\n position: relative;\n backdrop-filter: blur(15px);\n transition: transform 0.1s;\n transform-style: preserve-3d;\n box-shadow: 0 20px 50px rgba(0,0,0,0.5);\n }\n\n \/* Highlight Center Card (Hamid) *\/\n .id-card.center-card {\n transform: scale(1.05); \/* Slightly larger *\/\n border-color: var(--accent);\n z-index: 2;\n box-shadow: 0 30px 60px rgba(255, 159, 28, 0.15);\n }\n\n \/* Hover Glow *\/\n .id-card::before {\n content: '';\n position: absolute;\n inset: -1px;\n border-radius: 20px;\n background: linear-gradient(45deg, transparent, rgba(78, 205, 196, 0.3), transparent);\n z-index: -1;\n opacity: 0;\n transition: 0.5s;\n }\n .id-card:hover::before { opacity: 1; }\n\n \/* Card Header (Photo Area) *\/\n .card-photo-area {\n height: 280px;\n position: relative;\n border-bottom: 1px solid var(--border);\n overflow: hidden;\n border-radius: 20px 20px 0 0;\n background: #0f0f0f;\n }\n \n .center-card .card-photo-area { height: 300px; } \/* Slightly taller photo for GM *\/\n\n .card-photo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: grayscale(100%) contrast(1.2);\n transition: 0.5s;\n opacity: 0.8;\n }\n\n .id-card:hover .card-photo {\n filter: grayscale(0%) contrast(1);\n opacity: 1;\n transform: scale(1.05);\n }\n\n \/* Scanner Line Overlay *\/\n .scanner-overlay {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.5) 3px);\n pointer-events: none;\n z-index: 2;\n opacity: 0.3;\n }\n\n \/* Status Badge *\/\n .status-badge {\n position: absolute;\n top: 20px; right: 20px;\n background: rgba(0,0,0,0.8);\n border: 1px solid var(--primary);\n color: var(--primary);\n padding: 5px 12px;\n font-family: 'Rajdhani';\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n border-radius: 4px;\n z-index: 5;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n .center-card .status-badge { border-color: var(--accent); color: var(--accent); }\n .status-dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; animation: blink 2s infinite; }\n @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }\n\n \/* Card Body *\/\n .card-body {\n padding: 30px;\n position: relative;\n transform: translateZ(30px);\n }\n\n .role-label {\n color: var(--accent);\n font-family: 'Rajdhani';\n font-size: 12px;\n letter-spacing: 2px;\n text-transform: uppercase;\n display: block;\n margin-bottom: 5px;\n }\n\n .name-label {\n font-size: 32px;\n font-weight: 700;\n color: #fff;\n margin: 0 0 20px;\n font-family: 'Rajdhani';\n text-transform: uppercase;\n }\n\n \/* Contact Grid *\/\n .contact-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 10px;\n }\n\n .contact-btn {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: rgba(255,255,255,0.03);\n border: 1px solid var(--border);\n padding: 12px 20px;\n border-radius: 8px;\n text-decoration: none;\n color: #ccc;\n font-size: 13px;\n transition: 0.3s;\n }\n\n .contact-btn:hover {\n background: var(--primary);\n color: #000;\n border-color: var(--primary);\n transform: translateX(5px);\n }\n \n .center-card .contact-btn:hover { background: var(--accent); border-color: var(--accent); }\n\n .contact-btn i { font-size: 16px; }\n\n \/* Decor Elements *\/\n .deco-line {\n position: absolute;\n bottom: 0; left: 0;\n width: 100%; height: 3px;\n background: var(--primary);\n transform: scaleX(0);\n transform-origin: left;\n transition: 0.5s;\n }\n .id-card:hover .deco-line { transform: scaleX(1); }\n .center-card .deco-line { background: var(--accent); }\n\n @media (max-width: 1200px) {\n .team-grid { flex-wrap: wrap; }\n .center-card { transform: scale(1); width: 360px; order: -1; \/* Move top on mobile *\/ }\n }\n <\/style>\n<\/head>\n<body>\n\n<section class=\"team-section\">\n <div class=\"team-bg-grid\"><\/div>\n \n <div class=\"team-container\">\n \n <div class=\"team-header\">\n <span>Executive Command<\/span>\n <h2>Leadership Team<\/h2>\n <\/div>\n\n <div class=\"team-grid\">\n \n \n <div class=\"id-card\">\n <div class=\"card-photo-area\">\n <div class=\"scanner-overlay\"><\/div>\n <div class=\"status-badge\"><span class=\"status-dot\"><\/span> SALES<\/div>\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/IMG_7198.jpg\" class=\"card-photo\" alt=\"Hamed Rigi\"> \n <\/div>\n \n <div class=\"card-body\">\n <span class=\"role-label\" style=\"color:#4ecdc4;\">Sales Director<\/span>\n <h3 class=\"name-label\">Hamed Rigi<\/h3>\n \n <div class=\"contact-grid\">\n <a href=\"https:\/\/api.whatsapp.com\/send?phone=905451930081\" target=\"_blank\" class=\"contact-btn\">\n <span><i class=\"fa-brands fa-whatsapp\" style=\"color:#25D366;\"><\/i> WhatsApp<\/span>\n <span>→<\/span>\n <\/a>\n <a href=\"mailto:sales@unicare.com.tr\" class=\"contact-btn\">\n <span><i class=\"fa-regular fa-envelope\"><\/i> Email<\/span>\n <span>→<\/span>\n <\/a>\n <\/div>\n <\/div>\n <div class=\"deco-line\" style=\"background:#4ecdc4;\"><\/div>\n <\/div>\n\n \n <div class=\"id-card center-card\">\n <div class=\"card-photo-area\">\n <div class=\"scanner-overlay\"><\/div>\n <div class=\"status-badge\" style=\"border-color:#FF9F1C; color:#FF9F1C;\"><span class=\"status-dot\" style=\"background:#FF9F1C;\"><\/span> ADMIN<\/div>\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/IMG_7206.jpg\" class=\"card-photo\" alt=\"Hamid Rigi\">\n <\/div>\n \n <div class=\"card-body\">\n <span class=\"role-label\" style=\"color:#FF9F1C;\">General Manager<\/span>\n <h3 class=\"name-label\">Hamid Rigi<\/h3>\n \n <div class=\"contact-grid\">\n <a href=\"https:\/\/api.whatsapp.com\/send?phone=905461950081\" target=\"_blank\" class=\"contact-btn\" style=\"border-color: rgba(255, 159, 28, 0.3);\">\n <span><i class=\"fa-brands fa-whatsapp\" style=\"color:#25D366;\"><\/i> WhatsApp<\/span>\n <span>→<\/span>\n <\/a>\n <a href=\"mailto:info@unicare.com.tr\" class=\"contact-btn\">\n <span><i class=\"fa-regular fa-envelope\"><\/i> Email<\/span>\n <span>→<\/span>\n <\/a>\n <\/div>\n <\/div>\n <div class=\"deco-line\" style=\"background:#FF9F1C;\"><\/div>\n <\/div>\n\n \n <div class=\"id-card\">\n <div class=\"card-photo-area\">\n <div class=\"scanner-overlay\"><\/div>\n <div class=\"status-badge\" style=\"border-color:#00d2ff; color:#00d2ff;\"><span class=\"status-dot\" style=\"background:#00d2ff;\"><\/span> EXPORT<\/div>\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/IMG_7200.jpg\" class=\"card-photo\" alt=\"Siavash Lotfi\">\n <\/div>\n \n <div class=\"card-body\">\n <span class=\"role-label\" style=\"color:#00d2ff;\">Export Director<\/span>\n <h3 class=\"name-label\">Siavash Lotfi<\/h3>\n \n <div class=\"contact-grid\">\n <a href=\"https:\/\/api.whatsapp.com\/send?phone=90556308230\" target=\"_blank\" class=\"contact-btn\" style=\"border-color: rgba(0, 210, 255, 0.3);\">\n <span><i class=\"fa-brands fa-whatsapp\" style=\"color:#25D366;\"><\/i> WhatsApp<\/span>\n <span>→<\/span>\n <\/a>\n <a href=\"mailto:export@unicare.com.tr\" class=\"contact-btn\">\n <span><i class=\"fa-regular fa-envelope\"><\/i> Email<\/span>\n <span>→<\/span>\n <\/a>\n <\/div>\n <\/div>\n <div class=\"deco-line\" style=\"background:#00d2ff;\"><\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n const cards = document.querySelectorAll('.id-card');\n cards.forEach(card => {\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 const centerX = rect.width \/ 2;\n const centerY = rect.height \/ 2;\n const rotateX = ((y - centerY) \/ centerY) * -10;\n const rotateY = ((x - centerX) \/ centerX) * 10;\n card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\n if(card.classList.contains('center-card')) {\n card.style.transform += ' scale(1.05)';\n }\n });\n card.addEventListener('mouseleave', () => {\n card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg)`;\n if(card.classList.contains('center-card')) {\n card.style.transform += ' scale(1.05)';\n }\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-d3f663b e-flex e-con-boxed e-con e-parent\" data-id=\"d3f663b\" 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-d023da5 elementor-widget elementor-widget-html\" data-id=\"d023da5\" 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>Strategic Location<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <style>\n \/* --- VARIABLES --- *\/\n :root {\n --primary: #4ecdc4;\n --accent: #FF9F1C;\n --bg-dark: #050505;\n --panel: rgba(10, 10, 12, 0.8);\n --border: rgba(255, 255, 255, 0.1);\n }\n\n \/* Fix for Elementor Container preventing full width *\/\n body { margin: 0; background: var(--bg-dark); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; color: #fff; }\n \n \/* --- WRAPPER (Elementor Fix) --- *\/\n .location-section {\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: 900px; \/* Taller to fit everything *\/\n overflow: hidden !important;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #020202;\n z-index: 1;\n }\n\n \/* --- 3D CANVAS --- *\/\n #city-canvas {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n z-index: 1;\n \/* Fades top and bottom to blend nicely *\/\n mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);\n -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);\n }\n\n \/* --- UI OVERLAY (Split Top\/Bottom) --- *\/\n .loc-overlay {\n position: relative;\n z-index: 10;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between; \/* Push content to edges *\/\n width: 100%;\n max-width: 1400px;\n height: 100%;\n padding: 80px 20px; \/* Padding top\/bottom *\/\n pointer-events: none;\n }\n\n \/* HEADER (Top) *\/\n .loc-header {\n text-align: center;\n text-shadow: 0 10px 40px rgba(0,0,0,0.9);\n margin-top: 20px;\n }\n\n .loc-header h2 {\n font-family: 'Rajdhani', sans-serif;\n font-size: clamp(50px, 6vw, 90px);\n text-transform: uppercase;\n margin: 0;\n letter-spacing: 2px;\n line-height: 0.9;\n }\n\n .loc-header span {\n color: var(--primary);\n font-size: 14px;\n letter-spacing: 6px;\n font-weight: 700;\n text-transform: uppercase;\n display: block;\n margin-bottom: 10px;\n }\n\n \/* ADDRESS CARD (Bottom) *\/\n .address-card {\n background: rgba(10, 15, 20, 0.75);\n backdrop-filter: blur(20px);\n border: 1px solid var(--border);\n border-top: 3px solid var(--accent);\n padding: 30px 40px;\n border-radius: 12px;\n width: 100%;\n max-width: 500px;\n pointer-events: auto; \/* Enable clicks *\/\n transition: 0.3s;\n box-shadow: 0 30px 80px rgba(0,0,0,0.6);\n text-align: center;\n margin-bottom: 40px;\n }\n\n .address-card:hover {\n border-color: var(--accent);\n transform: translateY(-5px);\n }\n\n .card-label {\n font-family: 'Rajdhani';\n font-size: 12px;\n color: var(--accent);\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n }\n\n .card-address {\n font-size: 15px;\n line-height: 1.6;\n color: #ccc;\n margin-bottom: 25px;\n }\n \n .card-address strong { display: block; margin-bottom: 5px; font-size: 18px; color: #fff; }\n\n .loc-btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: rgba(255,255,255,0.05);\n border: 1px solid var(--border);\n padding: 12px 30px;\n font-size: 13px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #fff;\n text-decoration: none;\n transition: 0.3s;\n font-weight: 700;\n border-radius: 4px;\n }\n\n .loc-btn:hover {\n background: var(--accent);\n color: #000;\n border-color: var(--accent);\n }\n\n \/* --- SCANNER EFFECT --- *\/\n .scanner-line {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 2px;\n background: var(--primary);\n box-shadow: 0 0 20px var(--primary);\n opacity: 0.3;\n animation: scan 6s linear infinite;\n pointer-events: none;\n z-index: 5;\n }\n\n @keyframes scan {\n 0% { top: 0%; opacity: 0; }\n 10% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { top: 100%; opacity: 0; }\n }\n\n \/* Coordinates Decor *\/\n .coords {\n position: absolute;\n top: 50%; right: 40px;\n transform: translateY(-50%) rotate(90deg);\n font-family: 'Rajdhani';\n font-size: 12px;\n color: rgba(255,255,255,0.2);\n z-index: 10;\n letter-spacing: 3px;\n white-space: nowrap;\n }\n\n @media (max-width: 768px) {\n .location-section { height: 800px; }\n .loc-header h2 { font-size: 40px; }\n .address-card { padding: 25px 20px; width: 95%; margin-bottom: 20px; }\n .coords { display: none; }\n }\n <\/style>\n<\/head>\n<body>\n\n<section class=\"location-section\">\n \n \n <div id=\"city-canvas\"><\/div>\n <div class=\"scanner-line\"><\/div>\n\n <div class=\"loc-overlay\">\n \n <div class=\"loc-header\">\n <span>Production Base<\/span>\n <h2>Digital Twin<\/h2>\n <\/div>\n\n \n <div class=\"address-card\">\n <div class=\"card-label\">\n <i class=\"fa-solid fa-satellite-dish\"><\/i>\n <span>HQ Coordinates: LIVE<\/span>\n <\/div>\n \n <div class=\"card-address\">\n <strong>YEN\u0130DO\u011eAN MAH. RAM\u0130 KI\u015eLA CAD.<\/strong>\n NUR SANAY\u0130 S\u0130TES\u0130 NO 69<br>\n \u0130\u00c7 KAPI NO: 20<br>\n BAYRAMPA\u015eA \/ \u0130STANBUL\n <\/div>\n\n <a href=\"https:\/\/maps.app.goo.gl\/ZaqtCtdXTr85Eq5b9?g_st=ipc\" target=\"_blank\" class=\"loc-btn\">\n <i class=\"fa-solid fa-location-arrow\"><\/i> Open Google Maps\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"coords\">\n LAT: 41.0422\u00b0 N | LNG: 28.9134\u00b0 E\n <\/div>\n\n<\/section>\n\n<script>\n const container = document.getElementById('city-canvas');\n\n \/\/ --- THREE.JS SETUP ---\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x050505); \n scene.fog = new THREE.Fog(0x050505, 10, 100); \n\n const camera = new THREE.PerspectiveCamera(45, container.offsetWidth \/ container.offsetHeight, 0.1, 1000);\n \n \/\/ CAMERA: Moved UP and Back to show center building clearly\n camera.position.set(0, 35, 50); \n camera.lookAt(0, 0, 0); \n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.offsetWidth, container.offsetHeight);\n container.appendChild(renderer.domElement);\n\n \/\/ --- PROCEDURAL CITY ---\n const cityGroup = new THREE.Group();\n scene.add(cityGroup);\n\n const geometry = new THREE.BoxGeometry(1, 1, 1);\n geometry.translate(0, 0.5, 0); \n\n const material = new THREE.MeshPhongMaterial({ color: 0x333333, flatShading: true, shininess: 30 });\n const wireframeMat = new THREE.LineBasicMaterial({ color: 0x4ecdc4, transparent: true, opacity: 0.15 });\n\n const gridSize = 35; \/\/ Wide grid for full width\n const spacing = 1.5;\n\n for (let x = -gridSize; x <= gridSize; x++) {\n for (let z = -gridSize; z <= gridSize; z++) {\n \n \/\/ Create a larger clearing in the center for the factory to be visible\n if (Math.abs(x) < 5 && Math.abs(z) < 4) continue;\n\n \/\/ Random height but keeping center-ish buildings lower so they don't block view\n let dist = Math.sqrt(x*x + z*z);\n let height = Math.random() * Math.random() * 5 + 0.2;\n \n const mesh = new THREE.Mesh(geometry, material);\n mesh.position.set(x * spacing, 0, z * spacing);\n mesh.scale.set(1, height, 1);\n mesh.updateMatrix();\n \n const edges = new THREE.EdgesGeometry(geometry);\n const line = new THREE.LineSegments(edges, wireframeMat);\n line.position.copy(mesh.position);\n line.scale.copy(mesh.scale);\n \n cityGroup.add(mesh);\n cityGroup.add(line);\n }\n }\n\n \/\/ --- FACTORY (CENTERED & PROMINENT) ---\n const factoryGroup = new THREE.Group();\n cityGroup.add(factoryGroup);\n\n \/\/ Main Building\n const factoryGeo = new THREE.BoxGeometry(6, 3, 5); \/\/ Taller and bigger\n factoryGeo.translate(0, 1.5, 0);\n const factoryMat = new THREE.MeshPhongMaterial({ color: 0x222222, emissive: 0xFF9F1C, emissiveIntensity: 0.6 });\n const factory = new THREE.Mesh(factoryGeo, factoryMat);\n factoryGroup.add(factory);\n\n \/\/ Beacons (4 Corners + Center)\n const beaconGeo = new THREE.CylinderGeometry(0.05, 0.05, 100, 8);\n const beaconMat = new THREE.MeshBasicMaterial({ color: 0xFF9F1C, transparent: true, opacity: 0.5 });\n \n const b1 = new THREE.Mesh(beaconGeo, beaconMat); b1.position.set(2.8, 50, 2.3); factoryGroup.add(b1);\n const b2 = new THREE.Mesh(beaconGeo, beaconMat); b2.position.set(-2.8, 50, 2.3); factoryGroup.add(b2);\n const b3 = new THREE.Mesh(beaconGeo, beaconMat); b3.position.set(2.8, 50, -2.3); factoryGroup.add(b3);\n const b4 = new THREE.Mesh(beaconGeo, beaconMat); b4.position.set(-2.8, 50, -2.3); factoryGroup.add(b4);\n\n \/\/ Center Main Beam\n const mainBeamGeo = new THREE.CylinderGeometry(0.2, 0.2, 120, 8);\n const mainBeamMat = new THREE.MeshBasicMaterial({ color: 0x4ecdc4, transparent: true, opacity: 0.9 });\n const mainBeam = new THREE.Mesh(mainBeamGeo, mainBeamMat);\n mainBeam.position.set(0, 60, 0);\n factoryGroup.add(mainBeam);\n\n \/\/ Pulse Ring around Factory\n const ringGeo = new THREE.RingGeometry(5, 5.2, 64);\n const ringMat = new THREE.MeshBasicMaterial({ color: 0x4ecdc4, transparent: true, opacity: 0.5, side: THREE.DoubleSide });\n const ring = new THREE.Mesh(ringGeo, ringMat);\n ring.rotation.x = -Math.PI \/ 2;\n ring.position.y = 0.2;\n factoryGroup.add(ring);\n\n \/\/ --- LIGHTS ---\n const ambientLight = new THREE.AmbientLight(0xffffff, 1.8);\n scene.add(ambientLight);\n const dirLight = new THREE.DirectionalLight(0x4ecdc4, 3);\n dirLight.position.set(10, 30, 10);\n scene.add(dirLight);\n const pointLight = new THREE.PointLight(0xffffff, 3, 80);\n pointLight.position.set(0, 20, 0); \/\/ Light right above factory\n scene.add(pointLight);\n\n \/\/ --- ANIMATION ---\n let mouseX = 0;\n \n function animate() {\n requestAnimationFrame(animate);\n \n \/\/ Slow rotation of the city\n cityGroup.rotation.y += 0.001;\n\n \/\/ Subtle Parallax\n const targetX = mouseX * 2; \n const clampedX = Math.max(-10, Math.min(10, targetX));\n camera.position.x += (clampedX - camera.position.x) * 0.05;\n camera.lookAt(0, 5, 0); \/\/ Look slightly up at factory\n\n \/\/ Ring Pulse\n const scale = 1 + (Date.now() % 2500) \/ 600;\n ring.scale.set(scale, scale, 1);\n ring.material.opacity = 0.8 - (scale \/ 5);\n\n renderer.render(scene, camera);\n }\n\n animate();\n\n window.addEventListener('resize', () => {\n camera.aspect = container.offsetWidth \/ container.offsetHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.offsetWidth, container.offsetHeight);\n });\n\n document.addEventListener('mousemove', (e) => {\n mouseX = (e.clientX \/ window.innerWidth) - 0.5;\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-eb9792b e-flex e-con-boxed e-con e-parent\" data-id=\"eb9792b\" 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-4a22e22 elementor-widget elementor-widget-html\" data-id=\"4a22e22\" 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>Global Operations Time<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;600&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n \/* --- VARIABLES --- *\/\n :root {\n --primary: #4ecdc4;\n --accent: #FF9F1C;\n --bg-dark: #050505;\n --panel: rgba(20, 20, 25, 0.6);\n --border: rgba(255, 255, 255, 0.1);\n }\n\n body { margin: 0; background: var(--bg-dark); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; color: #fff; }\n\n \/* --- WRAPPER --- *\/\n .time-section {\n padding: 80px 0;\n background: #020202;\n position: relative;\n border-top: 1px solid var(--border);\n }\n\n .time-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n\n .time-header {\n text-align: center;\n margin-bottom: 50px;\n }\n .time-header h3 {\n font-family: 'Rajdhani';\n font-size: 32px;\n text-transform: uppercase;\n margin: 0;\n color: #fff;\n }\n .time-header span {\n color: var(--primary);\n font-size: 12px;\n letter-spacing: 3px;\n text-transform: uppercase;\n display: block;\n margin-bottom: 5px;\n }\n\n \/* --- GRID --- *\/\n .clock-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n }\n\n \/* --- CLOCK CARD --- *\/\n .clock-card {\n background: rgba(255, 255, 255, 0.03);\n border: 1px solid var(--border);\n padding: 25px;\n border-radius: 12px;\n position: relative;\n overflow: hidden;\n transition: 0.3s;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .clock-card:hover {\n transform: translateY(-5px);\n border-color: var(--primary);\n background: rgba(255, 255, 255, 0.05);\n }\n\n \/* HQ Highlight *\/\n .clock-card.hq {\n border-color: var(--accent);\n background: rgba(255, 159, 28, 0.05);\n }\n .clock-card.hq:hover {\n box-shadow: 0 0 30px rgba(255, 159, 28, 0.1);\n }\n\n .city-label {\n font-family: 'Rajdhani';\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #888;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .hq .city-label { color: var(--accent); font-weight: 700; }\n\n .time-display {\n font-family: 'Rajdhani';\n font-size: 48px;\n font-weight: 700;\n color: #fff;\n line-height: 1;\n text-shadow: 0 0 20px rgba(255,255,255,0.1);\n }\n\n .date-display {\n font-size: 12px;\n color: #555;\n margin-top: 5px;\n }\n\n .status-indicator {\n margin-top: 15px;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 1px;\n padding: 4px 10px;\n border-radius: 4px;\n background: rgba(255,255,255,0.05);\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .dot { width: 6px; height: 6px; border-radius: 50%; }\n .open .dot { background: #25D366; box-shadow: 0 0 8px #25D366; }\n .open { color: #25D366; border: 1px solid rgba(37, 211, 102, 0.2); }\n \n .closed .dot { background: #FF4444; box-shadow: 0 0 8px #FF4444; }\n .closed { color: #FF4444; border: 1px solid rgba(255, 68, 68, 0.2); }\n\n \/* World Icons Background *\/\n .clock-bg-icon {\n position: absolute;\n right: -10px; bottom: -10px;\n font-size: 80px;\n color: rgba(255,255,255,0.02);\n z-index: 0;\n pointer-events: none;\n }\n\n <\/style>\n<\/head>\n<body>\n\n<section class=\"time-section\">\n <div class=\"time-container\">\n \n <div class=\"time-header\">\n <span>Global Synchronization<\/span>\n <h3>Operations Status<\/h3>\n <\/div>\n\n <div class=\"clock-grid\">\n \n \n <div class=\"clock-card\" id=\"clock-ny\">\n <i class=\"fa-solid fa-building clock-bg-icon\"><\/i>\n <div class=\"city-label\">New York <span style=\"font-size:10px; opacity:0.5;\">EST<\/span><\/div>\n <div class=\"time-display\">--:--<\/div>\n <div class=\"date-display\">LOADING...<\/div>\n <div class=\"status-indicator closed\">\n <span class=\"dot\"><\/span> OFFICE CLOSED\n <\/div>\n <\/div>\n\n \n <div class=\"clock-card\" id=\"clock-london\">\n <i class=\"fa-solid fa-landmark clock-bg-icon\"><\/i>\n <div class=\"city-label\">London <span style=\"font-size:10px; opacity:0.5;\">GMT<\/span><\/div>\n <div class=\"time-display\">--:--<\/div>\n <div class=\"date-display\">LOADING...<\/div>\n <div class=\"status-indicator closed\">\n <span class=\"dot\"><\/span> OFFICE CLOSED\n <\/div>\n <\/div>\n\n \n <div class=\"clock-card hq\" id=\"clock-istanbul\">\n <i class=\"fa-solid fa-industry clock-bg-icon\" style=\"color:rgba(255, 159, 28, 0.05);\"><\/i>\n <div class=\"city-label\"><i class=\"fa-solid fa-star\"><\/i> Istanbul HQ<\/div>\n <div class=\"time-display\" style=\"color:var(--accent); text-shadow:0 0 20px rgba(255, 159, 28, 0.4);\">--:--<\/div>\n <div class=\"date-display\">LOADING...<\/div>\n <div class=\"status-indicator open\">\n <span class=\"dot\"><\/span> FACTORY ACTIVE\n <\/div>\n <\/div>\n\n \n <div class=\"clock-card\" id=\"clock-tokyo\">\n <i class=\"fa-solid fa-torii-gate clock-bg-icon\"><\/i>\n <div class=\"city-label\">Tokyo <span style=\"font-size:10px; opacity:0.5;\">JST<\/span><\/div>\n <div class=\"time-display\">--:--<\/div>\n <div class=\"date-display\">LOADING...<\/div>\n <div class=\"status-indicator closed\">\n <span class=\"dot\"><\/span> OFFICE CLOSED\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n function updateClocks() {\n const zones = [\n { id: 'ny', tz: 'America\/New_York', start: 9, end: 17 },\n { id: 'london', tz: 'Europe\/London', start: 9, end: 17 },\n { id: 'istanbul', tz: 'Europe\/Istanbul', start: 9, end: 19 }, \/\/ HQ longer hours\n { id: 'tokyo', tz: 'Asia\/Tokyo', start: 9, end: 18 }\n ];\n\n const now = new Date();\n\n zones.forEach(zone => {\n const el = document.getElementById(`clock-${zone.id}`);\n \n \/\/ Get Time in Zone\n const options = { timeZone: zone.tz, hour: '2-digit', minute: '2-digit', hour12: false };\n const timeString = new Intl.DateTimeFormat('en-US', options).format(now);\n \n \/\/ Get Hour for Status\n const hour = parseInt(new Intl.DateTimeFormat('en-US', { timeZone: zone.tz, hour: 'numeric', hour12: false }).format(now));\n \n \/\/ Get Date\n const dateString = new Intl.DateTimeFormat('en-US', { timeZone: zone.tz, weekday: 'short', month: 'short', day: 'numeric' }).format(now);\n\n \/\/ Update DOM\n el.querySelector('.time-display').innerText = timeString;\n el.querySelector('.date-display').innerText = dateString;\n\n \/\/ Update Status (Open\/Closed)\n const statusEl = el.querySelector('.status-indicator');\n const isOpen = hour >= zone.start && hour < zone.end;\n \n if(isOpen) {\n statusEl.className = 'status-indicator open';\n statusEl.innerHTML = '<span class=\"dot\"><\/span> OPEN NOW';\n } else {\n statusEl.className = 'status-indicator closed';\n statusEl.innerHTML = '<span class=\"dot\"><\/span> CLOSED';\n }\n });\n }\n\n \/\/ Update every second\n setInterval(updateClocks, 1000);\n updateClocks(); \/\/ Run immediately\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-73f7ab7 e-flex e-con-boxed e-con e-parent\" data-id=\"73f7ab7\" 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-1124483 elementor-widget elementor-widget-html\" data-id=\"1124483\" 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>Global Distribution Network<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;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 \/* --- VARIABLES --- *\/\n :root {\n --primary: #4ecdc4;\n --accent: #FF9F1C;\n --bg-dark: #050505;\n --glass: rgba(255, 255, 255, 0.05);\n --border: rgba(255, 255, 255, 0.1);\n }\n\n \/* RESET ELEMENTOR CONTAINERS *\/\n .elementor-widget-html, .elementor-widget-html .elementor-widget-container { margin: 0 !important; padding: 0 !important; width: 100% !important; }\n \n body { margin: 0; background: var(--bg-dark); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; color: #fff; }\n\n \/* --- SECTION WRAPPER (FORCE FULL WIDTH) --- *\/\n .network-section {\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: 800px; \/* Increased height for better centering *\/\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #000;\n }\n\n \/* --- 3D CANVAS --- *\/\n #network-canvas {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n z-index: 1;\n }\n\n \/* --- CONTENT OVERLAY --- *\/\n .net-content {\n position: relative;\n z-index: 10;\n text-align: center;\n max-width: 900px;\n padding: 0 20px;\n pointer-events: none; \/* Allow interaction with canvas *\/\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .net-tag {\n color: var(--accent);\n font-family: 'Rajdhani';\n font-weight: 700;\n letter-spacing: 4px;\n text-transform: uppercase;\n font-size: 14px;\n margin-bottom: 30px;\n display: inline-block;\n border: 1px solid var(--accent);\n padding: 10px 25px;\n background: rgba(255, 159, 28, 0.1);\n backdrop-filter: blur(5px);\n border-radius: 4px;\n }\n\n .net-title {\n font-family: 'Rajdhani', sans-serif;\n font-size: clamp(50px, 8vw, 100px);\n font-weight: 800;\n line-height: 0.9;\n margin: 0 0 30px 0;\n text-transform: uppercase;\n text-shadow: 0 0 80px rgba(78, 205, 196, 0.4);\n }\n\n .net-desc {\n font-size: 18px;\n color: #ccc;\n line-height: 1.7;\n margin-bottom: 50px;\n max-width: 650px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* --- CTA BUTTON (Glassmorphism) --- *\/\n .join-btn-wrapper {\n pointer-events: auto; \/* Enable clicks *\/\n display: inline-block;\n position: relative;\n }\n\n .join-btn {\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.2);\n color: #fff;\n font-family: 'Rajdhani';\n font-size: 18px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 2px;\n padding: 20px 60px;\n text-decoration: none;\n transition: 0.4s;\n overflow: hidden;\n position: relative;\n display: flex;\n align-items: center;\n gap: 15px;\n backdrop-filter: blur(10px);\n border-radius: 4px;\n }\n\n .join-btn::before {\n content: '';\n position: absolute;\n top: 0; left: -100%;\n width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.4), transparent);\n transition: 0.5s;\n }\n\n .join-btn:hover::before { left: 100%; }\n \n .join-btn:hover {\n border-color: var(--primary);\n box-shadow: 0 0 30px rgba(78, 205, 196, 0.4);\n transform: scale(1.05);\n }\n\n \/* --- STATS FLOATING --- *\/\n .floating-stat {\n position: absolute;\n background: rgba(0,0,0,0.6);\n border: 1px solid var(--border);\n padding: 12px 25px;\n border-radius: 50px;\n font-family: 'Rajdhani';\n font-size: 12px;\n color: #aaa;\n backdrop-filter: blur(5px);\n pointer-events: none;\n white-space: nowrap;\n z-index: 15;\n }\n \n .floating-stat strong { color: #fff; font-size: 18px; margin-right: 8px; color: var(--primary); }\n .stat-1 { top: 20%; left: 15%; animation: float 6s infinite ease-in-out; }\n .stat-2 { bottom: 20%; right: 15%; animation: float 8s infinite ease-in-out reverse; }\n \n @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }\n\n @media (max-width: 768px) {\n .stat-1 { top: 10%; left: 5%; }\n .stat-2 { bottom: 10%; right: 5%; }\n .network-section { height: 600px; }\n }\n\n <\/style>\n<\/head>\n<body>\n\n<section class=\"network-section\">\n \n \n <div id=\"network-canvas\"><\/div>\n\n \n <div class=\"net-content\">\n <span class=\"net-tag\">B2B Partnership<\/span>\n <h2 class=\"net-title\">Join The<br><span style=\"color:transparent; -webkit-text-stroke:1px #fff;\">Network<\/span><\/h2>\n <p class=\"net-desc\">\n Become an authorized distributor. Access premium ISO-certified inventory, marketing assets, and 24\/7 priority support from our Istanbul HQ.\n <\/p>\n \n <div class=\"join-btn-wrapper\">\n <a href=\"https:\/\/unicare.com.tr\/?page_id=4439\" class=\"join-btn\">\n Apply Now <span>→<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"floating-stat stat-1\">\n <strong>55+<\/strong> Active Countries\n <\/div>\n <div class=\"floating-stat stat-2\">\n <strong>24h<\/strong> Dispatch Time\n <\/div>\n\n<\/section>\n\n<script>\n const container = document.getElementById('network-canvas');\n\n \/\/ --- THREE.JS SETUP ---\n const scene = new THREE.Scene();\n \/\/ Deep dark teal-black gradient simulation\n scene.fog = new THREE.FogExp2(0x000000, 0.002);\n\n const camera = new THREE.PerspectiveCamera(55, container.offsetWidth \/ container.offsetHeight, 1, 1000);\n camera.position.z = 100;\n\n const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\n renderer.setSize(container.offsetWidth, container.offsetHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n \/\/ --- PARTICLES (THE NETWORK) ---\n const particleCount = 200;\n const particles = new THREE.BufferGeometry();\n const positions = new Float32Array(particleCount * 3);\n const velocities = []; \/\/ Store velocity for each particle\n\n \/\/ Interaction Data\n const mouse = new THREE.Vector2();\n const raycaster = new THREE.Raycaster();\n const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0); \/\/ Invisible plane for raycasting\n\n for (let i = 0; i < particleCount; i++) {\n \/\/ Spread particles\n positions[i * 3] = (Math.random() - 0.5) * 200; \/\/ x\n positions[i * 3 + 1] = (Math.random() - 0.5) * 150; \/\/ y\n positions[i * 3 + 2] = (Math.random() - 0.5) * 100; \/\/ z\n\n \/\/ Random velocity\n velocities.push({\n x: (Math.random() - 0.5) * 0.2,\n y: (Math.random() - 0.5) * 0.2,\n z: (Math.random() - 0.5) * 0.2\n });\n }\n\n particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n\n \/\/ Material for Dots\n const pMaterial = new THREE.PointsMaterial({\n color: 0x4ecdc4,\n size: 1.5,\n transparent: true,\n opacity: 0.8,\n sizeAttenuation: true\n });\n\n const particleSystem = new THREE.Points(particles, pMaterial);\n scene.add(particleSystem);\n\n \/\/ Lines (Dynamic Geometry)\n const lineMaterial = new THREE.LineBasicMaterial({\n color: 0x4ecdc4,\n transparent: true,\n opacity: 0.15\n });\n\n const linesGeometry = new THREE.BufferGeometry();\n const lines = new THREE.LineSegments(linesGeometry, lineMaterial);\n scene.add(lines);\n\n \/\/ --- ANIMATION LOOP ---\n function animate() {\n requestAnimationFrame(animate);\n\n const posAttr = particleSystem.geometry.attributes.position;\n const linePositions = [];\n \n \/\/ 1. Update Particles\n for (let i = 0; i < particleCount; i++) {\n \/\/ Apply velocity\n let x = posAttr.array[i * 3];\n let y = posAttr.array[i * 3 + 1];\n let z = posAttr.array[i * 3 + 2];\n\n x += velocities[i].x;\n y += velocities[i].y;\n z += velocities[i].z;\n\n \/\/ Bounce off boundaries\n if (x > 100 || x < -100) velocities[i].x *= -1;\n if (y > 75 || y < -75) velocities[i].y *= -1;\n if (z > 50 || z < -50) velocities[i].z *= -1;\n\n \/\/ Mouse Interaction (Simple Repulsion)\n \n posAttr.array[i * 3] = x;\n posAttr.array[i * 3 + 1] = y;\n posAttr.array[i * 3 + 2] = z;\n\n \/\/ 2. Check Connections (O(N^2) - keep N low)\n \/\/ Connect to nearby particles\n for (let j = i + 1; j < particleCount; j++) {\n const dx = x - posAttr.array[j * 3];\n const dy = y - posAttr.array[j * 3 + 1];\n const dz = z - posAttr.array[j * 3 + 2];\n const dist = Math.sqrt(dx*dx + dy*dy + dz*dz);\n\n if (dist < 25) { \/\/ Connection threshold\n linePositions.push(x, y, z);\n linePositions.push(posAttr.array[j * 3], posAttr.array[j * 3 + 1], posAttr.array[j * 3 + 2]);\n }\n }\n }\n\n posAttr.needsUpdate = true;\n\n \/\/ Update Lines\n lines.geometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));\n\n \/\/ Gentle Rotation\n particleSystem.rotation.y += 0.001;\n lines.rotation.y += 0.001;\n\n \/\/ Interactive Tilt\n const targetRotX = (mouse.y * 0.5);\n const targetRotY = (mouse.x * 0.5);\n \n particleSystem.rotation.x += (targetRotX - particleSystem.rotation.x) * 0.05;\n lines.rotation.x += (targetRotX - lines.rotation.x) * 0.05;\n\n renderer.render(scene, camera);\n }\n\n animate();\n\n \/\/ --- RESIZE ---\n window.addEventListener('resize', () => {\n camera.aspect = container.offsetWidth \/ container.offsetHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.offsetWidth, container.offsetHeight);\n });\n\n \/\/ --- MOUSE MOVE ---\n document.addEventListener('mousemove', (e) => {\n mouse.x = (e.clientX \/ window.innerWidth) * 2 - 1;\n mouse.y = -(e.clientY \/ window.innerHeight) * 2 + 1;\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-1a604ef e-flex e-con-boxed e-con e-parent\" data-id=\"1a604ef\" 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-4aa9057 elementor-widget elementor-widget-html\" data-id=\"4aa9057\" 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>Automated Manufacturing<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;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 \/* --- VARIABLES --- *\/\n :root {\n --primary: #4ecdc4;\n --accent: #FF9F1C;\n --bg-dark: #050505;\n --border: rgba(255, 255, 255, 0.1);\n }\n\n \/* FORCE RESET ELEMENTOR *\/\n .elementor-widget-html, \n .elementor-widget-html .elementor-widget-container,\n .elementor-section, .elementor-column { \n margin: 0 !important; \n padding: 0 !important; \n width: 100% !important; \n max-width: 100% !important;\n }\n\n body { margin: 0; background: var(--bg-dark); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; color: #fff; }\n\n \/* --- WRAPPER (Robust Full Width) --- *\/\n .assembly-section {\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: 800px;\n overflow: hidden !important;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #020202;\n z-index: 1;\n }\n\n \/* --- 3D CANVAS --- *\/\n #assembly-canvas {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n z-index: 1;\n display: block; \/* Ensure it's not hidden *\/\n }\n\n \/* --- UI OVERLAY --- *\/\n .assembly-content {\n position: relative;\n z-index: 10;\n text-align: center;\n pointer-events: none;\n max-width: 800px;\n padding: 0 20px;\n }\n\n .assembly-tag {\n color: var(--primary);\n font-family: 'Rajdhani';\n font-weight: 700;\n letter-spacing: 4px;\n text-transform: uppercase;\n font-size: 14px;\n margin-bottom: 20px;\n display: inline-block;\n border: 1px solid var(--primary);\n padding: 8px 16px;\n background: rgba(78, 205, 196, 0.1);\n backdrop-filter: blur(5px);\n }\n\n .assembly-title {\n font-family: 'Rajdhani', sans-serif;\n font-size: clamp(40px, 6vw, 80px);\n font-weight: 800;\n margin: 0 0 20px 0;\n text-transform: uppercase;\n text-shadow: 0 0 30px rgba(78, 205, 196, 0.4);\n }\n\n .assembly-desc {\n font-size: 18px;\n color: #ccc;\n line-height: 1.6;\n margin-bottom: 40px;\n }\n\n \/* --- DATA HUD --- *\/\n .hud-panel {\n position: absolute;\n bottom: 50px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 40px;\n z-index: 10;\n background: rgba(255,255,255,0.03);\n padding: 20px 40px;\n border-radius: 50px;\n border: 1px solid var(--border);\n backdrop-filter: blur(10px);\n }\n\n .hud-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .hud-val {\n font-family: 'Rajdhani';\n font-size: 24px;\n font-weight: 700;\n color: #fff;\n }\n \n .hud-label {\n font-size: 10px;\n color: var(--primary);\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-top: 5px;\n }\n\n \/* --- GRADIENT VIGNETTE --- *\/\n .vignette {\n position: absolute;\n inset: 0;\n background: radial-gradient(circle, transparent 30%, #020202 100%);\n z-index: 2;\n pointer-events: none;\n }\n\n @media (max-width: 768px) {\n .hud-panel { width: 90%; gap: 10px; justify-content: space-around; padding: 15px; }\n .hud-val { font-size: 18px; }\n .hud-label { font-size: 8px; }\n }\n\n <\/style>\n<\/head>\n<body>\n\n<section class=\"assembly-section\">\n \n <div id=\"assembly-canvas\"><\/div>\n <div class=\"vignette\"><\/div>\n\n <div class=\"assembly-content\">\n <span class=\"assembly-tag\">CNC Precision Knitting<\/span>\n <h2 class=\"assembly-title\">Crafted by<br>Intelligence<\/h2>\n <p class=\"assembly-desc\">\n Witness the synergy of man and machine. Our automated knitting systems operate with micron-level precision to create anatomically perfect supports.\n <\/p>\n <\/div>\n\n <div class=\"hud-panel\">\n <div class=\"hud-item\">\n <span class=\"hud-val\">99.8%<\/span>\n <span class=\"hud-label\">Precision Rate<\/span>\n <\/div>\n <div class=\"hud-item\">\n <span class=\"hud-val\">0.02s<\/span>\n <span class=\"hud-label\">Cycle Time<\/span>\n <\/div>\n <div class=\"hud-item\">\n <span class=\"hud-val\">ZERO<\/span>\n <span class=\"hud-label\">Defect Policy<\/span>\n <\/div>\n <\/div>\n\n<\/section>\n\n<script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const container = document.getElementById('assembly-canvas');\n if (!container) {\n console.error(\"Canvas container not found!\");\n return;\n }\n\n \/\/ --- THREE.JS SETUP ---\n const scene = new THREE.Scene();\n scene.fog = new THREE.FogExp2(0x020202, 0.015);\n\n const camera = new THREE.PerspectiveCamera(45, container.offsetWidth \/ container.offsetHeight, 0.1, 1000);\n camera.position.set(0, 15, 45); \/\/ Adjusted camera for better view\n camera.lookAt(0, 0, 0);\n\n const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\n renderer.setSize(container.offsetWidth, container.offsetHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); \/\/ Limit pixel ratio for performance\n container.appendChild(renderer.domElement);\n\n const assemblyGroup = new THREE.Group();\n scene.add(assemblyGroup);\n\n \/\/ --- 1. THE PRODUCT (Brighter & More Visible) ---\n const productGeo = new THREE.CylinderGeometry(4, 4, 14, 32, 10, true);\n const productMat = new THREE.MeshBasicMaterial({ \n color: 0x4ecdc4, \n wireframe: true, \n transparent: true, \n opacity: 0.15 \n });\n const product = new THREE.Mesh(productGeo, productMat);\n assemblyGroup.add(product);\n\n const coreGeo = new THREE.CylinderGeometry(3.5, 3.5, 13, 32);\n const coreMat = new THREE.MeshBasicMaterial({ color: 0x4ecdc4, transparent: true, opacity: 0.08 });\n const core = new THREE.Mesh(coreGeo, coreMat);\n assemblyGroup.add(core);\n\n \/\/ --- 2. THE WORKERS (Robotic Nodes) ---\n const workerCount = 6;\n const workers = [];\n const lasers = [];\n\n const workerGeo = new THREE.ConeGeometry(0.6, 1.8, 8);\n workerGeo.rotateX(Math.PI \/ 2); \n const workerMat = new THREE.MeshPhongMaterial({ color: 0xffffff, emissive: 0x4ecdc4, emissiveIntensity: 0.8 });\n\n const laserMat = new THREE.LineBasicMaterial({ color: 0xFF9F1C, transparent: true, opacity: 0.8, linewidth: 2 });\n\n for(let i=0; i<workerCount; i++) {\n const worker = new THREE.Mesh(workerGeo, workerMat);\n const angle = (i \/ workerCount) * Math.PI * 2;\n const radius = 12;\n \n worker.position.set(Math.cos(angle) * radius, 0, Math.sin(angle) * radius);\n \n worker.userData = { \n angle: angle, \n speed: 0.015 + Math.random() * 0.01, \/\/ Slightly faster\n yOffset: (Math.random() - 0.5) * 10,\n radius: radius\n };\n\n assemblyGroup.add(worker);\n workers.push(worker);\n\n \/\/ Laser Setup - Explicit BufferAttribute\n const positions = new Float32Array(6); \/\/ 2 points * 3 coords\n const laserGeo = new THREE.BufferGeometry();\n laserGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n \n const laser = new THREE.Line(laserGeo, laserMat);\n laser.frustumCulled = false; \/\/ Prevent flickering\n assemblyGroup.add(laser);\n lasers.push(laser);\n }\n\n \/\/ --- 3. PARTICLES (Sparks) ---\n const particleCount = 150;\n const pGeo = new THREE.BufferGeometry();\n const pPos = new Float32Array(particleCount * 3);\n \/\/ Initialize off-screen\n for(let i=0; i<particleCount*3; i++) pPos[i] = 9999;\n \n pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3));\n const pMat = new THREE.PointsMaterial({ color: 0xFF9F1C, size: 0.4, transparent: true, opacity: 0.9 });\n const sparks = new THREE.Points(pGeo, pMat);\n assemblyGroup.add(sparks);\n\n \/\/ --- LIGHTS ---\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);\n scene.add(ambientLight);\n \n const pLight = new THREE.PointLight(0x4ecdc4, 3, 60);\n pLight.position.set(0, 5, 0);\n scene.add(pLight);\n\n \/\/ --- ANIMATION LOOP ---\n function animate() {\n requestAnimationFrame(animate);\n\n product.rotation.y -= 0.005;\n core.rotation.y -= 0.005;\n\n const sparkPositions = sparks.geometry.attributes.position.array;\n let sparkIdx = 0;\n\n \/\/ Reset sparks each frame (simple approach)\n for(let k=0; k<particleCount*3; k++) sparkPositions[k] = 9999;\n\n workers.forEach((worker, i) => {\n \/\/ Update Worker Pos\n worker.userData.angle += worker.userData.speed;\n const y = Math.sin(Date.now() * 0.003 + i * 1.5) * 5; \n \n worker.position.x = Math.cos(worker.userData.angle) * worker.userData.radius;\n worker.position.z = Math.sin(worker.userData.angle) * worker.userData.radius;\n worker.position.y = y;\n \n worker.lookAt(0, y, 0); \n\n \/\/ Update Laser\n const laser = lasers[i];\n const positions = laser.geometry.attributes.position.array;\n \n \/\/ Start at worker\n positions[0] = worker.position.x;\n positions[1] = worker.position.y;\n positions[2] = worker.position.z;\n \n \/\/ End at product surface (radius ~4)\n const dir = new THREE.Vector3(0, y, 0).sub(worker.position).normalize();\n const target = worker.position.clone().add(dir.multiplyScalar(worker.userData.radius - 4));\n \n positions[3] = target.x;\n positions[4] = target.y;\n positions[5] = target.z;\n \n laser.geometry.attributes.position.needsUpdate = true;\n\n \/\/ Create Sparks at Target\n for(let j=0; j<8; j++) { \/\/ More sparks per laser\n if(sparkIdx < particleCount * 3) {\n const jitter = 0.5;\n sparkPositions[sparkIdx++] = target.x + (Math.random()-0.5)*jitter;\n sparkPositions[sparkIdx++] = target.y + (Math.random()-0.5)*jitter;\n sparkPositions[sparkIdx++] = target.z + (Math.random()-0.5)*jitter;\n }\n }\n });\n\n sparks.geometry.attributes.position.needsUpdate = true;\n renderer.render(scene, camera);\n }\n\n animate();\n\n \/\/ Handle Resize\n window.addEventListener('resize', () => {\n const w = container.offsetWidth;\n const h = container.offsetHeight;\n camera.aspect = w \/ h;\n camera.updateProjectionMatrix();\n renderer.setSize(w, h);\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Leadership Core Executive Command Leadership Team SALES Sales Director Hamed Rigi WhatsApp → Email → ADMIN General Manager Hamid Rigi<\/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-4439","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/unicare.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/4439","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=4439"}],"version-history":[{"count":42,"href":"https:\/\/unicare.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/4439\/revisions"}],"predecessor-version":[{"id":29471,"href":"https:\/\/unicare.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/4439\/revisions\/29471"}],"wp:attachment":[{"href":"https:\/\/unicare.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

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

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Leadership Core<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n \/* --- VARIABLES --- *\/\n :root {\n --primary: #4ecdc4;\n --accent: #FF9F1C;\n --bg-dark: #050505;\n --card-bg: rgba(20, 20, 25, 0.4);\n --border: rgba(255, 255, 255, 0.1);\n }\n\n body { margin: 0; background: var(--bg-dark); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; color: #fff; }\n\n \/* --- WRAPPER --- *\/\n .team-section {\n padding: 120px 0;\n background: radial-gradient(circle at center, #0a0a0a 0%, #000000 100%);\n position: relative;\n overflow: hidden;\n }\n\n .team-bg-grid {\n position: absolute;\n inset: 0;\n background-image: \n linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\n background-size: 40px 40px;\n opacity: 0.5;\n pointer-events: none;\n }\n\n .team-container {\n max-width: 1600px; \/* Increased max-width to fit 3 cards comfortably *\/\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n z-index: 10;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n \/* --- HEADER --- *\/\n .team-header {\n text-align: center;\n margin-bottom: 80px;\n }\n\n .team-header h2 {\n font-family: 'Rajdhani', sans-serif;\n font-size: 48px;\n text-transform: uppercase;\n margin: 0 0 10px;\n letter-spacing: 2px;\n }\n\n .team-header span {\n color: var(--primary);\n font-size: 14px;\n letter-spacing: 4px;\n text-transform: uppercase;\n font-weight: 700;\n }\n\n \/* --- GRID (Single Row) --- *\/\n .team-grid {\n display: flex;\n justify-content: center;\n gap: 30px;\n flex-wrap: wrap;\n width: 100%;\n align-items: flex-end; \/* Align bottom to handle different heights if any *\/\n }\n\n \/* --- ID CARD --- *\/\n .id-card {\n width: 360px;\n min-height: 500px;\n background: var(--card-bg);\n border: 1px solid var(--border);\n border-radius: 20px;\n position: relative;\n backdrop-filter: blur(15px);\n transition: transform 0.1s;\n transform-style: preserve-3d;\n box-shadow: 0 20px 50px rgba(0,0,0,0.5);\n }\n\n \/* Highlight Center Card (Hamid) *\/\n .id-card.center-card {\n transform: scale(1.05); \/* Slightly larger *\/\n border-color: var(--accent);\n z-index: 2;\n box-shadow: 0 30px 60px rgba(255, 159, 28, 0.15);\n }\n\n \/* Hover Glow *\/\n .id-card::before {\n content: '';\n position: absolute;\n inset: -1px;\n border-radius: 20px;\n background: linear-gradient(45deg, transparent, rgba(78, 205, 196, 0.3), transparent);\n z-index: -1;\n opacity: 0;\n transition: 0.5s;\n }\n .id-card:hover::before { opacity: 1; }\n\n \/* Card Header (Photo Area) *\/\n .card-photo-area {\n height: 280px;\n position: relative;\n border-bottom: 1px solid var(--border);\n overflow: hidden;\n border-radius: 20px 20px 0 0;\n background: #0f0f0f;\n }\n \n .center-card .card-photo-area { height: 300px; } \/* Slightly taller photo for GM *\/\n\n .card-photo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: grayscale(100%) contrast(1.2);\n transition: 0.5s;\n opacity: 0.8;\n }\n\n .id-card:hover .card-photo {\n filter: grayscale(0%) contrast(1);\n opacity: 1;\n transform: scale(1.05);\n }\n\n \/* Scanner Line Overlay *\/\n .scanner-overlay {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.5) 3px);\n pointer-events: none;\n z-index: 2;\n opacity: 0.3;\n }\n\n \/* Status Badge *\/\n .status-badge {\n position: absolute;\n top: 20px; right: 20px;\n background: rgba(0,0,0,0.8);\n border: 1px solid var(--primary);\n color: var(--primary);\n padding: 5px 12px;\n font-family: 'Rajdhani';\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n border-radius: 4px;\n z-index: 5;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n .center-card .status-badge { border-color: var(--accent); color: var(--accent); }\n .status-dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; animation: blink 2s infinite; }\n @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }\n\n \/* Card Body *\/\n .card-body {\n padding: 30px;\n position: relative;\n transform: translateZ(30px);\n }\n\n .role-label {\n color: var(--accent);\n font-family: 'Rajdhani';\n font-size: 12px;\n letter-spacing: 2px;\n text-transform: uppercase;\n display: block;\n margin-bottom: 5px;\n }\n\n .name-label {\n font-size: 32px;\n font-weight: 700;\n color: #fff;\n margin: 0 0 20px;\n font-family: 'Rajdhani';\n text-transform: uppercase;\n }\n\n \/* Contact Grid *\/\n .contact-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 10px;\n }\n\n .contact-btn {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: rgba(255,255,255,0.03);\n border: 1px solid var(--border);\n padding: 12px 20px;\n border-radius: 8px;\n text-decoration: none;\n color: #ccc;\n font-size: 13px;\n transition: 0.3s;\n }\n\n .contact-btn:hover {\n background: var(--primary);\n color: #000;\n border-color: var(--primary);\n transform: translateX(5px);\n }\n \n .center-card .contact-btn:hover { background: var(--accent); border-color: var(--accent); }\n\n .contact-btn i { font-size: 16px; }\n\n \/* Decor Elements *\/\n .deco-line {\n position: absolute;\n bottom: 0; left: 0;\n width: 100%; height: 3px;\n background: var(--primary);\n transform: scaleX(0);\n transform-origin: left;\n transition: 0.5s;\n }\n .id-card:hover .deco-line { transform: scaleX(1); }\n .center-card .deco-line { background: var(--accent); }\n\n @media (max-width: 1200px) {\n .team-grid { flex-wrap: wrap; }\n .center-card { transform: scale(1); width: 360px; order: -1; \/* Move top on mobile *\/ }\n }\n <\/style>\n<\/head>\n<body>\n\n<section class=\"team-section\">\n <div class=\"team-bg-grid\"><\/div>\n \n <div class=\"team-container\">\n \n <div class=\"team-header\">\n <span>Executive Command<\/span>\n <h2>Leadership Team<\/h2>\n <\/div>\n\n <div class=\"team-grid\">\n \n \n <div class=\"id-card\">\n <div class=\"card-photo-area\">\n <div class=\"scanner-overlay\"><\/div>\n <div class=\"status-badge\"><span class=\"status-dot\"><\/span> SALES<\/div>\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/IMG_7198.jpg\" class=\"card-photo\" alt=\"Hamed Rigi\"> \n <\/div>\n \n <div class=\"card-body\">\n <span class=\"role-label\" style=\"color:#4ecdc4;\">Sales Director<\/span>\n <h3 class=\"name-label\">Hamed Rigi<\/h3>\n \n <div class=\"contact-grid\">\n <a href=\"https:\/\/api.whatsapp.com\/send?phone=905451930081\" target=\"_blank\" class=\"contact-btn\">\n <span><i class=\"fa-brands fa-whatsapp\" style=\"color:#25D366;\"><\/i> WhatsApp<\/span>\n <span>→<\/span>\n <\/a>\n <a href=\"mailto:sales@unicare.com.tr\" class=\"contact-btn\">\n <span><i class=\"fa-regular fa-envelope\"><\/i> Email<\/span>\n <span>→<\/span>\n <\/a>\n <\/div>\n <\/div>\n <div class=\"deco-line\" style=\"background:#4ecdc4;\"><\/div>\n <\/div>\n\n \n <div class=\"id-card center-card\">\n <div class=\"card-photo-area\">\n <div class=\"scanner-overlay\"><\/div>\n <div class=\"status-badge\" style=\"border-color:#FF9F1C; color:#FF9F1C;\"><span class=\"status-dot\" style=\"background:#FF9F1C;\"><\/span> ADMIN<\/div>\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/IMG_7206.jpg\" class=\"card-photo\" alt=\"Hamid Rigi\">\n <\/div>\n \n <div class=\"card-body\">\n <span class=\"role-label\" style=\"color:#FF9F1C;\">General Manager<\/span>\n <h3 class=\"name-label\">Hamid Rigi<\/h3>\n \n <div class=\"contact-grid\">\n <a href=\"https:\/\/api.whatsapp.com\/send?phone=905461950081\" target=\"_blank\" class=\"contact-btn\" style=\"border-color: rgba(255, 159, 28, 0.3);\">\n <span><i class=\"fa-brands fa-whatsapp\" style=\"color:#25D366;\"><\/i> WhatsApp<\/span>\n <span>→<\/span>\n <\/a>\n <a href=\"mailto:info@unicare.com.tr\" class=\"contact-btn\">\n <span><i class=\"fa-regular fa-envelope\"><\/i> Email<\/span>\n <span>→<\/span>\n <\/a>\n <\/div>\n <\/div>\n <div class=\"deco-line\" style=\"background:#FF9F1C;\"><\/div>\n <\/div>\n\n \n <div class=\"id-card\">\n <div class=\"card-photo-area\">\n <div class=\"scanner-overlay\"><\/div>\n <div class=\"status-badge\" style=\"border-color:#00d2ff; color:#00d2ff;\"><span class=\"status-dot\" style=\"background:#00d2ff;\"><\/span> EXPORT<\/div>\n <img decoding=\"async\" src=\"https:\/\/unicare.com.tr\/wp-content\/uploads\/2026\/01\/IMG_7200.jpg\" class=\"card-photo\" alt=\"Siavash Lotfi\">\n <\/div>\n \n <div class=\"card-body\">\n <span class=\"role-label\" style=\"color:#00d2ff;\">Export Director<\/span>\n <h3 class=\"name-label\">Siavash Lotfi<\/h3>\n \n <div class=\"contact-grid\">\n <a href=\"https:\/\/api.whatsapp.com\/send?phone=90556308230\" target=\"_blank\" class=\"contact-btn\" style=\"border-color: rgba(0, 210, 255, 0.3);\">\n <span><i class=\"fa-brands fa-whatsapp\" style=\"color:#25D366;\"><\/i> WhatsApp<\/span>\n <span>→<\/span>\n <\/a>\n <a href=\"mailto:export@unicare.com.tr\" class=\"contact-btn\">\n <span><i class=\"fa-regular fa-envelope\"><\/i> Email<\/span>\n <span>→<\/span>\n <\/a>\n <\/div>\n <\/div>\n <div class=\"deco-line\" style=\"background:#00d2ff;\"><\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n const cards = document.querySelectorAll('.id-card');\n cards.forEach(card => {\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 const centerX = rect.width \/ 2;\n const centerY = rect.height \/ 2;\n const rotateX = ((y - centerY) \/ centerY) * -10;\n const rotateY = ((x - centerX) \/ centerX) * 10;\n card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\n if(card.classList.contains('center-card')) {\n card.style.transform += ' scale(1.05)';\n }\n });\n card.addEventListener('mouseleave', () => {\n card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg)`;\n if(card.classList.contains('center-card')) {\n card.style.transform += ' scale(1.05)';\n }\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-d3f663b e-flex e-con-boxed e-con e-parent\" data-id=\"d3f663b\" 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-d023da5 elementor-widget elementor-widget-html\" data-id=\"d023da5\" 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>Strategic Location<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <style>\n \/* --- VARIABLES --- *\/\n :root {\n --primary: #4ecdc4;\n --accent: #FF9F1C;\n --bg-dark: #050505;\n --panel: rgba(10, 10, 12, 0.8);\n --border: rgba(255, 255, 255, 0.1);\n }\n\n \/* Fix for Elementor Container preventing full width *\/\n body { margin: 0; background: var(--bg-dark); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; color: #fff; }\n \n \/* --- WRAPPER (Elementor Fix) --- *\/\n .location-section {\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: 900px; \/* Taller to fit everything *\/\n overflow: hidden !important;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #020202;\n z-index: 1;\n }\n\n \/* --- 3D CANVAS --- *\/\n #city-canvas {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n z-index: 1;\n \/* Fades top and bottom to blend nicely *\/\n mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);\n -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);\n }\n\n \/* --- UI OVERLAY (Split Top\/Bottom) --- *\/\n .loc-overlay {\n position: relative;\n z-index: 10;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between; \/* Push content to edges *\/\n width: 100%;\n max-width: 1400px;\n height: 100%;\n padding: 80px 20px; \/* Padding top\/bottom *\/\n pointer-events: none;\n }\n\n \/* HEADER (Top) *\/\n .loc-header {\n text-align: center;\n text-shadow: 0 10px 40px rgba(0,0,0,0.9);\n margin-top: 20px;\n }\n\n .loc-header h2 {\n font-family: 'Rajdhani', sans-serif;\n font-size: clamp(50px, 6vw, 90px);\n text-transform: uppercase;\n margin: 0;\n letter-spacing: 2px;\n line-height: 0.9;\n }\n\n .loc-header span {\n color: var(--primary);\n font-size: 14px;\n letter-spacing: 6px;\n font-weight: 700;\n text-transform: uppercase;\n display: block;\n margin-bottom: 10px;\n }\n\n \/* ADDRESS CARD (Bottom) *\/\n .address-card {\n background: rgba(10, 15, 20, 0.75);\n backdrop-filter: blur(20px);\n border: 1px solid var(--border);\n border-top: 3px solid var(--accent);\n padding: 30px 40px;\n border-radius: 12px;\n width: 100%;\n max-width: 500px;\n pointer-events: auto; \/* Enable clicks *\/\n transition: 0.3s;\n box-shadow: 0 30px 80px rgba(0,0,0,0.6);\n text-align: center;\n margin-bottom: 40px;\n }\n\n .address-card:hover {\n border-color: var(--accent);\n transform: translateY(-5px);\n }\n\n .card-label {\n font-family: 'Rajdhani';\n font-size: 12px;\n color: var(--accent);\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n }\n\n .card-address {\n font-size: 15px;\n line-height: 1.6;\n color: #ccc;\n margin-bottom: 25px;\n }\n \n .card-address strong { display: block; margin-bottom: 5px; font-size: 18px; color: #fff; }\n\n .loc-btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: rgba(255,255,255,0.05);\n border: 1px solid var(--border);\n padding: 12px 30px;\n font-size: 13px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #fff;\n text-decoration: none;\n transition: 0.3s;\n font-weight: 700;\n border-radius: 4px;\n }\n\n .loc-btn:hover {\n background: var(--accent);\n color: #000;\n border-color: var(--accent);\n }\n\n \/* --- SCANNER EFFECT --- *\/\n .scanner-line {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 2px;\n background: var(--primary);\n box-shadow: 0 0 20px var(--primary);\n opacity: 0.3;\n animation: scan 6s linear infinite;\n pointer-events: none;\n z-index: 5;\n }\n\n @keyframes scan {\n 0% { top: 0%; opacity: 0; }\n 10% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { top: 100%; opacity: 0; }\n }\n\n \/* Coordinates Decor *\/\n .coords {\n position: absolute;\n top: 50%; right: 40px;\n transform: translateY(-50%) rotate(90deg);\n font-family: 'Rajdhani';\n font-size: 12px;\n color: rgba(255,255,255,0.2);\n z-index: 10;\n letter-spacing: 3px;\n white-space: nowrap;\n }\n\n @media (max-width: 768px) {\n .location-section { height: 800px; }\n .loc-header h2 { font-size: 40px; }\n .address-card { padding: 25px 20px; width: 95%; margin-bottom: 20px; }\n .coords { display: none; }\n }\n <\/style>\n<\/head>\n<body>\n\n<section class=\"location-section\">\n \n \n <div id=\"city-canvas\"><\/div>\n <div class=\"scanner-line\"><\/div>\n\n <div class=\"loc-overlay\">\n \n <div class=\"loc-header\">\n <span>Production Base<\/span>\n <h2>Digital Twin<\/h2>\n <\/div>\n\n \n <div class=\"address-card\">\n <div class=\"card-label\">\n <i class=\"fa-solid fa-satellite-dish\"><\/i>\n <span>HQ Coordinates: LIVE<\/span>\n <\/div>\n \n <div class=\"card-address\">\n <strong>YEN\u0130DO\u011eAN MAH. RAM\u0130 KI\u015eLA CAD.<\/strong>\n NUR SANAY\u0130 S\u0130TES\u0130 NO 69<br>\n \u0130\u00c7 KAPI NO: 20<br>\n BAYRAMPA\u015eA \/ \u0130STANBUL\n <\/div>\n\n <a href=\"https:\/\/maps.app.goo.gl\/ZaqtCtdXTr85Eq5b9?g_st=ipc\" target=\"_blank\" class=\"loc-btn\">\n <i class=\"fa-solid fa-location-arrow\"><\/i> Open Google Maps\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"coords\">\n LAT: 41.0422\u00b0 N | LNG: 28.9134\u00b0 E\n <\/div>\n\n<\/section>\n\n<script>\n const container = document.getElementById('city-canvas');\n\n \/\/ --- THREE.JS SETUP ---\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x050505); \n scene.fog = new THREE.Fog(0x050505, 10, 100); \n\n const camera = new THREE.PerspectiveCamera(45, container.offsetWidth \/ container.offsetHeight, 0.1, 1000);\n \n \/\/ CAMERA: Moved UP and Back to show center building clearly\n camera.position.set(0, 35, 50); \n camera.lookAt(0, 0, 0); \n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.offsetWidth, container.offsetHeight);\n container.appendChild(renderer.domElement);\n\n \/\/ --- PROCEDURAL CITY ---\n const cityGroup = new THREE.Group();\n scene.add(cityGroup);\n\n const geometry = new THREE.BoxGeometry(1, 1, 1);\n geometry.translate(0, 0.5, 0); \n\n const material = new THREE.MeshPhongMaterial({ color: 0x333333, flatShading: true, shininess: 30 });\n const wireframeMat = new THREE.LineBasicMaterial({ color: 0x4ecdc4, transparent: true, opacity: 0.15 });\n\n const gridSize = 35; \/\/ Wide grid for full width\n const spacing = 1.5;\n\n for (let x = -gridSize; x <= gridSize; x++) {\n for (let z = -gridSize; z <= gridSize; z++) {\n \n \/\/ Create a larger clearing in the center for the factory to be visible\n if (Math.abs(x) < 5 && Math.abs(z) < 4) continue;\n\n \/\/ Random height but keeping center-ish buildings lower so they don't block view\n let dist = Math.sqrt(x*x + z*z);\n let height = Math.random() * Math.random() * 5 + 0.2;\n \n const mesh = new THREE.Mesh(geometry, material);\n mesh.position.set(x * spacing, 0, z * spacing);\n mesh.scale.set(1, height, 1);\n mesh.updateMatrix();\n \n const edges = new THREE.EdgesGeometry(geometry);\n const line = new THREE.LineSegments(edges, wireframeMat);\n line.position.copy(mesh.position);\n line.scale.copy(mesh.scale);\n \n cityGroup.add(mesh);\n cityGroup.add(line);\n }\n }\n\n \/\/ --- FACTORY (CENTERED & PROMINENT) ---\n const factoryGroup = new THREE.Group();\n cityGroup.add(factoryGroup);\n\n \/\/ Main Building\n const factoryGeo = new THREE.BoxGeometry(6, 3, 5); \/\/ Taller and bigger\n factoryGeo.translate(0, 1.5, 0);\n const factoryMat = new THREE.MeshPhongMaterial({ color: 0x222222, emissive: 0xFF9F1C, emissiveIntensity: 0.6 });\n const factory = new THREE.Mesh(factoryGeo, factoryMat);\n factoryGroup.add(factory);\n\n \/\/ Beacons (4 Corners + Center)\n const beaconGeo = new THREE.CylinderGeometry(0.05, 0.05, 100, 8);\n const beaconMat = new THREE.MeshBasicMaterial({ color: 0xFF9F1C, transparent: true, opacity: 0.5 });\n \n const b1 = new THREE.Mesh(beaconGeo, beaconMat); b1.position.set(2.8, 50, 2.3); factoryGroup.add(b1);\n const b2 = new THREE.Mesh(beaconGeo, beaconMat); b2.position.set(-2.8, 50, 2.3); factoryGroup.add(b2);\n const b3 = new THREE.Mesh(beaconGeo, beaconMat); b3.position.set(2.8, 50, -2.3); factoryGroup.add(b3);\n const b4 = new THREE.Mesh(beaconGeo, beaconMat); b4.position.set(-2.8, 50, -2.3); factoryGroup.add(b4);\n\n \/\/ Center Main Beam\n const mainBeamGeo = new THREE.CylinderGeometry(0.2, 0.2, 120, 8);\n const mainBeamMat = new THREE.MeshBasicMaterial({ color: 0x4ecdc4, transparent: true, opacity: 0.9 });\n const mainBeam = new THREE.Mesh(mainBeamGeo, mainBeamMat);\n mainBeam.position.set(0, 60, 0);\n factoryGroup.add(mainBeam);\n\n \/\/ Pulse Ring around Factory\n const ringGeo = new THREE.RingGeometry(5, 5.2, 64);\n const ringMat = new THREE.MeshBasicMaterial({ color: 0x4ecdc4, transparent: true, opacity: 0.5, side: THREE.DoubleSide });\n const ring = new THREE.Mesh(ringGeo, ringMat);\n ring.rotation.x = -Math.PI \/ 2;\n ring.position.y = 0.2;\n factoryGroup.add(ring);\n\n \/\/ --- LIGHTS ---\n const ambientLight = new THREE.AmbientLight(0xffffff, 1.8);\n scene.add(ambientLight);\n const dirLight = new THREE.DirectionalLight(0x4ecdc4, 3);\n dirLight.position.set(10, 30, 10);\n scene.add(dirLight);\n const pointLight = new THREE.PointLight(0xffffff, 3, 80);\n pointLight.position.set(0, 20, 0); \/\/ Light right above factory\n scene.add(pointLight);\n\n \/\/ --- ANIMATION ---\n let mouseX = 0;\n \n function animate() {\n requestAnimationFrame(animate);\n \n \/\/ Slow rotation of the city\n cityGroup.rotation.y += 0.001;\n\n \/\/ Subtle Parallax\n const targetX = mouseX * 2; \n const clampedX = Math.max(-10, Math.min(10, targetX));\n camera.position.x += (clampedX - camera.position.x) * 0.05;\n camera.lookAt(0, 5, 0); \/\/ Look slightly up at factory\n\n \/\/ Ring Pulse\n const scale = 1 + (Date.now() % 2500) \/ 600;\n ring.scale.set(scale, scale, 1);\n ring.material.opacity = 0.8 - (scale \/ 5);\n\n renderer.render(scene, camera);\n }\n\n animate();\n\n window.addEventListener('resize', () => {\n camera.aspect = container.offsetWidth \/ container.offsetHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.offsetWidth, container.offsetHeight);\n });\n\n document.addEventListener('mousemove', (e) => {\n mouseX = (e.clientX \/ window.innerWidth) - 0.5;\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-eb9792b e-flex e-con-boxed e-con e-parent\" data-id=\"eb9792b\" 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-4a22e22 elementor-widget elementor-widget-html\" data-id=\"4a22e22\" 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>Global Operations Time<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;600&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n \/* --- VARIABLES --- *\/\n :root {\n --primary: #4ecdc4;\n --accent: #FF9F1C;\n --bg-dark: #050505;\n --panel: rgba(20, 20, 25, 0.6);\n --border: rgba(255, 255, 255, 0.1);\n }\n\n body { margin: 0; background: var(--bg-dark); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; color: #fff; }\n\n \/* --- WRAPPER --- *\/\n .time-section {\n padding: 80px 0;\n background: #020202;\n position: relative;\n border-top: 1px solid var(--border);\n }\n\n .time-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n\n .time-header {\n text-align: center;\n margin-bottom: 50px;\n }\n .time-header h3 {\n font-family: 'Rajdhani';\n font-size: 32px;\n text-transform: uppercase;\n margin: 0;\n color: #fff;\n }\n .time-header span {\n color: var(--primary);\n font-size: 12px;\n letter-spacing: 3px;\n text-transform: uppercase;\n display: block;\n margin-bottom: 5px;\n }\n\n \/* --- GRID --- *\/\n .clock-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n }\n\n \/* --- CLOCK CARD --- *\/\n .clock-card {\n background: rgba(255, 255, 255, 0.03);\n border: 1px solid var(--border);\n padding: 25px;\n border-radius: 12px;\n position: relative;\n overflow: hidden;\n transition: 0.3s;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .clock-card:hover {\n transform: translateY(-5px);\n border-color: var(--primary);\n background: rgba(255, 255, 255, 0.05);\n }\n\n \/* HQ Highlight *\/\n .clock-card.hq {\n border-color: var(--accent);\n background: rgba(255, 159, 28, 0.05);\n }\n .clock-card.hq:hover {\n box-shadow: 0 0 30px rgba(255, 159, 28, 0.1);\n }\n\n .city-label {\n font-family: 'Rajdhani';\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #888;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .hq .city-label { color: var(--accent); font-weight: 700; }\n\n .time-display {\n font-family: 'Rajdhani';\n font-size: 48px;\n font-weight: 700;\n color: #fff;\n line-height: 1;\n text-shadow: 0 0 20px rgba(255,255,255,0.1);\n }\n\n .date-display {\n font-size: 12px;\n color: #555;\n margin-top: 5px;\n }\n\n .status-indicator {\n margin-top: 15px;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 1px;\n padding: 4px 10px;\n border-radius: 4px;\n background: rgba(255,255,255,0.05);\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .dot { width: 6px; height: 6px; border-radius: 50%; }\n .open .dot { background: #25D366; box-shadow: 0 0 8px #25D366; }\n .open { color: #25D366; border: 1px solid rgba(37, 211, 102, 0.2); }\n \n .closed .dot { background: #FF4444; box-shadow: 0 0 8px #FF4444; }\n .closed { color: #FF4444; border: 1px solid rgba(255, 68, 68, 0.2); }\n\n \/* World Icons Background *\/\n .clock-bg-icon {\n position: absolute;\n right: -10px; bottom: -10px;\n font-size: 80px;\n color: rgba(255,255,255,0.02);\n z-index: 0;\n pointer-events: none;\n }\n\n <\/style>\n<\/head>\n<body>\n\n<section class=\"time-section\">\n <div class=\"time-container\">\n \n <div class=\"time-header\">\n <span>Global Synchronization<\/span>\n <h3>Operations Status<\/h3>\n <\/div>\n\n <div class=\"clock-grid\">\n \n \n <div class=\"clock-card\" id=\"clock-ny\">\n <i class=\"fa-solid fa-building clock-bg-icon\"><\/i>\n <div class=\"city-label\">New York <span style=\"font-size:10px; opacity:0.5;\">EST<\/span><\/div>\n <div class=\"time-display\">--:--<\/div>\n <div class=\"date-display\">LOADING...<\/div>\n <div class=\"status-indicator closed\">\n <span class=\"dot\"><\/span> OFFICE CLOSED\n <\/div>\n <\/div>\n\n \n <div class=\"clock-card\" id=\"clock-london\">\n <i class=\"fa-solid fa-landmark clock-bg-icon\"><\/i>\n <div class=\"city-label\">London <span style=\"font-size:10px; opacity:0.5;\">GMT<\/span><\/div>\n <div class=\"time-display\">--:--<\/div>\n <div class=\"date-display\">LOADING...<\/div>\n <div class=\"status-indicator closed\">\n <span class=\"dot\"><\/span> OFFICE CLOSED\n <\/div>\n <\/div>\n\n \n <div class=\"clock-card hq\" id=\"clock-istanbul\">\n <i class=\"fa-solid fa-industry clock-bg-icon\" style=\"color:rgba(255, 159, 28, 0.05);\"><\/i>\n <div class=\"city-label\"><i class=\"fa-solid fa-star\"><\/i> Istanbul HQ<\/div>\n <div class=\"time-display\" style=\"color:var(--accent); text-shadow:0 0 20px rgba(255, 159, 28, 0.4);\">--:--<\/div>\n <div class=\"date-display\">LOADING...<\/div>\n <div class=\"status-indicator open\">\n <span class=\"dot\"><\/span> FACTORY ACTIVE\n <\/div>\n <\/div>\n\n \n <div class=\"clock-card\" id=\"clock-tokyo\">\n <i class=\"fa-solid fa-torii-gate clock-bg-icon\"><\/i>\n <div class=\"city-label\">Tokyo <span style=\"font-size:10px; opacity:0.5;\">JST<\/span><\/div>\n <div class=\"time-display\">--:--<\/div>\n <div class=\"date-display\">LOADING...<\/div>\n <div class=\"status-indicator closed\">\n <span class=\"dot\"><\/span> OFFICE CLOSED\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n function updateClocks() {\n const zones = [\n { id: 'ny', tz: 'America\/New_York', start: 9, end: 17 },\n { id: 'london', tz: 'Europe\/London', start: 9, end: 17 },\n { id: 'istanbul', tz: 'Europe\/Istanbul', start: 9, end: 19 }, \/\/ HQ longer hours\n { id: 'tokyo', tz: 'Asia\/Tokyo', start: 9, end: 18 }\n ];\n\n const now = new Date();\n\n zones.forEach(zone => {\n const el = document.getElementById(`clock-${zone.id}`);\n \n \/\/ Get Time in Zone\n const options = { timeZone: zone.tz, hour: '2-digit', minute: '2-digit', hour12: false };\n const timeString = new Intl.DateTimeFormat('en-US', options).format(now);\n \n \/\/ Get Hour for Status\n const hour = parseInt(new Intl.DateTimeFormat('en-US', { timeZone: zone.tz, hour: 'numeric', hour12: false }).format(now));\n \n \/\/ Get Date\n const dateString = new Intl.DateTimeFormat('en-US', { timeZone: zone.tz, weekday: 'short', month: 'short', day: 'numeric' }).format(now);\n\n \/\/ Update DOM\n el.querySelector('.time-display').innerText = timeString;\n el.querySelector('.date-display').innerText = dateString;\n\n \/\/ Update Status (Open\/Closed)\n const statusEl = el.querySelector('.status-indicator');\n const isOpen = hour >= zone.start && hour < zone.end;\n \n if(isOpen) {\n statusEl.className = 'status-indicator open';\n statusEl.innerHTML = '<span class=\"dot\"><\/span> OPEN NOW';\n } else {\n statusEl.className = 'status-indicator closed';\n statusEl.innerHTML = '<span class=\"dot\"><\/span> CLOSED';\n }\n });\n }\n\n \/\/ Update every second\n setInterval(updateClocks, 1000);\n updateClocks(); \/\/ Run immediately\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-73f7ab7 e-flex e-con-boxed e-con e-parent\" data-id=\"73f7ab7\" 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-1124483 elementor-widget elementor-widget-html\" data-id=\"1124483\" 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>Global Distribution Network<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;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 \/* --- VARIABLES --- *\/\n :root {\n --primary: #4ecdc4;\n --accent: #FF9F1C;\n --bg-dark: #050505;\n --glass: rgba(255, 255, 255, 0.05);\n --border: rgba(255, 255, 255, 0.1);\n }\n\n \/* RESET ELEMENTOR CONTAINERS *\/\n .elementor-widget-html, .elementor-widget-html .elementor-widget-container { margin: 0 !important; padding: 0 !important; width: 100% !important; }\n \n body { margin: 0; background: var(--bg-dark); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; color: #fff; }\n\n \/* --- SECTION WRAPPER (FORCE FULL WIDTH) --- *\/\n .network-section {\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: 800px; \/* Increased height for better centering *\/\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #000;\n }\n\n \/* --- 3D CANVAS --- *\/\n #network-canvas {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n z-index: 1;\n }\n\n \/* --- CONTENT OVERLAY --- *\/\n .net-content {\n position: relative;\n z-index: 10;\n text-align: center;\n max-width: 900px;\n padding: 0 20px;\n pointer-events: none; \/* Allow interaction with canvas *\/\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .net-tag {\n color: var(--accent);\n font-family: 'Rajdhani';\n font-weight: 700;\n letter-spacing: 4px;\n text-transform: uppercase;\n font-size: 14px;\n margin-bottom: 30px;\n display: inline-block;\n border: 1px solid var(--accent);\n padding: 10px 25px;\n background: rgba(255, 159, 28, 0.1);\n backdrop-filter: blur(5px);\n border-radius: 4px;\n }\n\n .net-title {\n font-family: 'Rajdhani', sans-serif;\n font-size: clamp(50px, 8vw, 100px);\n font-weight: 800;\n line-height: 0.9;\n margin: 0 0 30px 0;\n text-transform: uppercase;\n text-shadow: 0 0 80px rgba(78, 205, 196, 0.4);\n }\n\n .net-desc {\n font-size: 18px;\n color: #ccc;\n line-height: 1.7;\n margin-bottom: 50px;\n max-width: 650px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* --- CTA BUTTON (Glassmorphism) --- *\/\n .join-btn-wrapper {\n pointer-events: auto; \/* Enable clicks *\/\n display: inline-block;\n position: relative;\n }\n\n .join-btn {\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.2);\n color: #fff;\n font-family: 'Rajdhani';\n font-size: 18px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 2px;\n padding: 20px 60px;\n text-decoration: none;\n transition: 0.4s;\n overflow: hidden;\n position: relative;\n display: flex;\n align-items: center;\n gap: 15px;\n backdrop-filter: blur(10px);\n border-radius: 4px;\n }\n\n .join-btn::before {\n content: '';\n position: absolute;\n top: 0; left: -100%;\n width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.4), transparent);\n transition: 0.5s;\n }\n\n .join-btn:hover::before { left: 100%; }\n \n .join-btn:hover {\n border-color: var(--primary);\n box-shadow: 0 0 30px rgba(78, 205, 196, 0.4);\n transform: scale(1.05);\n }\n\n \/* --- STATS FLOATING --- *\/\n .floating-stat {\n position: absolute;\n background: rgba(0,0,0,0.6);\n border: 1px solid var(--border);\n padding: 12px 25px;\n border-radius: 50px;\n font-family: 'Rajdhani';\n font-size: 12px;\n color: #aaa;\n backdrop-filter: blur(5px);\n pointer-events: none;\n white-space: nowrap;\n z-index: 15;\n }\n \n .floating-stat strong { color: #fff; font-size: 18px; margin-right: 8px; color: var(--primary); }\n .stat-1 { top: 20%; left: 15%; animation: float 6s infinite ease-in-out; }\n .stat-2 { bottom: 20%; right: 15%; animation: float 8s infinite ease-in-out reverse; }\n \n @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }\n\n @media (max-width: 768px) {\n .stat-1 { top: 10%; left: 5%; }\n .stat-2 { bottom: 10%; right: 5%; }\n .network-section { height: 600px; }\n }\n\n <\/style>\n<\/head>\n<body>\n\n<section class=\"network-section\">\n \n \n <div id=\"network-canvas\"><\/div>\n\n \n <div class=\"net-content\">\n <span class=\"net-tag\">B2B Partnership<\/span>\n <h2 class=\"net-title\">Join The<br><span style=\"color:transparent; -webkit-text-stroke:1px #fff;\">Network<\/span><\/h2>\n <p class=\"net-desc\">\n Become an authorized distributor. Access premium ISO-certified inventory, marketing assets, and 24\/7 priority support from our Istanbul HQ.\n <\/p>\n \n <div class=\"join-btn-wrapper\">\n <a href=\"https:\/\/unicare.com.tr\/?page_id=4439\" class=\"join-btn\">\n Apply Now <span>→<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"floating-stat stat-1\">\n <strong>55+<\/strong> Active Countries\n <\/div>\n <div class=\"floating-stat stat-2\">\n <strong>24h<\/strong> Dispatch Time\n <\/div>\n\n<\/section>\n\n<script>\n const container = document.getElementById('network-canvas');\n\n \/\/ --- THREE.JS SETUP ---\n const scene = new THREE.Scene();\n \/\/ Deep dark teal-black gradient simulation\n scene.fog = new THREE.FogExp2(0x000000, 0.002);\n\n const camera = new THREE.PerspectiveCamera(55, container.offsetWidth \/ container.offsetHeight, 1, 1000);\n camera.position.z = 100;\n\n const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\n renderer.setSize(container.offsetWidth, container.offsetHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n \/\/ --- PARTICLES (THE NETWORK) ---\n const particleCount = 200;\n const particles = new THREE.BufferGeometry();\n const positions = new Float32Array(particleCount * 3);\n const velocities = []; \/\/ Store velocity for each particle\n\n \/\/ Interaction Data\n const mouse = new THREE.Vector2();\n const raycaster = new THREE.Raycaster();\n const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0); \/\/ Invisible plane for raycasting\n\n for (let i = 0; i < particleCount; i++) {\n \/\/ Spread particles\n positions[i * 3] = (Math.random() - 0.5) * 200; \/\/ x\n positions[i * 3 + 1] = (Math.random() - 0.5) * 150; \/\/ y\n positions[i * 3 + 2] = (Math.random() - 0.5) * 100; \/\/ z\n\n \/\/ Random velocity\n velocities.push({\n x: (Math.random() - 0.5) * 0.2,\n y: (Math.random() - 0.5) * 0.2,\n z: (Math.random() - 0.5) * 0.2\n });\n }\n\n particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n\n \/\/ Material for Dots\n const pMaterial = new THREE.PointsMaterial({\n color: 0x4ecdc4,\n size: 1.5,\n transparent: true,\n opacity: 0.8,\n sizeAttenuation: true\n });\n\n const particleSystem = new THREE.Points(particles, pMaterial);\n scene.add(particleSystem);\n\n \/\/ Lines (Dynamic Geometry)\n const lineMaterial = new THREE.LineBasicMaterial({\n color: 0x4ecdc4,\n transparent: true,\n opacity: 0.15\n });\n\n const linesGeometry = new THREE.BufferGeometry();\n const lines = new THREE.LineSegments(linesGeometry, lineMaterial);\n scene.add(lines);\n\n \/\/ --- ANIMATION LOOP ---\n function animate() {\n requestAnimationFrame(animate);\n\n const posAttr = particleSystem.geometry.attributes.position;\n const linePositions = [];\n \n \/\/ 1. Update Particles\n for (let i = 0; i < particleCount; i++) {\n \/\/ Apply velocity\n let x = posAttr.array[i * 3];\n let y = posAttr.array[i * 3 + 1];\n let z = posAttr.array[i * 3 + 2];\n\n x += velocities[i].x;\n y += velocities[i].y;\n z += velocities[i].z;\n\n \/\/ Bounce off boundaries\n if (x > 100 || x < -100) velocities[i].x *= -1;\n if (y > 75 || y < -75) velocities[i].y *= -1;\n if (z > 50 || z < -50) velocities[i].z *= -1;\n\n \/\/ Mouse Interaction (Simple Repulsion)\n \n posAttr.array[i * 3] = x;\n posAttr.array[i * 3 + 1] = y;\n posAttr.array[i * 3 + 2] = z;\n\n \/\/ 2. Check Connections (O(N^2) - keep N low)\n \/\/ Connect to nearby particles\n for (let j = i + 1; j < particleCount; j++) {\n const dx = x - posAttr.array[j * 3];\n const dy = y - posAttr.array[j * 3 + 1];\n const dz = z - posAttr.array[j * 3 + 2];\n const dist = Math.sqrt(dx*dx + dy*dy + dz*dz);\n\n if (dist < 25) { \/\/ Connection threshold\n linePositions.push(x, y, z);\n linePositions.push(posAttr.array[j * 3], posAttr.array[j * 3 + 1], posAttr.array[j * 3 + 2]);\n }\n }\n }\n\n posAttr.needsUpdate = true;\n\n \/\/ Update Lines\n lines.geometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));\n\n \/\/ Gentle Rotation\n particleSystem.rotation.y += 0.001;\n lines.rotation.y += 0.001;\n\n \/\/ Interactive Tilt\n const targetRotX = (mouse.y * 0.5);\n const targetRotY = (mouse.x * 0.5);\n \n particleSystem.rotation.x += (targetRotX - particleSystem.rotation.x) * 0.05;\n lines.rotation.x += (targetRotX - lines.rotation.x) * 0.05;\n\n renderer.render(scene, camera);\n }\n\n animate();\n\n \/\/ --- RESIZE ---\n window.addEventListener('resize', () => {\n camera.aspect = container.offsetWidth \/ container.offsetHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.offsetWidth, container.offsetHeight);\n });\n\n \/\/ --- MOUSE MOVE ---\n document.addEventListener('mousemove', (e) => {\n mouse.x = (e.clientX \/ window.innerWidth) * 2 - 1;\n mouse.y = -(e.clientY \/ window.innerHeight) * 2 + 1;\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-1a604ef e-flex e-con-boxed e-con e-parent\" data-id=\"1a604ef\" 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-4aa9057 elementor-widget elementor-widget-html\" data-id=\"4aa9057\" 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>Automated Manufacturing<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;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 \/* --- VARIABLES --- *\/\n :root {\n --primary: #4ecdc4;\n --accent: #FF9F1C;\n --bg-dark: #050505;\n --border: rgba(255, 255, 255, 0.1);\n }\n\n \/* FORCE RESET ELEMENTOR *\/\n .elementor-widget-html, \n .elementor-widget-html .elementor-widget-container,\n .elementor-section, .elementor-column { \n margin: 0 !important; \n padding: 0 !important; \n width: 100% !important; \n max-width: 100% !important;\n }\n\n body { margin: 0; background: var(--bg-dark); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; color: #fff; }\n\n \/* --- WRAPPER (Robust Full Width) --- *\/\n .assembly-section {\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: 800px;\n overflow: hidden !important;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #020202;\n z-index: 1;\n }\n\n \/* --- 3D CANVAS --- *\/\n #assembly-canvas {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n z-index: 1;\n display: block; \/* Ensure it's not hidden *\/\n }\n\n \/* --- UI OVERLAY --- *\/\n .assembly-content {\n position: relative;\n z-index: 10;\n text-align: center;\n pointer-events: none;\n max-width: 800px;\n padding: 0 20px;\n }\n\n .assembly-tag {\n color: var(--primary);\n font-family: 'Rajdhani';\n font-weight: 700;\n letter-spacing: 4px;\n text-transform: uppercase;\n font-size: 14px;\n margin-bottom: 20px;\n display: inline-block;\n border: 1px solid var(--primary);\n padding: 8px 16px;\n background: rgba(78, 205, 196, 0.1);\n backdrop-filter: blur(5px);\n }\n\n .assembly-title {\n font-family: 'Rajdhani', sans-serif;\n font-size: clamp(40px, 6vw, 80px);\n font-weight: 800;\n margin: 0 0 20px 0;\n text-transform: uppercase;\n text-shadow: 0 0 30px rgba(78, 205, 196, 0.4);\n }\n\n .assembly-desc {\n font-size: 18px;\n color: #ccc;\n line-height: 1.6;\n margin-bottom: 40px;\n }\n\n \/* --- DATA HUD --- *\/\n .hud-panel {\n position: absolute;\n bottom: 50px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 40px;\n z-index: 10;\n background: rgba(255,255,255,0.03);\n padding: 20px 40px;\n border-radius: 50px;\n border: 1px solid var(--border);\n backdrop-filter: blur(10px);\n }\n\n .hud-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .hud-val {\n font-family: 'Rajdhani';\n font-size: 24px;\n font-weight: 700;\n color: #fff;\n }\n \n .hud-label {\n font-size: 10px;\n color: var(--primary);\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-top: 5px;\n }\n\n \/* --- GRADIENT VIGNETTE --- *\/\n .vignette {\n position: absolute;\n inset: 0;\n background: radial-gradient(circle, transparent 30%, #020202 100%);\n z-index: 2;\n pointer-events: none;\n }\n\n @media (max-width: 768px) {\n .hud-panel { width: 90%; gap: 10px; justify-content: space-around; padding: 15px; }\n .hud-val { font-size: 18px; }\n .hud-label { font-size: 8px; }\n }\n\n <\/style>\n<\/head>\n<body>\n\n<section class=\"assembly-section\">\n \n <div id=\"assembly-canvas\"><\/div>\n <div class=\"vignette\"><\/div>\n\n <div class=\"assembly-content\">\n <span class=\"assembly-tag\">CNC Precision Knitting<\/span>\n <h2 class=\"assembly-title\">Crafted by<br>Intelligence<\/h2>\n <p class=\"assembly-desc\">\n Witness the synergy of man and machine. Our automated knitting systems operate with micron-level precision to create anatomically perfect supports.\n <\/p>\n <\/div>\n\n <div class=\"hud-panel\">\n <div class=\"hud-item\">\n <span class=\"hud-val\">99.8%<\/span>\n <span class=\"hud-label\">Precision Rate<\/span>\n <\/div>\n <div class=\"hud-item\">\n <span class=\"hud-val\">0.02s<\/span>\n <span class=\"hud-label\">Cycle Time<\/span>\n <\/div>\n <div class=\"hud-item\">\n <span class=\"hud-val\">ZERO<\/span>\n <span class=\"hud-label\">Defect Policy<\/span>\n <\/div>\n <\/div>\n\n<\/section>\n\n<script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const container = document.getElementById('assembly-canvas');\n if (!container) {\n console.error(\"Canvas container not found!\");\n return;\n }\n\n \/\/ --- THREE.JS SETUP ---\n const scene = new THREE.Scene();\n scene.fog = new THREE.FogExp2(0x020202, 0.015);\n\n const camera = new THREE.PerspectiveCamera(45, container.offsetWidth \/ container.offsetHeight, 0.1, 1000);\n camera.position.set(0, 15, 45); \/\/ Adjusted camera for better view\n camera.lookAt(0, 0, 0);\n\n const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\n renderer.setSize(container.offsetWidth, container.offsetHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); \/\/ Limit pixel ratio for performance\n container.appendChild(renderer.domElement);\n\n const assemblyGroup = new THREE.Group();\n scene.add(assemblyGroup);\n\n \/\/ --- 1. THE PRODUCT (Brighter & More Visible) ---\n const productGeo = new THREE.CylinderGeometry(4, 4, 14, 32, 10, true);\n const productMat = new THREE.MeshBasicMaterial({ \n color: 0x4ecdc4, \n wireframe: true, \n transparent: true, \n opacity: 0.15 \n });\n const product = new THREE.Mesh(productGeo, productMat);\n assemblyGroup.add(product);\n\n const coreGeo = new THREE.CylinderGeometry(3.5, 3.5, 13, 32);\n const coreMat = new THREE.MeshBasicMaterial({ color: 0x4ecdc4, transparent: true, opacity: 0.08 });\n const core = new THREE.Mesh(coreGeo, coreMat);\n assemblyGroup.add(core);\n\n \/\/ --- 2. THE WORKERS (Robotic Nodes) ---\n const workerCount = 6;\n const workers = [];\n const lasers = [];\n\n const workerGeo = new THREE.ConeGeometry(0.6, 1.8, 8);\n workerGeo.rotateX(Math.PI \/ 2); \n const workerMat = new THREE.MeshPhongMaterial({ color: 0xffffff, emissive: 0x4ecdc4, emissiveIntensity: 0.8 });\n\n const laserMat = new THREE.LineBasicMaterial({ color: 0xFF9F1C, transparent: true, opacity: 0.8, linewidth: 2 });\n\n for(let i=0; i<workerCount; i++) {\n const worker = new THREE.Mesh(workerGeo, workerMat);\n const angle = (i \/ workerCount) * Math.PI * 2;\n const radius = 12;\n \n worker.position.set(Math.cos(angle) * radius, 0, Math.sin(angle) * radius);\n \n worker.userData = { \n angle: angle, \n speed: 0.015 + Math.random() * 0.01, \/\/ Slightly faster\n yOffset: (Math.random() - 0.5) * 10,\n radius: radius\n };\n\n assemblyGroup.add(worker);\n workers.push(worker);\n\n \/\/ Laser Setup - Explicit BufferAttribute\n const positions = new Float32Array(6); \/\/ 2 points * 3 coords\n const laserGeo = new THREE.BufferGeometry();\n laserGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n \n const laser = new THREE.Line(laserGeo, laserMat);\n laser.frustumCulled = false; \/\/ Prevent flickering\n assemblyGroup.add(laser);\n lasers.push(laser);\n }\n\n \/\/ --- 3. PARTICLES (Sparks) ---\n const particleCount = 150;\n const pGeo = new THREE.BufferGeometry();\n const pPos = new Float32Array(particleCount * 3);\n \/\/ Initialize off-screen\n for(let i=0; i<particleCount*3; i++) pPos[i] = 9999;\n \n pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3));\n const pMat = new THREE.PointsMaterial({ color: 0xFF9F1C, size: 0.4, transparent: true, opacity: 0.9 });\n const sparks = new THREE.Points(pGeo, pMat);\n assemblyGroup.add(sparks);\n\n \/\/ --- LIGHTS ---\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);\n scene.add(ambientLight);\n \n const pLight = new THREE.PointLight(0x4ecdc4, 3, 60);\n pLight.position.set(0, 5, 0);\n scene.add(pLight);\n\n \/\/ --- ANIMATION LOOP ---\n function animate() {\n requestAnimationFrame(animate);\n\n product.rotation.y -= 0.005;\n core.rotation.y -= 0.005;\n\n const sparkPositions = sparks.geometry.attributes.position.array;\n let sparkIdx = 0;\n\n \/\/ Reset sparks each frame (simple approach)\n for(let k=0; k<particleCount*3; k++) sparkPositions[k] = 9999;\n\n workers.forEach((worker, i) => {\n \/\/ Update Worker Pos\n worker.userData.angle += worker.userData.speed;\n const y = Math.sin(Date.now() * 0.003 + i * 1.5) * 5; \n \n worker.position.x = Math.cos(worker.userData.angle) * worker.userData.radius;\n worker.position.z = Math.sin(worker.userData.angle) * worker.userData.radius;\n worker.position.y = y;\n \n worker.lookAt(0, y, 0); \n\n \/\/ Update Laser\n const laser = lasers[i];\n const positions = laser.geometry.attributes.position.array;\n \n \/\/ Start at worker\n positions[0] = worker.position.x;\n positions[1] = worker.position.y;\n positions[2] = worker.position.z;\n \n \/\/ End at product surface (radius ~4)\n const dir = new THREE.Vector3(0, y, 0).sub(worker.position).normalize();\n const target = worker.position.clone().add(dir.multiplyScalar(worker.userData.radius - 4));\n \n positions[3] = target.x;\n positions[4] = target.y;\n positions[5] = target.z;\n \n laser.geometry.attributes.position.needsUpdate = true;\n\n \/\/ Create Sparks at Target\n for(let j=0; j<8; j++) { \/\/ More sparks per laser\n if(sparkIdx < particleCount * 3) {\n const jitter = 0.5;\n sparkPositions[sparkIdx++] = target.x + (Math.random()-0.5)*jitter;\n sparkPositions[sparkIdx++] = target.y + (Math.random()-0.5)*jitter;\n sparkPositions[sparkIdx++] = target.z + (Math.random()-0.5)*jitter;\n }\n }\n });\n\n sparks.geometry.attributes.position.needsUpdate = true;\n renderer.render(scene, camera);\n }\n\n animate();\n\n \/\/ Handle Resize\n window.addEventListener('resize', () => {\n const w = container.offsetWidth;\n const h = container.offsetHeight;\n camera.aspect = w \/ h;\n camera.updateProjectionMatrix();\n renderer.setSize(w, h);\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Leadership Core Executive Command Leadership Team SALES Sales Director Hamed Rigi WhatsApp → Email → ADMIN General Manager Hamid Rigi<\/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-4439","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/unicare.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/4439","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=4439"}],"version-history":[{"count":42,"href":"https:\/\/unicare.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/4439\/revisions"}],"predecessor-version":[{"id":29471,"href":"https:\/\/unicare.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/4439\/revisions\/29471"}],"wp:attachment":[{"href":"https:\/\/unicare.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}