/* Luma Label landing — Lumi dijital asistan widget'ı.
base.css token'larını kullanır; ham renk/px yazmayın.
KONUMLANDIRMA — kaldırılan .wa-fab'dan devralınan üç kural:
1) .lumi 'nin DOGRUDAN cocugu olmali. backdrop-filter'li .site-header
ya da [data-tilt]/.scene icine konursa position:fixed o kutuya cozulur
(bkz. hero.css:70-79) ve widget sayfayla birlikte kayar.
2) .lumi, .sticky-cta'dan SONRA gelmeli — mobilde yukari kaydiran kural
kardes secici (asagidaki @media 860px blogu).
3) z-index 70: sticky-cta (60, closing.css) ustu, site-header (100) ve
nav-mobile (110) alti. Mobil menu acilinca widget kendiliginden altta
kalir; ayrica lumi.js menu acilinca paneli kapatir. */
:root {
--lumi-ring: rgba(255, 209, 0, 0.55); /* altin halka — karakterin kendi halkasiyla ayni aile */
--lumi-panel-bg: #101014;
--lumi-bubble: #1b1b22;
}
/* ============ KAPSAYICI ============ */
.lumi {
--lumi-lift: 0px; /* mobil yapiskan CTA acikken guncellenir */
position: fixed;
right: var(--sp-3);
bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
z-index: 70;
transform: translateY(var(--lumi-lift));
transition: transform 0.28s var(--ease-out);
}
/* ============ FAB ============
68px: karakter artik yalniz bir yuz degil, cerceveye yaslanan bir bust.
64px'te govde ve kollar okunmuyordu. */
.lumi-fab {
position: relative;
display: block;
width: 68px; height: 68px;
padding: 0;
border: 0;
border-radius: 999px;
/* Disk zemini artik KAYNAK GORSELDEN degil CSS'ten geliyor: karakter seffaf
kesim oldugu icin arkasinda gercek bir zemin gerekiyor. Ust taraftan gelen
isik, orijinal render'in aydinlatmasiyla ayni yonde. */
background: radial-gradient(118% 118% at 50% 10%, #26262f 0%, #17171d 46%, #0b0b0f 100%);
cursor: pointer;
box-shadow:
0 0 0 2px var(--lumi-ring),
0 14px 34px -10px rgba(0, 0, 0, 0.75),
0 4px 14px -4px rgba(255, 209, 0, 0.25);
transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
animation: lumi-in 0.55s var(--ease-out) 0.9s backwards;
}
.lumi-fab:hover {
transform: scale(1.06);
box-shadow: 0 0 0 2px var(--amber), 0 18px 44px -12px rgba(0,0,0,0.8), 0 6px 20px -4px rgba(255,209,0,0.4);
}
.lumi-fab:active { transform: scale(0.97); }
.lumi-fab:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
/* Seyrek, yavas hale — surekli ziplayan "ucuz" FAB degil: 7 sn'lik dongunun
yalniz ilk %26'sinda gorunur, kalani olu zaman. (.wa-fab'daki ayni oran.) */
.lumi-fab::before {
content: "";
position: absolute; inset: -2px;
border-radius: inherit;
border: 2px solid var(--amber);
pointer-events: none;
animation: lumi-halo 7s var(--ease-out) 2.2s infinite;
}
/* Panel acikken FAB kapatma gorevi gorur: halo susar, hafif kucululur. */
.lumi.is-open .lumi-fab::before { animation: none; opacity: 0; }
.lumi.is-open .lumi-fab { transform: scale(0.92); }
/* ============ AVATAR ============
Tek [data-state] attribute'u; gerisi burada. lumi.js yalniz o degeri yazar.
IKI VARYANT VAR ve karistirilmamali:
.lumi-av--flat → lumi-avatar.webp'in daire icine kirpilmis hali. Panel
basligi (44px) ve mesaj avatarlari (26px) icin; o olcude
govde/kol okunmaz, yuz dolu dursun.
.lumi-av--peek → seffaf kesimden kurulu iki katmanli sahne (asagida).
FAB ve karsilama avatari icin.
Durum kurallari da AYRI: flat'te ![]()
oynatilir, peek'te .lumi-peek. */
.lumi-av {
position: relative;
display: block;
width: 100%; height: 100%;
border-radius: inherit;
isolation: isolate;
}
.lumi-av--flat { overflow: hidden; }
.lumi-av--flat img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: inherit;
transform-origin: 50% 85%; /* boyun hizasi — bas egilmesi dogal dursun */
animation: lumi-float 6s ease-in-out infinite;
}
/* Metalik govdede gezinen isik — anatomik hizalama gerektirmeyen, her zaman
dogru duran "canli" ipucu. */
.lumi-av--flat::after {
content: "";
position: absolute; inset: -30%;
background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.30) 50%, transparent 58%);
pointer-events: none;
animation: lumi-shine 7.5s var(--ease-out) 1.6s infinite;
}
/* ============ PEEK: CERCEVEYE YASLANAN LUMI ============
Kaynak render'da takim siyahi ARKA PLAN siyahinin uzerinde duruyor; govde
kenarlari otomatik ayrilmadigi icin kesim elle olculmus bir siluetle uretildi
(bkz. landing/tools/lumi-cutout.py). Iki dosya cikti:
lumi-head.webp kafa + antenler + boyun (tam alfa)
lumi-body.webp omuzlar + capraz kollar; alfasina DISK MASKESI pisirildi —
daire, capraz on kollarin durdugu ±43 derecede disari
kabariyor, tam altta ise sifira iniyor (kaynagin alt kesigi
dairenin sifir genislikteki dibinde gorunmez kalsin diye).
Ikisi de AYNI tuvale (FAB kutusu + her yandan %30) cizildi; bu yuzden ikisi
de inset:-30% ile yerlesir, ek hizalama ofseti YOKTUR — biri degisirse
digeri de ayni betikten yeniden uretilmeli.
Katman sirasi kasten: kafa ONCE (arkada), govde SONRA (onde). Boylece yaka
kafanin alt kesigini orter ve kafa yukari zipladiginda arada bosluk acilmaz. */
.lumi-av--peek {
overflow: visible; /* SART: kafa daireden TASIYOR */
box-shadow: inset 0 0 20px -6px rgba(255, 209, 0, 0.28);
animation: lumi-glowpulse 11s ease-in-out infinite;
}
.lumi-peek {
position: absolute; inset: -30%;
pointer-events: none;
transform-origin: 50% 76%; /* kollarin hizasi — govde oradan salinir */
}
.lumi-peek-head, .lumi-peek-body {
position: absolute; inset: 0;
width: 100%; height: 100%;
}
.lumi-peek-head img { width: 100%; height: 100%; display: block; }
/* Bas ve govde AYRI ritimde: 9.5s / 4.7s birbirine bolunmez, bu yuzden ikisi
surekli faz kaydirir ve dongu ezberlenmez. Bas dongusunun ilk yarisi sakin
nefes, son ucte bir nadir bir "bakinma" egilmesi. */
.lumi-peek-head {
animation: lumi-head-idle 9.5s ease-in-out infinite;
transform-origin: 50% 62%; /* boyun */
transition: translate 0.42s var(--ease-out);
}
.lumi-peek-body {
animation: lumi-breathe 4.7s ease-in-out infinite;
transform-origin: 50% 92%;
transition: translate 0.42s var(--ease-out), scale 0.42s var(--ease-out);
}
/* HOVER: kafa cerceveden disari cikar — ama BOYUN UZAYARAK degil, SAHNE
BUTUN OLARAK yukselerek. Sebep olculu: kafa ile govdenin ortustugu tek yer
46px genisligindeki boyun bandi ve orada ust uste binme en fazla 16px
(= 384px tuvalin %4.17'si). Kafayi tek basina bundan fazla kaldiran her
deger — eski -%5 gibi — yakayla cenenin arasini acar, kafa havada durur;
ustune lumi-head-idle kendi basina %1.5 kaldirdigi icin pay daha da daralir.
Bu yuzden kaldirmanin tamami .lumi-peek'e (kafa+govde birlikte) veriliyor,
kafaya yalnizca ortusme butcesine sigan %1'lik fark kaliyor.
`translate`/`scale` AYRI OZELLIK olarak yaziliyor — `transform`u idle
animasyonu kullaniyor; ayni ozellige iki kaynak yazsa animasyon kazanirdi. */
.lumi-peek { transition: translate 0.42s var(--ease-out); }
.lumi-fab:hover .lumi-peek,
.lumi-welcome-av:hover .lumi-peek { translate: 0 -3.5%; }
.lumi-fab:hover .lumi-peek-head,
.lumi-welcome-av:hover .lumi-peek-head { translate: 0 -1%; }
.lumi-fab:hover .lumi-peek-body,
.lumi-welcome-av:hover .lumi-peek-body { scale: 1.015; }
.lumi-fab:active .lumi-peek { translate: 0 -1.2%; }
.lumi-fab:active .lumi-peek-head { translate: 0 -0.4%; }
/* Rozetin uzerinde gezen cam parlamasi. flat'teki gibi kutuyu KAYDIRMIYOR;
arka plan konumu kayiyor — boylece daire disina tasmaz ve kafanin
cerceveden cikan kismini yalamaz. */
.lumi-av--peek::after {
content: "";
position: absolute; inset: 0;
border-radius: 999px;
background: linear-gradient(112deg, transparent 41%, rgba(255,255,255,0.20) 50%, transparent 59%);
background-size: 240% 100%;
background-repeat: no-repeat;
pointer-events: none;
animation: lumi-sheen 7.6s var(--ease-out) 1.6s infinite;
}
/* Anten uclarinda yumusak parilti.
flat konumlari kirpimdan OLCULDU: kirpim orijinalde (242,5)-(1062,825);
sol anten topu (375,155) → merkez %16.2/%18.3, sag (845,120) → %73.5/%14.0.
peek konumlari kesim tuvalinden: sol top (378,145) → %32.4/%7.3,
sag (845,118) → %64.2/%5.5. Oge kendi yarim genisligi kadar geri cekildi. */
.lumi-av-tip {
position: absolute;
border-radius: 999px;
background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,209,0,0.35) 45%, transparent 70%);
opacity: 0;
pointer-events: none;
}
.lumi-av--flat .lumi-av-tip { width: 16%; height: 16%; }
.lumi-av--flat .lumi-av-tip.l { left: 8.2%; top: 10.3%; animation: lumi-tip 5s ease-in-out 0.4s infinite; }
.lumi-av--flat .lumi-av-tip.r { left: 65.5%; top: 6.0%; animation: lumi-tip 5s ease-in-out 1.1s infinite; }
.lumi-peek-head .lumi-av-tip { width: 14%; height: 14%; }
.lumi-peek-head .lumi-av-tip.l { left: 25.4%; top: 0.3%; animation: lumi-tip 5.3s ease-in-out 0.4s infinite; }
.lumi-peek-head .lumi-av-tip.r { left: 57.2%; top: -1.5%; animation: lumi-tip 5.3s ease-in-out 1.6s infinite; }
/* ---- DURUMLAR ---- */
.lumi-av--flat[data-state="hover"] img,
.lumi-av--flat[data-state="greeting"] img { animation: lumi-greet 0.9s var(--ease-out) 1; }
.lumi-av--flat[data-state="listening"] img { animation: lumi-lean 2.4s ease-in-out infinite; }
.lumi-av--flat[data-state="thinking"] img { animation: lumi-think 1.5s ease-in-out infinite; }
.lumi-av--flat[data-state="talking"] img { animation: lumi-talk 0.62s ease-in-out infinite; }
.lumi-av--flat[data-state="happy"] img { animation: lumi-happy 0.75s var(--ease-out) 1; }
.lumi-av--flat[data-state="confused"] img { animation: lumi-confused 1.1s var(--ease-out) 1; }
.lumi-av--flat[data-state="goodbye"] img { animation: lumi-bye 0.35s var(--ease-out) 1 forwards; }
.lumi-av--peek[data-state="hover"] .lumi-peek,
.lumi-av--peek[data-state="greeting"] .lumi-peek { animation: lumi-greet 0.9s var(--ease-out) 1; }
.lumi-av--peek[data-state="listening"] .lumi-peek { animation: lumi-lean 2.4s ease-in-out infinite; }
.lumi-av--peek[data-state="thinking"] .lumi-peek { animation: lumi-think 1.5s ease-in-out infinite; }
.lumi-av--peek[data-state="talking"] .lumi-peek { animation: lumi-talk 0.62s ease-in-out infinite; }
.lumi-av--peek[data-state="happy"] .lumi-peek { animation: lumi-happy 0.75s var(--ease-out) 1; }
.lumi-av--peek[data-state="confused"] .lumi-peek { animation: lumi-confused 1.1s var(--ease-out) 1; }
.lumi-av--peek[data-state="goodbye"] .lumi-peek { animation: lumi-bye 0.35s var(--ease-out) 1 forwards; }
/* "Dusunurken" antenler hizlanir — durum yalniz govdede degil ucta da okunsun. */
.lumi-av--peek[data-state="thinking"] .lumi-av-tip { animation-duration: 1.4s; }
/* Yuzdeler .lumi-peek kutusuna (FAB'in 1.6 kati) gore cozulur; genlikler ona
gore olculdu. flat varyant daha kucuk kutulara bindigi icin ayni yuzde orada
dogal olarak daha sakin durur — istenen budur. */
@keyframes lumi-float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-3.5%) scale(1.015); }
}
@keyframes lumi-head-idle {
0%, 100% { transform: translateY(0) rotate(0deg); }
14% { transform: translateY(-1.5%) rotate(0deg); }
28% { transform: translateY(0) rotate(0deg); }
42% { transform: translateY(-1.4%) rotate(0deg); }
56% { transform: translateY(-0.2%) rotate(0deg); }
65% { transform: translateY(-0.7%) rotate(-2.6deg); }
74% { transform: translateY(-1.0%) rotate(-2.1deg); }
85% { transform: translateY(-1.2%) rotate(1.9deg); }
93% { transform: translateY(-0.4%) rotate(0.5deg); }
}
@keyframes lumi-breathe {
0%, 100% { transform: scale(1, 1) translateY(0); }
50% { transform: scale(1.008, 1.014) translateY(-0.4%); }
}
@keyframes lumi-greet {
0% { transform: translateY(0) rotate(0deg) scale(1); }
30% { transform: translateY(-3.5%) rotate(-4deg) scale(1.03); }
60% { transform: translateY(-1.2%) rotate(3deg) scale(1.015); }
100% { transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes lumi-lean {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(0.9%) scale(1.022); }
}
@keyframes lumi-think {
0%, 100% { transform: rotate(0deg) translateY(0); }
25% { transform: rotate(-3.5deg) translateY(-1.2%); }
75% { transform: rotate(2.5deg) translateY(-0.6%); }
}
@keyframes lumi-talk {
0%, 100% { transform: rotate(-1.2deg) translateY(0); }
50% { transform: rotate(1.2deg) translateY(-0.9%); }
}
@keyframes lumi-happy {
0% { transform: translateY(0) scale(1); }
35% { transform: translateY(-6.5%) scale(1.05); }
70% { transform: translateY(0.6%) scale(0.985); }
100% { transform: translateY(0) scale(1); }
}
@keyframes lumi-confused {
0%, 100% { transform: rotate(0deg); }
40% { transform: rotate(-7deg); }
70% { transform: rotate(-4deg); }
}
@keyframes lumi-bye {
to { transform: translateY(5%) scale(0.86); opacity: 0.65; }
}
/* Tek duz parlama yerine once kacamak bir kivilcim, sonra tam parlama. */
@keyframes lumi-tip {
0%, 63%, 100% { opacity: 0; transform: scale(0.7); }
69% { opacity: 0.32; transform: scale(0.92); }
74% { opacity: 0.10; transform: scale(0.86); }
83% { opacity: 0.9; transform: scale(1.12); }
91% { opacity: 0.14; transform: scale(0.95); }
}
@keyframes lumi-shine {
0%, 62% { transform: translateX(-120%); }
78% { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
@keyframes lumi-sheen {
0%, 62% { background-position: -70% 0; }
78%, 100% { background-position: 170% 0; }
}
@keyframes lumi-glowpulse {
0%, 100% { box-shadow: inset 0 0 20px -6px rgba(255, 209, 0, 0.20); }
50% { box-shadow: inset 0 0 26px -4px rgba(255, 209, 0, 0.42); }
}
@keyframes lumi-in {
from { opacity: 0; transform: translateY(16px) scale(0.82); }
to { opacity: 1; transform: none; }
}
@keyframes lumi-halo {
0% { transform: scale(1); opacity: 0.55; }
26%, 100% { transform: scale(1.7); opacity: 0; }
}
/* ============ PANEL ============ */
.lumi-panel {
position: absolute;
right: 0;
/* 24px, 14px degil: peek varyantinda antenler FAB kutusunun ~18px USTUNE
tasiyor; eski bosluk panelin alt kenariyla cakisiyordu. */
bottom: calc(100% + 24px);
width: min(384px, calc(100vw - 2 * var(--sp-3)));
max-height: min(72vh, 620px);
display: flex;
flex-direction: column;
background: var(--lumi-panel-bg);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 209, 0, 0.10);
overflow: hidden;
transform-origin: 100% 100%;
animation: lumi-panel-in 0.32s var(--ease-out);
}
.lumi-panel[hidden] { display: none; }
@keyframes lumi-panel-in {
from { opacity: 0; transform: translateY(12px) scale(0.94); }
to { opacity: 1; transform: none; }
}
/* ---- baslik ---- */
.lumi-head {
display: flex; align-items: center; gap: var(--sp-1);
padding: 0.85rem 0.9rem;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--bg-2), var(--lumi-panel-bg));
}
.lumi-head-av {
flex: 0 0 auto;
width: 44px; height: 44px;
border-radius: 999px;
box-shadow: 0 0 0 2px var(--lumi-ring);
overflow: hidden;
}
.lumi-head-txt { min-width: 0; flex: 1 1 auto; }
.lumi-name {
margin: 0;
font-family: var(--font-display);
font-size: 0.98rem; font-weight: 600;
color: var(--ink);
line-height: 1.2;
}
.lumi-role {
margin: 0.1rem 0 0;
font-size: 0.74rem;
color: var(--ink-faint);
display: flex; align-items: center; gap: 0.35rem;
}
.lumi-role::before {
content: "";
width: 6px; height: 6px;
border-radius: 999px;
background: var(--ok);
flex: 0 0 auto;
}
.lumi-head-btn {
flex: 0 0 auto;
width: 32px; height: 32px;
display: grid; place-items: center;
border: 1px solid var(--line);
border-radius: 999px;
background: transparent;
color: var(--ink-dim);
cursor: pointer;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.lumi-head-btn:hover { color: var(--ink); border-color: var(--amber); background: rgba(255, 209, 0, 0.08); }
.lumi-head-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.lumi-head-btn svg { width: 15px; height: 15px; }
/* ---- mesaj akisi ---- */
.lumi-log {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--sp-2) 0.9rem;
display: flex; flex-direction: column; gap: 0.7rem;
scrollbar-width: thin;
scrollbar-color: var(--ink-faint) transparent;
}
.lumi-log::-webkit-scrollbar { width: 6px; }
.lumi-log::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.lumi-msg { display: flex; gap: 0.5rem; align-items: flex-end; max-width: 100%; }
.lumi-msg-av {
flex: 0 0 auto;
width: 26px; height: 26px;
border-radius: 999px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--lumi-ring);
}
.lumi-msg-av img { width: 100%; height: 100%; object-fit: cover; }
.lumi-bubble {
padding: 0.6rem 0.8rem;
border-radius: 14px;
font-size: 0.87rem;
line-height: 1.6;
background: var(--lumi-bubble);
color: var(--ink);
border: 1px solid var(--line);
border-bottom-left-radius: 4px;
max-width: 84%;
overflow-wrap: anywhere;
}
.lumi-bubble p { margin: 0 0 0.55rem; }
.lumi-bubble p:last-child { margin-bottom: 0; }
.lumi-bubble strong { color: var(--amber); font-weight: 600; }
.lumi-msg.me { justify-content: flex-end; }
.lumi-msg.me .lumi-bubble {
background: var(--amber);
color: #1a1206;
border-color: transparent;
border-radius: 14px;
border-bottom-right-radius: 4px;
font-weight: 500;
}
/* ---- cevap alti baglantilar ---- */
.lumi-links { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.55rem; }
.lumi-link {
display: inline-flex; align-items: center; gap: 0.35rem;
font-size: 0.8rem; font-weight: 600;
color: var(--amber);
text-decoration: none;
}
.lumi-link:hover { text-decoration: underline; }
.lumi-link::after { content: "→"; font-size: 0.9em; transition: transform 0.2s var(--ease-out); }
.lumi-link:hover::after { transform: translateX(3px); }
.lumi-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
/* ---- yaziyor gostergesi ---- */
.lumi-typing { display: inline-flex; gap: 4px; padding: 0.15rem 0; }
.lumi-typing i {
width: 6px; height: 6px;
border-radius: 999px;
background: var(--ink-faint);
animation: lumi-dot 1.1s ease-in-out infinite;
}
.lumi-typing i:nth-child(2) { animation-delay: 0.16s; }
.lumi-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes lumi-dot {
0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* ---- cip / oneri butonlari ---- */
.lumi-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lumi-chips-t {
width: 100%;
margin: 0.15rem 0 0.1rem;
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-faint);
}
.lumi-chip {
font: inherit;
font-size: 0.79rem;
padding: 0.4rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--line);
background: transparent;
color: var(--ink-dim);
cursor: pointer;
transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s var(--ease-out);
}
.lumi-chip:hover {
color: var(--bg-0);
background: var(--amber);
border-color: var(--amber);
transform: translateY(-1px);
}
.lumi-chip:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* ---- kategori menusu (akordiyon) ----
Kategoriler cip degil SOL MENU: basliklar tam genislikte, alt alta ve SOLA
yasli; basliga basinca sorulari altinda aciliyor. Ciplerde satir ortasindan
akan yerlesim baslik/soru hiyerarsisini gostermiyordu — menude goz tek bir
sol kenar cizgisini takip ediyor. */
.lumi-cats { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 0.15rem; }
.lumi-cat {
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
width: 100%;
font: inherit;
font-size: 0.82rem; font-weight: 600;
text-align: left;
padding: 0.46rem 0.55rem;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
color: var(--ink);
cursor: pointer;
transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.lumi-cat:hover { background: rgba(255, 255, 255, 0.05); }
.lumi-cat:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.lumi-cat[aria-expanded="true"] {
border-color: rgba(255, 209, 0, 0.34);
background: rgba(255, 209, 0, 0.07);
}
/* Ok CSS ile ciziliyor (ek ikon dosyasi yok): asagi bakan sevron, acikken
180 derece donuyor. currentColor sayesinde basligin rengini takip eder. */
.lumi-cat-caret {
flex: 0 0 auto;
width: 7px; height: 7px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: rotate(45deg);
transform-origin: 60% 60%;
opacity: 0.55;
transition: transform 0.22s var(--ease-out), opacity 0.18s;
}
.lumi-cat[aria-expanded="true"] .lumi-cat-caret { transform: rotate(225deg); opacity: 0.95; }
/* Sorular basligin ALTINDA, ic girintili: sol kenardaki cizgi hangi baslige
ait olduklarini tasiyor. Cipin yuvarlak/ortali dili burada birakiliyor —
menude satirlar sola yaslanip tam genisligi kullanmali. */
.lumi-cat-panel {
display: flex; flex-direction: column; align-items: stretch;
gap: 0.05rem;
margin: 0.1rem 0 0.35rem 0.55rem;
padding-left: 0.5rem;
border-left: 1px solid var(--line);
}
.lumi-cat-panel[hidden] { display: none; } /* SART: display:flex hidden'i ezerdi */
.lumi-cat-panel .lumi-chip {
text-align: left;
border-color: transparent;
border-radius: 8px;
padding: 0.34rem 0.5rem;
font-size: 0.78rem;
}
.lumi-cat-panel .lumi-chip:hover {
background: rgba(255, 209, 0, 0.13);
border-color: transparent;
color: var(--ink);
transform: none;
}
/* Geri cipi: gezinmenin cikisi, dikkat cekmemeli. */
.lumi-chip-back {
border-color: transparent;
color: var(--ink-faint);
padding-left: 0.5rem;
}
/* ---- kanal rozetleri (WhatsApp / Instagram) ----
Marka rengi bir donem yalniz hover'da aciliyordu; sessiz halde madalyon
gumustu. Sorun sudur: WhatsApp ve Instagram ROZET olarak degil LOGO olarak
taniniyorlar — grisi, tanindiklari seyi yok ediyor ve kullanici uzerine
gelmeden hangi kanal oldugunu okuyamiyor. Bu yuzden marka rengi artik
VARSAYILAN; hover rengi ACMAZ, yalnizca parlamayi ve olcegi artirir.
Palet disiplini rozetin KUTUSUNDA korunuyor: cip kenarligi ve metni notr
kaliyor, renk sadece 22px'lik madalyonun icinde yasiyor. */
.lumi-chip.wa, .lumi-chip.ig {
display: inline-flex; align-items: center; gap: 0.42rem;
padding-left: 0.34rem;
border-color: rgba(255, 209, 0, 0.28);
color: var(--ink);
font-weight: 600;
}
.lumi-chip.wa:hover, .lumi-chip.ig:hover { background: transparent; transform: translateY(-1px); }
.lumi-chip.wa:hover { border-color: rgba(37, 211, 102, 0.75); color: #8df3bd; }
.lumi-chip.ig:hover { border-color: rgba(225, 48, 108, 0.75); color: #ffb3ce; }
/* Ikonun KUTUSU: 22px YUVARLATILMIS KARE, ic dolgu 3px → cam 16px.
Daire degil, cunku iki marka isareti de kendi cercevesini TASIYOR: WhatsApp
glifi bir konusma balonunun konturu, Instagram glifi yuvarlatilmis kare bir
fotograf makinesi konturu. Bunlari daireye oturtunca ic ice iki cerceve
cikiyordu — WhatsApp'ta halka icinde halka, Instagram'da karenin koseleri
dairenin kenarina bastiriyordu (4px dolgu ile cam 14px'e dusuyor, kare glif
kosegende daha genis oldugu icin ilk kirpilan yer orasi). Yuvarlatilmis kare
ikisinin de kendi uygulama ikonuyla ayni dil; kontur artik cerceveyle
yarismiyor, onun icine yerlesiyor.
svg fill="currentColor" oldugu icin cam rengi `color` ile verilir. Bu kural
yalnizca GEOMETRI tutar; zemini asagidaki marka kurallari verir. */
.lumi-chip.wa svg, .lumi-chip.ig svg, .lumi-quick svg {
width: 22px; height: 22px;
flex: 0 0 auto;
padding: 3px;
border-radius: 7px;
transition: box-shadow 0.2s, transform 0.2s var(--ease-out);
}
/* SESSIZ hal = marka rengi. Halka opakligi 0.55'te tutuluyor: logo okunuyor
ama sayfadaki altin/gumus duzenin onune gecmiyor. */
.lumi-chip.wa svg, .lumi-quick-wa svg {
background: linear-gradient(158deg, #6bf3a4, #1fae5c 58%, #0a6b35);
color: #04231a;
box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.55), 0 2px 7px -3px rgba(0, 0, 0, 0.8);
}
.lumi-chip.ig svg, .lumi-quick-ig svg {
background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888);
color: #fff;
box-shadow: 0 0 0 1px rgba(225, 48, 108, 0.55), 0 2px 7px -3px rgba(0, 0, 0, 0.8);
}
/* HOVER: renk zaten acik — degisen tek sey parlama siddeti ve olcek. */
.lumi-chip.wa:hover svg, .lumi-quick-wa:hover svg {
box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.9), 0 3px 12px -3px rgba(37, 211, 102, 0.6);
transform: scale(1.06);
}
.lumi-chip.ig:hover svg, .lumi-quick-ig:hover svg {
box-shadow: 0 0 0 1px rgba(225, 48, 108, 0.9), 0 3px 12px -3px rgba(225, 48, 108, 0.6);
transform: scale(1.06);
}
/* diger ciplerdeki ikonlar (varsa) eski olcusunde kalir */
.lumi-chip svg { width: 13px; height: 13px; vertical-align: -2px; }
/* ---- karsilama ekrani ---- */
/* Karsilama bloğu KOMPAKT tutuluyor: SSS sayfadan kalkinca 4 kategori bu
ekranin altina indi ve blok eski olcusuyle ikisini gorunmez birakiyordu
(329px gorunur alana 384px icerik). Kategoriler SSS'in tek girisi oldugu
icin dordunun de kaydirmadan gorunmesi sart. */
.lumi-welcome { text-align: center; padding: 0.2rem 0 0.1rem; }
.lumi-welcome-av {
display: block; /* SART: satir ici kalirsa width/height yok sayilir */
position: relative;
width: 76px; height: 76px;
/* ust bosluk peek icin: antenler daire tepesinin ~20px ustune cikiyor,
.lumi-log'un overflow'u onlari kirpmasin. */
margin: 1.1rem auto 0.5rem;
border-radius: 999px;
background: radial-gradient(118% 118% at 50% 10%, #26262f 0%, #17171d 46%, #0b0b0f 100%);
box-shadow: 0 0 0 2px var(--lumi-ring), 0 14px 34px -14px rgba(255, 209, 0, 0.5);
overflow: visible; /* SART: kafa/antenler daireden TASIYOR */
}
.lumi-welcome h3 {
margin: 0 0 0.3rem;
font-family: var(--font-display);
font-size: 1.06rem; font-weight: 600;
color: var(--ink);
}
.lumi-welcome p {
margin: 0 auto;
max-width: 30ch;
font-size: 0.83rem;
line-height: 1.55;
color: var(--ink-dim);
}
/* ---- alt serit: yazi kutusu + kanal kisayollari ---- */
.lumi-foot {
flex: 0 0 auto;
border-top: 1px solid var(--line);
background: var(--bg-1);
}
.lumi-form { display: flex; gap: 0.4rem; padding: 0.6rem 0.7rem; }
.lumi-input {
flex: 1 1 auto;
min-width: 0;
font: inherit;
font-size: 0.85rem;
padding: 0.55rem 0.75rem;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--bg-0);
color: var(--ink);
transition: border-color 0.2s;
}
.lumi-input::placeholder { color: var(--ink-faint); }
.lumi-input:focus { outline: none; border-color: var(--amber); }
.lumi-send {
flex: 0 0 auto;
width: 38px; height: 38px;
display: grid; place-items: center;
border: 0;
border-radius: 999px;
background: var(--amber);
color: #1a1206;
cursor: pointer;
transition: background 0.2s, transform 0.2s var(--ease-out);
}
.lumi-send:hover { background: var(--amber-hi); transform: scale(1.06); }
.lumi-send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lumi-send svg { width: 16px; height: 16px; }
/* Alt seritteki kanal kisayollari: eskiden 13px ikonlu soluk metin
baglantilariydi. Artik iki esit genislikte dugme — ikon madalyonu yukaridaki
.lumi-chip.wa/.ig ile AYNI kuraldan gelir, boylece panelde tek bir kanal
dili olur. */
.lumi-quick {
display: flex; align-items: stretch; gap: 0.5rem;
padding: 0 0.7rem 0.7rem;
}
.lumi-quick a, .lumi-quick button {
flex: 1 1 0; min-width: 0;
font: inherit;
font-size: 0.76rem; font-weight: 600;
border: 1px solid var(--line);
border-radius: 999px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
padding: 0.3rem 0.55rem 0.3rem 0.3rem;
color: var(--ink-dim);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.lumi-quick a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lumi-quick a:hover, .lumi-quick button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.lumi-quick-wa:hover { border-color: rgba(37, 211, 102, 0.6); }
.lumi-quick-ig:hover { border-color: rgba(225, 48, 108, 0.6); }
.lumi-quick a:focus-visible, .lumi-quick button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* ============ MOBIL ============
DIKKAT — panel burada position:fixed'e CEVRILMEZ. .lumi uzerinde
transform var; transform (translateY(0) bile olsa) alt ogelerdeki
position:fixed icin YENI BIR ICEREN BLOK yaratir. Boyle bir kuralda
left/right viewport'a degil 64px'lik .lumi kutusuna gore cozulur ve
panel ~32px'e coker. (base.css:236'da .wa-fab icin yazilmis uyarinin
ayni tuzagi, bir kat asagisi.)
Gerek de yok: yukaridaki temel kural
width: min(384px, calc(100vw - 2 * var(--sp-3)))
dar viewport'ta dogru sonucu zaten veriyor — 360px'te panel 312px olur,
.lumi sagdan --sp-3 iceride oldugu icin iki yanda 24px bosluk kalir. */
@media (max-width: 480px) {
.lumi-panel { max-height: min(76vh, 560px); }
.lumi-fab { width: 60px; height: 60px; }
.lumi-quick a, .lumi-quick button { font-size: 0.72rem; }
}
/* Yapiskan mobil CTA acikken widget onun USTUNE cikar.
MEDYA SORGUSU SART: .sticky-cta yalniz <=860px'te gorunur ama main.js .show
sinifini GENISLIKTEN BAGIMSIZ ekler — sorgu olmazsa masaustunde de bosuna
kayar. (.wa-fab'da da ayni tuzak vardi.) */
@media (max-width: 860px) {
.sticky-cta.show ~ .lumi { --lumi-lift: -56px; }
}
/* ============ HAREKET AZALTMA ============
Giris animasyonu opacity:0'dan basladigi icin reduced-motion'da ogeyi SON
haline sabitle (.rv kalibinin aynisi), yoksa widget hic gorunmez. */
@media (prefers-reduced-motion: reduce) {
.lumi, .lumi-fab, .lumi-panel { transition: none; }
.lumi-fab { animation: none; opacity: 1; }
.lumi-panel { animation: none; }
.lumi-fab::before { animation: none; opacity: 0; }
.lumi-av--flat img, .lumi-av--flat::after, .lumi-av-tip,
.lumi-av--peek, .lumi-av--peek::after,
.lumi-peek, .lumi-peek-head, .lumi-peek-body { animation: none !important; }
.lumi-av--flat img, .lumi-peek, .lumi-peek-head, .lumi-peek-body { transform: none; }
.lumi-peek, .lumi-peek-head, .lumi-peek-body { transition: none; }
/* peek katmanlari duragan konumunda kalsin — sahnenin yukselmesi de devre disi */
.lumi-fab:hover .lumi-peek, .lumi-fab:active .lumi-peek,
.lumi-welcome-av:hover .lumi-peek,
.lumi-fab:hover .lumi-peek-head, .lumi-fab:active .lumi-peek-head,
.lumi-welcome-av:hover .lumi-peek-head,
.lumi-fab:hover .lumi-peek-body, .lumi-welcome-av:hover .lumi-peek-body { translate: none; scale: none; }
.lumi-av--peek::after { opacity: 0; }
.lumi-av-tip { opacity: 0; }
.lumi-typing i { animation: none; opacity: 0.6; }
.lumi-chip:hover, .lumi-send:hover, .lumi-fab:hover { transform: none; }
}