/* ============================================================================ Mesleki Eğitim Merkezi — CHROME / SABİT İLETİŞİM Kaynak: dc-mem/Site Header.dc.html (showQuickContact bloğu) GİZLEME BAYRAKLARI 1) Eğitim detayındaki mobil sticky bar: o şablon kendi kabına `data-mem-sticky-bar` koyar → mobilde (<768px) floating gizlenir. (handoff §6: aynı viewport'ta üçüncü bir WhatsApp butonu olmaz.) 2) Tek sayfada tamamen kapatmak için: `[data-mem-floating="off"]`. 3) Mobil drawer açıkken chrome/header.js 'e `.mem-drawer-open` ekler. ========================================================================== */ .mem-floating { position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } /* * GÖRÜNMEZ TIKLAMA ŞERİDİ DÜZELTMESİ. * * Bu blok kendini `.mem-app` ile sarmalıyor (tasarım sistemi scope'u için * gerekli) ve `core/base.css`'teki `.mem-app{width:100%}` kuralı `position:fixed` * kutuyu viewport genişliğine yayıyordu. Ölçüm: width 1512px, left -26px, yani * ekranın altında 1512×114px'lik GÖRÜNMEZ bir şerit. Butonlar sağda doğru * göründüğü için fark edilmiyordu, ama şerit o banttaki TÜM tıklamaları * yutuyordu (`document.elementFromPoint(100|400|760|1100|1300, 780)` → hepsi * `.mem-floating`). Kutu içeriği kadar olmalı. * * `.mem-app.mem-floating` (0,2,0) → base.css'teki `.mem-app` (0,1,0) kuralını * yener; `!important` gerekmez. */ .mem-app.mem-floating { width: auto; max-width: max-content; /* * ZEMİN DE SIFIRLANIR. `.mem-app` sayfa sarmalayıcısı olduğu için * `background: var(--mem-bg)` (#FBFCFE) taşır; bu blok aynı sınıfı * tasarım-sistemi kapsamı için kullandığından o zemini miras alıyor ve * iki hap butonun ARKASINA 139×114px beyaza yakın bir dikdörtgen * boyuyordu (koyu/renkli bölümlerin ve footer'ın üstünde açıkça görünür). * Ölçüm: `getComputedStyle(.mem-floating).backgroundColor` = rgb(251,252,254). * Butonların kendi zeminleri var; kabın zemini OLMAMALI. */ background: none; } .mem-app .mem-float { height: 52px; padding: 0 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; white-space: nowrap; text-decoration: none; transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, background .2s; } /* WhatsApp — beyaz zemin, tasarım v2 (dc-mem/Site Header.dc.html §showQuickContact). */ .mem-app .mem-float--wa { background: #ffffff; border: 1px solid #DCE8F0; color: var(--mem-text, #092E4D); box-shadow: 0 10px 30px rgba(9, 46, 77, .18); } .mem-app .mem-float--wa:hover, .mem-app .mem-float--wa:focus-visible { color: var(--mem-text, #092E4D); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(9, 46, 77, .24); text-decoration: none; } .mem-app .mem-float--call { background: var(--mem-blue, #03568A); border: 0; color: #ffffff; box-shadow: var(--mem-shadow-fab, 0 10px 28px rgba(9, 46, 77, .22)); } .mem-app .mem-float--call:hover, .mem-app .mem-float--call:focus-visible { background: var(--mem-blue-dark, #02466F); color: #ffffff; transform: translateY(-2px); text-decoration: none; } /* --- gizleme --------------------------------------------------------------- */ .mem-floating[data-mem-floating="off"] { display: none !important; } .mem-drawer-open .mem-floating { display: none !important; } /* Tasarım parite: `showQuickContact` ifadesi `&& !s.modalOpen` içerir — bilgi talebi modalı açıkken sabit iletişim GİZLENİR. Modal scrim'i yarı saydam olduğu için gizlenmezse iki hap butonu scrim'in altından görünüyordu. */ body:has([data-mem-lead-modal]:not([hidden])) .mem-floating { display: none !important; } @media (max-width: 767px) { /* Eğitim detayının mobil sticky bar'ı sayfadaysa floating basılmaz. */ body:has([data-mem-sticky-bar]) .mem-floating { display: none !important; } } @media (prefers-reduced-motion: reduce) { .mem-app .mem-float { transition: none !important; } .mem-app .mem-float:hover { transform: none !important; } }