��<!-- 3D PEDESTAL HERO SECTION -->\n <section class=\"pc-hero\" style=\"position: relative; min-height: 100vh; padding-top: 100px; display: flex; align-items: center; overflow: hidden; background: #090e17;\">\n <!-- Industry 4.0 Background Image -->\n <div style=\"position: absolute; inset: 0; z-index: 0;\">\n <img loading=\"lazy\" src=\"img/hero-industry.webp\" alt=\"End��stri 4.0\" style=\"width: 100%; height: 100%; object-fit: cover; opacity: 0.65; filter: brightness(1.1) contrast(1.1);\">\n <div style=\"position: absolute; inset: 0; background: linear-gradient(to right, rgba(9, 14, 23, 0.95) 0%, rgba(9, 14, 23, 0.3) 50%, rgba(9, 14, 23, 0.6) 100%);\"></div>\n </div>\n\n <!-- Tech Grid & Accents -->\n <div style=\"position: absolute; inset: 0; background: radial-gradient(circle at 70% 50%, rgba(249, 115, 22, 0.15) 0%, transparent 50%);\"></div>\n <div style=\"position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 50px 50px; opacity: 0.5;\"></div>\n \n <div class=\"max-w-[1600px] mx-auto px-6 w-full relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\n \n <!-- Text Area -->\n <div>\n <div style=\"display: inline-block; padding: 6px 16px; background: rgba(249, 115, 22, 0.1); border: 1px solid rgba(249, 115, 22, 0.3); color: #f97316; border-radius: 20px; font-weight: bold; font-size: 14px; margin-bottom: 24px;\">\n YEN�� NES��L M��MAR��\n </div>\n <h1 style=\"font-size: clamp(3rem, 5vw, 5rem); font-weight: 900; color: white; line-height: 1.1; margin-bottom: 24px;\">\n Zorlu ��artlara <br/>\n <span style=\"background: linear-gradient(to right, #f97316, #fb923c); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">Kesintisiz G����.</span>\n </h1>\n <p style=\"font-size: 18px; color: #94a3b8; line-height: 1.6; margin-bottom: 40px; max-width: 600px;\">\n End��stri 4.0 ve Yapay Zeka tabanl�� ��retim hatlar��n��z i��in en dayan��kl�� Panel PC, Kutu PC ve Otomasyon donan��mlar��. \n </p>\n <div style=\"display: flex; gap: 16px;\">\n <a href=\"urunler.html\" style=\"padding: 16px 32px; background: #f97316; color: white; border-radius: 8px; font-weight: bold; font-size: 16px; box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3); transition: transform 0.3s;\" onmouseover=\"this.style.transform='translateY(-2px)'\" onmouseout=\"this.style.transform='translateY(0)'\">Katalo�xu ��ncele</a>\n </div>\n </div>\n\n <!-- 3D Pedestal Area -->\n <div style=\"position: relative; height: 600px; display: flex; align-items: center; justify-content: center; perspective: 1000px;\">\n \n <!-- Glowing Pedestal Base -->\n <div style=\"position: absolute; bottom: 80px; width: 450px; height: 120px; background: radial-gradient(ellipse at center, rgba(249, 115, 22, 0.3) 0%, transparent 70%); transform: rotateX(70deg); box-shadow: 0 0 50px rgba(249, 115, 22, 0.2);\"></div>\n <div style=\"position: absolute; bottom: 100px; width: 350px; height: 350px; border: 2px dashed rgba(249, 115, 22, 0.4); border-radius: 50%; transform: rotateX(70deg); animation: spin 20s linear infinite;\"></div>\n <div style=\"position: absolute; bottom: 120px; width: 250px; height: 250px; border: 1px solid rgba(59, 130, 246, 0.5); border-radius: 50%; transform: rotateX(70deg); animation: spin 15s linear infinite reverse;\"></div>\n \n <!-- Product Models (Floating) -->\n <!-- Box PC -->\n <img src=\"img/prod-boxpc.webp\" alt=\"End��striyel Kutu PC\" style=\"position: absolute; left: 5%; top: 250px; width: 220px; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); animation: float 7s ease-in-out infinite 1s; z-index: 10;\">\n \n <!-- Panel PC -->\n <img src=\"img/prod-panelpc.webp\" alt=\"End��striyel Panel PC\" style=\"position: absolute; right: 0; top: 100px; width: 450px; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); animation: float 6s ease-in-out infinite; z-index: 20;\">\n \n <!-- Floating Labels -->\n <div style=\"position: absolute; top: 80px; right: 20px; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px); padding: 8px 16px; border-radius: 20px; color: #fff; font-size: 13px; font-weight: bold; animation: float 5s ease-in-out infinite 0.5s; z-index: 30; box-shadow: 0 10px 20px rgba(0,0,0,0.3);\">\n <span style=\"color: #f97316;\">� �</span> IP65 Korumas��\n </div>\n <div style=\"position: absolute; bottom: 180px; left: -20px; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px); padding: 8px 16px; border-radius: 20px; color: #fff; font-size: 13px; font-weight: bold; animation: float 6s ease-in-out infinite 1.5s; z-index: 30; box-shadow: 0 10px 20px rgba(0,0,0,0.3);\">\n <span style=\"color: #3b82f6;\">� �</span> Fans��z So�xutma\n </div>\n <div style=\"position: absolute; bottom: 250px; right: 40px; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px); padding: 8px 16px; border-radius: 20px; color: #fff; font-size: 13px; font-weight: bold; animation: float 5.5s ease-in-out infinite 2s; z-index: 30; box-shadow: 0 10px 20px rgba(0,0,0,0.3);\">\n <span style=\"color: #10b981;\">� �</span> Intel�� Core� � i7\n </div>\n \n </div>\n </div>\n </section>