{"id":2110,"date":"2014-09-17T05:39:56","date_gmt":"2014-09-17T13:39:56","guid":{"rendered":"http:\/\/www.letoon.com.tr\/?page_id=2110"},"modified":"2026-07-24T16:13:24","modified_gmt":"2026-07-24T13:13:24","slug":"keim-products","status":"publish","type":"page","link":"https:\/\/www.letoon.com.tr\/eng\/keim\/keim-products\/","title":{"rendered":"KEIM PRODUCTS"},"content":{"rendered":"\n<!-- Google Fonts & GSAP CDN -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n\n<style>\n  :root {\n    --keim-blue: #15296B;\n    --keim-blue-light: rgba(21, 41, 107, 0.06);\n    --keim-red: #D20422;\n    --keim-red-soft: rgba(210, 4, 34, 0.08);\n    --keim-dark: #0f172a;\n    --keim-gray-bg: #f8fafc;\n    --keim-border: #e2e8f0;\n    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);\n    --hover-shadow: 0 20px 35px -10px rgba(21, 41, 107, 0.18);\n  }\n\n  \/* Catalog Container *\/\n  .keim-catalog-wrapper {\n    font-family: 'Plus Jakarta Sans', sans-serif;\n    max-width: 1200px;\n    margin: 40px auto;\n    background: #ffffff;\n    border-radius: 20px;\n    box-shadow: var(--card-shadow);\n    border: 1px solid var(--keim-border);\n    overflow: hidden;\n  }\n\n  \/* Navigation Bar (Tabs) *\/\n  .keim-tabs-header {\n    background: var(--keim-gray-bg);\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--keim-border);\n  }\n\n  .keim-tabs-nav {\n    display: flex;\n    gap: 8px;\n    justify-content: center;\n    align-items: center;\n    overflow-x: auto;\n    scrollbar-width: none; \/* Firefox *\/\n    padding: 4px 0;\n  }\n\n  .keim-tabs-nav::-webkit-scrollbar {\n    display: none; \/* Chrome\/Safari *\/\n  }\n\n  .keim-tab-btn {\n    background: transparent;\n    border: 1px solid transparent;\n    padding: 10px 20px;\n    font-size: 0.92rem;\n    font-weight: 600;\n    color: #64748b;\n    cursor: pointer;\n    border-radius: 100px;\n    transition: all 0.25s ease;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .keim-tab-btn:hover {\n    color: var(--keim-blue);\n    background: var(--keim-blue-light);\n  }\n\n  .keim-tab-btn.active {\n    background: var(--keim-blue);\n    color: #ffffff;\n    box-shadow: 0 4px 12px rgba(21, 41, 107, 0.25);\n  }\n\n  \/* Content Area *\/\n  .keim-content-area {\n    padding: 40px;\n    min-height: 420px;\n    background: #ffffff;\n  }\n\n  .keim-tab-content {\n    display: none; \/* Handled by JS & GSAP *\/\n  }\n\n  .keim-tab-content.active {\n    display: block;\n  }\n\n  \/* Grid Layout *\/\n  .keim-product-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));\n    gap: 30px;\n  }\n\n  \/* Product Card *\/\n  .keim-product-card {\n    display: flex;\n    flex-direction: column;\n    text-decoration: none;\n    background: #ffffff;\n    border-radius: 14px;\n    border: 1px solid var(--keim-border);\n    padding: 12px;\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;\n  }\n\n  .keim-product-card:hover {\n    transform: translateY(-8px);\n    box-shadow: var(--hover-shadow);\n    border-color: var(--keim-blue);\n  }\n\n  \/* Image Wrapper *\/\n  .keim-card-img-wrapper {\n    position: relative;\n    width: 100%;\n    aspect-ratio: 1 \/ 1.414; \/* A4 Ratio *\/\n    border-radius: 10px;\n    overflow: hidden;\n    background: var(--keim-gray-bg);\n  }\n\n  .keim-card-img-wrapper img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.5s ease;\n  }\n\n  .keim-product-card:hover .keim-card-img-wrapper img {\n    transform: scale(1.06);\n  }\n\n  \/* PDF Overlay Badge *\/\n  .pdf-badge {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    background: rgba(15, 23, 42, 0.75);\n    backdrop-filter: blur(8px);\n    color: #ffffff;\n    padding: 4px 10px;\n    border-radius: 6px;\n    font-size: 0.75rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    letter-spacing: 0.5px;\n    transition: background 0.3s ease;\n  }\n\n  .keim-product-card:hover .pdf-badge {\n    background: var(--keim-red);\n  }\n\n  \/* Info Section *\/\n  .keim-card-info {\n    padding: 14px 6px 4px 6px;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .keim-card-title {\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: var(--keim-dark);\n    margin-bottom: 8px;\n    transition: color 0.3s ease;\n  }\n\n  .keim-card-action {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.85rem;\n    color: var(--keim-red);\n    font-weight: 700;\n    transition: gap 0.3s ease, color 0.3s ease;\n  }\n\n  .keim-card-action svg {\n    width: 14px;\n    height: 14px;\n    fill: currentColor;\n    transition: transform 0.3s ease;\n  }\n\n  .keim-product-card:hover .keim-card-title {\n    color: var(--keim-blue);\n  }\n\n  .keim-product-card:hover .keim-card-action {\n    gap: 9px;\n  }\n\n  .keim-product-card:hover .keim-card-action svg {\n    transform: translateY(2px);\n  }\n\n  \/* Mobile Responsive *\/\n  @media (max-width: 768px) {\n    .keim-tabs-nav {\n      justify-content: flex-start;\n    }\n    .keim-content-area {\n      padding: 24px 16px;\n    }\n    .keim-product-grid {\n      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n      gap: 16px;\n    }\n    .keim-product-card {\n      padding: 8px;\n    }\n    .keim-card-title {\n      font-size: 0.95rem;\n    }\n    .keim-card-action {\n      font-size: 0.78rem;\n    }\n  }\n<\/style>\n\n<div class=\"keim-catalog-wrapper\">\n\n  <!-- Header & Tabs -->\n  <div class=\"keim-tabs-header\">\n    <nav class=\"keim-tabs-nav\">\n      <button class=\"keim-tab-btn active\" onclick=\"openKeimTab(event, 'tab-exterior')\">\n        Exter\u0131or Pa\u0131nts\n      <\/button>\n      <button class=\"keim-tab-btn\" onclick=\"openKeimTab(event, 'tab-interior')\">\n        Inter\u0131or Pa\u0131nts\n      <\/button>\n      <button class=\"keim-tab-btn\" onclick=\"openKeimTab(event, 'tab-concrete')\">\n        Concrete Repa\u0131r\n      <\/button>\n      <button class=\"keim-tab-btn\" onclick=\"openKeimTab(event, 'tab-tablature')\">\n        Tablature Pa\u0131nts\n      <\/button>\n      <button class=\"keim-tab-btn\" onclick=\"openKeimTab(event, 'tab-wood')\">\n        Wood Pa\u0131nts\n      <\/button>\n      <button class=\"keim-tab-btn\" onclick=\"openKeimTab(event, 'tab-restoration')\">\n        Restorat\u0131on\n      <\/button>\n    <\/nav>\n  <\/div>\n\n  <!-- Content Area -->\n  <div class=\"keim-content-area\">\n\n    <!-- 1. Exterior Paints -->\n    <div id=\"tab-exterior\" class=\"keim-tab-content active\">\n      <div class=\"keim-product-grid\">\n        <a href=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/soldalit_letoonmimarlik.pdf\" target=\"_blank\" class=\"keim-product-card\">\n          <div class=\"keim-card-img-wrapper\">\n            <span class=\"pdf-badge\">PDF<\/span>\n            <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/soldalit_letoonmimarlik_page-0001-scaled.jpg\" alt=\"Soldalit\">\n          <\/div>\n          <div class=\"keim-card-info\">\n            <div class=\"keim-card-title\">Soldalit<\/div>\n            <div class=\"keim-card-action\">\n              Download PDF\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\/><\/svg>\n            <\/div>\n          <\/div>\n        <\/a>\n\n        <a href=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/royalan_letoonmimarlik.pdf\" target=\"_blank\" class=\"keim-product-card\">\n          <div class=\"keim-card-img-wrapper\">\n            <span class=\"pdf-badge\">PDF<\/span>\n            <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/royalan_letoonmimarlik_page-0001-scaled.jpg\" alt=\"Royalan\">\n          <\/div>\n          <div class=\"keim-card-info\">\n            <div class=\"keim-card-title\">Royalan<\/div>\n            <div class=\"keim-card-action\">\n              Download PDF\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\/><\/svg>\n            <\/div>\n          <\/div>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- 2. Interior Paints -->\n    <div id=\"tab-interior\" class=\"keim-tab-content\">\n      <div class=\"keim-product-grid\">\n        <a href=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/innotop_letoonmimarlik.pdf\" target=\"_blank\" class=\"keim-product-card\">\n          <div class=\"keim-card-img-wrapper\">\n            <span class=\"pdf-badge\">PDF<\/span>\n            <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/innotop_letoonmimarlik_page-0001-scaled.jpg\" alt=\"Innotop\">\n          <\/div>\n          <div class=\"keim-card-info\">\n            <div class=\"keim-card-title\">Innotop<\/div>\n            <div class=\"keim-card-action\">\n              Download PDF\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\/><\/svg>\n            <\/div>\n          <\/div>\n        <\/a>\n\n        <a href=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/ecosil_ME_letoonmimarlik.pdf\" target=\"_blank\" class=\"keim-product-card\">\n          <div class=\"keim-card-img-wrapper\">\n            <span class=\"pdf-badge\">PDF<\/span>\n            <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/ecosil_ME_letoonmimarlik_page-0001-scaled.jpg\" alt=\"Ecosil ME\">\n          <\/div>\n          <div class=\"keim-card-info\">\n            <div class=\"keim-card-title\">Ecosil ME<\/div>\n            <div class=\"keim-card-action\">\n              Download PDF\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\/><\/svg>\n            <\/div>\n          <\/div>\n        <\/a>\n\n        <a href=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/optil_letoonmimarlik.pdf\" target=\"_blank\" class=\"keim-product-card\">\n          <div class=\"keim-card-img-wrapper\">\n            <span class=\"pdf-badge\">PDF<\/span>\n            <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/optil.png\" alt=\"Optil\">\n          <\/div>\n          <div class=\"keim-card-info\">\n            <div class=\"keim-card-title\">Optil<\/div>\n            <div class=\"keim-card-action\">\n              Download PDF\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\/><\/svg>\n            <\/div>\n          <\/div>\n        <\/a>\n\n        <a href=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/designLasur_letoonmimarlik.pdf\" target=\"_blank\" class=\"keim-product-card\">\n          <div class=\"keim-card-img-wrapper\">\n            <span class=\"pdf-badge\">PDF<\/span>\n            <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/designLasur_letoonmimarlik_page-0001-scaled.jpg\" alt=\"Design Lasur\">\n          <\/div>\n          <div class=\"keim-card-info\">\n            <div class=\"keim-card-title\">Design Lasur<\/div>\n            <div class=\"keim-card-action\">\n              Download PDF\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\/><\/svg>\n            <\/div>\n          <\/div>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- 3. Concrete Repair -->\n    <div id=\"tab-concrete\" class=\"keim-tab-content\">\n      <div class=\"keim-product-grid\">\n        <a href=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/concetalLasur_letoonmimarlik.pdf\" target=\"_blank\" class=\"keim-product-card\">\n          <div class=\"keim-card-img-wrapper\">\n            <span class=\"pdf-badge\">PDF<\/span>\n            <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/concretal-lasur-scaled.jpg\" alt=\"Concetal Lasur\">\n          <\/div>\n          <div class=\"keim-card-info\">\n            <div class=\"keim-card-title\">Concetal Lasur<\/div>\n            <div class=\"keim-card-action\">\n              Download PDF\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\/><\/svg>\n            <\/div>\n          <\/div>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- 4. Tablature Paints -->\n    <div id=\"tab-tablature\" class=\"keim-tab-content\">\n      <div class=\"keim-product-grid\">\n        <a href=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/designLasur_letoonmimarlik.pdf\" target=\"_blank\" class=\"keim-product-card\">\n          <div class=\"keim-card-img-wrapper\">\n            <span class=\"pdf-badge\">PDF<\/span>\n            <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/designLasur_letoonmimarlik_page-0001-scaled.jpg\" alt=\"Design Lasur\">\n          <\/div>\n          <div class=\"keim-card-info\">\n            <div class=\"keim-card-title\">Design Lasur<\/div>\n            <div class=\"keim-card-action\">\n              Download PDF\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\/><\/svg>\n            <\/div>\n          <\/div>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- 5. Wood Paints -->\n    <div id=\"tab-wood\" class=\"keim-tab-content\">\n      <div class=\"keim-product-grid\">\n        <a href=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/lignosil_03_2013_turk.pdf\" target=\"_blank\" class=\"keim-product-card\">\n          <div class=\"keim-card-img-wrapper\">\n            <span class=\"pdf-badge\">PDF<\/span>\n            <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/lignosil-scaled.jpg\" alt=\"Lignosil\">\n          <\/div>\n          <div class=\"keim-card-info\">\n            <div class=\"keim-card-title\">Lignosil<\/div>\n            <div class=\"keim-card-action\">\n              Download PDF\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\/><\/svg>\n            <\/div>\n          <\/div>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- 6. Restoration Products -->\n    <div id=\"tab-restoration\" class=\"keim-tab-content\">\n      <div class=\"keim-product-grid\">\n        <a href=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/restauro_03_2013_turk_KEIM.pdf\" target=\"_blank\" class=\"keim-product-card\">\n          <div class=\"keim-card-img-wrapper\">\n            <span class=\"pdf-badge\">PDF<\/span>\n            <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/restauro-lasur-scaled.jpg\" alt=\"Restauro\">\n          <\/div>\n          <div class=\"keim-card-info\">\n            <div class=\"keim-card-title\">Restauro<\/div>\n            <div class=\"keim-card-action\">\n              Download PDF\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\/><\/svg>\n            <\/div>\n          <\/div>\n        <\/a>\n\n        <a href=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/designLasur_letoonmimarlik.pdf\" target=\"_blank\" class=\"keim-product-card\">\n          <div class=\"keim-card-img-wrapper\">\n            <span class=\"pdf-badge\">PDF<\/span>\n            <img decoding=\"async\" src=\"https:\/\/www.letoon.com.tr\/wp-content\/uploads\/designLasur_letoonmimarlik_page-0001-scaled.jpg\" alt=\"Design Lasur\">\n          <\/div>\n          <div class=\"keim-card-info\">\n            <div class=\"keim-card-title\">Design Lasur<\/div>\n            <div class=\"keim-card-action\">\n              Download PDF\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\/><\/svg>\n            <\/div>\n          <\/div>\n        <\/a>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<!-- GSAP Tab Switcher Logic -->\n<script>\n  let isAnimating = false;\n\n  function openKeimTab(evt, tabId) {\n    const targetTab = document.getElementById(tabId);\n    const currentTab = document.querySelector('.keim-tab-content.active');\n    const allBtns = document.querySelectorAll('.keim-tab-btn');\n\n    \/\/ E\u011fer t\u0131klanan tab zaten aktifse veya animasyon s\u00fcr\u00fcyorsa durdur\n    if (currentTab === targetTab || isAnimating) return;\n\n    isAnimating = true;\n\n    \/\/ Aktif buton s\u0131n\u0131f\u0131n\u0131 g\u00fcncelle\n    allBtns.forEach(btn => btn.classList.remove('active'));\n    evt.currentTarget.classList.add('active');\n\n    \/\/ Mevcut tab \u00fcr\u00fcnlerini kaybet\n    if (currentTab) {\n      const currentCards = currentTab.querySelectorAll('.keim-product-card');\n      \n      gsap.to(currentCards, {\n        opacity: 0,\n        y: -15,\n        scale: 0.96,\n        duration: 0.25,\n        stagger: 0.03,\n        ease: \"power2.in\",\n        onComplete: () => {\n          currentTab.style.display = 'none';\n          currentTab.classList.remove('active');\n\n          \/\/ Yeni tab'\u0131 a\u00e7 ve kartlar\u0131 s\u0131ral\u0131 getir\n          targetTab.style.display = 'block';\n          targetTab.classList.add('active');\n          const targetCards = targetTab.querySelectorAll('.keim-product-card');\n\n          gsap.fromTo(targetCards, \n            { opacity: 0, y: 25, scale: 0.95 },\n            { \n              opacity: 1, \n              y: 0, \n              scale: 1, \n              duration: 0.4, \n              stagger: 0.08, \n              ease: \"power2.out\",\n              onComplete: () => { isAnimating = false; }\n            }\n          );\n        }\n      });\n    }\n  }\n\n  \/\/ Sayfa \u0130lk Y\u00fcklendi\u011finde \u0130lk Tab \u00dcr\u00fcnlerini Animate Et\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const initialTab = document.querySelector('.keim-tab-content.active');\n    if (initialTab) {\n      const initialCards = initialTab.querySelectorAll('.keim-product-card');\n      gsap.fromTo(initialCards, \n        { opacity: 0, y: 20 },\n        { opacity: 1, y: 0, duration: 0.5, stagger: 0.08, ease: \"power2.out\" }\n      );\n    }\n  });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Exter\u0131or Pa\u0131nts Inter\u0131or Pa\u0131nts Concrete Repa\u0131r Tablature Pa\u0131nts Wood Pa\u0131nts Restorat\u0131on PDF Soldalit Download PDF PDF Royalan Download PDF PDF<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":829,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2110","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.letoon.com.tr\/eng\/wp-json\/wp\/v2\/pages\/2110","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.letoon.com.tr\/eng\/wp-json\/wp\/v2\/comments?post=2110"}],"version-history":[{"count":0,"href":"https:\/\/www.letoon.com.tr\/eng\/wp-json\/wp\/v2\/pages\/2110\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.letoon.com.tr\/eng\/wp-json\/wp\/v2\/pages\/829"}],"wp:attachment":[{"href":"https:\/\/www.letoon.com.tr\/eng\/wp-json\/wp\/v2\/media?parent=2110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}