/* ==========================================================================
   ETB Design System — Colors & Type Tokens
   Erzurum Ticaret Borsası
   --------------------------------------------------------------------------
   Brand palette is locked: lacivert (navy) + yeşil (green) + gold accent.
   We expand each into a 50–900 ramp and add semantic tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Webfonts (loaded from Google CDN — also mirrored in /fonts for offline use)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700;8..60,800&family=Oswald:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================
     COLORS — Brand
     ============================================================ */

  /* Lacivert / Navy — primary corporate blue (header, links, h1) */
  --etb-navy-50:  #eaf2f8;
  --etb-navy-100: #d4e4f0;
  --etb-navy-200: #a4c4dc;
  --etb-navy-300: #6e9fc4;
  --etb-navy-400: #3f7eaa;
  --etb-navy-500: #1a578a;  /* canonical brand blue */
  --etb-navy-600: #15497a;
  --etb-navy-700: #103a63;
  --etb-navy-800: #0a2a4a;
  --etb-navy-900: #061a2f;

  /* Yeşil / Green — secondary, "wheat-leaves", basında biz, success */
  --etb-green-50:  #e6f4ec;
  --etb-green-100: #c4e6d2;
  --etb-green-200: #8ccba6;
  --etb-green-300: #4faf76;
  --etb-green-400: #1f9251;
  --etb-green-500: #00753a;  /* canonical brand green */
  --etb-green-600: #006432;
  --etb-green-700: #004f27;
  --etb-green-800: #003a1c;
  --etb-green-900: #002612;

  /* PALET B — "Yüksek rakım" çelik mavi (eski gold yerine).
     Aynı isimle (--etb-gold-*) korunur ki kod genelinde değişiklik gerekmez. */
  --etb-gold-50:  #e8eef3;
  --etb-gold-100: #d6e2eb;
  --etb-gold-200: #b8cdd9;
  --etb-gold-300: #95b3c4;
  --etb-gold-400: #7da3bf;  /* light steel — eski d8b061 yerine */
  --etb-gold-500: #3e6e8c;  /* canonical çelik mavi — eski c89c44 yerine */
  --etb-gold-600: #345d77;
  --etb-gold-700: #2a4d63;  /* deep steel — eski 876421 yerine */
  --etb-gold-800: #1d3850;
  --etb-gold-900: #122334;

  /* ============================================================
     COLORS — Neutrals
     ============================================================ */
  --etb-neutral-0:   #ffffff;
  --etb-neutral-50:  #f9f9f9;  /* page bg light */
  --etb-neutral-100: #f5f5f5;  /* page bg */

  /* PALET B — "Kar grisi" zemin (eski krem yerine).
     Aynı isimle (--etb-ivory-*) korunur. */
  --etb-ivory-50:  #f6f8fa;  /* en açık, glass yüzeyleri */
  --etb-ivory-100: #eef1f4;  /* canonical sayfa bg — kar grisi */
  --etb-ivory-200: #dde2e8;  /* section alt, divider */
  --etb-ivory-300: #c2cdd8;  /* card border */
  --etb-neutral-150: #eef0f2;
  --etb-neutral-200: #e9ecef;  /* dividers, light borders */
  --etb-neutral-300: #ced4da;
  --etb-neutral-400: #adb5bd;
  --etb-neutral-500: #6c757d;  /* muted text */
  --etb-neutral-600: #495057;
  --etb-neutral-700: #343a40;
  --etb-neutral-800: #212529;  /* default text */
  --etb-neutral-900: #0e1216;

  /* ============================================================
     COLORS — Semantic (status, prices, alerts)
     ============================================================ */
  --etb-success: var(--etb-green-500);
  --etb-success-bg: var(--etb-green-50);
  --etb-warning: #d97706;
  --etb-warning-bg: #fef3c7;
  --etb-danger: #dc2626;        /* price-down red */
  --etb-danger-bg: #fee2e2;
  --etb-info: var(--etb-navy-500);
  --etb-info-bg: var(--etb-navy-50);

  --etb-price-up: var(--etb-green-500);
  --etb-price-down: #e74c3c;
  --etb-price-flat: var(--etb-neutral-500);

  /* ============================================================
     SEMANTIC ALIASES (the names you should USE in components)
     ============================================================ */
  --etb-bg-page: var(--etb-neutral-100);
  --etb-bg-surface: var(--etb-neutral-0);
  --etb-bg-subtle: var(--etb-neutral-50);
  --etb-bg-inverse: var(--etb-navy-500);

  /* Editorial mode (hibrit: krem sayfalarda kullanılacak) */
  --etb-bg-editorial: var(--etb-ivory-100);
  --etb-bg-editorial-strong: var(--etb-ivory-200);
  --etb-bg-editorial-soft: var(--etb-ivory-50);

  /* Data mode (hibrit: prices/volume sayfalarında kullanılacak) */
  --etb-bg-data: #fafbfc;
  --etb-bg-data-card: var(--etb-neutral-0);

  --etb-fg-default: var(--etb-neutral-800);
  --etb-fg-muted: var(--etb-neutral-500);
  --etb-fg-subtle: var(--etb-neutral-400);
  --etb-fg-on-navy: #ffffff;
  --etb-fg-on-gold: #ffffff;
  --etb-fg-on-green: #ffffff;
  --etb-fg-link: var(--etb-navy-500);
  --etb-fg-link-hover: var(--etb-navy-700);

  --etb-border-subtle: var(--etb-neutral-200);
  --etb-border-default: var(--etb-neutral-300);
  --etb-border-strong: var(--etb-neutral-500);
  --etb-border-accent: var(--etb-gold-400);

  /* ============================================================
     TYPE — Families
     ============================================================ */
  /* Resmi kurumsal pairing — Source Serif 4 (institutional editorial serif)
     + Inter (kurumsal sans). Türkçe glif desteği eksiksiz, finansal
     yayın disiplininde okunabilir. */
  --etb-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --etb-font-display: 'Inter', system-ui, sans-serif;
  --etb-font-condensed: 'Oswald', 'Inter', sans-serif;
  --etb-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Editorial serif — manşet/H1-H2 (Source Serif 4 variable, opsz eksenli) */
  --etb-font-serif: 'Source Serif 4', 'Times New Roman', Georgia, serif;

  /* ============================================================
     TYPE — Sizes (rem-based, 1rem = 16px)
     ============================================================ */
  --etb-text-xs:   0.75rem;   /* 12 — meta, breadcrumbs */
  --etb-text-sm:   0.875rem;  /* 14 — body small, table cell */
  --etb-text-base: 1rem;      /* 16 — body */
  --etb-text-md:   1.125rem;  /* 18 — body large */
  --etb-text-lg:   1.25rem;   /* 20 — h4 */
  --etb-text-xl:   1.5rem;    /* 24 — h3 */
  --etb-text-2xl:  1.875rem;  /* 30 — h2 small */
  --etb-text-3xl:  2.25rem;   /* 36 — h2 / section title */
  --etb-text-4xl:  3rem;      /* 48 — h1 / hero */
  --etb-text-5xl:  3.75rem;   /* 60 — display */

  /* ============================================================
     TYPE — Weights
     ============================================================ */
  --etb-weight-light: 300;
  --etb-weight-regular: 400;
  --etb-weight-medium: 500;
  --etb-weight-semibold: 600;
  --etb-weight-bold: 700;
  --etb-weight-extrabold: 800;

  /* ============================================================
     TYPE — Line heights
     ============================================================ */
  --etb-leading-tight: 1.2;
  --etb-leading-snug: 1.35;
  --etb-leading-normal: 1.6;
  --etb-leading-relaxed: 1.75;

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

  /* ============================================================
     RADII
     ============================================================ */
  --etb-radius-xs:   2px;
  --etb-radius-sm:   4px;
  --etb-radius-md:   8px;    /* default card */
  --etb-radius-lg:   12px;   /* feature card */
  --etb-radius-xl:   20px;   /* hero panels (used heavily on home) */
  --etb-radius-pill: 999px;

  /* ============================================================
     SHADOWS — soft, large-blur. ETB uses generous shadow on cards.
     ============================================================ */
  --etb-shadow-xs: 0 1px 2px rgba(15, 30, 50, 0.05);
  --etb-shadow-sm: 0 2px 5px rgba(15, 30, 50, 0.08);
  --etb-shadow-md: 0 4px 6px rgba(15, 30, 50, 0.08), 0 1px 3px rgba(15, 30, 50, 0.06);
  --etb-shadow-lg: 0 10px 20px rgba(15, 30, 50, 0.06), 0 6px 6px rgba(15, 30, 50, 0.05);
  --etb-shadow-xl: 0 15px 30px rgba(15, 30, 50, 0.10), 0 8px 12px rgba(15, 30, 50, 0.06);
  --etb-shadow-gold: 0 6px 18px rgba(216, 176, 97, 0.35);
  --etb-shadow-navy: 0 6px 18px rgba(26, 87, 138, 0.25);

  /* ============================================================
     MOTION — fast, gentle. Ease curves match existing site.
     ============================================================ */
  --etb-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --etb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --etb-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Signature easing — site genelinde tek transition eğrisi. Yeni kod bunu kullansın. */
  --etb-ease-signature: cubic-bezier(0.22, 1, 0.36, 1);
  --etb-duration-fast: 0.15s;
  --etb-duration-base: 0.3s;
  --etb-duration-slow: 0.5s;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --etb-container: 1280px;
  --etb-container-narrow: 960px;
}

