/* Panelim — bütün sayt üçün animasiyalar (admin panel, istifadəçi paneli, giriş/landing). app.css və designs.css-dən SONRA qoşun.
 * Rənglər stilə görə dəyişir: --fx / --fx2 / --fx3 (R,G,B) Design::overrideCss() tərəfindən hər stil üçün yazılır. */
:root{--fx:56,189,248;--fx2:14,165,233;--fx3:125,211,252}
.btn,.gbtn{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:rip .6s ease-out;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* Əsas düymələr: hər birinin öz effekti (JS data-fx 1-6 təyin edir) */
.btn:not(.ghost):not(.danger){transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background-position .5s}
.btn[data-fx="1"]::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg)}
.btn[data-fx="1"]:hover::after{animation:lpSweep .8s ease}
.btn[data-fx="2"]:hover{transform:translateY(-3px);animation:glowP 1.2s ease-in-out infinite}
@keyframes glowP{0%,100%{box-shadow:0 6px 16px -4px rgba(var(--fx),.5)}50%{box-shadow:0 10px 30px -2px rgba(var(--fx2),.85)}}
.btn[data-fx="3"]{background-size:220% 100%}
.btn[data-fx="3"]:hover{background-position:100% 0;transform:translateY(-2px)}
.btn[data-fx="4"]:hover{animation:ringP .9s ease-out infinite}
@keyframes ringP{from{box-shadow:0 0 0 0 rgba(var(--fx),.6)}to{box-shadow:0 0 0 12px rgba(var(--fx),0)}}
.btn[data-fx="5"]::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:#fff;transition:width .35s}
.btn[data-fx="5"]:hover::after{width:100%}
.btn[data-fx="6"]:hover{transform:scale(1.07) rotate(-1.2deg)}
.btn:active{transform:scale(.96)!important}

