/* ============================================================
   GİRİŞİMCİ YATIRIMCI
   Design System — Color & Type Foundations
   ------------------------------------------------------------
   Girişimci Yatırımcı (GY) is a Turkish financial-media brand
   that shares tools and news to help people grow their income
   sources. It was reborn from the earlier "Merkeziyetsiz
   Gelecek" identity and KEPT the same colors: Violet + Teal +
   White are the core, with a small heritage accent set for
   categories / data viz. Colors are Pantone-specified and
   sampled directly from the master logos.
   ============================================================ */

/* ----------------------------------------------------------------
   FONTS  (self-hosted — see /fonts)
   Metropolis  → logo + impact display (ExtraBold Italic, tilted)
   Morganite   → tall condensed display headlines
   Poppins     → UI + body copy
   ---------------------------------------------------------------- */

/* —— Metropolis —— */
@font-face { font-family:"Metropolis"; font-style:normal; font-weight:400;
  src:url("fonts/Metropolis-Regular.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Metropolis"; font-style:normal; font-weight:500;
  src:url("fonts/Metropolis-Medium.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Metropolis"; font-style:normal; font-weight:600;
  src:url("fonts/Metropolis-SemiBold.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Metropolis"; font-style:normal; font-weight:700;
  src:url("fonts/Metropolis-Bold.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Metropolis"; font-style:normal; font-weight:800;
  src:url("fonts/Metropolis-ExtraBold.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Metropolis"; font-style:italic; font-weight:800;
  src:url("fonts/Metropolis-ExtraBoldItalic.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Metropolis"; font-style:normal; font-weight:900;
  src:url("fonts/Metropolis-Black.woff") format("woff"); font-display:swap; }

/* —— Morganite (condensed display) —— */
@font-face { font-family:"Morganite"; font-style:normal; font-weight:500;
  src:url("fonts/Morganite-Medium.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Morganite"; font-style:normal; font-weight:600;
  src:url("fonts/Morganite-SemiBold.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Morganite"; font-style:normal; font-weight:700;
  src:url("fonts/Morganite-Bold.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Morganite"; font-style:normal; font-weight:800;
  src:url("fonts/Morganite-ExtraBold.woff") format("woff"); font-display:swap; }

/* —— Poppins (UI + body) —— */
@font-face { font-family:"Poppins"; font-style:normal; font-weight:400;
  src:url("fonts/Poppins-ext-400.woff2") format("woff2"),url("fonts/Poppins-400.woff2") format("woff2");
  font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:400;
  src:url("fonts/Poppins-400.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:500;
  src:url("fonts/Poppins-ext-500.woff2") format("woff2"),url("fonts/Poppins-500.woff2") format("woff2");
  font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:500;
  src:url("fonts/Poppins-500.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600;
  src:url("fonts/Poppins-ext-600.woff2") format("woff2"),url("fonts/Poppins-600.woff2") format("woff2");
  font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600;
  src:url("fonts/Poppins-600.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700;
  src:url("fonts/Poppins-700.woff2") format("woff2"); font-display:swap; }

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
  /* —— Brand core palette (Pantone-specified) ——————————————— */
  --gy-violet:      #410099; /* Pantone Violet C — GY signature ground   */
  --gy-teal:        #00C4B3; /* Pantone 3265 C  — GY signature accent    */
  --gy-white:       #ffffff; /* logo positive / type on violet           */
  --gy-ink:         #131316; /* headline ink on light                    */

  /* heritage / extended accents (old identity) — tags, charts,
     data viz only; never the primary brand voice */
  --ext-blue:       #00269A; /* Pantone Dark Blue C                      */
  --ext-sky:        #00A0DF; /* Pantone 299 C                            */
  --ext-magenta:    #B11CAB; /* Pantone 253 C                            */
  --mg-blue:        var(--ext-blue);    /* deprecated alias              */
  --mg-skyblue:     var(--ext-sky);     /* deprecated alias              */
  --mg-magenta:     var(--ext-magenta); /* deprecated alias              */

  /* —— Tints & shades (derived, oklch-harmonised) ——————————— */
  --violet-700:     #33007a;
  --violet-600:     #410099;
  --violet-500:     #5410c2;
  --violet-400:     #7b46d6;
  --violet-200:     #cdb6f0;
  --violet-050:     #f1ebfb;

  --teal-600:       #00a193;
  --teal-500:       #00c4b3;
  --teal-300:       #5bdccf;
  --teal-100:       #c2f3ee;

  --blue-700:       #001c73;
  --blue-600:       #00269a;
  --blue-400:       #2f54c4;

  /* —— Ink / neutrals ——————————————————————————————————————— */
  --ink-900:        #131316; /* near-black headline ink (PDF #1D1D1B)    */
  --ink-800:        #1a1a1a;
  --ink-600:        #3f3f3f;
  --ink-500:        #606060;
  --ink-400:        #8a8a90;
  --ink-300:        #b8b8be;
  --line:           #e6e6e6; /* hairline / divider (PDF #E6E6E6)         */
  --surface-2:      #f4f5f8; /* subtle panel fill                        */
  --surface-1:      #ffffff;
  --white:          #ffffff;

  /* —— Semantic foreground / background ————————————————————— */
  --fg-1:           var(--ink-900); /* primary text on light            */
  --fg-2:           var(--ink-500); /* secondary text on light          */
  --fg-3:           var(--ink-400); /* tertiary / captions              */
  --fg-on-dark:     #ffffff;
  --fg-on-dark-2:   rgba(255,255,255,.66);

  --bg-page:        #ffffff;
  --bg-ground:      var(--gy-violet); /* hero / brand ground             */
  --bg-ink:         var(--ink-900);

  /* —— Functional ————————————————————————————————————————— */
  --accent:         var(--gy-teal);
  --link:           var(--gy-violet);
  --positive:       #16b07a;  /* up / gain (markets)                     */
  --negative:       #e5484d;  /* down / loss                             */
  --warning:        #f5a623;

  /* —— Signature grounds & gradients ————————————————————————
     GY leads with the FLAT violet ground; the gradient is just a
     subtle deepening of violet for hero / cover art. */
  --grad-violet:    linear-gradient(155deg, #4a0bad 0%, #410099 52%, #2f0072 100%);
  --grad-hero:      linear-gradient(155deg, #4a0bad 0%, #410099 52%, #2f0072 100%);
  --grad-teal:      linear-gradient(140deg, #410099 0%, #2a3aa8 55%, #00c4b3 100%);
  --grad-ext:       linear-gradient(135deg, #00269a 0%, #5410c2 55%, #b11cab 100%);
  --grad-cyber:     var(--grad-ext); /* deprecated alias                 */

  /* —— Type families ————————————————————————————————————— */
  --font-display:   "Morganite", "Poppins", sans-serif;       /* tall condensed headlines */
  --font-impact:    "Metropolis", "Poppins", sans-serif;      /* logo / punchy display    */
  --font-ui:        "Poppins", "Metropolis", system-ui, sans-serif; /* body + UI         */
  --font-mono:      "Metropolis", ui-monospace, monospace;    /* numerics fallback        */

  /* —— Type scale (px on a 1.0 base) ————————————————————— */
  --fs-display:     clamp(56px, 9vw, 132px);
  --fs-h1:          clamp(40px, 5vw, 64px);
  --fs-h2:          clamp(30px, 3.4vw, 44px);
  --fs-h3:          26px;
  --fs-h4:          20px;
  --fs-body-lg:     19px;
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-caption:     12px;
  --fs-overline:    12px;

  /* —— Radii ———————————————————————————————————————————— */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* —— Spacing scale (4pt base) ———————————————————————— */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* —— Elevation / shadow ————————————————————————————— */
  --shadow-sm:  0 1px 2px rgba(19,19,22,.06), 0 1px 3px rgba(19,19,22,.08);
  --shadow-md:  0 6px 16px rgba(19,19,22,.10), 0 2px 6px rgba(19,19,22,.06);
  --shadow-lg:  0 18px 48px rgba(19,19,22,.16), 0 6px 16px rgba(19,19,22,.08);
  --shadow-violet: 0 18px 44px rgba(65,0,153,.28);
  --shadow-teal:   0 14px 36px rgba(0,196,179,.30);

  /* —— Motion ————————————————————————————————————————— */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* —— Brand signature ————————————————————————————————— */
  --logo-tilt: -10.67deg; /* exact logo lock-up angle from the guide */
}

/* ================================================================
   SEMANTIC TYPE CLASSES
   ================================================================ */
.gy-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: .86;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.gy-impact {
  font-family: var(--font-impact);
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-h1);
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.gy-h1 { font-family: var(--font-impact); font-weight: 800; font-size: var(--fs-h1);
  line-height: 1.02; letter-spacing: -.015em; color: var(--fg-1); }
.gy-h2 { font-family: var(--font-impact); font-weight: 700; font-size: var(--fs-h2);
  line-height: 1.06; letter-spacing: -.01em; color: var(--fg-1); }
.gy-h3 { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-h3);
  line-height: 1.2; letter-spacing: -.005em; color: var(--fg-1); }
.gy-h4 { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-h4);
  line-height: 1.3; color: var(--fg-1); }
.gy-body-lg { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-body-lg);
  line-height: 1.6; color: var(--fg-2); }
.gy-body { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-body);
  line-height: 1.65; color: var(--fg-2); }
.gy-small { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-small);
  line-height: 1.5; color: var(--fg-2); }
.gy-caption { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-caption);
  line-height: 1.4; color: var(--fg-3); }
.gy-overline { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-overline);
  line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }