/**
 * Public tema — tokens.css ile aynı 4’lü palet + chrome.
 * Component’lere renk !important yazılmaz.
 */

/* Midnight Cinema — Base #0B0F17 · Surface #1A2234 · CTA #E85A72 · Info #38BDF8 */
:root,
html[data-theme="dark"] {
    color-scheme: dark;
  --c-bg: #0b0f17;
  --c-surface: #1a2234;
  --c-accent: #e85a72;
  --c-secondary: #38bdf8;
  --c-ink: #ffffff;
  --c-muted: color-mix(in srgb, var(--c-ink) 58%, transparent);
  --c-border: color-mix(in srgb, var(--c-ink) 14%, transparent);
  --c-neutral: color-mix(in srgb, var(--c-surface) 72%, var(--c-bg));
  --c-accent-ink: #ffffff;
  --c-accent-soft: color-mix(in srgb, var(--c-accent) 22%, var(--c-surface));
  --c-accent-soft-ink: color-mix(in srgb, var(--c-accent) 92%, #ffffff);
  --c-accent-deep: color-mix(in srgb, var(--c-accent) 72%, #0b0f17);
  --c-secondary-soft: color-mix(in srgb, var(--c-secondary) 22%, var(--c-surface));
  --c-panel: color-mix(in srgb, var(--c-surface) 78%, transparent);
  --c-panel-border: var(--c-border);
  --c-panel-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  --c-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  --c-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.28);
  --c-glow: color-mix(in srgb, var(--c-secondary) 14%, transparent);
  --c-body-end: color-mix(in srgb, var(--c-bg) 88%, #000000);
  --c-glass: color-mix(in srgb, var(--c-surface) 50%, transparent);
  --c-glass-strong: color-mix(in srgb, var(--c-surface) 68%, transparent);
  --c-glass-hover: color-mix(in srgb, var(--c-surface) 78%, transparent);

  --theme-bg: var(--c-bg);
  --theme-surface: var(--c-surface);
  --theme-accent: var(--c-accent);
  --theme-accent-2: var(--c-secondary);
  --theme-text: var(--c-ink);
  --theme-muted: var(--c-muted);
  --theme-border: var(--c-border);
  --theme-neutral: var(--c-neutral);
  --theme-accent-ink: var(--c-accent-ink);
  --theme-accent-soft: var(--c-accent-soft);
  --theme-accent-soft-ink: var(--c-accent-soft-ink);
  --theme-accent-deep: var(--c-accent-deep);
  --theme-info: var(--c-secondary);
  --theme-info-soft: var(--c-secondary-soft);
  --theme-panel: var(--c-panel);
  --theme-panel-border: var(--c-panel-border);
  --theme-panel-shadow: var(--c-panel-shadow);
  --theme-shadow: var(--c-shadow);
  --theme-shadow-soft: var(--c-shadow-soft);
  --theme-surface-2: var(--c-neutral);
  --theme-surface-3: var(--c-neutral);
  --theme-bg-elevated: var(--c-surface);
  --theme-paper: var(--c-surface);
  --theme-surface-glass: var(--c-panel);
  --theme-neutral-glass: color-mix(in srgb, var(--c-neutral) 55%, transparent);
  --theme-scrim: color-mix(in srgb, #000 62%, transparent);
  /* rgba(var(--theme-shade-rgb), a) için kanal — bg ile aynı */
  --theme-shade-rgb: 11, 15, 23;
  --theme-shade-a1: 0.35;
  --theme-shade-a2: 0.48;
  --theme-shade-a3: 0.72;
  --theme-shade-a4: 0.32;
  --theme-shade-a5: 0.68;
  --theme-img-filter: brightness(0.62) saturate(1.08) contrast(1.04);

  --aml-bg: var(--c-bg);
  --aml-surface: var(--c-surface);
  --aml-neutral: var(--c-neutral);
  --aml-ink: var(--c-ink);
  --aml-accent: var(--c-accent);
  --aml-accent-2: var(--c-secondary);
  --aml-accent-ink: var(--c-accent-ink);
  --aml-accent-soft: var(--c-accent-soft);
  --aml-accent-soft-ink: var(--c-accent-soft-ink);
  --aml-accent-deep: var(--c-accent-deep);
  --aml-muted: var(--c-muted);
  --aml-border: var(--c-border);
  --aml-mist: var(--c-muted);
  --aml-line: var(--c-border);
  --aml-glow: var(--c-glow);
  --aml-body-end: var(--c-body-end);
  --aml-bg-elev: var(--c-surface);
  --aml-bg-soft: var(--c-neutral);
  --aml-panel: var(--c-panel);
  --aml-panel-border: var(--c-panel-border);
  --aml-panel-shadow: var(--c-panel-shadow);
  --aml-shadow: var(--c-shadow);
  --aml-shadow-soft: var(--c-shadow-soft);
  --aml-surface-glass: var(--c-panel);
  --aml-teal: var(--c-secondary);
  --aml-violet: var(--c-accent);
  --aml-ember: var(--c-accent);
  --aml-ember-deep: var(--c-accent-deep);
  --aml-cursor-dot: var(--c-ink);
  --aml-glass: var(--c-glass);
  --aml-glass-strong: var(--c-glass-strong);
  --aml-glass-hover: var(--c-glass-hover);
  --aml-glass-border: var(--c-border);
  --aml-glass-border-focus: color-mix(in srgb, var(--c-accent) 45%, transparent);
  --aml-glass-shadow: var(--c-panel-shadow);
  --aml-glass-shadow-sm: var(--c-shadow-soft);
  --aml-glass-focus-ring: 0 0 0 2px color-mix(in srgb, var(--c-accent) 18%, transparent), var(--c-panel-shadow);
  --aml-glass-text: var(--c-ink);
  --aml-glass-muted: var(--c-muted);
  --aml-glass-placeholder: color-mix(in srgb, var(--c-ink) 50%, transparent);
  --aml-glass-chip: color-mix(in srgb, var(--c-neutral) 70%, transparent);
  --aml-glass-chip-hover: color-mix(in srgb, var(--c-neutral) 90%, transparent);
  --aml-glass-chip-border: transparent;
  --aml-glass-chip-color: var(--c-ink);
  --aml-rail-bg: color-mix(in srgb, var(--c-bg) 45%, transparent);
  --aml-rail-bg-open: color-mix(in srgb, var(--c-surface) 78%, transparent);
  --aml-rail-border: color-mix(in srgb, var(--c-ink) 10%, transparent);
  --aml-rail-shadow: 8px 0 32px rgba(0, 0, 0, 0.32);
  --aml-rail-link: color-mix(in srgb, var(--c-ink) 68%, transparent);
  --aml-rail-link-active: var(--c-ink);
  --aml-rail-user: color-mix(in srgb, var(--c-ink) 72%, transparent);
  --aml-rail-foot-border: color-mix(in srgb, var(--c-ink) 10%, transparent);
  --aml-rail-link-hover-bg: var(--c-neutral);
  --ac-chrome-bg: var(--c-surface);
  --ac-chrome-border: var(--c-border);
  --ac-border: var(--c-border);
  --ac-shadow: var(--c-shadow-soft);
  --ac-shadow-hover: var(--c-shadow);
  --ac-accent: var(--c-accent);
  --ac-badge-bg: color-mix(in srgb, var(--c-bg) 72%, transparent);
  --ac-foot-bg: linear-gradient(to top, color-mix(in srgb, var(--c-bg) 90%, transparent) 0%, color-mix(in srgb, var(--c-bg) 40%, transparent) 42%, transparent 72%);
  --hp-chrome-bg: var(--c-surface);
  --hp-chrome-border: var(--c-border);
  --hp-surface: var(--c-bg);
  --hp-text-muted: var(--c-muted);

  --theme-hover-bg: color-mix(in srgb, var(--c-accent) 14%, transparent);
  --theme-hover-border: color-mix(in srgb, var(--c-accent) 38%, transparent);
  --theme-hover-fg: var(--c-ink);
  --theme-selected-bg: color-mix(in srgb, var(--c-accent) 68%, var(--c-surface));
  --theme-selected-fg: var(--c-accent-ink);
  --theme-selected-border: color-mix(in srgb, var(--c-accent) 78%, var(--c-surface));
  --theme-chip-bg: color-mix(in srgb, var(--c-ink) 7%, transparent);
  --theme-chip-fg: color-mix(in srgb, var(--c-ink) 88%, transparent);
  --theme-chip-bd: color-mix(in srgb, var(--c-ink) 14%, transparent);
  --theme-chip-hover-bg: color-mix(in srgb, var(--c-accent) 16%, transparent);
  --theme-chip-hover-bd: color-mix(in srgb, var(--c-accent) 40%, transparent);
  --theme-chip-hover-fg: var(--c-ink);
  --aml-hover-bg: var(--theme-hover-bg);
  --aml-hover-border: var(--theme-hover-border);
  --aml-selected-bg: var(--theme-selected-bg);
  --aml-selected-fg: var(--theme-selected-fg);
  --aml-chip-bg: var(--theme-chip-bg);
  --aml-chip-fg: var(--theme-chip-fg);
  --aml-chip-bd: var(--theme-chip-bd);

  --aml-max-w: 1850px;
  --aml-max: min(var(--aml-max-w), 90vw);
  --hp-pad: 0.85rem;
}

/* Clean Studio — soft gri-beyaz: Base #E9ECF0 · Surface #F4F6F8 · CTA #E11D48 · Ink #0F172A */
html[data-theme="light"] {
    color-scheme: light;
  --c-bg: #e9ecf0;
  --c-surface: #f4f6f8;
  --c-accent: #e11d48;
  --c-secondary: #0f172a;
  --c-ink: #0f172a;
  --c-muted: color-mix(in srgb, var(--c-ink) 64%, transparent);
  --c-border: color-mix(in srgb, var(--c-ink) 12%, transparent);
  --c-neutral: color-mix(in srgb, var(--c-bg) 86%, var(--c-ink));
  --c-accent-ink: #ffffff;
  --c-accent-soft: color-mix(in srgb, var(--c-accent) 11%, var(--c-surface));
  --c-accent-soft-ink: var(--c-accent);
  --c-accent-deep: color-mix(in srgb, var(--c-accent) 82%, #000000);
  --c-secondary-soft: color-mix(in srgb, var(--c-secondary) 7%, var(--c-surface));
  --c-panel: color-mix(in srgb, var(--c-surface) 90%, transparent);
  --c-panel-border: var(--c-border);
  --c-panel-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
  --c-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
  --c-shadow-soft: 0 2px 8px rgba(15, 23, 42, 0.05);
  --c-glow: transparent;
  --c-body-end: color-mix(in srgb, var(--c-bg) 94%, #d5dae2);
  --c-glass: color-mix(in srgb, var(--c-surface) 78%, transparent);
  --c-glass-strong: color-mix(in srgb, var(--c-surface) 90%, transparent);
  --c-glass-hover: var(--c-surface);

  /* Light’ta alias’ları yeniden bağla — dark :root değerleri ezilmesin */
  --theme-bg: var(--c-bg);
  --theme-surface: var(--c-surface);
  --theme-accent: var(--c-accent);
  --theme-accent-2: var(--c-secondary);
  --theme-text: var(--c-ink);
  --theme-muted: var(--c-muted);
  --theme-border: var(--c-border);
  --theme-neutral: var(--c-neutral);
  --theme-accent-ink: var(--c-accent-ink);
  --theme-accent-soft: var(--c-accent-soft);
  --theme-accent-soft-ink: var(--c-accent-soft-ink);
  --theme-accent-deep: var(--c-accent-deep);
  --theme-info: var(--c-secondary);
  --theme-info-soft: var(--c-secondary-soft);
  --theme-panel: var(--c-panel);
  --theme-panel-border: var(--c-panel-border);
  --theme-panel-shadow: var(--c-panel-shadow);
  --theme-shadow: var(--c-shadow);
  --theme-shadow-soft: var(--c-shadow-soft);
  --theme-surface-2: var(--c-neutral);
  --theme-surface-3: var(--c-neutral);
  --theme-bg-elevated: var(--c-surface);
  --theme-paper: var(--c-neutral);
  --theme-surface-glass: var(--c-panel);
  --theme-neutral-glass: color-mix(in srgb, var(--c-neutral) 72%, transparent);
  --theme-scrim: color-mix(in srgb, #000 45%, transparent);
  --theme-shade-rgb: 233, 236, 240;
  --theme-shade-a1: 0.1;
  --theme-shade-a2: 0.2;
  --theme-shade-a3: 0.36;
  --theme-shade-a4: 0.14;
  --theme-shade-a5: 0.24;
  --theme-img-filter: brightness(1.12) saturate(0.9) contrast(0.98);

  --aml-bg: var(--c-bg);
  --aml-surface: var(--c-surface);
  --aml-neutral: var(--c-neutral);
  --aml-ink: var(--c-ink);
  --aml-accent: var(--c-accent);
  --aml-accent-2: var(--c-secondary);
  --aml-accent-ink: var(--c-accent-ink);
  --aml-accent-soft: var(--c-accent-soft);
  --aml-accent-soft-ink: var(--c-accent-soft-ink);
  --aml-accent-deep: var(--c-accent-deep);
  --aml-muted: var(--c-muted);
  --aml-border: var(--c-border);
  --aml-mist: var(--c-muted);
  --aml-line: var(--c-border);
  --aml-glow: var(--c-glow);
  --aml-body-end: var(--c-body-end);
  --aml-bg-elev: var(--c-surface);
  --aml-bg-soft: var(--c-neutral);
  --aml-panel: var(--c-panel);
  --aml-panel-border: var(--c-panel-border);
  --aml-panel-shadow: var(--c-panel-shadow);
  --aml-shadow: var(--c-shadow);
  --aml-shadow-soft: var(--c-shadow-soft);
  --aml-surface-glass: var(--c-panel);
  --aml-teal: var(--c-accent);
  --aml-violet: var(--c-accent);
  --aml-ember: var(--c-accent);
  --aml-ember-deep: var(--c-accent-deep);
  --aml-cursor-dot: var(--c-ink);
  --aml-glass: var(--c-glass);
  --aml-glass-strong: var(--c-glass-strong);
  --aml-glass-hover: var(--c-glass-hover);
  --aml-glass-border: var(--c-border);
  --aml-glass-border-focus: color-mix(in srgb, var(--c-accent) 40%, transparent);
  --aml-glass-shadow: var(--c-panel-shadow);
  --aml-glass-shadow-sm: var(--c-shadow-soft);
  --aml-glass-focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-accent) 12%, transparent), var(--c-panel-shadow);
  --aml-glass-text: var(--c-ink);
  --aml-glass-muted: var(--c-muted);
  --aml-glass-placeholder: color-mix(in srgb, var(--c-ink) 45%, transparent);
  --aml-glass-chip: var(--c-neutral);
  --aml-glass-chip-hover: color-mix(in srgb, var(--c-neutral) 85%, var(--c-ink));
  --aml-glass-chip-border: transparent;
  --aml-glass-chip-color: var(--c-ink);
  --aml-rail-bg: color-mix(in srgb, var(--c-surface) 62%, transparent);
  --aml-rail-bg-open: color-mix(in srgb, var(--c-surface) 92%, transparent);
  --aml-rail-border: color-mix(in srgb, var(--c-ink) 10%, transparent);
  --aml-rail-shadow: 8px 0 28px rgba(15, 23, 42, 0.08);
  --aml-rail-link: color-mix(in srgb, var(--c-ink) 55%, transparent);
  --aml-rail-link-active: var(--c-ink);
  --aml-rail-user: color-mix(in srgb, var(--c-ink) 70%, transparent);
  --aml-rail-foot-border: color-mix(in srgb, var(--c-ink) 10%, transparent);
  --aml-rail-link-hover-bg: var(--c-neutral);
  --ac-chrome-bg: var(--c-surface);
  --ac-chrome-border: var(--c-border);
  --ac-border: var(--c-border);
  --ac-shadow: var(--c-shadow-soft);
  --ac-shadow-hover: var(--c-shadow);
  --ac-accent: var(--c-accent);
  --ac-badge-bg: color-mix(in srgb, var(--c-ink) 72%, transparent);
  --ac-foot-bg: linear-gradient(to top, color-mix(in srgb, var(--c-ink) 88%, transparent) 0%, color-mix(in srgb, var(--c-ink) 40%, transparent) 42%, transparent 72%);
  --hp-chrome-bg: var(--c-surface);
  --hp-chrome-border: var(--c-border);
  --hp-surface: var(--c-bg);
  --hp-text-muted: var(--c-muted);

  --theme-hover-bg: color-mix(in srgb, var(--c-accent) 12%, transparent);
  --theme-hover-border: color-mix(in srgb, var(--c-accent) 45%, transparent);
  --theme-hover-fg: var(--c-ink);
  --theme-selected-bg: var(--c-accent);
  --theme-selected-fg: var(--c-accent-ink);
  --theme-selected-border: var(--c-accent);
  --theme-chip-bg: color-mix(in srgb, var(--c-ink) 7%, transparent);
  --theme-chip-fg: color-mix(in srgb, var(--c-ink) 88%, transparent);
  --theme-chip-bd: color-mix(in srgb, var(--c-ink) 14%, transparent);
  --theme-chip-hover-bg: color-mix(in srgb, var(--c-accent) 14%, transparent);
  --theme-chip-hover-bd: color-mix(in srgb, var(--c-accent) 45%, transparent);
  --theme-chip-hover-fg: var(--c-ink);
  --aml-hover-bg: var(--theme-hover-bg);
  --aml-hover-border: var(--theme-hover-border);
  --aml-selected-bg: var(--theme-selected-bg);
  --aml-selected-fg: var(--theme-selected-fg);
  --aml-chip-bg: var(--theme-chip-bg);
  --aml-chip-fg: var(--theme-chip-fg);
  --aml-chip-bd: var(--theme-chip-bd);
}

html.theme-switching { pointer-events: none !important; }
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
    animation: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

html {
  font-size: 16px;
}
html,
html body {
  background-color: var(--theme-bg);
  background-image: none;
  color: var(--theme-muted);
  letter-spacing: 0;
}
html[data-theme="dark"] body,
html:not([data-theme="light"]) body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-theme="light"] body {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
html h1, html h2, html h3, html h4, html h5, html h6,
html .title, html .page-title, html .heading {
  color: var(--theme-text);
}

/* Toggle */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface-2);
    color: var(--theme-accent);
    cursor: pointer;
    flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--theme-accent) 45%, transparent);
    color: var(--theme-accent-deep);
}
.theme-toggle .theme-icon-sun { display: none; }
.theme-toggle .theme-icon-moon { display: inline-block; }
html[data-theme="light"] .theme-toggle .theme-icon-sun { display: inline-block; }
html[data-theme="light"] .theme-toggle .theme-icon-moon { display: none; }
.theme-toggle--mobile {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    justify-content: flex-start;
    gap: 0.55rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
}
html[data-theme="dark"] .theme-toggle--mobile .theme-toggle-label::after { content: " — Gündüz"; }
html[data-theme="light"] .theme-toggle--mobile .theme-toggle-label::after { content: " — Gece"; }

