/* ===================================================================== KBS Sticky Header (#menukey) ACMA / KAPAMA ANAHTARI = #menukey ID'sinin kendisi. Elementor'da pill container'ina CSS ID olarak "menukey" verilirse sticky + cam efekti ACIK; ID kaldirilirsa TUM kurallar otomatik devre disi kalir (asagidaki her kural :has(#menukey) sartina bagli). Kural 1: position:sticky PILL'e degil, header TEMPLATE WRAPPER'ina uygulanir. (Sticky, parent'inin icinde yapisir; wrapper header kadar yuksek oldugundan pill'e verirsen calismaz.) Kural 2: body/html'de overflow-x:hidden sticky'yi oldurur; overflow-x:clip ayni tasma korumasini verir ama bozmaz. Kural 3: Scrolled durumu JS ile olarak set edilir (tum tarayicilarda garantili). ===================================================================== */ /* --- Kural 2: tema tasma korumasini sticky-dostu hale getir --- */ html:has(#menukey), html:has(#menukey) body { overflow-x: clip !important; } /* --- Ust bosluk sizintisi: hero'nun negatif margin'i header yuksekligiyle birebir tutmayinca body'nin beyazi 1-3px gorunuyor. Body zemini hero koyusu yapilir; tum bolumlerin kendi arka plani oldugundan baska hicbir yeri etkilemez. --- */ body { background-color: #211D17 !important; } /* --- Kural 1: yapisan katman = header template wrapper --- */ div[data-elementor-type="header"]:has(#menukey), .elementor-location-header:has(#menukey) { position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; background: transparent; pointer-events: none; } /* wrapper tiklamalari yutmasin, icerik tiklanabilir kalsin */ div[data-elementor-type="header"]:has(#menukey) *, .elementor-location-header:has(#menukey) * { pointer-events: auto; } /* --- WP admin bar acikken kayma olmasin --- */ body.admin-bar div[data-elementor-type="header"]:has(#menukey), body.admin-bar .elementor-location-header:has(#menukey) { top: 32px; } @media (max-width: 782px) { body.admin-bar div[data-elementor-type="header"]:has(#menukey), body.admin-bar .elementor-location-header:has(#menukey) { top: 46px; } } /* --- Pill: yumusak gecisler --- */ #menukey { transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease; transform: translateZ(0); /* iOS blur performansi */ } /* pill'i saran dis container'in ust boslugu scrolled'da daralir */ div[data-elementor-type="header"]:has(#menukey) > .e-con, .elementor-location-header:has(#menukey) > .e-con { transition: padding 0.3s ease; } /* --- Scrolled durumu: koyu cam efekti + derin golge + daralan bosluk --- */ html.kbs-scrolled #menukey { background-color: rgba(22, 18, 14, 0.88) !important; -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32); border-color: rgba(255, 255, 255, 0.14); } html.kbs-scrolled div[data-elementor-type="header"]:has(#menukey) > .e-con, html.kbs-scrolled .elementor-location-header:has(#menukey) > .e-con { padding-top: 8px; padding-bottom: 0; } /* --- Mobil ince ayar --- */ @media (max-width: 767px) { html.kbs-scrolled div[data-elementor-type="header"]:has(#menukey) > .e-con, html.kbs-scrolled .elementor-location-header:has(#menukey) > .e-con { padding-top: 6px; } } /* --- Erisilebilirlik: animasyon istemeyen kullanicilar --- */ @media (prefers-reduced-motion: reduce) { #menukey, div[data-elementor-type="header"]:has(#menukey) > .e-con, .elementor-location-header:has(#menukey) > .e-con { transition: none; } } /* --- Elementor editorunde sticky devre disi (duzenlerken ziplamasin) --- */ .elementor-editor-active div[data-elementor-type="header"], .elementor-editor-active .elementor-location-header { position: static !important; } /* ===================================================================== KBS Mobil Nav Dropdown — koyu cam panel ===================================================================== */ /* Hamburger toggle: pill icinde yuvarlak buton */ .elementor-location-header .elementor-menu-toggle { width: 42px; height: 42px; border-radius: 21px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.25s ease, transform 0.25s ease; } .elementor-location-header .elementor-menu-toggle svg { fill: #fff; } .elementor-location-header .elementor-menu-toggle.elementor-active { background: #E20E20; border-color: #E20E20; transform: rotate(90deg); } /* Acilan panel */ .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container { background: rgba(22, 18, 14, 0.97) !important; -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; margin-top: 12px; padding: 10px !important; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); overflow: hidden; transform-origin: top center; animation: kbs-menu-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); } @keyframes kbs-menu-in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } } /* Linkler */ .elementor-location-header .elementor-nav-menu--dropdown .elementor-item { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: #F3ECDD !important; padding: 15px 18px !important; border-radius: 14px; display: flex !important; align-items: center; justify-content: space-between; transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease; animation: kbs-menu-item-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both; } /* kademeli giris */ .elementor-location-header .elementor-nav-menu--dropdown li:nth-child(1) .elementor-item { animation-delay: 0.03s; } .elementor-location-header .elementor-nav-menu--dropdown li:nth-child(2) .elementor-item { animation-delay: 0.07s; } .elementor-location-header .elementor-nav-menu--dropdown li:nth-child(3) .elementor-item { animation-delay: 0.11s; } .elementor-location-header .elementor-nav-menu--dropdown li:nth-child(4) .elementor-item { animation-delay: 0.15s; } .elementor-location-header .elementor-nav-menu--dropdown li:nth-child(5) .elementor-item { animation-delay: 0.19s; } .elementor-location-header .elementor-nav-menu--dropdown li:nth-child(6) .elementor-item { animation-delay: 0.23s; } .elementor-location-header .elementor-nav-menu--dropdown li:nth-child(7) .elementor-item { animation-delay: 0.27s; } @keyframes kbs-menu-item-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } /* ok isareti kaldirildi (mobilde yazinin ustune biniyordu) */ /* ayirici cizgiler */ .elementor-location-header .elementor-nav-menu--dropdown li:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* hover / aktif */ .elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover, .elementor-location-header .elementor-nav-menu--dropdown .elementor-item:focus, .elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active { background: rgba(226, 14, 32, 0.14) !important; color: #FFFFFF !important; } @media (prefers-reduced-motion: reduce) { .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container, .elementor-location-header .elementor-nav-menu--dropdown .elementor-item { animation: none; } } /* ===================================================================== KBS Logo Shine — 7 sn'de bir zarif isik supurmesi (GPU-only, JS yok) ===================================================================== */ .elementor-location-header .elementor-widget-theme-site-logo, .elementor-location-header .elementor-widget-image { position: relative; overflow: hidden; } .elementor-location-header .elementor-widget-theme-site-logo::after, .elementor-location-header .elementor-widget-image::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 46px; background: linear-gradient( 105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100% ); mix-blend-mode: overlay; transform: translateX(-80px) skewX(-18deg); animation: kbs-logo-shine 7s ease-in-out infinite; pointer-events: none; } @keyframes kbs-logo-shine { 0%, 82% { transform: translateX(-80px) skewX(-18deg); opacity: 0; } 86% { opacity: 1; } 96%, 100% { transform: translateX(280px) skewX(-18deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .elementor-location-header .elementor-widget-theme-site-logo::after, .elementor-location-header .elementor-widget-image::after { animation: none; opacity: 0; } } /* ===================================================================== KBS Who-we-are Checklist — Figma birebir: beyaz kartlar + pembe daire icinde kirmizi tik (widget bg anahtarlari render olmadigi icin CSS ile) ===================================================================== */ .elementor-element-c2000007 .elementor-widget-icon-box { background: #FFFFFF; border: 1px solid #EAE3D6; border-radius: 16px; padding: 17px 21px; box-shadow: 0 6px 18px rgba(33, 29, 24, 0.04); display: flex; align-items: center; min-height: 70px; } .elementor-element-c2000007 .elementor-icon-box-wrapper { display: flex; align-items: center; width: 100%; } .elementor-element-c2000007 .elementor-icon { background-color: #FDECEC !important; color: #E20E20 !important; fill: #E20E20 !important; width: 36px; height: 36px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; padding: 0 !important; } .elementor-element-c2000007 .elementor-icon svg { fill: #E20E20; width: 15px; height: 15px; } /* ============ KBS Estimate Form: proje tipi checkbox grubu ============ */ #estimate .elementor-field-type-checkbox .elementor-field-subgroup { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; padding-top: 2px; } #estimate .elementor-field-type-checkbox .elementor-field-option { display: flex; align-items: center; gap: 7px; background: #FBF8F2; border: 1px solid #EAE3D6; border-radius: 10px; padding: 8px 10px; transition: border-color 0.15s ease, background-color 0.15s ease; } #estimate .elementor-field-type-checkbox .elementor-field-option:hover { border-color: #E20E20; } #estimate .elementor-field-type-checkbox .elementor-field-option:has(input:checked) { background: #FDECEC; border-color: #E20E20; } #estimate .elementor-field-type-checkbox .elementor-field-option input[type="checkbox"] { width: 15px; height: 15px; margin: 0; flex: 0 0 15px; accent-color: #E20E20; cursor: pointer; } #estimate .elementor-field-type-checkbox .elementor-field-option label { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: #3D3529; line-height: 1.25; cursor: pointer; margin: 0; } @media (max-width: 380px) { #estimate .elementor-field-type-checkbox .elementor-field-subgroup { grid-template-columns: 1fr; } } /* CTA tiklaninca form kartinin parlama animasyonu */ @keyframes kbs-form-flash { 0% { box-shadow: 0 0 0 0 rgba(226, 14, 32, 0.55); } 45% { box-shadow: 0 0 0 9px rgba(226, 14, 32, 0.16); } 100% { box-shadow: 0 0 0 0 rgba(226, 14, 32, 0); } } #estimate.kbs-form-flash { animation: kbs-form-flash 1.1s ease-out 2; }