/* ==========================================================================
   SEMANTIC TYPE STYLES
   Use these classes (or the matching --etb-* variables) on real elements
   so all surfaces feel like the same product.
   ========================================================================== */

.etb-h1, h1.etb {
  font-family: var(--etb-font-display);
  font-weight: var(--etb-weight-bold);
  font-size: var(--etb-text-4xl);
  line-height: var(--etb-leading-tight);
  color: var(--etb-navy-500);
  letter-spacing: -0.01em;
}

.etb-h2, h2.etb {
  font-family: var(--etb-font-display);
  font-weight: var(--etb-weight-bold);
  font-size: var(--etb-text-3xl);
  line-height: var(--etb-leading-tight);
  color: var(--etb-navy-500);
}

.etb-h3, h3.etb {
  font-family: var(--etb-font-display);
  font-weight: var(--etb-weight-semibold);
  font-size: var(--etb-text-xl);
  line-height: var(--etb-leading-snug);
  color: var(--etb-navy-700);
}

.etb-h4, h4.etb {
  font-family: var(--etb-font-display);
  font-weight: var(--etb-weight-semibold);
  font-size: var(--etb-text-lg);
  line-height: var(--etb-leading-snug);
  color: var(--etb-navy-700);
}

.etb-eyebrow {
  font-family: var(--etb-font-condensed);
  font-weight: var(--etb-weight-semibold);
  font-size: var(--etb-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--etb-green-500);
}

