/* ============================================
   DESIGN SYSTEM - KOP SOZ
   ============================================ */

/* ============================================
   1. DESIGN TOKENS
   ============================================ */

:root {
  /* Colors */
  --primary-color: #58cc02;
  --primary-shadow: #46a002;
  --primary-light: #89e219;
  --secondary-color: #00cd9c;
  --accent-color: #ffc800;
  --blue-color: #1cb0f6;
  --red-color: #ff4b4b;

  /* Text Colors */
  --text-dark: #3c3c3c;
  --text-light: #777;
  --text-muted: #999;

  /* Background Colors */
  --background-light: #f7f7f7;
  --background-green: #effbef;
  --white: #ffffff;
  --white-shadow: #e0e0e0;

  /* Typography Scale */
  --font-family: "Nunito", sans-serif;
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-semibold: 700;
  --font-weight-bold: 800;
  --font-weight-black: 900;

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;

  /* Spacing Scale */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: 0 2px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 0 rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 6px 0 rgba(0, 0, 0, 0.2);

  /* Transitions */
  --transition-fast: 0.05s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ============================================
   2. TYPOGRAPHY SYSTEM
   ============================================ */

/* Headings */
.heading-1 {
  font-size: var(--font-size-5xl) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-tight) !important;
  color: var(--text-dark) !important;
  margin-bottom: var(--space-6) !important;
}

.heading-2 {
  font-size: var(--font-size-4xl) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-tight) !important;
  color: var(--text-dark) !important;
  margin-bottom: var(--space-5) !important;
}

.heading-3 {
  font-size: var(--font-size-3xl) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-normal) !important;
  color: var(--text-dark) !important;
  margin-bottom: var(--space-4) !important;
}

.heading-4 {
  font-size: var(--font-size-2xl) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-normal) !important;
  color: var(--text-dark) !important;
  margin-bottom: var(--space-4) !important;
}

/* Body Text */
.text-large {
  font-size: var(--font-size-xl) !important;
  line-height: var(--line-height-relaxed) !important;
  color: var(--text-light) !important;
}

.text-base {
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-relaxed) !important;
  color: var(--text-light) !important;
}

.text-small {
  font-size: var(--font-size-sm) !important;
  line-height: var(--line-height-normal) !important;
  color: var(--text-muted) !important;
}

.text-xs {
  font-size: var(--font-size-xs) !important;
  line-height: var(--line-height-normal) !important;
  color: var(--text-muted) !important;
}

/* Text Colors */
.text-primary {
  color: var(--primary-color) !important;
}
.text-dark {
  color: var(--text-dark) !important;
}
.text-light {
  color: var(--text-light) !important;
}
.text-muted {
  color: var(--text-muted) !important;
}
.text-white {
  color: var(--white) !important;
}

/* Text Alignment */
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}

/* ============================================
   3. BUTTON SYSTEM
   ============================================ */

/* Base Button */
.btn-base {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-3) !important;
  font-family: var(--font-family) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  position: relative !important;
  transform: translateY(0) !important;
  white-space: nowrap !important;
}

/* Button Sizes */
.btn-sm {
  padding: var(--space-2) var(--space-4) !important;
  font-size: var(--font-size-sm) !important;
  border-radius: var(--radius-sm) !important;
}

.btn-md {
  padding: var(--space-4) var(--space-6) !important;
  font-size: var(--font-size-base) !important;
  border-radius: var(--radius-md) !important;
}

.btn-lg {
  padding: var(--space-5) var(--space-8) !important;
  font-size: var(--font-size-lg) !important;
  border-radius: var(--radius-lg) !important;
}

/* 3D Button Variants */
.btn-primary-3d {
  background: var(--primary-color) !important;
  color: var(--white) !important;
  border: 2px solid var(--primary-shadow) !important;
  box-shadow: 0 4px 0 var(--primary-shadow) !important;
}

.btn-primary-3d:hover:not(:active) {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 0 var(--primary-shadow) !important;
  color: var(--white) !important;
}

.btn-primary-3d:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--primary-shadow) !important;
  color: var(--white) !important;
}

.btn-secondary-3d {
  background: var(--white) !important;
  color: var(--text-dark) !important;
  border: 2px solid var(--white-shadow) !important;
  box-shadow: 0 4px 0 var(--white-shadow) !important;
}

.btn-secondary-3d:hover:not(:active) {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 0 var(--white-shadow) !important;
  color: var(--text-dark) !important;
}

.btn-secondary-3d:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--white-shadow) !important;
  color: var(--text-dark) !important;
}

/* Flat Button Variants */
.btn-primary-flat {
  background: var(--primary-color) !important;
  color: var(--white) !important;
  border: 1px solid var(--primary-color) !important;
}

.btn-primary-flat:hover {
  background: var(--primary-shadow) !important;
  border-color: var(--primary-shadow) !important;
  color: var(--white) !important;
}

