{"id":308,"date":"2025-02-01T15:56:56","date_gmt":"2025-02-01T15:56:56","guid":{"rendered":"https:\/\/afkdesign.se\/home-2\/"},"modified":"2026-04-26T08:54:51","modified_gmt":"2026-04-26T07:54:51","slug":"home-2","status":"publish","type":"page","link":"https:\/\/afkteknik.se\/shop\/home-2\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n AFK Teknik - Inte Bara En Elektronikverkstad p\u00e5 \u00d6sterlen<\/title>\n \n <meta name=\"description\" content=\"Specialiserad elektronikverkstad i Glemmingebro p\u00e5 \u00d6sterlen. Vi lagar mobil, dator, kretskort, vitvaror, jukebox och flipper. \u00c4ven 3D-printing & CNC.\">\n <meta name=\"keywords\" content=\"elektronikverkstad, laga dator, kretskort, Glemmingebro, \u00d6sterlen, 3D-printing, flipperspel, AFK Teknik, AFK Design\">\n <meta name=\"author\" content=\"Anton Svensson - AFK Teknik\">\n <meta name=\"robots\" content=\"index, follow\">\n\n <script>\n (function() {\n var ua = navigator.userAgent || navigator.vendor || window.opera;\n if ((ua.indexOf(\"FBAN\") > -1) || (ua.indexOf(\"FBAV\") > -1) || (ua.indexOf(\"Instagram\") > -1)) {\n document.documentElement.classList.add(\"is-inapp-browser\");\n }\n })();\n <\/script>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link rel=\"dns-prefetch\" href=\"https:\/\/cdn.tailwindcss.com\">\n <link rel=\"preconnect\" href=\"https:\/\/cdn.tailwindcss.com\" crossorigin>\n\n <link rel=\"preload\" as=\"style\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\">\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" media=\"print\" onload=\"this.media='all'\">\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide@latest\" defer><\/script>\n\n <script>\n window.tailwind = window.tailwind || {};\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n slate: { 800: '#1e293b', 850: '#172033', 900: '#0f172a', 950: '#020617' },\n brand: { 400: '#fb923c', 500: '#f97316', 600: '#ea580c' },\n },\n fontFamily: { sans: ['Inter', 'sans-serif'] },\n animation: {\n 'fade-in': 'fadeIn 1s ease-out forwards',\n 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n 'spin-slow': 'spin 12s linear infinite',\n },\n keyframes: {\n fadeIn: {\n '0%': { opacity: '0', transform: 'translateY(20px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n }\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* Fix mot det vita strecket h\u00f6gst upp (sk\u00f6ld mot Elementor\/WP margins) *\/\n html, body {\n margin: 0 !important;\n padding: 0 !important;\n background-color: #0f172a !important;\n color: #e2e8f0;\n overflow-x: hidden;\n }\n\n \/* Critical CSS f\u00f6r fullbredd och prestanda *\/\n #afk-wrapper {\n font-family: 'Inter', sans-serif;\n width: 100vw;\n position: relative;\n top: 0;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n overflow-x: hidden;\n background-color: #0f172a;\n }\n \n .gpu-accelerate {\n transform: translateZ(0);\n will-change: transform, opacity;\n backface-visibility: hidden;\n }\n\n .glass-panel {\n background: rgba(30, 41, 59, 0.7);\n @supports (-webkit-backdrop-filter: none) {\n -webkit-backdrop-filter: blur(12px);\n backdrop-filter: blur(12px);\n }\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n\n \/* FB In-App Browser Failsafe CSS - St\u00e4nger av tunga glaspaneler *\/\n .is-inapp-browser .glass-panel,\n .is-inapp-browser .backdrop-blur-lg,\n .is-inapp-browser .backdrop-blur-xl,\n .is-inapp-browser .backdrop-blur {\n backdrop-filter: none !important;\n -webkit-backdrop-filter: none !important;\n background-color: rgba(15, 23, 42, 0.98) !important; \n }\n .is-inapp-browser .blur-\\[100px\\],\n .is-inapp-browser .blur-\\[80px\\],\n .is-inapp-browser .blur-\\[60px\\] {\n display: none !important; \/* D\u00f6dar massiva bakgrunds-glows helt f\u00f6r att spara VRAM *\/\n }\n\n \/* Bg grid pattern *\/\n .bg-grid-pattern {\n background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);\n background-size: 40px 40px;\n }\n\n \/* Custom Form Input Styles *\/\n .form-input {\n background-color: #1e293b !important; \n border: 1px solid #334155 !important;\n color: white !important;\n transition: all 0.2s ease-in-out;\n }\n .form-input:focus, .form-input:focus-visible {\n border-color: #f97316 !important;\n background-color: #0f172a !important;\n outline: none;\n box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.5);\n }\n\n \/* Interactive Category Buttons *\/\n .cat-radio:checked + label {\n border-color: #f97316;\n background-color: rgba(249, 115, 22, 0.1);\n }\n .cat-radio:checked + label .cat-icon {\n color: #f97316;\n }\n\n \/* Service Card Gradients for constant readability *\/\n .service-gradient {\n background: linear-gradient(to top, #020617 0%, rgba(15, 23, 42, 0.9) 50%, transparent 100%);\n }\n\n #mobile-menu {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n #mobile-menu.open { max-height: 600px; }\n\n \/* SK\u00d6LD MOT ELEMENTOR: Tvinga bilderna i bento-galleriet att fylla ut helt *\/\n .bento-gallery-item {\n position: relative !important;\n display: block !important;\n overflow: hidden !important;\n background-color: #0f172a !important;\n }\n .bento-gallery-item img {\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n max-width: none !important; \n min-height: 100% !important;\n }\n <\/style>\n<\/head>\n<body class=\"antialiased\">\n\n<div id=\"afk-wrapper\">\n\n <header id=\"navbar\" class=\"fixed w-full top-0 z-50 bg-slate-900\/90 backdrop-blur-lg border-b border-white\/10 transition-all duration-300\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"flex justify-between items-center h-20\">\n <a href=\"\/\" class=\"flex items-center gap-3 group no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 rounded-lg p-1\" aria-label=\"Till startsidan\">\n <div class=\"relative w-10 h-10 flex items-center justify-center bg-gradient-to-br from-slate-700 to-slate-800 rounded-xl border border-white\/10 group-hover:border-brand-500\/50 transition-all shadow-lg shrink-0\">\n <i data-lucide=\"cpu\" class=\"text-brand-500 w-5 h-5 group-hover:scale-110 transition-transform\" aria-hidden=\"true\"><\/i>\n <\/div>\n <div class=\"flex flex-col\">\n <span class=\"font-black text-lg text-white tracking-tight leading-none\">AFK TEKNIK<\/span>\n <span class=\"text-[10px] font-bold tracking-[0.2em] text-brand-500 uppercase mt-0.5\">Vi kan teknik<\/span>\n <\/div>\n <\/a>\n \n <nav class=\"hidden xl:flex items-center gap-8\" aria-label=\"Huvudmeny\">\n <div class=\"flex gap-6 text-sm font-bold text-slate-300\">\n <a href=\"#tjanster\" class=\"hover:text-white hover:text-brand-400 transition-colors py-2 no-underline\">Tj\u00e4nster<\/a>\n <a href=\"#process\" class=\"hover:text-white hover:text-brand-400 transition-colors py-2 no-underline\">S\u00e5 funkar det<\/a>\n <a href=\"\/verktyg\" class=\"hover:text-white transition-colors py-2 no-underline\">Verktyg<\/a>\n <a href=\"\/shop\" class=\"hover:text-white transition-colors py-2 no-underline\">Webshop<\/a>\n <\/div>\n <a href=\"#boka\" class=\"bg-brand-600 hover:bg-brand-500 text-white px-6 py-2.5 rounded-lg font-bold text-sm transition-all shadow-lg hover:shadow-brand-500\/20 flex items-center gap-2 no-underline\">\n <span>Boka Tid<\/span>\n <i data-lucide=\"arrow-right\" class=\"w-4 h-4\" aria-hidden=\"true\"><\/i>\n <\/a>\n <\/nav>\n\n <button id=\"mobile-menu-btn\" aria-expanded=\"false\" aria-controls=\"mobile-menu\" class=\"xl:hidden text-white p-2 hover:bg-white\/10 rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500\" aria-label=\"\u00d6ppna meny\">\n <i data-lucide=\"menu\" class=\"w-7 h-7\" aria-hidden=\"true\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n <div id=\"mobile-menu\" class=\"xl:hidden bg-slate-900\/95 backdrop-blur-xl border-t border-white\/10\">\n <div class=\"px-6 py-8 space-y-6 flex flex-col\">\n <nav class=\"space-y-4 text-lg font-bold text-slate-300\" aria-label=\"Mobilmeny\">\n <a href=\"#tjanster\" class=\"block hover:text-brand-400 transition-colors no-underline\">Tj\u00e4nster<\/a>\n <a href=\"#process\" class=\"block hover:text-brand-400 transition-colors no-underline\">S\u00e5 funkar det<\/a>\n <a href=\"\/verktyg\" class=\"block hover:text-brand-400 transition-colors no-underline\">Verktyg<\/a>\n <a href=\"\/shop\" class=\"block hover:text-brand-400 transition-colors no-underline\">Webshop<\/a>\n <\/nav>\n <a href=\"#boka\" class=\"bg-brand-600 hover:bg-brand-500 text-white py-4 rounded-xl font-bold text-center shadow-lg mt-4 block no-underline transition-colors\">\n Boka Tid \/ Offert\n <\/a>\n <\/div>\n <\/div>\n <\/header>\n\n <main>\n <section aria-label=\"Startsektion\" class=\"relative w-full min-h-[90vh] flex items-center pt-32 pb-20 overflow-hidden border-b border-white\/5\">\n <div class=\"absolute inset-0 w-full h-full z-0 pointer-events-none\">\n <img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/afkteknik.se\/wp-content\/uploads\/2025\/06\/IMG20240527163835.jpg.webp\" alt=\"AFK Teknik verkstad inifr\u00e5n\" width=\"1920\" height=\"1080\" fetchpriority=\"high\" class=\"absolute top-0 right-0 w-full h-full object-cover opacity-20\">\n <div class=\"absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-900\/90 to-slate-900\/60\"><\/div>\n <div class=\"absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-slate-950\"><\/div>\n <\/div>\n\n <div class=\"absolute top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none\" aria-hidden=\"true\">\n <div class=\"absolute top-[-10%] left-[-10%] w-[40vw] h-[40vw] bg-brand-600\/10 rounded-full blur-[80px] opacity-30\"><\/div>\n <div class=\"absolute bottom-[-10%] right-[-10%] w-[40vw] h-[40vw] bg-purple-900\/10 rounded-full blur-[80px] opacity-30\"><\/div>\n <\/div>\n\n <div class=\"relative max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center z-10 w-full\">\n <div class=\"text-center lg:text-left animate-fade-in mt-10 lg:mt-0\">\n \n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full glass-panel text-brand-400 text-xs font-bold uppercase tracking-widest mb-6 shadow-sm border border-brand-500\/30\">\n <span class=\"w-2 h-2 rounded-full bg-brand-500 animate-pulse\" aria-hidden=\"true\"><\/span>\n Elektronikverkstad p\u00e5 \u00d6sterlen\n <\/div>\n \n <h1 class=\"text-5xl md:text-7xl font-extrabold text-white tracking-tight mb-6 leading-[1.1] drop-shadow-xl\">\n Vi lagar det <br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-400 to-brand-600\">andra sl\u00e4nger.<\/span>\n <\/h1>\n \n <p class=\"text-lg md:text-xl text-slate-300 max-w-xl mb-10 leading-relaxed font-light mx-auto lg:mx-0\">\n Bevara det gamla, skapa det nya. Med specialiserad utrustning lagar vi all sorts elektronik, kretskort och mekanik i Glemmingebro.\n <\/p>\n \n <div class=\"flex flex-col sm:flex-row gap-4 justify-center lg:justify-start\">\n <button onclick=\"document.getElementById('boka').scrollIntoView({behavior: 'smooth'})\" class=\"px-8 py-4 rounded-xl font-bold bg-brand-600 hover:bg-brand-500 text-white shadow-lg shadow-brand-500\/25 transition-all text-center flex items-center justify-center gap-2 text-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white\">\n Starta \u00c4rende <i data-lucide=\"wrench\" class=\"w-5 h-5\" aria-hidden=\"true\"><\/i>\n <\/button>\n <button onclick=\"document.getElementById('tjanster').scrollIntoView({behavior: 'smooth'})\" class=\"px-8 py-4 rounded-xl font-semibold text-white bg-slate-800 hover:bg-slate-700 border border-slate-600 transition-all text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white\">\n Se v\u00e5ra tj\u00e4nster\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"relative mt-12 lg:mt-0 animate-fade-in hidden lg:block\">\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[90%] h-[90%] bg-brand-500\/20 rounded-full blur-[60px] animate-pulse-slow\" aria-hidden=\"true\"><\/div>\n \n <div class=\"bg-slate-800\/80 backdrop-blur border border-white\/10 p-8 rounded-3xl relative border-l-4 border-l-green-500 shadow-2xl\">\n <div class=\"flex items-start gap-6\">\n <div class=\"w-14 h-14 rounded-2xl bg-green-500\/10 border border-green-500\/20 flex items-center justify-center text-green-500 shrink-0\">\n <i data-lucide=\"activity\" class=\"w-7 h-7\" aria-hidden=\"true\"><\/i>\n <\/div>\n <div class=\"w-full\">\n <h3 class=\"text-xl font-bold text-white mb-2\">Vad jobbar vi med nu?<\/h3>\n <div class=\"flex items-center gap-3 mb-4 bg-slate-900\/50 p-3 rounded-lg border border-white\/5 w-full\">\n <div class=\"relative flex h-3 w-3 shrink-0\" aria-hidden=\"true\">\n <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75\"><\/span>\n <span class=\"relative inline-flex rounded-full h-3 w-3 bg-green-500\"><\/span>\n <\/div>\n <div class=\"truncate flex-1 overflow-hidden\">\n <p id=\"jotitle\" class=\"text-sm font-bold text-slate-200 truncate\"><style>\n .afk-tech-widget {\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: 100%;\n }\n .afk-job-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: rgba(15, 23, 42, 0.4);\n border: 1px solid rgba(51, 65, 85, 0.5);\n border-radius: 6px;\n padding: 12px 16px;\n transition: all 0.2s ease;\n position: relative;\n overflow: hidden;\n }\n .afk-job-item:hover {\n background: rgba(30, 41, 59, 0.6);\n border-color: rgba(71, 85, 105, 0.8);\n transform: translateX(4px);\n }\n .afk-job-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n height: 2px;\n width: 0%;\n background: linear-gradient(90deg, #f97316, transparent);\n transition: width 0.3s ease;\n }\n .afk-job-item:hover::after {\n width: 100%;\n }\n .afk-job-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n .afk-job-device {\n color: #f8fafc;\n font-size: 0.95rem;\n font-weight: 600;\n letter-spacing: 0.02em;\n }\n .afk-job-category {\n color: #64748b;\n font-size: 0.75rem;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n .afk-job-meta {\n display: flex;\n align-items: center;\n }\n .afk-job-status-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 10px;\n border-radius: 20px;\n font-size: 0.7rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n @keyframes pulse-dot {\n 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }\n 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }\n 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }\n }\n .status-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n }\n .status-dot.active {\n background-color: #f59e0b;\n animation: pulse-dot 2s infinite;\n }\n .status-dot.waiting { background-color: #a855f7; }\n .status-dot.queue { background-color: #64748b; }\n \n .afk-more-jobs {\n text-align: center;\n margin-top: 8px;\n padding-top: 12px;\n border-top: 1px dashed rgba(51, 65, 85, 0.5);\n color: #94a3b8;\n font-size: 0.8rem;\n font-weight: 500;\n }\n <\/style><div class=\"afk-tech-widget\"><div class=\"afk-job-item\"><div class=\"afk-job-info\"><div class=\"afk-job-device\">Bally 8-ball -78 flipper och Seeburg -63 jukebox<\/div><\/div><div class=\"afk-job-meta\"><div class=\"afk-job-status-badge\" style=\"background: rgba(245, 158, 11, 0.1); color: #fbbf24;\"><span class=\"status-dot active\"><\/span>P\u00e5g\u00e5ende<\/div><\/div><\/div><div class=\"afk-job-item\"><div class=\"afk-job-info\"><div class=\"afk-job-device\">Ebl block<\/div><div class=\"afk-job-category\">Vitvaror<\/div><\/div><div class=\"afk-job-meta\"><div class=\"afk-job-status-badge\" style=\"background: rgba(245, 158, 11, 0.1); color: #fbbf24;\"><span class=\"status-dot active\"><\/span>P\u00e5g\u00e5ende<\/div><\/div><\/div><div class=\"afk-job-item\"><div class=\"afk-job-info\"><div class=\"afk-job-device\">Elcykel<\/div><\/div><div class=\"afk-job-meta\"><div class=\"afk-job-status-badge\" style=\"background: rgba(245, 158, 11, 0.1); color: #fbbf24;\"><span class=\"status-dot active\"><\/span>P\u00e5g\u00e5ende<\/div><\/div><\/div><div class=\"afk-job-item\"><div class=\"afk-job-info\"><div class=\"afk-job-device\">NSM Hit E120<\/div><div class=\"afk-job-category\">Jukeboxar<\/div><\/div><div class=\"afk-job-meta\"><div class=\"afk-job-status-badge\" style=\"background: rgba(100, 116, 139, 0.1); color: #94a3b8;\"><span class=\"status-dot queue\"><\/span>M\u00e5ste best\u00e4lla delar<\/div><\/div><\/div><div class=\"afk-more-jobs\">+ 29 andra \u00e4renden i systemet<\/div><\/div><\/p>\n <\/div>\n <\/div>\n <p class=\"text-sm text-slate-400 leading-relaxed\">\n Just nu \u00e4r det full fart. Vi tar emot bokade bes\u00f6k f\u00f6r att garantera h\u00f6gsta kvalitet p\u00e5 servicen.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"bg-slate-900 border-y border-white\/5 py-6\">\n <div class=\"max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-4 text-center divide-x divide-white\/5\">\n <div class=\"px-4\">\n <i data-lucide=\"shield-check\" class=\"w-6 h-6 text-brand-500 mx-auto mb-2\" aria-hidden=\"true\"><\/i>\n <p class=\"text-white font-bold text-sm\">3 M\u00e5naders Garanti<\/p>\n <p class=\"text-slate-400 text-xs hidden md:block mt-1\">P\u00e5 utf\u00f6rda reparationer<\/p>\n <\/div>\n <div class=\"px-4\">\n <i data-lucide=\"zap\" class=\"w-6 h-6 text-brand-500 mx-auto mb-2\" aria-hidden=\"true\"><\/i>\n <p class=\"text-white font-bold text-sm\">Vi l\u00f6ser det om\u00f6jliga<\/p>\n <p class=\"text-slate-400 text-xs hidden md:block mt-1\">3D-print & egentillverkning<\/p>\n <\/div>\n <div class=\"px-4\">\n <i data-lucide=\"truck\" class=\"w-6 h-6 text-brand-500 mx-auto mb-2\" aria-hidden=\"true\"><\/i>\n <p class=\"text-white font-bold text-sm\">Hela Sverige<\/p>\n <p class=\"text-slate-400 text-xs hidden md:block mt-1\">Skicka till oss eller bes\u00f6k oss<\/p>\n <\/div>\n <div class=\"px-4\">\n <i data-lucide=\"users\" class=\"w-6 h-6 text-brand-500 mx-auto mb-2\" aria-hidden=\"true\"><\/i>\n <p class=\"text-white font-bold text-sm\">F\u00f6retag & Privat<\/p>\n <p class=\"text-slate-400 text-xs hidden md:block mt-1\">Faktura, Swish eller Klarna<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <section id=\"tjanster\" aria-label=\"Tj\u00e4nster\" class=\"py-24 bg-slate-950 relative\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"text-center mb-16\">\n <span class=\"text-brand-500 font-bold tracking-[0.2em] text-[10px] uppercase mb-3 block\">Expertis<\/span>\n <h2 class=\"text-4xl md:text-5xl font-black text-white mb-6\">Vad beh\u00f6ver du hj\u00e4lp med?<\/h2>\n <p class=\"text-slate-400 max-w-2xl mx-auto text-lg\">V\u00e4lj ett omr\u00e5de nedan f\u00f6r att l\u00e4sa mer om hur vi kan hj\u00e4lpa dig och boka tid.<\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n <a href=\"reparation-service-elektronik-kretskort-mekanik\" aria-label=\"L\u00e4s mer om reparation av Mobil och Dator\" class=\"group relative h-[380px] rounded-2xl overflow-hidden bg-slate-900 border border-white\/10 hover:border-brand-500 transition-all duration-300 text-left block w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 shadow-xl hover:-translate-y-1\">\n <img decoding=\"async\" src=\"https:\/\/afkteknik.se\/wp-content\/uploads\/2025\/08\/497930460_9640100649376390_1428255737627176296_n.jpg\" class=\"absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80\" loading=\"lazy\" alt=\"Mobil och Dator reparation\">\n <div class=\"absolute inset-0 service-gradient\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8\">\n <div class=\"w-12 h-12 rounded-xl bg-slate-800\/80 backdrop-blur border border-white\/10 flex items-center justify-center mb-4 text-brand-500\">\n <i data-lucide=\"laptop\" class=\"w-6 h-6\" aria-hidden=\"true\"><\/i>\n <\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">Mobil & Dator<\/h3>\n <p class=\"text-slate-300 text-sm leading-relaxed mb-6\">Sk\u00e4rmbyte, batteribyte, avancerad l\u00f6dning och datar\u00e4ddning f\u00f6r b\u00e5de Mac och PC.<\/p>\n <span class=\"inline-flex items-center gap-2 text-brand-400 font-bold text-sm bg-brand-500\/10 px-4 py-2 rounded-lg group-hover:bg-brand-500\/20 transition-colors\">\n L\u00e4s mer & boka <i data-lucide=\"arrow-right\" class=\"w-4 h-4 transition-transform group-hover:translate-x-1\" aria-hidden=\"true\"><\/i>\n <\/span>\n <\/div>\n <\/a>\n\n <a href=\"reparation-service-elektronik-kretskort-mekanik\" aria-label=\"L\u00e4s mer om reparation av Vitvaror och Husbil\" class=\"group relative h-[380px] rounded-2xl overflow-hidden bg-slate-900 border border-white\/10 hover:border-emerald-500 transition-all duration-300 text-left block w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 shadow-xl hover:-translate-y-1\">\n <img decoding=\"async\" src=\"https:\/\/afkteknik.se\/wp-content\/uploads\/2025\/11\/509429464_1221747829650411_183310352478301751_n.jpg\" class=\"absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80\" loading=\"lazy\" alt=\"Vitvaror & Husbil\">\n <div class=\"absolute inset-0 service-gradient\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8\">\n <div class=\"w-12 h-12 rounded-xl bg-slate-800\/80 backdrop-blur border border-white\/10 flex items-center justify-center mb-4 text-emerald-500\">\n <i data-lucide=\"zap\" class=\"w-6 h-6\" aria-hidden=\"true\"><\/i>\n <\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">Vitvaror & Husbil<\/h3>\n <p class=\"text-slate-300 text-sm leading-relaxed mb-6\">Avancerad kretskortsreparation f\u00f6r vitvaror, EBL-block och styrboxar. Sl\u00e4ng inte maskinen i on\u00f6dan.<\/p>\n <span class=\"inline-flex items-center gap-2 text-emerald-400 font-bold text-sm bg-emerald-500\/10 px-4 py-2 rounded-lg group-hover:bg-emerald-500\/20 transition-colors\">\n L\u00e4s mer & boka <i data-lucide=\"arrow-right\" class=\"w-4 h-4 transition-transform group-hover:translate-x-1\" aria-hidden=\"true\"><\/i>\n <\/span>\n <\/div>\n <\/a>\n\n <a href=\"service-jukebox-hifi-vintage-arkad\" aria-label=\"L\u00e4s mer om reparation av Flipper och Vintage\" class=\"group relative h-[380px] rounded-2xl overflow-hidden bg-slate-900 border border-white\/10 hover:border-purple-500 transition-all duration-300 text-left block w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 shadow-xl hover:-translate-y-1\">\n <img decoding=\"async\" src=\"https:\/\/afkteknik.se\/wp-content\/uploads\/2025\/12\/IMG20221118175126.jpg\" class=\"absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80\" loading=\"lazy\" alt=\"Flipper & Vintage\">\n <div class=\"absolute inset-0 service-gradient\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8\">\n <div class=\"w-12 h-12 rounded-xl bg-slate-800\/80 backdrop-blur border border-white\/10 flex items-center justify-center mb-4 text-purple-500\">\n <i data-lucide=\"music\" class=\"w-6 h-6\" aria-hidden=\"true\"><\/i>\n <\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">Flipper & Vintage<\/h3>\n <p class=\"text-slate-300 text-sm leading-relaxed mb-6\">Passionerad renovering av Jukeboxar, Flipperspel och klassisk HiFi. Vi ger elektroniken sj\u00e4len tillbaka.<\/p>\n <span class=\"inline-flex items-center gap-2 text-purple-400 font-bold text-sm bg-purple-500\/10 px-4 py-2 rounded-lg group-hover:bg-purple-500\/20 transition-colors\">\n L\u00e4s mer & boka <i data-lucide=\"arrow-right\" class=\"w-4 h-4 transition-transform group-hover:translate-x-1\" aria-hidden=\"true\"><\/i>\n <\/span>\n <\/div>\n <\/a>\n\n <a href=\"tillverkning\" aria-label=\"L\u00e4s mer om CNC och Special\" class=\"group relative h-[380px] rounded-2xl overflow-hidden bg-slate-900 border border-white\/10 hover:border-blue-500 transition-all duration-300 text-left block w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 shadow-xl hover:-translate-y-1\">\n <img decoding=\"async\" src=\"https:\/\/afkteknik.se\/wp-content\/uploads\/2025\/08\/476154851_1122955936196268_1012509513658618638_n.jpg\" class=\"absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80\" loading=\"lazy\" alt=\"CNC & Special\">\n <div class=\"absolute inset-0 service-gradient\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8\">\n <div class=\"w-12 h-12 rounded-xl bg-slate-800\/80 backdrop-blur border border-white\/10 flex items-center justify-center mb-4 text-blue-500\">\n <i data-lucide=\"box\" class=\"w-6 h-6\" aria-hidden=\"true\"><\/i>\n <\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">CNC & Special<\/h3>\n <p class=\"text-slate-300 text-sm leading-relaxed mb-6\">Avancerad 3D-printing, CNC-fr\u00e4sning och prototyptillverkning. Fr\u00e5n skiss till fysisk produkt.<\/p>\n <span class=\"inline-flex items-center gap-2 text-blue-400 font-bold text-sm bg-blue-500\/10 px-4 py-2 rounded-lg group-hover:bg-blue-500\/20 transition-colors\">\n L\u00e4s mer & boka <i data-lucide=\"arrow-right\" class=\"w-4 h-4 transition-transform group-hover:translate-x-1\" aria-hidden=\"true\"><\/i>\n <\/span>\n <\/div>\n <\/a>\n\n <a href=\"service-industri-lantbruk\" aria-label=\"L\u00e4s mer om reparation inom Industri\" class=\"group relative h-[380px] rounded-2xl overflow-hidden bg-slate-900 border border-white\/10 hover:border-orange-500 transition-all duration-300 text-left block w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-orange-500 shadow-xl hover:-translate-y-1\">\n <img decoding=\"async\" src=\"https:\/\/afkteknik.se\/wp-content\/uploads\/2025\/11\/518277201_1238653734626487_537623704230138136_n-scaled.jpg\" class=\"absolute center-bottom inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80\" loading=\"lazy\" alt=\"Industri\">\n <div class=\"absolute inset-0 service-gradient\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8\">\n <div class=\"w-12 h-12 rounded-xl bg-slate-800\/80 backdrop-blur border border-white\/10 flex items-center justify-center mb-4 text-orange-500\">\n <i data-lucide=\"factory\" class=\"w-6 h-6\" aria-hidden=\"true\"><\/i>\n <\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">Industri<\/h3>\n <p class=\"text-slate-300 text-sm leading-relaxed mb-6\">Akut fels\u00f6kning och reparation av industriella styrsystem. Snabbt agerande vid driftstopp.<\/p>\n <span class=\"inline-flex items-center gap-2 text-orange-400 font-bold text-sm bg-orange-500\/10 px-4 py-2 rounded-lg group-hover:bg-orange-500\/20 transition-colors\">\n L\u00e4s mer & boka <i data-lucide=\"arrow-right\" class=\"w-4 h-4 transition-transform group-hover:translate-x-1\" aria-hidden=\"true\"><\/i>\n <\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/shop\" aria-label=\"Bes\u00f6k webshopen\" class=\"group relative h-[380px] rounded-2xl overflow-hidden bg-slate-800 border-2 border-dashed border-slate-700 hover:border-white\/20 transition-all duration-300 flex flex-col items-center justify-center text-center shadow-xl hover:-translate-y-1 no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white\">\n <div class=\"absolute inset-0 bg-[url('https:\/\/afkteknik.se\/wp-content\/uploads\/2025\/08\/Untitled-design-819x1024.png.webp')] bg-cover bg-top opacity-10 group-hover:opacity-20 transition-opacity grayscale\" loading=\"lazy\" aria-hidden=\"true\"><\/div>\n <div class=\"relative z-10 w-16 h-16 rounded-full bg-slate-900 border border-slate-700 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\">\n <i data-lucide=\"shopping-bag\" class=\"w-6 h-6 text-white\" aria-hidden=\"true\"><\/i>\n <\/div>\n <h3 class=\"relative z-10 text-2xl font-bold text-white mb-2\">Webshop<\/h3>\n <p class=\"relative z-10 text-slate-400 text-sm mb-0\">Verktyg, Merch & Reservdelar<\/p>\n <span class=\"relative z-10 mt-6 px-6 py-2 rounded-full bg-white text-slate-900 font-bold text-xs uppercase tracking-widest group-hover:bg-brand-500 group-hover:text-white transition-colors\">\n Bes\u00f6k butik\n <\/span>\n <\/a>\n\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"process\" aria-label=\"Serviceguide\" class=\"py-10 bg-slate-900 border-y border-white\/5\">\n <div class=\"max-w-5xl mx-auto px-6\">\n <div class=\"text-center mb-16\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-white\">S\u00e5 enkelt \u00e4r det. <span class=\"text-slate-500 font-light\">Inga konstigheter.<\/span><\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8 relative\">\n <div class=\"hidden md:block absolute top-6 left-12 right-12 h-0.5 bg-slate-800 z-0\" aria-hidden=\"true\"><\/div>\n\n <div class=\"relative z-10 text-center\">\n <div class=\"w-12 h-12 mx-auto rounded-full bg-brand-500 flex items-center justify-center text-white font-bold text-xl border-4 border-slate-900 mb-4 shadow-lg shadow-brand-500\/20\">1<\/div>\n <h3 class=\"text-white font-bold mb-2\">Kontakta oss<\/h3>\n <p class=\"text-slate-400 text-sm\">Skicka in ditt \u00e4rende h\u00e4r nedan. Du f\u00e5r direkt tillg\u00e5ng till kundportalen.<\/p>\n <\/div>\n <div class=\"relative z-10 text-center\">\n <div class=\"w-12 h-12 mx-auto rounded-full bg-slate-800 flex items-center justify-center text-slate-400 font-bold text-xl border-4 border-slate-900 mb-4\">2<\/div>\n <h3 class=\"text-white font-bold mb-2\">Planering<\/h3>\n <p class=\"text-slate-400 text-sm\">Vi bokar en tid i verkstan, eller s\u00e5 postar du enheten till oss.<\/p>\n <\/div>\n <div class=\"relative z-10 text-center\">\n <div class=\"w-12 h-12 mx-auto rounded-full bg-slate-800 flex items-center justify-center text-slate-400 font-bold text-xl border-4 border-slate-900 mb-4\">3<\/div>\n <h3 class=\"text-white font-bold mb-2\">Reparation<\/h3>\n <p class=\"text-slate-400 text-sm\">Noggrann fels\u00f6kning och reparation med garanti.<\/p>\n <\/div>\n <div class=\"relative z-10 text-center\">\n <div class=\"w-12 h-12 mx-auto rounded-full bg-slate-800 flex items-center justify-center text-slate-400 font-bold text-xl border-4 border-slate-900 mb-4\">4<\/div>\n <h3 class=\"text-white font-bold mb-2\">Leverans<\/h3>\n <p class=\"text-slate-400 text-sm\">Din teknik \u00e4r r\u00e4ddad! Smidig betalning via Swish\/Klarna\/Faktura.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section aria-label=\"Om oss och bildgalleri\" class=\"py-24 relative overflow-hidden bg-slate-950\">\n <div class=\"absolute inset-0 bg-grid-pattern opacity-50\" aria-hidden=\"true\"><\/div>\n <div class=\"absolute top-1\/4 right-0 w-[500px] h-[500px] bg-brand-500\/10 rounded-full blur-[100px] pointer-events-none\" aria-hidden=\"true\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-[600px] h-[600px] bg-blue-900\/10 rounded-full blur-[120px] pointer-events-none\" aria-hidden=\"true\"><\/div>\n\n <div class=\"max-w-7xl mx-auto px-6 relative z-10\">\n <div class=\"grid lg:grid-cols-2 gap-16 lg:gap-20 items-center\">\n \n <div class=\"space-y-8\">\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full glass-panel border border-brand-500\/30 text-brand-400 text-xs font-bold uppercase tracking-widest shadow-lg\">\n <i data-lucide=\"cpu\" class=\"w-4 h-4\" aria-hidden=\"true\"><\/i> Engineering & Reparation\n <\/div>\n \n <h2 class=\"text-4xl md:text-5xl lg:text-6xl font-black text-white leading-[1.1] tracking-tight\">\n Har det el eller kugghjul? <br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-400 to-brand-600\">D\u00e5 l\u00f6ser vi det.<\/span>\n <\/h2>\n \n <p class=\"text-lg text-slate-300 leading-relaxed font-light\">\n Mycket har h\u00e4nt inom teknikens v\u00e4rld, men ofta anv\u00e4nds samma grundkomponenter idag som f\u00f6r 20 \u00e5r sedan. Oavsett om det \u00e4r ett 30 \u00e5r gammalt flipperspel eller en modern styrbox till en bil, f\u00f6rst\u00e5r vi hur det fungerar under skalet.\n <\/p>\n\n <div class=\"grid sm:grid-cols-2 gap-6 pt-2\">\n <div class=\"flex gap-4\">\n <div class=\"w-10 h-10 rounded-lg bg-slate-800\/80 border border-slate-700 flex items-center justify-center text-brand-500 shrink-0\">\n <i data-lucide=\"microchip\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <div>\n <h4 class=\"text-white font-bold text-sm mb-1\">Kretskort p\u00e5 komponentniv\u00e5<\/h4>\n <p class=\"text-slate-400 text-xs leading-relaxed\">Vi hittar och byter den trasiga komponenten ist\u00e4llet f\u00f6r hela kortet.<\/p>\n <\/div>\n <\/div>\n <div class=\"flex gap-4\">\n <div class=\"w-10 h-10 rounded-lg bg-slate-800\/80 border border-slate-700 flex items-center justify-center text-blue-500 shrink-0\">\n <i data-lucide=\"settings\" class=\"w-5 h-5 animate-spin-slow\"><\/i>\n <\/div>\n <div>\n <h4 class=\"text-white font-bold text-sm mb-1\">Finns inte reservdelen?<\/h4>\n <p class=\"text-slate-400 text-xs leading-relaxed\">D\u00e5 ritar vi upp den i CAD och 3D-printar eller fr\u00e4ser fram den sj\u00e4lva.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mt-8 glass-panel border border-white\/10 rounded-2xl p-6 relative overflow-hidden group\">\n <div class=\"absolute top-0 left-0 w-1 h-full bg-brand-500\"><\/div>\n <div class=\"flex items-center gap-5\">\n <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=Anton+Svensson&background=f97316&color=fff\" class=\"w-16 h-16 rounded-full border-2 border-slate-800 shadow-xl group-hover:scale-105 transition-transform\" alt=\"Anton Svensson\" loading=\"lazy\">\n <div>\n <div class=\"text-white font-black text-lg\">Anton Svensson<\/div>\n <div class=\"flex items-center gap-2 text-sm text-slate-400 font-medium\">\n <span>Grundare & Tekniker<\/span>\n <span class=\"w-1 h-1 rounded-full bg-slate-600\"><\/span>\n <span class=\"text-brand-500\">AFK Teknik<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"relative grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 auto-rows-[160px] sm:auto-rows-[180px] md:auto-rows-[220px]\" aria-label=\"Bildgalleri fr\u00e5n verkstaden\">\n \n <div class=\"absolute z-20 top-4 -left-2 md:top-6 md:-left-6 glass-panel border border-white\/10 px-4 md:px-6 py-2 md:py-3 rounded-2xl shadow-2xl flex items-center gap-2 md:gap-3 animate-fade-in\">\n <div class=\"w-2 h-2 md:w-3 md:h-3 rounded-full bg-green-500 animate-pulse\"><\/div>\n <span class=\"text-white font-bold text-xs md:text-sm tracking-wide\">Egen verkstad i Glemmingebro<\/span>\n <\/div>\n\n <div class=\"col-span-2 row-span-2 rounded-2xl md:rounded-3xl border border-white\/10 shadow-2xl bento-gallery-item group\">\n <img decoding=\"async\" src=\"https:\/\/afkteknik.se\/wp-content\/uploads\/2026\/01\/485908963_1156532949505233_785671189539843437_n.jpg\" class=\"transition-transform duration-700 group-hover:scale-105\" loading=\"lazy\" alt=\"Detaljarbete med l\u00f6dning av kretskort\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-slate-950\/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none z-10\"><\/div>\n <\/div>\n\n <div class=\"col-span-1 row-span-1 rounded-2xl md:rounded-3xl border border-white\/10 shadow-lg bento-gallery-item group\">\n <img decoding=\"async\" src=\"https:\/\/afkteknik.se\/wp-content\/uploads\/2026\/01\/582635675_1344132870745239_7210651536435179044_n.jpg\" class=\"transition-transform duration-700 group-hover:scale-110\" loading=\"lazy\" alt=\"Mekanik inuti en klassisk Jukebox\">\n <\/div>\n\n <div class=\"col-span-1 row-span-1 rounded-2xl md:rounded-3xl border border-white\/10 shadow-lg bento-gallery-item group\">\n <img decoding=\"async\" src=\"https:\/\/afkteknik.se\/wp-content\/uploads\/2025\/02\/476119920_1121432073015321_2483519634843812397_n.jpg\" class=\"transition-transform duration-700 group-hover:scale-110\" loading=\"lazy\" alt=\"Renovering av \u00e4ldre r\u00f6rf\u00f6rst\u00e4rkare\">\n <\/div>\n\n <div class=\"col-span-1 row-span-1 rounded-2xl md:rounded-3xl border border-white\/10 shadow-lg bento-gallery-item group\">\n <img decoding=\"async\" src=\"https:\/\/afkteknik.se\/wp-content\/uploads\/2025\/06\/IMG20240527163835.jpg\" class=\"transition-transform duration-700 group-hover:scale-110\" loading=\"lazy\" alt=\"Detaljerad mekanik f\u00f6r Flipperspel\">\n <\/div>\n\n <div class=\"col-span-1 row-span-1 rounded-2xl md:rounded-3xl border border-white\/10 shadow-lg bento-gallery-item group\">\n <img decoding=\"async\" src=\"https:\/\/afkteknik.se\/wp-content\/uploads\/2025\/08\/497930460_9640100649376390_1428255737627176296_n.jpg\" class=\"transition-transform duration-700 group-hover:scale-110\" loading=\"lazy\" alt=\"Reparation av laptop kretskort\">\n <\/div>\n\n <div class=\"col-span-2 md:col-span-1 row-span-1 rounded-2xl md:rounded-3xl border border-white\/10 shadow-lg bento-gallery-item group\">\n <img decoding=\"async\" src=\"https:\/\/afkteknik.se\/wp-content\/uploads\/2025\/08\/524386926_1249386583553202_6788562252625590862_n.jpg\" class=\"transition-transform duration-700 group-hover:scale-110\" loading=\"lazy\" alt=\"Kretskort tillh\u00f6rande ett Flipperspel\">\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"boka\" aria-label=\"Bokning och kontakt\" class=\"py-24 relative bg-slate-900 border-t border-brand-500\/20\">\n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-[600px] h-32 bg-brand-500\/10 blur-[60px] pointer-events-none\" aria-hidden=\"true\"><\/div>\n\n <div class=\"max-w-7xl mx-auto px-6 relative z-10\">\n <div class=\"grid lg:grid-cols-2 gap-16 lg:gap-24 items-start\">\n \n <div class=\"text-left\">\n <h2 class=\"text-4xl md:text-5xl font-extrabold text-white mb-6 tracking-tight\">Boka tid eller <br> kontakta oss<\/h2>\n <p class=\"text-slate-300 text-lg mb-12 leading-relaxed font-light max-w-md\">\n Kontakta oss och beskriv s\u00e5 noggrant som m\u00f6jligt ert \u00e4rende s\u00e5 svarar vi s\u00e5 snart som m\u00f6jligt. <br>\n Just nu har vi mycket att g\u00f6ra, men vi brukar svara inom 24h!\n <\/p>\n\n <div class=\"grid sm:grid-cols-2 gap-4 mb-12\">\n <a href=\"tel:0725223022\" aria-label=\"Ring AFK Teknik p\u00e5 0725223022\" class=\"bg-slate-800 border border-white\/5 p-6 rounded-2xl hover:border-brand-500\/50 transition-colors group block no-underline shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500\">\n <i data-lucide=\"phone\" class=\"w-6 h-6 text-brand-500 mb-4 group-hover:scale-110 transition-transform\" aria-hidden=\"true\"><\/i>\n <div class=\"text-[10px] text-slate-400 font-bold uppercase mb-1 tracking-widest\">RING OSS<\/div>\n <div class=\"text-white text-xl font-bold\">072-522 30 22<\/div>\n <\/a>\n <a href=\"mailto:info@afkteknik.se\" aria-label=\"Maila oss p\u00e5 info@afkteknik.se\" class=\"bg-slate-800 border border-white\/5 p-6 rounded-2xl hover:border-brand-500\/50 transition-colors group block no-underline shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500\">\n <i data-lucide=\"mail\" class=\"w-6 h-6 text-brand-500 mb-4 group-hover:scale-110 transition-transform\" aria-hidden=\"true\"><\/i>\n <div class=\"text-[10px] text-slate-400 font-bold uppercase mb-1 tracking-widest\">MAILA OSS<\/div>\n <div class=\"text-white text-lg font-bold break-all\">info@afkteknik.se<\/div>\n <\/a>\n <\/div>\n\n <h3 class=\"text-white font-bold text-xl mb-6\">S\u00e5 h\u00e4r g\u00e5r det till:<\/h3>\n <ol class=\"space-y-8 relative border-l border-white\/10 ml-2 list-none m-0 p-0\">\n <li class=\"pl-8 relative\">\n <span class=\"absolute -left-[5px] top-2 w-2.5 h-2.5 rounded-full bg-brand-500 shadow-[0_0_10px_rgba(249,115,22,0.6)]\" aria-hidden=\"true\"><\/span>\n <h4 class=\"text-white font-bold text-lg\">1. Skicka f\u00f6rfr\u00e5gan<\/h4>\n <p class=\"text-slate-300 text-sm mt-1 leading-relaxed\">Anv\u00e4nd formul\u00e4ret till h\u00f6ger eller ring oss.<br>\n Beskriv ditt \u00e4rende s\u00e5 noggrant som m\u00f6jligt, ju mer vi har att g\u00e5 p\u00e5 desto b\u00e4ttre!<br><br>\n <em><strong>N\u00e4r du l\u00e4mnar in din f\u00f6rfr\u00e5gan f\u00e5r du direkt tillg\u00e5ng till v\u00e5r kundportal d\u00e4r du kan f\u00f6lja ditt \u00e4rende i realtid!<\/strong><\/em><\/p>\n <\/li>\n <li class=\"pl-8 relative\">\n <span class=\"absolute -left-[5px] top-2 w-2.5 h-2.5 rounded-full bg-slate-700\" aria-hidden=\"true\"><\/span>\n <h4 class=\"text-white font-bold text-lg\">2. Vi bokar en tid<\/h4>\n <p class=\"text-slate-300 text-sm mt-1 leading-relaxed\">Du f\u00e5r en tid f\u00f6r inl\u00e4mning i Glemmingebro eller instruktioner f\u00f6r att skicka med post.<\/p>\n <\/li>\n <li class=\"pl-8 relative\">\n <span class=\"absolute -left-[5px] top-2 w-2.5 h-2.5 rounded-full bg-slate-700\" aria-hidden=\"true\"><\/span>\n <h4 class=\"text-white font-bold text-lg\">3. Reparation & Betalning<\/h4>\n <p class=\"text-slate-300 text-sm mt-1 leading-relaxed\">Vi lagar enheten. Du betalar smidigt med Klarna, Swish, faktura eller kort vid h\u00e4mtning.<\/p>\n <\/li>\n <\/ol>\n <\/div>\n\n <div class=\"relative mt-8 lg:mt-0\">\n <div class=\"glass-panel rounded-3xl p-6 md:p-10 shadow-2xl relative z-10\">\n <form id=\"afk-form-home\" class=\"space-y-8\" enctype=\"multipart\/form-data\" novalidate>\n \n <div class=\"space-y-3\">\n <label class=\"text-xs font-bold text-slate-400 uppercase tracking-widest\">1. Vad g\u00e4ller det?<\/label>\n \n <select id=\"input-kategori\" name=\"kategori\" class=\"hidden\" aria-hidden=\"true\">\n <option value=\"Mobil_Dator\">Mobil\/Dator<\/option>\n <option value=\"Kretskort\">Kretskort<\/option>\n <option value=\"Vintage\">Vintage<\/option>\n <option value=\"CNC\">CNC<\/option>\n <option value=\"Industri\">Industri<\/option>\n <option value=\"Ovrigt\" selected>\u00d6vrigt<\/option>\n <\/select>\n\n <div class=\"grid grid-cols-2 md:grid-cols-3 gap-3\">\n <div>\n <input type=\"radio\" name=\"cat_selector\" id=\"cat_mobil\" value=\"Mobil_Dator\" class=\"cat-radio hidden\" onchange=\"syncCategory(this.value)\">\n <label for=\"cat_mobil\" class=\"flex flex-col items-center justify-center p-4 rounded-xl border border-slate-700 bg-slate-800\/50 cursor-pointer hover:border-brand-500\/50 transition-colors h-full\">\n <i data-lucide=\"laptop\" class=\"w-6 h-6 text-slate-400 cat-icon mb-2 transition-colors\" aria-hidden=\"true\"><\/i>\n <span class=\"text-white text-xs font-semibold text-center mt-1\">Mobil\/Dator<\/span>\n <\/label>\n <\/div>\n <div>\n <input type=\"radio\" name=\"cat_selector\" id=\"cat_krets\" value=\"Kretskort\" class=\"cat-radio hidden\" onchange=\"syncCategory(this.value)\">\n <label for=\"cat_krets\" class=\"flex flex-col items-center justify-center p-4 rounded-xl border border-slate-700 bg-slate-800\/50 cursor-pointer hover:border-brand-500\/50 transition-colors h-full\">\n <i data-lucide=\"zap\" class=\"w-6 h-6 text-slate-400 cat-icon mb-2 transition-colors\" aria-hidden=\"true\"><\/i>\n <span class=\"text-white text-xs font-semibold text-center mt-1\">Vitvaror\/Krets<\/span>\n <\/label>\n <\/div>\n <div>\n <input type=\"radio\" name=\"cat_selector\" id=\"cat_vintage\" value=\"Vintage\" class=\"cat-radio hidden\" onchange=\"syncCategory(this.value)\">\n <label for=\"cat_vintage\" class=\"flex flex-col items-center justify-center p-4 rounded-xl border border-slate-700 bg-slate-800\/50 cursor-pointer hover:border-brand-500\/50 transition-colors h-full\">\n <i data-lucide=\"music\" class=\"w-6 h-6 text-slate-400 cat-icon mb-2 transition-colors\" aria-hidden=\"true\"><\/i>\n <span class=\"text-white text-xs font-semibold text-center mt-1\">Vintage\/Flipper<\/span>\n <\/label>\n <\/div>\n <div>\n <input type=\"radio\" name=\"cat_selector\" id=\"cat_cnc\" value=\"CNC\" class=\"cat-radio hidden\" onchange=\"syncCategory(this.value)\">\n <label for=\"cat_cnc\" class=\"flex flex-col items-center justify-center p-4 rounded-xl border border-slate-700 bg-slate-800\/50 cursor-pointer hover:border-brand-500\/50 transition-colors h-full\">\n <i data-lucide=\"box\" class=\"w-6 h-6 text-slate-400 cat-icon mb-2 transition-colors\" aria-hidden=\"true\"><\/i>\n <span class=\"text-white text-xs font-semibold text-center mt-1\">CNC\/Prototyp<\/span>\n <\/label>\n <\/div>\n <div>\n <input type=\"radio\" name=\"cat_selector\" id=\"cat_industri\" value=\"Industri\" class=\"cat-radio hidden\" onchange=\"syncCategory(this.value)\">\n <label for=\"cat_industri\" class=\"flex flex-col items-center justify-center p-4 rounded-xl border border-slate-700 bg-slate-800\/50 cursor-pointer hover:border-brand-500\/50 transition-colors h-full\">\n <i data-lucide=\"factory\" class=\"w-6 h-6 text-slate-400 cat-icon mb-2 transition-colors\" aria-hidden=\"true\"><\/i>\n <span class=\"text-white text-xs font-semibold text-center mt-1\">Industri<\/span>\n <\/label>\n <\/div>\n <div>\n <input type=\"radio\" name=\"cat_selector\" id=\"cat_ovrigt\" value=\"Ovrigt\" class=\"cat-radio hidden\" onchange=\"syncCategory(this.value)\" checked>\n <label for=\"cat_ovrigt\" class=\"flex flex-col items-center justify-center p-4 rounded-xl border border-slate-700 bg-slate-800\/50 cursor-pointer hover:border-brand-500\/50 transition-colors h-full\">\n <i data-lucide=\"help-circle\" class=\"w-6 h-6 text-slate-400 cat-icon mb-2 transition-colors\" aria-hidden=\"true\"><\/i>\n <span class=\"text-white text-xs font-semibold text-center mt-1\">Annat<\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n\n <hr class=\"border-white\/10\" aria-hidden=\"true\">\n\n <div class=\"space-y-3\">\n <label class=\"text-xs font-bold text-slate-400 uppercase tracking-widest\">2. Dina uppgifter<\/label>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <input type=\"text\" id=\"input-namn\" name=\"namn\" required autocomplete=\"name\" class=\"form-input w-full rounded-xl px-4 py-4\" placeholder=\"F\u00f6r- och efternamn\">\n <input type=\"tel\" id=\"input-telefon\" name=\"telefon\" required autocomplete=\"tel\" class=\"form-input w-full rounded-xl px-4 py-4\" placeholder=\"Telefonnummer\">\n <input type=\"email\" id=\"input-email\" name=\"email\" required autocomplete=\"email\" class=\"form-input w-full rounded-xl px-4 py-4 md:col-span-2\" placeholder=\"Din e-postadress\">\n <\/div>\n <\/div>\n\n <div class=\"space-y-3\">\n <label class=\"text-xs font-bold text-slate-400 uppercase tracking-widest\" for=\"input-meddelande\">3. Beskriv problemet<\/label>\n <textarea id=\"input-meddelande\" name=\"meddelande\" required class=\"form-input w-full rounded-xl px-4 py-4 h-40 resize-none leading-relaxed\" placeholder=\"Ex: Min diskmaskin (Bosch) piper 3 g\u00e5nger och startar inte. E-nummer: 123456...\"><\/textarea>\n <\/div>\n\n <div class=\"space-y-3\">\n <label class=\"text-xs font-bold text-slate-400 uppercase tracking-widest\">4. Bifoga bilder\/video (Frivilligt)<\/label>\n <div class=\"relative w-full\">\n <input type=\"file\" id=\"input-filer\" name=\"filer[]\" multiple accept=\"image\/*,video\/*,.pdf,.doc,.docx\" class=\"hidden\" onchange=\"updateFileList()\">\n <label for=\"input-filer\" class=\"form-input flex flex-col items-center justify-center w-full h-28 rounded-xl border-2 border-dashed border-slate-600 cursor-pointer hover:border-brand-500 hover:bg-slate-800\/50 transition-all text-center px-4 group\">\n <i data-lucide=\"upload-cloud\" class=\"w-7 h-7 text-brand-500 mb-2 group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-sm text-slate-200 font-bold mb-1\">Klicka f\u00f6r att fota \/ ladda upp<\/span>\n <span class=\"text-xs text-slate-500\">Bilder, korta videos eller dokument<\/span>\n <\/label>\n <\/div>\n <div id=\"file-list\" class=\"flex flex-wrap gap-2 empty:hidden\"><\/div>\n <\/div>\n\n <button type=\"submit\" id=\"btn-submit-home\" class=\"w-full py-5 bg-brand-600 hover:bg-brand-500 text-white rounded-xl font-bold shadow-lg transition-all flex items-center justify-center gap-2 hover:-translate-y-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900\">\n <span>Skicka till verkstan<\/span> \n <i data-lucide=\"send\" class=\"w-5 h-5\" aria-hidden=\"true\"><\/i>\n <\/button>\n \n <div id=\"afk-form-message\" class=\"mt-6 hidden\"><\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"sitetree\" aria-label=\"Webbplatskarta\" class=\"py-16 bg-slate-950 border-t border-white\/5 relative overflow-hidden\">\n <div class=\"max-w-7xl mx-auto px-6 relative z-10\">\n <div class=\"flex items-center gap-3 mb-10 border-b border-white\/5 pb-6\">\n <div class=\"w-10 h-10 rounded-lg bg-slate-900 border border-white\/10 flex items-center justify-center text-brand-500\">\n <i data-lucide=\"network\" class=\"w-5 h-5\" aria-hidden=\"true\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-bold text-white\">Sitetree \/ Webbplatskarta<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-12\">\n \n <div>\n <a href=\"\/tjanster\" class=\"inline-flex items-center gap-2 text-lg font-bold text-white hover:text-brand-400 transition-colors mb-4 no-underline\">\n <i data-lucide=\"folder-open\" class=\"w-5 h-5 text-brand-500\" aria-hidden=\"true\"><\/i> Tj\u00e4nster\n <\/a>\n <ul class=\"space-y-3 border-l-2 border-slate-800 ml-[9px] pl-5 m-0 list-none\">\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"\/tjanster\/mobil-dator\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">Mobil & Dator<\/a>\n <\/li>\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"\/tjanster\/vitvaror-husbil\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">Vitvaror & Husbil<\/a>\n <\/li>\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"\/tjanster\/flipper-vintage\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">Flipper & Vintage<\/a>\n <\/li>\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"\/tjanster\/cnc-special\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">CNC & Special<\/a>\n <\/li>\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"\/tjanster\/industri\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">Industri<\/a>\n <\/li>\n <\/ul>\n <\/div>\n\n <div>\n <div class=\"mb-8\">\n <a href=\"\/shop\" class=\"inline-flex items-center gap-2 text-lg font-bold text-white hover:text-brand-400 transition-colors mb-4 no-underline\">\n <i data-lucide=\"shopping-bag\" class=\"w-5 h-5 text-brand-500\" aria-hidden=\"true\"><\/i> Webshop\n <\/a>\n <ul class=\"space-y-3 border-l-2 border-slate-800 ml-[9px] pl-5 m-0 list-none\">\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"\/shop\/reservdelar\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">Reservdelar<\/a>\n <\/li>\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"\/shop\/merch\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">Merch<\/a>\n <\/li>\n <\/ul>\n <\/div>\n <div>\n <a href=\"\/verktyg\" class=\"inline-flex items-center gap-2 text-lg font-bold text-white hover:text-brand-400 transition-colors no-underline\">\n <i data-lucide=\"pen-tool\" class=\"w-5 h-5 text-brand-500\" aria-hidden=\"true\"><\/i> Verktyg\n <\/a>\n <\/div>\n <\/div>\n\n <div>\n <span class=\"inline-flex items-center gap-2 text-lg font-bold text-white mb-4\">\n <i data-lucide=\"info\" class=\"w-5 h-5 text-brand-500\" aria-hidden=\"true\"><\/i> Information\n <\/span>\n <ul class=\"space-y-3 border-l-2 border-slate-800 ml-[9px] pl-5 m-0 list-none\">\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"\/om-oss\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">Om AFK Teknik<\/a>\n <\/li>\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"#process\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">S\u00e5 fungerar det<\/a>\n <\/li>\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"\/allmanna-villkor\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">Villkor & Garanti<\/a>\n <\/li>\n <\/ul>\n <\/div>\n\n <div>\n <span class=\"inline-flex items-center gap-2 text-lg font-bold text-white mb-4\">\n <i data-lucide=\"contact\" class=\"w-5 h-5 text-brand-500\" aria-hidden=\"true\"><\/i> Kundtj\u00e4nst\n <\/span>\n <ul class=\"space-y-3 border-l-2 border-slate-800 ml-[9px] pl-5 m-0 list-none\">\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"#boka\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">Boka Service \/ Kontakt<\/a>\n <\/li>\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"tel:0725223022\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">072-522 30 22<\/a>\n <\/li>\n <li class=\"relative\">\n <span class=\"absolute -left-[22px] top-1\/2 w-4 h-[2px] bg-slate-800\" aria-hidden=\"true\"><\/span>\n <a href=\"mailto:info@afkteknik.se\" class=\"text-slate-400 hover:text-white transition-colors text-sm font-medium no-underline block py-1\">info@afkteknik.se<\/a>\n <\/li>\n <\/ul>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer class=\"bg-slate-950 py-12 border-t border-white\/5\">\n <div class=\"max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6\">\n <div class=\"text-center md:text-left\">\n <div class=\"font-black text-2xl text-white mb-1\">AFK TEKNIK<\/div>\n <p class=\"text-slate-500 text-sm\">© 2026 Anton Svensson.<\/p>\n <\/div>\n <nav class=\"flex flex-wrap justify-center gap-6 text-sm font-medium text-slate-400\" aria-label=\"Sidfotsmeny\">\n <a href=\"\/allmanna-villkor\" class=\"hover:text-white transition-colors no-underline\">Villkor & Garanti<\/a>\n <a href=\"\/verktyg\" class=\"hover:text-white transition-colors no-underline\">Verktyg<\/a>\n <a href=\"\/shop\" class=\"hover:text-white transition-colors no-underline\">Shop<\/a>\n <\/nav>\n <\/div>\n <\/footer>\n\n<\/div>\n\n<script>\n \/\/ JS-funktion f\u00f6r att l\u00e5ta anv\u00e4ndaren \"f\u00f6rv\u00e4lja\" kategori\n window.selectService = function(categoryValue) {\n document.getElementById('boka').scrollIntoView({behavior: 'smooth'});\n const radios = document.querySelectorAll('.cat-radio');\n radios.forEach(r => {\n if(r.value === categoryValue) {\n r.checked = true;\n syncCategory(categoryValue);\n }\n });\n };\n\n window.syncCategory = function(val) {\n const selectEl = document.getElementById('input-kategori');\n if (selectEl) {\n selectEl.value = val;\n }\n };\n\n \/\/ Uppdateringsfunktion f\u00f6r fillistan (Med orange brand-tema)\n window.updateFileList = function() {\n const input = document.getElementById('input-filer');\n const list = document.getElementById('file-list');\n list.innerHTML = '';\n \n if(input.files && input.files.length > 0) {\n Array.from(input.files).forEach(file => {\n const item = document.createElement('div');\n item.className = 'text-[11px] font-medium bg-slate-800 border border-slate-700 text-slate-300 px-3 py-1.5 rounded-lg flex items-center gap-2 shadow-sm';\n item.innerHTML = `\n <i data-lucide=\"file\" class=\"w-3.5 h-3.5 text-brand-500\"><\/i>\n <span class=\"truncate max-w-[120px] sm:max-w-[180px]\">${file.name}<\/span>\n `;\n list.appendChild(item);\n });\n \/\/ Rendera nya fil-ikoner om lucide \u00e4r inl\u00e4st\n if(typeof lucide !== 'undefined' && lucide.createIcons) {\n lucide.createIcons();\n }\n }\n };\n\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Initiera ikoner\n if(typeof lucide !== 'undefined') {\n lucide.createIcons();\n }\n\n \/\/ Navbar scroll effekt\n const nav = document.getElementById('navbar');\n if (nav) {\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) {\n nav.classList.add('shadow-2xl', 'bg-slate-950\/95');\n nav.classList.remove('bg-slate-900\/90');\n } else {\n nav.classList.remove('shadow-2xl', 'bg-slate-950\/95');\n nav.classList.add('bg-slate-900\/90');\n }\n }, { passive: true });\n }\n\n \/\/ Mobilmeny logik\n const menuBtn = document.getElementById('mobile-menu-btn');\n const mobileMenu = document.getElementById('mobile-menu');\n if (menuBtn && mobileMenu) {\n menuBtn.addEventListener('click', () => {\n const isOpen = mobileMenu.classList.toggle('open');\n menuBtn.setAttribute('aria-expanded', isOpen);\n });\n \n mobileMenu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n mobileMenu.classList.remove('open');\n menuBtn.setAttribute('aria-expanded', 'false');\n });\n });\n }\n\n \/\/ Formul\u00e4rhantering f\u00f6r din Ajax-backend\n const form = document.getElementById('afk-form-home');\n if (form) {\n let messageContainer = document.getElementById('afk-form-message');\n if (!messageContainer) {\n messageContainer = document.createElement('div');\n messageContainer.id = 'afk-form-message';\n messageContainer.className = 'mt-6 hidden';\n form.parentNode.insertBefore(messageContainer, form.nextSibling);\n }\n\n form.addEventListener('submit', async function(e) {\n e.preventDefault();\n const submitBtn = document.getElementById('btn-submit-home');\n \n if (!form.checkValidity()) {\n form.reportValidity();\n return;\n }\n\n \/\/ S\u00e4kerhetskoll p\u00e5 total filstorlek f\u00f6r att slippa backend payload freeze (Satt till 50MB)\n const fileInput = document.getElementById('input-filer');\n if (fileInput && fileInput.files.length > 0) {\n let totalSize = 0;\n for (let i = 0; i < fileInput.files.length; i++) {\n totalSize += fileInput.files[i].size;\n }\n if (totalSize > 50 * 1024 * 1024) {\n alert('Max total uppladdningsstorlek \u00e4r 50MB. V\u00e4nligen ta bort n\u00e5gra filer eller komprimera videon.');\n return;\n }\n }\n \n const originalBtnText = submitBtn.innerHTML;\n submitBtn.innerHTML = '<span class=\"flex items-center justify-center gap-2\"><svg class=\"animate-spin h-5 w-5 text-white\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle><path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path><\/svg> Skickar...<\/span>';\n submitBtn.disabled = true;\n messageContainer.className = 'mt-6 hidden';\n\n const formData = new FormData(form);\n formData.append('action', 'afk_send_mail'); \n if (!formData.has('enhet')) formData.append('enhet', 'Ok\u00e4nd enhet');\n\n try {\n const response = await fetch('\/wp-admin\/admin-ajax.php', {\n method: 'POST',\n body: formData\n });\n\n const result = await response.json();\n\n if (result.success) {\n const portalUrl = result.data?.portalUrl || result.data?.redirect_url;\n \n if (portalUrl) {\n window.location.href = portalUrl;\n } else {\n messageContainer.innerHTML = `\n <div class=\"bg-green-500\/10 border border-green-500\/20 rounded-xl p-8 text-center\" role=\"alert\">\n <i data-lucide=\"check-circle\" class=\"w-12 h-12 text-green-500 mx-auto mb-4\" aria-hidden=\"true\"><\/i>\n <h3 class=\"text-xl font-bold text-white mb-2\">Tack f\u00f6r din f\u00f6rfr\u00e5gan!<\/h3>\n <p class=\"text-slate-300 text-sm\">Vi har mottagit ditt \u00e4rende och skickat en bekr\u00e4ftelse till din e-post.<\/p>\n <\/div>\n `;\n messageContainer.className = 'mt-6 block animate-fade-in';\n form.reset();\n window.updateFileList(); \/\/ Rensa visuella fillistan efter reset\n form.style.display = 'none';\n }\n } else {\n throw new Error(result.data?.message || 'N\u00e5got gick fel vid kommunikation med servern.');\n }\n } catch (error) {\n messageContainer.innerHTML = `\n <div class=\"bg-red-500\/10 border border-red-500\/20 rounded-xl p-4 text-center\" role=\"alert\">\n <p class=\"text-red-400 text-sm font-medium\">Ett fel uppstod: ${error.message}. V\u00e4nligen f\u00f6rs\u00f6k igen eller ring oss.<\/p>\n <\/div>\n `;\n messageContainer.className = 'mt-6 block';\n } finally {\n submitBtn.innerHTML = originalBtnText;\n submitBtn.disabled = false;\n \n if(typeof lucide !== 'undefined' && lucide.createIcons) {\n lucide.createIcons();\n }\n }\n });\n }\n });\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\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>AFK Teknik – Inte Bara En Elektronikverkstad p\u00e5 \u00d6sterlen AFK TEKNIK Vi kan teknik Tj\u00e4nster S\u00e5 funkar det Verktyg Webshop Boka Tid Tj\u00e4nster S\u00e5 funkar det Verktyg Webshop Boka Tid \/ Offert Elektronikverkstad p\u00e5 \u00d6sterlen Vi lagar det andra sl\u00e4nger. Bevara det gamla, skapa det nya. Med specialiserad utrustning lagar vi all sorts elektronik, kretskort […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"disabled","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-308","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/afkteknik.se\/shop\/wp-json\/wp\/v2\/pages\/308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/afkteknik.se\/shop\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/afkteknik.se\/shop\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/afkteknik.se\/shop\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/afkteknik.se\/shop\/wp-json\/wp\/v2\/comments?post=308"}],"version-history":[{"count":1470,"href":"https:\/\/afkteknik.se\/shop\/wp-json\/wp\/v2\/pages\/308\/revisions"}],"predecessor-version":[{"id":4104,"href":"https:\/\/afkteknik.se\/shop\/wp-json\/wp\/v2\/pages\/308\/revisions\/4104"}],"wp:attachment":[{"href":"https:\/\/afkteknik.se\/shop\/wp-json\/wp\/v2\/media?parent=308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}