.etb-body {
  font-family: var(--etb-font-body);
  font-weight: var(--etb-weight-regular);
  font-size: var(--etb-text-base);
  line-height: var(--etb-leading-normal);
  color: var(--etb-fg-default);
}

.etb-body-sm {
  font-family: var(--etb-font-body);
  font-size: var(--etb-text-sm);
  line-height: var(--etb-leading-normal);
  color: var(--etb-fg-default);
}

.etb-meta {
  font-family: var(--etb-font-body);
  font-size: var(--etb-text-xs);
  color: var(--etb-fg-muted);
  letter-spacing: 0.02em;
}

.etb-link {
  color: var(--etb-fg-link);
  text-decoration: none;
  transition: color var(--etb-duration-base) var(--etb-ease);
}
.etb-link:hover { color: var(--etb-fg-link-hover); }

/* The signature gold underline beneath section headers */
.etb-section-rule {
  display: block;
  width: 80px;
  height: 4px;
  background: var(--etb-gold-400);
  border-radius: 2px;
  margin: 12px auto 0;
}

/* ==========================================================================
   SIGNATURE PRIMITIVES — Hibrit editoryal + data tasarımının imza öğeleri
   Bu class'lar tüm sayfalarda aynı şekilde görünmek üzere tasarlandı.
   ========================================================================== */

/* --- Font helpers --- */
.etb-serif { font-family: var(--etb-font-serif); font-variation-settings: "opsz" 144; }
.etb-mono  { font-family: var(--etb-font-mono); }
.etb-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --- Editoryal H1 (Fraunces, opsz 144, navy ink) --- */
.etb-display {
  font-family: var(--etb-font-serif);
  font-variation-settings: "opsz" 144;
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--etb-navy-900);
}
.etb-display-lg {
  font-family: var(--etb-font-serif);
  font-variation-settings: "opsz" 144;
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--etb-navy-900);
}

/* --- Section eyebrow (Oswald condensed uppercase) --- */
.etb-section-eyebrow {
  display: inline-block;
  font-family: var(--etb-font-condensed);
  font-weight: 600;
  font-size: 0.8125rem;       /* 13px */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--etb-gold-700);
}

/* --- Section header (eyebrow + serif title + gold rule) --- */
.etb-section-head { margin-bottom: var(--etb-space-10); }
.etb-section-head .etb-section-eyebrow { margin-bottom: 0.75rem; }
.etb-section-head h2 {
  font-family: var(--etb-font-serif);
  font-variation-settings: "opsz" 96;
  font-weight: 600;
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--etb-navy-700);
  margin: 0 0 0.75rem;
}
.etb-section-head .rule {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--etb-gold-400);
  border-radius: 2px;
}
.etb-section-head.center { text-align: center; }
.etb-section-head.center .rule { margin-left: auto; margin-right: auto; }

