/**
 * Payoneer Kesintisi Brand System
 * "Param nerede?" / "Where is my money?"
 * 
 * A critical commentary on Payoneer - Turkish expression of frustration
 * "Kesintisi" = "Fees/Deductions" - showing what Payoneer takes
 */

/* ============================================
   CSS Custom Properties (Brand Variables)
   ============================================ */

:root {
  /* Primary Colors */
  --neyedi-primary: #CC5500;           /* Muted orange - faded like your balance */
  --neyedi-primary-light: #E06600;
  --neyedi-primary-dark: #994400;
  
  /* Turkish Red - National accent color */
  --neyedi-turkish-red: #E30A17;       /* Turkish flag red */
  --neyedi-turkish-red-dark: #B80812;
  
  /* Gradient Colors - Desaturated rainbow (being eaten away) */
  --neyedi-gradient-1: #CC5500;        /* Muted orange */
  --neyedi-gradient-2: #B8860B;        /* Dark goldenrod */
  --neyedi-gradient-3: #6B8E23;        /* Olive drab */
  --neyedi-gradient-4: #4682B4;        /* Steel blue */
  --neyedi-gradient-5: #8B668B;        /* Plum */
  
  /* Text Colors */
  --neyedi-text-primary: #33373E;      /* Dark gray - professional look */
  --neyedi-text-secondary: #666666;
  --neyedi-text-muted: #999999;
  --neyedi-text-inverse: #FFFFFF;
  
  /* Background Colors */
  --neyedi-bg-primary: #F8F7F5;        /* Off-white - slightly stale */
  --neyedi-bg-secondary: #EEECEA;
  --neyedi-bg-dark: #33373E;
  --neyedi-bg-darker: #1E2127;
  
  /* Status Colors */
  --neyedi-error: #C41E3A;             /* Cardinal red */
  --neyedi-warning: #CC5500;
  --neyedi-question: #E30A17;          /* Turkish red for "?" emphasis */
  --neyedi-missing: #8B668B;           /* Plum - something is missing */
  
  /* Borders & Dividers */
  --neyedi-border: #D1CEC9;
  --neyedi-border-light: #E5E3DF;
  
  /* Shadows */
  --neyedi-shadow-sm: 0 1px 3px rgba(51, 55, 62, 0.1);
  --neyedi-shadow-md: 0 4px 6px rgba(51, 55, 62, 0.15);
  --neyedi-shadow-lg: 0 10px 25px rgba(51, 55, 62, 0.2);
  
  /* Spacing Scale */
  --neyedi-space-xs: 0.25rem;
  --neyedi-space-sm: 0.5rem;
  --neyedi-space-md: 1rem;
  --neyedi-space-lg: 1.5rem;
  --neyedi-space-xl: 2rem;
  --neyedi-space-xxl: 3rem;
  
  /* Border Radius */
  --neyedi-radius-sm: 4px;
  --neyedi-radius-md: 8px;
  --neyedi-radius-lg: 12px;
  --neyedi-radius-full: 9999px;
  
  /* Transitions */
  --neyedi-transition-fast: 200ms ease;
  --neyedi-transition-normal: 300ms ease;
  --neyedi-transition-slow: 500ms ease;
}

/* ============================================
   Typography
   ============================================ */

/* Import Roboto Condensed - Same as Payoneer for parody effect */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

:root {
  /* Font Families */
  --neyedi-font-primary: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --neyedi-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  
  /* Font Sizes */
  --neyedi-text-xs: 0.75rem;
  --neyedi-text-sm: 0.875rem;
  --neyedi-text-base: 1rem;
  --neyedi-text-lg: 1.125rem;
  --neyedi-text-xl: 1.25rem;
  --neyedi-text-2xl: 1.5rem;
  --neyedi-text-3xl: 2rem;
  --neyedi-text-4xl: 2.5rem;
  --neyedi-text-5xl: 3rem;
  
  /* Font Weights */
  --neyedi-font-light: 300;
  --neyedi-font-normal: 400;
  --neyedi-font-bold: 700;
  
  /* Line Heights */
  --neyedi-leading-tight: 1.2;
  --neyedi-leading-normal: 1.5;
  --neyedi-leading-relaxed: 1.75;
}

