// ================================================
// FikoFinans - Tema Sistemi v2
// LESS Mixinler ve Animasyonlar
// CSS Custom Properties -> styles.less (global)
// ================================================

// ==================== Ortak Mixinler ====================

.finans-card() {
  background: var(--finans-surface);
  border: 1px solid var(--finans-border);
  border-radius: var(--finans-radius-lg);
  box-shadow: var(--finans-shadow-card);
  transition: box-shadow var(--finans-transition-normal), transform var(--finans-transition-normal);
}

.finans-card-interactive() {
  .finans-card();
  cursor: pointer;

  &:hover {
    box-shadow: var(--finans-shadow-card-hover);
    transform: translateY(var(--finans-card-hover-translateY, -1px));
  }

  &:active {
    transform: translateY(0);
  }
}

.finans-scrollbar() {
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  &::-webkit-scrollbar-track {
    background: var(--finans-scrollbar-track);
  }
  &::-webkit-scrollbar-thumb {
    background: var(--finans-scrollbar-thumb);
    border-radius: 2px;
    &:hover {
      background: var(--finans-scrollbar-thumb-hover);
    }
  }
}

.finans-text-ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finans-badge(@color) {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--finans-radius-full);
  font-size: var(--finans-text-xs);
  font-weight: 500;
  background: ~"rgba(@{color}, 0.08)";
  color: @color;
}

.finans-tutar-gelir() {
  color: var(--finans-gelir);
  font-weight: 600;
  font-family: var(--finans-font-mono);
}

.finans-tutar-gider() {
  color: var(--finans-gider);
  font-weight: 600;
  font-family: var(--finans-font-mono);
}

.finans-tutar-notr() {
  color: var(--finans-text-primary);
  font-weight: 600;
  font-family: var(--finans-font-mono);
}

.finans-glass() {
  background: var(--finans-glass-bg);
  backdrop-filter: blur(var(--finans-glass-blur));
  -webkit-backdrop-filter: blur(var(--finans-glass-blur));
  border: 1px solid var(--finans-glass-border);
  box-shadow: var(--finans-glass-shadow);
}

.finans-dropdown-glass() {
  background: var(--finans-dropdown-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--finans-dropdown-border);
  box-shadow: var(--finans-dropdown-shadow);
  border-radius: var(--finans-radius-xl);
}

// ==================== Custom Dropdown Styles ====================
.finans-dropdown-option() {
  display: flex;
  align-items: center;
  gap: var(--finans-space-2);
  padding: var(--finans-space-1) 0;
}

.finans-dropdown-ikon(@size: 24px) {
  width: @size;
  height: @size;
  border-radius: var(--finans-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: calc(@size * 0.55);
  flex-shrink: 0;
}

.finans-dropdown-option-aciklama() {
  display: flex;
  flex-direction: column;
  gap: 1px;

  .option-baslik {
    font-weight: 500;
    color: var(--finans-text-primary);
  }
  .option-alt {
    font-size: var(--finans-text-xs);
    color: var(--finans-text-tertiary);
  }
}

.finans-dropdown-option-sag() {
  margin-left: auto;
  font-size: var(--finans-text-xs);
  color: var(--finans-text-tertiary);
  font-family: var(--finans-font-mono);
}

.finans-stagger-animation(@delay: 0.03s) {
  & > *:nth-child(1) { animation-delay: @delay * 1; }
  & > *:nth-child(2) { animation-delay: @delay * 2; }
  & > *:nth-child(3) { animation-delay: @delay * 3; }
  & > *:nth-child(4) { animation-delay: @delay * 4; }
  & > *:nth-child(5) { animation-delay: @delay * 5; }
  & > *:nth-child(6) { animation-delay: @delay * 6; }
  & > *:nth-child(7) { animation-delay: @delay * 7; }
  & > *:nth-child(8) { animation-delay: @delay * 8; }
  & > *:nth-child(9) { animation-delay: @delay * 9; }
  & > *:nth-child(10) { animation-delay: @delay * 10; }
  & > *:nth-child(11) { animation-delay: @delay * 11; }
  & > *:nth-child(12) { animation-delay: @delay * 12; }
  & > *:nth-child(13) { animation-delay: @delay * 13; }
  & > *:nth-child(14) { animation-delay: @delay * 14; }
  & > *:nth-child(15) { animation-delay: @delay * 15; }
  & > *:nth-child(16) { animation-delay: @delay * 16; }
  & > *:nth-child(17) { animation-delay: @delay * 17; }
  & > *:nth-child(18) { animation-delay: @delay * 18; }
  & > *:nth-child(19) { animation-delay: @delay * 19; }
  & > *:nth-child(20) { animation-delay: @delay * 20; }
}

.finans-focus-ring() {
  &:focus-visible {
    outline: 2px solid var(--finans-brand-primary);
    outline-offset: 2px;
  }
}

.finans-interactive-press() {
  transition: transform 80ms ease, box-shadow 120ms ease;
  &:active {
    transform: scale(0.97);
  }
}

.finans-number() {
  font-family: var(--finans-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.finans-scroll-reveal() {
  animation: finans-scrollReveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

.finans-scroll-fade() {
  animation: finans-scrollFade linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

.finans-container() {
  container-type: inline-size;
}

.finans-container-name(@name) {
  container-name: @name;
  container-type: inline-size;
}

// ==================== Animasyonlar ====================

@keyframes finans-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes finans-slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes finans-scaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes finans-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes finans-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes finans-kartYansima {
  0% { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}

@keyframes finans-slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes finans-slideInRight {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes finans-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes finans-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(var(--finans-brand-rgb, 0, 200, 83), 0.2); }
  50% { box-shadow: 0 0 15px rgba(var(--finans-brand-rgb, 0, 200, 83), 0.4); }
}

@keyframes finans-countUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes finans-ripple {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes finans-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes finans-borderGlow {
  0%, 100% { border-color: var(--finans-border); }
  50% { border-color: var(--finans-brand-primary); }
}

@keyframes finans-scrollReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes finans-scrollFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes finans-borderPulse {
  0%, 100% { border-color: var(--finans-border); box-shadow: none; }
  50% { border-color: #faad14; box-shadow: 0 0 12px rgba(250, 173, 20, 0.15); }
}

@keyframes finans-attentionGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 173, 20, 0); }
  50% { box-shadow: 0 0 0 4px rgba(250, 173, 20, 0.15); }
}

@keyframes finans-slideInLeft {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

// ==================== Premium Card Mixin ====================
.finans-card-premium() {
  .finans-card();
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--finans-brand-gradient, linear-gradient(90deg, #00c853, #69f0ae));
    opacity: 0;
    transition: opacity var(--finans-transition-fast);
  }

  &:hover {
    box-shadow: var(--finans-shadow-card-hover);
    transform: translateY(var(--finans-card-hover-translateY, -2px));

    &::before {
      opacity: var(--finans-card-accent-opacity, 1);
    }
  }

  &:active {
    transform: translateY(0);
  }
}

// ==================== Reduced Motion ====================
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}