.title-lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.35rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.title-lang-toggle__track {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 3.6rem;
    height: 1.85rem;
    padding: 0.12rem;
    border-radius: 999px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface-2);
    box-sizing: border-box;
}
.title-lang-toggle__opt {
    position: relative;
    z-index: 1;
    font-size: 0.62rem;
    font-weight: 800;
    text-align: center;
  color: color-mix(in srgb, var(--theme-text) 40%, transparent);
    line-height: 1;
    pointer-events: none;
}
.title-lang-toggle__thumb {
    position: absolute;
    top: 0.12rem;
    left: 0.12rem;
    width: calc(50% - 0.12rem);
    height: calc(100% - 0.24rem);
    border-radius: 999px;
  background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-2));
    transition: transform 0.18s ease;
    z-index: 0;
}
.title-lang-toggle.is-jp .title-lang-toggle__opt--jp,
.title-lang-toggle.is-en .title-lang-toggle__opt--en {
  color: var(--theme-accent-ink);
}
.title-lang-toggle.is-en .title-lang-toggle__thumb {
    transform: translateX(100%);
}

/* Ortak UI — token */
.filter-btn-modern,
.top100-sort-btn {
  background: var(--theme-accent-soft);
  border: 0;
  color: var(--theme-accent-soft-ink);
  transition: filter 0.15s ease;
}
.filter-btn-modern:hover,
.top100-sort-btn:hover { filter: brightness(0.96); }
.filter-btn-modern.active,
.top100-sort-btn.active {
  background: var(--theme-accent);
  color: var(--theme-accent-ink);
  filter: none;
}

