/* KALFA v12.9 — Hareket katmanı "VIP / premium" (v128-forms.css'ten SONRA, v128-platform.css'ten ÖNCE yüklenir)
   1) açılış ekranı: yalnız logo (ad/alt başlık logo varken gizli), nefes alan hale, parlayan yükleme çubuğu, yumuşak kapanış
   2) giriş ekranı: canlı arka plan, kartın yükselerek gelişi, alanların sırayla belirmesi, logo süzülmesi, odak ışığı, düğme parıltısı
   3) formlar ve alt pencereler: alanların kademeli gelişi, odakta hafif yükselme, seçim düğmeleri, kaydet düğmesi
   4) sayfa içeriği: KPI kutuları ve liste satırları kademeli, kartlar / karolar / menü bağlantıları hover-press
   5) sayılar: js/motion.js KPI değerlerini sayarak getirir (burada yalnızca görünüm)
   Tüm hareketler yalnız transform / opacity / filter; "hareketi azalt" ve yönetici "animasyon kapalı" ayarında kapanır. */

:root { --mo-ease: cubic-bezier(.22, 1, .36, 1); --mo-spring: cubic-bezier(.34, 1.4, .64, 1); }

/* ================================================================ 1) açılış ekranı — yalnız logo */
.splash:has(.splash-logo) .splash-name, .splash:has(.splash-logo) .splash-sub { display: none !important; }
.splash { gap: 0; }
.splash-halo {
  position: absolute; left: 50%; top: 50%; width: min(440px, 120vw); aspect-ratio: 1; margin: -50% 0 0 -50%; margin: calc(min(440px, 120vw) / -2) 0 0 calc(min(440px, 120vw) / -2);
  border-radius: 50%; z-index: -1; pointer-events: none; opacity: .9;
  background: radial-gradient(circle, color-mix(in srgb, var(--sp-acc, #C8963E) 26%, transparent) 0%, color-mix(in srgb, var(--sp-acc, #C8963E) 10%, transparent) 32%, transparent 62%);
  animation: moHalo 4.5s ease-in-out infinite;
}
.splash-halo::before {
  content: ''; position: absolute; inset: 18%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 68%, color-mix(in srgb, var(--sp-acc, #C8963E) 55%, transparent) 86%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1px) 50%, transparent 51%); mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1px) 50%, transparent 51%);
  animation: moOrbit 6s linear infinite; opacity: .8;
}
@keyframes moHalo { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes moOrbit { to { transform: rotate(360deg); } }
.splash-logo, .splash-mark {
  animation: moSplashIn 1.1s var(--mo-ease) both, moFloat 5.5s 1.1s ease-in-out infinite;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .42)) drop-shadow(0 0 28px color-mix(in srgb, var(--sp-acc, #C8963E) 22%, transparent));
}
.splash-logo { max-width: min(320px, 68vw); max-height: 110px; }
@keyframes moSplashIn { 0% { opacity: 0; transform: scale(.82) translateY(18px); filter: blur(10px); } 55% { opacity: 1; filter: blur(0); } 100% { transform: none; opacity: 1; filter: blur(0); } }
@keyframes moFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.splash-bar { width: 150px; height: 2px; margin-top: 34px; border-radius: 2px; background: color-mix(in srgb, var(--sp-fg, #fff) 12%, transparent); animation: moFade .8s .6s both; overflow: visible; }
.splash-bar span {
  width: 38%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--sp-acc, #C8963E) 45%, #fff 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--sp-acc, #C8963E) 80%, transparent), 0 0 3px #fff; animation: moSweep 1.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes moSweep { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@keyframes moFade { from { opacity: 0; } to { opacity: 1; } }
.splash-status { margin-top: 18px; }
.splash.hide { opacity: 0; transform: scale(1.06); filter: blur(4px); transition: opacity .45s var(--mo-ease), transform .55s var(--mo-ease), filter .45s; }
@media (max-height: 430px) { .splash-logo { max-height: 64px; } .splash-halo { width: 240px; margin: -120px 0 0 -120px; } .splash-bar { margin-top: 18px; } }

/* ================================================================ 2) giriş ekranı */
.login { position: relative; overflow: hidden; background-size: 180% 180%; animation: moLoginBg 22s ease-in-out infinite alternate; }
.login::before, .login::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(48px); opacity: .55;
}
.login::before { width: 46vmax; height: 46vmax; left: -14vmax; top: -18vmax; background: radial-gradient(circle, color-mix(in srgb, var(--sp-acc, #C8963E) 55%, transparent), transparent 70%); animation: moOrbA 18s ease-in-out infinite alternate; }
.login::after { width: 40vmax; height: 40vmax; right: -12vmax; bottom: -16vmax; background: radial-gradient(circle, rgba(31, 123, 255, .42), transparent 70%); animation: moOrbB 24s ease-in-out infinite alternate; }
@keyframes moLoginBg { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes moOrbA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(10vmax, 8vmax, 0) scale(1.15); } }
@keyframes moOrbB { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-9vmax, -7vmax, 0) scale(1.1); } }
.lg-wrap { position: relative; z-index: 1; }
.login-card.page { animation: moCardIn .8s var(--mo-ease) both; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); }
@keyframes moCardIn { from { opacity: 0; transform: translateY(32px) scale(.96); filter: blur(6px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }
.login-card > *, #loginForm > * { animation: moUp .6s var(--mo-ease) both; }
.login-card > .brand { animation-delay: .12s; }
#loginForm > :nth-child(1) { animation-delay: .22s; } #loginForm > :nth-child(2) { animation-delay: .28s; } #loginForm > :nth-child(3) { animation-delay: .34s; }
#loginForm > :nth-child(4) { animation-delay: .40s; } #loginForm > :nth-child(5) { animation-delay: .46s; } #loginForm > :nth-child(n+6) { animation-delay: .52s; }
.login-card > .login-foot { animation-delay: .6s; }
@keyframes moUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lg-logo { animation: moFloat 6s 1s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .18)); }
.lg-mark { animation: moFloat 6s 1s ease-in-out infinite; }
.login-card .field input { transition: border-color .25s var(--mo-ease), box-shadow .3s var(--mo-ease), transform .3s var(--mo-ease), background .25s; }
.login-card .field:focus-within input { transform: translateY(-1px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 24px -14px color-mix(in srgb, var(--accent) 60%, transparent); }
.login-card .field > span { transition: color .25s; }
.login-card .field:focus-within > span { color: var(--accent); }
.login-card .btn-primary { position: relative; overflow: hidden; transition: transform .25s var(--mo-spring), box-shadow .3s var(--mo-ease), filter .2s; }
.login-card .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-130%); transition: transform .9s var(--mo-ease); pointer-events: none; }
.login-card .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--navy) 70%, transparent); }
.login-card .btn-primary:hover::after { transform: translateX(130%); }
.login-card .btn-primary:active { transform: translateY(0) scale(.985); }
.login-card .form-error:not(:empty) { animation: moShake .5s var(--mo-ease); }
@keyframes moShake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.login-card .check input { transition: transform .2s var(--mo-spring); }
.login-card .check input:active { transform: scale(.85); }
.login-foot a { transition: color .2s, text-underline-offset .2s; }
.login-foot a:hover { color: #fff; text-underline-offset: 5px; }

/* ================================================================ 3) formlar ve alt pencereler */
/* uzun yazım: kısa yazım animation-delay'i sıfırlayıp aşağıdaki kademeli gecikmeleri ezer */
.sheet-wrap.open .sheet .sheet-body > .form > *, .sheet-wrap.open .sheet .sheet-body > .detail-grid > *, .sheet-wrap.open .sheet .sheet-body > .card, .sheet-wrap.open .sheet .sheet-body > .list > .li:nth-child(-n+10) {
  animation-name: moFieldIn; animation-duration: .5s; animation-timing-function: var(--mo-ease); animation-fill-mode: both;
}
.sheet-wrap.open .sheet .sheet-body > * > :nth-child(1) { animation-delay: .05s; } .sheet-wrap.open .sheet .sheet-body > * > :nth-child(2) { animation-delay: .09s; }
.sheet-wrap.open .sheet .sheet-body > * > :nth-child(3) { animation-delay: .13s; } .sheet-wrap.open .sheet .sheet-body > * > :nth-child(4) { animation-delay: .17s; }
.sheet-wrap.open .sheet .sheet-body > * > :nth-child(5) { animation-delay: .21s; } .sheet-wrap.open .sheet .sheet-body > * > :nth-child(6) { animation-delay: .25s; }
.sheet-wrap.open .sheet .sheet-body > * > :nth-child(7) { animation-delay: .29s; } .sheet-wrap.open .sheet .sheet-body > * > :nth-child(n+8) { animation-delay: .33s; }
@keyframes moFieldIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sheet-head h3 { animation: moUp .5s .05s var(--mo-ease) both; }
.sheet-foot .btn { animation: moUp .5s .2s var(--mo-ease) both; }
.field input, .field select, .field textarea, .input, .picker-btn { transition: border-color .22s var(--mo-ease), box-shadow .28s var(--mo-ease), transform .28s var(--mo-ease), background .2s; }
.field:focus-within input:not([type=checkbox]):not([type=radio]), .field:focus-within select, .field:focus-within textarea { transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 8px 20px -14px color-mix(in srgb, var(--accent) 55%, transparent); }
.field > span { transition: color .22s; } .field:focus-within > span { color: var(--accent); }
.seg button { transition: background .25s var(--mo-ease), color .2s, transform .2s var(--mo-spring), box-shadow .25s; }
.seg button:active { transform: scale(.95); }
.seg button.on { box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35); }
.chip, .picker-btn, .date-chips button { transition: transform .2s var(--mo-spring), background .2s, border-color .2s, box-shadow .2s; }
.chip:active, .picker-btn:active, .date-chips button:active { transform: scale(.95); }
.sheet-foot .btn-primary, .form .btn-primary, .page .btn-primary { position: relative; overflow: hidden; transition: transform .25s var(--mo-spring), box-shadow .3s var(--mo-ease), filter .2s; }
.sheet-foot .btn-primary::after, .form .btn-primary::after, .page .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .26) 50%, transparent 70%); transform: translateX(-130%); transition: transform .9s var(--mo-ease); pointer-events: none; }
.sheet-foot .btn-primary:hover::after, .form .btn-primary:hover::after, .page .btn-primary:hover::after { transform: translateX(130%); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--navy) 70%, transparent); }
.btn:active, .icon-btn:active { transform: scale(.96); transition-duration: .08s; }
.amount-box input { transition: transform .25s var(--mo-spring), color .2s; }
.amount-box:focus-within input { transform: scale(1.02); }

/* ================================================================ 4) sayfa içeriği */
.kpi-grid > * { animation: moKpi .6s var(--mo-ease) both; }
.kpi-grid > :nth-child(1) { animation-delay: .04s; } .kpi-grid > :nth-child(2) { animation-delay: .10s; } .kpi-grid > :nth-child(3) { animation-delay: .16s; } .kpi-grid > :nth-child(4) { animation-delay: .22s; }
.kpi-grid > :nth-child(5) { animation-delay: .28s; } .kpi-grid > :nth-child(6) { animation-delay: .34s; } .kpi-grid > :nth-child(n+7) { animation-delay: .40s; }
@keyframes moKpi { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.page .list > .li:nth-child(-n+14) { animation: moUp .45s var(--mo-ease) both; }
.page .list > .li:nth-child(1) { animation-delay: .03s; } .page .list > .li:nth-child(2) { animation-delay: .06s; } .page .list > .li:nth-child(3) { animation-delay: .09s; } .page .list > .li:nth-child(4) { animation-delay: .12s; }
.page .list > .li:nth-child(5) { animation-delay: .15s; } .page .list > .li:nth-child(6) { animation-delay: .18s; } .page .list > .li:nth-child(7) { animation-delay: .21s; } .page .list > .li:nth-child(8) { animation-delay: .24s; }
.page .list > .li:nth-child(9) { animation-delay: .27s; } .page .list > .li:nth-child(10) { animation-delay: .30s; } .page .list > .li:nth-child(n+11) { animation-delay: .33s; }
.tiles > .tile, .m-grid > .tile { animation: moUp .45s var(--mo-ease) both; }
.tiles > .tile:nth-child(2) { animation-delay: .04s; } .tiles > .tile:nth-child(3) { animation-delay: .07s; } .tiles > .tile:nth-child(4) { animation-delay: .10s; } .tiles > .tile:nth-child(5) { animation-delay: .13s; }
.tiles > .tile:nth-child(6) { animation-delay: .16s; } .tiles > .tile:nth-child(7) { animation-delay: .19s; } .tiles > .tile:nth-child(8) { animation-delay: .22s; } .tiles > .tile:nth-child(n+9) { animation-delay: .25s; }
.card, .dash-card, .tile, .kpi, .li, .link-card, .quick-grid .quick, .w-tool-btn, .dash-shortcuts > * { transition: transform .3s var(--mo-ease), box-shadow .35s var(--mo-ease), border-color .25s, background .25s; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover, .link-card:hover, .quick-grid .quick:hover, .w-tool-btn:hover, .dash-shortcuts > *:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .35); }
  .kpi:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .35); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
  .dashboard-page .dash-card:not(.plain):hover { box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .35); }
  .li:hover { transform: translateX(2px); }
  .sb-link { transition: transform .25s var(--mo-ease), background .2s, color .2s; }
  .sb-link:hover { transform: translateX(3px); }
}
.sb-link svg, .tab svg { transition: transform .3s var(--mo-spring); }
.sb-link.on svg, .tab.on svg, .sb-link:hover svg { transform: scale(1.12); }
.topbar .icon-btn { transition: transform .25s var(--mo-spring), background .2s; }
.topbar .icon-btn:hover { transform: translateY(-1px); }
.fab-desktop, #fabDesktop, .fab { transition: transform .3s var(--mo-spring), box-shadow .3s; }
.fab-desktop:hover, #fabDesktop:hover, .fab:hover { transform: translateY(-3px) scale(1.03); }
.badge, .pill { transition: transform .2s var(--mo-spring); }
.legal-bar, .lic-bar:not([hidden]) { animation: moUp .5s var(--mo-ease) both; }
.lock-screen, .tour { animation: moFade .3s both; }
/* sayı sayacı (js/motion.js): sayarken hafif parlar */
.kpi-val.mo-count { animation: moCount .9s var(--mo-ease) both; }
@keyframes moCount { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ================================================================ kapatma: hareketi azalt / yönetici kapattı */
@media (prefers-reduced-motion: reduce) {
  .splash-halo, .splash-halo::before, .splash-logo, .splash-mark, .splash-bar, .splash-bar span, .login, .login::before, .login::after, .login-card.page, .login-card > *, #loginForm > *, .lg-logo, .lg-mark,
  .sheet-wrap.open .sheet .sheet-body > * > *, .sheet-head h3, .sheet-foot .btn, .kpi-grid > *, .page .list > .li, .tiles > .tile, .m-grid > .tile, .legal-bar, .lic-bar, .kpi-val.mo-count, .login-card .form-error { animation: none !important; }
  .splash.hide { transform: none; filter: none; }
  .btn-primary::after { display: none; }
  .btn-primary:hover, .tile:hover, .kpi:hover, .li:hover, .sb-link:hover, .fab:hover, .login-card .field:focus-within input { transform: none; }
}
html[data-splash-anim="0"] .splash-halo, html[data-splash-anim="0"] .splash-halo::before, html[data-splash-anim="0"] .splash-logo, html[data-splash-anim="0"] .splash-mark,
.splash.no-anim .splash-halo, .splash.no-anim .splash-halo::before, .splash.no-anim .splash-logo, .splash.no-anim .splash-mark, html.reduce-motion .splash-halo, html.reduce-motion .splash-logo { animation: none !important; }
html.reduce-motion .login, html.reduce-motion .login::before, html.reduce-motion .login::after, html.reduce-motion .login-card > *, html.reduce-motion #loginForm > *, html.reduce-motion .kpi-grid > *, html.reduce-motion .page .list > .li, html.reduce-motion .tiles > .tile { animation: none !important; }
@media (forced-colors: active) { .login::before, .login::after, .splash-halo { display: none; } }