Demsan Dijital Renk Laboratuvar\u0131 (Tam Liste)<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;600;700&display=swap');\r\n body { font-family: 'Montserrat', sans-serif;}\r\n .color-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }\r\n .ral-swatch { height: 120px; width: 100%; border-radius: 12px 12px 0 0; position: relative; }\r\n \r\n \/* Custom Scrollbar for Filters *\/\r\n .filter-scroll::-webkit-scrollbar { height: 4px; }\r\n .filter-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\r\n \r\n .active-filter { background-color: #1e3a8a !important; color: white !important; border-color: #1e3a8a !important; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 min-h-screen py-8 px-4\">\r\n\r\n <div class=\"max-w-7xl mx-auto\">\r\n \r\n \r\n <div class=\"text-center mb-10\">\r\n <span class=\"bg-blue-100 text-blue-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide\">End\u00fcstriyel Standart<\/span>\r\n <h1 class=\"text-3xl md:text-5xl font-bold text-slate-900 mt-3 mb-4\">RAL Classic Renk K\u00fct\u00fcphanesi <\/h1>\r\n <p class=\"text-slate-600 max-w-2xl mx-auto text-lg\">200+ End\u00fcstriyel renk se\u00e7ene\u011fi elinizin alt\u0131nda. Rengi se\u00e7in, sistem \u00f6nerisini g\u00f6r\u00fcn ve <b>tek t\u0131kla<\/b> \u00fcretim emrini verin.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"sticky top-4 z-40 bg-white\/90 backdrop-blur-md p-4 rounded-2xl shadow-lg border border-slate-200 mb-8\">\r\n <div class=\"flex flex-col gap-4\">\r\n \r\n \r\n <div class=\"relative w-full\">\r\n <i class=\"fas fa-search absolute left-4 top-3.5 text-slate-400 text-lg\"><\/i>\r\n <input type=\"text\" id=\"searchInput\" onkeyup=\"globalSearch()\" placeholder=\"Renk ara... (\u00d6rn: 'Trafik K\u0131rm\u0131z\u0131s\u0131', '7035', 'Mavi'...)\" class=\"w-full pl-12 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-slate-700 font-medium transition placeholder-slate-400\">\r\n <div class=\"absolute right-3 top-2.5 bg-slate-200 text-slate-600 text-xs font-bold px-2 py-1 rounded\">CTRL+F Dostu<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex gap-2 overflow-x-auto pb-2 filter-scroll w-full\" id=\"filterContainer\">\r\n <button onclick=\"filterGroup('all')\" id=\"btn-all\" class=\"active-filter whitespace-nowrap px-5 py-2.5 bg-white border border-slate-300 hover:bg-slate-50 rounded-lg text-sm font-bold text-slate-600 transition shadow-sm\">\r\n T\u00dcM\u00dc\r\n <\/button>\r\n <button onclick=\"filterGroup('1')\" id=\"btn-1\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-yellow-200 hover:bg-yellow-50 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-yellow-400\"><\/span> 1000 Sar\u0131lar\r\n <\/button>\r\n <button onclick=\"filterGroup('2')\" id=\"btn-2\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-orange-200 hover:bg-orange-50 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-orange-500\"><\/span> 2000 Turuncular\r\n <\/button>\r\n <button onclick=\"filterGroup('3')\" id=\"btn-3\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-red-200 hover:bg-red-50 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-red-600\"><\/span> 3000 K\u0131rm\u0131z\u0131lar\r\n <\/button>\r\n <button onclick=\"filterGroup('4')\" id=\"btn-4\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-purple-200 hover:bg-purple-50 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-purple-600\"><\/span> 4000 Morlar\r\n <\/button>\r\n <button onclick=\"filterGroup('5')\" id=\"btn-5\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-blue-200 hover:bg-blue-50 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-blue-600\"><\/span> 5000 Maviler\r\n <\/button>\r\n <button onclick=\"filterGroup('6')\" id=\"btn-6\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-green-200 hover:bg-green-50 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-green-600\"><\/span> 6000 Ye\u015filler\r\n <\/button>\r\n <button onclick=\"filterGroup('7')\" id=\"btn-7\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-gray-200 hover:bg-gray-100 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-gray-500\"><\/span> 7000 Griler\r\n <\/button>\r\n <button onclick=\"filterGroup('8')\" id=\"btn-8\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-yellow-900 hover:bg-stone-100 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-yellow-900\"><\/span> 8000 Kahveler\r\n <\/button>\r\n <button onclick=\"filterGroup('9')\" id=\"btn-9\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-slate-400 hover:bg-slate-100 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-black\"><\/span> 9000 Siyah\/Beyaz\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6\" id=\"colorGrid\">\r\n \r\n <\/div>\r\n\r\n \r\n <div id=\"noResults\" class=\"hidden text-center py-20\">\r\n <div class=\"bg-gray-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4\">\r\n <i class=\"fas fa-search text-3xl text-gray-400\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold text-gray-700\">Arad\u0131\u011f\u0131n\u0131z renk bulunamad\u0131.<\/h3>\r\n <p class=\"text-gray-500 mt-2\">Farkl\u0131 bir terim deneyin veya bize foto\u011fraf g\u00f6nderin.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"mt-16 rounded-3xl p-8 md:p-12 text-white flex flex-col md:flex-row items-center justify-between shadow-2xl relative overflow-hidden\">\r\n <div class=\"absolute -top-24 -right-24 bg-white\/5 rounded-full w-96 h-96 blur-3xl\"><\/div>\r\n \r\n <div class=\"relative z-10 mb-8 md:mb-0 max-w-2xl\">\r\n <div class=\"flex items-center gap-3 mb-4\">\r\n <span class=\"bg-green-500 text-xs font-bold px-2 py-1 rounded text-white\">\u00d6ZEL \u00dcRET\u0130M<\/span>\r\n <span class=\"bg-blue-600 text-xs font-bold px-2 py-1 rounded text-white\">LABORATUVAR<\/span>\r\n <\/div>\r\n <h2 class=\"text-2xl font-bold mb-3\">Arad\u0131\u011f\u0131n\u0131z Renk Bu Listede Yok Mu?<\/h2>\r\n <p class=\"text-slate-600 max-w-2xl mx-auto text-lg\">Endi\u015felenmeyin. Axalta spektrofotometre teknolojisiyle, elinizdeki numunenin veya foto\u011fraf\u0131n rengini analiz ediyor, %100 ayn\u0131s\u0131n\u0131 \u00fcretiyoruz.<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative z-10 flex flex-col sm:flex-row gap-4 w-full md:w-auto\">\r\n <a href=\"https:\/\/wa.me\/905320000000\" target=\"_blank\" class=\"bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-xl transition flex items-center justify-center gap-3 shadow-lg transform hover:-translate-y-1\">\r\n <i class=\"fab fa-whatsapp text-2xl\"><\/i> \r\n <div class=\"text-left\">\r\n <span class=\"block text-xs opacity-90\">Foto\u011fraf \u00c7ek G\u00f6nder<\/span>\r\n <span class=\"block text-sm\">WHATSAPP HATTI<\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div id=\"actionModal\" class=\"hidden fixed inset-0 bg-black\/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm\">\r\n <div class=\"bg-white rounded-2xl max-w-lg w-full p-0 relative shadow-2xl overflow-hidden transform transition-all scale-95 opacity-0\" id=\"modalContent\">\r\n \r\n \r\n <div id=\"modalColorPreview\" class=\"h-32 w-full relative flex items-end p-6\">\r\n <button onclick=\"closeModal()\" class=\"absolute top-4 right-4 bg-white\/20 hover:bg-white\/40 text-white p-2 rounded-full backdrop-blur-md transition\">\r\n <i class=\"fas fa-times text-lg w-6 h-6 flex items-center justify-center\"><\/i>\r\n <\/button>\r\n <div class=\"bg-white\/90 backdrop-blur-sm px-4 py-2 rounded-lg shadow-lg\">\r\n <h3 class=\"text-3xl font-bold text-gray-900\" id=\"modalTitle\">RAL XXXX<\/h3>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"p-8\">\r\n <div class=\"flex items-center justify-between mb-6\">\r\n <div>\r\n <p class=\"text-gray-500 text-xs font-bold uppercase tracking-wider\">RENK ADI<\/p>\r\n <p class=\"text-xl font-semibold text-gray-800\" id=\"modalName\">Renk Ad\u0131<\/p>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <p class=\"text-gray-500 text-xs font-bold uppercase tracking-wider\">HEX KODU<\/p>\r\n <p class=\"font-mono text-gray-600 bg-gray-100 px-2 py-1 rounded\" id=\"modalHex\">#000000<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-4\">\r\n <p class=\"text-gray-700 font-medium border-b pb-2\">Bu rengi hangi sistemde \u00fcretelim?<\/p>\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\r\n <button class=\"border-2 border-slate-100 hover:border-blue-500 hover:bg-blue-50 p-3 rounded-xl text-left transition group\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"bg-white p-2 rounded-lg shadow-sm text-blue-600\"><i class=\"fas fa-spray-can\"><\/i><\/div>\r\n <div>\r\n <span class=\"block text-xs text-gray-500 font-bold uppercase\">Sprey Boya<\/span>\r\n <span class=\"text-sm font-bold text-gray-800\">400ml Kutu<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/button>\r\n <button class=\"border-2 border-slate-100 hover:border-blue-500 hover:bg-blue-50 p-3 rounded-xl text-left transition group\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"bg-white p-2 rounded-lg shadow-sm text-blue-600\"><i class=\"fas fa-industry\"><\/i><\/div>\r\n <div>\r\n <span class=\"block text-xs text-gray-500 font-bold uppercase\">Sanayi Boyas\u0131<\/span>\r\n <span class=\"text-sm font-bold text-gray-800\">Epoksi \/ Rapid<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/button>\r\n <button class=\"border-2 border-slate-100 hover:border-blue-500 hover:bg-blue-50 p-3 rounded-xl text-left transition group\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"bg-white p-2 rounded-lg shadow-sm text-blue-600\"><i class=\"fas fa-car\"><\/i><\/div>\r\n <div>\r\n <span class=\"block text-xs text-gray-500 font-bold uppercase\">Oto Boyas\u0131<\/span>\r\n <span class=\"text-sm font-bold text-gray-800\">Akrilik 2K<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/button>\r\n <button class=\"border-2 border-slate-100 hover:border-blue-500 hover:bg-blue-50 p-3 rounded-xl text-left transition group\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"bg-white p-2 rounded-lg shadow-sm text-blue-600\"><i class=\"fas fa-paint-roller\"><\/i><\/div>\r\n <div>\r\n <span class=\"block text-xs text-gray-500 font-bold uppercase\">\u0130n\u015faat\/Dekor<\/span>\r\n <span class=\"text-sm font-bold text-gray-800\">Sentetik\/Su Bazl\u0131<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"bg-yellow-50 p-4 rounded-xl border border-yellow-100 mt-4 flex items-start gap-3\">\r\n <i class=\"fas fa-lightbulb text-yellow-500 mt-1\"><\/i>\r\n <p class=\"text-sm text-yellow-800\">\r\n <b>\u0130pucu:<\/b> Telefonla arad\u0131\u011f\u0131n\u0131zda <span id=\"codeSpan\" class=\"font-black bg-yellow-200 px-1 rounded\"><\/span> kodunu iletmeniz yeterlidir. 15 dakikada haz\u0131rlan\u0131r.\r\n <\/p>\r\n <\/div>\r\n\r\n <a href=\"#\" id=\"callBtn\" class=\"block w-full bg-blue-600 hover:bg-blue-700 text-white text-center font-bold py-4 rounded-xl shadow-lg shadow-blue-200 transition transform hover:-translate-y-1 mt-2 flex items-center justify-center gap-2\">\r\n <i class=\"fas fa-phone-alt\"><\/i> HEMEN ARA & S\u0130PAR\u0130\u015e VER\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ FULL RAL CLASSIC DATASET (213 Colors)\r\n const allRalColors = [\r\n \/\/ 1000 Yellows\r\n {c:\"RAL 1000\",n:\"Ye\u015fil Bej\",h:\"#CCC58F\"},{c:\"RAL 1001\",n:\"Bej\",h:\"#D1BC8A\"},{c:\"RAL 1002\",n:\"Kum Sar\u0131s\u0131\",h:\"#D2B773\"},\r\n {c:\"RAL 1003\",n:\"Sinyal Sar\u0131s\u0131\",h:\"#F7BA0B\"},{c:\"RAL 1004\",n:\"Alt\u0131n Sar\u0131s\u0131\",h:\"#E2B007\"},{c:\"RAL 1005\",n:\"Bal Sar\u0131s\u0131\",h:\"#C89F04\"},\r\n {c:\"RAL 1006\",n:\"M\u0131s\u0131r Sar\u0131s\u0131\",h:\"#E1A100\"},{c:\"RAL 1007\",n:\"Nergis Sar\u0131s\u0131\",h:\"#E79600\"},{c:\"RAL 1011\",n:\"Kahverengi Bej\",h:\"#AF8D51\"},\r\n {c:\"RAL 1012\",n:\"Limon Sar\u0131s\u0131\",h:\"#DDAF27\"},{c:\"RAL 1013\",n:\"\u0130nci Beyaz\u0131\",h:\"#E3D9C6\"},{c:\"RAL 1014\",n:\"Fildi\u015fi\",h:\"#DDC49A\"},\r\n {c:\"RAL 1015\",n:\"A\u00e7\u0131k Fildi\u015fi\",h:\"#E6D2B5\"},{c:\"RAL 1016\",n:\"K\u00fck\u00fcrt Sar\u0131s\u0131\",h:\"#EDFF21\"},{c:\"RAL 1017\",n:\"Safran Sar\u0131s\u0131\",h:\"#F5D033\"},\r\n {c:\"RAL 1018\",n:\"\u00c7inko Sar\u0131s\u0131 (JCB)\",h:\"#F8F32B\"},{c:\"RAL 1019\",n:\"Gri Bej\",h:\"#9E9764\"},{c:\"RAL 1020\",n:\"Zeytin Sar\u0131s\u0131\",h:\"#999950\"},\r\n {c:\"RAL 1021\",n:\"Kolza Sar\u0131s\u0131\",h:\"#F3DA0B\"},{c:\"RAL 1023\",n:\"Trafik Sar\u0131s\u0131\",h:\"#F7B500\"},{c:\"RAL 1024\",n:\"Toprak Sar\u0131s\u0131\",h:\"#BA8F4C\"},\r\n {c:\"RAL 1026\",n:\"Parlak Sar\u0131\",h:\"#FFFF00\"},{c:\"RAL 1027\",n:\"K\u00f6ri Sar\u0131s\u0131\",h:\"#A77F0E\"},{c:\"RAL 1028\",n:\"Kavun Sar\u0131s\u0131 (CAT)\",h:\"#FFAB00\"},\r\n {c:\"RAL 1032\",n:\"S\u00fcp\u00fcrge Sar\u0131s\u0131\",h:\"#D4A900\"},{c:\"RAL 1033\",n:\"Y\u0131ld\u0131z \u00c7i\u00e7e\u011fi Sar\u0131s\u0131\",h:\"#D49C00\"},{c:\"RAL 1034\",n:\"Pastel Sar\u0131\",h:\"#EB9C52\"},\r\n \r\n \/\/ 2000 Oranges\r\n {c:\"RAL 2000\",n:\"Sar\u0131 Turuncu\",h:\"#ED760E\"},{c:\"RAL 2001\",n:\"K\u0131rm\u0131z\u0131 Turuncu\",h:\"#BB4D00\"},{c:\"RAL 2002\",n:\"Kan K\u0131rm\u0131z\u0131s\u0131\",h:\"#C63927\"},\r\n {c:\"RAL 2003\",n:\"Pastel Turuncu\",h:\"#FA842B\"},{c:\"RAL 2004\",n:\"Saf Turuncu\",h:\"#E2580E\"},{c:\"RAL 2005\",n:\"Parlak Turuncu\",h:\"#FF2300\"},\r\n {c:\"RAL 2007\",n:\"Parlak A\u00e7\u0131k Turuncu\",h:\"#FFA421\"},{c:\"RAL 2008\",n:\"A\u00e7\u0131k K\u0131rm\u0131z\u0131 Turuncu\",h:\"#F3752C\"},{c:\"RAL 2009\",n:\"Trafik Turuncusu\",h:\"#E15501\"},\r\n {c:\"RAL 2010\",n:\"Sinyal Turuncusu\",h:\"#D4652F\"},{c:\"RAL 2011\",n:\"Derin Turuncu\",h:\"#EC7C25\"},{c:\"RAL 2012\",n:\"Somon Turuncusu\",h:\"#DB6A50\"},\r\n\r\n \/\/ 3000 Reds\r\n {c:\"RAL 3000\",n:\"Alev K\u0131rm\u0131z\u0131s\u0131\",h:\"#AF2B1E\"},{c:\"RAL 3001\",n:\"Sinyal K\u0131rm\u0131z\u0131s\u0131\",h:\"#A52019\"},{c:\"RAL 3002\",n:\"Karmen K\u0131rm\u0131z\u0131s\u0131\",h:\"#9B111E\"},\r\n {c:\"RAL 3003\",n:\"Yakut K\u0131rm\u0131z\u0131s\u0131\",h:\"#8B0000\"},{c:\"RAL 3004\",n:\"Mor K\u0131rm\u0131z\u0131\",h:\"#75151E\"},{c:\"RAL 3005\",n:\"\u015earap K\u0131rm\u0131z\u0131s\u0131\",h:\"#5E2129\"},\r\n {c:\"RAL 3007\",n:\"Siyah K\u0131rm\u0131z\u0131\",h:\"#412227\"},{c:\"RAL 3009\",n:\"Oksit K\u0131rm\u0131z\u0131\",h:\"#642424\"},{c:\"RAL 3011\",n:\"Kahverengi K\u0131rm\u0131z\u0131\",h:\"#781F19\"},\r\n {c:\"RAL 3012\",n:\"Bej K\u0131rm\u0131z\u0131\",h:\"#C1876B\"},{c:\"RAL 3013\",n:\"Domates K\u0131rm\u0131z\u0131s\u0131\",h:\"#9C322E\"},{c:\"RAL 3014\",n:\"Antik Pembe\",h:\"#D36E70\"},\r\n {c:\"RAL 3015\",n:\"A\u00e7\u0131k Pembe\",h:\"#EAA2A6\"},{c:\"RAL 3016\",n:\"Mercan K\u0131rm\u0131z\u0131s\u0131\",h:\"#AC4034\"},{c:\"RAL 3017\",n:\"G\u00fcl\",h:\"#D56C6F\"},\r\n {c:\"RAL 3018\",n:\"\u00c7ilek K\u0131rm\u0131z\u0131s\u0131\",h:\"#C53B4B\"},{c:\"RAL 3020\",n:\"Trafik K\u0131rm\u0131z\u0131s\u0131\",h:\"#CC0605\"},{c:\"RAL 3022\",n:\"Somon K\u0131rm\u0131z\u0131s\u0131\",h:\"#D95030\"},\r\n {c:\"RAL 3024\",n:\"Parlak K\u0131rm\u0131z\u0131\",h:\"#F80000\"},{c:\"RAL 3026\",n:\"Parlak A\u00e7\u0131k K\u0131rm\u0131z\u0131\",h:\"#FE0000\"},{c:\"RAL 3027\",n:\"Ahududu K\u0131rm\u0131z\u0131s\u0131\",h:\"#B42041\"},\r\n {c:\"RAL 3031\",n:\"Oryantal K\u0131rm\u0131z\u0131\",h:\"#AE2321\"},\r\n\r\n \/\/ 4000 Violets\r\n {c:\"RAL 4001\",n:\"K\u0131rm\u0131z\u0131 Lila\",h:\"#8A5A83\"},{c:\"RAL 4002\",n:\"K\u0131rm\u0131z\u0131 Mor\",h:\"#933D50\"},{c:\"RAL 4003\",n:\"Funda Moru\",h:\"#D15B8F\"},\r\n {c:\"RAL 4004\",n:\"Bordo Mor\",h:\"#691639\"},{c:\"RAL 4005\",n:\"Mavi Lila\",h:\"#83639D\"},{c:\"RAL 4006\",n:\"Trafik Moru\",h:\"#992572\"},\r\n {c:\"RAL 4007\",n:\"Mor Menek\u015fe\",h:\"#4A192C\"},{c:\"RAL 4008\",n:\"Sinyal Moru\",h:\"#903373\"},{c:\"RAL 4009\",n:\"Pastel Mor\",h:\"#A47D90\"},\r\n {c:\"RAL 4010\",n:\"Telemagenta\",h:\"#C63678\"},\r\n\r\n \/\/ 5000 Blues\r\n {c:\"RAL 5000\",n:\"Menek\u015fe Mavisi\",h:\"#354D73\"},{c:\"RAL 5001\",n:\"Ye\u015fil Mavi\",h:\"#1F3438\"},{c:\"RAL 5002\",n:\"Ultramarin Mavi\",h:\"#20214F\"},\r\n {c:\"RAL 5003\",n:\"Safir Mavisi\",h:\"#1D1E33\"},{c:\"RAL 5004\",n:\"Siyah Mavi\",h:\"#18171C\"},{c:\"RAL 5005\",n:\"Sinyal Mavisi\",h:\"#1E2460\"},\r\n {c:\"RAL 5007\",n:\"Parlak Mavi\",h:\"#3E5F8A\"},{c:\"RAL 5008\",n:\"Gri Mavi\",h:\"#26252D\"},{c:\"RAL 5009\",n:\"Az\u00fcr Mavisi\",h:\"#025669\"},\r\n {c:\"RAL 5010\",n:\"Gentian Mavisi\",h:\"#0E294B\"},{c:\"RAL 5011\",n:\"\u00c7elik Mavisi\",h:\"#231A24\"},{c:\"RAL 5012\",n:\"I\u015f\u0131k Mavisi\",h:\"#3B83BD\"},\r\n {c:\"RAL 5013\",n:\"Kobalt Mavisi\",h:\"#1E213D\"},{c:\"RAL 5014\",n:\"G\u00fcvercin Mavisi\",h:\"#606E8C\"},{c:\"RAL 5015\",n:\"G\u00f6ky\u00fcz\u00fc Mavisi\",h:\"#2271B3\"},\r\n {c:\"RAL 5017\",n:\"Trafik Mavisi\",h:\"#063971\"},{c:\"RAL 5018\",n:\"Turkuaz Mavi\",h:\"#3F888F\"},{c:\"RAL 5019\",n:\"Kapri Mavisi\",h:\"#1B5583\"},\r\n {c:\"RAL 5020\",n:\"Okyanus Mavisi\",h:\"#1D334A\"},{c:\"RAL 5021\",n:\"Su Mavisi\",h:\"#256D7B\"},{c:\"RAL 5022\",n:\"Gece Mavisi\",h:\"#252850\"},\r\n {c:\"RAL 5023\",n:\"Uzak Do\u011fu Mavisi\",h:\"#49678D\"},{c:\"RAL 5024\",n:\"Pastel Mavi\",h:\"#5D9B9B\"},\r\n\r\n \/\/ 6000 Greens\r\n {c:\"RAL 6000\",n:\"Patina Ye\u015fili\",h:\"#316650\"},{c:\"RAL 6001\",n:\"Z\u00fcmr\u00fct Ye\u015fili\",h:\"#287233\"},{c:\"RAL 6002\",n:\"Yaprak Ye\u015fili\",h:\"#2D572C\"},\r\n {c:\"RAL 6003\",n:\"Zeytin Ye\u015fili\",h:\"#424632\"},{c:\"RAL 6004\",n:\"Mavi Ye\u015fil\",h:\"#1F3A3D\"},{c:\"RAL 6005\",n:\"Yosun Ye\u015fili\",h:\"#2F4538\"},\r\n {c:\"RAL 6006\",n:\"Gri Zeytin\",h:\"#3E3B32\"},{c:\"RAL 6007\",n:\"\u015ei\u015fe Ye\u015fili\",h:\"#283424\"},{c:\"RAL 6008\",n:\"Kahverengi Ye\u015fil\",h:\"#35382E\"},\r\n {c:\"RAL 6009\",n:\"Ladin Ye\u015fili\",h:\"#26392F\"},{c:\"RAL 6010\",n:\"\u00c7imen Ye\u015fili\",h:\"#35682D\"},{c:\"RAL 6011\",n:\"Reseda Ye\u015fili\",h:\"#587246\"},\r\n {c:\"RAL 6012\",n:\"Siyah Ye\u015fil\",h:\"#2E392F\"},{c:\"RAL 6013\",n:\"Sazl\u0131k Ye\u015fili\",h:\"#7E8B52\"},{c:\"RAL 6014\",n:\"Sar\u0131 Zeytin\",h:\"#47402E\"},\r\n {c:\"RAL 6015\",n:\"Siyah Zeytin\",h:\"#3B3C36\"},{c:\"RAL 6016\",n:\"Turkuaz Ye\u015fili\",h:\"#1E5945\"},{c:\"RAL 6017\",n:\"May\u0131s Ye\u015fili\",h:\"#4C9141\"},\r\n {c:\"RAL 6018\",n:\"Sar\u0131 Ye\u015fil\",h:\"#57A639\"},{c:\"RAL 6019\",n:\"Pastel Ye\u015fil\",h:\"#BDECB6\"},{c:\"RAL 6020\",n:\"Krom Ye\u015fili\",h:\"#353F2E\"},\r\n {c:\"RAL 6021\",n:\"Soluk Ye\u015fil\",h:\"#89AC76\"},{c:\"RAL 6022\",n:\"Kahverengi Zeytin\",h:\"#3E3B32\"},{c:\"RAL 6024\",n:\"Trafik Ye\u015fili\",h:\"#308446\"},\r\n {c:\"RAL 6025\",n:\"E\u011frelti Otu Ye\u015fili\",h:\"#53753C\"},{c:\"RAL 6026\",n:\"Opal Ye\u015fili\",h:\"#005D52\"},{c:\"RAL 6027\",n:\"A\u00e7\u0131k Ye\u015fil\",h:\"#84C3BE\"},\r\n {c:\"RAL 6028\",n:\"\u00c7am Ye\u015fili\",h:\"#2C5545\"},{c:\"RAL 6029\",n:\"Nane Ye\u015fili\",h:\"#20603D\"},{c:\"RAL 6032\",n:\"Sinyal Ye\u015fili\",h:\"#317F43\"},\r\n {c:\"RAL 6033\",n:\"Turkuaz Nane\",h:\"#497E76\"},{c:\"RAL 6034\",n:\"Pastel Turkuaz\",h:\"#7FB5B5\"},\r\n\r\n \/\/ 7000 Greys\r\n {c:\"RAL 7000\",n:\"Sincap Grisi\",h:\"#78858B\"},{c:\"RAL 7001\",n:\"G\u00fcm\u00fc\u015f Gri\",h:\"#8A9597\"},{c:\"RAL 7002\",n:\"Zeytin Grisi\",h:\"#7E7B52\"},\r\n {c:\"RAL 7003\",n:\"Yosun Grisi\",h:\"#6C7059\"},{c:\"RAL 7004\",n:\"Sinyal Grisi\",h:\"#969992\"},{c:\"RAL 7005\",n:\"Fare Grisi\",h:\"#646B63\"},\r\n {c:\"RAL 7006\",n:\"Bej Gri\",h:\"#736B5E\"},{c:\"RAL 7008\",n:\"Haki Gri\",h:\"#725F3A\"},{c:\"RAL 7009\",n:\"Ye\u015fil Gri\",h:\"#4D5645\"},\r\n {c:\"RAL 7010\",n:\"Branda Grisi\",h:\"#4C514A\"},{c:\"RAL 7011\",n:\"Demir Grisi\",h:\"#434B4D\"},{c:\"RAL 7012\",n:\"Bazalt Grisi\",h:\"#4E5754\"},\r\n {c:\"RAL 7013\",n:\"Kahverengi Gri\",h:\"#464531\"},{c:\"RAL 7015\",n:\"Arduvaz Grisi\",h:\"#434750\"},{c:\"RAL 7016\",n:\"Antrasit Gri\",h:\"#383E42\"},\r\n {c:\"RAL 7021\",n:\"Siyah Gri\",h:\"#23282B\"},{c:\"RAL 7022\",n:\"Umbra Grisi\",h:\"#332F2C\"},{c:\"RAL 7023\",n:\"Beton Grisi\",h:\"#686C5E\"},\r\n {c:\"RAL 7024\",n:\"Grafit Grisi\",h:\"#474A51\"},{c:\"RAL 7026\",n:\"Granit Grisi\",h:\"#2F353B\"},{c:\"RAL 7030\",n:\"Ta\u015f Grisi\",h:\"#8B8C7A\"},\r\n {c:\"RAL 7031\",n:\"Mavi Gri\",h:\"#474B4E\"},{c:\"RAL 7032\",n:\"\u00c7ak\u0131l Grisi\",h:\"#B8B799\"},{c:\"RAL 7033\",n:\"\u00c7imento Grisi\",h:\"#7D8471\"},\r\n {c:\"RAL 7034\",n:\"Sar\u0131 Gri\",h:\"#8F8B66\"},{c:\"RAL 7035\",n:\"A\u00e7\u0131k Gri\",h:\"#D7D7D7\"},{c:\"RAL 7036\",n:\"Platin Gri\",h:\"#999999\"},\r\n {c:\"RAL 7037\",n:\"Toz Grisi\",h:\"#7D7F7D\"},{c:\"RAL 7038\",n:\"Agat Grisi\",h:\"#B0B0B0\"},{c:\"RAL 7039\",n:\"Kuvars Grisi\",h:\"#6C6960\"},\r\n {c:\"RAL 7040\",n:\"Pencere Grisi\",h:\"#9DA1AA\"},{c:\"RAL 7042\",n:\"Trafik Grisi A\",h:\"#8D948D\"},{c:\"RAL 7043\",n:\"Trafik Grisi B\",h:\"#4E5452\"},\r\n {c:\"RAL 7044\",n:\"\u0130pek Grisi\",h:\"#BDBDB2\"},{c:\"RAL 7045\",n:\"Telegri 1\",h:\"#909090\"},{c:\"RAL 7046\",n:\"Telegri 2\",h:\"#82898F\"},\r\n {c:\"RAL 7047\",n:\"Telegri 4\",h:\"#D0D0D0\"},\r\n\r\n \/\/ 8000 Browns\r\n {c:\"RAL 8000\",n:\"Ye\u015fil Kahverengi\",h:\"#826C34\"},{c:\"RAL 8001\",n:\"Ocre Kahverengi\",h:\"#955F20\"},{c:\"RAL 8002\",n:\"Sinyal Kahverengi\",h:\"#6C3B2A\"},\r\n {c:\"RAL 8003\",n:\"Kil Kahverengisi\",h:\"#734222\"},{c:\"RAL 8004\",n:\"Bak\u0131r Kahverengi\",h:\"#8E402A\"},{c:\"RAL 8007\",n:\"Geyik Kahverengisi\",h:\"#59351F\"},\r\n {c:\"RAL 8008\",n:\"Zeytin Kahverengi\",h:\"#6F4F28\"},{c:\"RAL 8011\",n:\"F\u0131nd\u0131k Kahverengisi\",h:\"#5B3A29\"},{c:\"RAL 8012\",n:\"K\u0131rm\u0131z\u0131 Kahverengi\",h:\"#592321\"},\r\n {c:\"RAL 8014\",n:\"Sepya Kahverengi\",h:\"#382C1E\"},{c:\"RAL 8015\",n:\"Kestane Kahverengi\",h:\"#633A34\"},{c:\"RAL 8016\",n:\"Maun Kahverengi\",h:\"#4C2F27\"},\r\n {c:\"RAL 8017\",n:\"\u00c7ikolata Kahverengi\",h:\"#45322E\"},{c:\"RAL 8019\",n:\"Gri Kahverengi\",h:\"#403A3A\"},{c:\"RAL 8022\",n:\"Siyah Kahverengi\",h:\"#212121\"},\r\n {c:\"RAL 8023\",n:\"Turuncu Kahverengi\",h:\"#A65E2E\"},{c:\"RAL 8024\",n:\"Bej Kahverengi\",h:\"#79553D\"},{c:\"RAL 8025\",n:\"Soluk Kahverengi\",h:\"#755C48\"},\r\n {c:\"RAL 8028\",n:\"Toprak Kahverengi\",h:\"#4E3B31\"},\r\n\r\n \/\/ 9000 White\/Black\/Alu\r\n {c:\"RAL 9001\",n:\"Krem\",h:\"#FDF4E3\"},{c:\"RAL 9002\",n:\"Gri Beyaz\",h:\"#E7EBDA\"},{c:\"RAL 9003\",n:\"Sinyal Beyaz\u0131\",h:\"#F4F4F4\"},\r\n {c:\"RAL 9004\",n:\"Sinyal Siyah\u0131\",h:\"#282828\"},{c:\"RAL 9005\",n:\"Simsiyah (Jet Black)\",h:\"#0A0A0A\"},{c:\"RAL 9006\",n:\"Beyaz Al\u00fcminyum\",h:\"#A5A5A5\"},\r\n {c:\"RAL 9007\",n:\"Gri Al\u00fcminyum\",h:\"#8F8F8F\"},{c:\"RAL 9010\",n:\"Saf Beyaz\",h:\"#FFFFFF\"},{c:\"RAL 9011\",n:\"Grafit Siyah\u0131\",h:\"#1C1C1C\"},\r\n {c:\"RAL 9016\",n:\"Trafik Beyaz\u0131\",h:\"#F6F6F6\"},{c:\"RAL 9017\",n:\"Trafik Siyah\u0131\",h:\"#1E1E1E\"},{c:\"RAL 9018\",n:\"Papir\u00fcs Beyaz\u0131\",h:\"#D7D7D7\"}\r\n ];\r\n\r\n const grid = document.getElementById('colorGrid');\r\n let currentFilter = 'all';\r\n\r\n function renderColors() {\r\n grid.innerHTML = '';\r\n let count = 0;\r\n const searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n\r\n allRalColors.forEach(color => {\r\n const groupChar = color.c.charAt(4); \/\/ \"RAL 1000\" -> '1'\r\n \r\n \/\/ Filter Logic\r\n const matchesGroup = (currentFilter === 'all') || (currentFilter === groupChar);\r\n const matchesSearch = color.c.toLowerCase().includes(searchTerm) || color.n.toLowerCase().includes(searchTerm);\r\n\r\n if (matchesGroup && matchesSearch) {\r\n count++;\r\n const card = document.createElement('div');\r\n card.className = 'color-card bg-white rounded-2xl shadow-sm border border-slate-100 cursor-pointer group overflow-hidden transition-all duration-300';\r\n card.onclick = () => openModal(color);\r\n \r\n \/\/ Contrast Text Calculation for Swatch\r\n const isDark = isDarkColor(color.h);\r\n \r\n card.innerHTML = `\r\n <div class=\"ral-swatch flex items-center justify-center group-hover:opacity-90 transition\" style=\"background-color: ${color.h};\">\r\n <i class=\"fas fa-eye-dropper text-2xl opacity-0 group-hover:opacity-100 transition duration-500 ${isDark ? 'text-white' : 'text-slate-800'}\" style=\"transform: translateY(10px);\"><\/i>\r\n <\/div>\r\n <div class=\"p-5\">\r\n <div class=\"flex justify-between items-center mb-1\">\r\n <h3 class=\"font-bold text-slate-800 text-xl tracking-tight\">${color.c}<\/h3>\r\n <div class=\"w-2 h-2 rounded-full\" style=\"background-color: ${color.h}\"><\/div>\r\n <\/div>\r\n <p class=\"text-slate-500 text-sm font-medium truncate\">${color.n}<\/p>\r\n \r\n <div class=\"mt-4 pt-3 border-t border-slate-100 flex justify-between items-center\">\r\n <span class=\"text-xs font-mono text-slate-400 bg-slate-50 px-2 py-1 rounded\">${color.h}<\/span>\r\n <span class=\"text-blue-600 text-xs font-bold flex items-center opacity-0 group-hover:opacity-100 transition-all -translate-x-2 group-hover:translate-x-0\">\r\n SE\u00c7 <i class=\"fas fa-chevron-right ml-1\"><\/i>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n `;\r\n grid.appendChild(card);\r\n }\r\n });\r\n\r\n \/\/ Show \"No Results\" state\r\n if (count === 0) {\r\n document.getElementById('noResults').classList.remove('hidden');\r\n } else {\r\n document.getElementById('noResults').classList.add('hidden');\r\n }\r\n }\r\n\r\n \/\/ --- Filtering Logic ---\r\n function filterGroup(group) {\r\n currentFilter = group;\r\n \r\n \/\/ UI: Update active buttons\r\n document.querySelectorAll('#filterContainer button').forEach(btn => {\r\n btn.classList.remove('active-filter');\r\n btn.classList.add('bg-white', 'text-slate-600');\r\n });\r\n \r\n const activeBtn = document.getElementById(`btn-${group}`);\r\n activeBtn.classList.add('active-filter');\r\n activeBtn.classList.remove('bg-white', 'text-slate-600');\r\n \r\n renderColors();\r\n }\r\n\r\n function globalSearch() {\r\n renderColors();\r\n }\r\n\r\n \/\/ --- Modal Logic ---\r\n const modal = document.getElementById('actionModal');\r\n const modalContent = document.getElementById('modalContent');\r\n \r\n function openModal(color) {\r\n document.getElementById('modalTitle').innerText = color.c;\r\n document.getElementById('modalName').innerText = color.n;\r\n document.getElementById('modalHex').innerText = color.h;\r\n document.getElementById('codeSpan').innerText = color.c;\r\n \r\n const preview = document.getElementById('modalColorPreview');\r\n preview.style.backgroundColor = color.h;\r\n \r\n \/\/ Adjust title color based on background luminance\r\n const isDark = isDarkColor(color.h);\r\n document.getElementById('modalTitle').style.color = isDark ? '#FFF' : '#1e293b';\r\n\r\n \/\/ Set Phone Link\r\n document.getElementById('callBtn').href = `tel:+902120000000`; \/\/ Replace with real number\r\n \r\n modal.classList.remove('hidden');\r\n \/\/ Small animation delay for smoothness\r\n setTimeout(() => {\r\n modalContent.classList.remove('scale-95', 'opacity-0');\r\n modalContent.classList.add('scale-100', 'opacity-100');\r\n }, 10);\r\n }\r\n\r\n function closeModal() {\r\n modalContent.classList.remove('scale-100', 'opacity-100');\r\n modalContent.classList.add('scale-95', 'opacity-0');\r\n setTimeout(() => {\r\n modal.classList.add('hidden');\r\n }, 200);\r\n }\r\n\r\n \/\/ --- Helper: Determine Text Contrast ---\r\n function isDarkColor(hex) {\r\n const c = hex.substring(1); \/\/ strip #\r\n const rgb = parseInt(c, 16); \/\/ convert rrggbb to decimal\r\n const r = (rgb >> 16) & 0xff; \/\/ extract red\r\n const g = (rgb >> 8) & 0xff; \/\/ extract green\r\n const b = (rgb >> 0) & 0xff; \/\/ extract blue\r\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; \/\/ per ITU-R BT.709\r\n return luma < 128;\r\n }\r\n\r\n \/\/ Close modal on click outside\r\n modal.addEventListener('click', (e) => {\r\n if (e.target === modal) closeModal();\r\n });\r\n\r\n \/\/ Initial Render\r\n renderColors();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t <\/div>\r\n <\/div>\r\n \t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Demsan Dijital Renk Laboratuvar\u0131 (Tam Liste) End\u00fcstriyel Standart RAL Classic Renk K\u00fct\u00fcphanesi 200+ End\u00fcstriyel renk se\u00e7ene\u011fi elinizin alt\u0131nda. Rengi se\u00e7in, sistem \u00f6nerisini g\u00f6r\u00fcn ve tek t\u0131kla \u00fcretim emrini verin. CTRL+F Dostu T\u00dcM\u00dc 1000 Sar\u0131lar 2000 Turuncular 3000 K\u0131rm\u0131z\u0131lar 4000 Morlar 5000 Maviler 6000 Ye\u015filler 7000 Griler 8000 Kahveler 9000 Siyah\/Beyaz Arad\u0131\u011f\u0131n\u0131z renk bulunamad\u0131. Farkl\u0131 bir […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20360","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/pages\/20360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/comments?post=20360"}],"version-history":[{"count":7,"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/pages\/20360\/revisions"}],"predecessor-version":[{"id":20368,"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/pages\/20360\/revisions\/20368"}],"wp:attachment":[{"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/media?parent=20360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\n \n

