{"product_id":"berlin-sofa-set","title":"Berlin Sofa Set","description":"\u003cbody\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"\u003e\n    \u003ctitle\u003eDiscover the Berlin Sofa Set\u003c\/title\u003e\n    \u003cscript src=\"https:\/\/cdn.tailwindcss.com\"\u003e\u003c\/script\u003e\n    \n    \u003cstyle\u003e\n        \/* Animations *\/\n        @keyframes popIn {\n            0% { opacity: 0; transform: scale(0.5) translateY(10px); }\n            70% { transform: scale(1.1); }\n            100% { opacity: 1; transform: scale(1) translateY(0); }\n        }\n        \n        @keyframes slideInDrop {\n            0% { opacity: 0; transform: translateY(-20px) scale(0.95); }\n            70% { transform: translateY(2px) scale(1.01); }\n            100% { opacity: 1; transform: translateY(0) scale(1); }\n        }\n\n        .animate-pop-1 { animation: popIn 0.6s ease-out 0.3s forwards; opacity: 0; }\n        .animate-pop-2 { animation: popIn 0.6s ease-out 0.6s forwards; opacity: 0; }\n        .animate-pop-3 { animation: popIn 0.6s ease-out 0.9s forwards; opacity: 0; }\n        .animate-pop-4 { animation: popIn 0.6s ease-out 1.2s forwards; opacity: 0; }\n        \n        .module-enter {\n            animation: slideInDrop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\n            opacity: 0;\n        }\n\n        \/* Shopify Theme Protection *\/\n        .bosna-container * { box-sizing: border-box !important; }\n        .bosna-container p, .bosna-container h1, .bosna-container h2, .bosna-container h3, .bosna-container h4, .bosna-container span {\n            margin: 0 !important; padding: 0 !important; line-height: normal !important;\n        }\n        .bosna-container svg { display: block !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; }\n        .bosna-container .flex-center { display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: row !important; }\n        .bosna-container .bubble-text { display: flex !important; align-items: center !important; line-height: 1 !important; white-space: nowrap !important; margin-top: 2px !important; }\n        .bosna-container .feature-title { font-weight: 600 !important; line-height: 1.2 !important; margin-bottom: 4px !important; }\n        .bosna-container .feature-desc { line-height: 1.4 !important; white-space: normal !important; color: #6b7280 !important; }\n        \n        \/* Button Protection *\/\n        .bosna-container .qty-btn {\n            display: flex !important; align-items: center !important; justify-content: center !important;\n            width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important;\n            padding: 0 !important; margin: 0 !important; border: 1px solid #e5e7eb !important; border-radius: 50% !important; background-color: white !important; flex-shrink: 0 !important; aspect-ratio: 1 \/ 1 !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; cursor: pointer; transition: all 0.2s;\n        }\n        .bosna-container .qty-btn:active { transform: scale(0.9); }\n        .bosna-container .qty-btn svg { width: 16px !important; height: 16px !important; margin: auto !important; display: block !important; }\n\n        \/* Blueprint Scale Grid Background *\/\n        .premium-floor-bg {\n            background-color: transparent;\n            background-image: \n                linear-gradient(rgba(148, 163, 184, 0.4) 1px, transparent 1px),\n                linear-gradient(90deg, rgba(148, 163, 184, 0.4) 1px, transparent 1px);\n            background-size: 20px 20px; \n            background-position: 0 0;\n        }\n\n        \/* 2D Beautiful Sofa Module Styles *\/\n        .sofa-module {\n            position: absolute !important;\n            display: block !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            box-sizing: border-box !important;\n            box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1), 0 2px 5px -1px rgba(0,0,0,0.06) !important;\n            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;\n            overflow: hidden !important;\n            cursor: pointer !important;\n            -webkit-font-smoothing: antialiased !important;\n            -moz-osx-font-smoothing: grayscale !important;\n            transform: translateZ(0);\n        }\n        .sofa-module:hover {\n            transform: translateY(-6px) scale(1.02) translateZ(0) !important;\n            box-shadow: 0 15px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1) !important;\n            z-index: 60 !important;\n        }\n\n        .mod-part {\n            position: absolute !important;\n            display: block !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            box-sizing: border-box !important;\n            z-index: 10 !important;\n        }\n        \n        .mod-cushion-flex {\n            position: absolute !important;\n            display: flex !important;\n            align-items: center !important;\n            justify-content: center !important;\n            text-align: center !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            box-sizing: border-box !important;\n            z-index: 20 !important;\n        }\n\n        .mod-badge {\n            background: #ffffff !important;\n            padding: 4px 8px !important;\n            border-radius: 6px !important;\n            font-size: 10px !important;\n            font-weight: 800 !important;\n            color: #1e293b !important;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;\n            border: 1px solid rgba(0,0,0,0.05) !important;\n            pointer-events: none !important;\n            white-space: pre-wrap !important;\n            line-height: 1.2 !important;\n            max-width: 90% !important;\n            -webkit-font-smoothing: antialiased !important;\n            -moz-osx-font-smoothing: grayscale !important;\n            text-rendering: optimizeLegibility !important;\n            backface-visibility: hidden !important;\n            margin: 0 auto !important;\n            display: inline-block !important;\n        }\n        \n        .no-scrollbar::-webkit-scrollbar { display: none; }\n        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n    \u003c\/style\u003e\n\n    \u003cdiv class=\"hidden bg-indigo-200 border-indigo-400 text-indigo-900 bg-blue-300 border-blue-500 bg-blue-100 border-blue-300 bg-indigo-300 border-indigo-500 bg-indigo-50 border-indigo-300 bg-pink-100 border-pink-400 text-pink-900 text-gray-800 bg-emerald-100 border-emerald-400 text-emerald-900 bg-amber-100 border-amber-400 text-amber-900 bg-fuchsia-100 border-fuchsia-400 text-fuchsia-900 scale-95 opacity-30 shadow-2xl z-10 z-20 z-[50] z-[100] border-blue-600 border-blue-400 border-indigo-600 border-indigo-400\"\u003e\u003c\/div\u003e\n\n    \u003cdiv class=\"bosna-container flex flex-col w-full bg-white overflow-hidden box-border max-w-4xl mx-auto shadow-sm relative\"\u003e\n        \n        \u003c!-- LANGUAGE SELECTOR --\u003e\n        \u003cdiv class=\"w-full bg-white border-b border-gray-100 py-3 flex justify-center items-center z-20 relative px-4\"\u003e\n            \u003cdiv class=\"flex items-center gap-4 sm:gap-6 bg-gray-50 px-5 py-2.5 rounded-full border border-gray-200 shadow-sm overflow-x-auto no-scrollbar max-w-full\"\u003e\n                \u003cbutton data-lang=\"en\" class=\"lang-btn flex-shrink-0 flex items-center gap-2 text-[15px] sm:text-[16px] transition-all duration-300 transform scale-110 opacity-100 drop-shadow-md focus:outline-none font-semibold text-gray-800\" title=\"English\"\u003e\n                    \u003cimg src=\"https:\/\/flagcdn.com\/w20\/gb.png\" srcset=\"https:\/\/flagcdn.com\/w40\/gb.png 2x\" width=\"20\" alt=\"English\" class=\"rounded-[2px] shadow-sm\"\u003e English\n                \u003c\/button\u003e\n                \u003cbutton data-lang=\"de\" class=\"lang-btn flex-shrink-0 flex items-center gap-2 text-[15px] sm:text-[16px] transition-all duration-300 transform hover:scale-110 opacity-40 hover:opacity-80 focus:outline-none font-semibold text-gray-800\" title=\"Deutsch\"\u003e\n                    \u003cimg src=\"https:\/\/flagcdn.com\/w20\/de.png\" srcset=\"https:\/\/flagcdn.com\/w40\/de.png 2x\" width=\"20\" alt=\"Deutsch\" class=\"rounded-[2px] shadow-sm\"\u003e Deutsch\n                \u003c\/button\u003e\n                \u003cbutton data-lang=\"fr\" class=\"lang-btn flex-shrink-0 flex items-center gap-2 text-[15px] sm:text-[16px] transition-all duration-300 transform hover:scale-110 opacity-40 hover:opacity-80 focus:outline-none font-semibold text-gray-800\" title=\"Français\"\u003e\n                    \u003cimg src=\"https:\/\/flagcdn.com\/w20\/fr.png\" srcset=\"https:\/\/flagcdn.com\/w40\/fr.png 2x\" width=\"20\" alt=\"Français\" class=\"rounded-[2px] shadow-sm\"\u003e Français\n                \u003c\/button\u003e\n                \u003cbutton data-lang=\"tr\" class=\"lang-btn flex-shrink-0 flex items-center gap-2 text-[15px] sm:text-[16px] transition-all duration-300 transform hover:scale-110 opacity-40 hover:opacity-80 focus:outline-none font-semibold text-gray-800\" title=\"Türkçe\"\u003e\n                    \u003cimg src=\"https:\/\/flagcdn.com\/w20\/tr.png\" srcset=\"https:\/\/flagcdn.com\/w40\/tr.png 2x\" width=\"20\" alt=\"Türkçe\" class=\"rounded-[2px] shadow-sm\"\u003e Türkçe\n                \u003c\/button\u003e\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- DEFAULT SET BANNER --\u003e\n        \u003cdiv class=\"w-full bg-indigo-50\/80 border-b border-indigo-100 py-2.5 px-4 text-center z-10 relative shadow-sm flex items-center justify-center gap-2\"\u003e\n            \u003csvg class=\"w-5 h-5 text-indigo-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n            \u003cspan class=\"text-indigo-800 font-semibold text-[13px] sm:text-[15px] tracking-tight\" data-i18n=\"default_set_note\"\u003eStandard Set: 2x 3-Seater Sofa + 1x Armchair\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- DIMENSIONS SECTION --\u003e\n        \u003cdiv class=\"w-full p-4 sm:p-8 bg-white border-b border-gray-100\"\u003e\n            \u003cdiv class=\"flex items-center mb-6\"\u003e\n                \u003csvg class=\"w-6 h-6 mr-3 text-gray-900 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                \u003cdiv class=\"flex flex-col\"\u003e\n                    \u003ch2 class=\"text-2xl sm:text-3xl font-semibold tracking-tight\" style=\"margin: 0 !important;\" data-i18n=\"dimensions_title\"\u003eProduct Dimensions\u003c\/h2\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003c!-- 3-SEATER IMAGE --\u003e\n            \u003ch3 class=\"font-semibold text-gray-900 text-xl sm:text-2xl ml-1\" data-i18n=\"three_dim_title\" style=\"margin-bottom: 16px !important;\"\u003e3-Seater Dimensions\u003c\/h3\u003e\n            \u003cdiv class=\"relative w-full rounded-2xl overflow-hidden shadow-lg border border-gray-200 bg-gray-100 mb-8 mt-4\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0713\/7640\/4712\/files\/7C7F09FC-7545-44DD-BDE6-69A0F021354B.jpg?v=1776020612\" alt=\"Berlin 3-Seater Dimensions\" class=\"w-full h-auto object-cover block\"\u003e\n                \u003cdiv class=\"absolute bottom-3 right-3 sm:bottom-6 sm:right-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max animate-pop-1\" style=\"gap: 6px;\"\u003e\n                    \u003csvg class=\"w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l-4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"width\"\u003eW\u003c\/span\u003e: \u003cspan class=\"ml-1\"\u003e230 cm\u003c\/span\u003e\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cdiv class=\"absolute top-3 right-3 sm:top-6 sm:right-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max animate-pop-2\"\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"depth\"\u003eD\u003c\/span\u003e: 105 cm\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cdiv class=\"absolute top-3 left-3 sm:top-6 sm:left-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max animate-pop-3\" style=\"gap: 6px;\"\u003e\n                    \u003csvg class=\"w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4-4l-4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"height\"\u003eH\u003c\/span\u003e: 80 cm\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003c!-- ARMCHAIR IMAGE --\u003e\n            \u003ch3 class=\"font-semibold text-gray-900 text-xl sm:text-2xl ml-1\" data-i18n=\"armchair_dim_title\" style=\"margin-bottom: 16px !important;\"\u003eArmchair Dimensions\u003c\/h3\u003e\n            \u003cdiv class=\"relative w-full rounded-2xl overflow-hidden shadow-lg border border-gray-200 bg-gray-100 mb-2 mt-4\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0713\/7640\/4712\/files\/9F6708D4-4C55-4796-9083-5EAF231D229A.jpg?v=1776020612\" alt=\"Berlin Armchair Dimensions\" class=\"w-full h-auto object-cover block\"\u003e\n                \u003cdiv class=\"absolute bottom-3 right-3 sm:bottom-6 sm:right-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max animate-pop-1\" style=\"gap: 6px;\"\u003e\n                    \u003csvg class=\"w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l-4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"width\"\u003eW\u003c\/span\u003e: \u003cspan class=\"ml-1\"\u003e90 cm\u003c\/span\u003e\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cdiv class=\"absolute top-3 right-3 sm:top-6 sm:right-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max animate-pop-2\"\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"depth\"\u003eD\u003c\/span\u003e: 90 cm\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cdiv class=\"absolute top-3 left-3 sm:top-6 sm:left-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max animate-pop-3\" style=\"gap: 6px;\"\u003e\n                    \u003csvg class=\"w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4-4l-4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"height\"\u003eH\u003c\/span\u003e: 90 cm\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- FEATURES \u0026 FABRIC --\u003e\n        \u003cdiv class=\"w-full flex flex-col justify-center p-6 sm:p-8 bg-white border-b border-gray-100\"\u003e\n            \u003ch1 class=\"text-3xl md:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight\" data-i18n=\"title\" style=\"margin-bottom: 32px !important;\"\u003e\n                Discover the Berlin Sofa Set\n            \u003c\/h1\u003e\n            \n            \u003cdiv class=\"flex flex-col mb-8\" style=\"gap: 24px;\"\u003e\n                \u003c!-- Frame --\u003e\n                \u003cdiv class=\"flex flex-row items-start w-full\" style=\"gap: 16px;\"\u003e\n                    \u003cdiv class=\"bg-amber-50 text-amber-600 p-2.5 rounded-lg flex-center\"\u003e\u003csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-col w-full justify-center pt-0.5\"\u003e\n                        \u003ch4 class=\"text-gray-900 feature-title\" data-i18n=\"feat_frame_title\"\u003eFrame Feature\u003c\/h4\u003e\n                        \u003cp class=\"feature-desc\" data-i18n=\"feat_frame_desc\"\u003eKiln dried beech wood and plywood.\u003c\/p\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n                \u003c!-- Fabric --\u003e\n                \u003cdiv class=\"flex flex-row items-start w-full\" style=\"gap: 16px;\"\u003e\n                    \u003cdiv class=\"bg-rose-50 text-rose-600 p-2.5 rounded-lg flex-center\"\u003e\u003csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-col w-full justify-center pt-0.5\"\u003e\n                        \u003ch4 class=\"text-gray-900 feature-title\" data-i18n=\"feat_fabric_title\"\u003eFabric Feature\u003c\/h4\u003e\n                        \u003cp class=\"feature-desc\" data-i18n=\"feat_fabric_desc\"\u003eEasy clean knitted fabric.\u003c\/p\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n                \u003c!-- Sponge --\u003e\n                \u003cdiv class=\"flex flex-row items-start w-full\" style=\"gap: 16px;\"\u003e\n                    \u003cdiv class=\"bg-emerald-50 text-emerald-600 p-2.5 rounded-lg flex-center\"\u003e\u003csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-col w-full justify-center pt-0.5\"\u003e\n                        \u003ch4 class=\"text-gray-900 feature-title\" data-i18n=\"feat_foam_title\"\u003eSponge\u003c\/h4\u003e\n                        \u003cp class=\"feature-desc\" data-i18n=\"feat_foam_desc\"\u003eSeat: 35 HR Sponge.\u003c\/p\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n                \u003c!-- Bed Mechanism --\u003e\n                \u003cdiv class=\"flex flex-row items-start w-full\" style=\"gap: 16px;\"\u003e\n                    \u003cdiv class=\"bg-purple-50 text-purple-600 p-2.5 rounded-lg flex-center\"\u003e\u003csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-col w-full justify-center pt-0.5\"\u003e\n                        \u003ch4 class=\"text-gray-900 feature-title\" data-i18n=\"feat_bed_title\"\u003eBed Mechanism\u003c\/h4\u003e\n                        \u003cp class=\"feature-desc\" data-i18n=\"feat_bed_desc\"\u003eConverts into a single bed with a flip-back mechanism.\u003c\/p\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003ca href=\"https:\/\/ozucler.com\/pages\/kumas-secenekleri\" target=\"_blank\" class=\"flex flex-row items-center justify-between px-5 sm:px-6 py-4 bg-gray-100 hover:bg-gray-200 active:scale-95 text-gray-900 rounded-2xl transition-all duration-200 w-full shadow-sm border border-gray-200\/50\" style=\"text-decoration: none !important;\"\u003e\n                \u003cdiv class=\"flex-center\" style=\"gap: 12px;\"\u003e\n                    \u003csvg class=\"w-5 h-5 sm:w-6 sm:h-6 text-gray-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan data-i18n=\"fabric_btn\" class=\"font-medium text-[15px] sm:text-lg bubble-text\"\u003eFabric Options\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003csvg class=\"w-4 h-4 sm:w-5 sm:h-5 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n            \u003c\/a\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- 360 VISUAL SET BUILDER --\u003e\n        \u003cdiv class=\"w-full bg-white p-6 sm:p-8 border-b border-gray-200\"\u003e\n            \u003ch2 class=\"text-2xl sm:text-3xl font-bold text-gray-900 mb-4\" data-i18n=\"build_set_title\" style=\"margin: 0 !important;\"\u003eBuild Your Set\u003c\/h2\u003e\n            \n            \u003cdiv class=\"flex flex-col sm:flex-row items-center justify-between bg-white border border-gray-200 rounded-2xl p-4 sm:p-5 mb-6 shadow-sm gap-4\"\u003e\n                \u003cdiv class=\"flex items-center gap-3 text-gray-600\"\u003e\n                    \u003csvg class=\"w-6 h-6 sm:w-8 sm:h-8 flex-shrink-0 text-indigo-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"text-[14px] sm:text-base font-medium leading-tight\" data-i18n=\"reset_note\" style=\"margin: 0 !important;\"\u003eMix and match modules to create your perfect living room setup.\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cbutton onclick=\"resetLayout()\" class=\"w-full sm:w-auto text-sm sm:text-base font-bold text-gray-700 bg-gray-100 hover:bg-gray-200 px-5 py-2.5 sm:px-6 sm:py-3 rounded-xl transition-colors flex items-center justify-center gap-2 border border-gray-200 active:scale-95 flex-shrink-0\"\u003e\n                    \u003csvg class=\"w-4 h-4 sm:w-5 sm:h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan data-i18n=\"reset_btn\"\u003eClear All\u003c\/span\u003e\n                \u003c\/button\u003e\n            \u003c\/div\u003e\n            \n            \u003c!-- THE NEW 2D CANVAS AREA --\u003e\n            \u003cdiv id=\"visualizer-container\" class=\"relative w-full h-[450px] sm:h-[550px] border border-gray-200 rounded-2xl overflow-hidden shadow-inner flex flex-col items-center justify-center bg-[#f8fafc]\"\u003e\n                \n                \u003c!-- Architectural Top Badge --\u003e\n                \u003cdiv class=\"absolute top-4 left-4 bg-white\/90 backdrop-blur px-3 py-1.5 rounded-lg shadow-sm border border-gray-200 flex items-center gap-2 z-40 pointer-events-none\"\u003e\n                    \u003cdiv class=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\"\u003e\u003c\/div\u003e\n                    \u003cspan class=\"text-[11px] font-bold text-gray-700 uppercase tracking-wider\" data-i18n=\"top_view_badge\"\u003eLIVE PLAN\u003c\/span\u003e\n                \u003c\/div\u003e\n\n                \u003cdiv class=\"absolute top-4 right-4 bg-white\/90 backdrop-blur px-3 py-1.5 rounded-lg shadow-sm border border-gray-200 flex items-center gap-2 z-40 pointer-events-none\"\u003e\n                    \u003csvg class=\"w-3 h-3 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"text-[11px] font-bold text-gray-600 uppercase tracking-wider\" data-i18n=\"scale_indicator\"\u003e1 GRID = 20 CM\u003c\/span\u003e\n                \u003c\/div\u003e\n\n                \u003c!-- 2D Canvas Area with Grid Background --\u003e\n                \u003cdiv id=\"draw-area\" class=\"w-full h-full relative overflow-hidden\"\u003e\n                    \u003cdiv id=\"sofa-canvas\" class=\"absolute top-1\/2 left-1\/2 transition-transform duration-500 ease-out premium-floor-bg\"\u003e\n                        \u003c!-- JS injects layout items --\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n\n                \u003cdiv class=\"absolute bottom-4 left-4 right-4 z-[50] flex flex-row justify-between items-end pointer-events-none\"\u003e\n                    \u003cdiv class=\"bg-white\/95 backdrop-blur-sm px-4 py-2 sm:px-5 sm:py-3 rounded-xl shadow-md border border-gray-200 flex flex-col pointer-events-auto max-w-[50%]\"\u003e\n                        \u003cspan class=\"text-[10px] sm:text-xs text-gray-500 uppercase tracking-widest font-bold\" data-i18n=\"config_label\"\u003eItems\u003c\/span\u003e\n                        \u003cspan id=\"vis-dims\" class=\"font-black text-gray-800 text-sm sm:text-base tracking-tight truncate\"\u003e\u003c\/span\u003e\n                    \u003c\/div\u003e\n                    \u003cdiv class=\"bg-red-600 px-4 py-2 sm:px-5 sm:py-3 rounded-xl shadow-md border border-red-700 flex flex-col items-end pointer-events-auto\"\u003e\n                        \u003cspan class=\"text-[10px] sm:text-xs text-red-100 uppercase tracking-widest font-bold\" data-i18n=\"total_price_label\"\u003eTotal Price\u003c\/span\u003e\n                        \u003cspan id=\"vis-price\" class=\"font-black text-white text-lg sm:text-xl tracking-tight\"\u003e€0\u003c\/span\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- MODULE LIST --\u003e\n        \u003cdiv class=\"w-full bg-gray-50 p-6 sm:p-8\"\u003e\n            \u003cdiv class=\"flex flex-col sm:flex-row sm:items-center justify-between mb-4\" style=\"gap: 8px;\"\u003e\n                \u003ch2 class=\"text-2xl sm:text-3xl font-bold text-gray-900\" data-i18n=\"build_set_title\" style=\"margin: 0 !important;\"\u003eBuild Your Set\u003c\/h2\u003e\n                \u003cdiv class=\"bg-indigo-100 text-indigo-700 px-3 py-1.5 rounded-lg text-sm font-semibold border border-indigo-200 w-max flex items-center gap-2\"\u003e\n                    \u003cspan data-i18n=\"config_label\"\u003eItems:\u003c\/span\u003e \u003cspan id=\"summary-width\" class=\"font-medium max-w-[200px] truncate\"\u003e\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003c!-- SET MODULES GRID --\u003e\n            \u003cdiv class=\"grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4 mt-2\"\u003e\n                \n                \u003c!-- 3-Seater Sofa --\u003e\n                \u003cdiv class=\"flex flex-row items-center justify-between bg-white px-4 py-3 sm:px-5 sm:py-4 rounded-xl shadow-sm border border-gray-100\" style=\"gap: 8px;\"\u003e\n                    \u003cdiv class=\"flex flex-col flex-1 min-w-0\"\u003e\n                        \u003ch3 class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title truncate\" data-i18n=\"mod_three_seater\" style=\"margin: 0 !important; padding: 0 !important;\"\u003e230 cm 3-Seater Sofa\u003c\/h3\u003e\n                        \u003cp class=\"text-gray-500 text-[12px] sm:text-sm font-medium feature-desc truncate\" data-i18n=\"mod_three_price\" style=\"margin: 2px 0 0 0 !important; padding: 0 !important;\"\u003e€1050 \/ each\u003c\/p\u003e\n                    \u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-row items-center bg-gray-50 rounded-full p-1 border border-gray-200 flex-shrink-0\" style=\"gap: 6px;\"\u003e\n                        \u003cbutton onclick=\"handleRemoveModule('three_seater')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 12H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                        \u003cspan id=\"cnt-three_seater\" class=\"font-bold text-gray-900 text-lg flex-center\" style=\"width: 20px; line-height: 1 !important;\"\u003e0\u003c\/span\u003e\n                        \u003cbutton onclick=\"handleAddModule('three_seater')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n\n                \u003c!-- Armchair Module --\u003e\n                \u003cdiv class=\"flex flex-row items-center justify-between bg-white px-4 py-3 sm:px-5 sm:py-4 rounded-xl shadow-sm border border-gray-100\" style=\"gap: 8px;\"\u003e\n                    \u003cdiv class=\"flex flex-col flex-1 min-w-0\"\u003e\n                        \u003ch3 class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title truncate\" data-i18n=\"armchair\" style=\"margin: 0 !important; padding: 0 !important;\"\u003eArmchair\u003c\/h3\u003e\n                        \u003cp class=\"text-gray-500 text-[12px] sm:text-sm font-medium feature-desc truncate\" data-i18n=\"armchair_price\" style=\"margin: 2px 0 0 0 !important; padding: 0 !important;\"\u003e€525 \/ each\u003c\/p\u003e\n                    \u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-row items-center bg-gray-50 rounded-full p-1 border border-gray-200 flex-shrink-0\" style=\"gap: 6px;\"\u003e\n                        \u003cbutton onclick=\"handleRemoveModule('armchair')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 12H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                        \u003cspan id=\"cnt-armchair\" class=\"font-bold text-gray-900 text-lg flex-center\" style=\"width: 20px; line-height: 1 !important;\"\u003e0\u003c\/span\u003e\n                        \u003cbutton onclick=\"handleAddModule('armchair')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- ORDER SECTION --\u003e\n        \u003cdiv class=\"w-full bg-white p-6 sm:p-8 border-t border-gray-200\"\u003e\n            \u003cdiv class=\"w-full flex flex-col sm:flex-row\" style=\"gap: 16px;\"\u003e\n                \u003cdiv class=\"flex-1 flex flex-row items-start bg-gray-50 border border-gray-100 px-4 py-4 rounded-2xl shadow-sm\" style=\"gap: 12px;\"\u003e\n                    \u003cdiv class=\"bg-emerald-100 text-emerald-600 p-2.5 rounded-xl flex-center\"\u003e\u003csvg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-col justify-center pt-0.5\"\u003e\n                        \u003cspan class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title\" data-i18n=\"no_fees_title\"\u003eNo Hidden Fees\u003c\/span\u003e\n                        \u003cspan class=\"text-[12px] sm:text-sm text-gray-600 feature-desc\" data-i18n=\"no_fees_desc\"\u003eFree shipping \u0026amp; all taxes included.\u003c\/span\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n                \u003cdiv class=\"flex-1 flex flex-row items-start bg-gray-50 border border-gray-100 px-4 py-4 rounded-2xl shadow-sm\" style=\"gap: 12px;\"\u003e\n                    \u003cdiv class=\"bg-blue-100 text-blue-600 p-2.5 rounded-xl flex-center\"\u003e\u003csvg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-col justify-center pt-0.5\"\u003e\n                        \u003cspan class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title\" data-i18n=\"delivery_title\"\u003eSecure Delivery\u003c\/span\u003e\n                        \u003cspan class=\"text-[12px] sm:text-sm text-gray-600 feature-desc\" data-i18n=\"delivery_desc\"\u003eDelivered safely within 5-8 weeks.\u003c\/span\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cspan id=\"total-price\" class=\"hidden\"\u003e\u003c\/span\u003e\n\n            \u003cbutton id=\"btn-whatsapp\" class=\"w-full bg-[#25D366] hover:bg-[#1da851] active:scale-95 text-white rounded-2xl transition-all duration-200 shadow-lg shadow-[#25D366]\/25 border-none flex-center\" style=\"margin-top: 24px !important; padding: 16px 24px !important; gap: 12px;\"\u003e\n                \u003csvg class=\"w-6 h-6 sm:w-7 sm:h-7\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\u003cpath d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.347-.272.273-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                \u003cspan data-i18n=\"whatsapp_btn\" class=\"font-semibold text-lg sm:text-xl bubble-text\"\u003eOrder via WhatsApp\u003c\/span\u003e\n            \u003c\/button\u003e\n        \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n    \u003c!-- Logic \u0026 UI Script --\u003e\n    \u003cscript\u003e\n        const mods = {\n            three_seater: { price: 1050, sizeW: 230, sizeD: 105, count: 0 },\n            armchair:     { price: 525,  sizeW: 90,  sizeD: 90,  count: 0 }\n        };\n\n        let layoutState = {\n            three_seater: 2,\n            armchair: 1\n        };\n\n        let currentLang = 'en';\n\n        const translations = {\n            en: {\n                dimensions_title: \"Product Dimensions\", width: \"W\", depth: \"D\", height: \"H\", seat_label: \"Seat\", config_label: \"Items\",\n                armchair_dim_title: \"Armchair Dimensions\", three_dim_title: \"3-Seater Dimensions\", title: \"Discover the Berlin Sofa Set\",\n                default_set_note: \"Standard Set: 2x 3-Seater Sofa + 1x Armchair\",\n                feat_frame_title: \"Frame Feature\", feat_frame_desc: \"Kiln dried beech wood and plywood.\",\n                feat_fabric_title: \"Fabric Feature\", feat_fabric_desc: \"Easy clean knitted fabric.\",\n                feat_foam_title: \"Sponge\", feat_foam_desc: \"35 HR Sponge.\",\n                feat_bed_title: \"Bed Mechanism\", feat_bed_desc: \"Converts into a single bed with a flip-back mechanism.\",\n                fabric_btn: \"Fabric Options\", build_set_title: \"Build Your Set\",\n                mod_three_seater: \"230 cm 3-Seater Sofa\", mod_three_price: \"€1050 \/ each\",\n                armchair: \"Armchair\", armchair_price: \"€525 \/ each\",\n                total_price_label: \"Total Price\", no_fees_title: \"No Hidden Fees\", no_fees_desc: \"Free shipping \u0026 all taxes included.\",\n                delivery_title: \"Secure Delivery\", delivery_desc: \"Delivered safely within 5-8 weeks.\", whatsapp_btn: \"Order via WhatsApp\",\n                reset_btn: \"Clear All\", reset_note: \"Mix and match modules to create your perfect living room setup.\",\n                wa_greeting: \"Hello! I would like to order the Berlin Sofa Set.\",\n                wa_config: \"My Configuration\",\n                wa_total: \"Total Price\",\n                wa_help: \"Could you please help me with the order process?\",\n                mod_short_three_seater: \"3-Seater\",\n                empty_set: \"Empty\", set_label: \"Sofa\",\n                top_view_badge: \"LIVE PLAN\", scale_indicator: \"1 GRID = 20 CM\"\n            },\n            de: {\n                dimensions_title: \"Produktabmessungen\", width: \"B\", depth: \"T\", height: \"H\", seat_label: \"Sitz\", config_label: \"Elemente\",\n                armchair_dim_title: \"Sessel Abmessungen\", three_dim_title: \"3-Sitzer Abmessungen\", title: \"Entdecken Sie das Berlin Sofa-Set\",\n                default_set_note: \"Standard-Set: 2x 3-Sitzer Sofa + 1x Sessel\",\n                feat_frame_title: \"Rahmen\", feat_frame_desc: \"Hainbuche \/ MDF-Sperrholz.\",\n                feat_fabric_title: \"Stoff\", feat_fabric_desc: \"Leicht zu reinigendes Strickgewebe.\",\n                feat_foam_title: \"Schaumstoff\", feat_foam_desc: \"35 HR Schaumstoff.\",\n                feat_bed_title: \"Bettfunktion\", feat_bed_desc: \"Verwandelt sich mit einem Klappmechanismus in ein Einzelbett.\",\n                fabric_btn: \"Stoffoptionen\", build_set_title: \"Erstellen Sie Ihr Set\",\n                mod_three_seater: \"230 cm 3-Sitzer Sofa\", mod_three_price: \"1050 € \/ Stück\",\n                armchair: \"Sessel\", armchair_price: \"525 € \/ Stück\",\n                total_price_label: \"Gesamtpreis\", no_fees_title: \"Keine versteckten Gebühren\", no_fees_desc: \"Kostenloser Versand \u0026 Steuern inbegriffen.\",\n                delivery_title: \"Sichere Lieferung\", delivery_desc: \"Sichere Lieferung innerhalb von 5-8 Wochen.\", whatsapp_btn: \"Über WhatsApp bestellen\",\n                reset_btn: \"Alles löschen\", reset_note: \"Kombinieren Sie Module, um Ihre perfekte Wohnzimmerausstattung zu erstellen.\",\n                wa_greeting: \"Hallo! Ich möchte das Berlin Sofa-Set bestellen.\",\n                wa_config: \"Meine Konfiguration\",\n                wa_total: \"Gesamtpreis\",\n                wa_help: \"Könnten Sie mir bitte beim Bestellvorgang helfen?\",\n                mod_short_three_seater: \"3-Sitzer\",\n                empty_set: \"Leer\", set_label: \"Sofa\",\n                top_view_badge: \"LIVE PLAN\", scale_indicator: \"1 RASTER = 20 CM\"\n            },\n            fr: {\n                dimensions_title: \"Dimensions du Produit\", width: \"L\", depth: \"P\", height: \"H\", seat_label: \"Siège\", config_label: \"Éléments\",\n                armchair_dim_title: \"Dimensions du Fauteuil\", three_dim_title: \"Dimensions 3 Places\", title: \"Découvrez l'Ensemble Canapé Berlin\",\n                default_set_note: \"Ensemble standard: 2x Canapé 3 Places + 1x Fauteuil\",\n                feat_frame_title: \"Cadre\", feat_frame_desc: \"Charme \/ Contreplaqué MDF.\",\n                feat_fabric_title: \"Tissu\", feat_fabric_desc: \"Tissu tricoté facile à nettoyer.\",\n                feat_foam_title: \"Mousse\", feat_foam_desc: \"Mousse 35 HR.\",\n                feat_bed_title: \"Mécanisme de Lit\", feat_bed_desc: \"Se transforme en lit simple avec un mécanisme à bascule.\",\n                fabric_btn: \"Options de Tissu\", build_set_title: \"Créez Votre Ensemble\",\n                mod_three_seater: \"Canapé 3 Places 230 cm\", mod_three_price: \"1050 € \/ pièce\",\n                armchair: \"Fauteuil\", armchair_price: \"525 € \/ pièce\",\n                total_price_label: \"Prix Total\", no_fees_title: \"Pas de Frais Cachés\", no_fees_desc: \"Livraison gratuite et taxes comprises.\",\n                delivery_title: \"Livraison Sécurisée\", delivery_desc: \"Livré en toute sécurité sous 5 à 8 semaines.\", whatsapp_btn: \"Commander via WhatsApp\",\n                reset_btn: \"Tout effacer\", reset_note: \"Mélangez et associez les modules pour créer la configuration parfaite pour votre salon.\",\n                wa_greeting: \"Bonjour ! Je souhaite commander l'Ensemble Canapé Berlin.\",\n                wa_config: \"Ma Configuration\",\n                wa_total: \"Prix Total\",\n                wa_help: \"Pourriez-vous m'aider avec le processus de commande ?\",\n                mod_short_three_seater: \"3-Places\",\n                empty_set: \"Vide\", set_label: \"Canapé\",\n                top_view_badge: \"PLAN EN DIRECT\", scale_indicator: \"1 GRILLE = 20 CM\"\n            },\n            tr: {\n                dimensions_title: \"Ürün Ölçüleri\", width: \"G\", depth: \"D\", height: \"Y\", seat_label: \"Oturum\", config_label: \"Modüller\",\n                armchair_dim_title: \"Berjer Ölçüleri\", three_dim_title: \"3'lü Koltuk Ölçüleri\", title: \"Berlin Koltuk Takımı'nı Keşfedin\",\n                default_set_note: \"Standart Takım İçeriği: 2 Adet Üçlü Koltuk + 1 Berjer\",\n                feat_frame_title: \"İskelet Malzemesi\", feat_frame_desc: \"Fırınlanmış kayın ağacı ve kontradan üretilmiştir.\",\n                feat_fabric_title: \"Kumaş Detayları\", feat_fabric_desc: \"Silinebilir örme kumaş.\",\n                feat_foam_title: \"Sünger\", feat_foam_desc: \"35 HR Sünger.\",\n                feat_bed_title: \"Yatak Mekanizması\", feat_bed_desc: \"Sırta atlatmalı mekanizma ile tek kişilik yatak olabilir.\",\n                fabric_btn: \"Kumaş Seçenekleri\", build_set_title: \"Kendi Takımınızı Oluşturun\",\n                mod_three_seater: \"230 cm 3'lü Koltuk\", mod_three_price: \"€1050 \/ adet\",\n                armchair: \"Berjer\", armchair_price: \"€525 \/ adet\",\n                total_price_label: \"Toplam Fiyat\", no_fees_title: \"Gizli Ücret Yok\", no_fees_desc: \"Ücretsiz kargo ve tüm vergiler dahil.\",\n                delivery_title: \"Güvenli Teslimat\", delivery_desc: \"5-8 hafta içinde güvenle teslim edilir.\", whatsapp_btn: \"WhatsApp ile Sipariş Ver\",\n                reset_btn: \"Tümünü Temizle\", reset_note: \"Salonunuz için en uygun tasarımı yaratmak adına istediğiniz modülü seçin.\",\n                wa_greeting: \"Merhaba! Berlin Koltuk Takımı siparişi vermek istiyorum.\",\n                wa_config: \"Konfigürasyonum\",\n                wa_total: \"Toplam Tutar\",\n                wa_help: \"Sipariş süreciyle ilgili yardımcı olabilir misiniz?\",\n                mod_short_three_seater: \"3'lü Koltuk\",\n                empty_set: \"Boş\", set_label: \"Koltuk\",\n                top_view_badge: \"CANLI PLAN\", scale_indicator: \"1 KARE = 20 CM\"\n            }\n        };\n\n        const formatCurrency = (amount, lang) =\u003e {\n            const localeMap = { 'en': 'en-IE', 'de': 'de-DE', 'fr': 'fr-FR', 'tr': 'tr-TR' };\n            return new Intl.NumberFormat(localeMap[lang], { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(amount);\n        };\n\n        window.resetLayout = function() {\n            layoutState = { \n                three_seater: 0, \n                armchair: 0\n            };\n            syncCounts();\n            updateUI();\n        };\n\n        function syncCounts() {\n            mods.three_seater.count = layoutState.three_seater;\n            mods.armchair.count = layoutState.armchair;\n        }\n\n        window.handleAddModule = function(id) {\n            layoutState[id]++;\n            syncCounts();\n            updateUI();\n        };\n\n        window.handleRemoveModule = function(id) {\n            if (layoutState[id] \u003e 0) layoutState[id]--;\n            syncCounts();\n            updateUI();\n        };\n\n        \/\/ --- SCHEMATIC BLOCK TEMPLATES ---\n        function getColors(id) {\n            const map = {\n                'three_seater': { l: '#f3e8ff', d: '#c084fc' }, \n                'armchair':   { l: '#fae8ff', d: '#e879f9' }\n            };\n            return map[id] || { l: '#f8fafc', d: '#94a3b8' };\n        }\n\n        function getStraightHTML(id, name, x, y, c, w, d) {\n            return `\n            \u003cdiv class=\"sofa-module module-enter\" style=\"width: ${w}px !important; height: ${d}px !important; left: ${x}px !important; top: ${y}px !important; z-index: 10 !important; background-color: ${c.l} !important; border: 2px solid ${c.d} !important; border-radius: 12px !important;\"\u003e\n                \u003cdiv class=\"mod-part\" style=\"bottom:0 !important; left:0 !important; right:0 !important; height:25px !important; background-color: ${c.d} !important; border-radius: 0 0 10px 10px !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-part\" style=\"top:0 !important; left:0 !important; bottom:0 !important; width:25px !important; background-color: ${c.d} !important; border-radius: 10px 0 0 10px !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-part\" style=\"top:0 !important; right:0 !important; bottom:0 !important; width:25px !important; background-color: ${c.d} !important; border-radius: 0 10px 10px 0 !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-cushion-flex\" style=\"top: 0 !important; left: 25px !important; right: 25px !important; bottom: 25px !important;\"\u003e\n                    \u003cspan class=\"mod-badge\"\u003e${name}\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e`;\n        }\n\n        function getArmchairHTML(name, x, y, c, w, d) {\n            return `\n            \u003cdiv class=\"sofa-module module-enter\" style=\"width: ${w}px !important; height: ${d}px !important; left: ${x}px !important; top: ${y}px !important; z-index: 10 !important; background-color: ${c.l} !important; border: 2px solid ${c.d} !important; border-radius: 12px !important;\"\u003e\n                \u003cdiv class=\"mod-part\" style=\"bottom: 0 !important; left: 0 !important; right: 0 !important; height: 25px !important; background-color: ${c.d} !important; border-radius: 0 0 10px 10px !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-part\" style=\"top: 0 !important; left: 0 !important; bottom: 25px !important; width: 25px !important; background-color: ${c.d} !important; border-radius: 10px 0 0 0 !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-part\" style=\"top: 0 !important; right: 0 !important; bottom: 25px !important; width: 25px !important; background-color: ${c.d} !important; border-radius: 0 10px 0 0 !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-cushion-flex\" style=\"top: 0 !important; left: 25px !important; right: 25px !important; bottom: 25px !important;\"\u003e\n                    \u003cspan class=\"mod-badge\" style=\"font-size:10px !important; padding: 4px !important;\"\u003e${name}\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e`;\n        }\n\n        let currentSofaW = 100;\n        let currentSofaH = 100;\n\n        function updateScale() {\n            const canvas = document.getElementById('sofa-canvas');\n            const container = document.getElementById('draw-area');\n            if (!canvas || !container) return;\n\n            const rect = container.getBoundingClientRect();\n            let cw = rect.width || (window.innerWidth \u003c 600 ? 300 : 600);\n            let ch = rect.height || 400; \n            \n            let padX = window.innerWidth \u003c 600 ? 30 : 60;\n            let padY = window.innerWidth \u003c 600 ? 110 : 140; \n            \n            cw -= padX; \n            ch -= padY; \n            \n            let scale = Math.min(cw \/ (currentSofaW || 1), ch \/ (currentSofaH || 1)); \n            scale = Math.min(scale, 1.8); \n\n            let offsetY = window.innerWidth \u003c 600 ? -25 : -15; \n            canvas.style.transform = `translate(-50%, calc(-50% + ${offsetY}px)) scale(${scale})`;\n        }\n\n        function drawVisualizer() {\n            const canvas = document.getElementById('sofa-canvas');\n            canvas.innerHTML = ''; \n\n            let itemsToDraw = [];\n            \n            ['three_seater'].forEach(id =\u003e {\n                for(let i=0; i\u003clayoutState[id]; i++) itemsToDraw.push({ id, type: 'straight', w: mods[id].sizeW, d: mods[id].sizeD });\n            });\n            for(let i=0; i\u003clayoutState.armchair; i++) {\n                itemsToDraw.push({ id: 'armchair', type: 'armchair', w: mods.armchair.sizeW, d: mods.armchair.sizeD });\n            }\n\n            let html = '';\n            let gap = 80;\n            \n            let rows = [];\n            for (let i = 0; i \u003c itemsToDraw.length; i += 2) {\n                rows.push(itemsToDraw.slice(i, i + 2));\n            }\n\n            let rowData = [];\n            let globalMaxW = 0;\n            \n            rows.forEach(row =\u003e {\n                let rowW = 0;\n                let rowH = 0;\n                row.forEach(item =\u003e {\n                    rowW += item.w;\n                    rowH = Math.max(rowH, item.d);\n                });\n                rowW += (row.length - 1) * gap; \n                globalMaxW = Math.max(globalMaxW, rowW);\n                rowData.push({ items: row, rowW, rowH });\n            });\n\n            let cursorY = 0;\n            \n            rowData.forEach(row =\u003e {\n                let cursorX = (globalMaxW - row.rowW) \/ 2; \n                \n                row.items.forEach(item =\u003e {\n                    let itemY = cursorY + row.rowH - item.d; \n\n                    if (item.type === 'straight') {\n                        html += getStraightHTML(item.id, translations[currentLang]['mod_short_'+item.id] || translations[currentLang][item.id], cursorX, itemY, getColors(item.id), item.w, item.d);\n                    } else if (item.type === 'armchair') {\n                        html += getArmchairHTML(translations[currentLang]['armchair'], cursorX, itemY, getColors('armchair'), item.w, item.d);\n                    }\n                    cursorX += item.w + gap;\n                });\n                \n                cursorY += row.rowH + gap;\n            });\n\n            canvas.innerHTML = html;\n\n            let globalMaxH = cursorY \u003e 0 ? cursorY - gap : 0;\n\n            currentSofaW = globalMaxW;\n            currentSofaH = globalMaxH;\n\n            let padX = 2000;\n            let padY = 2000;\n            let totalW = currentSofaW + (padX * 2);\n            let totalH = currentSofaH + (padY * 2);\n\n            canvas.style.width = `${totalW}px`;\n            canvas.style.height = `${totalH}px`;\n\n            const children = canvas.children;\n            for(let i=0; i\u003cchildren.length; i++) {\n                let oldLeft = parseFloat(children[i].style.left) || 0;\n                let oldTop = parseFloat(children[i].style.top) || 0;\n                children[i].style.left = `${oldLeft + padX}px`;\n                children[i].style.top = `${oldTop + padY}px`;\n            }\n\n            updateScale();\n        }\n\n        const updateUI = () =\u003e {\n            try {\n                \/\/ UI Counters Update\n                const elThreeSeater = document.getElementById('cnt-three_seater');\n                if (elThreeSeater) elThreeSeater.textContent = layoutState.three_seater;\n                \n                const elArmchair = document.getElementById('cnt-armchair');\n                if (elArmchair) elArmchair.textContent = layoutState.armchair;\n\n                \/\/ Total Price Calculation\n                let totalEur = 0;\n                totalEur += layoutState.three_seater * mods.three_seater.price;\n                totalEur += layoutState.armchair * mods.armchair.price;\n\n                const elVisPrice = document.getElementById(\"vis-price\");\n                if (elVisPrice) elVisPrice.textContent = formatCurrency(totalEur, currentLang);\n                \n                const elTotalPrice = document.getElementById(\"total-price\");\n                if (elTotalPrice) elTotalPrice.textContent = formatCurrency(totalEur, currentLang);\n\n                const t = translations[currentLang];\n                let itemTexts = [];\n\n                if (layoutState.three_seater \u003e 0) {\n                    itemTexts.push(`${layoutState.three_seater}x ${t['mod_short_three_seater'] || t['three_seater']}`);\n                }\n                if (layoutState.armchair \u003e 0) {\n                    itemTexts.push(`${layoutState.armchair}x ${t['armchair']}`);\n                }\n\n                let dimText = itemTexts.join(\" + \");\n                if(dimText === \"\") dimText = t['empty_set'];\n\n                const elSummaryWidth = document.getElementById(\"summary-width\");\n                if (elSummaryWidth) elSummaryWidth.textContent = dimText;\n                \n                const elVisDims = document.getElementById(\"vis-dims\");\n                if (elVisDims) elVisDims.textContent = dimText;\n\n                \/\/ Render 2D Model\n                drawVisualizer();\n\n                \/\/ Safe Text Translations\n                document.querySelectorAll('[data-i18n]').forEach(el =\u003e {\n                    const key = el.getAttribute('data-i18n');\n                    if (t \u0026\u0026 t[key]) {\n                        el.textContent = t[key];\n                    }\n                });\n\n            } catch (e) {\n                console.error(\"UI Update Error:\", e);\n            }\n        };\n\n        \/\/ Language Buttons Event Listeners\n        document.querySelectorAll(\".lang-btn\").forEach(btn =\u003e {\n            btn.addEventListener('click', (e) =\u003e {\n                const selectedLang = e.currentTarget.getAttribute('data-lang');\n                if (currentLang !== selectedLang) {\n                    currentLang = selectedLang;\n                    document.querySelectorAll(\".lang-btn\").forEach(b =\u003e {\n                        b.classList.remove('scale-110', 'opacity-100', 'drop-shadow-md');\n                        b.classList.add('opacity-40');\n                    });\n                    e.currentTarget.classList.remove('opacity-40');\n                    e.currentTarget.classList.add('scale-110', 'opacity-100', 'drop-shadow-md');\n                    \n                    updateUI();\n                }\n            });\n        });\n\n        \/\/ WhatsApp Order Logic - Auto Translated message\n        document.getElementById(\"btn-whatsapp\").addEventListener(\"click\", () =\u003e {\n            let configText = \"\";\n            let total = 0;\n            const t = translations[currentLang];\n            \n            \/\/ Re-aggregate counts for Whatsapp\n            let waCounts = { three_seater: layoutState.three_seater, armchair: layoutState.armchair };\n\n            for (const key in waCounts) {\n                if (waCounts[key] \u003e 0) {\n                    const modName = t['mod_' + key] || t['mod_short_'+key] || t[key] || key; \n                    configText += `- ${waCounts[key]}x ${modName}\\n`;\n                    total += waCounts[key] * mods[key].price;\n                }\n            }\n            \n            const message = `${t.wa_greeting}\\n\\n${t.wa_config} (${document.getElementById(\"summary-width\").textContent}):\\n${configText}\\n${t.wa_total}: ${formatCurrency(total, currentLang)}\\n\\n${t.wa_help}`;\n            window.open(`https:\/\/wa.me\/905441443814?text=${encodeURIComponent(message)}`, '_blank');\n        });\n\n        \/\/ Initialize on Load\n        document.addEventListener(\"DOMContentLoaded\", () =\u003e {\n            syncCounts();\n            document.querySelectorAll(\".lang-btn\").forEach(b =\u003e {\n                if(b.getAttribute('data-lang') === currentLang) {\n                    b.classList.add('scale-110', 'opacity-100', 'drop-shadow-md');\n                    b.classList.remove('opacity-40');\n                } else {\n                    b.classList.add('opacity-40');\n                }\n            });\n            updateUI();\n            \n            let lastWinWidth = window.innerWidth;\n            window.addEventListener('resize', () =\u003e {\n                if (window.innerWidth !== lastWinWidth) {\n                    lastWinWidth = window.innerWidth;\n                    requestAnimationFrame(() =\u003e {\n                        updateScale();\n                    });\n                }\n            });\n        });\n    \u003c\/script\u003e\n\u003c\/body\u003e","brand":"Özüçler Mobilya","offers":[{"title":"Default Title","offer_id":48218077921512,"sku":null,"price":2625.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0713\/7640\/4712\/files\/729541A6-F702-40F2-B2A8-3074BFAF58D7.jpg?v=1776020612","url":"https:\/\/ozucler.com\/products\/berlin-sofa-set","provider":"Özüçler Mobilya","version":"1.0","type":"link"}