{"id":3139,"date":"2026-01-07T12:16:59","date_gmt":"2026-01-07T09:16:59","guid":{"rendered":"https:\/\/www.letoon.com.tr\/eng\/?page_id=3139"},"modified":"2026-06-19T14:53:31","modified_gmt":"2026-06-19T11:53:31","slug":"3139-2","status":"publish","type":"page","link":"https:\/\/www.letoon.com.tr\/eng\/3139-2\/","title":{"rendered":"LETOON BLOG EN"},"content":{"rendered":"\n<!-- ============================================================================== -->\n<!-- =================== TEM\u0130ZLENM\u0130\u015e CSS (PANEL DOSTU) ============================ -->\n<!-- ============================================================================== -->\n<style>\n    \/* GENEL KAPLAYICI AYARLARI (Body yerine bunu kullan\u0131yoruz) *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        \/* Sitenizin arka plan\u0131n\u0131 bozmamak i\u00e7in background rengini kald\u0131rd\u0131k veya kapsay\u0131c\u0131ya ald\u0131k *\/\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n\n    \/* Modal a\u00e7\u0131ld\u0131\u011f\u0131nda sayfan\u0131n kaymas\u0131n\u0131 engellemek i\u00e7in *\/\n    body.modal-open {\n        overflow: hidden; \n    }\n\n    \/* MAIN GRID STRUCTURE *\/\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n    }\n\n    \/* CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 420px;\n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.4;\n    }\n\n    \/* MODAL (POPUP) STRUCTURE - Z-Index art\u0131r\u0131ld\u0131 *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999; \/* Admin panelin \u00fcst\u00fcnde kalmas\u0131 i\u00e7in *\/\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 1000px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000; \/* Overlay'in de \u00fcst\u00fcnde *\/\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 15px;\n        right: 20px;\n        width: 40px;\n        height: 40px;\n        background: rgba(255,255,255, 0.95);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 24px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n\n    \/* \u0130\u00c7ER\u0130K DETAY ST\u0130LLER\u0130 (Editorial Style) *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.9;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 20px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 42px;\n        font-weight: 700;\n        line-height: 1.2;\n        margin-bottom: 20px;\n        letter-spacing: -1px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 14px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        margin-top: 20px;\n        display: inline-block;\n        border-bottom: 1px solid #ddd;\n        padding-bottom: 5px;\n    }\n    .reading-column h3 {\n        font-size: 28px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 28px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 10px;\n        margin-top: -5px;\n        line-height: 1;\n        font-weight: bold;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 740px;\n        margin: 40px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 4px;\n        display: block;\n        box-shadow: 0 4px 15px rgba(0,0,0,0.08); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 14px;\n        color: #777;\n        text-align: center;\n        margin-top: 10px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 24px;\n        line-height: 1.5;\n        font-weight: 400;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 40px 0;\n        padding: 25px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .editorial-list li strong {\n        color: #ba372a;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 2px;\n        text-underline-offset: 4px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 0 3px;\n        border-radius: 2px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n    }\n    .clean-footer h4 {\n        margin-top: 0;\n        font-size: 18px;\n        color: #666;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 10px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ============================== -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: WINTER EXTERIOR ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW -->\n            <div class=\"blog-card\">\n                <div class=\"blog-card-img\" style=\"background-image: url('https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/5-3.png');\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">Exter\u0131or Protect\u0131on<\/span>\n                    <h3 class=\"blog-card-title\">Exterior Paints in Cold Winters: Durability and Aesthetics<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- HTML STRUCTURE (TRANSLATED CONTENT) -->\n                        <div class=\"keim-editorial-wrapper\">\n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">SEASONAL FACADE PROTECTION<\/span>\n                                <h2>Exterior Paints in Cold Winters: Durability and Aesthetics<\/h2>\n                            <\/header>\n\n                            <!-- INTRO TEXT -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">Winter creates the harshest testing environment for exterior facade coatings. The combined effects of low temperatures, freeze-thaw cycles, high humidity, and UV rays threaten the integrity and functionality of paint films. Under these conditions, selecting the right material is critical for protecting the building surface, maintaining aesthetics, and ensuring long-term cost efficiency.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 1 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/5-3.png\" alt=\"Winter Conditions and Facade\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Winter conditions pose a tough challenge for exterior facades<\/span>\n                            <\/div>\n\n                            <div class=\"reading-column\">\n                                <h3>Common Problems with Traditional Dispersion Paints in Winter Conditions<\/h3>\n                                \n                                <h4>Cracking and Blistering of the Paint Coating<\/h4>\n                                <p>Traditional paints have a limited capacity to adapt to thermal expansion and contraction cycles. Binders that fracture and become plasticized over time due to UV rays become even more brittle in the cold, making them prone to cracking and delamination (blistering).<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 2 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/2-7.png\" alt=\"Cracking and Blistering\" loading=\"lazy\" \/> \n                                <span class=\"caption\"><br \/><\/span>\n                            <\/div>\n\n                            <div class=\"reading-column\">\n                                <h4>Surface Color Fading and Erosion<\/h4>\n                                <p>Organic pigments and binders undergo photochemical degradation when exposed to UV radiation. This leads to premature color fading and accelerated surface erosion.<\/p>\n\n                                <h4>Breathability Issues and Moisture Problems<\/h4>\n                                <p>The low vapor permeability layer created by traditional paints restricts moisture trapped inside the wall from escaping. In winter, high humidity can cause vapor to condense or freeze and expand within the structural elements. This results in the weakening of the underlying binder layer, performance loss of insulation materials, and the risk of mold growth.<\/p>\n\n                                <h4>Loss of Adhesion Strength<\/h4>\n                                <p>Freeze-thaw cycles place heavy stress on the adhesion bond between the paint and the substrate. Synthetic films that have lost their elasticity may partially or completely lose their ability to adhere under this stress.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 3 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/3-5.png\" alt=\"Surface Degradation\" loading=\"lazy\" \/> \n                                <span class=\"caption\"><br \/><\/span>\n                            <\/div>\n\n                            <div class=\"reading-column\">\n                                <h3>Potassium Silicate Paints: The Definitive Solution with Soldalit<\/h3>\n                                <p>KEIM SOLDALIT utilizes a binder system consisting of potassium silicate and silica sol. This system chemically reacts (silicification) with the mineral substrates it is applied to (silicate plaster, concrete, natural stone), fusing at a microscopic level. The resulting bond is completely mineral and porous.<\/p>\n                                \n                                <ul class=\"editorial-list\">\n                                    <li><strong>Resistant to Thermal Movements:<\/strong> Thanks to the chemical bond, it is unaffected by thermal movements and does not show cracking or blistering.<\/li>\n                                    <li><strong>High UV Resistance and Color Retention:<\/strong> Since the material is entirely mineral, it exhibits high resistance to UV rays. Inorganic pigments ensure that colors retain their original vibrancy for decades.<\/li>\n                                    <li><strong>Easy Application:<\/strong> Sol-silicate technology is supplied as a ready-to-use mixture and can be applied directly. It also provides stable adhesion over old organic paint layers.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 4 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/4-3.png\" alt=\"KEIM Soldalit\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Superior protection against harsh weather conditions<\/span>\n                            <\/div>\n\n                            <div class=\"reading-column\">\n                                <h4>Breathable Structures<\/h4>\n                                <p>The micro-porous structure formed by KEIM Soldalit allows water vapor to escape freely. This feature is vital for maintaining the moisture balance of the building. Since moisture is not trapped inside the wall, freeze damage and moisture-related insulation failures are prevented. The structure &#8220;breathes&#8221; and regains a healthy moisture cycle.<\/p>\n                                \n                                <div class=\"pull-quote\">&#8220;Mineral silicate paints protect the structure with technical superiority, offer aesthetic permanence, and lower the total cost of ownership.&#8221;<\/div>\n                                \n                                <p>In terms of longevity parameters, it offers a distinct performance difference compared to traditional paints. It provides protection for decades without requiring maintenance, repair, or renewal. This makes it not only an economical option in the long run but also represents a sustainable and resource-efficient approach.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 5 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/6.png\" alt=\"Healthy Facades\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Long-lasting, healthy, and aesthetic facades<\/span>\n                            <\/div>\n\n                            <!-- CONCLUSION SECTION -->\n                            <div class=\"reading-column\">\n                                <hr class=\"divider\" \/>\n                                <h4 style=\"text-align: center; color: #111; font-size: 24px;\">Professional and Lasting Protection<\/h4>\n                                <p style=\"text-align: center;\">In winter months and harsh climate conditions, exterior facade performance is directly related to the chemical and physical properties of the selected coating material. When used in conjunction with professional application, KEIM Soldalit provides a long-lasting and trouble-free exterior facade solution.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>The R\u0131ght Cho\u0131ce For Your Structure<\/h4>\n                                <ul>\n                                    <li><a href=\"\/\" target=\"_blank\" rel=\"noopener\">Home Page<\/a><\/li>\n                                    <li><a href=\"\/iletisim\" target=\"_blank\" rel=\"noopener\">Contact Us<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Content: Exterior Facade Expertise<\/p>\n                            <\/div>\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT CONTROL ======================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        card.addEventListener('click', openModal);\n        \n        closeBtn.addEventListener('click', (e) => {\n            e.stopPropagation();\n            closeModal();\n        });\n\n        overlay.addEventListener('click', (e) => {\n            if (e.target === overlay) {\n                closeModal();\n            }\n        });\n    });\n\n    \/\/ Close with ESC key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. EXTRA EFFECTS FOR CONTENT (FADE IN IMAGES)\n    \/\/ Applies to images inside the editorial content area\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    editorialImages.forEach(img => {\n        img.style.opacity = '0'; \/\/ Hide initially\n        img.style.transition = 'opacity 0.8s ease';\n    });\n\n    const observer = new IntersectionObserver((entries, obs) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.style.opacity = '1';\n                obs.unobserve(entry.target);\n            }\n        });\n    }, { threshold: 0.1 });\n\n    editorialImages.forEach(img => {\n        observer.observe(img);\n    });\n\n    \/\/ 3. SECURE LINKS\n    const editorialLinks = document.querySelectorAll('.keim-editorial-wrapper a');\n    editorialLinks.forEach(function(link) {\n      if (link.getAttribute('href') && link.getAttribute('href').startsWith('http')) {\n        if (!link.getAttribute('target')) {\n          link.setAttribute('target', '_blank');\n        }\n        link.setAttribute('rel', 'noopener noreferrer');\n      }\n    });\n\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (PANEL DOSTU - ARIAL) ================================ -->\n<!-- ============================================================================== -->\n<style>\n    \/* GENEL KAPLAYICI (Body stilini buraya ta\u015f\u0131d\u0131k) *\/\n    .blog-container {\n        font-family: Arial, sans-serif; \n        \/* background-color: #f0f2f5; <-- Sitenin kendi arka plan\u0131n\u0131 bozmamak i\u00e7in kapatt\u0131k *\/\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    \/* Modal a\u00e7\u0131ld\u0131\u011f\u0131nda arka plan\u0131n kaymas\u0131n\u0131 engeller *\/\n    body.modal-open {\n        overflow: hidden;\n    }\n\n    \/* MAIN GRID STRUCTURE *\/\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n    }\n\n    \/* 1. PREVIEW CARD *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 400px; \n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n        font-family: Arial, sans-serif;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.4;\n        font-family: Arial, sans-serif;\n    }\n\n    \/* ================================================================== *\/\n    \/* ================== MODAL (POPUP) STRUCTURE ======================= *\/\n    \/* ================================================================== *\/\n\n    \/* 1. OVERLAY (Z-Index Y\u00fckseltildi) *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.8);\n        backdrop-filter: blur(5px);\n        z-index: 99999; \/* Admin panelin \u00fcst\u00fcnde kalmas\u0131 i\u00e7in *\/\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.4s ease, visibility 0.4s;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    \/* 2. CENTERED MODAL BOX *\/\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 90%;\n        max-width: 1000px;\n        height: 90vh;\n        background-color: #fff;\n        z-index: 100000; \/* Overlay'in \u00fcst\u00fcnde *\/\n        border-radius: 12px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        \n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        \n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    \/* 3. SCROLL AREA *\/\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n        scrollbar-width: thin;\n        scrollbar-color: #ccc #f1f1f1;\n    }\n\n    \/* 4. CLOSE BUTTON *\/\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        line-height: 1;\n        transition: all 0.2s ease;\n        box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n        font-family: Arial, sans-serif;\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n\n    \/* MOBILE ADJUSTMENTS *\/\n    @media (max-width: 768px) {\n        .modal-box {\n            width: 100%;\n            height: 100%;\n            border-radius: 0;\n        }\n    }\n\n    \/* BLOG \u0130\u00c7ER\u0130K ST\u0130LLER\u0130 *\/\n    .blog-content-wrapper {\n        font-family: Arial, sans-serif; \n        color: #333;\n        line-height: 1.8;\n        font-size: 18px;\n        background-color: #fff;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .blog-content-wrapper .reading-column {\n        max-width: 720px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .blog-content-wrapper .editorial-header {\n        text-align: center;\n        padding: 80px 20px 50px 20px;\n        background: linear-gradient(to bottom, #fbfbfb 0%, #ffffff 100%);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #eee;\n    }\n    .blog-content-wrapper .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 36px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin: 0 auto 20px auto;\n        max-width: 800px;\n    }\n    .blog-content-wrapper .editorial-header .meta {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #999;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        font-weight: 700;\n    }\n    .blog-content-wrapper h3 {\n        font-family: Arial, sans-serif;\n        font-size: 24px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n    }\n    .blog-content-wrapper p {\n        margin-bottom: 24px;\n        text-align: left;\n        font-family: Arial, sans-serif;\n    }\n    .blog-content-wrapper .drop-cap::first-letter {\n        font-size: 3.8em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -6px;\n        line-height: 0.9;\n        font-weight: 700;\n        color: #ba372a;\n        font-family: Arial, sans-serif;\n    }\n    .blog-content-wrapper .feature-image-wrapper {\n        width: 100%;\n        max-width: 900px;\n        margin: 50px auto;\n        display: block;\n    }\n    .blog-content-wrapper .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.08); \n    }\n    .blog-content-wrapper .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        display: block;\n    }\n    .blog-content-wrapper .pull-quote {\n        font-family: Arial, sans-serif;\n        font-size: 22px;\n        font-style: italic;\n        font-weight: normal;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-left: none;\n        background-color: #fafafa;\n        border-radius: 8px;\n        position: relative;\n        border: 1px solid #eee;\n    }\n    .blog-content-wrapper .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n        font-family: Arial, sans-serif;\n    }\n    .blog-content-wrapper .editorial-list li {\n        margin-bottom: 18px;\n        padding-left: 25px;\n        position: relative;\n    }\n    .blog-content-wrapper .editorial-list li::before {\n        content: \"\";\n        width: 6px;\n        height: 6px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .blog-content-wrapper .clean-footer {\n        background-color: #f5f5f5;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-family: Arial, sans-serif;\n    }\n    .blog-content-wrapper .clean-footer a {\n        color: #ba372a;\n        text-decoration: none;\n        font-weight: bold;\n        margin: 0 10px;\n    }\n<\/style>\n\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ============================== -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW -->\n            <div class=\"blog-card\">\n                <!-- Javascript will pull the image from content -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">Wood Protect\u0131on<\/span>\n                    <h3 class=\"blog-card-title\">Wood's Timeless Friend: Meet KEIM Lignosil<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- BLOG HTML CONTENT -->\n                        <div class=\"blog-content-wrapper\">\n                            \n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">Wood Protect\u0131on Technology<\/span>\n                                <h2>Wood's Timeless Friend: Meet KEIM Lignosil<\/h2>\n                            <\/header>\n\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">Wood is an indispensable material in architecture, known for its warmth, naturalness, and aesthetics. However, the sun, rain, humidity, and microorganisms it is exposed to outdoors are its greatest enemies. Traditional paints have a short lifespan, are sensitive to fading and cracking, and require frequent and costly maintenance.<\/p>\n                                <p>So, is it possible to protect wood while preserving its soul, in a way that truly defies the years? KEIM Lignosil Silicate Wood Paint is the most radical and successful answer to this question.<\/p>\n                            <\/div>\n\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/1-17.jpg\" alt=\"Keim Lignosil Wood Application\" loading=\"lazy\" \/>\n                                <span class=\"caption\">Protect the wood without losing its natural texture.<\/span>\n                            <\/div>\n\n                            <div class=\"reading-column\">\n                                <h3>A Revolutionary Technology: Silicate Meets Wood<\/h3>\n                                <p>KEIM Lignosil is known as the world's first and only patented silicate wood paint. This technology is the adaptation of the unique durability that mineral paints have provided on stone and plaster surfaces for centuries, now applied to wood.<\/p>\n                                <p>In this system, it is not just a paint layer, but a chemical integration. Lignosil creates a chemical bond (silicification) with the cellulose fibers inside the wood. The result is a protection shield that becomes part of the wood rather than just sitting on the surface, does not fade, and allows the wood to breathe.<\/p>\n                            <\/div>\n\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/4-15.jpg\" alt=\"Silicate Technology and Wood\" loading=\"lazy\" \/>\n                                <span class=\"caption\">Unlike organic paints, a silicate structure that integrates with the wood.<\/span>\n                            <\/div>\n\n                            <div class=\"reading-column\">\n                                <h3>Why Choose KEIM Lignosil?<\/h3>\n                                <p>Unlike ordinary paints, Lignosil provides scientific superiority against wood's natural enemies:<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Excellent UV Resistance and Color Fastness:<\/strong> Unlike organic paints, it contains purely inorganic pigments. It shows absolute resistance to the sun's UV rays.<\/li>\n                                    <li><strong>Unmatched Longevity:<\/strong> The silicate bond protects the wood against the wearing effects of rain, snow, frost, and wind.<\/li>\n                                    <li><strong>Breathable Moisture Protection:<\/strong> It allows the wood to \"breathe.\" While letting internal moisture out, it blocks external moisture from entering.<\/li>\n                                    <li><strong>Velvet-Matte and Natural Appearance:<\/strong> It highlights the texture of the wood with its typical lime matte appearance and deep color tones.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/7-2.jpg\" alt=\"Durable Wood Facades\" loading=\"lazy\" \/>\n                                <span class=\"caption\">Colors and textures that defy the years.<\/span>\n                            <\/div>\n                            \n                            <div class=\"reading-column\">\n                                <div class=\"pull-quote\">\"Extend the life of your wood, make its beauty permanent.\"<\/div>\n                                <p style=\"text-align: center;\">KEIM Lignosil is not just a paint, but a protection system that gives life to wood. It is the smartest investment for anyone seeking an aesthetic, sustainable, and economical solution.<\/p>\n                            <\/div>\n\n                            <div class=\"clean-footer\">\n                                <h4>Continue Exploring with KEIM<\/h4>\n                                <p>\n                                    <a href=\"https:\/\/www.silikatboya.com\/\" target=\"_blank\">Home Page<\/a> \u2022 \n                                    <a href=\"https:\/\/www.silikatboya.com\/iletisim\" target=\"_blank\">Contact<\/a>\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- HTML CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT CONTROL ======================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Find the first image in content and set it as card cover\n        const firstContentImg = unit.querySelector('.blog-content-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        card.addEventListener('click', openModal);\n        \n        closeBtn.addEventListener('click', (e) => {\n            e.stopPropagation();\n            closeModal();\n        });\n\n        overlay.addEventListener('click', (e) => {\n            if (e.target === overlay) {\n                closeModal();\n            }\n        });\n    });\n\n    \/\/ Close with ESC key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (PANEL DOSTU - KEIM OPTIL) =========================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* GENEL KAPLAYICI (Body stilini buraya ta\u015f\u0131d\u0131k) *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        \/* background-color: #f0f2f5; <-- Sitenin arka plan\u0131n\u0131 bozmamak i\u00e7in kapal\u0131 *\/\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    \/* Modal a\u00e7\u0131ld\u0131\u011f\u0131nda arka planda sayfan\u0131n kaymas\u0131n\u0131 engeller *\/\n    body.modal-open {\n        overflow: hidden;\n    }\n\n    \/* MAIN GRID STRUCTURE *\/\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n    }\n\n    \/* CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 420px;\n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.4;\n    }\n\n    \/* MODAL (POPUP) STRUCTURE *\/\n    \/* Z-Index de\u011ferleri y\u00fckseltildi *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999; \/* Admin panelin \u00fcst\u00fcnde kalmas\u0131 i\u00e7in *\/\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 1000px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000; \/* Overlay'in \u00fcst\u00fcnde *\/\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 15px;\n        right: 20px;\n        width: 40px;\n        height: 40px;\n        background: rgba(255,255,255, 0.95);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 24px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* \u0130\u00c7ER\u0130K DETAY ST\u0130LLER\u0130 *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.8;\n        font-size: 18px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 38px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 800px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 26px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ============================== -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: KEIM OPTIL ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically pull this image from content -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">Inter\u0131or Pa\u0131nts<\/span>\n                    <h3 class=\"blog-card-title\">KEIM Optil: The Secret of Non-Fading Colors and Long-Term Aesthetics<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- HTML CONTENT STRUCTURE -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">Inter\u0131or Pa\u0131nts<\/span>\n                                <h2>KEIM Optil: The Secret of Non-Fading Colors and Long-Term Aesthetics<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">One of the biggest concerns in interior design is that meticulously selected colors lose their vibrancy and character by fading over time. KEIM Optil stands out as a revolutionary interior paint with \"unmatched lightfastness\" that eliminates this concern at its root.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 1 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/1-3.png\" alt=\"Keim Optil Application\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Colors that do not fade over time and preserve their character.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 1 -->\n                            <div class=\"reading-column\">\n                                <h3>Natural Formula Extending the Life of Colors<\/h3>\n                                <p>The fundamental secret behind KEIM Optil's non-fading colors is the mineral-based sol-silicate technology. Unlike traditional paints, color pigments do not just form a film layer on the surface; they integrate with the wall surface through a chemical bond (silicification).<\/p>\n                                \n                                <div class=\"pull-quote\">\"The color becomes part of the surface, and there is no fading, yellowing, or loss of matte finish over time.\"<\/div>\n                                \n                                <p>This process ensures the colors become extremely resistant to UV rays, moisture, and physical factors. Instead of being encapsulated by a binder, color pigments reflect light directly within the crystal structure, offering unique depth.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 2 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/3-4.png\" alt=\"Mineral Based Paint Structure\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Colors integrating with the surface via silicification technology.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 2 -->\n                            <div class=\"reading-column\">\n                                <h3>Superior Protection with MacroFill Technology<\/h3>\n                                <p>The new generation \"MacroFill Technology\" not only perfectly balances the velvety matte texture and light reflections but also strengthens the color layer with a protective structure. This technology preserves the depth and homogeneity of the color tone while creating a barrier against external factors, maximizing color durability.<\/p>\n                                <p>Even under challenging interior lighting conditions (under south-facing windows, spotlights, etc.), colors maintain their vibrancy and saturation just like the first day.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 3 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/5-1.png\" alt=\"MacroFill Technology\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Velvety matte texture looking perfect in every light.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 3 -->\n                            <div class=\"reading-column\">\n                                <h3>Extensive and Permanent Color Palette<\/h3>\n                                <p>KEIM Optil offers its non-fading feature with 16 fascinating monochrome color options and the richness of the KEIM Avantgarde color palette. From gold and silver tones to a tribute to the polychromatic scheme of the 1920s, each carries the same superior lightfastness standard.<\/p>\n                                <p>This means designers and architects can create lasting visual integrity in long-term projects without compromising on color choices.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 4 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/4-2.png\" alt=\"Color Palette\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Unlimited and permanent color options for designers.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 4 -->\n                            <div class=\"reading-column\">\n                                <h3>Full Compliance with Sustainability and Air Quality<\/h3>\n                                <p>Non-fading colors are not only an aesthetic advantage but also an economic and ecological one. It saves resources by postponing the need for renovation and refurbishment for many years. KEIM Optil's additive-free, ecological formula and high vapor diffusion resistance protect indoor air quality while providing durability against factors like moisture and alkali that can cause color degradation.<\/p>\n                            <\/div>\n\n                            <!-- CLOSING \/ HIGHLIGHTED CONCLUSION -->\n                            <div class=\"reading-column\">\n                                <hr class=\"divider\" \/>\n                                <h4 style=\"text-align: center; color: #111; font-size: 24px;\">An Investment Against Time<\/h4>\n                                <p style=\"font-size: 20px; font-weight: 500; color: #444; text-align: center;\">KEIM Optil is more than a paint; it is a lasting aesthetic investment for your interiors.<\/p>\n                                <p style=\"text-align: center;\">With its non-fading colors and ultra-matte sophisticated finish, it creates an atmosphere in your spaces that feels as fresh and deep as the first day for years. While offering perfect coverage and ease of application for professional applicators, it promises the end-user a rare combination of visual perfection and building physics.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>Continue Reading<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/blog\" target=\"_blank\" rel=\"noopener\">Explore More Blog Posts<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/iletisim\" target=\"_blank\" rel=\"noopener\">Contact Us<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/\">Return to Home Page<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Author: Silikatboya.com<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT CONTROL ======================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Take the first image from content as card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        card.addEventListener('click', openModal);\n        \n        closeBtn.addEventListener('click', (e) => {\n            e.stopPropagation();\n            closeModal();\n        });\n\n        overlay.addEventListener('click', (e) => {\n            if (e.target === overlay) {\n                closeModal();\n            }\n        });\n    });\n\n    \/\/ Close with ESC key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. EXTRA EFFECTS FOR CONTENT (FADE IN IMAGES)\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    editorialImages.forEach(img => {\n        img.style.opacity = '0'; \/\/ Hide initially\n        img.style.transition = 'opacity 0.8s ease';\n    });\n\n    const observer = new IntersectionObserver((entries, obs) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.style.opacity = '1';\n                obs.unobserve(entry.target);\n            }\n        });\n    }, { threshold: 0.1 });\n\n    editorialImages.forEach(img => {\n        observer.observe(img);\n    });\n\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (PANEL FRIENDLY - WINTER COLLECTION) ================= -->\n<!-- ============================================================================== -->\n<style>\n    \/* GENERAL CONTAINER *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden;\n    }\n\n    \/* MAIN GRID STRUCTURE *\/\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n    }\n\n    \/* CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 420px;\n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.4;\n    }\n\n    \/* MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 1000px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 15px;\n        right: 20px;\n        width: 40px;\n        height: 40px;\n        background: rgba(255,255,255, 0.95);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 24px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* CONTENT DETAIL STYLES *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.9;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 38px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 26px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: KEIM WINTER PALETTE ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically pull the first image from content -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">WINTER COLOR PALETTE<\/span>\n                    <h3 class=\"blog-card-title\">Winter Warmth: Revitalize Your Interiors and Facades with KEIM Exclusiv Colors<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- HTML CONTENT STRUCTURE -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">WINTER COLOR PALETTE<\/span>\n                                <h2>Winter Warmth: Revitalize Your Interiors and Facades with KEIM Exclusiv Colors<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">Winter offers the perfect opportunity to adorn our interiors and living spaces with warm, peaceful, and inviting colors. During these months when cold weather reigns outside, the inside and outside of our homes can be transformed into living spaces with tones that embrace us and soothe our souls. At this point, silicate paints\u2014standing out with both their longevity and breathable structure\u2014especially with the warm tones in the KEIM Exclusiv color palette suitable for the winter season, will warm your heart and add character to your spaces this winter.<\/p>\n                                \n                                <!-- SECTION 1: IVORY -->\n                                <h3>Ivory | KEIM Exclusiv 9078: Timeless Elegance<\/h3>\n                                <p>KEIM Exclusiv 9078 Ivory is a soft and neutral color against the gloomy gray tones of winter. This shade makes spaces appear bright and spacious even in months with diminishing daylight. In interiors, especially in living rooms and corridors, it creates an expanding and calming effect. When used on facades, it exhibits a classic and noble stance while making your building sparkle even in the pale light of the winter sun. It harmonizes perfectly with materials like wood and natural stone, allowing you to blend warm and cool tones.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 (Ivory) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/2-8.png\" alt=\"KEIM Exclusiv 9078 Ivory and Design\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Timeless elegance and interplay of light.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 2: LATTE -->\n                            <div class=\"reading-column\">\n                                <h3>Latte | KEIM Exclusiv 9132: A Warm Embrace<\/h3>\n                                <p>KEIM Exclusiv 9132 Latte evokes warm coffee tones and is an intimate, inviting color that wraps around you like a blanket. This earthy tone will warm you up on winter evenings and is ideal for gathering areas such as dining rooms and kitchens. Encouraging social interaction, this color instills a sense of comfort and trust in interiors. In facade applications, it lends a warm and contemporary appearance, especially in harmony with the surrounding natural landscape.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 2 (Latte) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/3-6.png\" alt=\"KEIM Exclusiv 9132 Latte Color\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Intimate and inviting living spaces.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 3: GREIGE -->\n                            <div class=\"reading-column\">\n                                <h3>Greige | KEIM Exclusiv 9574: Modern and Sophisticated Stance<\/h3>\n                                <p>KEIM Exclusiv 9574 Greige is the most elegant interpretation of the gray tones naturally present in winter. Not a cold gray, but a nuanced tone, it adds depth and sophistication. In interiors, it breathes life into modern and minimalist styles. It provides serenity and focus in personal spaces like study rooms and bedrooms. On facades, it offers an extremely stylish and contemporary expression. When combined with other winter colors, especially Ivory or Terracotta, it creates a dynamic and balanced visual composition.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 3 (Greige) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/4-4.png\" alt=\"KEIM Exclusiv 9574 Greige Color\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Sophisticated gray tones for modern architecture.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 4: SAGE -->\n                            <div class=\"reading-column\">\n                                <h3>Sage Green | KEIM Exclusiv 9410: The Tone of Serenity<\/h3>\n                                <p>Bringing nature's serenity into your home, KEIM Exclusiv 9410 Sage Green is one of the most peaceful colors of winter. This pale, grayish-green tone provides a sense of freshness and tranquility. It is perfect for relaxation areas like bathrooms and bedrooms; it reduces stress and creates a sense of balance. It harmonizes magnificently with natural textures, wicker, and wood in interiors. When used on the facade, it blends with the surrounding winter landscape, ensuring an organic and calm aesthetic.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 4 (Sage) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/5-4.png\" alt=\"KEIM Exclusiv 9410 Sage Green\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Peaceful tones integrated with nature.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 5: TERRACOTTA & CONCLUSION -->\n                            <div class=\"reading-column\">\n                                <h3>Soft Terracotta | KEIM Exclusiv 9146: Vitality and Energy<\/h3>\n                                <p>For those wanting to add a vivid touch to winter, KEIM Exclusiv 9146 Soft Terracotta is indispensable. Inspired by the warm, reddish tones of the earth, this shade imparts energy and a lively character to spaces. When used as an accent wall in the living room, it creates a focal point. It offers a warm welcome in areas like entrance halls. On facades, it stands out with a bold and friendly expression, providing a warm and inviting look even in cold weather. It can create an impressive modern atmosphere when combined with natural stone and metals.<\/p>\n\n                                <!-- PULL QUOTE -->\n                                <div class=\"pull-quote\">\"The right color choice can turn your house from a space into a home.\"<\/div>\n                                \n                                <hr class=\"divider\" \/>\n                                <h4 style=\"text-align: center; color: #111; font-size: 24px;\">Healthy and Aesthetic Spaces<\/h4>\n                                <p style=\"text-align: center;\">This winter, renew your spaces not only with a color but also with the human-friendly, breathable surfaces and long-lasting structure of KEIM Silicate Paints. Let these 5 shades from the KEIM Exclusiv chart inspire you to create a unique warmth and depth in your interiors specific to winter.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>For More Inspiration<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/\" target=\"_blank\" rel=\"noopener\">Home Page<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/sayfa\/silikat-kartela\" target=\"_blank\" rel=\"noopener\">Request Color Chart<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Content: Silikatboya.com<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT CONTROL ======================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Automatically pull the first image from content to set as card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. FADE-IN EFFECT FOR IMAGES\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        \/\/ Show directly if browser doesn't support IntersectionObserver\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (KEIM INNOTOP - ENGLISH EDITORIAL) =================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* MAIN CONTAINER *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden;\n    }\n\n    \/* MAIN GRID STRUCTURE *\/\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n        \/* If you have only one card and want to center it: *\/\n        \/* justify-content: center; *\/\n    }\n\n    \/* CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 450px;\n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 22px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.3;\n    }\n\n    \/* MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 1000px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* CONTENT DETAIL STYLES *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.8;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 36px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 26px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n    \n    .reading-column strong {\n        color: #ba372a;\n        font-weight: 700;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: KEIM INNOTOP ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW (Preview Card) -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically set the first image from content here -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">INTERIOR & HEALTH<\/span>\n                    <h3 class=\"blog-card-title\">Bring the Balance of Nature Indoors with KEIM Innotop<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- HTML CONTENT STRUCTURE -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">INTERIOR & HEALTH<\/span>\n                                <h2>Bring the Balance of Nature Indoors with KEIM Innotop<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">People spend the vast majority of their time indoors. Therefore, ensuring our living and working spaces are healthy, peaceful, and aesthetic is more important than ever. But how do we choose the right interior paint to achieve this balance? Going beyond traditional paints and representing a true investment for both your building and its inhabitants, KEIM Innotop Silicate Paint offers a definitive and convincing answer.<\/p>\n                                \n                                <!-- SECTION 1: BREATHABLE WALLS -->\n                                <h3>Breathable Walls: The Benefits of High Vapor Permeability<\/h3>\n                                <p>One of the most critical criteria for quality interior paint is <strong>vapor permeability<\/strong>. Unlike dispersion (plastic) paints, KEIM Innotop features a micro-porous structure that remains highly open to diffusion. This effectively allows your walls and the paint layer to \"breathe.\"<\/p>\n                                <p>Moisture is absorbed without hindrance and released back into the air depending on environmental conditions. This regulating property significantly reduces the risk of mold growth and helps create a healthy, balanced indoor climate. It provides optimal building physics, especially for humid areas and new constructions.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/innotop-example3.webp\" alt=\"Healthy interiors with KEIM Innotop\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Creating healthy living spaces with a natural texture.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 2: HEALTH -->\n                            <div class=\"reading-column\">\n                                <h3>A Clean Choice for Your Health: No Harmful Substances<\/h3>\n                                <p>Our homes should be sanctuaries, not sources of anxiety. KEIM Innotop ensures this confidence with a formula <strong>free of solvents and plasticizers<\/strong>. With no concerns about long-term harmful emission releases (VOCs), you can create healthy spaces that are safe to inhabit immediately after the paint dries. This feature makes it ideal for children's rooms, bedrooms, and any environment occupied by sensitive individuals.<\/p>\n                                \n                                <!-- PULL QUOTE -->\n                                <div class=\"pull-quote\">\"Renovate your spaces not just with color and appearance, but with health and safety.\"<\/div>\n\n                                <!-- SECTION 3: SAFETY -->\n                                <h3>Maximum Safety: Non-Combustible and No Toxic Fumes<\/h3>\n                                <p>Safety is an inseparable part of comfort. Thanks to its pure mineral silicate binder, KEIM Innotop is <strong>non-combustible<\/strong>. In the event of a fire, the paint layer does not ignite and helps delay the spread of flames. More importantly, unlike plastic paints, it does not release toxic fumes or gases under high heat; this provides vital escape time and significantly increases life safety.<\/p>\n\n                                <!-- SECTION 4: AESTHETICS -->\n                                <h3>Natural and Timeless Aesthetics: Mineral Matte Appearance<\/h3>\n                                <p>Visual satisfaction is just as important as performance. KEIM Innotop offers a distinctively pleasant and natural mineral matte appearance. Its warm white tone and velvety matte surface add depth and a soothing calmness to spaces. Instead of a plastic sheen, it gives walls a genuine, tangible character.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 2 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/innotop-example4.webp\" alt=\"KEIM Innotop Mineral Matte Look\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Velvety mineral matte finish instead of plastic shine.<\/span>\n                            <\/div>\n\n                            <!-- CONCLUSION & SUMMARY -->\n                            <div class=\"reading-column\">\n                                <h3>Versatile and Durable Use<\/h3>\n                                <p>KEIM Innotop is suitable for use on all traditional mineral interior surfaces such as plaster, concrete, and drywall. It offers a wide range of applications, from living and working areas to humid environments like bathrooms and kitchens. Thanks to its durable structure, it maintains its beauty for years to come.<\/p>\n\n                                <hr class=\"divider\" \/>\n                                <h4 style=\"text-align: center; color: #111; font-size: 24px;\">Absolute Mineral<\/h4>\n                                <p style=\"text-align: center;\">KEIM Innotop is not just paint; it is a system that elevates the quality of your living spaces. For those seeking a healthy, safe, aesthetic, and environmentally conscious choice, it is the right decision for your renovation or new construction projects.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>For More Information<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/\" target=\"_blank\" rel=\"noopener\">Home Page<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/iletisim\" target=\"_blank\" rel=\"noopener\">Contact Us<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Content: Silikatboya.com<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT CONTROL ======================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Automatically set the first image from content as the card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            \/\/ Set image URL as CSS background-image\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. FADE-IN EFFECT FOR IMAGES (Smooth load on scroll)\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        \/\/ Show directly if browser doesn't support IntersectionObserver\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (KEIM CONCRETAL-W - MODAL STYLE) ===================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* 1. MAIN CONTAINER AND GRID *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden; \/* Prevents background scrolling when modal is open *\/\n    }\n\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n        \/* To center a single card: *\/\n        \/* justify-content: center; *\/\n    }\n\n    \/* 2. CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 480px; \n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 22px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.3;\n    }\n\n    \/* 3. MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 1000px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* 4. CONTENT STYLES (EDITORIAL DESIGN) *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.8;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 36px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 26px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n    \n    .reading-column strong {\n        color: #ba372a;\n        font-weight: 700;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: KEIM CONCRETAL-W ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW (Preview) -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically set the first image from content here -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">CONCRETE PROTECTION & AESTHETICS<\/span>\n                    <h3 class=\"blog-card-title\">The Contemporary Solution Preserving Concrete's Natural Aesthetics: KEIM Concretal-W<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- CONTENT START (KEIM EDITORIAL) -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">CONCRETE PROTECTION & AESTHETICS<\/span>\n                                <h2>The Contemporary Solution Preserving Concrete's Natural Aesthetics: KEIM Concretal-W<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">Concrete is one of the indispensable building materials of modern architecture. With its durability and aesthetic potential, it is frequently preferred in both interior and exterior spaces. However, over time, concrete surfaces can deteriorate due to weather conditions, moisture, pollution, and chemical effects. This is exactly where a smart solution steps in to preserve the unique character of concrete and protect it for many years: <strong>KEIM Concretal-W<\/strong>.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/Concretal-hperformance-paint-1024x459-1.jpg\" alt=\"KEIM Concretal-W Concrete Application\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Mineral matte finish preserving the raw texture of concrete.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 1: PRODUCT DEFINITION -->\n                            <div class=\"reading-column\">\n                                <h3>What is KEIM Concretal-W?<\/h3>\n                                <p>KEIM Concretal-W is a high-performance <strong>sol-silicate paint system<\/strong> developed specifically for concrete. Unlike traditional paints, it does not form a thick film layer on the surface; instead, it penetrates the pores of the concrete and forms chemical (covalent) bonds. This \"crystalline binding\" process makes peeling or blistering almost impossible and provides lifetime protection.<\/p>\n                                \n                                <!-- SECTION 2: BENEFITS -->\n                                <h3>Why Choose KEIM Concretal-W?<\/h3>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Natural and Mineral Matte Appearance:<\/strong> It completely preserves or emphasizes the raw, natural texture and aesthetics of concrete. It offers a noble mineral matte finish, not a plastic sheen.<\/li>\n                                    <li><strong>Breathable Protection:<\/strong> Thanks to its high vapor permeability, it allows the concrete to \"breathe\" while exhibiting excellent water repellency (hydrophobic) properties. Moisture cannot penetrate the structure, thus preventing efflorescence, mold, and algae growth.<\/li>\n                                    <li><strong>Exceptional Durability:<\/strong> Containing only lightfast inorganic pigments, the colors do not fade against UV rays. It is highly resistant to weather conditions, acid rain, and abrasion.<\/li>\n                                    <li><strong>Self-Cleaning & Low Maintenance:<\/strong> Thanks to its antistatic nature, dust and dirt accumulation is minimal. Rainwater easily washes away dirt from the surface, reducing maintenance costs.<\/li>\n                                    <li><strong>Eco-Friendly and Safe:<\/strong> It has zero VOC (Volatile Organic Compound) content. Produced with non-combustible (Class A) and non-toxic ingredients. It holds <em>Cradle to Cradle Certified\u00ae<\/em> credentials.<\/li>\n                                    <li><strong>High Alkali Resistance:<\/strong> It can be safely applied to fresh or old concrete surfaces with a pH value between 6-13.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- PULL QUOTE -->\n                            <div class=\"reading-column\">\n                                <div class=\"pull-quote\">\"KEIM Concretal-W is not just a paint; it is a long-lasting protection system for concrete.\"<\/div>\n                            <\/div>\n\n                            <!-- SECTION 3: TECHNICAL -->\n                            <div class=\"reading-column\">\n                                <h3>Technical Specifications and Complementary Solutions<\/h3>\n                                <p>Designed for sustainable architecture, this system stands out with its ease of application and system integrity. The paint, which has a mineral matte gloss level (2.0 at 85\u00b0), can be applied by brush, roller, or airless spray. In a two-coat application on cast concrete, the average consumption is approximately 0.35 kg\/m\u00b2.<\/p>\n                                <h4>Powerful Components of the System:<\/h4>\n                                <p>KEIM offers holistic solutions for different surface needs:<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>KEIM Concretal-W-Grob:<\/strong> A primer coat for rough, repaired, or difficult concrete surfaces. It closes hairline cracks and evens out the surface.<\/li>\n                                    <li><strong>KEIM Concretal-Fixativ:<\/strong> Used as a thinner and primer for system products; it balances surface absorption.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 2 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/18.png\" alt=\"KEIM Concretal-W Architectural Detail\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Aesthetic protection defying the effects of time.<\/span>\n                            <\/div>\n\n                            <!-- CONCLUSION -->\n                            <div class=\"reading-column\">\n                                <h3>Conclusion: The Guardian of Concrete<\/h3>\n                                <p>For architects, contractors, and property owners, it offers maximum durability and minimum maintenance without disrupting the aesthetic integrity of concrete structures. For those seeking a sustainable, eco-friendly, and high-performance solution, KEIM Concretal-W is the pinnacle of concrete protection technology.<\/p>\n\n                                <hr class=\"divider\" \/>\n                                <h4 style=\"text-align: center; color: #111; font-size: 24px;\">Absolute Concrete Aesthetics<\/h4>\n                                <p style=\"text-align: center;\">Available in White and all shades in the KEIM Exclusiv color palette. Custom color matching is also available for your special projects.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>For More Information<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/\" target=\"_blank\" rel=\"noopener\">Home Page<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/iletisim\" target=\"_blank\" rel=\"noopener\">Get Technical Support<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Content: Silikatboya.com | KEIM Concretal Series<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT CONTROLS ======================================= -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Feature: Automatically set the first image as the card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. SMOOTH IMAGE LOAD (FADE-IN)\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        \/\/ Show directly if browser doesn't support IntersectionObserver\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (KEIM CONCRETAL-W - MODAL STYLE) ===================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* 1. MAIN CONTAINER AND GRID *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden; \/* Prevents background scrolling when modal is open *\/\n    }\n\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n        \/* To center if there is only one card: *\/\n        justify-content: center; \n    }\n\n    \/* 2. CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 480px; \n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px; \n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.35;\n    }\n\n    \/* 3. MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 900px; \/* Slightly narrowed for reading comfort *\/\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* 4. CONTENT STYLES (EDITORIAL DESIGN) *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.8;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 36px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 26px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n    .reading-column strong {\n        color: #ba372a;\n        font-weight: 700;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: HAMITABAT THERMAL POWER PLANT ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW (Preview) -->\n            <div class=\"blog-card\">\n                <!-- Javascript automatically sets the first image in the content as the card cover -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">PROJECT REVIEW<\/span>\n                    <h3 class=\"blog-card-title\">Silicate Paint that Preserves the Natural Character of Concrete: KEIM Concretal\u00ae-W<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL (POPUP) STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- CONTENT START -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">PROJECT REVIEW: HAMITABAT THERMAL POWER PLANT<\/span>\n                                <h2>Silicate Paint that Preserves the Natural Character of Concrete: KEIM Concretal\u00ae-W<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION TEXT -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">Power generation facilities, especially thermal power plants, are industrial environments where the harshest conditions prevail for building materials. Extreme temperature differences between indoor and outdoor environments, the risk of corrosion caused by atmospheric carbon dioxide (CO2), and physical abrasion seriously threaten the lifespan of concrete structures. At this point, the protection of concrete surfaces becomes not just an aesthetic necessity, but a structural obligation.<\/p>\n                                <p>At the <strong>Hamitabat Thermal Power Plant<\/strong>, which is exposed to the harsh and continuous winds of Thrace, KEIM Concretal-W High-Performance Sol-Silicate Concrete Paint was chosen as the most effective solution against these tough conditions.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/luleburgaz-hamitabatv2.png\" alt=\"General View of Hamitabat Thermal Power Plant\" loading=\"lazy\" \/> \n                                <span class=\"caption\">General View of Hamitabat Thermal Power Plant<\/span>\n                            <\/div>\n\n                            <!-- SECTION 1: TECHNOLOGY -->\n                            <div class=\"reading-column\">\n                                <h3>What Makes KEIM Concretal-W So Special?<\/h3>\n                                <p>Unlike conventional paints, KEIM Concretal-W does not form a film layer on the concrete surface. Thanks to its <strong>Sol-Silicate technology<\/strong>, it penetrates deep into the pores of the concrete and establishes covalent crystalline bonds with the substrate. This means that the paint will never peel or blister, and will integrate completely with the concrete.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 2 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/1-4-1.png\" alt=\"Concrete Surface Protection Detail\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Mineral protection integrating with the concrete surface.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 2: ADVANTAGES -->\n                            <div class=\"reading-column\">\n                                <h3>Critical Advantages Achieved in the Hamitabat Project<\/h3>\n                                <p>Here are the main benefits provided by this technology in the project:<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Resistance to Thermal Shocks:<\/strong> While standard paints crack as they cannot tolerate expansion and contraction in the face of the extreme temperature differences experienced in the power plant, KEIM Concretal-W moves together with the concrete thanks to its mineral structure. Thus, no cracking or spalling occurs on the surface.<\/li>\n                                    <li><strong>Superior Protection Against Chemical and Physical Abrasion:<\/strong> Abrasive particles carried by the severe winds of Thrace can erode unprotected concrete surfaces over time. The solid mineral surface created by Concretal-W shows high resistance against this mechanical abrasion.<\/li>\n                                    <li><strong>Carbonation Barrier:<\/strong> By creating an effective barrier against carbonation, one of the greatest enemies of concrete, it prevents the reinforcement inside from corroding.<\/li>\n                                    <li><strong>Breathable and Self-Cleaning Structure:<\/strong> KEIM Concretal-W allows the concrete to breathe thanks to its high vapor permeability. Moisture trapped inside does not build up pressure in the paint layer and does not cause blistering. In addition, thanks to its antistatic structure, the surface repels dirt.<\/li>\n                                    <li><strong>Sensitivity to Environment and Human Health:<\/strong> With zero VOC emissions, Class A non-combustibility certification, and international certifications such as <em>Cradle to Cradle Certified\u00ae Silver<\/em>, Concretal-W is a safe material that does not harm the environment.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 3 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/1-3-1.png\" alt=\"Hamitabat Facility Structural Integrity\" loading=\"lazy\" \/> \n                                <span class=\"caption\"><br \/><\/span>\n                            <\/div>\n\n                            <!-- PULL QUOTE -->\n                            <div class=\"reading-column\">\n                                <div class=\"pull-quote\">\"KEIM Concretal-W is not just a paint; it is a mineral shield applied to concrete surfaces, a guarantee of lifetime protection.\"<\/div>\n                            <\/div>\n\n                            <!-- CONCLUSION -->\n                            <div class=\"reading-column\">\n                                <h3>Conclusion: Long-Lasting and Aesthetic Protection<\/h3>\n                                <p>The Hamitabat Thermal Power Plant example is the most concrete indicator of how the right material choice can extend the lifespan of a structure. While preserving the natural texture and matte aesthetics of the concrete, KEIM Concretal-W gives it the strength to stand securely even under the harshest industrial conditions.<\/p>\n                                <hr class=\"divider\" \/>\n                                <h4 style=\"text-align: center; color: #111; font-size: 24px;\">Investing in the Future<\/h4>\n                                <p style=\"text-align: center;\">If you want to carry concrete surfaces into the future in your projects, reduce maintenance costs, and achieve sustainable protection, discover this unique technology offered by KEIM Concretal-W.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 4 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/1-2-1.png\" alt=\"KEIM Concretal-W Aesthetics and Protection\" loading=\"lazy\" \/> \n                                <span class=\"caption\">The perfect harmony of aesthetics and protection.<\/span>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>For More Information<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/\" target=\"_blank\" rel=\"noopener\">Home Page<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/iletisim\" target=\"_blank\" rel=\"noopener\">Get Project Consultancy<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Content: Silikatboya.com<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT INTERACTIONS =================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Feature: Automatically set the first image in the content as the card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. SMOOTH IMAGE LOADING (FADE-IN)\n    \/\/ This feature allows images inside the modal to fade in as you scroll\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        \/\/ Show directly if the browser does not support IntersectionObserver\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n    \n    \/\/ 3. LINK SECURITY\n    const editorialLinks = document.querySelectorAll('.keim-editorial-wrapper a');\n    editorialLinks.forEach(function(link) {\n      if (link.getAttribute('href') && link.getAttribute('href').startsWith('http')) {\n        if (!link.getAttribute('target')) {\n          link.setAttribute('target', '_blank');\n        }\n        link.setAttribute('rel', 'noopener noreferrer');\n      }\n    });\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (LETOON ARCHITECTURE - MODAL STYLE) ================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* 1. MAIN CONTAINER AND GRID *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden; \/* Prevents background scrolling when modal is open *\/\n    }\n\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n        \/* To center if there is only one card: *\/\n        justify-content: center; \n    }\n\n    \/* 2. CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 480px; \n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.35;\n    }\n\n    \/* 3. MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 900px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* 4. CONTENT STYLES (EDITORIAL DESIGN) *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.8;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 36px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 26px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer h4 {\n        margin-top: 0;\n        font-size: 18px;\n        color: #666;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n    .reading-column strong {\n        color: #ba372a;\n        font-weight: 700;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: LETOON ARCHITECTURE ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW (Preview) -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically set the first image of the content as the cover -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">ARCHITECTURAL EXPERTISE<\/span>\n                    <h3 class=\"blog-card-title\">Sustainable Solutions in Exposed Concrete Protection and Concrete Cosmetics<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL (POPUP) STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- CONTENT START -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">LETOON ARCHITECTURE EXPERTISE<\/span>\n                                <h2>Sustainable Solutions in Exposed Concrete Protection and Concrete Cosmetics<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION TEXT -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">In today's modern architecture, exposed concrete is not just a load-bearing and structural element; it also stands out as one of the most important surface components reflecting the architectural expression, character, and spirit of the building.<\/p>\n                                <p>As <strong>LETOON Architecture<\/strong>, we approach both old and new exposed concrete surfaces with this holistic perspective. We plan our exposed concrete repair, surface rehabilitation, and protection works with a controlled and long-term performance goal, without damaging the unique original texture and mineral structure of the concrete.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 (Cover Image) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/image-3.jpg\" alt=\"Architectural exposed concrete surface texture\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Architectural exposed concrete surface texture.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 1: CONCRETE COSMETICS -->\n                            <div class=\"reading-column\">\n                                <h3>Concrete Cosmetics: Highlighting the Character, Not Hiding It<\/h3>\n                                <p>Our main approach in this application area, often defined in literature as \"concrete cosmetics\", is not to hide or transform the concrete behind synthetic paint layers, but to protect, strengthen its current character, and manage its aging in a healthy way.<\/p>\n                                <p>The standards targeted in our interventions in this context are:<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li>Ensuring full harmony with the natural, <strong>mineral matte character<\/strong> of the concrete.<\/li>\n                                    <li>A balanced integration with the existing concrete color that does not stand out.<\/li>\n                                    <li>Using systems that <strong>do not cause texture loss<\/strong>, such as wooden formwork marks, and do not seal off the surface.<\/li>\n                                    <li>Long-lasting solutions with high UV resistance, non-combustible, and silicification-based.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- PULL QUOTE -->\n                            <div class=\"reading-column\">\n                                <div class=\"pull-quote\">\"Our goal is not to hide the concrete behind synthetic layers; it is to protect and strengthen its current character by establishing a chemical bond and to manage its structural aging in the healthiest way.\"<\/div>\n                            <\/div>\n\n                            <!-- SECTION 2: KEIM TECHNOLOGY -->\n                            <div class=\"reading-column\">\n                                <h3>Mineral Approach: KEIM Potassium Sol-Silicate Systems<\/h3>\n                                <p>One of the main approaches we prefer in exposed concrete applications is mineral-based silicate technology. In this field, <strong>KEIM Potassium Sol-Silicate Paints<\/strong>, which we represent, are globally recognized systems developed for mineral surfaces since 1878.<\/p>\n                                <p>Silicate technology; thanks to its structure consisting of water glass as a binder, inorganic mineral pigments, and fillers, chemically interacts with the applied concrete surface through <strong>silicification<\/strong>. Thus, it becomes an inseparable part of the concrete without forming a film coating on the surface.<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li>Concrete surfaces maintain their natural, mineral matte appearance and do not cause synthetic glare.<\/li>\n                                    <li>Thanks to its very low Sd (H\u2082O) value, concrete dries quickly and <strong>breathes freely.<\/strong><\/li>\n                                    <li>Blistering, peeling, and film layer-induced degradations do not occur.<\/li>\n                                    <li>Absolute colorfastness (UV resistance) is provided thanks to pure mineral pigments.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 2 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/8ebd0310-47c0-4dd2-b83b-e482c960f19c.jpg\" alt=\"Water-repellent protection\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Water-repellent protection.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 3: EVONIK PROTECTOSIL -->\n                            <div class=\"reading-column\">\n                                <h3>Invisible Protection Shield: EVONIK \u2013 PROTECTOSIL<\/h3>\n                                <p>With the awareness that long-term performance on concrete surfaces cannot be achieved only by visual improvement, we elevate our surface protection solutions to the molecular level. Accordingly, we actively use <strong>EVONIK \u2013 PROTECTOSIL silane-based building protection technologies<\/strong>, which have over 60 years of R&D experience, in our projects.<\/p>\n                                <p>Protectosil systems provide deep penetration into concrete and mineral surfaces, protecting the surface <strong>invisibly.<\/strong> Thanks to this technology, effective protection is provided against the following effects that threaten the building's lifespan:<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li>Reinforced concrete rebar corrosion (rusting danger),<\/li>\n                                    <li>Structural damage caused by freeze-thaw cycles,<\/li>\n                                    <li>Salt and sulfate attacks typically seen in industrial or coastal areas,<\/li>\n                                    <li>Moss, algae, mold, and unwanted graffiti (spray paint) formations.<\/li>\n                                <\/ul>\n                                <p>These solutions permanently prevent water and harmful chloride ions from penetrating the structure while fully maintaining the vapor permeability of the concrete.<\/p>\n                                \n                                <hr class=\"divider\" \/>\n                                \n                                <!-- SECTION 4: CONCLUSION \/ LETOON APPROACH -->\n                                <h4 style=\"text-align: center; color: #111; font-size: 26px;\">The LETOON Approach: Right System, Right Surface, Right Time<\/h4>\n                                <p>On exposed concrete surfaces, we integrate KEIM potassium silicate systems and EVONIK Protectosil silane technologies separately or together depending on the specific needs of the surface. Detailed surface analysis conducted before each project allows us to determine the precise intervention level and the most accurate protection strategy.<\/p>\n                                <p>As LETOON, our aim is not to ignore the problems of concrete but to <strong>read them<\/strong>, not just to intervene in the structure but to <strong>improve<\/strong> its performance, and not to produce temporary makeup, but to provide a long-lasting, safe, and <strong>sustainable<\/strong> surface performance.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>For More Information and Consultation<\/h4>\n                                <ul>\n                                    <li><a href=\"#\" target=\"_blank\" rel=\"noopener\">LETOON Architecture Homepage<\/a><\/li>\n                                    <li><a href=\"#\" target=\"_blank\" rel=\"noopener\">Explore Our Projects<\/a><\/li>\n                                    <li><a href=\"#\" target=\"_blank\" rel=\"noopener\">Contact Us<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Technical decision in every project, permanent assurance on every surface. | LETOON Architecture<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT INTERACTIONS =================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Feature: Automatically set the first image in the content as the card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. SMOOTH IMAGE LOADING (FADE-IN)\n    \/\/ This feature allows images inside the modal to fade in as you scroll\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        \/\/ Show directly if browser does not support IntersectionObserver\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n    \n    \/\/ 3. LINK SECURITY\n    const editorialLinks = document.querySelectorAll('.keim-editorial-wrapper a');\n    editorialLinks.forEach(function(link) {\n      if (link.getAttribute('href') && link.getAttribute('href').startsWith('http')) {\n        if (!link.getAttribute('target')) {\n          link.setAttribute('target', '_blank');\n        }\n        link.setAttribute('rel', 'noopener noreferrer');\n      }\n    });\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (LETOON ARCHITECTURE - MODAL STYLE) ================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* 1. MAIN CONTAINER AND GRID *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden; \/* Prevents background scrolling when modal is open *\/\n    }\n\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n        justify-content: center; \n    }\n\n    \/* 2. CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 480px; \n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.35;\n    }\n\n    \/* 3. MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 900px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* 4. CONTENT STYLES (EDITORIAL DESIGN) *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.8;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 36px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 26px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer h4 {\n        margin-top: 0;\n        font-size: 18px;\n        color: #666;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n    .reading-column strong {\n        color: #ba372a;\n        font-weight: 700;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: WOOD PROTECTION ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW (Preview) -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically set the first image of the content as the cover -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">INTERIOR DESIGN & WOOD PROTECTION<\/span>\n                    <h3 class=\"blog-card-title\">Discover the Natural Beauty of Wood and Healthy Living Spaces with KEIM Lignosil-Inco<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL (POPUP) STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- CONTENT START -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">INTERIOR DESIGN AND WOOD PROTECTION<\/span>\n                                <h2>Discover the Natural Beauty of Wood and Healthy Living Spaces with KEIM Lignosil-Inco<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION TEXT -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">The use of wood in interior design adds warmth, naturalness, and timeless elegance to spaces. However, the coating material you use to protect and beautify the wood should not overshadow this natural beauty, but rather enhance it.<\/p>\n                                <p>This is exactly where KEIM's innovative silicate paint technology, <strong>KEIM Lignosil-Inco<\/strong>, comes into play. This unique product, which allows the wood to breathe, is an excellent choice for your interiors in terms of both aesthetics and health.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 (Cover Image) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/full_diedorf-gymnasium-i-102.webp\" alt=\"Natural Beauty of Wood\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Innovative solutions that bring the naturalness and timeless elegance of wood to your spaces.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 1 -->\n                            <div class=\"reading-column\">\n                                <h3>From Translucent to Opaque: Unlimited Design Possibilities<\/h3>\n                                <p>KEIM Lignosil-Inco is not just a paint; it is also a design tool. Whether you want to achieve a translucent appearance that highlights the natural grain structure and texture of the wood, or create a completely opaque, modern color layer... Lignosil-Inco offers you this flexibility.<\/p>\n                                <p>In addition to White, the product does not limit your imagination with the wide color palette available in the KEIM Exclusive and KEIM Avantgarde color charts. All color tones can be mixed with each other, and with monochrome tones between 9001-9010, it adapts to any decoration style. The resulting mineral matte surface offers a noble and modern appearance that does not tire the eyes.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 2 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/full_diedorf-gymnasium-i-72-1.webp\" alt=\"Unlimited Design Possibilities\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Flexible color and texture options ranging from translucent to opaque.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 2 -->\n                            <div class=\"reading-column\">\n                                <h3>Respect for the Nature of Wood: Optimum Room Climate<\/h3>\n                                <p>One of the most valuable features of wood is its hygroscopic nature; that is, its ability to absorb moisture from the environment and release it when necessary. This feature is the foundation of creating a natural and healthy indoor climate. Unfortunately, many traditional wood coatings destroy this feature by forming a film layer on the surface.<\/p>\n                                <p>KEIM Lignosil-Inco, however, is produced with a completely different philosophy. Thanks to its non-film-forming and highly permeable (open to diffusion) structure, it allows the wood to breathe. Thus, it preserves the natural hygroscopic balance of the wood and helps maintain a natural, pleasant, and healthy air quality in your space at all times.<\/p>\n                            <\/div>\n\n                            <!-- PULL QUOTE -->\n                            <div class=\"reading-column\">\n                                <div class=\"pull-quote\">\"Thanks to its non-film-forming and highly permeable structure, it allows the wood to breathe, ensuring a natural, pleasant, and healthy air quality in your space at all times.\"<\/div>\n                            <\/div>\n\n                            <!-- IMAGE 3 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/full_diedorf-gymnasium-i-1-1.webp\" alt=\"Wood Breathing\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Provides a healthy atmosphere by creating an optimum room climate.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 3 -->\n                            <div class=\"reading-column\">\n                                <h3>A Safe Choice for Your Health and the Environment<\/h3>\n                                <p>The impact of the materials we use in our living spaces on our health is now more important than ever. KEIM Lignosil-Inco is a product developed with this awareness, containing no harmful substances.<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Chemical-Free:<\/strong> Contains no solvents or plastics. As a result, no disturbing odors occur during or after application.<\/li>\n                                    <li><strong>Certified Safety:<\/strong> Approved by T\u00dcV testing and proven not to emit harmful emissions.<\/li>\n                                    <li><strong>Ecological Cycle:<\/strong> The product has the Cradle to Cradle certification, which is the highest level of environmental awareness. This is the greatest proof that the product is ecological throughout its entire life cycle.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 4 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/full_Lignosil-Inco-Keim_1-1.webp\" alt=\"Safe and Ecological Product\" loading=\"lazy\" \/> \n                                <span class=\"caption\">An ecological approach certified by T\u00dcV and Cradle to Cradle.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 4 -->\n                            <div class=\"reading-column\">\n                                <h3>Long-Lasting Protection and Economical Use<\/h3>\n                                <p>In addition to aesthetics and health, KEIM Lignosil-Inco stands out with its superior performance.<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Color and Light Fastness:<\/strong> Thanks to its mineral structure, its color stability is extremely high. It does not fade over time and is exceptionally resistant to UV rays and light.<\/li>\n                                    <li><strong>Excellent Adhesion:<\/strong> It adheres perfectly to wooden surfaces, providing long-lasting protection.<\/li>\n                                    <li><strong>Economical Maintenance:<\/strong> The ability to be repaired locally in areas damaged over time, without the need for a full re-coating, significantly reduces maintenance costs.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 5 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/full_Lignosil-Inco-Keim_2-1-1.webp\" alt=\"Long-Lasting Protection\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Wooden surfaces that defy time with excellent adhesion and long-lasting protection.<\/span>\n                            <\/div>\n\n                            <div class=\"reading-column\">\n                                <hr class=\"divider\" \/>\n                                \n                                <!-- SECTION 5: CONCLUSION -->\n                                <h4 style=\"text-align: center; color: #111; font-size: 26px;\">The Natural Comfort Wood Offers You<\/h4>\n                                <p>KEIM Lignosil-Inco is much more than a paint for interior wooden surfaces. It is a highly durable, environmentally friendly solution that reveals the natural beauty of wood and offers a healthy living space.<\/p>\n                                <p>If you want to keep naturalness and aesthetics alive together in your living spaces, you can choose <strong>KEIM Lignosil-Inco<\/strong> and feel the natural comfort that wood offers you.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>For More Information and Consultation<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/sayfa\/keim-lignosil-color\" target=\"_blank\" rel=\"noopener\">Explore Wood Systems<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/\" target=\"_blank\" rel=\"noopener\">Contact Us<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Mineral solutions that respect the nature of wood. | KEIM Silikatboya<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT INTERACTIONS =================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Feature: Automatically set the first image in the content as the card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. SMOOTH IMAGE LOADING (FADE-IN)\n    \/\/ This feature allows images inside the modal to fade in as you scroll\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        \/\/ Show directly if browser does not support IntersectionObserver\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n    \n    \/\/ 3. LINK SECURITY\n    const editorialLinks = document.querySelectorAll('.keim-editorial-wrapper a');\n    editorialLinks.forEach(function(link) {\n      if (link.getAttribute('href') && link.getAttribute('href').startsWith('http')) {\n        if (!link.getAttribute('target')) {\n          link.setAttribute('target', '_blank');\n        }\n        link.setAttribute('rel', 'noopener noreferrer');\n      }\n    });\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (LETOON ARCHITECTURE - MODAL STYLE) ================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* 1. MAIN CONTAINER AND GRID *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden; \/* Prevents background scrolling when modal is open *\/\n    }\n\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n        justify-content: center; \n    }\n\n    \/* 2. CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 480px; \n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.35;\n    }\n\n    \/* 3. MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 900px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* 4. CONTENT STYLES (EDITORIAL DESIGN) *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.8;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 36px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 26px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer h4 {\n        margin-top: 0;\n        font-size: 18px;\n        color: #666;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n    .reading-column strong {\n        color: #ba372a;\n        font-weight: 700;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: WOOD PROTECTION ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW (Preview) -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically set the first image of the content as the cover -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">EXTERIOR DESIGN & WOOD PROTECTION<\/span>\n                    <h3 class=\"blog-card-title\">An Elegant Solution for Natural Greying on Wooden Facades with Lignosil-Verano<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL (POPUP) STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- CONTENT START -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">EXTERIOR DESIGN AND WOOD PROTECTION<\/span>\n                                <h2>An Elegant Solution for Natural Greying on Wooden Facades with Lignosil-Verano<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION TEXT -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">The unique silver-grey appearance that wooden facades acquire over time through nature's influence is an aesthetic maturity reminiscent of mountain cabins in the Alps. However, achieving this natural patina often requires decades of uncontrolled waiting.<\/p>\n                                <p>But what if there was a way to start this process from day one? This is exactly where KEIM's groundbreaking product, <strong>Lignosil-Verano<\/strong>, comes into play.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 (Cover Image) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/www.silikatboya.com\/class\/INNOVAEditor\/assets\/18616107px1920x480.webp\" alt=\"Natural Greying on Wooden Facades\" loading=\"lazy\" \/> \n                                <span class=\"caption\">An elegant solution for an instant, natural silvery-grey appearance on wooden facades.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 1 -->\n                            <div class=\"reading-column\">\n                                <h3>The Dilemma of Wood: Protection or Aesthetics?<\/h3>\n                                <p>An untreated wooden facade is in a constant state of change due to external factors such as the sun's UV rays, rain, and wind. However, depending on numerous factors like the facade's orientation, wood species, and geographical location, this change can create an inhomogeneous and irregular appearance.<\/p>\n                                <p>Traditional protective coatings, on the other hand, form a film layer that prevents the wood from breathing naturally and eventually cracks and peels, requiring constant maintenance.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 2 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/46816745px960x640.webp\" alt=\"Lignosil-Verano Wood Application\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Applying KEIM Lignosil-Verano for a timeless aesthetic.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 2 -->\n                            <div class=\"reading-column\">\n                                <h3>A Revolutionary Solution: KEIM Lignosil-Verano<\/h3>\n                                <p>KEIM Lignosil-Verano brings a smart solution to this dilemma. As is known, KEIM is the pioneer of mineral paint technology as the manufacturer of the world's first patented silicate paint. Developed with this deep-rooted knowledge, Lignosil-Verano is a special silicate-based wood finish (patina).<\/p>\n                                <p>The biggest difference of the product is that instead of creating a classic \"protective layer,\" it becomes part of the wood's natural greying process:<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Instant Aesthetics:<\/strong> It gives your wooden facade a beautiful and natural silvery-grey patina look right from the first application. This way, you don't have to wait for decades of natural processes.<\/li>\n                                    <li><strong>Non-Film Forming, Breathable:<\/strong> The silicate-based binder penetrates deep into the wood and does not form a film on the surface. This allows the wood to continue breathing, internal moisture to be easily expelled, and problems like cracking, blistering, and peeling become a thing of the past.<\/li>\n                                    <li><strong>Natural Greying Over Time:<\/strong> The product consciously puts a protective function in the background. A facade treated with Lignosil-Verano matures further over the years through nature's influence and turns into a true grey patina. Most importantly, it does not require additional maintenance or repainting during this process.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- PULL QUOTE -->\n                            <div class=\"reading-column\">\n                                <div class=\"pull-quote\">\"Instead of creating a classic protective layer, it becomes part of the wood's natural greying process; it gives the wood a beautiful silvery-grey patina look right from the first application.\"<\/div>\n                            <\/div>\n\n                            <!-- IMAGE 3 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/46816747px1920x1280.webp\" alt=\"Eco-Friendly Wood Protection\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Sustainable and eco-friendly structural solutions that respect the environment.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 3 -->\n                            <div class=\"reading-column\">\n                                <h3>Sustainability and Eco-Friendly Structure<\/h3>\n                                <p>Along with its performance, Lignosil-Verano also stands out with its respect for the environment and human health.<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Zero Chemicals:<\/strong> Completely free of biocides and solvents. Thanks to its zero VOC (volatile organic compounds) content, it is extremely safe for applicators and the environment.<\/li>\n                                    <li><strong>Cradle to Cradle Certification:<\/strong> The product holds the prestigious Cradle to Cradle Certified\u00ae Silver and Material Health Gold certificates, proving it is manufactured from eco-friendly, healthy, and recyclable materials.<\/li>\n                                    <li><strong>Color Stability:<\/strong> Due to its mineral structure, the oxide pigments it contains are completely resistant to UV rays, preventing any color fading or alteration.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 4 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/46816795px1920x1280.webp\" alt=\"Lignosil-Verano Color Options\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Rich color options ranging from classic tones to metallic finishes.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 4 -->\n                            <div class=\"reading-column\">\n                                <h3>Rich Color Options and Aesthetic Flexibility<\/h3>\n                                <p>Lignosil-Verano is offered in a wide range of colors, including classic and metallic options. Nature-inspired tones like \"Driftwood\" (4914), \"Weathered Oak\" (4832), or \"Graphite Gray\" (4890) perfectly adapt to your project's architectural style and environmental context.<\/p>\n                            <\/div>\n\n                            <div class=\"reading-column\">\n                                <hr class=\"divider\" \/>\n                                \n                                <!-- SECTION 5: CONCLUSION -->\n                                <h4 style=\"text-align: center; color: #111; font-size: 26px;\">Respect for the Natural Story of Wood<\/h4>\n                                <p>KEIM Lignosil-Verano is a revolutionary product that respects the natural story of wood, highlights its beauty, and initiates a decades-long natural process overnight.<\/p>\n                                <p>Crowned with the 2025 Architectural Record Product of the Year award, this innovative solution is a sustainable and smart choice that addresses aesthetic concerns while eliminating maintenance costs.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>For More Information and Consultation<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/sayfa\/keim-lignosil-dunyada-ilk-ve-tek-patentli-silikat-ahsap-boyasi\" target=\"_blank\" rel=\"noopener\">Explore Exterior Wood Systems<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/\" target=\"_blank\" rel=\"noopener\">Contact Us<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Mineral solutions that respect the nature of wood. | KEIM Silikatboya<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT INTERACTIONS =================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Feature: Automatically set the first image in the content as the card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. SMOOTH IMAGE LOADING (FADE-IN)\n    \/\/ This feature allows images inside the modal to fade in as you scroll\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        \/\/ Show directly if browser does not support IntersectionObserver\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n    \n    \/\/ 3. LINK SECURITY\n    const editorialLinks = document.querySelectorAll('.keim-editorial-wrapper a');\n    editorialLinks.forEach(function(link) {\n      if (link.getAttribute('href') && link.getAttribute('href').startsWith('http')) {\n        if (!link.getAttribute('target')) {\n          link.setAttribute('target', '_blank');\n        }\n        link.setAttribute('rel', 'noopener noreferrer');\n      }\n    });\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (LETOON ARCHITECTURE - MODAL STYLE) ================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* 1. MAIN CONTAINER AND GRID *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden; \/* Prevents background scrolling when modal is open *\/\n    }\n\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n        justify-content: center; \n    }\n\n    \/* 2. CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 480px; \n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.35;\n    }\n\n    \/* 3. MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 900px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* 4. CONTENT STYLES (EDITORIAL DESIGN) *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.8;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 36px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 26px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer h4 {\n        margin-top: 0;\n        font-size: 18px;\n        color: #666;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n    .reading-column strong {\n        color: #ba372a;\n        font-weight: 700;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: RESTORATION ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW (Preview) -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically set the first image of the content as the cover -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">RESTORATION & CULTURAL HERITAGE<\/span>\n                    <h3 class=\"blog-card-title\">The Future of Historic Brick and Natural Stone Structures: KEIM Restauro Lasur<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL (POPUP) STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- CONTENT START -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">Restoration and Cultural Heritage Protection<\/span>\n                                <h2>The Future of Historic Brick and Natural Stone Structures: KEIM Restauro Lasur<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION TEXT -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">Historic buildings are not merely structures made of stone and brick; they are cultural heritages that carry the spirit of the past into the present. The most fundamental element defining the character of these structures is the authentic texture of the natural materials they were built with. However, the abrasive effects of time, air pollution, and harsh climate conditions can leave hard-to-repair damages on these valuable surfaces.<\/p>\n                                <p>A true restoration discipline aims to protect and extend the lifespan of a structure rather than interfering with its original identity. Developed with this philosophy, <strong>KEIM Restauro Lasur<\/strong> sets the standards for modern restoration with its superior sol-silicate technology that protects the historic texture without obscuring it.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 (Cover Image) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/ZdKg0.jpg\" alt=\"Historic Stone Structure Restoration\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Mineral technology that preserves the traces of time rather than erasing them.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 1 -->\n                            <div class=\"reading-column\">\n                                <h3>Structural Breathability: The Vital Role of Water Vapor Permeability<\/h3>\n                                <p>The vast majority of structural problems encountered in historic buildings are moisture-related. Traditional, film-forming synthetic coatings cover the surface almost like a plastic layer, preventing internal moisture from escaping. This situation leads to the internal decay of the stone, efflorescence (salt crystallization), and surface blistering.<\/p>\n                                <p><a href=\"https:\/\/www.silikatboya.com\/sayfa\/keim-restauro-lasur?AppLanguageCode=tr\">KEIM Restauro Lasur<\/a>, thanks to the exceptional water vapor permeability it offers, allows the structure to breathe. While moisture is freely evacuated through the pores of the material, the structure is protected from biological and physical damages.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 2 (Text Style Image Replacement) -->\n                            <div class=\"feature-image-wrapper\" style=\"text-align: center; margin: 60px auto;\">\n                                <span style=\"color: #111111; font-size: 28px; font-weight: bold; line-height: 1.4;\">Mineral Harmony and Consolidation Power<\/span>\n                            <\/div>\n\n                            <!-- SECTION 2 -->\n                            <div class=\"reading-column\">\n                                <p>The most fundamental difference that distinguishes KEIM Restauro Lasur from ordinary paints is its mineral binder structure. This special formula does not merely stick to the applied surface; it establishes a chemical bond with the mineral structure of the stone or brick, carrying out the \"silicification\" process.<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Surface Strengthening:<\/strong> It penetrates the structure of the applied material to consolidate (strengthen) worn surfaces.<\/li>\n                                    <li><strong>Holistic Integration:<\/strong> The paint layer and the surface become a single body, thereby eliminating the risk of peeling or flaking.<\/li>\n                                    <li><strong>Preservation of Natural Texture:<\/strong> It does not clog the characteristic pores of the stone and does not hide its original texture.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- PULL QUOTE -->\n                            <div class=\"reading-column\">\n                                <div class=\"pull-quote\">\"The fundamental principle of restoration is to respect the original story of the structure. Restauro Lasur acts as armor for the stone without obscuring its soul.\"<\/div>\n                            <\/div>\n\n                            <!-- SECTION 3 -->\n                            <div class=\"reading-column\">\n                                <h3>Aesthetic Flexibility: Colors Ranging from Opaque to Transparent<\/h3>\n                                <p>The biggest challenge in restoration projects is ensuring the visual harmony of new repairs with the old texture. Thanks to its low-pigment structure, <a href=\"https:\/\/www.silikatboya.com\/sayfa\/keim-restauro-lasur?AppLanguageCode=tr\">KEIM Restauro Lasur<\/a> does not obscure the natural variations of the stone.<\/p>\n                                <p>The product can be diluted to the desired ratio by mixing it with <strong>KEIM Restauro-Fixativ<\/strong>. In this way, every aesthetic need can be met, from a completely transparent look to a more intense coloration. The touch-ups blend flawlessly with the entirety of the structure.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 3 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/GTcrw.jpg\" alt=\"Brick Facade Protection\" loading=\"lazy\" \/> \n                            <\/div>\n\n                            <!-- SECTION 4 -->\n                            <div class=\"reading-column\">\n                                <h3>Resistance Against Time: UV Durability and Water Repellency<\/h3>\n                                <p>The sun's scorching UV rays quickly degrade the pigment structure of organic paints, causing fading. KEIM's mineral pigments, on the other hand, are completely UV resistant; even after decades, they maintain their initial color depth.<\/p>\n                                <p>At the same time, its enhanced water-repellent feature prevents rainwater and atmospheric pollutants from penetrating deep into the stone. This minimizes cracks and dirt accumulation caused by freeze-thaw cycles, significantly extending maintenance intervals.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 4 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/1-1-2.jpg\" alt=\"Silicate Paint Advantages\" loading=\"lazy\" \/> \n                            <\/div>\n\n                            <!-- SECTION 5 -->\n                            <div class=\"reading-column\">\n                                <h3>Why Not Organic Coatings?<\/h3>\n                                <p>Synthetic resin or silicone coatings lose their flexibility over time and crack. When they need to be renewed, they must be scraped from the surface, a process that can cause great damage to historic materials. <strong>KEIM Restauro Lasur<\/strong>, however, is a lifelong investment. When it's time for renewal, there is no need to strip the surface; applying a new coat to the cleaned surface is entirely sufficient.<\/p>\n                                \n                                <hr class=\"divider\" \/>\n                                \n                                <!-- CONCLUSION -->\n                                <h4 style=\"text-align: center; color: #111; font-size: 26px;\">The Long-Lasting Protector of Cultural Heritage<\/h4>\n                                <p>KEIM Restauro Lasur is not just a paint, but a technical protection system developed to carry historic structures into the future. If you are looking for a solution that respects the authenticity of your natural stone and brick buildings, discover the power of silicate technology.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>For More Inspiration and Technical Information<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/blog\/icerik\/yeni-tugla-yapiniz-icin-nihai-cozum-keim-restauro-lasur-silikat-boya\" target=\"_blank\" rel=\"noopener\">Silicate Solutions for New Brick Facades<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/blog\/icerik\/bahce-citlerinizi-koruyan-boya-keim-lignosil-silikat-ahsap-boyasi\" target=\"_blank\" rel=\"noopener\">Wood Protection: KEIM Lignosil System<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/blog\" target=\"_blank\" rel=\"noopener\">Browse All Our Blog Posts<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Best regards, the <strong>Silikatboya.com<\/strong> team.<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT INTERACTIONS =================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Feature: Automatically set the first image in the content as the card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. SMOOTH IMAGE LOADING (FADE-IN)\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n    \n    \/\/ 3. LINK SECURITY\n    const editorialLinks = document.querySelectorAll('.keim-editorial-wrapper a');\n    editorialLinks.forEach(function(link) {\n      if (link.getAttribute('href') && link.getAttribute('href').startsWith('http')) {\n        if (!link.getAttribute('target')) {\n          link.setAttribute('target', '_blank');\n        }\n        link.setAttribute('rel', 'noopener noreferrer');\n      }\n    });\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (LETOON ARCHITECTURE - MODAL STYLE) ================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* 1. MAIN CONTAINER AND GRID *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden; \/* Prevents background scrolling when modal is open *\/\n    }\n\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n        justify-content: center; \n    }\n\n    \/* 2. CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 480px; \n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.35;\n    }\n\n    \/* 3. MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 900px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* 4. CONTENT STYLES (EDITORIAL DESIGN) *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.8;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 36px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 26px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer h4 {\n        margin-top: 0;\n        font-size: 18px;\n        color: #666;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n    .reading-column strong {\n        color: #ba372a;\n        font-weight: 700;\n    }\n\n    \/* Collage Helper Class *\/\n    .image-collage {\n        display: flex; \n        gap: 15px; \n        margin-bottom: 12px;\n    }\n    .image-collage img {\n        width: calc(50% - 7.5px) !important; \/* Subtracting half the gap *\/\n        object-fit: cover;\n        aspect-ratio: 4 \/ 3;\n    }\n    \n    @media (max-width: 600px) {\n        .image-collage {\n            flex-direction: column;\n            gap: 20px;\n        }\n        .image-collage img {\n            width: 100% !important;\n            aspect-ratio: auto;\n        }\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: INTERIOR OPTIL ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW (Preview) -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically set the first image of the content as the cover -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">INTERIOR DESIGN & AESTHETICS<\/span>\n                    <h3 class=\"blog-card-title\">Colors Untouched by Time: The KEIM Optil Difference in Interiors<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL (POPUP) STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- CONTENT START -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">Interior Design, Innovation, and Aesthetics<\/span>\n                                <h2>Colors Untouched by Time: The KEIM Optil Difference in Interiors<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION TEXT -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">For architects and designers seeking perfection in interior design, one of the greatest disappointments is when the perfect color tone, chosen after weeks of work, loses its vibrancy over time. Walls that fade under the relentless effect of sunlight, moisture, and time overshadow the entire character of a space.<\/p>\n                                <p>However, this is not an inevitable end. Bringing advanced building physics together with artistic aesthetics, the revolutionary interior paint <strong>KEIM Optil<\/strong> completely eliminates this concern with its \"unprecedented lightfastness\" and carries colors beyond time.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 (Cover Image) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/csm_RE_MH_DE_Duesseldorf_Andreas-Quartier__14__d900a98a85.webp\" alt=\"D\u00fcsseldorf Andreas-Quartier Interior\" loading=\"lazy\" \/> \n                                <span class=\"caption\">In prestigious spaces like the D\u00fcsseldorf Andreas-Quartier project, the permanence of colors over time is the most fundamental requirement for architectural integrity.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 1 -->\n                            <div class=\"reading-column\">\n                                <h3>Nature's Formula: Colors that Penetrate the Surface with Sol-Silicate Technology<\/h3>\n                                <p>Traditional paints merely create an artificial film layer on the wall surface. This layer weakens, cracks, and fades over time. The real secret behind KEIM Optil's non-fading colors lies in its <strong>potassium sol-silicate technology<\/strong>.<\/p>\n                                <p>From the moment of application, color pigments integrate with the wall surface at a molecular level through a chemical reaction called <em>\"silicification\"<\/em>. The color ceases to be just a layer resting on the wall; it becomes an inseparable part of the surface. Because the pigments are not trapped by binders, they reflect light directly through a crystalline structure. The result: vibrant walls that never yellow, never fade, and possess unique depth.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 2 (COLLAGE) -->\n                            <div class=\"feature-image-wrapper\">\n                                <div class=\"image-collage\">\n                                    <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/csm_RE_MH_DE_Duesseldorf_Andreas-Quartier__12__1fcb001748.webp\" alt=\"Andreas-Quartier Detail 1\" loading=\"lazy\" \/> \n                                    <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/csm_RE_MH_DE_Duesseldorf_Andreas-Quartier__9__a2bae23f19.webp\" alt=\"Andreas-Quartier Detail 2\" loading=\"lazy\" \/>\n                                <\/div>\n                                <span class=\"caption\">MacroFill technology provides a homogeneous and velvety matte finish, even under challenging spotlighting.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 2 -->\n                            <div class=\"reading-column\">\n                                <h3>MacroFill Technology: No Matter How Challenging the Light<\/h3>\n                                <p>In modern interiors, direct sunlight hitting from south-facing windows or powerful spot lighting creating dramatic effects act as a stress test for wall surfaces. KEIM Optil challenges these difficulties with its next-generation <strong>MacroFill Technology<\/strong>.<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Flawless Matte Finish:<\/strong> It perfectly balances light reflections, giving spaces a sophisticated, velvety ultra-matte texture.<\/li>\n                                    <li><strong>Boundless Color Freedom:<\/strong> With 16 enchanting monochrome colors in the KEIM Avantgarde color chart, gold and silver tones, or 1920s polychromatic schemes... Designers can create enduring projects without compromising their color choices.<\/li>\n                                    <li><strong>Ecological and Breathable Structure:<\/strong> Thanks to its additive-free mineral formula and high vapor diffusion resistance, it preserves indoor air quality. It acts as a shield against structural threats like moisture and alkalinity.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- PULL QUOTE -->\n                            <div class=\"reading-column\">\n                                <div class=\"pull-quote\">\"The color becomes a part of the surface; by reflecting light directly, it maintains its original depth without experiencing fading, yellowing, or loss of matte finish over time.\"<\/div>\n                            <\/div>\n\n                            <!-- SECTION 3 (CONCLUSION) -->\n                            <div class=\"reading-column\">\n                                <h3>An Ecological Investment Against Time<\/h3>\n                                <p>KEIM Optil is not a simple surface coating; it is a permanent investment in the aesthetics and building physics of your interiors. By postponing the need for renovation and refurbishment for many years, it provides significant resource savings.<\/p>\n                                <p>The flawless coverage it offers to professional applicators and the long-lasting visual perfection it promises to the user make it an indispensable element of modern architecture.<\/p>\n                                \n                                <hr class=\"divider\" \/>\n                                \n                                <h4 style=\"text-align: center; color: #111; font-size: 24px;\">May Your Colors Never Fade<\/h4>\n                                <p style=\"text-align: center;\">To create long-term permanence and healthy interiors without compromising aesthetics in your projects, discover <strong>KEIM Optil<\/strong> technology, the choice of the design world.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 3 (COLLAGE - Final Image) -->\n                            <div class=\"feature-image-wrapper\">\n                                <div class=\"image-collage\">\n                                    <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/csm_RE_MH_DE_Duesseldorf_Andreas-Quartier__8__7f8d699750.webp\" alt=\"Andreas-Quartier Corridor\" loading=\"lazy\" \/> \n                                    <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/csm_RE_MH_DE_Duesseldorf_Andreas-Quartier__4__4804b49692.webp\" alt=\"Andreas-Quartier General View\" loading=\"lazy\" \/>\n                                <\/div>\n                                <span class=\"caption\">KEIM Optil secures the aesthetic value of structures by ensuring visual integrity is preserved for many years.<\/span>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>For More Information<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/\" target=\"_blank\" rel=\"noopener\">Home Page<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/iletisim\" target=\"_blank\" rel=\"noopener\">Interior Paint Systems and Consulting<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Content provided by Silikatboya.com<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT INTERACTIONS =================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Feature: Automatically set the first image in the content as the card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. SMOOTH IMAGE LOADING (FADE-IN)\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n    \n    \/\/ 3. LINK SECURITY\n    const editorialLinks = document.querySelectorAll('.keim-editorial-wrapper a');\n    editorialLinks.forEach(function(link) {\n      if (link.getAttribute('href') && link.getAttribute('href').startsWith('http')) {\n        if (!link.getAttribute('target')) {\n          link.setAttribute('target', '_blank');\n        }\n        link.setAttribute('rel', 'noopener noreferrer');\n      }\n    });\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (LETOON ARCHITECTURE - MODAL STYLE) ================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* 1. MAIN CONTAINER AND GRID *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden; \/* Prevents background scrolling when modal is open *\/\n    }\n\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n        justify-content: center; \n    }\n\n    \/* 2. CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 480px; \n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.35;\n    }\n\n    \/* 3. MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 900px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* 4. CONTENT STYLES (EDITORIAL DESIGN) *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.8;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 36px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 26px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer h4 {\n        margin-top: 0;\n        font-size: 18px;\n        color: #666;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n    .reading-column strong {\n        color: #ba372a;\n        font-weight: 700;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: HIGH-RISE FACADES ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW (Preview) -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically set the first image of the content as the cover -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">EXTERIOR RESTORATION & HIGH-RISE<\/span>\n                    <h3 class=\"blog-card-title\">Flawless Protection in High-Rise Buildings: The KEIM SOLDALIT Effect<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL (POPUP) STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- CONTENT START -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">Case Study: Langen, Germany<\/span>\n                                <h2>Flawless Protection in High-Rise Buildings: The KEIM SOLDALIT Effect<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION TEXT -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">High-rise buildings are not only magnificent structures that shape the city skyline but also engineering marvels that withstand the harshest conditions of nature. Severe winds, heavy rains, and relentless UV rays constantly test the exterior facades of these structures.<\/p>\n                                <p>The <em>Feldbergstrasse<\/em> high-rise project in Langen, Germany, is the perfect proof of how aesthetics and durability can come together in such a demanding test. Chosen for this massive renovation project, <strong>KEIM SOLDALIT<\/strong> is changing the fate of tall buildings with its sol-silicate technology.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 (Cover Image) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/csm_RE_MH_DE_Langen_Hochhaus-Feldbergstrasse__4__0e3e1c3273.webp\" alt=\"Langen Feldbergstrasse High-Rise Project Exterior\" loading=\"lazy\" \/> \n                                <span class=\"caption\">The impressive and renovated exterior facade of the modern high-rise project in Langen.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 1: ADVANTAGES -->\n                            <div class=\"reading-column\">\n                                <h3>Why KEIM SOLDALIT for High-Rise Buildings?<\/h3>\n                                <p>Painting the facade of a skyscraper or a high-rise residential building is much more costly and cumbersome than a standard building. Considering scaffolding and labor costs, the chosen paint must last for decades. Here are the features that make SOLDALIT indispensable for such giant projects:<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Maximum Resistance to Severe Weather Conditions:<\/strong> The intensity of wind and rain is much higher on the upper floors of tall buildings. Thanks to its mineral structure, KEIM SOLDALIT chemically integrates with the surface (silicification) and never blisters or peels.<\/li>\n                                    <li><strong>Flawless Adhesion on Old Surfaces:<\/strong> Renovation projects often encounter old plastic (dispersion) paint layers. Thanks to its special sol-silicate binder, SOLDALIT adheres perfectly to both mineral and synthetic surfaces without the need to scrape off the old paint.<\/li>\n                                    <li><strong>Colors That Never Fade:<\/strong> The sun's UV rays rapidly destroy organic pigments in high-rise buildings. Thanks to KEIM's inorganic pigments and mineral binder, the facade's color maintains its initial matte finish and vibrancy even after years pass.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 2 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/csm_RE_MH_DE_Langen_Hochhaus-Feldbergstrasse__1__25c6100a68.webp\" alt=\"Flawless Matte Finish with Keim Soldalit\" loading=\"lazy\" \/> \n                                <span class=\"caption\">A smooth and natural matte finish that highlights the characteristic architectural lines of the building.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 2: ARCHITECTURAL AESTHETICS -->\n                            <div class=\"reading-column\">\n                                <h3>Technology That Preserves the Natural Texture of Architecture<\/h3>\n                                <p>Looking closely at the photos of the Langen project, it is evident that the facade is not merely colored, but the architectural identity of the building is also brought to the forefront. While traditional acrylic paints create an artificial, glossy film layer on the facade, KEIM SOLDALIT offers a mineral matte finish that perfectly diffuses light.<\/p>\n                                <p>This breathable (vapor-permeable) structure allows internal moisture to be expelled, thereby protecting the building's load-bearing systems against corrosion.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 3 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/csm_RE_MH_DE_Langen_Hochhaus-Feldbergstrasse__2__ba3d8aa55c.webp\" alt=\"High-Rise Exterior Detail\" loading=\"lazy\" \/> \n                                <span class=\"caption\">The moment aesthetics and functionality meet KEIM's silicate technology.<\/span>\n                            <\/div>\n\n                            <!-- IMAGE 4 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/csm_RE_MH_DE_Langen_Hochhaus-Feldbergstrasse__3__bfee15915a.webp\" alt=\"Langen Project Keim Paint Application\" loading=\"lazy\" \/> \n                                <span class=\"caption\">An eco-friendly and economical solution thanks to long maintenance intervals.<\/span>\n                            <\/div>\n\n                            <!-- CONCLUSION -->\n                            <div class=\"reading-column\">\n                                <hr class=\"divider\" \/>\n                                <h4 style=\"text-align: center; color: #111; font-size: 24px;\">An Investment Beyond Time<\/h4>\n                                <p style=\"text-align: center;\">Facade renovation in high-rise buildings is not just a cosmetic touch; it is a strategic investment that extends the lifespan of the building. The Langen <em>Feldbergstrasse<\/em> project is a concrete picture of the confidence the right material provides for decades.<\/p>\n                                \n                                <!-- PULL QUOTE -->\n                                <div class=\"pull-quote\">\"Defy the harsh conditions at the peak; make the color and value of your building permanent with KEIM SOLDALIT.\"<\/div>\n                                \n                                <p style=\"text-align: center;\">If you are looking for unmatched durability, low maintenance costs, and non-fading colors in your large-scale architectural projects or renovation works, discover the universal sol-silicate formula of KEIM SOLDALIT.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>Discover More<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/blog\" target=\"_blank\" rel=\"noopener\">Explore Other Projects and Blog Posts<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/iletisim\" target=\"_blank\" rel=\"noopener\">Contact Our Expert Team<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/\" target=\"_blank\" rel=\"noopener\">Return to Home Page<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Content provided by Silikatboya.com<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT INTERACTIONS =================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Feature: Automatically set the first image in the content as the card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. SMOOTH IMAGE LOADING (FADE-IN)\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n    \n    \/\/ 3. LINK SECURITY\n    const editorialLinks = document.querySelectorAll('.keim-editorial-wrapper a');\n    editorialLinks.forEach(function(link) {\n      if (link.getAttribute('href') && link.getAttribute('href').startsWith('http')) {\n        if (!link.getAttribute('target')) {\n          link.setAttribute('target', '_blank');\n        }\n        link.setAttribute('rel', 'noopener noreferrer');\n      }\n    });\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (LETOON ARCHITECTURE - MODAL STYLE) ================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* 1. MAIN CONTAINER AND GRID *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden; \/* Prevents background scrolling when modal is open *\/\n    }\n\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n        justify-content: center; \n    }\n\n    \/* 2. CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 480px; \n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.35;\n    }\n\n    \/* 3. MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 900px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* 4. CONTENT STYLES (EDITORIAL DESIGN) *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.9;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 38px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 28px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer h4 {\n        margin-top: 0;\n        font-size: 18px;\n        color: #666;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n    .reading-column strong {\n        color: #ba372a;\n        font-weight: 700;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: CRACK-BRIDGING SILICATE PRIMER ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW (Preview) -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically set the first image of the content as the cover -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">SURFACE RENOVATION & CRACK SOLUTIONS<\/span>\n                    <h3 class=\"blog-card-title\">KEIM Contact-Plus: Crack-Bridging Silicate Renovation Primer<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL (POPUP) STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- CONTENT START -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">Surface Renovation & Crack Solutions<\/span>\n                                <h2>KEIM Contact-Plus: Crack-Bridging <br \/>Silicate Renovation Primer<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION TEXT -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">One of the greatest obstacles encountered in the restoration of historic buildings and facade renovation projects is structural hairline cracks in the substrate and old organic coatings that cannot be easily removed. In such cases, traditional plastering or priming methods do not always provide a permanent solution.<\/p>\n                                <p><strong>KEIM Contact-Plus<\/strong>, a fiber-reinforced renovation primer, establishes a highly durable adhesion bridge between mineral substrates and existing organic paints, preparing a substrate that complies with building physics principles. Backed by sustainability credentials including <em>Cradle to Cradle Certified\u00ae Silver<\/em> and the <em>C2C Certified Material Health Certificate Gold<\/em>, it is a key cornerstone of healthy architecture.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 (Cover Image) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/3K3jKC34tEI4zErihAur-md.jpeg\" alt=\"KEIM Contact-Plus Crack Bridging Application\" loading=\"lazy\" \/> \n                                <span class=\"caption\">KEIM Contact-Plus fills hairline cracks on the facade, equalizing the surface texture.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 1: ADVANTAGES -->\n                            <div class=\"reading-column\">\n                                <h3>Why KEIM Contact-Plus for Renovation Projects?<\/h3>\n                                <p>Suitable for use on all load-bearing organic coatings\u2014except for plasto-elastic paints and oil paints prone to saponification\u2014this product stands out with its specialized properties:<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Strong Crack Bridging:<\/strong> Thanks to the specialized glass fiber components and balanced particle-size fillers in its formulation, it bridges shrinkage and hairline cracks up to 0.5 mm.<\/li>\n                                    <li><strong>Excellent Texture Equalization:<\/strong> It balances structural and absorption irregularities caused by variously treated substrates, providing a uniform finish.<\/li>\n                                    <li><strong>Natural Silicate Structure:<\/strong> It offers a breathable system without forming a film layer on mineral surfaces. It is fully resistant to UV rays.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 2 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/Contact-Plus-Primer-Smooth-768x1024-1.jpg\" alt=\"KEIM Contact-Plus Smooth Surface Appearance\" loading=\"lazy\" \/> \n                                <span class=\"caption\">A balanced and uniform primer coat appearance obtained after smooth and homogenous substrate preparation.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 2: TECHNICAL PROPERTIES -->\n                            <div class=\"reading-column\">\n                                <h3>Technical Properties and Classification<\/h3>\n                                <p>Formulated for high density and mineral integrity, KEIM Contact-Plus delivers exceptional physical performance on both interior and exterior surfaces:<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Density:<\/strong> Approx. 1.6 g\/cm\u00b3 - 1.8 g\/cm\u00b3<\/li>\n                                    <li><strong>pH Value:<\/strong> Approx. 11 (Alkaline properties)<\/li>\n                                    <li><strong>Maximum Particle Size:<\/strong> 0.5 mm<\/li>\n                                    <li><strong>Water Vapor Diffusion:<\/strong> sd \u2264 0.02 m (Extremely high breathability)<\/li>\n                                    <li><strong>Water Permeability Class:<\/strong> W2<\/li>\n                                    <li><strong>Color Shade:<\/strong> Natural white, matte<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 3 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/Contact-Plus-Textured-768x1024-1.jpg\" alt=\"KEIM Contact-Plus Textured and Filled Structure\" loading=\"lazy\" \/> \n                                <span class=\"caption\">Textured detail displaying 0.5 mm maximum particle size, which enhances filling capacity.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 3: APPLICATION METHODOLOGY -->\n                            <div class=\"reading-column\">\n                                <h3>Application Guidelines and Topcoat Compatibility<\/h3>\n                                <p>To ensure a highly stable primer coat, substrate preparation and application steps must be followed with care:<\/p>\n                                \n                                <h4>Substrate Preparation<\/h4>\n                                <p>The substrate must be dry, structurally sound, clean, and free from dust. Loose particles should be removed mechanically or using a high-pressure water jet. Sintered (glassy) layers on newly rendered or repaired surfaces must be treated and neutralized with <strong>KEIM Fluat-10<\/strong> prior to application.<\/p>\n                                \n                                <h4>Application Conditions and Consumption<\/h4>\n                                <p>Ambient and substrate temperatures must be at least \u2265 5 \u00b0C. Application should not be carried out under direct sunlight, strong winds, or rainy weather conditions. On smooth substrates, the reference consumption rate is approximately <strong>0.4 - 0.5 kg\/m\u00b2<\/strong>.<\/p>\n                                \n                                <h4>Application Method and Thinning<\/h4>\n                                <p>On non-absorbent substrates, the product should always be applied undiluted (neat) using a brush with cross-stroke techniques. On absorbent substrates, depending on surface conditions, it can be diluted up to 10% with KEIM Fixativ, KEIM Soldalit-Fixativ, KEIM Spezial-Fixativ, or KEIM Concretal-Fixativ.<\/p>\n                                \n                                <h4>Topcoat Alternatives<\/h4>\n                                <p>Following the application of KEIM Contact-Plus, protective and decorative topcoats must be applied. The product operates in harmony with high-performance exterior systems such as <strong>KEIM Granital<\/strong>, <strong>KEIM Soldalit<\/strong>, or <strong>KEIM Concretal-W<\/strong>.<\/p>\n                            <\/div>\n\n                            <!-- CONCLUSION -->\n                            <div class=\"reading-column\">\n                                <hr class=\"divider\" \/>\n                                <h4 style=\"text-align: center; color: #111; font-size: 24px;\">A Solid Foundation for Renovation<\/h4>\n                                <p style=\"text-align: center;\">Longevity in exterior renovation is directly related to how well the primer coat bonds to the substrate. KEIM Contact-Plus safely links challenging surfaces with mineral silicate systems.<\/p>\n                                \n                                <!-- PULL QUOTE -->\n                                <div class=\"pull-quote\">\"Overcome the risks posed by old coatings with a fiber-reinforced bridge; achieve permanent restoration quality with KEIM Contact-Plus.\"<\/div>\n                                \n                                <p style=\"text-align: center;\">If you want to apply silicate paints without scraping off old organic coatings and resolve hairline crack issues permanently in your projects, you can confidently choose the KEIM Contact-Plus sol-silicate primer system.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>Discover More<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/blog\" target=\"_blank\" rel=\"noopener\">Explore Other Projects and Blog Posts<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/iletisim\" target=\"_blank\" rel=\"noopener\">Contact Our Expert Team<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/\" target=\"_blank\" rel=\"noopener\">Return to Home Page<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Content provided by Silikatboya.com<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT INTERACTIONS =================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Feature: Automatically set the first image in the content as the card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. SMOOTH IMAGE LOADING (FADE-IN)\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n    \n    \/\/ 3. LINK SECURITY\n    const editorialLinks = document.querySelectorAll('.keim-editorial-wrapper a');\n    editorialLinks.forEach(function(link) {\n      if (link.getAttribute('href') && link.getAttribute('href').startsWith('http')) {\n        if (!link.getAttribute('target')) {\n          link.setAttribute('target', '_blank');\n        }\n        link.setAttribute('rel', 'noopener noreferrer');\n      }\n    });\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (LETOON ARCHITECTURE - MODAL STYLE) ================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* 1. MAIN CONTAINER AND GRID *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden; \/* Prevents background scrolling when modal is open *\/\n    }\n\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n        justify-content: center; \n    }\n\n    \/* 2. CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 480px; \n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.35;\n    }\n\n    \/* 3. MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 900px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* 4. CONTENT STYLES (EDITORIAL DESIGN) *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.9;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 38px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 28px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer h4 {\n        margin-top: 0;\n        font-size: 18px;\n        color: #666;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n    .reading-column strong {\n        color: #ba372a;\n        font-weight: 700;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: KEIM DESIGN-LASUR METALLIC ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW (Preview) -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically set the first image of the content as the cover -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">Metall\u0131c M\u0131neral Arch\u0131tecture and Des\u0131gn<\/span>\n                    <h3 class=\"blog-card-title\">KEIM Design-Lasur Metallic Pigments: The Artistic Harmony of Light and Mineral on Surfaces<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL (POPUP) STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- CONTENT START -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">Metallic Mineral Architecture and Design<\/span>\n                                <h2>KEIM Design-Lasur Metallic Pigments: <br \/>The Artistic Harmony of Light and Mineral on Surfaces<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION TEXT -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">In modern architecture, mineral surfaces like fair-faced concrete, stone, brick, and plaster create a powerful design language with their honest and simple textures. However, adding movement, depth, and a modern luster to these natural surfaces without losing their original character has never been an easy design objective. While the thick, artificial film layers formed by classic organic paints suffocate the mineral texture, traditional methods may fall short of achieving the desired aesthetic level.<\/p>\n                                <p>As a sol-silicate-based semi-transparent mineral (lasur) system, <strong>KEIM Design-Lasur Metallic<\/strong> removes these design boundaries, offering architects and designers vast creative freedom. Combining completely inorganic metallic pigments with the timeless power of silicate, this system chemically integrates with the substrate instead of creating an artificial layer on the surface. Furthermore, carrying the <em>Cradle to Cradle Certified\u00ae Silver<\/em> and <em>C2C Certified Material Health Certificate Gold<\/em> certifications, which validate its sustainability principles, it continues to be a sustainable component of healthy architecture.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 (Cover Image) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/p6_the_imprint_mvrdv_seoul_south_korea_yatzer-1-1400x1050-2.jpg\" alt=\"KEIM Design-Lasur 4 Essential Metallic Colors\" loading=\"lazy\" \/>\n                                <span class=\"caption\">The unique reflections of the four essential metallic tones offered by KEIM Design-Lasur on mineral matte surfaces.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 1: ADVANTAGES -->\n                            <div class=\"reading-column\">\n                                <h3>Facades Coming to Life with Light: The Impact of Metallic Pigments<\/h3>\n                                <p>KEIM Design-Lasur Metallic creates dynamic effects that change according to the angle, intensity of light, and the time of day. Unlik\u0435 classic opaque paints, it does not completely conceal the original texture of the substrate; instead, it highlights it to add depth. This aesthetic effect can be precisely adjusted to the desired level of transparency by mixing it with the system's complementary components, <strong>KEIM Design-Base<\/strong> and <strong>KEIM Design-Fixativ<\/strong>.<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Lightfastness and UV Resistance:<\/strong> While metallic pigments in synthetic paints fade or dull over time under sunlight, the completely inorganic, high-quality metallic pigments used by KEIM preserve their color and brilliance for decades, just like day one.<\/li>\n                                    <li><strong>Full Breathability:<\/strong> Thanks to advanced sol-silicate binder technology, it does not obstruct the surface's water vapor diffusion capacity (sd &lt; 0.01 m). While the walls continue to breathe, moisture accumulation is prevented.<\/li>\n                                    <li><strong>Matte and Natural Appearance:<\/strong> The brilliant metallic effect is combined with an elegant matte finish that carries the nobility of minerals, rather than a plastic or glossy appearance.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 2 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/40-1.png\" alt=\"KEIM Design-Lasur Gold and Silver Combination\" loading=\"lazy\" \/>\n                                <span class=\"caption\">The balanced combination of gold and silver tones gaining depth according to the direction of light in modern projects.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 2: COLOR PALETTE -->\n                            <div class=\"reading-column\">\n                                <h3>Four Essential Metallic Powers and an Expanding Color Palette<\/h3>\n                                <p>The KEIM Design-Lasur Metallic series is built upon four primary metallic color tones. However, for creative designs, these tones can be blended with each other or with other monochrome shades to expand into nearly 40 different metallic variations:<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>Gold (D1001):<\/strong> Ideal for creating a warm, welcoming, and prestigious atmosphere. It has a wide range of use from historical restoration to modern design.<\/li>\n                                    <li><strong>Silver (D1002):<\/strong> Offers a technological and contemporary touch, emphasizing the industrial coolness and modernity of fair-faced concrete surfaces.<\/li>\n                                    <li><strong>Copper (D1003):<\/strong> A noble tone that combines the warmth of earthy shades with metallic depth, highlighting naturalness.<\/li>\n                                    <li><strong>Lava Red (D1004):<\/strong> An unusual option for architects looking to create dynamic, bold, and dramatic shadow play.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 3 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/37.png\" alt=\"KEIM Design-Lasur Gold Application Example\" loading=\"lazy\" \/>\n                                <span class=\"caption\">The pure KEIM Gold metallic mineral application, striking with its rich and warm texture.<\/span>\n                            <\/div>\n\n                            <!-- IMAGE 4 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/38.png\" alt=\"KEIM Design-Lasur Silver and Lava Red Application\" loading=\"lazy\" \/>\n                                <span class=\"caption\">Deep and artistic shadow effects achieved by applying lava red transitions over a silver base.<\/span>\n                            <\/div>\n\n                            <!-- IMAGE 5 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/41-1.png\" alt=\"KEIM Design-Lasur Silver Application\" loading=\"lazy\" \/>\n                                <span class=\"caption\">The pure and clean texture of the silver (Silver) pigment application.<\/span>\n                            <\/div>\n\n                            <!-- IMAGE 6 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/42-1.png\" alt=\"KEIM Design-Lasur Bronze Application\" loading=\"lazy\" \/>\n                                <span class=\"caption\">The mineral paint application with a bronze effect, presenting a classic and timeless stance.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 3: PROJECT REVIEW -->\n                            <div class=\"reading-column\">\n                                <h3>A Masterpiece Inspiring World Architecture: Seoul \"The Imprint\"<\/h3>\n                                <p>Designed by the world-renowned architecture firm <strong>MVRDV<\/strong> in Incheon, Seoul, South Korea, <strong>\"The Imprint\"<\/strong> project is one of the most impressive global examples demonstrating the boundaries of KEIM's metallic pigment technology. Composed of two massive windowless cubes, the facade of this structure features the relief-like shadows of surrounding buildings.<\/p>\n                                <p>At the nightclub entrance, which is the project's most dramatic point, the facade bends upward like a mysterious curtain lifted by an unseen force. To highlight this curved entrance area and draw focus, MVRDV chose <strong>KEIM's custom gold (Gold #1001) metallic pigments<\/strong>. Glistening with sunlight during the day and shining like liquid gold under custom overhead lighting at night, this surface demonstrates the artistic power of mineral systems to the entire world.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 7 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/39.png\" alt=\"Seoul The Imprint MVRDV KEIM Application\" loading=\"lazy\" \/>\n                                <span class=\"caption\">In the MVRDV-designed 'The Imprint' project in Seoul, the entrance area, which gives the impression of a lifted curtain, is highlighted with KEIM Design-Lasur 9001 Gold.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 4: APPLICATION METHODOLOGY -->\n                            <div class=\"reading-column\">\n                                <h3>Application Tips and Design Variations<\/h3>\n                                <p>The final appearance achieved when working with KEIM Design-Lasur Metallic depends on the applicator's technique and the chosen mixing ratio. Different shadow plays can be achieved using classic brush movements, sponge wiping, roller, or spray applications.<\/p>\n                                <p>By adding <strong>KEIM Design-Base<\/strong>, the consistency of the material is maintained while its transparency is increased, which prevents dripping on vertical surfaces. With <strong>KEIM Design-Fixativ<\/strong>, extremely thin and light-permeable, veil-like layers can be created. This flexibility allows every project to transform into a unique work of art.<\/p>\n                            <\/div>\n\n                            <!-- CONCLUSION -->\n                            <div class=\"reading-column\">\n                                <hr class=\"divider\" \/>\n                                <h4 style=\"text-align: center; color: #111; font-size: 24px;\">The Natural Dance of Light in Your Architecture<\/h4>\n                                <p style=\"text-align: center;\">For projects that require surfaces to be not just colored, but also vibrant and deep, KEIM Design-Lasur Metallic offers a noble metallic luster without compromising on the mineral structure.<\/p>\n                                \n                                <!-- PULL QUOTE -->\n                                <div class=\"pull-quote\">\"Combine the natural beauty of concrete and stone with the noble luster of metallic tones; design living walls with KEIM Design-Lasur.\"<\/div>\n                                \n                                <p style=\"text-align: center;\">You can confidently choose KEIM Design-Lasur Metallic sol-silicate mineral potassium silicate paint systems to add depth and elegant character to your projects without disturbing fair-faced concrete or plaster surfaces.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>Discover More<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/blog\" target=\"_blank\" rel=\"noopener\">Explore Other Projects and Blog Posts<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/iletisim\" target=\"_blank\" rel=\"noopener\">Contact Our Expert Team<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/\" target=\"_blank\" rel=\"noopener\">Return to Homepage<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Author: Silikatboya.com<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT INTERACTIONS =================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Feature: Automatically set the first image in the content as the card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. SMOOTH IMAGE LOADING (FADE-IN)\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n    \n    \/\/ 3. LINK SECURITY\n    const editorialLinks = document.querySelectorAll('.keim-editorial-wrapper a');\n    editorialLinks.forEach(function(link) {\n      if (link.getAttribute('href') && link.getAttribute('href').startsWith('http')) {\n        if (!link.getAttribute('target')) {\n          link.setAttribute('target', '_blank');\n        }\n        link.setAttribute('rel', 'noopener noreferrer');\n      }\n    });\n});\n<\/script>\n\n\n\n<!-- ============================================================================== -->\n<!-- =================== CSS (LETOON ARCHITECTURE - MODAL STYLE) ================== -->\n<!-- ============================================================================== -->\n<style>\n    \/* 1. MAIN CONTAINER AND GRID *\/\n    .blog-container {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        max-width: 1200px;\n        margin: 60px auto;\n        padding: 20px;\n        box-sizing: border-box;\n    }\n    \n    body.modal-open {\n        overflow: hidden; \/* Prevents background scrolling when modal is open *\/\n    }\n\n    .blog-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 30px;\n        justify-content: center; \n    }\n\n    \/* 2. CARD DESIGN *\/\n    .blog-card {\n        background-color: #fff;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 480px; \n        position: relative;\n        z-index: 1;\n    }\n    .blog-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    .blog-card-img {\n        height: 60%;\n        background-size: cover;\n        background-position: center;\n        background-color: #eee;\n        transition: transform 0.5s ease;\n    }\n    .blog-card:hover .blog-card-img {\n        transform: scale(1.05); \n    }\n    \n    .blog-card-content {\n        padding: 25px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: #fff;\n        z-index: 1;\n    }\n    \n    .blog-card-category {\n        font-size: 12px;\n        color: #ba372a;\n        font-weight: 700;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        letter-spacing: 1px;\n    }\n\n    .blog-card-title {\n        font-size: 20px;\n        color: #222;\n        font-weight: 700;\n        margin: 0;\n        line-height: 1.35;\n    }\n\n    \/* 3. MODAL (POPUP) STRUCTURE *\/\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: rgba(0, 0, 0, 0.85);\n        backdrop-filter: blur(4px);\n        z-index: 99999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s ease;\n    }\n    .modal-overlay.is-active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-box {\n        position: fixed;\n        top: 50%; left: 50%;\n        width: 95%;\n        max-width: 900px;\n        height: 95vh;\n        background-color: #fff;\n        z-index: 100000;\n        border-radius: 8px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n        transform: translate(-50%, -40%) scale(0.96); \n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-overlay.is-active .modal-box {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .modal-scroll-area {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        scroll-behavior: smooth;\n    }\n\n    .close-modal-btn {\n        position: absolute;\n        top: 20px;\n        right: 25px;\n        width: 44px;\n        height: 44px;\n        background: rgba(255,255,255, 0.9);\n        color: #333;\n        border: 1px solid #ddd;\n        border-radius: 50%;\n        font-size: 28px;\n        cursor: pointer;\n        z-index: 2005;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .close-modal-btn:hover {\n        background: #ba372a;\n        color: #fff;\n        border-color: #ba372a;\n    }\n    \n    \/* 4. CONTENT STYLES (EDITORIAL DESIGN) *\/\n    .keim-editorial-wrapper {\n        font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n        color: #222;\n        line-height: 1.9;\n        font-size: 19px;\n        background-color: #fff;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .reading-column {\n        max-width: 740px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        box-sizing: border-box;\n    }\n    .editorial-header {\n        text-align: center;\n        padding: 80px 20px 40px 20px;\n        background: linear-gradient(to bottom, #fdfdfd, #fff);\n        margin-bottom: 40px;\n        border-bottom: 1px solid #f0f0f0;\n    }\n    .editorial-header h2 {\n        font-family: Arial, sans-serif;\n        color: #ba372a;\n        font-size: 38px;\n        font-weight: 700;\n        line-height: 1.25;\n        margin-bottom: 20px;\n        max-width: 900px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .editorial-header .meta {\n        font-size: 13px;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        margin-top: 20px;\n        display: inline-block;\n        font-weight: bold;\n    }\n    .reading-column h3 {\n        font-size: 26px;\n        font-weight: 700;\n        color: #111;\n        margin-top: 50px;\n        margin-bottom: 20px;\n        line-height: 1.3;\n        text-align: left;\n    }\n    .reading-column h4 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #ba372a;\n        margin-top: 35px;\n        margin-bottom: 10px;\n        text-align: left;\n    }\n    .reading-column p {\n        margin-bottom: 28px;\n        color: #333;\n        text-align: justify;\n    }\n    .drop-cap::first-letter {\n        font-size: 3.5em;\n        float: left;\n        margin-right: 12px;\n        margin-top: -8px;\n        line-height: 1;\n        font-weight: 700;\n        color: #ba372a;\n    }\n    .feature-image-wrapper {\n        width: 100%;\n        max-width: 800px;\n        margin: 50px auto;\n        padding: 0 20px;\n        box-sizing: border-box;\n        display: block;\n    }\n    .feature-image-wrapper img {\n        width: 100%;\n        height: auto;\n        border-radius: 6px;\n        display: block;\n        box-shadow: 0 8px 25px rgba(0,0,0,0.1); \n        transition: opacity 0.5s ease;\n    }\n    .caption {\n        font-family: Arial, sans-serif;\n        font-size: 13px;\n        color: #777;\n        text-align: center;\n        margin-top: 12px;\n        font-style: italic;\n        display: block;\n    }\n    .pull-quote {\n        font-size: 22px;\n        line-height: 1.5;\n        font-weight: normal;\n        font-style: italic;\n        color: #444;\n        text-align: center;\n        margin: 50px 0;\n        padding: 30px;\n        border-top: 2px solid #ba372a;\n        border-bottom: 2px solid #ba372a;\n        background-color: #fbfbfb;\n    }\n    .editorial-list {\n        list-style: none;\n        padding: 0;\n        margin: 30px 0;\n    }\n    .editorial-list li {\n        margin-bottom: 20px;\n        padding-left: 30px;\n        position: relative;\n        text-align: justify;\n    }\n    .editorial-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background-color: #ba372a;\n        border-radius: 50%;\n        position: absolute;\n        left: 0;\n        top: 10px;\n    }\n    .reading-column a {\n        color: #ba372a;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 3px;\n        transition: all 0.2s;\n        font-weight: bold;\n    }\n    .reading-column a:hover {\n        background-color: #ba372a;\n        color: #fff;\n        text-decoration: none;\n        padding: 2px 4px;\n        border-radius: 2px;\n        margin: -2px -4px;\n    }\n    .divider {\n        border: 0;\n        height: 1px;\n        background: #e0e0e0;\n        margin: 60px auto;\n        width: 60%;\n    }\n    .clean-footer {\n        background-color: #f9f9f9;\n        padding: 60px 20px;\n        text-align: center;\n        margin-top: 80px;\n        font-size: 16px;\n    }\n    .clean-footer h4 {\n        margin-top: 0;\n        font-size: 18px;\n        color: #666;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n    .clean-footer ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 20px;\n    }\n    .clean-footer li {\n        margin-bottom: 12px;\n    }\n    .clean-footer a {\n        color: #333;\n        text-decoration: none;\n        font-weight: bold;\n        border-bottom: 1px solid #ddd;\n        transition: color 0.2s;\n    }\n    .clean-footer a:hover {\n        color: #ba372a;\n        border-color: #ba372a;\n    }\n    .reading-column strong {\n        color: #ba372a;\n        font-weight: 700;\n    }\n<\/style>\n\n<!-- ============================================================================== -->\n<!-- =========================== BLOG CONTENT AREA ================================ -->\n<!-- ============================================================================== -->\n\n<div class=\"blog-container\">\n    <div class=\"blog-grid\">\n\n        <!-- ### BLOG UNIT: OMER SELCUK BAZ, TROY AND KONYA ### -->\n        <div class=\"blog-unit\">\n            \n            <!-- 1. CARD VIEW (Preview) -->\n            <div class=\"blog-card\">\n                <!-- Javascript will automatically set the first image of the content as the cover -->\n                <div class=\"blog-card-img\"><\/div>\n                <div class=\"blog-card-content\">\n                    <span class=\"blog-card-category\">Arch\u0131tectural Des\u0131gn and Mater\u0131al Ph\u0131losophy<\/span>\n                    <h3 class=\"blog-card-title\">Designing the Spirit of Place and the Naturalness of Material: \u00d6mer Sel\u00e7uk Baz, Troy and Konya<\/h3>\n                <\/div>\n            <\/div>\n\n            <!-- 2. HIDDEN MODAL (POPUP) STRUCTURE -->\n            <div class=\"modal-overlay\">\n                <div class=\"modal-box\">\n                    <button class=\"close-modal-btn\" title=\"Close\">&times;<\/button>\n                    \n                    <div class=\"modal-scroll-area\">\n                        \n                        <!-- CONTENT START -->\n                        <div class=\"keim-editorial-wrapper\">\n                            \n                            <!-- HEADER AREA -->\n                            <header class=\"editorial-header\">\n                                <span class=\"meta\">Architectural Design and Material Philosophy<\/span>\n                                <h2>Designing the Spirit of Place and the Naturalness of Material: <br \/>\u00d6mer Sel\u00e7uk Baz, Troy and Konya<\/h2>\n                            <\/header>\n\n                            <!-- INTRODUCTION TEXT -->\n                            <div class=\"reading-column\">\n                                <p class=\"drop-cap\">The design approach of Yal\u0131n Mimarl\u0131k's founding partner, architect \u00d6mer Sel\u00e7uk Baz, comes to life in projects that combine the narrative of their geography with the honest use of materials. Building a physical and meaningful dialogue between the designed structures and their surroundings forms one of the most fundamental cornerstones of this architectural language. The most concrete and impactful examples of this approach can be observed in the Troy Museum and Konya City Library projects.<\/p>\n                                <p>In both iconic structures, <strong>KEIM Concretal Lasur<\/strong> was preferred to ensure aesthetic integrity on fair-faced concrete surfaces, balance surface imperfections, and preserve the breathable structure of the concrete. This special sol-silicate mineral system protects \u00d6mer Sel\u00e7uk Baz's philosophy of using raw and honest materials over the long term, without overshadowing the original character of the buildings.<\/p>\n                            <\/div>\n                            \n                            <!-- IMAGE 1 (Cover Image) -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/29.jpg\" alt=\"Troy Museum Architectural Exterior\" loading=\"lazy\" \/>\n                                <span class=\"caption\">The exquisite integration of fair-faced concrete and natural landscape, preserved timelessly by KEIM Concretal Lasur.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 1: TROY MUSEUM -->\n                            <div class=\"reading-column\">\n                                <h3>The Layers of History with the Troy Museum<\/h3>\n                                <p>Symbolizing the layers of history and the archaeological excavation process, the Troy Museum evokes the feeling of a monumental mass rising from the ground, primarily through its choice of fair-faced concrete and weathered (Corten) steel. \u00d6mer Sel\u00e7uk Baz highlights the raw and aging character of the materials, establishing a timeless narrative between the past and the present.<\/p>\n                                <p>Preserving the natural, matte, and raw texture of the fair-faced concrete surfaces was of paramount importance in the museum's design language. This powerful connection of the design with the past has been registered with several major national and international achievements:<\/p>\n                                <ul class=\"editorial-list\">\n                                    <li><strong>2020 National Architecture Award:<\/strong> The project's honest relationship with the local and historical context was honored.<\/li>\n                                    <li><strong>European Museum Forum Museum of the Year Special Award:<\/strong> Highly acclaimed internationally for its contemporary exhibition and architectural language.<\/li>\n                                    <li><strong>Material Honesty:<\/strong> The changing structure of fair-faced concrete and Corten steel over time allows the museum to age like a living organism.<\/li>\n                                <\/ul>\n                            <\/div>\n\n                            <!-- IMAGE 2 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/TRUVA-MUZESI-7.jpg\" alt=\"Troy Museum Brutalist Concrete and Corten Details\" loading=\"lazy\" \/>\n                                <span class=\"caption\">The matte texture of fair-faced concrete and the raw character of Corten steel symbolize the layered structure of archaeological excavations.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 2: KONYA CITY LIBRARY -->\n                            <div class=\"reading-column\">\n                                <h3>An Urban Garden of Knowledge: Konya City Library<\/h3>\n                                <p>Designed by Yal\u0131n Mimarl\u0131k and architect \u00d6mer Sel\u00e7uk Baz, the Konya City Library was developed not just as a single library building, but as a contemporary cultural complex integrating with urban life and green spaces. Shaping itself by preserving existing trees and green axes, the project draws attention with its environmentally sensitive design approach.<\/p>\n                                <p>As an important part of the sustainability vision within the scope of the United Nations \"Zero Carbon Buildings Project,\" the library also holds the distinction of being one of Turkey's first zero-carbon buildings. Blending traditional architectural layout with modern design principles, the simple and strong expression of fair-faced concrete forms the main setup of the structure.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 3 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/konya-sehir-kutuphanesi3-1.jpg\" alt=\"Konya City Library Exterior and Green Landscape Integration\" loading=\"lazy\" \/>\n                                <span class=\"caption\">Konya City Library provides a modern and eco-friendly contribution to the city's cultural heritage.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 3: MATERIAL & APPLICATION -->\n                            <div class=\"reading-column\">\n                                <h3>Preserving the Natural and Mineral Character<\/h3>\n                                <p>Whether in the monumental mass of the Troy Museum or the urban courtyard of the Konya City Library, preserving the natural, mineral, and matte character of the brutalist texture emerged as one of the most critical design decisions. Supporting the character of the concrete with structural wooden details, the goal was to make these structures long-lasting without disturbing the natural nature of the concrete.<\/p>\n                                <p>To support aesthetic integrity, eliminate potential color differences and casting defects on the surface, and preserve the breathable structure of the concrete, <strong>KEIM Concretal Lasur<\/strong> was selected for these projects. This semi-transparent mineral glaze system protects the timeless character of the concrete without creating an artificial, glossy, or plastic layer on the surface.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 4 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/konya-sehir-kutuphanesi2-1.jpg\" alt=\"Konya City Library Concrete Structure Detail\" loading=\"lazy\" \/>\n                                <span class=\"caption\">Fair-faced concrete plays the leading role in the library, bringing traditional architectural schemes together with modern details.<\/span>\n                            <\/div>\n\n                            <!-- IMAGE 5 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/img90.jpg\" alt=\"Troy Museum Interior Concrete Walls\" loading=\"lazy\" \/>\n                                <span class=\"caption\">In the interior, the raw and matte character of the fair-faced concrete is homogeneously preserved with KEIM Concretal Lasur application.<\/span>\n                            <\/div>\n\n                            <!-- SECTION 4: SUSTAINABILITY -->\n                            <div class=\"reading-column\">\n                                <h3>Smart Solutions for Sustainable Architecture<\/h3>\n                                <p>While Konya City Library brings a new public breath to the city with its urban courtyard connected by transportation axes, protected wooded areas, and honest use of materials; Troy Museum carries the historical richness of the geography into the future with honest materials. The KEIM mineral systems preferred in both projects contribute directly to the ecological and sustainable identity of the buildings.<\/p>\n                                <p>Thanks to its silicate-based binder technology, this application does not obstruct the water vapor permeability of the surface, thus not disturbing the natural moisture balance of the concrete and preventing problems such as bubbling and peeling. In this way, these iconic surfaces designed by \u00d6mer Sel\u00e7uk Baz gain resistance against external weather conditions without taking on an artificial appearance.<\/p>\n                            <\/div>\n\n                            <!-- IMAGE 6 -->\n                            <div class=\"feature-image-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/blog.letoon.com.tr\/wp-content\/uploads\/40fae8bb-92b1-41be-ac03-0eaad5845741-1.png\" alt=\"Konya City Library Concrete and Wood Integration\" loading=\"lazy\" \/>\n                                <span class=\"caption\">The harmony of concrete and wood aesthetically completes the zero-carbon sustainability vision of the library.<\/span>\n                            <\/div>\n\n                            <!-- CONCLUSION -->\n                            <div class=\"reading-column\">\n                                <hr class=\"divider\" \/>\n                                <h4 style=\"text-align: center; color: #111; font-size: 24px;\">Carrying the Spirit of History and the City into the Future<\/h4>\n                                <p style=\"text-align: center;\">These two major works designed by Yal\u0131n Mimarl\u0131k stand among the most qualified examples of respect shown to the honesty and naturalness of materials in architecture.<\/p>\n                                \n                                <!-- PULL QUOTE -->\n                                <div class=\"pull-quote\">\"The original story of concrete and earth, the raw character of honest materials, becomes timeless with KEIM's mineral protection.\"<\/div>\n                                \n                                <p style=\"text-align: center;\">You can share your thoughts about this minimalist architectural language that is sensitive to the natural environment and builds strong ties with history and the city in the comments.<\/p>\n                            <\/div>\n\n                            <!-- FOOTER -->\n                            <div class=\"clean-footer\">\n                                <h4>Discover More<\/h4>\n                                <ul>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/blog\" target=\"_blank\" rel=\"noopener\">Explore Other Projects and Blog Posts<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/iletisim\" target=\"_blank\" rel=\"noopener\">Contact Our Expert Team<\/a><\/li>\n                                    <li><a href=\"https:\/\/www.silikatboya.com\/\" target=\"_blank\" rel=\"noopener\">Return to Homepage<\/a><\/li>\n                                <\/ul>\n                                <p style=\"margin-top: 30px; font-size: 14px; color: #aaa;\">Author: Silikatboya.com<\/p>\n                            <\/div>\n\n                        <\/div>\n                        <!-- CONTENT END -->\n                    \n                    <\/div> <!-- \/.modal-scroll-area -->\n                <\/div> <!-- \/.modal-box -->\n            <\/div> <!-- \/.modal-overlay -->\n\n        <\/div>\n        <!-- ### BLOG UNIT END ### -->\n\n    <\/div>\n<\/div>\n\n<!-- ============================================================================== -->\n<!-- ================== JAVASCRIPT INTERACTIONS =================================== -->\n<!-- ============================================================================== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    \/\/ 1. MODAL AND CARD CONTROLS\n    const blogUnits = document.querySelectorAll('.blog-unit');\n\n    blogUnits.forEach(unit => {\n        const card = unit.querySelector('.blog-card');\n        const cardImgDiv = unit.querySelector('.blog-card-img');\n        const overlay = unit.querySelector('.modal-overlay');\n        const closeBtn = unit.querySelector('.close-modal-btn');\n        \n        \/\/ Feature: Automatically set the first image in the content as the card cover\n        const firstContentImg = unit.querySelector('.keim-editorial-wrapper img');\n        if(firstContentImg && cardImgDiv) {\n            cardImgDiv.style.backgroundImage = `url(${firstContentImg.src})`;\n        }\n\n        \/\/ Open Function\n        const openModal = () => {\n            overlay.classList.add('is-active');\n            document.body.classList.add('modal-open');\n        };\n\n        \/\/ Close Function\n        const closeModal = () => {\n            overlay.classList.remove('is-active');\n            document.body.classList.remove('modal-open');\n        };\n\n        \/\/ Event Listeners\n        if(card) card.addEventListener('click', openModal);\n        \n        if(closeBtn) {\n            closeBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                closeModal();\n            });\n        }\n\n        if(overlay) {\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    closeModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Close with ESC Key\n    window.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            const activeOverlay = document.querySelector('.modal-overlay.is-active');\n            if (activeOverlay) {\n                activeOverlay.classList.remove('is-active');\n                document.body.classList.remove('modal-open');\n            }\n        }\n    });\n\n    \/\/ 2. SMOOTH IMAGE LOADING (FADE-IN)\n    const editorialImages = document.querySelectorAll('.keim-editorial-wrapper img');\n    \n    if('IntersectionObserver' in window) {\n        editorialImages.forEach(img => {\n            img.style.opacity = '0'; \/\/ Hide initially\n            img.style.transition = 'opacity 0.8s ease';\n        });\n\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    obs.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        editorialImages.forEach(img => {\n            observer.observe(img);\n        });\n    } else {\n        editorialImages.forEach(img => img.style.opacity = '1');\n    }\n    \n    \/\/ 3. LINK SECURITY\n    const editorialLinks = document.querySelectorAll('.keim-editorial-wrapper a');\n    editorialLinks.forEach(function(link) {\n      if (link.getAttribute('href') && link.getAttribute('href').startsWith('http')) {\n        if (!link.getAttribute('target')) {\n          link.setAttribute('target', '_blank');\n        }\n        link.setAttribute('rel', 'noopener noreferrer');\n      }\n    });\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Exter\u0131or Protect\u0131on Exterior Paints in Cold Winters: Durability and Aesthetics &times; SEASONAL FACADE PROTECTION Exterior Paints in Cold Winters: Durability<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3139","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.letoon.com.tr\/eng\/wp-json\/wp\/v2\/pages\/3139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.letoon.com.tr\/eng\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.letoon.com.tr\/eng\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.letoon.com.tr\/eng\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.letoon.com.tr\/eng\/wp-json\/wp\/v2\/comments?post=3139"}],"version-history":[{"count":0,"href":"https:\/\/www.letoon.com.tr\/eng\/wp-json\/wp\/v2\/pages\/3139\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.letoon.com.tr\/eng\/wp-json\/wp\/v2\/media?parent=3139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}