{"id":34714,"date":"2026-09-28T11:25:14","date_gmt":"2026-09-28T08:25:14","guid":{"rendered":"https:\/\/melike.anatolmedia.com.tr\/?page_id=34714"},"modified":"2026-09-28T16:38:49","modified_gmt":"2026-09-28T13:38:49","slug":"dijital-kartela-ai-showroom","status":"publish","type":"page","link":"https:\/\/meliketekstil.com\/en\/dijital-kartela-ai-showroom\/","title":{"rendered":"Dijital Kartela &amp; AI Showroom"},"content":{"rendered":"        <style>\n            :root {\n                --melike-navy: #0f216d;\n                --melike-blue: #3cb4e6;\n                --melike-gray: #EBEBEB;\n            }\n            .yarn-ai-wrap {\n                font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;\n                max-width: 1260px;\n                margin: 20px auto;\n                background: #EBEBEB;\n                padding: 30px;\n                border-radius: 24px;\n                border: 1px solid #dcdcdc;\n                box-shadow: 0 12px 34px rgba(15, 33, 109, 0.07);\n                color: #0f216d;\n                box-sizing: border-box;\n            }\n            .yarn-ai-wrap *, .yarn-ai-wrap *::before, .yarn-ai-wrap *::after {\n                box-sizing: border-box;\n            }\n            .yarn-ai-header {\n                text-align: center;\n                margin-bottom: 28px;\n            }\n            .yarn-ai-title {\n                font-size: 24px;\n                font-weight: 800;\n                color: #0f216d;\n                text-transform: uppercase;\n                letter-spacing: 1px;\n                border-bottom: 4px solid #3cb4e6;\n                display: inline-block;\n                padding-bottom: 7px;\n                margin: 0;\n            }\n            .yarn-ai-grid {\n                display: grid;\n                grid-template-columns: 7fr 5fr;\n                gap: 24px;\n                align-items: stretch;\n            }\n            @media (max-width: 991px) {\n                .yarn-ai-grid {\n                    grid-template-columns: 1fr;\n                }\n            }\n            .yarn-glass-panel {\n                background: #ffffff;\n                border-radius: 20px;\n                padding: 22px;\n                border: 1px solid rgba(15, 33, 109, 0.08);\n                box-shadow: 0 8px 24px rgba(15, 33, 109, 0.04);\n                display: flex;\n                flex-direction: column;\n                justify-content: space-between;\n            }\n            .yarn-main-display {\n                width: 100%;\n                height: 410px;\n                border-radius: 14px;\n                overflow: hidden;\n                position: relative;\n                background: #EBEBEB;\n                border: 1px solid #dcdcdc;\n                cursor: crosshair;\n            }\n            #yarn-detail-view {\n                width: 100% !important;\n                height: 100% !important;\n                max-width: none !important;\n                object-fit: cover;\n                transition: transform 0.2s ease-out;\n                display: block;\n                margin: 0 !important;\n            }\n            .yarn-zoom-hint {\n                position: absolute;\n                bottom: 12px;\n                left: 12px;\n                background: rgba(15, 33, 109, 0.85);\n                backdrop-filter: blur(4px);\n                color: #ffffff;\n                font-size: 12px;\n                font-weight: 600;\n                padding: 7px 13px;\n                border-radius: 8px;\n                pointer-events: none;\n                display: inline-flex;\n                align-items: center;\n                gap: 6px;\n                z-index: 5;\n                line-height: 1;\n                border-left: 3px solid #3cb4e6;\n            }\n            .yarn-zoom-hint svg {\n                width: 14px !important;\n                height: 14px !important;\n                color: #3cb4e6;\n                flex-shrink: 0;\n            }\n            .yarn-info-bar {\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n                margin-top: 16px;\n                padding: 14px 18px;\n                background: #EBEBEB;\n                border-radius: 14px;\n                border: 1px solid #dcdcdc;\n                flex-wrap: wrap;\n                gap: 14px;\n            }\n            .yarn-meta-label {\n                font-size: 10px;\n                font-weight: 700;\n                color: #0f216d;\n                opacity: 0.7;\n                text-transform: uppercase;\n                letter-spacing: 0.8px;\n                display: block;\n                margin-bottom: 4px;\n                line-height: 1.2;\n            }\n            .yarn-selected-title {\n                font-size: 22px;\n                font-weight: 800;\n                color: #0f216d;\n                margin: 0;\n                line-height: 1.1;\n                text-transform: uppercase;\n            }\n            .yarn-tone-desc {\n                font-size: 11px;\n                font-weight: 700;\n                color: #3cb4e6;\n                display: block;\n                margin-top: 4px;\n            }\n            .yarn-color-controls {\n                display: flex;\n                align-items: center;\n                gap: 12px;\n            }\n            .yarn-control-box {\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n            }\n            .yarn-hex-badge {\n                height: 40px;\n                padding: 0 16px;\n                border-radius: 10px;\n                font-family: monospace;\n                font-weight: 700;\n                font-size: 14px;\n                min-width: 105px;\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                background: #0f216d;\n                color: #ffffff;\n                border: 1px solid rgba(15, 33, 109, 0.15);\n            }\n            .yarn-picker-input {\n                width: 44px;\n                height: 40px;\n                border-radius: 10px;\n                border: 2px solid #0f216d;\n                cursor: pointer;\n                padding: 2px;\n                background: #ffffff;\n                display: block;\n            }\n            .yarn-right-col {\n                display: flex;\n                flex-direction: column;\n                gap: 16px;\n            }\n            .yarn-search-input {\n                width: 100%;\n                padding: 11px 14px;\n                border: 1px solid #d0d5dd;\n                border-radius: 10px;\n                font-size: 13px;\n                font-family: inherit;\n                margin-bottom: 14px;\n                background: #EBEBEB;\n                color: #0f216d;\n                font-weight: 600;\n                transition: all 0.2s;\n            }\n            .yarn-search-input::placeholder {\n                color: rgba(15, 33, 109, 0.55);\n            }\n            .yarn-search-input:focus {\n                outline: none;\n                border-color: #3cb4e6;\n                background: #ffffff;\n                box-shadow: 0 0 0 3px rgba(60, 180, 230, 0.2);\n            }\n            .yarn-catalog-grid {\n                display: grid;\n                grid-template-columns: repeat(5, 1fr);\n                gap: 10px;\n                min-height: 310px;\n                align-content: start;\n            }\n            @media (max-width: 576px) {\n                .yarn-catalog-grid {\n                    grid-template-columns: repeat(3, 1fr);\n                }\n            }\n            .yarn-item-card {\n                cursor: pointer;\n                border-radius: 10px;\n                border: 2px solid #EBEBEB;\n                overflow: hidden;\n                background: #ffffff;\n                transition: all 0.2s ease;\n                display: flex;\n                flex-direction: column;\n            }\n            .yarn-item-card:hover {\n                transform: translateY(-2px);\n                border-color: #3cb4e6;\n            }\n            .yarn-item-card.active-yarn {\n                border-color: #0f216d;\n                box-shadow: 0 0 0 3px rgba(60, 180, 230, 0.35);\n            }\n            .yarn-item-card.active-yarn .yarn-item-code {\n                background: #0f216d;\n                color: #ffffff;\n            }\n            .yarn-item-card img.yarn-thumb {\n                width: 100% !important;\n                height: 72px !important;\n                object-fit: cover;\n                display: block;\n                margin: 0 !important;\n            }\n            .yarn-item-code {\n                font-size: 10px;\n                font-weight: 700;\n                text-align: center;\n                padding: 6px 2px;\n                color: #0f216d;\n                background: #EBEBEB;\n                border-top: 1px solid #e0e0e0;\n                line-height: 1.1;\n                transition: all 0.2s;\n            }\n            .yarn-pagination {\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n                margin-top: 14px;\n                padding-top: 14px;\n                border-top: 1px solid #EBEBEB;\n            }\n            .yarn-page-btn {\n                padding: 8px 15px;\n                border: 1px solid #0f216d;\n                border-radius: 8px;\n                background: #ffffff;\n                color: #0f216d;\n                font-size: 12px;\n                font-weight: 700;\n                cursor: pointer;\n                display: inline-flex;\n                align-items: center;\n                gap: 6px;\n                transition: all 0.2s;\n            }\n            .yarn-page-btn:hover {\n                background: #3cb4e6;\n                border-color: #3cb4e6;\n                color: #ffffff;\n            }\n            .yarn-page-info {\n                font-size: 11px;\n                font-weight: 800;\n                color: #0f216d;\n            }\n            .yarn-ai-btn {\n                width: 100%;\n                padding: 18px 22px;\n                border: none;\n                border-radius: 14px;\n                background: linear-gradient(135deg, #0f216d 0%, #3cb4e6 100%);\n                color: #ffffff;\n                font-size: 14px;\n                font-weight: 800;\n                text-transform: uppercase;\n                letter-spacing: 0.8px;\n                cursor: pointer;\n                box-shadow: 0 8px 22px rgba(15, 33, 109, 0.25);\n                transition: all 0.25s;\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                gap: 10px;\n            }\n            .yarn-ai-btn:hover {\n                background: linear-gradient(135deg, #3cb4e6 0%, #0f216d 100%);\n                transform: translateY(-2px);\n                box-shadow: 0 10px 26px rgba(60, 180, 230, 0.35);\n            }\n            .yarn-ai-btn svg {\n                width: 18px !important;\n                height: 18px !important;\n                flex-shrink: 0;\n            }\n            .yarn-ai-result {\n                margin-top: 24px;\n                display: none;\n            }\n            .yarn-ai-result.active {\n                display: block;\n            }\n            .yarn-ai-stage {\n                position: relative;\n                border-radius: 16px;\n                overflow: hidden;\n                min-height: 440px;\n                background: #EBEBEB;\n                border: 2px solid #EBEBEB;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n            }\n            .yarn-ai-loader {\n                position: absolute;\n                inset: 0;\n                background: rgba(255, 255, 255, 0.96);\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n                gap: 12px;\n                z-index: 10;\n                font-weight: 700;\n                color: #0f216d;\n                font-size: 14px;\n                padding: 20px;\n                text-align: center;\n            }\n            .yarn-spinner {\n                width: 40px;\n                height: 40px;\n                border: 4px solid #EBEBEB;\n                border-top-color: #0f216d;\n                border-right-color: #3cb4e6;\n                border-radius: 50%;\n                animation: yarnSpin 0.8s linear infinite;\n            }\n            @keyframes yarnSpin {\n                to { transform: rotate(360deg); }\n            }\n            #yarn-ai-img {\n                width: 100% !important;\n                height: auto !important;\n                display: none;\n                border-radius: 14px;\n            }\n            .yarn-disclaimer-bar {\n                margin-top: 16px;\n                padding: 14px 20px;\n                background: #EBEBEB;\n                border-left: 4px solid #3cb4e6;\n                border-radius: 12px;\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                flex-wrap: wrap;\n                gap: 12px;\n            }\n            .yarn-disclaimer-text {\n                display: flex;\n                align-items: center;\n                gap: 10px;\n                font-size: 12.5px;\n                color: #0f216d;\n                font-weight: 600;\n                line-height: 1.4;\n            }\n            .yarn-disclaimer-text svg {\n                width: 18px !important;\n                height: 18px !important;\n                color: #3cb4e6;\n                flex-shrink: 0;\n            }\n            .yarn-contact-link {\n                display: inline-flex;\n                align-items: center;\n                gap: 6px;\n                background: #0f216d;\n                color: #ffffff !important;\n                text-decoration: none !important;\n                font-size: 12px;\n                font-weight: 700;\n                padding: 10px 18px;\n                border-radius: 8px;\n                transition: all 0.2s;\n                white-space: nowrap;\n            }\n            .yarn-contact-link:hover {\n                background: #3cb4e6;\n                color: #ffffff !important;\n                transform: translateY(-1px);\n            }\n        <\/style>\n\n        <div class=\"yarn-ai-wrap\" id=\"melike-yarn-showroom\">\n            <div class=\"yarn-ai-header\">\n                <h2 class=\"yarn-ai-title\">D\u0130J\u0130TAL \u0130PL\u0130K KARTELASI &amp; SHOWROOM<\/h2>\n            <\/div>\n\n            <div class=\"yarn-ai-grid\">\n                <!-- SOL PANEL -->\n                <div class=\"yarn-glass-panel\">\n                    <div class=\"yarn-main-display\" id=\"yarn-zoom-box\">\n                        <img decoding=\"async\" id=\"yarn-detail-view\" src=\"https:\/\/meliketekstil.com\/wp-content\/plugins\/Melike%20Renk%20Kartelas\u0131\/iplik_proje\/MSP-1.jpg\" alt=\"MSP-1\" crossorigin=\"anonymous\" class=\"skip-lazy\" data-no-lazy=\"1\">\n                        <div class=\"yarn-zoom-hint\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"><\/line><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"><\/line><\/svg>\n                            <span>Dokuyu incelemek i\u00e7in fareyi gezdirin<\/span>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"yarn-info-bar\">\n                        <div>\n                            <span class=\"yarn-meta-label\">SE\u00c7\u0130LEN \u0130PL\u0130K NUMUNES\u0130<\/span>\n                            <h3 id=\"yarn-selected-name\" class=\"yarn-selected-title\">MSP-1<\/h3>\n                            <span id=\"yarn-tone-name\" class=\"yarn-tone-desc\">Renk analiz ediliyor...<\/span>\n                        <\/div>\n\n                        <div class=\"yarn-color-controls\">\n                            <div class=\"yarn-control-box\">\n                                <span class=\"yarn-meta-label\">RENK KODU<\/span>\n                                <div id=\"yarn-hex-box\" class=\"yarn-hex-badge\">#------<\/div>\n                            <\/div>\n                            <div class=\"yarn-control-box\" title=\"Rengi hassas ayarlamak i\u00e7in t\u0131klay\u0131n\">\n                                <span class=\"yarn-meta-label\">TON AYARI<\/span>\n                                <input type=\"color\" id=\"yarn-manual-picker\" class=\"yarn-picker-input\" value=\"#0f216d\">\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- SA\u011e PANEL -->\n                <div class=\"yarn-right-col\">\n                    <div class=\"yarn-glass-panel\" style=\"flex:1;\">\n                        <div>\n                            <input type=\"text\" id=\"yarn-search-box\" class=\"yarn-search-input\" placeholder=\"\u0130plik kodu ara (\u00d6rn: MSP-15)...\">\n                            <div id=\"yarn-catalog-grid\" class=\"yarn-catalog-grid\"><\/div>\n                        <\/div>\n\n                        <div class=\"yarn-pagination\">\n                            <button type=\"button\" id=\"yarn-prev-btn\" class=\"yarn-page-btn\">\n                                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\n                                <span>\u00d6nceki<\/span>\n                            <\/button>\n                            <span id=\"yarn-page-info\" class=\"yarn-page-info\">SAYFA 1<\/span>\n                            <button type=\"button\" id=\"yarn-next-btn\" class=\"yarn-page-btn\">\n                                <span>Sonraki<\/span>\n                                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n\n                    <button type=\"button\" id=\"yarn-generate-ai-btn\" class=\"yarn-ai-btn\">\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"><\/circle><polyline points=\"21 15 16 10 5 21\"><\/polyline><\/svg>\n                        <span>SE\u00c7\u0130LEN RENK \u0130LE MODEL\u0130 G\u00d6R\u00dcNT\u00dcLE<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <!-- ALT B\u00d6L\u00dcM: SAF SHOWROOM G\u00d6RSEL\u0130 -->\n            <div id=\"yarn-ai-section\" class=\"yarn-glass-panel yarn-ai-result\">\n                <span class=\"yarn-meta-label\" style=\"text-align:center; margin-bottom:12px; color:#0f216d; opacity:1; font-size:12px;\">D\u0130J\u0130TAL SHOWROOM & D\u00d6\u015eEME UYGULAMASI<\/span>\n                <div class=\"yarn-ai-stage\">\n                    <div id=\"yarn-ai-loader\" class=\"yarn-ai-loader\">\n                        <div class=\"yarn-spinner\"><\/div>\n                        <span id=\"yarn-loader-text\">Se\u00e7ilen iplik rengi mobilya modeline uygulan\u0131yor, l\u00fctfen bekleyin...<\/span>\n                    <\/div>\n                    <img decoding=\"async\" id=\"yarn-ai-img\" src=\"\" alt=\"\">\n                <\/div>\n                <p id=\"yarn-ai-desc\" style=\"text-align:center; font-size:13px; color:#0f216d; margin:12px 0 0 0; font-weight:700;\"><\/p>\n\n                <div class=\"yarn-disclaimer-bar\">\n                    <div class=\"yarn-disclaimer-text\">\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"><\/line><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"><\/line><\/svg>\n                        <span>Yapay zeka ile \u00fcretilmi\u015ftir. Tam sonu\u00e7lar ve ger\u00e7ek numune talepleriniz i\u00e7in ileti\u015fime ge\u00e7in.<\/span>\n                    <\/div>\n                    <a href=\"https:\/\/meliketekstil.com\/iletisim\/\" class=\"yarn-contact-link\">\n                        <span>\u0130leti\u015fime Ge\u00e7in<\/span>\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <script>\n        (function() {\n            const AJAX_URL = \"https:\\\/\\\/meliketekstil.com\\\/wp-admin\\\/admin-ajax.php\";\n            const NONCE    = \"04901572ec\";\n            const ALL_DATA = [{\"ad\":\"MSP-1\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-1.jpg\"},{\"ad\":\"MSP-2\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-2.jpg\"},{\"ad\":\"MSP-3\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-3.jpg\"},{\"ad\":\"MSP-4\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-4.jpg\"},{\"ad\":\"MSP-5\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-5.jpg\"},{\"ad\":\"MSP-6\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-6.jpg\"},{\"ad\":\"MSP-7\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-7.jpg\"},{\"ad\":\"MSP-8\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-8.jpg\"},{\"ad\":\"MSP-9\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-9.jpg\"},{\"ad\":\"MSP-10\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-10.jpg\"},{\"ad\":\"MSP-11\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-11.jpg\"},{\"ad\":\"MSP-12\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-12.jpg\"},{\"ad\":\"MSP-13\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-13.jpg\"},{\"ad\":\"MSP-14\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-14.jpg\"},{\"ad\":\"MSP-15\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-15.jpg\"},{\"ad\":\"MSP-16\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-16.jpg\"},{\"ad\":\"MSP-17\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-17.jpg\"},{\"ad\":\"MSP-18\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-18.jpg\"},{\"ad\":\"MSP-19\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-19.jpg\"},{\"ad\":\"MSP-020\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-020.jpg\"},{\"ad\":\"MSP-20\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-20.jpg\"},{\"ad\":\"MSP-21\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-21.jpg\"},{\"ad\":\"MSP-22\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-22.jpg\"},{\"ad\":\"MSP-23\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-23.jpg\"},{\"ad\":\"MSP-24\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-24.jpg\"},{\"ad\":\"MSP-25\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-25.jpg\"},{\"ad\":\"MSP-26\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-26.jpg\"},{\"ad\":\"MSP-027\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/msp-027.jpg\"},{\"ad\":\"MSP-27\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-27.jpg\"},{\"ad\":\"MSP-28\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-28.jpg\"},{\"ad\":\"MSP-29\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-29.jpg\"},{\"ad\":\"MSP-30\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-30.jpg\"},{\"ad\":\"MSP-31\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-31.jpg\"},{\"ad\":\"MSP-32\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-32.jpg\"},{\"ad\":\"MSP-33\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-33.jpg\"},{\"ad\":\"MSP-34\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-34.jpg\"},{\"ad\":\"MSP-35\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-35.jpg\"},{\"ad\":\"MSP-36\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-36.jpg\"},{\"ad\":\"MSP-37\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-37.jpg\"},{\"ad\":\"MSP-38\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-38.jpg\"},{\"ad\":\"MSP-39\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-39.jpg\"},{\"ad\":\"MSP-40\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-40.jpg\"},{\"ad\":\"MSP-41\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-41.jpg\"},{\"ad\":\"MSP-42\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-42.jpg\"},{\"ad\":\"MSP-43\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-43.jpg\"},{\"ad\":\"MSP-44\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-44.jpg\"},{\"ad\":\"MSP-45\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-45.jpg\"},{\"ad\":\"MSP-46\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-46.jpg\"},{\"ad\":\"MSP-47\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-47.jpg\"},{\"ad\":\"MSP-48\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-48.jpg\"},{\"ad\":\"MSP-49\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-49.jpg\"},{\"ad\":\"MSP-50\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-50.jpg\"},{\"ad\":\"MSP-51\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-51.jpg\"},{\"ad\":\"MSP-52\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-52.jpg\"},{\"ad\":\"MSP-53\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-53.jpg\"},{\"ad\":\"MSP-54\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-54.jpg\"},{\"ad\":\"MSP-55\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-55.jpg\"},{\"ad\":\"MSP-56\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-56.jpg\"},{\"ad\":\"MSP-57\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-57.jpg\"},{\"ad\":\"MSP-58\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-58.jpg\"},{\"ad\":\"MSP-59\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-59.jpg\"},{\"ad\":\"MSP-60\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-60.jpg\"},{\"ad\":\"MSP-61\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-61.jpg\"},{\"ad\":\"MSP-62\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-62.jpg\"},{\"ad\":\"MSP-63\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-63.jpg\"},{\"ad\":\"MSP-64\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-64.jpg\"},{\"ad\":\"MSP-65\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-65.jpg\"},{\"ad\":\"MSP-66\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-66.jpg\"},{\"ad\":\"MSP-67\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-67.jpg\"},{\"ad\":\"MSP-68\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-68.jpg\"},{\"ad\":\"MSP-69\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-69.jpg\"},{\"ad\":\"MSP-70\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-70.jpg\"},{\"ad\":\"MSP-71\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-71.jpg\"},{\"ad\":\"MSP-72\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-72.jpg\"},{\"ad\":\"MSP-73\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-73.jpg\"},{\"ad\":\"MSP-74\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-74.jpg\"},{\"ad\":\"MSP-75\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-75.jpg\"},{\"ad\":\"MSP-76\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-76.jpg\"},{\"ad\":\"MSP-77\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-77.jpg\"},{\"ad\":\"MSP-78\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-78.jpg\"},{\"ad\":\"MSP-79\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-79.jpg\"},{\"ad\":\"MSP-80\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-80.jpg\"},{\"ad\":\"MSP-81\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/msp-81.jpg\"},{\"ad\":\"MSP-82\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-82.jpg\"},{\"ad\":\"MSP-83\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-83.jpg\"},{\"ad\":\"MSP-84\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-84.jpg\"},{\"ad\":\"MSP-85\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-85.jpg\"},{\"ad\":\"MSP-86\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-86.jpg\"},{\"ad\":\"MSP-87\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-87.jpg\"},{\"ad\":\"MSP-88\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-88.jpg\"},{\"ad\":\"MSP-89\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-89.jpg\"},{\"ad\":\"MSP-90\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-90.jpg\"},{\"ad\":\"MSP-91\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-91.jpg\"},{\"ad\":\"MSP-92\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-92.jpg\"},{\"ad\":\"MSP-93\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-93.jpg\"},{\"ad\":\"MSP-94\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-94.jpg\"},{\"ad\":\"MSP-95\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/msp-95.jpg\"},{\"ad\":\"MSP-96\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-96.jpg\"},{\"ad\":\"MSP-97\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-97.jpg\"},{\"ad\":\"MSP-98\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-98.jpg\"},{\"ad\":\"MSP-99\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-99.jpg\"},{\"ad\":\"MSP-100\",\"dosya\":\"https:\\\/\\\/meliketekstil.com\\\/wp-content\\\/plugins\\\/Melike Renk Kartelas\\u0131\\\/iplik_proje\\\/MSP-100.jpg\"}];\n\n            let filteredData = ALL_DATA.slice();\n            let currentPage = 1;\n            const perPage = 15;\n            let selectedColor = \"#808080\";\n            let selectedRGB = [128, 128, 128];\n            let selectedName = ALL_DATA.length ? ALL_DATA[0].ad : \"MSP-1\";\n\n            const detailView = document.getElementById(\"yarn-detail-view\");\n            const zoomBox = document.getElementById(\"yarn-zoom-box\");\n            const nameEl = document.getElementById(\"yarn-selected-name\");\n            const toneEl = document.getElementById(\"yarn-tone-name\");\n            const hexBox = document.getElementById(\"yarn-hex-box\");\n            const manualPicker = document.getElementById(\"yarn-manual-picker\");\n            const catalogGrid = document.getElementById(\"yarn-catalog-grid\");\n            const pageInfo = document.getElementById(\"yarn-page-info\");\n            const searchBox = document.getElementById(\"yarn-search-box\");\n\n            function rgbToHsl(r, g, b) {\n                r \/= 255; g \/= 255; b \/= 255;\n                const max = Math.max(r, g, b), min = Math.min(r, g, b);\n                let h = 0, s = 0, l = (max + min) \/ 2;\n                if (max !== min) {\n                    const d = max - min;\n                    s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\n                    switch (max) {\n                        case r: h = (g - b) \/ d + (g < b ? 6 : 0); break;\n                        case g: h = (b - r) \/ d + 2; break;\n                        case b: h = (r - g) \/ d + 4; break;\n                    }\n                    h \/= 6;\n                }\n                return [h * 360, s * 100, l * 100];\n            }\n\n            function describeColorHSL(rgb) {\n                const [h, s, l] = rgbToHsl(rgb[0], rgb[1], rgb[2]);\n\n                if (l > 85 && s < 22) return { en: \"pure ivory cream white\", tr: \"K\u0131r\u0131k Beyaz \/ Ekru\" };\n                if (l < 14) return { en: \"matte jet black\", tr: \"Gece Siyah\u0131\" };\n                if (s < 12) {\n                    if (l > 68) return { en: \"light silver grey\", tr: \"A\u00e7\u0131k G\u00fcm\u00fc\u015f Gri\" };\n                    if (l > 40) return { en: \"medium neutral grey\", tr: \"Orta Gri\" };\n                    return { en: \"very dark charcoal anthracite grey\", tr: \"Antrasit \/ Koyu Gri\" };\n                }\n                if (s < 28 && h >= 18 && h <= 58) {\n                    if (l > 70) return { en: \"light warm sand beige\", tr: \"A\u00e7\u0131k Krem \/ Kum Beji\" };\n                    if (l > 48) return { en: \"medium warm greige taupe\", tr: \"A\u00e7\u0131k Vizon \/ Ta\u015f Rengi\" };\n                    if (l > 30) return { en: \"dark taupe mocha brown\", tr: \"Koyu Vizon \/ Mocha\" };\n                    return { en: \"very dark espresso chocolate brown\", tr: \"Koyu Kahve \/ Espresso\" };\n                }\n                if (h < 14 || h >= 335) {\n                    if (s < 45 && l > 36 && l < 75) return { en: \"dusty rose mauve pink\", tr: \"G\u00fcl Kurusu\" };\n                    if (l < 42) return { en: \"deep dark burgundy wine maroon red\", tr: \"Bordo\" };\n                    if (s > 45) return { en: \"rich crimson red\", tr: \"Mercan \/ K\u0131rm\u0131z\u0131\" };\n                    return { en: \"soft blush pastel pink\", tr: \"Pudra Pembesi\" };\n                }\n                if (h >= 14 && h < 38) {\n                    if (h < 25 && l < 42) return { en: \"deep dark burgundy maroon red-brown\", tr: \"Bordo \/ K\u0131z\u0131l Kahve\" };\n                    if (s > 45 && l > 45) return { en: \"terracotta burnt rust orange\", tr: \"Kiremit \/ Tar\u00e7\u0131n\" };\n                    if (l > 60) return { en: \"warm camel tan\", tr: \"A\u00e7\u0131k Taba \/ Camel\" };\n                    if (l > 34) return { en: \"rich walnut cinnamon brown\", tr: \"Taba \/ Ceviz Kahve\" };\n                    return { en: \"very dark espresso coffee brown\", tr: \"Koyu Kahve \/ Espresso\" };\n                }\n                if (h >= 38 && h < 66) {\n                    if (h >= 52) return { en: \"olive yellow chartreuse mustard\", tr: \"Ya\u011f Ye\u015fili \/ Hardal Sar\u0131s\u0131\" };\n                    return { en: \"warm mustard yellow gold\", tr: \"Hardal Sar\u0131s\u0131\" };\n                }\n                if (h >= 66 && h < 165) {\n                    if (h < 95) return { en: \"olive moss green\", tr: \"Zeytin Ye\u015fili \/ Haki\" };\n                    if (s < 32) return { en: \"soft sage green\", tr: \"Ada\u00e7ay\u0131 Ye\u015fili\" };\n                    if (l < 38) return { en: \"deep dark emerald forest green\", tr: \"Z\u00fcmr\u00fct Ye\u015fili\" };\n                    return { en: \"natural leaf green\", tr: \"Yaprak Ye\u015fili\" };\n                }\n                if (h >= 165 && h < 200) return { en: \"teal turquoise blue\", tr: \"Turkuaz \/ Petrol\" };\n                if (h >= 200 && h < 255) {\n                    if (l > 65) return { en: \"soft sky powder blue\", tr: \"Buz Mavisi\" };\n                    if (l < 35) return { en: \"very dark midnight navy blue\", tr: \"Lacivert\" };\n                    return { en: \"royal ocean blue\", tr: \"Okyanus Mavisi\" };\n                }\n                return { en: \"deep plum violet purple\", tr: \"Lila \/ M\u00fcrd\u00fcm\" };\n            }\n\n            function hexToRgb(hex) {\n                const clean = hex.replace(\"#\", \"\");\n                const num = parseInt(clean, 16);\n                return [(num >> 16) & 255, (num >> 8) & 255, num & 255];\n            }\n\n            zoomBox.addEventListener(\"mousemove\", function(e) {\n                const rect = zoomBox.getBoundingClientRect();\n                const x = ((e.clientX - rect.left) \/ rect.width) * 100;\n                const y = ((e.clientY - rect.top) \/ rect.height) * 100;\n                detailView.style.transformOrigin = x + \"% \" + y + \"%\";\n                detailView.style.transform = \"scale(2.4)\";\n            });\n\n            zoomBox.addEventListener(\"mouseleave\", function() {\n                detailView.style.transform = \"scale(1)\";\n                detailView.style.transformOrigin = \"center\";\n            });\n\n            function catchColor() {\n                const canvas = document.createElement(\"canvas\");\n                const ctx = canvas.getContext(\"2d\");\n                try {\n                    if (!detailView.naturalWidth) return;\n                    canvas.width = 120;\n                    canvas.height = 120;\n                    ctx.drawImage(detailView, 0, 0, 120, 120);\n\n                    const imgData = ctx.getImageData(20, 20, 80, 80).data;\n                    const samples = [];\n                    for (let i = 0; i < imgData.length; i += 4) {\n                        const r = imgData[i], g = imgData[i + 1], b = imgData[i + 2];\n                        const lum = 0.299 * r + 0.587 * g + 0.114 * b;\n                        samples.push({ r, g, b, lum });\n                    }\n                    samples.sort(function(a, b) { return a.lum - b.lum; });\n                    const startIdx = Math.floor(samples.length * 0.40);\n                    const endIdx = Math.floor(samples.length * 0.85);\n\n                    let rSum = 0, gSum = 0, bSum = 0, count = 0;\n                    for (let j = startIdx; j < endIdx; j++) {\n                        rSum += samples[j].r; gSum += samples[j].g; bSum += samples[j].b; count++;\n                    }\n                    const r = Math.round(rSum \/ count), g = Math.round(gSum \/ count), b = Math.round(bSum \/ count);\n                    selectedRGB = [r, g, b];\n                    selectedColor = \"#\" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n                    updateColorUI(selectedColor, selectedRGB);\n                } catch (e) {}\n            }\n\n            function updateColorUI(hex, rgb) {\n                hexBox.innerText = hex;\n                hexBox.style.backgroundColor = hex;\n                manualPicker.value = hex;\n                const brightness = (rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114);\n                hexBox.style.color = brightness > 145 ? \"#0f216d\" : \"#ffffff\";\n                const tone = describeColorHSL(rgb);\n                toneEl.innerText = \"Renk Grubu: \" + tone.tr;\n            }\n\n            manualPicker.addEventListener(\"input\", function(e) {\n                selectedColor = e.target.value.toUpperCase();\n                selectedRGB = hexToRgb(selectedColor);\n                updateColorUI(selectedColor, selectedRGB);\n            });\n\n            function renderCatalog() {\n                catalogGrid.innerHTML = \"\";\n                const totalPages = Math.max(1, Math.ceil(filteredData.length \/ perPage));\n                if (currentPage > totalPages) currentPage = totalPages;\n\n                const start = (currentPage - 1) * perPage;\n                const pageItems = filteredData.slice(start, start + perPage);\n\n                pageItems.forEach(function(item) {\n                    const card = document.createElement(\"div\");\n                    card.className = \"yarn-item-card\" + (item.ad === selectedName ? \" active-yarn\" : \"\");\n\n                    const img = document.createElement(\"img\");\n                    img.src = item.dosya;\n                    img.alt = item.ad;\n                    img.className = \"yarn-thumb skip-lazy\";\n                    img.setAttribute(\"data-no-lazy\", \"1\");\n\n                    const label = document.createElement(\"div\");\n                    label.className = \"yarn-item-code\";\n                    label.innerText = item.ad;\n\n                    card.appendChild(img);\n                    card.appendChild(label);\n\n                    card.addEventListener(\"click\", function() {\n                        selectedName = item.ad;\n                        nameEl.innerText = item.ad;\n                        detailView.src = item.dosya;\n                        detailView.onload = catchColor;\n                        if (detailView.complete) catchColor();\n                        renderCatalog();\n                    });\n\n                    catalogGrid.appendChild(card);\n                });\n\n                pageInfo.innerText = \"SAYFA \" + currentPage + \" \/ \" + totalPages + \" (\" + filteredData.length + \" Numune)\";\n            }\n\n            document.getElementById(\"yarn-prev-btn\").addEventListener(\"click\", function() {\n                if (currentPage > 1) { currentPage--; renderCatalog(); }\n            });\n\n            document.getElementById(\"yarn-next-btn\").addEventListener(\"click\", function() {\n                const totalPages = Math.ceil(filteredData.length \/ perPage);\n                if (currentPage < totalPages) { currentPage++; renderCatalog(); }\n            });\n\n            searchBox.addEventListener(\"input\", function(e) {\n                const q = e.target.value.trim().toUpperCase();\n                filteredData = ALL_DATA.filter(function(item) { return item.ad.indexOf(q) !== -1; });\n                currentPage = 1;\n                renderCatalog();\n            });\n\n            document.getElementById(\"yarn-generate-ai-btn\").addEventListener(\"click\", function() {\n                const aiSection = document.getElementById(\"yarn-ai-section\");\n                const aiImg = document.getElementById(\"yarn-ai-img\");\n                const aiLoader = document.getElementById(\"yarn-ai-loader\");\n                const loaderText = document.getElementById(\"yarn-loader-text\");\n                const aiDesc = document.getElementById(\"yarn-ai-desc\");\n\n                const tone = describeColorHSL(selectedRGB);\n\n                aiSection.classList.add(\"active\");\n                aiImg.style.display = \"none\";\n                aiLoader.style.display = \"flex\";\n                loaderText.innerText = selectedName + \" (\" + tone.tr + \") numunesi mobilya modeline uygulan\u0131yor...\";\n                aiDesc.innerText = \"\";\n                aiSection.scrollIntoView({ behavior: \"smooth\" });\n\n                const formData = new FormData();\n                formData.append(\"action\", \"melike_render_model\");\n                formData.append(\"nonce\", NONCE);\n                formData.append(\"yarn_name\", selectedName);\n                formData.append(\"hex_color\", selectedColor);\n                formData.append(\"tone_en\", tone.en);\n\n                fetch(AJAX_URL, {\n                    method: \"POST\",\n                    body: formData\n                })\n                .then(function(res) { return res.json(); })\n                .then(function(res) {\n                    if (res.success && res.data.image) {\n                        aiImg.onload = function() {\n                            aiLoader.style.display = \"none\";\n                            aiImg.style.display = \"block\";\n                            aiDesc.innerText = selectedName + \" (\" + tone.tr + \" \/ \" + selectedColor + \") d\u00f6\u015feme uygulamas\u0131.\";\n                        };\n                        aiImg.onerror = function() {\n                            aiLoader.style.display = \"none\";\n                            aiDesc.innerText = \"G\u00f6rsel y\u00fcklenemedi, l\u00fctfen tekrar deneyin.\";\n                        };\n                        aiImg.src = res.data.image;\n                    } else {\n                        aiLoader.style.display = \"none\";\n                        aiDesc.innerText = res.data && res.data.message ? res.data.message : \"G\u00f6rsel olu\u015fturulamad\u0131.\";\n                    }\n                })\n                .catch(function() {\n                    aiLoader.style.display = \"none\";\n                    aiDesc.innerText = \"Ba\u011flant\u0131 zaman a\u015f\u0131m\u0131na u\u011frad\u0131, l\u00fctfen tekrar t\u0131klay\u0131n.\";\n                });\n            });\n\n            detailView.onload = catchColor;\n            if (detailView.complete) catchColor();\n            renderCatalog();\n        })();\n        <\/script>\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-34714","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/meliketekstil.com\/en\/wp-json\/wp\/v2\/pages\/34714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meliketekstil.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/meliketekstil.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/meliketekstil.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meliketekstil.com\/en\/wp-json\/wp\/v2\/comments?post=34714"}],"version-history":[{"count":2,"href":"https:\/\/meliketekstil.com\/en\/wp-json\/wp\/v2\/pages\/34714\/revisions"}],"predecessor-version":[{"id":34723,"href":"https:\/\/meliketekstil.com\/en\/wp-json\/wp\/v2\/pages\/34714\/revisions\/34723"}],"wp:attachment":[{"href":"https:\/\/meliketekstil.com\/en\/wp-json\/wp\/v2\/media?parent=34714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}