Steel Co \u2013 \u00c7elik \u0130\u015fleme Merkezi<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Barlow:wght@300;400;600&family=Barlow+Condensed:wght@700;900&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n :root {\n --blue: #1565c0;\n --blue-bright: #2196f3;\n --silver: #c8d0dc;\n --white: #f0f4f8;\n --glow: rgba(33,150,243,0.35);\n }\n html, body { width: 100%; height: 100%; overflow: hidden; background: #060a12; }\n #bg-canvas { position: fixed; inset: 0; z-index: 0; }\n\n .hero {\n position: relative; z-index: 1;\n width: 100vw; height: 100vh;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n overflow: hidden;\n }\n\n .vignette {\n position: fixed; inset: 0; z-index: 2; pointer-events: none;\n background: radial-gradient(ellipse 65% 65% at 50% 48%, rgba(0,0,0,0.0) 0%, rgba(4,8,18,0.82) 100%);\n }\n\n .scanline {\n position: absolute; left: 0; right: 0; height: 2px;\n background: linear-gradient(90deg, transparent, rgba(33,150,243,0.5), transparent);\n z-index: 3; animation: scan 7s ease-in-out infinite;\n box-shadow: 0 0 18px var(--glow);\n }\n @keyframes scan {\n 0% { top: -2px; opacity: 0; }\n 5% { opacity: 1; }\n 95% { opacity: 0.8; }\n 100% { top: 100%; opacity: 0; }\n }\n\n .bracket {\n position: absolute; z-index: 4; width: 55px; height: 55px;\n opacity: 0; animation: fade-up 0.8s 0.4s ease forwards;\n }\n .bracket-tl { top: 24px; left: 24px; border-top: 2px solid rgba(33,150,243,0.6); border-left: 2px solid rgba(33,150,243,0.6); }\n .bracket-tr { top: 24px; right: 24px; border-top: 2px solid rgba(33,150,243,0.6); border-right: 2px solid rgba(33,150,243,0.6); }\n .bracket-bl { bottom: 82px; left: 24px; border-bottom: 2px solid rgba(33,150,243,0.6); border-left: 2px solid rgba(33,150,243,0.6); }\n .bracket-br { bottom: 82px; right: 24px; border-bottom: 2px solid rgba(33,150,243,0.6); border-right: 2px solid rgba(33,150,243,0.6); }\n\n @keyframes fade-up { to { opacity: 1; transform: translateY(0); } }\n\n .side-label {\n position: absolute; z-index: 10;\n font-family: 'Barlow', sans-serif; font-size: 10px; font-weight: 600;\n letter-spacing: 0.25em; text-transform: uppercase; color: rgba(33,150,243,0.55);\n }\n .side-label.left { left: 50px; bottom: 90px; writing-mode: vertical-rl; transform: rotate(180deg); }\n .side-label.right { right: 50px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }\n\n .content {\n position: relative; z-index: 5;\n text-align: center;\n display: flex; flex-direction: column; align-items: center;\n }\n\n .center-logo {\n opacity: 0; transform: translateY(-20px) scale(0.88);\n animation: logo-in 1.3s 0.7s cubic-bezier(.16,1,.3,1) forwards;\n margin-bottom: 8px;\n }\n .center-logo img {\n height: clamp(75px, 10vw, 128px);\n filter: drop-shadow(0 0 28px rgba(33,150,243,0.45)) drop-shadow(0 0 60px rgba(33,150,243,0.12));\n }\n @keyframes logo-in { to { opacity: 1; transform: translateY(0) scale(1); } }\n\n .eyebrow {\n font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 600;\n letter-spacing: 0.4em; text-transform: uppercase; color: var(--blue-bright);\n margin-bottom: 18px; margin-top: 26px;\n opacity: 0; transform: translateY(10px);\n animation: fade-up 0.8s 1.5s ease forwards;\n display: flex; align-items: center; gap: 16px;\n }\n .eyebrow::before, .eyebrow::after {\n content: ''; display: block; width: 50px; height: 1px;\n background: var(--blue-bright); opacity: 0.4;\n }\n\n .t2 {\n display: block;\n font-family: 'Barlow Condensed', sans-serif;\n font-size: clamp(22px, 3.5vw, 52px);\n color: var(--silver); font-weight: 700; letter-spacing: 0.18em;\n text-transform: uppercase;\n opacity: 0; transform: translateY(30px);\n animation: fade-up 1s 1.7s cubic-bezier(.16,1,.3,1) forwards;\n min-height: 1.2em;\n }\n .cursor-blink {\n display: inline-block; width: 2px; height: 0.8em;\n background: var(--blue-bright); vertical-align: middle;\n animation: blink 1s step-end infinite; margin-left: 3px;\n }\n @keyframes blink { 50% { opacity: 0; } }\n\n .divider {\n width: 0; height: 1px;\n background: linear-gradient(90deg, transparent, var(--blue-bright), transparent);\n margin: 26px auto;\n animation: expand-line 1.2s 2.1s ease forwards;\n box-shadow: 0 0 10px var(--glow);\n }\n @keyframes expand-line { to { width: 340px; } }\n\n .services {\n display: flex; gap: 0; flex-wrap: wrap; justify-content: center; max-width: 820px;\n }\n .service-item {\n font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 600;\n letter-spacing: 0.16em; text-transform: uppercase;\n color: var(--silver); padding: 6px 18px;\n border-left: 1px solid rgba(33,150,243,0.2);\n opacity: 0; transform: translateY(14px);\n }\n .service-item:first-child { border-left: none; }\n .service-item:nth-child(1) { animation: fade-up 0.6s 2.4s ease forwards; }\n .service-item:nth-child(2) { animation: fade-up 0.6s 2.55s ease forwards; }\n .service-item:nth-child(3) { animation: fade-up 0.6s 2.7s ease forwards; }\n .service-item:nth-child(4) { animation: fade-up 0.6s 2.85s ease forwards; }\n\n .cta-wrap {\n margin-top: 38px; display: flex; gap: 18px; align-items: center;\n opacity: 0; animation: fade-up 0.8s 3.1s ease forwards;\n }\n .cta-btn {\n font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 600;\n letter-spacing: 0.25em; text-transform: uppercase;\n padding: 15px 40px; border: none; cursor: pointer;\n text-decoration: none; display: inline-block; transition: all 0.3s ease;\n clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);\n }\n .cta-primary { background: var(--blue); color: #fff; box-shadow: 0 0 30px rgba(21,101,192,0.5); }\n .cta-primary:hover { background: var(--blue-bright); box-shadow: 0 0 50px rgba(33,150,243,0.7); transform: translateY(-2px); }\n .cta-secondary { background: transparent; color: var(--silver); border: 1px solid rgba(200,208,220,0.22); padding: 14px 40px; }\n .cta-secondary:hover { color: #fff; border-color: rgba(33,150,243,0.5); }\n\n .stats {\n position: absolute; bottom: 0; left: 0; right: 0;\n display: flex; z-index: 10;\n border-top: 1px solid rgba(33,150,243,0.1);\n opacity: 0; animation: fade-up 0.8s 3.4s ease forwards;\n }\n .stat {\n flex: 1; padding: 20px 28px;\n border-right: 1px solid rgba(33,150,243,0.08);\n display: flex; align-items: center; gap: 14px;\n background: rgba(6,10,18,0.72); backdrop-filter: blur(12px);\n }\n .stat:last-child { border-right: none; }\n .stat-num {\n font-family: 'Bebas Neue', sans-serif; font-size: 34px;\n color: var(--blue-bright); line-height: 1;\n text-shadow: 0 0 20px var(--glow);\n }\n .stat-label {\n font-family: 'Barlow', sans-serif; font-size: 9px; font-weight: 600;\n letter-spacing: 0.2em; text-transform: uppercase;\n color: var(--silver); opacity: 0.65; line-height: 1.5;\n }\n\n .progress-bar {\n position: absolute; bottom: 0; left: 0; height: 2px;\n background: linear-gradient(90deg, var(--blue), var(--blue-bright));\n z-index: 20; animation: progress-grow 8s linear infinite;\n box-shadow: 0 0 8px var(--glow);\n }\n @keyframes progress-grow { 0% { width: 0; } 100% { width: 100%; } }\n\n .noise {\n position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.02;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n background-size: 180px;\n }\n<\/style>\n<\/head>\n<body>\n<canvas id=\"bg-canvas\"><\/canvas>\n<div class=\"noise\"><\/div>\n<div class=\"vignette\"><\/div>\n\n<section class=\"hero\">\n <div class=\"scanline\"><\/div>\n <div class=\"bracket bracket-tl\"><\/div>\n <div class=\"bracket bracket-tr\"><\/div>\n <div class=\"bracket bracket-bl\"><\/div>\n <div class=\"bracket bracket-br\"><\/div>\n <div class=\"progress-bar\"><\/div>\n <span class=\"side-label left\">\u00c7elik \u0130\u015fleme Merkezi \u2014 Sima Group<\/span>\n <span class=\"side-label right\">Yap\u0131sal \u00c7elik \u00b7 CNC \u00b7 B\u00fck\u00fcm<\/span>\n\n <div class=\"content\">\n <div class=\"center-logo\">\n <img decoding=\"async\" src=\"https:\/\/simagroup.tr\/steelco\/wp-content\/uploads\/2025\/12\/colored-logo-2.png\" alt=\"Steel Co\">\n <\/div>\n <div class=\"eyebrow\">End\u00fcstriyel G\u00fc\u00e7 & Hassasiyet<\/div>\n <span class=\"t2\"><span class=\"cursor-blink\"><\/span><\/span>\n <div class=\"divider\"><\/div>\n <div class=\"services\">\n <span class=\"service-item\">Yap\u0131sal \u00c7elik<\/span>\n <span class=\"service-item\">Anahtar Teslim \u0130n\u015faat<\/span>\n <span class=\"service-item\">CNC & Kesim<\/span>\n <span class=\"service-item\">\u015eekillendirme & B\u00fck\u00fcm<\/span>\n <\/div>\n <div class=\"cta-wrap\">\n <a href=\"https:\/\/simagroup.tr\/steelco\/portfolio-fullscreen-grid-3-col\/\" class=\"cta-btn cta-primary\">Projelerimizi \u0130nceleyin<\/a>\n <a href=\"https:\/\/simagroup.tr\/steelco\/\" class=\"cta-btn cta-secondary\">\u0130leti\u015fime Ge\u00e7in<\/a>\n <\/div>\n <\/div>\n\n <div class=\"stats\">\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"500\">0<\/div><div class=\"stat-label\">Tamamlanan<br>Proje<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"20\">0<\/div><div class=\"stat-label\">Y\u0131ll\u0131k<br>Deneyim<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"150\">0<\/div><div class=\"stat-label\">Uzman<br>Ekip<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"98\">0<\/div><div class=\"stat-label\">M\u00fc\u015fteri<br>Memnuniyeti %<\/div><\/div>\n <\/div>\n<\/section>\n\n<script>\nconst canvas = document.getElementById('bg-canvas');\nconst ctx = canvas.getContext('2d');\nlet W, H, frame = 0;\n\nlet ibeams = [], bolts = [], braces = [], sparks = [];\n\nfunction rnd(a,b){ return a + Math.random()*(b-a); }\nfunction rndInt(a,b){ return Math.floor(rnd(a,b+1)); }\n\nfunction resize(){\n W = canvas.width = window.innerWidth;\n H = canvas.height = window.innerHeight;\n initScene();\n}\nwindow.addEventListener('resize', resize);\n\nfunction initScene(){\n ibeams = []; bolts = []; braces = [];\n\n \/\/ Horizontal I-beams (slow drift downward)\n for(let i=0;i<7;i++){\n ibeams.push({\n type:'h',\n y: rnd(-20, H+20),\n x0: rnd(-W*0.3,-20), x1: rnd(W*1.0, W*1.3),\n h: rnd(14,34),\n vy: rnd(0.04, 0.18) * (Math.random()>0.5?1:-1),\n alpha: rnd(0.18, 0.55)\n });\n }\n\n \/\/ Vertical I-beams (slow drift sideways)\n for(let i=0;i<6;i++){\n ibeams.push({\n type:'v',\n x: rnd(-20, W+20),\n y0: rnd(-H*0.2,-10), y1: rnd(H*1.0, H*1.2),\n w: rnd(12,26),\n vx: rnd(0.03, 0.14) * (Math.random()>0.5?1:-1),\n alpha: rnd(0.12, 0.40)\n });\n }\n\n \/\/ Diagonal braces\n for(let i=0;i<10;i++){\n braces.push({\n x0: rnd(-100,W+100), y0: rnd(-50,H+50),\n len: rnd(90,260),\n ang: rnd(-0.85, 0.85) + (Math.random()>0.5 ? 0 : Math.PI\/2),\n vx: rnd(-0.06,0.06), vy: rnd(-0.04,0.04),\n alpha: rnd(0.1, 0.38),\n thick: rnd(3,7)\n });\n }\n\n \/\/ Bolts & rivets\n for(let i=0;i<32;i++){\n bolts.push({\n x: rnd(0,W), y: rnd(0,H),\n r: rnd(5,12),\n vx: rnd(-0.12,0.12), vy: rnd(-0.08,0.08),\n alpha: rnd(0.28,0.72),\n type: Math.random()>0.45?'hex':'round',\n rot: rnd(0, Math.PI*2),\n rotV: rnd(-0.005,0.005)\n });\n }\n}\n\n\/\/ \u2500\u2500 Draw helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nfunction drawHBeam(x0,x1,cy,h,alpha){\n const fw = h*0.38;\n ctx.save(); ctx.globalAlpha = alpha;\n\n \/\/ Shadow glow\n ctx.shadowColor = 'rgba(33,150,243,0.25)'; ctx.shadowBlur = 8;\n\n \/\/ Top flange\n ctx.fillStyle = 'rgba(22,42,80,0.7)';\n ctx.fillRect(x0, cy-h*0.5, x1-x0, fw);\n \/\/ Web\n ctx.fillRect(x0, cy-h*0.5+fw, x1-x0, h-fw*2);\n \/\/ Bottom flange\n ctx.fillRect(x0, cy+h*0.5-fw, x1-x0, fw);\n\n ctx.shadowBlur = 0;\n\n \/\/ Edges\n ctx.strokeStyle='rgba(33,150,243,0.22)'; ctx.lineWidth=0.8;\n ctx.beginPath();\n ctx.rect(x0, cy-h*0.5, x1-x0, h);\n ctx.moveTo(x0, cy-h*0.5+fw); ctx.lineTo(x1, cy-h*0.5+fw);\n ctx.moveTo(x0, cy+h*0.5-fw); ctx.lineTo(x1, cy+h*0.5-fw);\n ctx.stroke();\n\n \/\/ Highlight stripe on top flange\n ctx.fillStyle='rgba(120,170,240,0.07)';\n ctx.fillRect(x0, cy-h*0.5, x1-x0, fw*0.35);\n\n \/\/ Weld dots\n ctx.fillStyle='rgba(33,150,243,0.3)';\n for(let wx=x0+25; wx<x1; wx+=45){\n ctx.beginPath(); ctx.arc(wx,cy,1.5,0,Math.PI*2); ctx.fill();\n }\n ctx.restore();\n}\n\nfunction drawVBeam(cx,y0,y1,w,alpha){\n const fw = w*0.38;\n ctx.save(); ctx.globalAlpha = alpha;\n ctx.shadowColor='rgba(33,150,243,0.2)'; ctx.shadowBlur=6;\n\n ctx.fillStyle='rgba(22,42,80,0.7)';\n ctx.fillRect(cx-w*0.5, y0, fw, y1-y0); \/\/ left flange\n ctx.fillRect(cx-fw*0.5, y0, fw, y1-y0); \/\/ web\n ctx.fillRect(cx+w*0.5-fw,y0,fw, y1-y0); \/\/ right flange\n\n ctx.shadowBlur=0;\n ctx.strokeStyle='rgba(33,150,243,0.2)'; ctx.lineWidth=0.8;\n ctx.beginPath();\n ctx.rect(cx-w*0.5, y0, w, y1-y0);\n ctx.moveTo(cx-w*0.5+fw,y0); ctx.lineTo(cx-w*0.5+fw,y1);\n ctx.moveTo(cx+w*0.5-fw,y0); ctx.lineTo(cx+w*0.5-fw,y1);\n ctx.stroke();\n\n \/\/ Highlight\n ctx.fillStyle='rgba(120,170,240,0.07)';\n ctx.fillRect(cx-w*0.5, y0, fw*0.35, y1-y0);\n\n ctx.fillStyle='rgba(33,150,243,0.3)';\n for(let wy=y0+25; wy<y1; wy+=45){\n ctx.beginPath(); ctx.arc(cx,wy,1.5,0,Math.PI*2); ctx.fill();\n }\n ctx.restore();\n}\n\nfunction drawBrace(x0,y0,len,ang,alpha,thick){\n const x1=x0+Math.cos(ang)*len, y1=y0+Math.sin(ang)*len;\n ctx.save(); ctx.globalAlpha=alpha;\n \/\/ Thick base\n ctx.strokeStyle='rgba(22,42,80,0.8)'; ctx.lineWidth=thick;\n ctx.beginPath(); ctx.moveTo(x0,y0); ctx.lineTo(x1,y1); ctx.stroke();\n \/\/ Edge highlight\n ctx.strokeStyle='rgba(33,150,243,0.28)'; ctx.lineWidth=1;\n ctx.beginPath(); ctx.moveTo(x0,y0); ctx.lineTo(x1,y1); ctx.stroke();\n \/\/ End plates\n ctx.fillStyle='rgba(33,150,243,0.35)';\n ctx.beginPath(); ctx.arc(x0,y0,thick*0.6,0,Math.PI*2); ctx.fill();\n ctx.beginPath(); ctx.arc(x1,y1,thick*0.6,0,Math.PI*2); ctx.fill();\n ctx.restore();\n}\n\nfunction drawHexBolt(x,y,r,alpha,rot){\n ctx.save(); ctx.globalAlpha=alpha;\n ctx.translate(x,y); ctx.rotate(rot);\n \/\/ Hex body\n ctx.beginPath();\n for(let i=0;i<6;i++){\n const a=(Math.PI\/3)*i;\n i===0 ? ctx.moveTo(r*Math.cos(a), r*Math.sin(a))\n : ctx.lineTo(r*Math.cos(a), r*Math.sin(a));\n }\n ctx.closePath();\n ctx.fillStyle='rgba(18,38,72,0.75)'; ctx.fill();\n ctx.strokeStyle='rgba(33,150,243,0.55)'; ctx.lineWidth=1; ctx.stroke();\n \/\/ Inner hole\n ctx.beginPath(); ctx.arc(0,0,r*0.35,0,Math.PI*2);\n ctx.strokeStyle='rgba(100,170,240,0.4)'; ctx.lineWidth=0.7; ctx.stroke();\n \/\/ Highlight\n ctx.beginPath(); ctx.arc(-r*0.2,-r*0.2,r*0.22,0,Math.PI*2);\n ctx.fillStyle='rgba(180,215,255,0.12)'; ctx.fill();\n ctx.restore();\n}\n\nfunction drawRivet(x,y,r,alpha){\n ctx.save(); ctx.globalAlpha=alpha;\n \/\/ Base\n ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2);\n ctx.fillStyle='rgba(20,40,80,0.8)'; ctx.fill();\n ctx.strokeStyle='rgba(33,150,243,0.5)'; ctx.lineWidth=1; ctx.stroke();\n \/\/ Dome highlight\n const g=ctx.createRadialGradient(x-r*0.3,y-r*0.3,0,x,y,r);\n g.addColorStop(0,'rgba(200,225,255,0.3)');\n g.addColorStop(1,'rgba(20,50,120,0.0)');\n ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2);\n ctx.fillStyle=g; ctx.fill();\n ctx.restore();\n}\n\nfunction emitSparks(){\n \/\/ Randomly pick a beam intersection\n const src = ibeams[rndInt(0,ibeams.length-1)];\n let sx,sy;\n if(src.type==='h'){ sx=rnd(src.x0,src.x1); sy=src.y; }\n else { sx=src.x; sy=rnd(src.y0,src.y1); }\n for(let i=0;i<rndInt(3,7);i++){\n sparks.push({\n x:sx, y:sy,\n vx:rnd(-2.5,2.5), vy:rnd(-3.5,-0.5),\n life:1, decay:rnd(0.04,0.09), size:rnd(1.2,3)\n });\n }\n}\n\nfunction drawSparks(){\n for(let i=sparks.length-1;i>=0;i--){\n const s=sparks[i];\n s.x+=s.vx; s.y+=s.vy; s.vy+=0.07;\n s.life-=s.decay;\n if(s.life<=0){ sparks.splice(i,1); continue; }\n const hue = 200+s.life*40;\n ctx.save();\n ctx.globalAlpha=s.life*0.95;\n ctx.fillStyle=`hsl(${hue},100%,72%)`;\n ctx.shadowColor=`hsl(${hue},100%,72%)`; ctx.shadowBlur=4;\n ctx.beginPath(); ctx.arc(s.x,s.y,s.size*s.life,0,Math.PI*2); ctx.fill();\n ctx.restore();\n }\n}\n\nfunction draw(){\n frame++;\n ctx.clearRect(0,0,W,H);\n\n \/\/ Background\n const bg=ctx.createRadialGradient(W*0.5,H*0.45,0,W*0.5,H*0.45,W*0.75);\n bg.addColorStop(0,'#0c1828'); bg.addColorStop(1,'#040810');\n ctx.fillStyle=bg; ctx.fillRect(0,0,W,H);\n\n \/\/ Ambient center glow\n const pulse=0.8+Math.sin(frame*0.018)*0.2;\n const po=ctx.createRadialGradient(W*0.5,H*0.47,0,W*0.5,H*0.47,300*pulse);\n po.addColorStop(0,`rgba(21,101,192,${0.1*pulse})`);\n po.addColorStop(1,'transparent');\n ctx.fillStyle=po; ctx.fillRect(0,0,W,H);\n\n \/\/ Subtle grid\n ctx.strokeStyle='rgba(33,150,243,0.035)'; ctx.lineWidth=0.5;\n const gs=55, ox=(frame*0.14)%gs, oy=(frame*0.07)%gs;\n for(let x=-gs+ox;x<W+gs;x+=gs){ ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke(); }\n for(let y=-gs+oy;y<H+gs;y+=gs){ ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke(); }\n\n \/\/ \u2500\u2500 Diagonal braces \u2500\u2500\n for(const b of braces){\n b.x0+=b.vx; b.y0+=b.vy;\n \/\/ Wrap\n if(b.x0>W+300) b.x0=-300;\n if(b.x0<-300) b.x0=W+300;\n if(b.y0>H+300) b.y0=-300;\n if(b.y0<-300) b.y0=H+300;\n drawBrace(b.x0,b.y0,b.len,b.ang,b.alpha,b.thick);\n }\n\n \/\/ \u2500\u2500 I-Beams \u2500\u2500\n for(const b of ibeams){\n if(b.type==='h'){\n b.y+=b.vy;\n if(b.y>H+40) b.y=-40;\n if(b.y<-40) b.y=H+40;\n drawHBeam(b.x0,b.x1,b.y,b.h,b.alpha);\n } else {\n b.x+=b.vx;\n if(b.x>W+30) b.x=-30;\n if(b.x<-30) b.x=W+30;\n drawVBeam(b.x,b.y0,b.y1,b.w,b.alpha);\n }\n }\n\n \/\/ \u2500\u2500 Bolts & Rivets \u2500\u2500\n for(const bl of bolts){\n bl.x+=bl.vx; bl.y+=bl.vy; bl.rot+=bl.rotV;\n if(bl.x<-20) bl.x=W+20; if(bl.x>W+20) bl.x=-20;\n if(bl.y<-20) bl.y=H+20; if(bl.y>H+20) bl.y=-20;\n if(bl.type==='hex') drawHexBolt(bl.x,bl.y,bl.r,bl.alpha,bl.rot);\n else drawRivet(bl.x,bl.y,bl.r,bl.alpha);\n }\n\n \/\/ \u2500\u2500 Sparks \u2500\u2500\n if(frame%55===0) emitSparks();\n drawSparks();\n\n requestAnimationFrame(draw);\n}\n\nresize();\ndraw();\n\n\/\/ Typing effect\nconst t2el = document.querySelector('.t2');\nconst phrase = '\u00c7elik \u0130\u015fleme Merkezi';\nconst cur = '<span class=\"cursor-blink\"><\/span>';\nsetTimeout(()=>{\n let i=0;\n t2el.innerHTML = cur;\n const ti = setInterval(()=>{\n if(i<phrase.length){ t2el.innerHTML = phrase.slice(0,++i)+cur; }\n else clearInterval(ti);\n },65);\n},1900);\n\n\/\/ Counters\nfunction animateCounters(){\n document.querySelectorAll('.stat-num').forEach(el=>{\n const target=parseInt(el.dataset.target);\n let current=0;\n const step=target\/(2000\/16);\n const timer=setInterval(()=>{\n current=Math.min(current+step,target);\n el.textContent=Math.floor(current);\n if(current>=target) clearInterval(timer);\n },16);\n });\n}\nsetTimeout(animateCounters, 3500);\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\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>Steel Co \u2013 \u00c7elik \u0130\u015fleme Merkezi \u00c7elik \u0130\u015fleme Merkezi \u2014 Sima Group Yap\u0131sal \u00c7elik \u00b7 CNC \u00b7 B\u00fck\u00fcm End\u00fcstriyel G\u00fc\u00e7… <span class=\"qrt-el-more\"><a href=\"https:\/\/simagroup.tr\/steelco\/\" class=\"qrt-link qrt-color-link qrt-cursor-scale qrt-w-chevron\">Read more<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-layout-builder.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-561","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/pages\/561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/comments?post=561"}],"version-history":[{"count":16,"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/pages\/561\/revisions"}],"predecessor-version":[{"id":2585,"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/pages\/561\/revisions\/2585"}],"wp:attachment":[{"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/media?parent=561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nSteel Co \u2013 \u00c7elik \u0130\u015fleme Merkezi<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Barlow:wght@300;400;600&family=Barlow+Condensed:wght@700;900&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n :root {\n --blue: #1565c0;\n --blue-bright: #2196f3;\n --silver: #c8d0dc;\n --white: #f0f4f8;\n --glow: rgba(33,150,243,0.35);\n }\n html, body { width: 100%; height: 100%; overflow: hidden; background: #060a12; }\n #bg-canvas { position: fixed; inset: 0; z-index: 0; }\n\n .hero {\n position: relative; z-index: 1;\n width: 100vw; height: 100vh;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n overflow: hidden;\n }\n\n .vignette {\n position: fixed; inset: 0; z-index: 2; pointer-events: none;\n background: radial-gradient(ellipse 65% 65% at 50% 48%, rgba(0,0,0,0.0) 0%, rgba(4,8,18,0.82) 100%);\n }\n\n .scanline {\n position: absolute; left: 0; right: 0; height: 2px;\n background: linear-gradient(90deg, transparent, rgba(33,150,243,0.5), transparent);\n z-index: 3; animation: scan 7s ease-in-out infinite;\n box-shadow: 0 0 18px var(--glow);\n }\n @keyframes scan {\n 0% { top: -2px; opacity: 0; }\n 5% { opacity: 1; }\n 95% { opacity: 0.8; }\n 100% { top: 100%; opacity: 0; }\n }\n\n .bracket {\n position: absolute; z-index: 4; width: 55px; height: 55px;\n opacity: 0; animation: fade-up 0.8s 0.4s ease forwards;\n }\n .bracket-tl { top: 24px; left: 24px; border-top: 2px solid rgba(33,150,243,0.6); border-left: 2px solid rgba(33,150,243,0.6); }\n .bracket-tr { top: 24px; right: 24px; border-top: 2px solid rgba(33,150,243,0.6); border-right: 2px solid rgba(33,150,243,0.6); }\n .bracket-bl { bottom: 82px; left: 24px; border-bottom: 2px solid rgba(33,150,243,0.6); border-left: 2px solid rgba(33,150,243,0.6); }\n .bracket-br { bottom: 82px; right: 24px; border-bottom: 2px solid rgba(33,150,243,0.6); border-right: 2px solid rgba(33,150,243,0.6); }\n\n @keyframes fade-up { to { opacity: 1; transform: translateY(0); } }\n\n .side-label {\n position: absolute; z-index: 10;\n font-family: 'Barlow', sans-serif; font-size: 10px; font-weight: 600;\n letter-spacing: 0.25em; text-transform: uppercase; color: rgba(33,150,243,0.55);\n }\n .side-label.left { left: 50px; bottom: 90px; writing-mode: vertical-rl; transform: rotate(180deg); }\n .side-label.right { right: 50px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }\n\n .content {\n position: relative; z-index: 5;\n text-align: center;\n display: flex; flex-direction: column; align-items: center;\n }\n\n .center-logo {\n opacity: 0; transform: translateY(-20px) scale(0.88);\n animation: logo-in 1.3s 0.7s cubic-bezier(.16,1,.3,1) forwards;\n margin-bottom: 8px;\n }\n .center-logo img {\n height: clamp(75px, 10vw, 128px);\n filter: drop-shadow(0 0 28px rgba(33,150,243,0.45)) drop-shadow(0 0 60px rgba(33,150,243,0.12));\n }\n @keyframes logo-in { to { opacity: 1; transform: translateY(0) scale(1); } }\n\n .eyebrow {\n font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 600;\n letter-spacing: 0.4em; text-transform: uppercase; color: var(--blue-bright);\n margin-bottom: 18px; margin-top: 26px;\n opacity: 0; transform: translateY(10px);\n animation: fade-up 0.8s 1.5s ease forwards;\n display: flex; align-items: center; gap: 16px;\n }\n .eyebrow::before, .eyebrow::after {\n content: ''; display: block; width: 50px; height: 1px;\n background: var(--blue-bright); opacity: 0.4;\n }\n\n .t2 {\n display: block;\n font-family: 'Barlow Condensed', sans-serif;\n font-size: clamp(22px, 3.5vw, 52px);\n color: var(--silver); font-weight: 700; letter-spacing: 0.18em;\n text-transform: uppercase;\n opacity: 0; transform: translateY(30px);\n animation: fade-up 1s 1.7s cubic-bezier(.16,1,.3,1) forwards;\n min-height: 1.2em;\n }\n .cursor-blink {\n display: inline-block; width: 2px; height: 0.8em;\n background: var(--blue-bright); vertical-align: middle;\n animation: blink 1s step-end infinite; margin-left: 3px;\n }\n @keyframes blink { 50% { opacity: 0; } }\n\n .divider {\n width: 0; height: 1px;\n background: linear-gradient(90deg, transparent, var(--blue-bright), transparent);\n margin: 26px auto;\n animation: expand-line 1.2s 2.1s ease forwards;\n box-shadow: 0 0 10px var(--glow);\n }\n @keyframes expand-line { to { width: 340px; } }\n\n .services {\n display: flex; gap: 0; flex-wrap: wrap; justify-content: center; max-width: 820px;\n }\n .service-item {\n font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 600;\n letter-spacing: 0.16em; text-transform: uppercase;\n color: var(--silver); padding: 6px 18px;\n border-left: 1px solid rgba(33,150,243,0.2);\n opacity: 0; transform: translateY(14px);\n }\n .service-item:first-child { border-left: none; }\n .service-item:nth-child(1) { animation: fade-up 0.6s 2.4s ease forwards; }\n .service-item:nth-child(2) { animation: fade-up 0.6s 2.55s ease forwards; }\n .service-item:nth-child(3) { animation: fade-up 0.6s 2.7s ease forwards; }\n .service-item:nth-child(4) { animation: fade-up 0.6s 2.85s ease forwards; }\n\n .cta-wrap {\n margin-top: 38px; display: flex; gap: 18px; align-items: center;\n opacity: 0; animation: fade-up 0.8s 3.1s ease forwards;\n }\n .cta-btn {\n font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 600;\n letter-spacing: 0.25em; text-transform: uppercase;\n padding: 15px 40px; border: none; cursor: pointer;\n text-decoration: none; display: inline-block; transition: all 0.3s ease;\n clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);\n }\n .cta-primary { background: var(--blue); color: #fff; box-shadow: 0 0 30px rgba(21,101,192,0.5); }\n .cta-primary:hover { background: var(--blue-bright); box-shadow: 0 0 50px rgba(33,150,243,0.7); transform: translateY(-2px); }\n .cta-secondary { background: transparent; color: var(--silver); border: 1px solid rgba(200,208,220,0.22); padding: 14px 40px; }\n .cta-secondary:hover { color: #fff; border-color: rgba(33,150,243,0.5); }\n\n .stats {\n position: absolute; bottom: 0; left: 0; right: 0;\n display: flex; z-index: 10;\n border-top: 1px solid rgba(33,150,243,0.1);\n opacity: 0; animation: fade-up 0.8s 3.4s ease forwards;\n }\n .stat {\n flex: 1; padding: 20px 28px;\n border-right: 1px solid rgba(33,150,243,0.08);\n display: flex; align-items: center; gap: 14px;\n background: rgba(6,10,18,0.72); backdrop-filter: blur(12px);\n }\n .stat:last-child { border-right: none; }\n .stat-num {\n font-family: 'Bebas Neue', sans-serif; font-size: 34px;\n color: var(--blue-bright); line-height: 1;\n text-shadow: 0 0 20px var(--glow);\n }\n .stat-label {\n font-family: 'Barlow', sans-serif; font-size: 9px; font-weight: 600;\n letter-spacing: 0.2em; text-transform: uppercase;\n color: var(--silver); opacity: 0.65; line-height: 1.5;\n }\n\n .progress-bar {\n position: absolute; bottom: 0; left: 0; height: 2px;\n background: linear-gradient(90deg, var(--blue), var(--blue-bright));\n z-index: 20; animation: progress-grow 8s linear infinite;\n box-shadow: 0 0 8px var(--glow);\n }\n @keyframes progress-grow { 0% { width: 0; } 100% { width: 100%; } }\n\n .noise {\n position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.02;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n background-size: 180px;\n }\n<\/style>\n<\/head>\n<body>\n<canvas id=\"bg-canvas\"><\/canvas>\n<div class=\"noise\"><\/div>\n<div class=\"vignette\"><\/div>\n\n<section class=\"hero\">\n <div class=\"scanline\"><\/div>\n <div class=\"bracket bracket-tl\"><\/div>\n <div class=\"bracket bracket-tr\"><\/div>\n <div class=\"bracket bracket-bl\"><\/div>\n <div class=\"bracket bracket-br\"><\/div>\n <div class=\"progress-bar\"><\/div>\n <span class=\"side-label left\">\u00c7elik \u0130\u015fleme Merkezi \u2014 Sima Group<\/span>\n <span class=\"side-label right\">Yap\u0131sal \u00c7elik \u00b7 CNC \u00b7 B\u00fck\u00fcm<\/span>\n\n <div class=\"content\">\n <div class=\"center-logo\">\n <img decoding=\"async\" src=\"https:\/\/simagroup.tr\/steelco\/wp-content\/uploads\/2025\/12\/colored-logo-2.png\" alt=\"Steel Co\">\n <\/div>\n <div class=\"eyebrow\">End\u00fcstriyel G\u00fc\u00e7 & Hassasiyet<\/div>\n <span class=\"t2\"><span class=\"cursor-blink\"><\/span><\/span>\n <div class=\"divider\"><\/div>\n <div class=\"services\">\n <span class=\"service-item\">Yap\u0131sal \u00c7elik<\/span>\n <span class=\"service-item\">Anahtar Teslim \u0130n\u015faat<\/span>\n <span class=\"service-item\">CNC & Kesim<\/span>\n <span class=\"service-item\">\u015eekillendirme & B\u00fck\u00fcm<\/span>\n <\/div>\n <div class=\"cta-wrap\">\n <a href=\"https:\/\/simagroup.tr\/steelco\/portfolio-fullscreen-grid-3-col\/\" class=\"cta-btn cta-primary\">Projelerimizi \u0130nceleyin<\/a>\n <a href=\"https:\/\/simagroup.tr\/steelco\/\" class=\"cta-btn cta-secondary\">\u0130leti\u015fime Ge\u00e7in<\/a>\n <\/div>\n <\/div>\n\n <div class=\"stats\">\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"500\">0<\/div><div class=\"stat-label\">Tamamlanan<br>Proje<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"20\">0<\/div><div class=\"stat-label\">Y\u0131ll\u0131k<br>Deneyim<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"150\">0<\/div><div class=\"stat-label\">Uzman<br>Ekip<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"98\">0<\/div><div class=\"stat-label\">M\u00fc\u015fteri<br>Memnuniyeti %<\/div><\/div>\n <\/div>\n<\/section>\n\n<script>\nconst canvas = document.getElementById('bg-canvas');\nconst ctx = canvas.getContext('2d');\nlet W, H, frame = 0;\n\nlet ibeams = [], bolts = [], braces = [], sparks = [];\n\nfunction rnd(a,b){ return a + Math.random()*(b-a); }\nfunction rndInt(a,b){ return Math.floor(rnd(a,b+1)); }\n\nfunction resize(){\n W = canvas.width = window.innerWidth;\n H = canvas.height = window.innerHeight;\n initScene();\n}\nwindow.addEventListener('resize', resize);\n\nfunction initScene(){\n ibeams = []; bolts = []; braces = [];\n\n \/\/ Horizontal I-beams (slow drift downward)\n for(let i=0;i<7;i++){\n ibeams.push({\n type:'h',\n y: rnd(-20, H+20),\n x0: rnd(-W*0.3,-20), x1: rnd(W*1.0, W*1.3),\n h: rnd(14,34),\n vy: rnd(0.04, 0.18) * (Math.random()>0.5?1:-1),\n alpha: rnd(0.18, 0.55)\n });\n }\n\n \/\/ Vertical I-beams (slow drift sideways)\n for(let i=0;i<6;i++){\n ibeams.push({\n type:'v',\n x: rnd(-20, W+20),\n y0: rnd(-H*0.2,-10), y1: rnd(H*1.0, H*1.2),\n w: rnd(12,26),\n vx: rnd(0.03, 0.14) * (Math.random()>0.5?1:-1),\n alpha: rnd(0.12, 0.40)\n });\n }\n\n \/\/ Diagonal braces\n for(let i=0;i<10;i++){\n braces.push({\n x0: rnd(-100,W+100), y0: rnd(-50,H+50),\n len: rnd(90,260),\n ang: rnd(-0.85, 0.85) + (Math.random()>0.5 ? 0 : Math.PI\/2),\n vx: rnd(-0.06,0.06), vy: rnd(-0.04,0.04),\n alpha: rnd(0.1, 0.38),\n thick: rnd(3,7)\n });\n }\n\n \/\/ Bolts & rivets\n for(let i=0;i<32;i++){\n bolts.push({\n x: rnd(0,W), y: rnd(0,H),\n r: rnd(5,12),\n vx: rnd(-0.12,0.12), vy: rnd(-0.08,0.08),\n alpha: rnd(0.28,0.72),\n type: Math.random()>0.45?'hex':'round',\n rot: rnd(0, Math.PI*2),\n rotV: rnd(-0.005,0.005)\n });\n }\n}\n\n\/\/ \u2500\u2500 Draw helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nfunction drawHBeam(x0,x1,cy,h,alpha){\n const fw = h*0.38;\n ctx.save(); ctx.globalAlpha = alpha;\n\n \/\/ Shadow glow\n ctx.shadowColor = 'rgba(33,150,243,0.25)'; ctx.shadowBlur = 8;\n\n \/\/ Top flange\n ctx.fillStyle = 'rgba(22,42,80,0.7)';\n ctx.fillRect(x0, cy-h*0.5, x1-x0, fw);\n \/\/ Web\n ctx.fillRect(x0, cy-h*0.5+fw, x1-x0, h-fw*2);\n \/\/ Bottom flange\n ctx.fillRect(x0, cy+h*0.5-fw, x1-x0, fw);\n\n ctx.shadowBlur = 0;\n\n \/\/ Edges\n ctx.strokeStyle='rgba(33,150,243,0.22)'; ctx.lineWidth=0.8;\n ctx.beginPath();\n ctx.rect(x0, cy-h*0.5, x1-x0, h);\n ctx.moveTo(x0, cy-h*0.5+fw); ctx.lineTo(x1, cy-h*0.5+fw);\n ctx.moveTo(x0, cy+h*0.5-fw); ctx.lineTo(x1, cy+h*0.5-fw);\n ctx.stroke();\n\n \/\/ Highlight stripe on top flange\n ctx.fillStyle='rgba(120,170,240,0.07)';\n ctx.fillRect(x0, cy-h*0.5, x1-x0, fw*0.35);\n\n \/\/ Weld dots\n ctx.fillStyle='rgba(33,150,243,0.3)';\n for(let wx=x0+25; wx<x1; wx+=45){\n ctx.beginPath(); ctx.arc(wx,cy,1.5,0,Math.PI*2); ctx.fill();\n }\n ctx.restore();\n}\n\nfunction drawVBeam(cx,y0,y1,w,alpha){\n const fw = w*0.38;\n ctx.save(); ctx.globalAlpha = alpha;\n ctx.shadowColor='rgba(33,150,243,0.2)'; ctx.shadowBlur=6;\n\n ctx.fillStyle='rgba(22,42,80,0.7)';\n ctx.fillRect(cx-w*0.5, y0, fw, y1-y0); \/\/ left flange\n ctx.fillRect(cx-fw*0.5, y0, fw, y1-y0); \/\/ web\n ctx.fillRect(cx+w*0.5-fw,y0,fw, y1-y0); \/\/ right flange\n\n ctx.shadowBlur=0;\n ctx.strokeStyle='rgba(33,150,243,0.2)'; ctx.lineWidth=0.8;\n ctx.beginPath();\n ctx.rect(cx-w*0.5, y0, w, y1-y0);\n ctx.moveTo(cx-w*0.5+fw,y0); ctx.lineTo(cx-w*0.5+fw,y1);\n ctx.moveTo(cx+w*0.5-fw,y0); ctx.lineTo(cx+w*0.5-fw,y1);\n ctx.stroke();\n\n \/\/ Highlight\n ctx.fillStyle='rgba(120,170,240,0.07)';\n ctx.fillRect(cx-w*0.5, y0, fw*0.35, y1-y0);\n\n ctx.fillStyle='rgba(33,150,243,0.3)';\n for(let wy=y0+25; wy<y1; wy+=45){\n ctx.beginPath(); ctx.arc(cx,wy,1.5,0,Math.PI*2); ctx.fill();\n }\n ctx.restore();\n}\n\nfunction drawBrace(x0,y0,len,ang,alpha,thick){\n const x1=x0+Math.cos(ang)*len, y1=y0+Math.sin(ang)*len;\n ctx.save(); ctx.globalAlpha=alpha;\n \/\/ Thick base\n ctx.strokeStyle='rgba(22,42,80,0.8)'; ctx.lineWidth=thick;\n ctx.beginPath(); ctx.moveTo(x0,y0); ctx.lineTo(x1,y1); ctx.stroke();\n \/\/ Edge highlight\n ctx.strokeStyle='rgba(33,150,243,0.28)'; ctx.lineWidth=1;\n ctx.beginPath(); ctx.moveTo(x0,y0); ctx.lineTo(x1,y1); ctx.stroke();\n \/\/ End plates\n ctx.fillStyle='rgba(33,150,243,0.35)';\n ctx.beginPath(); ctx.arc(x0,y0,thick*0.6,0,Math.PI*2); ctx.fill();\n ctx.beginPath(); ctx.arc(x1,y1,thick*0.6,0,Math.PI*2); ctx.fill();\n ctx.restore();\n}\n\nfunction drawHexBolt(x,y,r,alpha,rot){\n ctx.save(); ctx.globalAlpha=alpha;\n ctx.translate(x,y); ctx.rotate(rot);\n \/\/ Hex body\n ctx.beginPath();\n for(let i=0;i<6;i++){\n const a=(Math.PI\/3)*i;\n i===0 ? ctx.moveTo(r*Math.cos(a), r*Math.sin(a))\n : ctx.lineTo(r*Math.cos(a), r*Math.sin(a));\n }\n ctx.closePath();\n ctx.fillStyle='rgba(18,38,72,0.75)'; ctx.fill();\n ctx.strokeStyle='rgba(33,150,243,0.55)'; ctx.lineWidth=1; ctx.stroke();\n \/\/ Inner hole\n ctx.beginPath(); ctx.arc(0,0,r*0.35,0,Math.PI*2);\n ctx.strokeStyle='rgba(100,170,240,0.4)'; ctx.lineWidth=0.7; ctx.stroke();\n \/\/ Highlight\n ctx.beginPath(); ctx.arc(-r*0.2,-r*0.2,r*0.22,0,Math.PI*2);\n ctx.fillStyle='rgba(180,215,255,0.12)'; ctx.fill();\n ctx.restore();\n}\n\nfunction drawRivet(x,y,r,alpha){\n ctx.save(); ctx.globalAlpha=alpha;\n \/\/ Base\n ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2);\n ctx.fillStyle='rgba(20,40,80,0.8)'; ctx.fill();\n ctx.strokeStyle='rgba(33,150,243,0.5)'; ctx.lineWidth=1; ctx.stroke();\n \/\/ Dome highlight\n const g=ctx.createRadialGradient(x-r*0.3,y-r*0.3,0,x,y,r);\n g.addColorStop(0,'rgba(200,225,255,0.3)');\n g.addColorStop(1,'rgba(20,50,120,0.0)');\n ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2);\n ctx.fillStyle=g; ctx.fill();\n ctx.restore();\n}\n\nfunction emitSparks(){\n \/\/ Randomly pick a beam intersection\n const src = ibeams[rndInt(0,ibeams.length-1)];\n let sx,sy;\n if(src.type==='h'){ sx=rnd(src.x0,src.x1); sy=src.y; }\n else { sx=src.x; sy=rnd(src.y0,src.y1); }\n for(let i=0;i<rndInt(3,7);i++){\n sparks.push({\n x:sx, y:sy,\n vx:rnd(-2.5,2.5), vy:rnd(-3.5,-0.5),\n life:1, decay:rnd(0.04,0.09), size:rnd(1.2,3)\n });\n }\n}\n\nfunction drawSparks(){\n for(let i=sparks.length-1;i>=0;i--){\n const s=sparks[i];\n s.x+=s.vx; s.y+=s.vy; s.vy+=0.07;\n s.life-=s.decay;\n if(s.life<=0){ sparks.splice(i,1); continue; }\n const hue = 200+s.life*40;\n ctx.save();\n ctx.globalAlpha=s.life*0.95;\n ctx.fillStyle=`hsl(${hue},100%,72%)`;\n ctx.shadowColor=`hsl(${hue},100%,72%)`; ctx.shadowBlur=4;\n ctx.beginPath(); ctx.arc(s.x,s.y,s.size*s.life,0,Math.PI*2); ctx.fill();\n ctx.restore();\n }\n}\n\nfunction draw(){\n frame++;\n ctx.clearRect(0,0,W,H);\n\n \/\/ Background\n const bg=ctx.createRadialGradient(W*0.5,H*0.45,0,W*0.5,H*0.45,W*0.75);\n bg.addColorStop(0,'#0c1828'); bg.addColorStop(1,'#040810');\n ctx.fillStyle=bg; ctx.fillRect(0,0,W,H);\n\n \/\/ Ambient center glow\n const pulse=0.8+Math.sin(frame*0.018)*0.2;\n const po=ctx.createRadialGradient(W*0.5,H*0.47,0,W*0.5,H*0.47,300*pulse);\n po.addColorStop(0,`rgba(21,101,192,${0.1*pulse})`);\n po.addColorStop(1,'transparent');\n ctx.fillStyle=po; ctx.fillRect(0,0,W,H);\n\n \/\/ Subtle grid\n ctx.strokeStyle='rgba(33,150,243,0.035)'; ctx.lineWidth=0.5;\n const gs=55, ox=(frame*0.14)%gs, oy=(frame*0.07)%gs;\n for(let x=-gs+ox;x<W+gs;x+=gs){ ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke(); }\n for(let y=-gs+oy;y<H+gs;y+=gs){ ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke(); }\n\n \/\/ \u2500\u2500 Diagonal braces \u2500\u2500\n for(const b of braces){\n b.x0+=b.vx; b.y0+=b.vy;\n \/\/ Wrap\n if(b.x0>W+300) b.x0=-300;\n if(b.x0<-300) b.x0=W+300;\n if(b.y0>H+300) b.y0=-300;\n if(b.y0<-300) b.y0=H+300;\n drawBrace(b.x0,b.y0,b.len,b.ang,b.alpha,b.thick);\n }\n\n \/\/ \u2500\u2500 I-Beams \u2500\u2500\n for(const b of ibeams){\n if(b.type==='h'){\n b.y+=b.vy;\n if(b.y>H+40) b.y=-40;\n if(b.y<-40) b.y=H+40;\n drawHBeam(b.x0,b.x1,b.y,b.h,b.alpha);\n } else {\n b.x+=b.vx;\n if(b.x>W+30) b.x=-30;\n if(b.x<-30) b.x=W+30;\n drawVBeam(b.x,b.y0,b.y1,b.w,b.alpha);\n }\n }\n\n \/\/ \u2500\u2500 Bolts & Rivets \u2500\u2500\n for(const bl of bolts){\n bl.x+=bl.vx; bl.y+=bl.vy; bl.rot+=bl.rotV;\n if(bl.x<-20) bl.x=W+20; if(bl.x>W+20) bl.x=-20;\n if(bl.y<-20) bl.y=H+20; if(bl.y>H+20) bl.y=-20;\n if(bl.type==='hex') drawHexBolt(bl.x,bl.y,bl.r,bl.alpha,bl.rot);\n else drawRivet(bl.x,bl.y,bl.r,bl.alpha);\n }\n\n \/\/ \u2500\u2500 Sparks \u2500\u2500\n if(frame%55===0) emitSparks();\n drawSparks();\n\n requestAnimationFrame(draw);\n}\n\nresize();\ndraw();\n\n\/\/ Typing effect\nconst t2el = document.querySelector('.t2');\nconst phrase = '\u00c7elik \u0130\u015fleme Merkezi';\nconst cur = '<span class=\"cursor-blink\"><\/span>';\nsetTimeout(()=>{\n let i=0;\n t2el.innerHTML = cur;\n const ti = setInterval(()=>{\n if(i<phrase.length){ t2el.innerHTML = phrase.slice(0,++i)+cur; }\n else clearInterval(ti);\n },65);\n},1900);\n\n\/\/ Counters\nfunction animateCounters(){\n document.querySelectorAll('.stat-num').forEach(el=>{\n const target=parseInt(el.dataset.target);\n let current=0;\n const step=target\/(2000\/16);\n const timer=setInterval(()=>{\n current=Math.min(current+step,target);\n el.textContent=Math.floor(current);\n if(current>=target) clearInterval(timer);\n },16);\n });\n}\nsetTimeout(animateCounters, 3500);\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\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>Steel Co \u2013 \u00c7elik \u0130\u015fleme Merkezi \u00c7elik \u0130\u015fleme Merkezi \u2014 Sima Group Yap\u0131sal \u00c7elik \u00b7 CNC \u00b7 B\u00fck\u00fcm End\u00fcstriyel G\u00fc\u00e7… <span class=\"qrt-el-more\"><a href=\"https:\/\/simagroup.tr\/steelco\/\" class=\"qrt-link qrt-color-link qrt-cursor-scale qrt-w-chevron\">Read more<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-layout-builder.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-561","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/pages\/561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/comments?post=561"}],"version-history":[{"count":16,"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/pages\/561\/revisions"}],"predecessor-version":[{"id":2585,"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/pages\/561\/revisions\/2585"}],"wp:attachment":[{"href":"https:\/\/simagroup.tr\/steelco\/wp-json\/wp\/v2\/media?parent=561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}