:root {
  --tstv-brand-charcoal: #3D3D3D;
  --tstv-brand-cyan: #00AEDB;

  --md-sys-color-primary: #00687E;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #B5EAFF;
  --md-sys-color-on-primary-container: #001F27;

  --md-sys-color-secondary: #4B6269;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #CEE7EF;
  --md-sys-color-on-secondary-container: #051F25;

  --md-sys-color-tertiary: #565D7E;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #DDE1FF;
  --md-sys-color-on-tertiary-container: #131A37;

  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-success: #146C2E;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #C4EED0;
  --md-sys-color-on-success-container: #00210C;

  --md-sys-color-warning: #7A5900;
  --md-sys-color-on-warning: #FFFFFF;
  --md-sys-color-warning-container: #FFDF9B;
  --md-sys-color-on-warning-container: #261A00;

  --md-sys-color-background: #F6FAFC;
  --md-sys-color-on-background: #171C1E;
  --md-sys-color-surface: #F6FAFC;
  --md-sys-color-on-surface: #171C1E;
  --md-sys-color-surface-variant: #DBE4E7;
  --md-sys-color-on-surface-variant: #3F484B;

  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F0F4F6;
  --md-sys-color-surface-container: #EAEEF0;
  --md-sys-color-surface-container-high: #E4E9EB;
  --md-sys-color-surface-container-highest: #DEE3E5;

  --md-sys-color-outline: #6F797B;
  --md-sys-color-outline-variant: #BFC8CB;
  --md-sys-color-inverse-surface: #2B3133;
  --md-sys-color-inverse-on-surface: #ECF1F3;
  --md-sys-color-inverse-primary: #5AD5FA;
  --md-sys-color-scrim: #000000;

  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --md-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 6px 2px rgba(0, 0, 0, .15);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .30);
  --md-sys-elevation-4: 0 6px 10px 4px rgba(0, 0, 0, .15), 0 2px 3px rgba(0, 0, 0, .30);
  --md-sys-elevation-5: 0 8px 12px 6px rgba(0, 0, 0, .15), 0 4px 4px rgba(0, 0, 0, .30);

  --md-sys-typescale-font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line: 44px;
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-display-small-tracking: 0;

  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line: 36px;
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-tracking: 0;

  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line: 32px;
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-headline-small-tracking: 0;

  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line: 28px;
  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-large-tracking: 0;

  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line: 24px;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-tracking: .15px;

  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line: 20px;
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-tracking: .1px;

  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line: 24px;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-tracking: .5px;

  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line: 20px;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-tracking: .25px;

  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line: 16px;
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-tracking: .4px;

  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line: 20px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: .1px;

  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line: 16px;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-tracking: .5px;

  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line: 16px;
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-tracking: .5px;

  --md-sys-state-hover-opacity: .08;
  --md-sys-state-focus-opacity: .10;
  --md-sys-state-pressed-opacity: .10;
  --md-sys-state-dragged-opacity: .16;

  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 300ms;
  --md-sys-motion-duration-long: 500ms;

  --ts-space-1: 4px;
  --ts-space-2: 8px;
  --ts-space-3: 12px;
  --ts-space-4: 16px;
  --ts-space-5: 24px;
  --ts-space-6: 32px;
  --ts-space-7: 48px;
  --ts-space-8: 64px;

  --ts-rail-width: 88px;
  --ts-rail-width-expanded: 232px;
  --ts-nav-bar-height: 80px;
  /* §10.4 — yatay kilit 160 px'in altında kullanılmaz; bu genişliğin sığmadığı her yerde
     yerini kare ikon alır. Kilit 400x128 (3.125:1) olduğundan 160 px genişlik 51.2 px
     yüksekliğe düşer; üst şerit yüksekliği bunu boş alan payıyla birlikte taşır. */
  --ts-top-bar-height: 72px;
  --ts-brand-icon: 40px;
  --ts-brand-lockup-width: 160px;
  --ts-content-max: 1560px;

  --ts-focus-ring-width: 3px;
  --ts-focus-ring-offset: 2px;

  --ts-layer-nav: 20;
  --ts-layer-bar: 30;
  --ts-layer-menu: 40;
  --ts-layer-scrim: 50;
  --ts-layer-dialog: 60;
  --ts-layer-snackbar: 70;
  --ts-layer-tooltip: 80;

  --tstv-primary-rgb: 0, 104, 126;
  --tstv-cyan-rgb: 0, 174, 219;

  --ts-accent-wash: linear-gradient(135deg, rgba(var(--tstv-primary-rgb), .07) 0%, rgba(var(--tstv-cyan-rgb), .05) 48%, rgba(var(--tstv-primary-rgb), 0) 100%);
  --ts-accent-line: linear-gradient(90deg, var(--md-sys-color-primary) 0%, var(--tstv-brand-cyan) 100%);

  /* Letterbox and TV-chassis surfaces. These sit outside the MD3 color roles on
     purpose: they stand in for physical hardware, not for panel chrome. */
  --ts-media-surface: #101215;
  --ts-media-scrim: rgba(16, 18, 21, .66);
  --ts-media-on-scrim: #FFFFFF;
  --ts-bezel-frame: linear-gradient(180deg, #35383D 0%, #1E2124 62%, #131518 100%);
  --ts-bezel-stand: linear-gradient(180deg, #2A2D31, #1B1D20);
  --ts-bezel-base: #1B1D20;
  --ts-bezel-screen: #000000;
  --ts-bezel-brand: rgba(255, 255, 255, .62);

  --ts-glass-veil: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 62%, transparent);
  --ts-hero-sheen: linear-gradient(158deg, color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 58%, transparent) 0%, transparent 62%);
}