/* ==========================================================================
   base.css — Reset, Typography, CSS Variables
   Wolfa® Group — 360 Markalama Süreçleri
   ========================================================================== */

/* ----------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   ---------------------------------------------------------------------------- */
:root {
  /* Colors */
  --wolfa-primary: #0f3460;
  --wolfa-primary-light: #16213e;
  --wolfa-primary-dark: #1a1a2e;
  --wolfa-accent: #4a90e2;
  --wolfa-accent-hover: #357abd;
  --wolfa-gold: #f6b300;
  --wolfa-text: #333;
  --wolfa-text-light: #777;
  --wolfa-text-muted: #999;
  --wolfa-bg: #fff;
  --wolfa-bg-alt: #f9f9f9;
  --wolfa-border: #eee;
  --wolfa-white-50: rgba(255, 255, 255, 0.5);
  --wolfa-white-10: rgba(255, 255, 255, 0.1);

  /* Typography */
  --wolfa-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wolfa-font-display: 'Poppins', sans-serif;
  --wolfa-font-slider: 'Poppins', sans-serif;

  /* Spacing */
  --wolfa-space-xs: 0.25rem;
  --wolfa-space-sm: 0.5rem;
  --wolfa-space-md: 1rem;
  --wolfa-space-lg: 2rem;
  --wolfa-space-xl: 3rem;
  --wolfa-space-2xl: 5rem;

  /* Sizing */
  --wolfa-container-max: 1200px;
  --wolfa-header-height: 100px;
  --wolfa-sticky-header-height: 80px;

  /* Transitions */
  --wolfa-transition-fast: 0.2s ease;
  --wolfa-transition-base: 0.3s ease;
  --wolfa-transition-slow: 0.5s cubic-bezier(0.02, 0.01, 0.5, 1);

  /* Shadows */
  --wolfa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --wolfa-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --wolfa-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* Canvas Framework Integration */
  --cnvs-body-font: var(--wolfa-font-primary);
  --cnvs-primary-font: var(--wolfa-font-primary);
  --cnvs-header-height: var(--wolfa-header-height);
}

/* ----------------------------------------------------------------------------
   Typography
   ---------------------------------------------------------------------------- */
body {
  font-family: var(--wolfa-font-primary);
  font-size: 16px;
  line-height: 1.6;
  color: var(--wolfa-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wolfa-font-primary);
  font-weight: 600;
  line-height: 1.3;
  color: var(--wolfa-text);
}

h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
}

h4 {
  font-size: 1.125rem;
  font-weight: 600;
}

p {
  margin-bottom: var(--wolfa-space-md);
  color: var(--wolfa-text-light);
  line-height: 1.8;
}

a {
  color: var(--wolfa-accent);
  text-decoration: none;
  transition: color var(--wolfa-transition-fast);
}

a:hover {
  color: var(--wolfa-accent-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ----------------------------------------------------------------------------
   Utility Classes
   ---------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; }

.mb-0 { margin-bottom: 0; }
.mt-section { margin-top: var(--wolfa-space-2xl); }