/* ========================================================================== WATERAI — YÜZEN ASİSTAN DÜĞMESİ Sağ alt köşede mavi degrade hap; RTL'de kendiliğinden sol alta geçer (yalnız mantıksal özellik — rtl.css'e kural gerekmez). Tıklayınca mevcut WaterAI penceresini açar; JS yoksa asistan sayfasına giden bağlantıdır. Sunucu tarafı ve yükleme: inc/waterai.php · 8) · assets/js/asistan.js ÇAKIŞMA HARİTASI (ölçüldü, 29.09.2026) · "Başa dön" (#wptYukari) aynı köşede. 29.09 kullanıcı kararıyla yer değiştirdiler: WaterAI köşede sabit, başa dön onun üstünde belirir. · Mobil alt bar (≤860): gerçek yüksekliği --wpt-mbar-h (main.js ölçer; ürün sayfasında fiyat satırı + sekme barı, güvenli alan dahil). · Sepet paneli: açıkken düğme saklanır (:has — desteklemeyen tarayıcıda panel zaten üstte, z-index modal+10). · Masaüstü WhatsApp / Arayın sekmeleri ekranın DİKEY ORTASINDA; köşe boş. · Menü ve filtre çekmeceleri, WaterAI penceresi: z-index'leri yüksek, pencere açıkken düğme ayrıca gizlenir (body.wpt-ai-kilit). HAREKET — hepsi transform/opacity; sürekli dönen animasyon yok. · Giriş: sayfa oturduktan sonra (1,2 sn) aşağıdan yükselerek belirir. · Işıltı: ikondaki küçük yıldız 3 kez parlar, halka 3 kez yayılır, biter. · Hap boyunca bir kez ışık süzülür; fareyle üstüne gelince yine. · prefers-reduced-motion: hiçbiri yok, düğme doğrudan görünür. ========================================================================== */ .wpt-asistan{ position:fixed; z-index:var(--wpt-z-mbar); inset-inline-end:max(22px, env(safe-area-inset-right, 0px)); bottom:24px; display:inline-flex; align-items:center; gap:9px; height:50px; box-sizing:border-box; padding-block:0; padding-inline:10px 19px; border-radius:999px; overflow:hidden; isolation:isolate; background: radial-gradient(120% 160% at 18% -10%, rgba(125,211,252,.55), transparent 55%), linear-gradient(135deg, #1C7FE3 0%, #0A5CC2 48%, #0A3F8F 100%); color:#fff; font-family:var(--wpt-font); font-size:15px; font-weight:700; line-height:1; letter-spacing:.01em; text-decoration:none; white-space:nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.10), 0 2px 6px rgba(6,20,40,.18), 0 12px 28px -10px rgba(6,74,160,.70); -webkit-tap-highlight-color:transparent; translate:0 0; transition: translate .28s cubic-bezier(.2,.7,.3,1), transform .2s ease, box-shadow .2s ease, opacity .2s ease, padding .3s cubic-bezier(.2,.7,.3,1), gap .3s ease; animation:wpt-asistan-gir .6s cubic-bezier(.2,.9,.3,1.15) 1.2s backwards; } .wpt-asistan:hover, .wpt-asistan:focus{ color:#fff; text-decoration:none } @keyframes wpt-asistan-gir{ from{ opacity:0; transform:translateY(18px) scale(.86) } } /* Işık süzülmesi — hap boyunca tek geçiş. */ .wpt-asistan::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%); transform:translateX(-110%); animation:wpt-asistan-parilti 1.1s ease-in-out 1.9s 1 both; } @keyframes wpt-asistan-parilti{ from{ transform:translateX(-110%) } to { transform:translateX(110%) } } @keyframes wpt-asistan-parilti-2{ from{ transform:translateX(-110%) } to { transform:translateX(110%) } } /* İkon — cam bir yuva, içinde yıldız ve küçük kıvılcım. */ .wpt-asistan-ikon{ position:relative; flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); } .wpt-asistan-ikon svg{ display:block; overflow:visible } .wpt-asistan-yildiz{ transform-box:fill-box; transform-origin:center } .wpt-asistan-kivilcim{ transform-box:fill-box; transform-origin:center; animation:wpt-asistan-kivilcim 2.4s ease-in-out 2s 3 both; } @keyframes wpt-asistan-kivilcim{ 0%,100%{ opacity:1; transform:scale(1) rotate(0) } 50% { opacity:.35; transform:scale(.55) rotate(45deg) } } /* Yayılan halka — ikonun çevresinde, üç kez. */ .wpt-asistan-ikon::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(186,230,253,.75); opacity:0; pointer-events:none; animation:wpt-asistan-halka 2.4s ease-out 2s 3; } @keyframes wpt-asistan-halka{ 0% { opacity:.9; transform:scale(.9) } 70% { opacity:0; transform:scale(1.55) } 100%{ opacity:0; transform:scale(1.55) } } .wpt-asistan-ad{ display:block; overflow:hidden; max-width:8em; transition:max-width .3s cubic-bezier(.2,.7,.3,1), opacity .2s ease; } /* Etkileşim */ @media (hover:hover){ .wpt-asistan:hover{ transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 10px rgba(6,20,40,.20), 0 18px 36px -12px rgba(6,74,160,.80); } /* Ayrı ad: aynı animasyonun yalnız süresi değişirse tarayıcı yeniden oynatmaz. */ .wpt-asistan:hover::after{ animation:wpt-asistan-parilti-2 .9s ease-in-out 1 both } } .wpt-asistan:active{ transform:translateY(0) scale(.97) } .wpt-asistan:focus-visible{ outline:3px solid var(--wpt-brand); outline-offset:3px; } /* Yükleniyor — asistan ilk kez indirilirken yıldız nabız atar. */ .wpt-asistan.is-yukleniyor{ cursor:progress } .wpt-asistan.is-yukleniyor .wpt-asistan-yildiz{ animation:wpt-asistan-nabiz .7s ease-in-out infinite alternate } @keyframes wpt-asistan-nabiz{ from{ opacity:1; transform:scale(1) } to { opacity:.5; transform:scale(.72) } } /* ⚠⚠ 29.09 KULLANICI: "yukarı çıkma oku ile WaterAI'ı yer değiştir" — WaterAI köşede SABİT; "başa dön" belirince onun ÜSTÜNDE çıkar. Masaüstü: düğme alttan 24 + 50 yükseklik + 12 nefes = 86. (Kök sınıfı asistan.js yazar; düğmenin olmadığı sayfada ok köşede kalır.) */ .wpt-asistan-var .wpt-yukari{ bottom:86px } /* -------------------------------------------------------------------------- MOBİL / TABLET — alt barın ve "başa dön"ün üstünde, kalıcı 44 px başa dön + 10 px nefes + 14 px bar payı = 68 -------------------------------------------------------------------------- */ /* Mobil / tablet: düğme alt barın hemen üstünde, SABİT; ok onun üstünde. Düğme 52 px (telefonda daire; 601–860 hap 50 px) + 10 px nefes = 62. */ @media (max-width:860px){ .wpt-asistan{ inset-inline-end:max(12px, env(safe-area-inset-right, 0px)); bottom:calc(var(--wpt-mbar-h) + 10px); } .wpt-asistan-var .wpt-yukari{ bottom:calc(var(--wpt-mbar-h) + 72px) } } /* Telefon: yalnız ikon (52 px daire). Etiket ekran okuyucuda duruyor (aria-label + görünmez metin). İlk açılışta bir kez "WaterAI" yazısıyla belirir, birkaç saniye sonra daireye döner (.is-etiketli, JS). */ @media (max-width:600px){ .wpt-asistan{ height:52px; padding-inline:11px; gap:0; } .wpt-asistan-ad{ max-width:0; opacity:0 } .wpt-asistan.is-etiketli{ padding-inline:11px 18px; gap:9px } .wpt-asistan.is-etiketli .wpt-asistan-ad{ max-width:8em; opacity:1 } } /* Yatay telefon (inceleme 29.09, 844×390): kısa ekranda 126 px'lik etiketli hap içeriğin ortasına yakın duruyor, filtre çiplerinin üstüne biniyordu. Burada yalnız ikon (46 px daire) ve alt bara daha yakın; ok yine üstünde. */ @media (max-width:860px) and (max-height:500px){ .wpt-asistan{ height:46px; padding-inline:8px; gap:0; bottom:calc(var(--wpt-mbar-h) + 8px); } .wpt-asistan-ad{ max-width:0; opacity:0 } .wpt-asistan-var .wpt-yukari{ bottom:calc(var(--wpt-mbar-h) + 62px) } } /* -------------------------------------------------------------------------- GİZLENDİĞİ DURUMLAR ⚠ :has() içeren kurallar AYRI yazıldı — seçici listesinde tek geçersiz seçici bütün kuralı düşürür; eski tarayıcıda asıl kural da ölürdü. -------------------------------------------------------------------------- */ body.wpt-ai-kilit .wpt-asistan{ opacity:0; pointer-events:none } body:has(.wpt-sepet-panel.is-acik) .wpt-asistan{ opacity:0; pointer-events:none } /* Telefonda form alanı odaktayken klavye açılır; sabit düğme alanın üstüne binmesin. */ @media (max-width:860px){ body:has(input:focus, textarea:focus, select:focus) .wpt-asistan{ opacity:0; pointer-events:none } } /* -------------------------------------------------------------------------- KOYU TEMA — hap marka yüzeyi olarak mavi kalır; koyu zeminden ayrılsın diye ince açık çerçeve ve biraz daha parlak degrade. -------------------------------------------------------------------------- */ :root[data-theme="dark"] .wpt-asistan{ background: radial-gradient(120% 160% at 18% -10%, rgba(125,211,252,.50), transparent 55%), linear-gradient(135deg, #2A8CF0 0%, #1467CF 50%, #0D4AA3 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 1px rgba(156,201,240,.22), 0 14px 30px -10px rgba(0,0,0,.75); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wpt-asistan{ background: radial-gradient(120% 160% at 18% -10%, rgba(125,211,252,.50), transparent 55%), linear-gradient(135deg, #2A8CF0 0%, #1467CF 50%, #0D4AA3 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 1px rgba(156,201,240,.22), 0 14px 30px -10px rgba(0,0,0,.75); } } /* -------------------------------------------------------------------------- AZALTILMIŞ HAREKET — giriş, ışıltı, halka, kayma geçişi yok. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .wpt-asistan{ animation:none; transition:opacity .01s } .wpt-asistan::after, .wpt-asistan-ikon::after, .wpt-asistan-kivilcim, .wpt-asistan.is-yukleniyor .wpt-asistan-yildiz{ animation:none } .wpt-asistan-ad{ transition:none } .wpt-asistan:hover, .wpt-asistan:active{ transform:none } } @media (prefers-reduced-motion: reduce) and (hover:hover){ .wpt-asistan:hover::after{ animation:none } } @media print{ .wpt-asistan{ display:none } }