.theme-panel {
  background: var(--theme-panel);
  border: 1px solid var(--theme-panel-border);
  box-shadow: var(--theme-panel-shadow);
  color: var(--theme-text);
  border-radius: 0.75rem;
}

/* Info rozetleri — dark cyan / light ink */
.theme-info,
.badge-info,
.ep-badge,
.quality-badge {
  color: var(--theme-info);
}

.fansub-player {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 47.8125%;
  overflow: hidden;
  background: #000;
}
.fansub-player iframe,
.fansub-player > video,
.fansub-player .video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.backlink-area,
div.backlink-area[aria-hidden="true"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
    padding: 0 !important;
  margin: -1px !important;
    overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: -9999px !important;
  visibility: hidden !important;
}

@media (max-width: 767.98px) {
  :root { --hp-pad: 0.3rem; }
}


/* —— site geneli etkileşim (chip / hover / seçili) —— */
.ix-chip,
.genre-tag,
.theme-tag,
.anime-tag,
.daily-pick__tags span,
.daily-pick__tags a,
.daily-pick__chip,
.daily-pick__score {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Opt-in yardımcılar — bileşenler .ix-selected / .ix-hover kullanır */
.ix-selected {
  background: var(--theme-selected-bg) !important;
  border-color: var(--theme-selected-border) !important;
  color: var(--theme-selected-fg) !important;
}
.ix-hover:hover {
  background: var(--theme-hover-bg);
  border-color: var(--theme-hover-border);
  color: var(--theme-hover-fg);
}

/* Font Awesome 6 — Line Awesome .fa/.fas override’ını geri al */
i.fas,
i.fa-solid,
.fas,
.fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
i.far,
i.fa-regular,
.far,
.fa-regular {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}
i.fab,
i.fa-brands,
.fab,
.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}