/* Slow & Smooth site-wide canvas. --ko-ambient is the only animated source.
   Dark wash matches the reference GIF: low-luma wine→indigo→teal→olive on near-black (~80s). */
@property --ko-ambient {
  syntax: "<color>";
  inherits: true;
  initial-value: #131722;
}

html {
  --ko-ambient: #131722;
  --brand: var(--ko-ambient);
  background-color: #131722;
}

html.ko-dark,
html[data-theme="dark"],
html[data-ko-theme="dark"],
html[data-theme="midnight"],
html[data-ko-theme="midnight"],
html[data-theme="compact-dark"],
html.ko-dark body,
html[data-theme="dark"] body,
html[data-ko-theme="dark"] body,
html[data-theme="midnight"] body,
html[data-ko-theme="midnight"] body,
html[data-theme="compact-dark"] body {
  --ko-ambient: #131722;
  background-color: #131722;
}

html.ko-light,
html.light,
html[data-theme="light"],
html[data-ko-theme="light"] {
  --ko-ambient: #e8eef6;
  animation-name: ko-ambient-shift-light;
}

html.ko-light body,
html.light body,
html[data-theme="light"] body,
html[data-ko-theme="light"] body {
  background-color: var(--ko-ambient);
}

html.ko-dark #ko-boot,
html.ko-dark #ko-root,
html.ko-dark .page-wrapper,
html.ko-dark .main-wrapper,
html.ko-dark header.ps-master-header,
html.ko-dark .ps-master-header,
html.ko-dark #kartlaodeme-instant-widget,
html.ko-dark #mipayway-instant-widget,
html.ko-dark .kartlaodeme-hero-widget-card,
html.ko-dark .hero-widget-card,
html.ko-dark .ps-mobile-drawer,
html.ko-dark #ps-mobile-nav-drawer,
html[data-theme="dark"] #ko-boot,
html[data-theme="dark"] #ko-root,
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] .main-wrapper,
html[data-theme="dark"] header.ps-master-header,
html[data-theme="midnight"] .page-wrapper,
html[data-theme="midnight"] .main-wrapper,
html[data-theme="compact-dark"] .page-wrapper,
html.ko-light .page-wrapper,
html.ko-light .main-wrapper,
html.ko-light header.ps-master-header,
html.ko-light .ps-master-header,
html.ko-light .wrap,
html.ko-light .summary,
html.ko-light .box,
html.light .page-wrapper,
html[data-theme="light"] .page-wrapper,
html[data-ko-theme="light"] .page-wrapper {
  background-color: var(--ko-ambient) !important;
  background: var(--ko-ambient) !important;
}

/* Form / card contrast stays solid; canvas token does not paint inputs. */
html .shell,
html .card,
html .panel,
html .card-frame,
html input,
html textarea,
html select,
html .field input,
html #email,
html #amt-input,
html .methods button {
  animation: none !important;
}

@keyframes ko-ambient-shift {
  0%, 100% { --ko-ambient: #131722; }
}

@keyframes ko-ambient-shift-light {
  0%, 100% { --ko-ambient: #e4eaf4; } /* pastel mavi */
  25% { --ko-ambient: #eee8f4; }      /* pastel mor */
  50% { --ko-ambient: #f3e6e8; }      /* pastel kırmızı */
  75% { --ko-ambient: #e6f0ea; }      /* pastel yeşil */
}

html.ko-dark .ps-lang-switcher,
html.ko-dark .ps-lang-btn,
html.ko-dark .ps-lang-dropdown-menu,
html.ko-dark .ps-header-actions,
html.ko-dark .ps-header-inner,
html.ko-dark [data-ko-support],
html.ko-dark .ps-support-bar,
html.ko-light .ps-lang-switcher,
html.ko-light .ps-lang-btn,
html.ko-light .ps-lang-dropdown-menu,
html.ko-light .ps-header-actions,
html.ko-light .ps-header-inner,
html.ko-light [data-ko-support],
html.ko-light .ps-support-bar {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html,
  html.ko-dark,
  html.ko-light,
  html.light,
  html[data-theme="light"],
  html[data-ko-theme="light"],
  html[data-theme="dark"],
  html[data-theme="midnight"],
  html[data-theme="compact-dark"] {
    animation: none !important;
  }
  html,
  html.ko-dark,
  html[data-theme="dark"],
  html[data-theme="midnight"],
  html[data-theme="compact-dark"] {
    --ko-ambient: #280000;
  }
  html.ko-light,
  html.light,
  html[data-theme="light"],
  html[data-ko-theme="light"] {
    --ko-ambient: #e8eef6;
  }
}