.sp-flow-menu{
--cm-teal:#22a6a3; /* logodaki turkuaz */
--cm-teal-d:#13807d; /* koyu turkuaz (şerit araları, ikonlar) */
--cm-ink:#04202f; /* lacivert yazı */
--cm-accent:#ffc107; /* seçili / üzerine gelinen buton */
--cm-z:100060; /* diğer sabit öğelerin üstünde */
--cm-T:64px; /* kapalı buton çapı */
font-family:inherit;
}
.sp-flow-menu *,.sp-flow-menu *::before,.sp-flow-menu *::after{ box-sizing:border-box; }
.sp-flow-menu:not(.cm-ready) > *{ display:none; }

.sp-flow-menu .cm-backdrop{
position:fixed; inset:0; z-index:var(--cm-z);
background:rgba(4,32,47,.4);
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
opacity:0; pointer-events:none;
transition:opacity .35s ease;
}
.sp-flow-menu.is-open .cm-backdrop{ opacity:1; pointer-events:auto; }

.sp-flow-menu .cm-stage{
position:fixed; left:0; top:0; width:0; height:0;
z-index:calc(var(--cm-z) + 1);
transform:translate(var(--cx,0px),var(--cy,0px));
transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.sp-flow-menu .cm-stage > *{ position:absolute; left:0; top:0; }

.sp-flow-menu .cm-disc{
width:calc(var(--cm-R) * 2); height:calc(var(--cm-R) * 2);
margin:calc(var(--cm-R) * -1) 0 0 calc(var(--cm-R) * -1);
border-radius:50%;
background:radial-gradient(circle at 50% 38%, #2bb5b1 0%, var(--cm-teal) 55%, var(--cm-teal-d) 100%);
box-shadow:0 30px 80px rgba(2,20,32,.5), inset 0 0 0 9px var(--cm-teal), inset 0 0 0 12px rgba(255,255,255,.9);
transform:scale(.12); opacity:0; pointer-events:none;
transition:transform .55s cubic-bezier(.34,1.25,.64,1), opacity .3s ease;
}
.sp-flow-menu.is-open .cm-disc{ transform:scale(1); opacity:1; pointer-events:auto; }

.sp-flow-menu .cm-flower{
width:var(--cm-icon); height:var(--cm-icon);
margin:calc(var(--cm-icon) / -2) 0 0 calc(var(--cm-icon) / -2);
pointer-events:none;
transform:rotate(-144deg) scale(.3); opacity:0;
transition:transform .8s cubic-bezier(.22,1,.36,1) .04s, opacity .3s ease .04s;
}
.sp-flow-menu.is-open .cm-flower{ transform:none; opacity:1; }
.sp-flow-menu .cm-flower-svg{ display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 3px 6px rgba(2,40,50,.25)); }
.sp-flow-menu .cm-flower .cm-knot{
fill:#fff; fill-opacity:0;
stroke:#fff; stroke-width:1.6; stroke-linejoin:round;
stroke-dasharray:1; stroke-dashoffset:1;
transition:stroke-dashoffset .9s cubic-bezier(.45,0,.2,1) .1s, fill-opacity .45s ease;
}
.sp-flow-menu.is-open .cm-flower .cm-knot{ stroke-dashoffset:0; fill-opacity:1; transition-delay:.1s, .55s; }

.sp-flow-menu .cm-caption{
transform:translate(-50%, calc(var(--cm-R) + 10px));
max-width:calc(var(--cm-R) * 1.6);
padding:6px 14px; border-radius:999px;
background:var(--cm-ink); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.3);
font-size:12.5px; font-weight:800; line-height:1.25; text-align:center; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis;
opacity:0; pointer-events:none;
transition:opacity .3s ease;
}
.sp-flow-menu.is-open .cm-caption{ opacity:1; transition-delay:.35s; }

.sp-flow-menu .cm-items{ list-style:none; margin:0; padding:0; }
.sp-flow-menu .cm-li{
position:absolute; left:0; top:0;
transform:translate(-50%,-50%) scale(.2); opacity:0; pointer-events:none;
transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
transition-delay:calc((var(--n) - var(--i)) * 18ms);
}
.sp-flow-menu.is-open .cm-li{
transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1);
opacity:1; pointer-events:auto;
transition-delay:calc(var(--i) * 45ms + .2s);
}
.sp-flow-menu .cm-item{
position:relative;
display:flex; align-items:center; justify-content:center;
width:var(--cm-btn); height:var(--cm-btn);
margin:0; padding:0; border:0; border-radius:50%;
background:#fff; color:var(--cm-teal-d);
font-size:calc(var(--cm-btn) * .42); line-height:1;
text-decoration:none; cursor:pointer;
box-shadow:0 8px 20px rgba(2,20,32,.35), 0 0 0 3px var(--cm-teal-d);
transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
-webkit-tap-highlight-color:transparent;
}
.sp-flow-menu .cm-item:hover,
.sp-flow-menu .cm-item:focus-visible,
.sp-flow-menu .cm-li.is-hot .cm-item{
background:var(--cm-accent); color:var(--cm-ink); outline:none;
transform:scale(1.13);
box-shadow:0 12px 26px rgba(2,20,32,.45), 0 0 0 3px #fff;
}
.sp-flow-menu .cm-ico{ display:flex; align-items:center; justify-content:center; width:58%; height:58%; pointer-events:none; }
.sp-flow-menu .cm-ico > i{ font-size:calc(var(--cm-btn) * .42); line-height:1; }
.sp-flow-menu .cm-ico > img,.sp-flow-menu .cm-ico > svg{ width:100%; height:100%; object-fit:contain; }
.sp-flow-menu .cm-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.sp-flow-menu .cm-trigger{
width:var(--cm-T); height:var(--cm-T);
margin:calc(var(--cm-T) / -2) 0 0 calc(var(--cm-T) / -2);
display:grid; place-items:center; padding:0; border:0; border-radius:50%;
background:radial-gradient(circle at 50% 38%, #2bb5b1, var(--cm-teal) 60%, var(--cm-teal-d));
color:#fff; cursor:pointer; z-index:3;
box-shadow:0 10px 26px rgba(2,20,32,.42), inset 0 0 0 4px var(--cm-teal), inset 0 0 0 6px rgba(255,255,255,.88);
transition:width .45s cubic-bezier(.22,1,.36,1), height .45s cubic-bezier(.22,1,.36,1), margin .45s cubic-bezier(.22,1,.36,1), transform .2s ease;
-webkit-tap-highlight-color:transparent;
}
.sp-flow-menu .cm-trigger > *{ grid-area:1 / 1; }
.sp-flow-menu .cm-trigger:hover{ transform:scale(1.07); }
.sp-flow-menu .cm-trigger:focus-visible{ outline:3px solid var(--cm-accent); outline-offset:3px; }
.sp-flow-menu.is-open .cm-trigger{ --cm-T:var(--cm-center,46px); transform:none; background:var(--cm-teal-d); box-shadow:0 4px 12px rgba(2,20,32,.35); }
.sp-flow-menu.is-open .cm-trigger:hover{ background:var(--cm-ink); }
.sp-flow-menu .cm-trigger::after{
content:""; position:absolute; inset:0; border-radius:50%;
border:2px solid var(--cm-teal); pointer-events:none;
animation:cm-ring 2.6s ease-out infinite;
}
.sp-flow-menu.is-open .cm-trigger::after{ animation:none; opacity:0; }
@keyframes cm-ring{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(1.55); opacity:0; } }