/* ============================================
   Utility Classes
   ============================================ */

/* Main Gradient Background */
.neyedi-gradient {
  background: linear-gradient(
    135deg,
    var(--neyedi-gradient-1) 0%,
    var(--neyedi-gradient-2) 25%,
    var(--neyedi-gradient-3) 50%,
    var(--neyedi-gradient-4) 75%,
    var(--neyedi-gradient-5) 100%
  );
}

/* Gradient Text */
.neyedi-gradient-text {
  background: linear-gradient(
    135deg,
    var(--neyedi-gradient-1) 0%,
    var(--neyedi-gradient-2) 25%,
    var(--neyedi-gradient-3) 50%,
    var(--neyedi-gradient-4) 75%,
    var(--neyedi-gradient-5) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Turkish Red Text */
.neyedi-turkish-text {
  color: var(--neyedi-turkish-red);
}

/* Question emphasis - the "?" styling */
.neyedi-question {
  color: var(--neyedi-turkish-red);
  font-weight: var(--neyedi-font-bold);
}

/* "Eaten" effect - text with bite taken out */
@keyframes neyedi-bite {
  0%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  50% {
    clip-path: polygon(0 0, 85% 0, 75% 50%, 85% 100%, 0 100%);
  }
}

.neyedi-eaten {
  animation: neyedi-bite 3s ease-in-out infinite;
}

/* Fade In */
@keyframes neyedi-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.neyedi-fade-in {
  animation: neyedi-fade-in 0.5s ease forwards;
}

/* Shake animation for frustration */
@keyframes neyedi-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.neyedi-shake {
  animation: neyedi-shake 0.5s ease-in-out;
}

/* Status Classes */
.neyedi-status-missing {
  color: var(--neyedi-missing);
}

.neyedi-status-error {
  color: var(--neyedi-error);
}

.neyedi-status-question {
  color: var(--neyedi-question);
}

/* Card Component */
.neyedi-card {
  background: white;
  border: 1px solid var(--neyedi-border);
  border-radius: var(--neyedi-radius-md);
  box-shadow: var(--neyedi-shadow-sm);
  padding: var(--neyedi-space-lg);
}

/* Button Base */
.neyedi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--neyedi-space-sm) var(--neyedi-space-lg);
  font-family: var(--neyedi-font-primary);
  font-weight: var(--neyedi-font-bold);
  font-size: var(--neyedi-text-base);
  border-radius: var(--neyedi-radius-sm);
  border: none;
  cursor: pointer;
  transition: all var(--neyedi-transition-normal);
}

.neyedi-btn-primary {
  background: var(--neyedi-primary);
  color: var(--neyedi-text-inverse);
}

.neyedi-btn-primary:hover {
  background: var(--neyedi-primary-dark);
}

.neyedi-btn-turkish {
  background: var(--neyedi-turkish-red);
  color: var(--neyedi-text-inverse);
}

.neyedi-btn-turkish:hover {
  background: var(--neyedi-turkish-red-dark);
}

/* Text Classes */
.neyedi-heading {
  font-family: var(--neyedi-font-primary);
  font-weight: var(--neyedi-font-bold);
  color: var(--neyedi-text-primary);
  line-height: var(--neyedi-leading-tight);
}

.neyedi-body {
  font-family: var(--neyedi-font-primary);
  font-weight: var(--neyedi-font-normal);
  color: var(--neyedi-text-secondary);
  line-height: var(--neyedi-leading-normal);
}

.neyedi-tagline {
  font-family: var(--neyedi-font-primary);
  font-weight: var(--neyedi-font-light);
  font-style: italic;
  color: var(--neyedi-text-muted);
}

/* Bilingual text helper */
.neyedi-bilingual {
  display: flex;
  flex-direction: column;
  gap: var(--neyedi-space-xs);
}

.neyedi-bilingual .turkish {
  font-size: 1em;
  color: var(--neyedi-text-primary);
}

.neyedi-bilingual .english {
  font-size: 0.85em;
  color: var(--neyedi-text-muted);
  font-style: italic;
}