/* --- Drop cap (news/gi detay ilk paragrafı) --- */
.etb-drop-cap::first-letter {
  font-family: var(--etb-font-serif);
  font-variation-settings: "opsz" 144;
  font-weight: 700;
  font-size: 5.25rem;       /* ~84px */
  line-height: 0.85;
  color: var(--etb-navy-900);
  float: left;
  padding: 0.35rem 0.75rem 0 0;
  margin-top: 0.15rem;
  background: linear-gradient(180deg, transparent 78%, var(--etb-gold-300) 78%, var(--etb-gold-300) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --- Pull quote (haberde alıntı bloğu) --- */
.etb-pull-quote {
  position: relative;
  margin: 2.5rem 0;
  padding: 1.25rem 0 1.25rem 1.75rem;
  border-left: 4px solid var(--etb-gold-400);
  font-family: var(--etb-font-serif);
  font-style: italic;
  font-variation-settings: "opsz" 96;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.4;
  color: var(--etb-navy-700);
}
.etb-pull-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--etb-font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--etb-fg-muted);
}

/* --- Live data badge (canlı veri rozeti, fiyatlar/tickerlar üstünde) --- */
.etb-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--etb-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--etb-green-500);
}
.etb-live-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--etb-green-500);
  box-shadow: 0 0 0 0 rgba(0, 117, 58, .55);
  animation: etb-live-pulse 1.8s var(--etb-ease-signature) infinite;
}
.etb-live-badge .ts {
  font-family: var(--etb-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--etb-fg-muted);
  text-transform: none;
  letter-spacing: 0;
}
@keyframes etb-live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(0, 117, 58, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(0, 117, 58, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(0, 117, 58, 0);   }
}

/* --- Buton primitives --- */
.etb-button {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  border-radius: var(--etb-radius-pill);
  font-family: var(--etb-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--etb-ease-signature),
              background 0.2s var(--etb-ease-signature),
              color 0.2s var(--etb-ease-signature),
              box-shadow 0.25s var(--etb-ease-signature);
}
.etb-button::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--etb-ease-signature);
  pointer-events: none;
}
.etb-button:hover::before { transform: translateX(120%); }

.etb-button--primary {
  background: var(--etb-navy-500);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(26, 87, 138, .45);
}
.etb-button--primary:hover {
  background: var(--etb-navy-700);
  color: #fff;
  box-shadow: 0 16px 40px -10px rgba(26, 87, 138, .6);
}
.etb-button--ghost {
  background: rgba(255, 255, 255, .65);
  color: var(--etb-navy-700);
  border-color: var(--etb-ivory-300);
  backdrop-filter: blur(8px);
}
.etb-button--ghost:hover {
  background: var(--etb-ivory-50);
  color: var(--etb-navy-900);
  box-shadow: 0 12px 30px -10px rgba(14, 18, 22, .18);
}
.etb-button--gold {
  background: var(--etb-gold-400);
  color: var(--etb-navy-900);
  box-shadow: 0 8px 24px -8px rgba(216, 176, 97, .55);
}
.etb-button--gold:hover {
  background: var(--etb-gold-500);
  box-shadow: 0 16px 40px -10px rgba(216, 176, 97, .7);
}

/* --- Card primitives --- */
.etb-card {
  background: var(--etb-bg-surface);
  border: 1px solid var(--etb-border-subtle);
  border-radius: var(--etb-radius-lg);
  overflow: hidden;
  transition: transform 0.35s var(--etb-ease-signature),
              box-shadow 0.35s var(--etb-ease-signature),
              border-color 0.35s var(--etb-ease-signature);
}
.etb-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--etb-shadow-xl);
  border-color: var(--etb-gold-300);
}

/* --- Price row (data mode satır) --- */
.etb-price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--etb-border-subtle);
  transition: background 0.2s var(--etb-ease-signature);
}
.etb-price-row:hover { background: var(--etb-bg-subtle); }
.etb-price-row .name {
  font-family: var(--etb-font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--etb-fg-default);
}
.etb-price-row .price {
  font-family: var(--etb-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1rem;
  color: var(--etb-navy-900);
  text-align: right;
}
.etb-price-row .delta {
  font-family: var(--etb-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--etb-radius-sm);
  min-width: 64px;
  text-align: center;
}
.etb-price-row .delta.up   { color: var(--etb-price-up);   background: var(--etb-success-bg); }
.etb-price-row .delta.down { color: var(--etb-price-down); background: var(--etb-danger-bg); }
.etb-price-row .delta.flat { color: var(--etb-price-flat); background: var(--etb-neutral-150); }

/* --- Editorial mode body wrapper (sayfada krem zemin için) --- */
.etb-mode-editorial {
  background: var(--etb-bg-editorial);
  color: var(--etb-fg-default);
}
.etb-mode-data {
  background: var(--etb-bg-data);
  color: var(--etb-fg-default);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .etb-live-badge .dot { animation: none; }
  .etb-button::before { display: none; }
  .etb-card { transition: none; }
  .etb-card:hover { transform: none; }
}