/* ==========================================================================
   CSS DESIGN TOKENS — fá Portfolyo
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Google+Sans+Flex:opsz,wght@6..144,100..1000&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Renkler */
  --bg-page: #f6f6f6;
  --color-primary: #0033ff;
  --color-primary-hover: #0026cc;
  --color-primary-subtle: rgba(0, 51, 255, 0.08);
  --color-primary-active: rgba(0, 51, 255, 0.16);
  --color-text-main: #111111;
  --color-text-muted: #6b6b6b;
  --color-border-subtle: rgba(17, 17, 17, 0.1);
  --color-border-dark: #111111;
  --color-placeholder-bg: #e6e6e6;
  --color-placeholder-text: #6b6b6b;

  /* Gradient Lekeleri */
  --spot-pink: #f7a6c2;
  --spot-blue: #9db3f5;
  --spot-peach: #fbd0b8;
  --spot-mint: #cfeee6;

  /* Tipografi */
  --font-family: 'Google Sans Flex', 'Google Sans', Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-number: 'Archivo', sans-serif;

  --font-size-marquee-desktop: 17px;
  --font-size-marquee-tablet: 14px;
  --font-size-marquee-mobile: 11px;

  --star-size-marquee-desktop: 22px;
  --star-size-marquee-tablet: 18px;
  --star-size-marquee-mobile: 14px;

  --marquee-gap-desktop: 44px;
  --marquee-gap-tablet: 30px;
  --marquee-gap-mobile: 18px;

  --marquee-padding-y-desktop: 64px;
  --marquee-padding-y-tablet: 48px;
  --marquee-padding-y-mobile: 32px;

  --font-size-heading: 32px;
  --font-size-pill: 16px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-xs: 12px;

  /* Pill ve Buton Ölçüleri */
  --radius-pill: 9999px;
  --radius-card: 28px;

  --header-height-desktop: 64px;
  --header-height-mobile: 56px;

  /* Konteyner ve Izgara (Masaüstü Gövde 1280px) */
  --container-max-width: 1280px;
  --video-grid-ratio: 79.1667%;
  /* 1280px tuvalinde 1013px */
  --video-grid-max-width: 1013px;
  --video-gap-desktop: 40px;
  --video-gap-tablet: 24px;
  --video-gap-mobile: 16px;

  --video-section-padding-top-desktop: 0px;
  --video-section-padding-bottom-desktop: 66px;
  --video-section-padding-top-tablet: 0px;
  --video-section-padding-bottom-tablet: 48px;
  --video-section-padding-top-mobile: 0px;
  --video-section-padding-bottom-mobile: 32px;

  /* Z-Index Seviyeleri */
  --z-canvas: 1;
  --z-hotspots: 10;
  --z-header: 100;
  --z-fab: 150;
  --z-overlay: 200;
  --z-lightbox: 300;

  /* Geçiş Süreleri */
  --ease-out-cubic: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-out-cubic);
  --transition-normal: 0.35s var(--ease-out-cubic);
  --transition-slow: 0.6s var(--ease-out-cubic);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}