{"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-03-06T13:26:35","modified_gmt":"2026-03-06T10:26:35","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","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}]}}