.btn-secondary-flat {
  background: transparent !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
}

.btn-secondary-flat:hover {
  background: var(--primary-color) !important;
  color: var(--white) !important;
}

/* ============================================
   4. CARD SYSTEM
   ============================================ */

.card-base {
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-8) !important;
  transition: all var(--transition-normal) !important;
}

.card-flat {
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.card-flat:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

.card-3d {
  border: 2px solid #e0e0e0 !important;
}

.card-3d:hover {
  border-color: var(--primary-color) !important;
  transform: translateY(-2px) !important;
}

/* ============================================
   5. SECTION SYSTEM
   ============================================ */

.section-base {
  padding: var(--space-24) 0 !important;
}

.section-hero {
  background: var(--background-green) !important;
  padding: var(--space-16) 0 var(--space-20) !important;
}

.section-light {
  background: var(--white) !important;
}

.section-gray {
  background: var(--background-light) !important;
}

.section-dark {
  background: linear-gradient(135deg, var(--text-dark), #2d3748) !important;
  color: var(--white) !important;
}

/* Section Headings */
.section-heading {
  text-align: center !important;
  margin-bottom: var(--space-20) !important;
}

.section-heading .highlight {
  color: var(--primary-color) !important;
}

/* ============================================
   6. LAYOUT UTILITIES
   ============================================ */

/* Spacing */
.mb-1 {
  margin-bottom: var(--space-1) !important;
}
.mb-2 {
  margin-bottom: var(--space-2) !important;
}
.mb-3 {
  margin-bottom: var(--space-3) !important;
}
.mb-4 {
  margin-bottom: var(--space-4) !important;
}
.mb-5 {
  margin-bottom: var(--space-5) !important;
}
.mb-6 {
  margin-bottom: var(--space-6) !important;
}
.mb-8 {
  margin-bottom: var(--space-8) !important;
}
.mb-10 {
  margin-bottom: var(--space-10) !important;
}
.mb-12 {
  margin-bottom: var(--space-12) !important;
}
.mb-16 {
  margin-bottom: var(--space-16) !important;
}
.mb-20 {
  margin-bottom: var(--space-20) !important;
}

.mt-1 {
  margin-top: var(--space-1) !important;
}
.mt-2 {
  margin-top: var(--space-2) !important;
}
.mt-3 {
  margin-top: var(--space-3) !important;
}
.mt-4 {
  margin-top: var(--space-4) !important;
}
.mt-5 {
  margin-top: var(--space-5) !important;
}
.mt-6 {
  margin-top: var(--space-6) !important;
}
.mt-8 {
  margin-top: var(--space-8) !important;
}
.mt-10 {
  margin-top: var(--space-10) !important;
}
.mt-12 {
  margin-top: var(--space-12) !important;
}
.mt-16 {
  margin-top: var(--space-16) !important;
}
.mt-20 {
  margin-top: var(--space-20) !important;
}

/* Flexbox */
.flex {
  display: flex !important;
}
.flex-column {
  flex-direction: column !important;
}
.flex-center {
  justify-content: center !important;
  align-items: center !important;
}
.justify-center {
  justify-content: center !important;
}
.align-center {
  align-items: center !important;
}
.gap-1 {
  gap: var(--space-1) !important;
}
.gap-2 {
  gap: var(--space-2) !important;
}
.gap-3 {
  gap: var(--space-3) !important;
}
.gap-4 {
  gap: var(--space-4) !important;
}
.gap-6 {
  gap: var(--space-6) !important;
}

/* ============================================
   7. COMPONENT CLASSES
   ============================================ */

/* Hero Section */
.hero-title {
  font-size: var(--font-size-5xl) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-tight) !important;
  color: var(--text-dark) !important;
  margin-bottom: var(--space-4) !important;
}

.hero-subtitle {
  font-size: var(--font-size-xl) !important;
  line-height: var(--line-height-relaxed) !important;
  color: var(--text-light) !important;
  margin-bottom: var(--space-8) !important;
}

/* Feature Cards */
.feature-icon {
  width: 120px !important;
  height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto var(--space-6) !important;
  padding: var(--space-4) !important; /* Add padding for the image */
  overflow: hidden !important; /* Ensure images don't overflow */
}

.feature-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Maintain aspect ratio */
  display: block !important;
}

/* Download Buttons */
.download-btn-container {
  display: flex !important;
  justify-content: center !important;
  gap: var(--space-6) !important;
  flex-wrap: wrap !important;
}

.download-btn-standard {
  transition: opacity var(--transition-normal) !important;
  cursor: pointer !important;
}

.download-btn-standard:hover {
  opacity: 0.8 !important;
}

.download-btn-standard img {
  height: 60px !important;
  width: auto !important;
  display: block !important;
}