<\/div>

\r\n

\r\n \r\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Demsan Dijital Renk Laboratuvar\u0131 (Tam Liste)<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;600;700&display=swap');\r\n body { font-family: 'Montserrat', sans-serif;}\r\n .color-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }\r\n .ral-swatch { height: 120px; width: 100%; border-radius: 12px 12px 0 0; position: relative; }\r\n \r\n \/* Custom Scrollbar for Filters *\/\r\n .filter-scroll::-webkit-scrollbar { height: 4px; }\r\n .filter-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\r\n \r\n .active-filter { background-color: #1e3a8a !important; color: white !important; border-color: #1e3a8a !important; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 min-h-screen py-8 px-4\">\r\n\r\n <div class=\"max-w-7xl mx-auto\">\r\n \r\n \r\n <div class=\"text-center mb-10\">\r\n <span class=\"bg-blue-100 text-blue-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide\">End\u00fcstriyel Standart<\/span>\r\n <h1 class=\"text-3xl md:text-5xl font-bold text-slate-900 mt-3 mb-4\">RAL Classic Renk K\u00fct\u00fcphanesi <\/h1>\r\n <p class=\"text-slate-600 max-w-2xl mx-auto text-lg\">200+ End\u00fcstriyel renk se\u00e7ene\u011fi elinizin alt\u0131nda. Rengi se\u00e7in, sistem \u00f6nerisini g\u00f6r\u00fcn ve <b>tek t\u0131kla<\/b> \u00fcretim emrini verin.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"sticky top-4 z-40 bg-white\/90 backdrop-blur-md p-4 rounded-2xl shadow-lg border border-slate-200 mb-8\">\r\n <div class=\"flex flex-col gap-4\">\r\n \r\n \r\n <div class=\"relative w-full\">\r\n <i class=\"fas fa-search absolute left-4 top-3.5 text-slate-400 text-lg\"><\/i>\r\n <input type=\"text\" id=\"searchInput\" onkeyup=\"globalSearch()\" placeholder=\"Renk ara... (\u00d6rn: 'Trafik K\u0131rm\u0131z\u0131s\u0131', '7035', 'Mavi'...)\" class=\"w-full pl-12 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-slate-700 font-medium transition placeholder-slate-400\">\r\n <div class=\"absolute right-3 top-2.5 bg-slate-200 text-slate-600 text-xs font-bold px-2 py-1 rounded\">CTRL+F Dostu<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex gap-2 overflow-x-auto pb-2 filter-scroll w-full\" id=\"filterContainer\">\r\n <button onclick=\"filterGroup('all')\" id=\"btn-all\" class=\"active-filter whitespace-nowrap px-5 py-2.5 bg-white border border-slate-300 hover:bg-slate-50 rounded-lg text-sm font-bold text-slate-600 transition shadow-sm\">\r\n T\u00dcM\u00dc\r\n <\/button>\r\n <button onclick=\"filterGroup('1')\" id=\"btn-1\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-yellow-200 hover:bg-yellow-50 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-yellow-400\"><\/span> 1000 Sar\u0131lar\r\n <\/button>\r\n <button onclick=\"filterGroup('2')\" id=\"btn-2\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-orange-200 hover:bg-orange-50 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-orange-500\"><\/span> 2000 Turuncular\r\n <\/button>\r\n <button onclick=\"filterGroup('3')\" id=\"btn-3\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-red-200 hover:bg-red-50 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-red-600\"><\/span> 3000 K\u0131rm\u0131z\u0131lar\r\n <\/button>\r\n <button onclick=\"filterGroup('4')\" id=\"btn-4\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-purple-200 hover:bg-purple-50 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-purple-600\"><\/span> 4000 Morlar\r\n <\/button>\r\n <button onclick=\"filterGroup('5')\" id=\"btn-5\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-blue-200 hover:bg-blue-50 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-blue-600\"><\/span> 5000 Maviler\r\n <\/button>\r\n <button onclick=\"filterGroup('6')\" id=\"btn-6\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-green-200 hover:bg-green-50 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-green-600\"><\/span> 6000 Ye\u015filler\r\n <\/button>\r\n <button onclick=\"filterGroup('7')\" id=\"btn-7\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-gray-200 hover:bg-gray-100 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-gray-500\"><\/span> 7000 Griler\r\n <\/button>\r\n <button onclick=\"filterGroup('8')\" id=\"btn-8\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-yellow-900 hover:bg-stone-100 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-yellow-900\"><\/span> 8000 Kahveler\r\n <\/button>\r\n <button onclick=\"filterGroup('9')\" id=\"btn-9\" class=\"whitespace-nowrap px-4 py-2 bg-white border border-slate-400 hover:bg-slate-100 rounded-lg text-sm font-semibold text-slate-600 transition flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-black\"><\/span> 9000 Siyah\/Beyaz\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6\" id=\"colorGrid\">\r\n \r\n <\/div>\r\n\r\n \r\n <div id=\"noResults\" class=\"hidden text-center py-20\">\r\n <div class=\"bg-gray-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4\">\r\n <i class=\"fas fa-search text-3xl text-gray-400\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold text-gray-700\">Arad\u0131\u011f\u0131n\u0131z renk bulunamad\u0131.<\/h3>\r\n <p class=\"text-gray-500 mt-2\">Farkl\u0131 bir terim deneyin veya bize foto\u011fraf g\u00f6nderin.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"mt-16 rounded-3xl p-8 md:p-12 text-white flex flex-col md:flex-row items-center justify-between shadow-2xl relative overflow-hidden\">\r\n <div class=\"absolute -top-24 -right-24 bg-white\/5 rounded-full w-96 h-96 blur-3xl\"><\/div>\r\n \r\n <div class=\"relative z-10 mb-8 md:mb-0 max-w-2xl\">\r\n <div class=\"flex items-center gap-3 mb-4\">\r\n <span class=\"bg-green-500 text-xs font-bold px-2 py-1 rounded text-white\">\u00d6ZEL \u00dcRET\u0130M<\/span>\r\n <span class=\"bg-blue-600 text-xs font-bold px-2 py-1 rounded text-white\">LABORATUVAR<\/span>\r\n <\/div>\r\n <h2 class=\"text-2xl font-bold mb-3\">Arad\u0131\u011f\u0131n\u0131z Renk Bu Listede Yok Mu?<\/h2>\r\n <p class=\"text-slate-600 max-w-2xl mx-auto text-lg\">Endi\u015felenmeyin. Axalta spektrofotometre teknolojisiyle, elinizdeki numunenin veya foto\u011fraf\u0131n rengini analiz ediyor, %100 ayn\u0131s\u0131n\u0131 \u00fcretiyoruz.<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative z-10 flex flex-col sm:flex-row gap-4 w-full md:w-auto\">\r\n <a href=\"https:\/\/wa.me\/905320000000\" target=\"_blank\" class=\"bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-xl transition flex items-center justify-center gap-3 shadow-lg transform hover:-translate-y-1\">\r\n <i class=\"fab fa-whatsapp text-2xl\"><\/i> \r\n <div class=\"text-left\">\r\n <span class=\"block text-xs opacity-90\">Foto\u011fraf \u00c7ek G\u00f6nder<\/span>\r\n <span class=\"block text-sm\">WHATSAPP HATTI<\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div id=\"actionModal\" class=\"hidden fixed inset-0 bg-black\/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm\">\r\n <div class=\"bg-white rounded-2xl max-w-lg w-full p-0 relative shadow-2xl overflow-hidden transform transition-all scale-95 opacity-0\" id=\"modalContent\">\r\n \r\n \r\n <div id=\"modalColorPreview\" class=\"h-32 w-full relative flex items-end p-6\">\r\n <button onclick=\"closeModal()\" class=\"absolute top-4 right-4 bg-white\/20 hover:bg-white\/40 text-white p-2 rounded-full backdrop-blur-md transition\">\r\n <i class=\"fas fa-times text-lg w-6 h-6 flex items-center justify-center\"><\/i>\r\n <\/button>\r\n <div class=\"bg-white\/90 backdrop-blur-sm px-4 py-2 rounded-lg shadow-lg\">\r\n <h3 class=\"text-3xl font-bold text-gray-900\" id=\"modalTitle\">RAL XXXX<\/h3>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"p-8\">\r\n <div class=\"flex items-center justify-between mb-6\">\r\n <div>\r\n <p class=\"text-gray-500 text-xs font-bold uppercase tracking-wider\">RENK ADI<\/p>\r\n <p class=\"text-xl font-semibold text-gray-800\" id=\"modalName\">Renk Ad\u0131<\/p>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <p class=\"text-gray-500 text-xs font-bold uppercase tracking-wider\">HEX KODU<\/p>\r\n <p class=\"font-mono text-gray-600 bg-gray-100 px-2 py-1 rounded\" id=\"modalHex\">#000000<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-4\">\r\n <p class=\"text-gray-700 font-medium border-b pb-2\">Bu rengi hangi sistemde \u00fcretelim?<\/p>\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\r\n <button class=\"border-2 border-slate-100 hover:border-blue-500 hover:bg-blue-50 p-3 rounded-xl text-left transition group\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"bg-white p-2 rounded-lg shadow-sm text-blue-600\"><i class=\"fas fa-spray-can\"><\/i><\/div>\r\n <div>\r\n <span class=\"block text-xs text-gray-500 font-bold uppercase\">Sprey Boya<\/span>\r\n <span class=\"text-sm font-bold text-gray-800\">400ml Kutu<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/button>\r\n <button class=\"border-2 border-slate-100 hover:border-blue-500 hover:bg-blue-50 p-3 rounded-xl text-left transition group\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"bg-white p-2 rounded-lg shadow-sm text-blue-600\"><i class=\"fas fa-industry\"><\/i><\/div>\r\n <div>\r\n <span class=\"block text-xs text-gray-500 font-bold uppercase\">Sanayi Boyas\u0131<\/span>\r\n <span class=\"text-sm font-bold text-gray-800\">Epoksi \/ Rapid<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/button>\r\n <button class=\"border-2 border-slate-100 hover:border-blue-500 hover:bg-blue-50 p-3 rounded-xl text-left transition group\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"bg-white p-2 rounded-lg shadow-sm text-blue-600\"><i class=\"fas fa-car\"><\/i><\/div>\r\n <div>\r\n <span class=\"block text-xs text-gray-500 font-bold uppercase\">Oto Boyas\u0131<\/span>\r\n <span class=\"text-sm font-bold text-gray-800\">Akrilik 2K<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/button>\r\n <button class=\"border-2 border-slate-100 hover:border-blue-500 hover:bg-blue-50 p-3 rounded-xl text-left transition group\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"bg-white p-2 rounded-lg shadow-sm text-blue-600\"><i class=\"fas fa-paint-roller\"><\/i><\/div>\r\n <div>\r\n <span class=\"block text-xs text-gray-500 font-bold uppercase\">\u0130n\u015faat\/Dekor<\/span>\r\n <span class=\"text-sm font-bold text-gray-800\">Sentetik\/Su Bazl\u0131<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"bg-yellow-50 p-4 rounded-xl border border-yellow-100 mt-4 flex items-start gap-3\">\r\n <i class=\"fas fa-lightbulb text-yellow-500 mt-1\"><\/i>\r\n <p class=\"text-sm text-yellow-800\">\r\n <b>\u0130pucu:<\/b> Telefonla arad\u0131\u011f\u0131n\u0131zda <span id=\"codeSpan\" class=\"font-black bg-yellow-200 px-1 rounded\"><\/span> kodunu iletmeniz yeterlidir. 15 dakikada haz\u0131rlan\u0131r.\r\n <\/p>\r\n <\/div>\r\n\r\n <a href=\"#\" id=\"callBtn\" class=\"block w-full bg-blue-600 hover:bg-blue-700 text-white text-center font-bold py-4 rounded-xl shadow-lg shadow-blue-200 transition transform hover:-translate-y-1 mt-2 flex items-center justify-center gap-2\">\r\n <i class=\"fas fa-phone-alt\"><\/i> HEMEN ARA & S\u0130PAR\u0130\u015e VER\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ FULL RAL CLASSIC DATASET (213 Colors)\r\n const allRalColors = [\r\n \/\/ 1000 Yellows\r\n {c:\"RAL 1000\",n:\"Ye\u015fil Bej\",h:\"#CCC58F\"},{c:\"RAL 1001\",n:\"Bej\",h:\"#D1BC8A\"},{c:\"RAL 1002\",n:\"Kum Sar\u0131s\u0131\",h:\"#D2B773\"},\r\n {c:\"RAL 1003\",n:\"Sinyal Sar\u0131s\u0131\",h:\"#F7BA0B\"},{c:\"RAL 1004\",n:\"Alt\u0131n Sar\u0131s\u0131\",h:\"#E2B007\"},{c:\"RAL 1005\",n:\"Bal Sar\u0131s\u0131\",h:\"#C89F04\"},\r\n {c:\"RAL 1006\",n:\"M\u0131s\u0131r Sar\u0131s\u0131\",h:\"#E1A100\"},{c:\"RAL 1007\",n:\"Nergis Sar\u0131s\u0131\",h:\"#E79600\"},{c:\"RAL 1011\",n:\"Kahverengi Bej\",h:\"#AF8D51\"},\r\n {c:\"RAL 1012\",n:\"Limon Sar\u0131s\u0131\",h:\"#DDAF27\"},{c:\"RAL 1013\",n:\"\u0130nci Beyaz\u0131\",h:\"#E3D9C6\"},{c:\"RAL 1014\",n:\"Fildi\u015fi\",h:\"#DDC49A\"},\r\n {c:\"RAL 1015\",n:\"A\u00e7\u0131k Fildi\u015fi\",h:\"#E6D2B5\"},{c:\"RAL 1016\",n:\"K\u00fck\u00fcrt Sar\u0131s\u0131\",h:\"#EDFF21\"},{c:\"RAL 1017\",n:\"Safran Sar\u0131s\u0131\",h:\"#F5D033\"},\r\n {c:\"RAL 1018\",n:\"\u00c7inko Sar\u0131s\u0131 (JCB)\",h:\"#F8F32B\"},{c:\"RAL 1019\",n:\"Gri Bej\",h:\"#9E9764\"},{c:\"RAL 1020\",n:\"Zeytin Sar\u0131s\u0131\",h:\"#999950\"},\r\n {c:\"RAL 1021\",n:\"Kolza Sar\u0131s\u0131\",h:\"#F3DA0B\"},{c:\"RAL 1023\",n:\"Trafik Sar\u0131s\u0131\",h:\"#F7B500\"},{c:\"RAL 1024\",n:\"Toprak Sar\u0131s\u0131\",h:\"#BA8F4C\"},\r\n {c:\"RAL 1026\",n:\"Parlak Sar\u0131\",h:\"#FFFF00\"},{c:\"RAL 1027\",n:\"K\u00f6ri Sar\u0131s\u0131\",h:\"#A77F0E\"},{c:\"RAL 1028\",n:\"Kavun Sar\u0131s\u0131 (CAT)\",h:\"#FFAB00\"},\r\n {c:\"RAL 1032\",n:\"S\u00fcp\u00fcrge Sar\u0131s\u0131\",h:\"#D4A900\"},{c:\"RAL 1033\",n:\"Y\u0131ld\u0131z \u00c7i\u00e7e\u011fi Sar\u0131s\u0131\",h:\"#D49C00\"},{c:\"RAL 1034\",n:\"Pastel Sar\u0131\",h:\"#EB9C52\"},\r\n \r\n \/\/ 2000 Oranges\r\n {c:\"RAL 2000\",n:\"Sar\u0131 Turuncu\",h:\"#ED760E\"},{c:\"RAL 2001\",n:\"K\u0131rm\u0131z\u0131 Turuncu\",h:\"#BB4D00\"},{c:\"RAL 2002\",n:\"Kan K\u0131rm\u0131z\u0131s\u0131\",h:\"#C63927\"},\r\n {c:\"RAL 2003\",n:\"Pastel Turuncu\",h:\"#FA842B\"},{c:\"RAL 2004\",n:\"Saf Turuncu\",h:\"#E2580E\"},{c:\"RAL 2005\",n:\"Parlak Turuncu\",h:\"#FF2300\"},\r\n {c:\"RAL 2007\",n:\"Parlak A\u00e7\u0131k Turuncu\",h:\"#FFA421\"},{c:\"RAL 2008\",n:\"A\u00e7\u0131k K\u0131rm\u0131z\u0131 Turuncu\",h:\"#F3752C\"},{c:\"RAL 2009\",n:\"Trafik Turuncusu\",h:\"#E15501\"},\r\n {c:\"RAL 2010\",n:\"Sinyal Turuncusu\",h:\"#D4652F\"},{c:\"RAL 2011\",n:\"Derin Turuncu\",h:\"#EC7C25\"},{c:\"RAL 2012\",n:\"Somon Turuncusu\",h:\"#DB6A50\"},\r\n\r\n \/\/ 3000 Reds\r\n {c:\"RAL 3000\",n:\"Alev K\u0131rm\u0131z\u0131s\u0131\",h:\"#AF2B1E\"},{c:\"RAL 3001\",n:\"Sinyal K\u0131rm\u0131z\u0131s\u0131\",h:\"#A52019\"},{c:\"RAL 3002\",n:\"Karmen K\u0131rm\u0131z\u0131s\u0131\",h:\"#9B111E\"},\r\n {c:\"RAL 3003\",n:\"Yakut K\u0131rm\u0131z\u0131s\u0131\",h:\"#8B0000\"},{c:\"RAL 3004\",n:\"Mor K\u0131rm\u0131z\u0131\",h:\"#75151E\"},{c:\"RAL 3005\",n:\"\u015earap K\u0131rm\u0131z\u0131s\u0131\",h:\"#5E2129\"},\r\n {c:\"RAL 3007\",n:\"Siyah K\u0131rm\u0131z\u0131\",h:\"#412227\"},{c:\"RAL 3009\",n:\"Oksit K\u0131rm\u0131z\u0131\",h:\"#642424\"},{c:\"RAL 3011\",n:\"Kahverengi K\u0131rm\u0131z\u0131\",h:\"#781F19\"},\r\n {c:\"RAL 3012\",n:\"Bej K\u0131rm\u0131z\u0131\",h:\"#C1876B\"},{c:\"RAL 3013\",n:\"Domates K\u0131rm\u0131z\u0131s\u0131\",h:\"#9C322E\"},{c:\"RAL 3014\",n:\"Antik Pembe\",h:\"#D36E70\"},\r\n {c:\"RAL 3015\",n:\"A\u00e7\u0131k Pembe\",h:\"#EAA2A6\"},{c:\"RAL 3016\",n:\"Mercan K\u0131rm\u0131z\u0131s\u0131\",h:\"#AC4034\"},{c:\"RAL 3017\",n:\"G\u00fcl\",h:\"#D56C6F\"},\r\n {c:\"RAL 3018\",n:\"\u00c7ilek K\u0131rm\u0131z\u0131s\u0131\",h:\"#C53B4B\"},{c:\"RAL 3020\",n:\"Trafik K\u0131rm\u0131z\u0131s\u0131\",h:\"#CC0605\"},{c:\"RAL 3022\",n:\"Somon K\u0131rm\u0131z\u0131s\u0131\",h:\"#D95030\"},\r\n {c:\"RAL 3024\",n:\"Parlak K\u0131rm\u0131z\u0131\",h:\"#F80000\"},{c:\"RAL 3026\",n:\"Parlak A\u00e7\u0131k K\u0131rm\u0131z\u0131\",h:\"#FE0000\"},{c:\"RAL 3027\",n:\"Ahududu K\u0131rm\u0131z\u0131s\u0131\",h:\"#B42041\"},\r\n {c:\"RAL 3031\",n:\"Oryantal K\u0131rm\u0131z\u0131\",h:\"#AE2321\"},\r\n\r\n \/\/ 4000 Violets\r\n {c:\"RAL 4001\",n:\"K\u0131rm\u0131z\u0131 Lila\",h:\"#8A5A83\"},{c:\"RAL 4002\",n:\"K\u0131rm\u0131z\u0131 Mor\",h:\"#933D50\"},{c:\"RAL 4003\",n:\"Funda Moru\",h:\"#D15B8F\"},\r\n {c:\"RAL 4004\",n:\"Bordo Mor\",h:\"#691639\"},{c:\"RAL 4005\",n:\"Mavi Lila\",h:\"#83639D\"},{c:\"RAL 4006\",n:\"Trafik Moru\",h:\"#992572\"},\r\n {c:\"RAL 4007\",n:\"Mor Menek\u015fe\",h:\"#4A192C\"},{c:\"RAL 4008\",n:\"Sinyal Moru\",h:\"#903373\"},{c:\"RAL 4009\",n:\"Pastel Mor\",h:\"#A47D90\"},\r\n {c:\"RAL 4010\",n:\"Telemagenta\",h:\"#C63678\"},\r\n\r\n \/\/ 5000 Blues\r\n {c:\"RAL 5000\",n:\"Menek\u015fe Mavisi\",h:\"#354D73\"},{c:\"RAL 5001\",n:\"Ye\u015fil Mavi\",h:\"#1F3438\"},{c:\"RAL 5002\",n:\"Ultramarin Mavi\",h:\"#20214F\"},\r\n {c:\"RAL 5003\",n:\"Safir Mavisi\",h:\"#1D1E33\"},{c:\"RAL 5004\",n:\"Siyah Mavi\",h:\"#18171C\"},{c:\"RAL 5005\",n:\"Sinyal Mavisi\",h:\"#1E2460\"},\r\n {c:\"RAL 5007\",n:\"Parlak Mavi\",h:\"#3E5F8A\"},{c:\"RAL 5008\",n:\"Gri Mavi\",h:\"#26252D\"},{c:\"RAL 5009\",n:\"Az\u00fcr Mavisi\",h:\"#025669\"},\r\n {c:\"RAL 5010\",n:\"Gentian Mavisi\",h:\"#0E294B\"},{c:\"RAL 5011\",n:\"\u00c7elik Mavisi\",h:\"#231A24\"},{c:\"RAL 5012\",n:\"I\u015f\u0131k Mavisi\",h:\"#3B83BD\"},\r\n {c:\"RAL 5013\",n:\"Kobalt Mavisi\",h:\"#1E213D\"},{c:\"RAL 5014\",n:\"G\u00fcvercin Mavisi\",h:\"#606E8C\"},{c:\"RAL 5015\",n:\"G\u00f6ky\u00fcz\u00fc Mavisi\",h:\"#2271B3\"},\r\n {c:\"RAL 5017\",n:\"Trafik Mavisi\",h:\"#063971\"},{c:\"RAL 5018\",n:\"Turkuaz Mavi\",h:\"#3F888F\"},{c:\"RAL 5019\",n:\"Kapri Mavisi\",h:\"#1B5583\"},\r\n {c:\"RAL 5020\",n:\"Okyanus Mavisi\",h:\"#1D334A\"},{c:\"RAL 5021\",n:\"Su Mavisi\",h:\"#256D7B\"},{c:\"RAL 5022\",n:\"Gece Mavisi\",h:\"#252850\"},\r\n {c:\"RAL 5023\",n:\"Uzak Do\u011fu Mavisi\",h:\"#49678D\"},{c:\"RAL 5024\",n:\"Pastel Mavi\",h:\"#5D9B9B\"},\r\n\r\n \/\/ 6000 Greens\r\n {c:\"RAL 6000\",n:\"Patina Ye\u015fili\",h:\"#316650\"},{c:\"RAL 6001\",n:\"Z\u00fcmr\u00fct Ye\u015fili\",h:\"#287233\"},{c:\"RAL 6002\",n:\"Yaprak Ye\u015fili\",h:\"#2D572C\"},\r\n {c:\"RAL 6003\",n:\"Zeytin Ye\u015fili\",h:\"#424632\"},{c:\"RAL 6004\",n:\"Mavi Ye\u015fil\",h:\"#1F3A3D\"},{c:\"RAL 6005\",n:\"Yosun Ye\u015fili\",h:\"#2F4538\"},\r\n {c:\"RAL 6006\",n:\"Gri Zeytin\",h:\"#3E3B32\"},{c:\"RAL 6007\",n:\"\u015ei\u015fe Ye\u015fili\",h:\"#283424\"},{c:\"RAL 6008\",n:\"Kahverengi Ye\u015fil\",h:\"#35382E\"},\r\n {c:\"RAL 6009\",n:\"Ladin Ye\u015fili\",h:\"#26392F\"},{c:\"RAL 6010\",n:\"\u00c7imen Ye\u015fili\",h:\"#35682D\"},{c:\"RAL 6011\",n:\"Reseda Ye\u015fili\",h:\"#587246\"},\r\n {c:\"RAL 6012\",n:\"Siyah Ye\u015fil\",h:\"#2E392F\"},{c:\"RAL 6013\",n:\"Sazl\u0131k Ye\u015fili\",h:\"#7E8B52\"},{c:\"RAL 6014\",n:\"Sar\u0131 Zeytin\",h:\"#47402E\"},\r\n {c:\"RAL 6015\",n:\"Siyah Zeytin\",h:\"#3B3C36\"},{c:\"RAL 6016\",n:\"Turkuaz Ye\u015fili\",h:\"#1E5945\"},{c:\"RAL 6017\",n:\"May\u0131s Ye\u015fili\",h:\"#4C9141\"},\r\n {c:\"RAL 6018\",n:\"Sar\u0131 Ye\u015fil\",h:\"#57A639\"},{c:\"RAL 6019\",n:\"Pastel Ye\u015fil\",h:\"#BDECB6\"},{c:\"RAL 6020\",n:\"Krom Ye\u015fili\",h:\"#353F2E\"},\r\n {c:\"RAL 6021\",n:\"Soluk Ye\u015fil\",h:\"#89AC76\"},{c:\"RAL 6022\",n:\"Kahverengi Zeytin\",h:\"#3E3B32\"},{c:\"RAL 6024\",n:\"Trafik Ye\u015fili\",h:\"#308446\"},\r\n {c:\"RAL 6025\",n:\"E\u011frelti Otu Ye\u015fili\",h:\"#53753C\"},{c:\"RAL 6026\",n:\"Opal Ye\u015fili\",h:\"#005D52\"},{c:\"RAL 6027\",n:\"A\u00e7\u0131k Ye\u015fil\",h:\"#84C3BE\"},\r\n {c:\"RAL 6028\",n:\"\u00c7am Ye\u015fili\",h:\"#2C5545\"},{c:\"RAL 6029\",n:\"Nane Ye\u015fili\",h:\"#20603D\"},{c:\"RAL 6032\",n:\"Sinyal Ye\u015fili\",h:\"#317F43\"},\r\n {c:\"RAL 6033\",n:\"Turkuaz Nane\",h:\"#497E76\"},{c:\"RAL 6034\",n:\"Pastel Turkuaz\",h:\"#7FB5B5\"},\r\n\r\n \/\/ 7000 Greys\r\n {c:\"RAL 7000\",n:\"Sincap Grisi\",h:\"#78858B\"},{c:\"RAL 7001\",n:\"G\u00fcm\u00fc\u015f Gri\",h:\"#8A9597\"},{c:\"RAL 7002\",n:\"Zeytin Grisi\",h:\"#7E7B52\"},\r\n {c:\"RAL 7003\",n:\"Yosun Grisi\",h:\"#6C7059\"},{c:\"RAL 7004\",n:\"Sinyal Grisi\",h:\"#969992\"},{c:\"RAL 7005\",n:\"Fare Grisi\",h:\"#646B63\"},\r\n {c:\"RAL 7006\",n:\"Bej Gri\",h:\"#736B5E\"},{c:\"RAL 7008\",n:\"Haki Gri\",h:\"#725F3A\"},{c:\"RAL 7009\",n:\"Ye\u015fil Gri\",h:\"#4D5645\"},\r\n {c:\"RAL 7010\",n:\"Branda Grisi\",h:\"#4C514A\"},{c:\"RAL 7011\",n:\"Demir Grisi\",h:\"#434B4D\"},{c:\"RAL 7012\",n:\"Bazalt Grisi\",h:\"#4E5754\"},\r\n {c:\"RAL 7013\",n:\"Kahverengi Gri\",h:\"#464531\"},{c:\"RAL 7015\",n:\"Arduvaz Grisi\",h:\"#434750\"},{c:\"RAL 7016\",n:\"Antrasit Gri\",h:\"#383E42\"},\r\n {c:\"RAL 7021\",n:\"Siyah Gri\",h:\"#23282B\"},{c:\"RAL 7022\",n:\"Umbra Grisi\",h:\"#332F2C\"},{c:\"RAL 7023\",n:\"Beton Grisi\",h:\"#686C5E\"},\r\n {c:\"RAL 7024\",n:\"Grafit Grisi\",h:\"#474A51\"},{c:\"RAL 7026\",n:\"Granit Grisi\",h:\"#2F353B\"},{c:\"RAL 7030\",n:\"Ta\u015f Grisi\",h:\"#8B8C7A\"},\r\n {c:\"RAL 7031\",n:\"Mavi Gri\",h:\"#474B4E\"},{c:\"RAL 7032\",n:\"\u00c7ak\u0131l Grisi\",h:\"#B8B799\"},{c:\"RAL 7033\",n:\"\u00c7imento Grisi\",h:\"#7D8471\"},\r\n {c:\"RAL 7034\",n:\"Sar\u0131 Gri\",h:\"#8F8B66\"},{c:\"RAL 7035\",n:\"A\u00e7\u0131k Gri\",h:\"#D7D7D7\"},{c:\"RAL 7036\",n:\"Platin Gri\",h:\"#999999\"},\r\n {c:\"RAL 7037\",n:\"Toz Grisi\",h:\"#7D7F7D\"},{c:\"RAL 7038\",n:\"Agat Grisi\",h:\"#B0B0B0\"},{c:\"RAL 7039\",n:\"Kuvars Grisi\",h:\"#6C6960\"},\r\n {c:\"RAL 7040\",n:\"Pencere Grisi\",h:\"#9DA1AA\"},{c:\"RAL 7042\",n:\"Trafik Grisi A\",h:\"#8D948D\"},{c:\"RAL 7043\",n:\"Trafik Grisi B\",h:\"#4E5452\"},\r\n {c:\"RAL 7044\",n:\"\u0130pek Grisi\",h:\"#BDBDB2\"},{c:\"RAL 7045\",n:\"Telegri 1\",h:\"#909090\"},{c:\"RAL 7046\",n:\"Telegri 2\",h:\"#82898F\"},\r\n {c:\"RAL 7047\",n:\"Telegri 4\",h:\"#D0D0D0\"},\r\n\r\n \/\/ 8000 Browns\r\n {c:\"RAL 8000\",n:\"Ye\u015fil Kahverengi\",h:\"#826C34\"},{c:\"RAL 8001\",n:\"Ocre Kahverengi\",h:\"#955F20\"},{c:\"RAL 8002\",n:\"Sinyal Kahverengi\",h:\"#6C3B2A\"},\r\n {c:\"RAL 8003\",n:\"Kil Kahverengisi\",h:\"#734222\"},{c:\"RAL 8004\",n:\"Bak\u0131r Kahverengi\",h:\"#8E402A\"},{c:\"RAL 8007\",n:\"Geyik Kahverengisi\",h:\"#59351F\"},\r\n {c:\"RAL 8008\",n:\"Zeytin Kahverengi\",h:\"#6F4F28\"},{c:\"RAL 8011\",n:\"F\u0131nd\u0131k Kahverengisi\",h:\"#5B3A29\"},{c:\"RAL 8012\",n:\"K\u0131rm\u0131z\u0131 Kahverengi\",h:\"#592321\"},\r\n {c:\"RAL 8014\",n:\"Sepya Kahverengi\",h:\"#382C1E\"},{c:\"RAL 8015\",n:\"Kestane Kahverengi\",h:\"#633A34\"},{c:\"RAL 8016\",n:\"Maun Kahverengi\",h:\"#4C2F27\"},\r\n {c:\"RAL 8017\",n:\"\u00c7ikolata Kahverengi\",h:\"#45322E\"},{c:\"RAL 8019\",n:\"Gri Kahverengi\",h:\"#403A3A\"},{c:\"RAL 8022\",n:\"Siyah Kahverengi\",h:\"#212121\"},\r\n {c:\"RAL 8023\",n:\"Turuncu Kahverengi\",h:\"#A65E2E\"},{c:\"RAL 8024\",n:\"Bej Kahverengi\",h:\"#79553D\"},{c:\"RAL 8025\",n:\"Soluk Kahverengi\",h:\"#755C48\"},\r\n {c:\"RAL 8028\",n:\"Toprak Kahverengi\",h:\"#4E3B31\"},\r\n\r\n \/\/ 9000 White\/Black\/Alu\r\n {c:\"RAL 9001\",n:\"Krem\",h:\"#FDF4E3\"},{c:\"RAL 9002\",n:\"Gri Beyaz\",h:\"#E7EBDA\"},{c:\"RAL 9003\",n:\"Sinyal Beyaz\u0131\",h:\"#F4F4F4\"},\r\n {c:\"RAL 9004\",n:\"Sinyal Siyah\u0131\",h:\"#282828\"},{c:\"RAL 9005\",n:\"Simsiyah (Jet Black)\",h:\"#0A0A0A\"},{c:\"RAL 9006\",n:\"Beyaz Al\u00fcminyum\",h:\"#A5A5A5\"},\r\n {c:\"RAL 9007\",n:\"Gri Al\u00fcminyum\",h:\"#8F8F8F\"},{c:\"RAL 9010\",n:\"Saf Beyaz\",h:\"#FFFFFF\"},{c:\"RAL 9011\",n:\"Grafit Siyah\u0131\",h:\"#1C1C1C\"},\r\n {c:\"RAL 9016\",n:\"Trafik Beyaz\u0131\",h:\"#F6F6F6\"},{c:\"RAL 9017\",n:\"Trafik Siyah\u0131\",h:\"#1E1E1E\"},{c:\"RAL 9018\",n:\"Papir\u00fcs Beyaz\u0131\",h:\"#D7D7D7\"}\r\n ];\r\n\r\n const grid = document.getElementById('colorGrid');\r\n let currentFilter = 'all';\r\n\r\n function renderColors() {\r\n grid.innerHTML = '';\r\n let count = 0;\r\n const searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n\r\n allRalColors.forEach(color => {\r\n const groupChar = color.c.charAt(4); \/\/ \"RAL 1000\" -> '1'\r\n \r\n \/\/ Filter Logic\r\n const matchesGroup = (currentFilter === 'all') || (currentFilter === groupChar);\r\n const matchesSearch = color.c.toLowerCase().includes(searchTerm) || color.n.toLowerCase().includes(searchTerm);\r\n\r\n if (matchesGroup && matchesSearch) {\r\n count++;\r\n const card = document.createElement('div');\r\n card.className = 'color-card bg-white rounded-2xl shadow-sm border border-slate-100 cursor-pointer group overflow-hidden transition-all duration-300';\r\n card.onclick = () => openModal(color);\r\n \r\n \/\/ Contrast Text Calculation for Swatch\r\n const isDark = isDarkColor(color.h);\r\n \r\n card.innerHTML = `\r\n <div class=\"ral-swatch flex items-center justify-center group-hover:opacity-90 transition\" style=\"background-color: ${color.h};\">\r\n <i class=\"fas fa-eye-dropper text-2xl opacity-0 group-hover:opacity-100 transition duration-500 ${isDark ? 'text-white' : 'text-slate-800'}\" style=\"transform: translateY(10px);\"><\/i>\r\n <\/div>\r\n <div class=\"p-5\">\r\n <div class=\"flex justify-between items-center mb-1\">\r\n <h3 class=\"font-bold text-slate-800 text-xl tracking-tight\">${color.c}<\/h3>\r\n <div class=\"w-2 h-2 rounded-full\" style=\"background-color: ${color.h}\"><\/div>\r\n <\/div>\r\n <p class=\"text-slate-500 text-sm font-medium truncate\">${color.n}<\/p>\r\n \r\n <div class=\"mt-4 pt-3 border-t border-slate-100 flex justify-between items-center\">\r\n <span class=\"text-xs font-mono text-slate-400 bg-slate-50 px-2 py-1 rounded\">${color.h}<\/span>\r\n <span class=\"text-blue-600 text-xs font-bold flex items-center opacity-0 group-hover:opacity-100 transition-all -translate-x-2 group-hover:translate-x-0\">\r\n SE\u00c7 <i class=\"fas fa-chevron-right ml-1\"><\/i>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n `;\r\n grid.appendChild(card);\r\n }\r\n });\r\n\r\n \/\/ Show \"No Results\" state\r\n if (count === 0) {\r\n document.getElementById('noResults').classList.remove('hidden');\r\n } else {\r\n document.getElementById('noResults').classList.add('hidden');\r\n }\r\n }\r\n\r\n \/\/ --- Filtering Logic ---\r\n function filterGroup(group) {\r\n currentFilter = group;\r\n \r\n \/\/ UI: Update active buttons\r\n document.querySelectorAll('#filterContainer button').forEach(btn => {\r\n btn.classList.remove('active-filter');\r\n btn.classList.add('bg-white', 'text-slate-600');\r\n });\r\n \r\n const activeBtn = document.getElementById(`btn-${group}`);\r\n activeBtn.classList.add('active-filter');\r\n activeBtn.classList.remove('bg-white', 'text-slate-600');\r\n \r\n renderColors();\r\n }\r\n\r\n function globalSearch() {\r\n renderColors();\r\n }\r\n\r\n \/\/ --- Modal Logic ---\r\n const modal = document.getElementById('actionModal');\r\n const modalContent = document.getElementById('modalContent');\r\n \r\n function openModal(color) {\r\n document.getElementById('modalTitle').innerText = color.c;\r\n document.getElementById('modalName').innerText = color.n;\r\n document.getElementById('modalHex').innerText = color.h;\r\n document.getElementById('codeSpan').innerText = color.c;\r\n \r\n const preview = document.getElementById('modalColorPreview');\r\n preview.style.backgroundColor = color.h;\r\n \r\n \/\/ Adjust title color based on background luminance\r\n const isDark = isDarkColor(color.h);\r\n document.getElementById('modalTitle').style.color = isDark ? '#FFF' : '#1e293b';\r\n\r\n \/\/ Set Phone Link\r\n document.getElementById('callBtn').href = `tel:+902120000000`; \/\/ Replace with real number\r\n \r\n modal.classList.remove('hidden');\r\n \/\/ Small animation delay for smoothness\r\n setTimeout(() => {\r\n modalContent.classList.remove('scale-95', 'opacity-0');\r\n modalContent.classList.add('scale-100', 'opacity-100');\r\n }, 10);\r\n }\r\n\r\n function closeModal() {\r\n modalContent.classList.remove('scale-100', 'opacity-100');\r\n modalContent.classList.add('scale-95', 'opacity-0');\r\n setTimeout(() => {\r\n modal.classList.add('hidden');\r\n }, 200);\r\n }\r\n\r\n \/\/ --- Helper: Determine Text Contrast ---\r\n function isDarkColor(hex) {\r\n const c = hex.substring(1); \/\/ strip #\r\n const rgb = parseInt(c, 16); \/\/ convert rrggbb to decimal\r\n const r = (rgb >> 16) & 0xff; \/\/ extract red\r\n const g = (rgb >> 8) & 0xff; \/\/ extract green\r\n const b = (rgb >> 0) & 0xff; \/\/ extract blue\r\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; \/\/ per ITU-R BT.709\r\n return luma < 128;\r\n }\r\n\r\n \/\/ Close modal on click outside\r\n modal.addEventListener('click', (e) => {\r\n if (e.target === modal) closeModal();\r\n });\r\n\r\n \/\/ Initial Render\r\n renderColors();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t <\/div>\r\n <\/div>\r\n \t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Demsan Dijital Renk Laboratuvar\u0131 (Tam Liste) End\u00fcstriyel Standart RAL Classic Renk K\u00fct\u00fcphanesi 200+ End\u00fcstriyel renk se\u00e7ene\u011fi elinizin alt\u0131nda. Rengi se\u00e7in, sistem \u00f6nerisini g\u00f6r\u00fcn ve tek t\u0131kla \u00fcretim emrini verin. CTRL+F Dostu T\u00dcM\u00dc 1000 Sar\u0131lar 2000 Turuncular 3000 K\u0131rm\u0131z\u0131lar 4000 Morlar 5000 Maviler 6000 Ye\u015filler 7000 Griler 8000 Kahveler 9000 Siyah\/Beyaz Arad\u0131\u011f\u0131n\u0131z renk bulunamad\u0131. Farkl\u0131 bir […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20360","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/pages\/20360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/comments?post=20360"}],"version-history":[{"count":7,"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/pages\/20360\/revisions"}],"predecessor-version":[{"id":20368,"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/pages\/20360\/revisions\/20368"}],"wp:attachment":[{"href":"https:\/\/wpmentor.com.tr\/demo01\/wp-json\/wp\/v2\/media?parent=20360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}