/* Ghost: soldan dolan fon */
.btn.ghost{background:linear-gradient(var(--pri2),var(--pri2)) no-repeat 0 0/0% 100%;transition:background-size .4s ease,color .3s,border-color .3s}
.btn.ghost:hover,.btn.ghost:active{background-size:100% 100%;color:#fff;border-color:var(--pri2)}
/* Təhlükəli: silkələnir */
.btn.danger:hover{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
/* Kiçik düymələr: sıçrayış */
.btn.sm:hover{animation:hop .4s ease}
@keyframes hop{40%{transform:translateY(-5px)}70%{transform:translateY(1px)}}
/* Böyük və giriş düymələri: daim nəbz */
.btn.lg,.btn.lx-cta,.login-card .btn{animation:cta 2.8s ease-in-out infinite}
@keyframes cta{0%,100%{box-shadow:0 0 0 0 rgba(var(--fx),.5)}50%{box-shadow:0 0 0 9px rgba(var(--fx),0)}}
.btn.lg::before,.btn.lx-cta::before,.login-card .btn::before{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:lpSweep 3.6s ease-in-out infinite}
/* Google, ikon və qrup düymələri */
.gbtn:hover{animation:gb 1.6s linear infinite}
@keyframes gb{0%{border-color:#EA4335}25%{border-color:#FBBC05}50%{border-color:#34A853}75%{border-color:#4285F4}100%{border-color:#EA4335}}
.ibtn svg,.pbtn svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.ibtn:hover svg,.pbtn:hover svg{transform:rotate(20deg) scale(1.2)}
.grp-btn{transition:transform .25s,background .2s}.grp-btn:hover{transform:translateX(5px)}
.dd.open .dd-btn{box-shadow:0 0 0 3px rgba(var(--fx),.25)}
.lang-btn:hover,.ps-btn:hover,.sp-btn:hover,.ps-wa-btn:hover{animation:hop .4s ease}

/* Yan menyu və yuxarı panel */
.nav a{transition:transform .25s,background .25s,color .25s}
.nav a:hover{transform:translateX(5px)}
.nav a svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.nav a:hover svg{transform:scale(1.25) rotate(-8deg)}
.nav a.on{animation:navOn .5s ease}
@keyframes navOn{from{opacity:.4;transform:translateX(-10px)}}
.bal{transition:transform .25s,border-color .25s}.bal:hover{transform:translateY(-2px)}
a.bell:hover svg{animation:bell .6s ease}
@keyframes bell{25%{transform:rotate(18deg)}50%{transform:rotate(-14deg)}75%{transform:rotate(8deg)}}
.av{transition:transform .3s}.av:hover{transform:rotate(360deg) scale(1.1)}

/* Səhifə girişi, kartlar, cədvəl, input */
.content>*{animation:rise .55s cubic-bezier(.22,1,.36,1) both}
.content>*:nth-child(2){animation-delay:.07s}.content>*:nth-child(3){animation-delay:.14s}.content>*:nth-child(4){animation-delay:.21s}.content>*:nth-child(n+5){animation-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.card{transition:border-color .3s,box-shadow .3s}.card:hover{border-color:var(--pri2);box-shadow:0 10px 28px -12px rgba(var(--fx),.35)}
.alert{animation:rise .4s both}
tbody tr{animation:rowIn .4s both;transition:background .2s}
tbody tr:nth-child(2){animation-delay:.04s}tbody tr:nth-child(3){animation-delay:.08s}tbody tr:nth-child(4){animation-delay:.12s}tbody tr:nth-child(5){animation-delay:.16s}tbody tr:nth-child(n+6){animation-delay:.2s}
@keyframes rowIn{from{opacity:0;transform:translateX(-12px)}}
tbody tr:hover{background:rgba(var(--fx),.1)}
input:focus,select:focus,textarea:focus{animation:fcs .45s ease}
@keyframes fcs{from{box-shadow:0 0 0 0 rgba(var(--fx),.5)}}
.toast{animation:tin .35s cubic-bezier(.34,1.56,.64,1)}
/* Panelim landing animasiyaları — app.css-dən SONRA qoşun. Yalnız .lp daxilinə təsir edir. */
.lp-blob.b1{animation:lpFloat 14s ease-in-out infinite}
.lp-blob.b2{animation:lpFloat 18s ease-in-out infinite reverse}
@keyframes lpFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}}

.lp .pill .dot{position:relative}
.lp .pill .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:lpPing 1.8s ease-out infinite}
@keyframes lpPing{from{transform:scale(1);opacity:.7}to{transform:scale(3);opacity:0}}

.lp .hero h1{background:linear-gradient(90deg,var(--text) 0,var(--pri3) 45%,var(--text) 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:lpShine 7s linear infinite}
@keyframes lpShine{to{background-position:-220% 0}}

.lp .login-card{position:relative;overflow:hidden}
.lp .login-card::before{content:"";position:absolute;inset:-2px;z-index:0;background:conic-gradient(from 0deg,transparent 0 70%,var(--pri2) 85%,transparent 100%);animation:lpSpin 6s linear infinite;opacity:.55}
.lp .login-card::after{content:"";position:absolute;inset:1px;z-index:0;background:var(--card);border-radius:calc(var(--r) - 1px)}
.lp .login-card>*{position:relative;z-index:1}
@keyframes lpSpin{to{transform:rotate(360deg)}}

@keyframes lpSweep{0%,60%{left:-70%}100%{left:140%}}

.lp .feat,.lp .step{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.lp .feat:hover,.lp .step:hover{transform:translateY(-6px);border-color:var(--pri2);box-shadow:0 14px 30px rgba(var(--fx),.18)}
.lp .feat:hover .ico{animation:lpWob .6s ease}
@keyframes lpWob{25%{transform:rotate(-10deg) scale(1.1)}60%{transform:rotate(8deg) scale(1.1)}}

.lp .step .n{animation:lpBeat 2.4s ease-in-out infinite}
.lp .step:nth-child(2) .n{animation-delay:.3s}.lp .step:nth-child(3) .n{animation-delay:.6s}.lp .step:nth-child(4) .n{animation-delay:.9s}
@keyframes lpBeat{0%,100%{box-shadow:0 0 0 0 rgba(var(--fx),.55)}50%{box-shadow:0 0 0 10px rgba(var(--fx),0)}}

.lp .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.lp .rv.in{opacity:1;transform:none}

.lp details{transition:border-color .25s}
.lp details[open]{border-color:var(--pri2)}
.lp details[open] p{animation:lpDrop .35s ease}
@keyframes lpDrop{from{opacity:0;transform:translateY(-8px)}}

@media(prefers-reduced-motion:reduce){.lp *,.lp *::before,.lp *::after{animation:none!important;transition:none!important}.lp .rv{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}}

/* Gecə / gündüz keçidi: yumşaq rəng dəyişməsi + ikon fırlanması */
html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{transition:background-color .55s ease,color .55s ease,border-color .55s ease,box-shadow .55s ease,fill .55s ease!important}
.theme-btn{transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .3s}
.theme-btn:hover{transform:rotate(25deg) scale(1.12)}
.theme-btn.spin{animation:themeSpin .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes themeSpin{from{transform:rotate(-200deg) scale(.5)}to{transform:none}}
body{transition:background-color .55s ease}

/* ====== Əvvəlki Style 2-dən götürülən animasiyalar: indi bütün stillərdə, admin və istifadəçi panelində işləyir ====== */
@keyframes fxLogo{to{background-position:-200% 0}}
.login-card{animation:fxGlow 3s ease-in-out infinite}
@keyframes fxGlow{0%,100%{box-shadow:0 0 14px rgba(var(--fx),.4),inset 0 0 14px rgba(var(--fx),.12)}50%{box-shadow:0 0 34px rgba(var(--fx2),.6),inset 0 0 22px rgba(var(--fx2),.16)}}
.stat::before{background:linear-gradient(90deg,var(--pri),var(--pri2),var(--pri3));background-size:200% 100%;animation:fxLogo 4s linear infinite}
.wa-float{animation:fxPing 2.2s ease-out infinite}
@keyframes fxPing{0%{box-shadow:0 0 0 0 rgba(var(--fx2),.7)}100%{box-shadow:0 0 0 22px rgba(var(--fx2),0)}}
.step .n{animation:fxNum 2.6s ease-in-out infinite}
.step:nth-child(2) .n{animation-delay:.3s}.step:nth-child(3) .n{animation-delay:.6s}.step:nth-child(4) .n{animation-delay:.9s}
@keyframes fxNum{0%,100%{transform:rotate(-4deg) scale(1);box-shadow:0 0 0 0 rgba(var(--fx2),.5)}50%{transform:rotate(4deg) scale(1.07);box-shadow:0 0 0 12px rgba(var(--fx2),0)}}

/* Landing: dalğa və parlayan platforma ikonları */
.fx-wave{margin:6px -20px 0;height:70px;overflow:hidden;position:relative}
.fx-wave svg{width:200%;height:100%;fill:var(--card);animation:fxWave 9s linear infinite}
@keyframes fxWave{to{transform:translateX(-50%)}}
.fx-plat{display:grid;grid-template-columns:repeat(5,1fr);gap:16px 8px;max-width:640px;margin:0 auto 38px;text-align:center}
.fx-plat>div{color:var(--text);font-size:13px;cursor:default;animation:fxBob 3.6s ease-in-out infinite}
.fx-plat>div:nth-child(2n){animation-delay:.5s}.fx-plat>div:nth-child(3n){animation-delay:1s}.fx-plat>div:nth-child(5n){animation-delay:1.5s}
@keyframes fxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.fx-plat i{display:block;width:60px;height:60px;margin:0 auto 6px;border-radius:16px;font-style:normal;box-shadow:0 8px 22px -4px var(--c);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.fx-plat i img{display:block;width:100%;height:100%;object-fit:contain;border-radius:16px}
.fx-plat>div:hover i{transform:scale(1.18) rotate(-8deg)}
.fx-plat span{display:block}
.fx-plat .p1{--c:#25f4ee}.fx-plat .p2{--c:#e1306c}.fx-plat .p3{--c:#1877f2}.fx-plat .p4{--c:#1d9bf0}.fx-plat .p5{--c:#26a5e4}
.fx-plat .p6{--c:#4a76a8}.fx-plat .p7{--c:#f7931e}.fx-plat .p8{--c:#f00}.fx-plat .p9{--c:#1db954}
@media(max-width:560px){.fx-plat{grid-template-columns:repeat(4,1fr)}.fx-plat i{width:54px;height:54px}}

/* ====== Orginal_CHAT stilləri (data-design="c-..."): orijinal çoxrəngli gradient, hərəkətli ====== */
@keyframes fxShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
:root[data-design^="c-"] .btn:not(.ghost):not(.danger){background:var(--grad);background-size:240% 100%;color:#fff;border-color:transparent;animation:fxShift 7s ease-in-out infinite;text-shadow:0 1px 2px rgba(0,0,0,.35)}
:root[data-design^="c-"] .btn.lg,:root[data-design^="c-"] .btn.lx-cta,:root[data-design^="c-"] .login-card .btn{animation:fxShift 7s ease-in-out infinite,cta 2.8s ease-in-out infinite}
:root[data-design^="c-"] .logo:not(.nm-flag):not(.nm-solid) .brand-name:not(.nb){background-image:var(--grad);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;animation:fxShift 7s ease-in-out infinite}
:root[data-design^="c-"] .nav a.on{background:var(--grad);background-size:240% 100%;color:#fff;border-color:transparent;animation:fxShift 7s ease-in-out infinite,navOn .5s ease}
:root[data-design^="c-"] .stat::before{background:var(--grad);background-size:240% 100%;animation:fxShift 6s ease-in-out infinite}
:root[data-design^="c-"]:not([data-design^="c-bayraq"]) .top{border-image:var(--grad) 1;border-bottom-width:3px;border-bottom-style:solid}
:root[data-design^="c-"] body{background:radial-gradient(900px 520px at 85% -10%,rgba(var(--fx),.18) 0,transparent 62%),radial-gradient(700px 420px at -10% 10%,rgba(var(--fx2),.14) 0,transparent 60%),var(--bg)}
:root[data-design^="c-"] .card{border-radius:14px}
:root[data-design^="c-"] .step .n,:root[data-design^="c-"] .feat .ico{background:var(--grad);color:#fff}

/* ====== Style 2: Azərbaycan bayrağı (mavi / qırmızı / yaşıl), yumşaq kölgəli ====== */
:root[data-design^="c-bayraq"]{--sh:rgba(0,0,0,.26)}
:root[data-design="c-bayraq-night"]{--sh:rgba(0,0,0,.55)}
:root[data-design^="c-bayraq"] .top{box-shadow:0 8px 22px -8px var(--sh)}
:root[data-design^="c-bayraq"] .card,:root[data-design^="c-bayraq"] .feat,:root[data-design^="c-bayraq"] .step,:root[data-design^="c-bayraq"] details,:root[data-design^="c-bayraq"] .stat,:root[data-design^="c-bayraq"] .bal{box-shadow:0 10px 26px -10px var(--sh),0 3px 8px -2px var(--sh)}
:root[data-design^="c-bayraq"] .card:hover{box-shadow:0 16px 34px -10px var(--sh),0 6px 14px -4px rgba(var(--fx),.35)}
:root[data-design^="c-bayraq"] .btn:not(.ghost):not(.danger){box-shadow:0 8px 18px -6px var(--sh),0 3px 6px -2px rgba(var(--fx2),.35)}
:root[data-design^="c-bayraq"] .login-card{box-shadow:0 18px 40px -12px var(--sh),0 6px 14px -4px var(--sh)}
:root[data-design^="c-bayraq"] .nav a.on{box-shadow:0 6px 14px -6px var(--sh)}
:root[data-design^="c-bayraq"] .fx-plat i{box-shadow:0 10px 22px -6px var(--sh)}