.sp-flow-menu .cm-orbit{
width:0; height:0; z-index:2;
animation:cm-spin 24s linear infinite;
transition:opacity .3s ease, scale .45s cubic-bezier(.22,1,.36,1);
}
.sp-flow-menu.is-open .cm-orbit{ opacity:0; scale:.3; pointer-events:none; }
.sp-flow-menu .cm-moon{
position:absolute; left:0; top:0;
width:var(--cm-moon,28px); height:var(--cm-moon,28px);
margin:calc(var(--cm-moon,28px) / -2) 0 0 calc(var(--cm-moon,28px) / -2);
transform:translate(var(--mx),var(--my));
cursor:pointer;
}
.sp-flow-menu .cm-moon-in{
display:flex; align-items:center; justify-content:center;
width:100%; height:100%; border-radius:50%;
background:#fff; color:var(--cm-teal-d);
font-size:calc(var(--cm-moon,28px) * .5); line-height:1;
box-shadow:0 4px 10px rgba(2,20,32,.35), 0 0 0 2px var(--cm-teal-d);
animation:cm-spin-back 24s linear infinite;
transition:background .3s ease, color .3s ease, box-shadow .3s ease, scale .45s cubic-bezier(.34,1.56,.64,1);
}
.sp-flow-menu .cm-moon-in > i{ font-size:inherit; line-height:1; }
.sp-flow-menu .cm-moon-in > img,.sp-flow-menu .cm-moon-in > svg{ width:58%; height:58%; object-fit:contain; }
.sp-flow-menu .cm-moon:hover .cm-moon-in{ background:var(--cm-accent); color:var(--cm-ink); }
.sp-flow-menu .cm-moon.cm-pop{ z-index:2; }
.sp-flow-menu .cm-moon.cm-pop .cm-moon-in{
scale:1.7;
background:var(--cm-accent); color:var(--cm-ink);
box-shadow:0 8px 22px rgba(2,20,32,.45), 0 0 0 3px #fff, 0 0 0 9px rgba(255,193,7,.35);
}
@keyframes cm-spin{ to{ rotate:360deg; } }
@keyframes cm-spin-back{ to{ rotate:-360deg; } }

.sp-flow-menu .cm-rose{
width:70%; height:70%; overflow:visible;
transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .3s ease;
animation:cm-turn 16s linear infinite;
}
.sp-flow-menu .cm-rose .cm-knot{ fill:#fff; stroke:none; }
.sp-flow-menu.is-open .cm-rose{ transform:rotate(200deg) scale(.3); opacity:0; animation-play-state:paused; }
@keyframes cm-turn{ to{ rotate:360deg; } }

.sp-flow-menu .cm-center{
display:flex; align-items:center; justify-content:center;
opacity:0; transform:scale(.5) rotate(-90deg);
transition:opacity .25s ease, transform .45s cubic-bezier(.22,1,.36,1);
pointer-events:none;
}
.sp-flow-menu.is-open .cm-center{ opacity:1; transform:none; transition-delay:.12s; }
.sp-flow-menu .cm-x{ width:18px; height:18px; }

@media (max-width:600px){
.sp-flow-menu{ --cm-T:56px; }
.sp-flow-menu .cm-caption{ font-size:11.5px; }
}

@media (prefers-reduced-motion:reduce){
.sp-flow-menu .cm-stage,.sp-flow-menu .cm-disc,.sp-flow-menu .cm-flower,.sp-flow-menu .cm-knot,.sp-flow-menu .cm-caption,
.sp-flow-menu .cm-li,.sp-flow-menu .cm-trigger,.sp-flow-menu .cm-rose,.sp-flow-menu .cm-center{ transition-duration:.01s !important; transition-delay:0s !important; }
.sp-flow-menu .cm-rose,.sp-flow-menu .cm-trigger::after,.sp-flow-menu .cm-orbit,.sp-flow-menu .cm-moon-in{ animation:none !important; }
}