:root {
  --bg-deep: #08090b;
  --bg-surface: #101216;
  --bg-surface-elevated: #16181f;
  --bg-card: #131418;
  --bg-card-inner: #0b0c0f;

  --ufc-red: #e50914;
  --ufc-red-hover: #ff1e27;
  --gold-accent: #f5ba13;
  --text-pure: #ffffff;
  --text-muted: #9aa0a6;
  --text-dim: #606775;

  --font-brand: 'Oswald', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --border-subtle: rgba(255, 255, 255, 0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  overflow-y: scroll; /* her zaman scrollbar rezervi - navbar kaymasını önler */
  scrollbar-gutter: stable;
  width: 100%;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-deep);
  color: var(--text-pure);
  min-height: 100vh;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

.site-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* ==================== 1. METALLIC BRUSHED STEEL AUTHENTIC NAVBAR ==================== */
.ufc-header {
  max-width: 1280px;
  width: calc(100% - 32px);
  margin: 16px auto 28px;
  background: 
    linear-gradient(180deg, #adb5be 0%, #dde3e9 16%, #f3f6f9 38%, #e2e8ee 60%, #c4cbd3 85%, #9fa8b1 100%);
  border-radius: 4px;
  border: 1px solid #78828c;
  box-shadow: 
    0 12px 36px rgba(0, 0, 0, 0.75), 
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  position: sticky;
  top: 10px;
  z-index: 1000;
  overflow: visible;
}

/* Metallic Industrial Knurled Rails on Top & Bottom (Görseldeki Gibi Tırtıklı Metal Ray) */
.ufc-header::before,
.ufc-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    #586069 0px,
    #586069 2px,
    #a2aab2 2px,
    #a2aab2 4px,
    #ffffff 4px,
    #ffffff 5px,
    #424850 5px,
    #424850 7px
  );
  z-index: 5;
  pointer-events: none;
}

.ufc-header::before {
  top: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ufc-header::after {
  bottom: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

.ufc-navbar-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 60px;
  padding: 0 28px;
  position: relative;
  background: 
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.05) 15%, rgba(255, 255, 255, 0.18) 48%, rgba(255, 255, 255, 0.25) 52%, rgba(0, 0, 0, 0.05) 85%, rgba(255, 255, 255, 0.08) 100%),
    linear-gradient(180deg, #b0b8c0 0%, #dde3e9 16%, #f3f6f9 38%, #e2e8ee 60%, #c4cbd3 85%, #9fa8b1 100%);
  border-bottom: none;
}

.ufc-nav-group {
  display: flex;
  align-items: center;
  height: 100%;
}

.ufc-nav-group.left {
  justify-content: flex-start;
  gap: 28px;
}

.ufc-nav-group.right {
  justify-content: flex-end;
  gap: 20px;
}

.ufc-link-btn {
  background: transparent;
  border: none;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #121417;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease, text-shadow 0.15s ease;
  padding: 0 4px;
  min-width: 0;
}

.ufc-link-btn:hover {
  color: #d20a11;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 8px rgba(210, 10, 17, 0.35);
}

.ufc-link-btn.active {
  color: #121417;
}

.ufc-active-line {
  display: none;
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  height: 3px;
  background: #d20a11;
  box-shadow: 0 0 6px rgba(210, 10, 17, 0.7);
  border-radius: 1px;
}

.ufc-link-btn.active .ufc-active-line {
  display: block;
}

html.initial-upcoming-view #tabPastEvents.active .ufc-active-line {
  display: none;
}

html.initial-upcoming-view #tabUpcomingEvents .ufc-active-line {
  display: block;
}

html.initial-upcoming-view #eventsHeadline,
html.initial-upcoming-view #eventsCardsContainer {
  visibility: hidden;
}

.ufc-live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d20a11;
  box-shadow: 0 0 6px rgba(210, 10, 17, 0.8);
  animation: radarPulse 1.4s infinite;
}

/* Alternating Green & Red Live Broadcasting State when Event is Live */
.ufc-link-btn.is-live-broadcasting {
  font-weight: 800 !important;
  letter-spacing: 0.8px;
  animation: liveBicolorText 2s infinite ease-in-out !important;
}

.ufc-link-btn.is-live-broadcasting .ufc-live-pulse-dot {
  animation: liveBicolorDot 2s infinite ease-in-out !important;
}

.ufc-link-btn.is-live-broadcasting .ufc-active-line {
  animation: liveBicolorLine 2s infinite ease-in-out !important;
}

@keyframes liveBicolorText {
  0%, 100% {
    color: #00e676 !important;
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.7), 0 1px 1px rgba(0, 0, 0, 0.9) !important;
  }
  50% {
    color: #ff1744 !important;
    text-shadow: 0 0 10px rgba(255, 23, 68, 0.7), 0 1px 1px rgba(0, 0, 0, 0.9) !important;
  }
}

@keyframes liveBicolorDot {
  0%, 100% {
    background: #00e676 !important;
    transform: scale(1.15);
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.9), 0 0 12px #00e676;
  }
  25% {
    transform: scale(0.9);
    box-shadow: 0 0 0 6px rgba(0, 230, 118, 0), 0 0 4px #00e676;
  }
  50% {
    background: #ff1744 !important;
    transform: scale(1.15);
    box-shadow: 0 0 0 0 rgba(255, 23, 68, 0.9), 0 0 12px #ff1744;
  }
  75% {
    transform: scale(0.9);
    box-shadow: 0 0 0 6px rgba(255, 23, 68, 0), 0 0 4px #ff1744;
  }
}

@keyframes liveBicolorLine {
  0%, 100% {
    background: #00e676 !important;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.85) !important;
  }
  50% {
    background: #ff1744 !important;
    box-shadow: 0 0 10px rgba(255, 23, 68, 0.85) !important;
  }
}

@keyframes radarPulse {
  0% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(210, 10, 17, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(210, 10, 17, 0);
  }
  100% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(210, 10, 17, 0);
  }
}

/* Center Logo */
.ufc-logo-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 24px;
}

.ufc-logo-anchor {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand-text-logo {
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #0d0f12;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  transition: transform 0.2s;
}

.brand-text-logo:hover {
  transform: scale(1.03);
}

.brand-image-logo {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 50%;
  transition: transform .2s ease, filter .2s ease;
}

.ufc-logo-anchor:hover .brand-image-logo {
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px rgba(210, 10, 17, .35));
}

.brand-text-accent {
  color: #d20a11;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 10px rgba(210, 10, 17, 0.35);
}

/* Organizations Dropdown */
.ufc-dropdown {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
}

.chevron-mini {
  transition: transform 0.2s ease;
}

.ufc-dropdown.open .chevron-mini {
  transform: rotate(180deg);
}

.ufc-dropdown-menu.org-menu-unified {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 310px;
  background: 
    linear-gradient(180deg, #b0b8c0 0%, #dde3e9 16%, #f3f6f9 38%, #e2e8ee 60%, #c4cbd3 85%, #9fa8b1 100%);
  border: 1px solid #78828c;
  border-radius: 4px;
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.75), 
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  display: none;
  flex-direction: column;
  padding: 10px 10px;
  z-index: 1100;
  animation: fadeIn 0.15s ease;
  overflow: visible;
}

/* Metallic Industrial Knurled Rails on Top & Bottom of Dropdown */
.ufc-dropdown-menu.org-menu-unified::before,
.ufc-dropdown-menu.org-menu-unified::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(
    -45deg,
    #586069 0px,
    #586069 2px,
    #a2aab2 2px,
    #a2aab2 4px,
    #ffffff 4px,
    #ffffff 5px,
    #424850 5px,
    #424850 7px
  );
  z-index: 5;
  pointer-events: none;
}

.ufc-dropdown-menu.org-menu-unified::before {
  top: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ufc-dropdown-menu.org-menu-unified::after {
  bottom: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

.ufc-dropdown.open .ufc-dropdown-menu {
  display: flex;
}

.ufc-dropdown-head {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #1a1e24;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: 6px 6px 8px;
  border-bottom: 1px solid rgba(120, 130, 140, 0.4);
  text-transform: uppercase;
}

/* Organizations List Container */
.org-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}

/* Individual Organization Select Item */
.org-select-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(238, 242, 246, 0.6) 100%);
  border: 1px solid rgba(120, 130, 140, 0.45);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  user-select: none;
}

.org-select-item:hover {
  background: linear-gradient(180deg, #ffffff 0%, #edf2f7 100%);
  border-color: #555e68;
  transform: translateX(2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16), inset 0 1px 0 #ffffff;
}

.org-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.org-text-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.org-title-main {
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #0d0f12;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.org-subtitle-info {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  color: #4b5563;
}

/* Organization Distinct Dots */
.org-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.org-bullet.ufc { background: #d20a11; box-shadow: 0 0 6px rgba(210, 10, 17, 0.6); }
.org-bullet.pfl { background: #0077ff; box-shadow: 0 0 6px rgba(0, 119, 255, 0.6); }
.org-bullet.ofc { background: #d4a000; box-shadow: 0 0 6px rgba(212, 160, 0, 0.6); }
.org-bullet.rizin { background: #00b05b; box-shadow: 0 0 6px rgba(0, 176, 91, 0.6); }
.org-bullet.lfa { background: #0099cc; box-shadow: 0 0 6px rgba(0, 153, 204, 0.6); }
.org-bullet.cw { background: #d99b00; box-shadow: 0 0 6px rgba(217, 155, 0, 0.6); }
.org-bullet.ksw { background: #e01b22; box-shadow: 0 0 6px rgba(224, 27, 34, 0.6); }

/* Checkmark Icon */
.org-check-icon {
  color: transparent;
  stroke: transparent;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

/* Active State */
.org-select-item.active {
  background: linear-gradient(180deg, #181b22 0%, #0d0f14 100%);
  border-color: #d20a11;
  box-shadow: inset 3px 0 0 #d20a11, 0 4px 12px rgba(0, 0, 0, 0.3);
}

.org-select-item.active .org-title-main {
  color: #ffffff;
  text-shadow: none;
}

.org-select-item.active .org-subtitle-info {
  color: #adb5bd;
}

.org-select-item.active .org-check-icon {
  color: #d20a11;
  stroke: #d20a11;
}

/* Footer note */
.org-menu-footer {
  padding: 8px 6px 4px;
  font-family: var(--font-brand);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #4b5563;
  border-top: 1px solid rgba(120, 130, 140, 0.4);
  margin-top: 8px;
  text-align: center;
  user-select: none;
}

.dot-live.ofc {
  background: #e5b232;
}

.badge-status {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
}

.badge-status.live {
  background: rgba(0, 230, 118, 0.15);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.3);
}

.badge-status.pfl {
  background: rgba(0, 229, 255, 0.15);
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.35);
}

.badge-status.ofc {
  background: rgba(229, 178, 50, 0.15);
  color: #e5b232;
  border: 1px solid rgba(229, 178, 50, 0.35);
}

.badge-status.soon {
  background: rgba(245, 186, 19, 0.12);
  color: var(--gold-accent);
  border: 1px solid rgba(245, 186, 19, 0.25);
}

.org-sublink-btn.active {
  background: rgba(229, 9, 20, 0.18);
  border-color: rgba(229, 9, 20, 0.45);
  color: #fff;
  font-weight: 700;
}

/* Language Switcher Segment Toggle (TR / EN) */
.ufc-lang-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(120, 130, 140, 0.65);
  border-radius: 20px;
  padding: 2px 3px;
  gap: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;
  user-select: none;
}

.ufc-lang-toggle:hover {
  border-color: #d20a11;
  background: rgba(0, 0, 0, 0.12);
}

.lang-pill-btn {
  background: transparent;
  border: none;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #374151;
  padding: 3px 7px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  line-height: 1;
}

.lang-pill-btn:hover {
  color: #d20a11;
}

.lang-pill-btn.active {
  background: linear-gradient(180deg, #d20a11 0%, #a8070d 100%);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 6px rgba(210, 10, 17, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  cursor: default;
}

.lang-divider {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  color: rgba(100, 110, 120, 0.6);
  user-select: none;
  line-height: 1;
}

/* Search Trigger Button */
.ufc-search-btn {
  background: transparent;
  border: none;
  color: #111;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.15s;
}

.ufc-search-btn:hover {
  color: #d20a11;
  transform: scale(1.1);
}

/* Upcoming Matchup Typography Poster (Faces Hidden as Requested) */
.upcoming-matchup-poster {
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 24px;
  background: linear-gradient(135deg, #0e1014 0%, #151820 100%);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.upcoming-poster-mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(210, 10, 17, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.upcoming-names-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.upcoming-fighter-name {
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.upcoming-vs-badge {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #d20a11;
  background: rgba(210, 10, 17, 0.14);
  border: 1px solid rgba(210, 10, 17, 0.35);
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 1px;
}

.upcoming-event-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-accent);
  background: rgba(245, 186, 19, 0.1);
  border: 1px solid rgba(245, 186, 19, 0.25);
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}


.nav-action-btn.primary:hover {
  background: var(--ufc-red-hover);
}

/* ==================== 1.5 HERO FEATURED EVENT: FULL-SCREEN WAVING FLAGS (REFERANS GÖRSEL STİLİ) ==================== */
.hero-featured-event.full-screen-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: calc(100vh - 104px);
  height: calc(100vh - 104px);
  background: #060709;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Split Stage - 50% Left / 50% Right Edge-to-Edge */
.hero-stage-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: relative;
}

.hero-split-side {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-split-side.f2-side {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

/* Hero Fighter Waving Flag Backdrop - Referans Görsel Birebir: Dövüşçünün Gövdesini Kapsayan Video Bayrak */
.hero-fighter-flag-backdrop {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(750px, 58vw, 1180px);
  height: clamp(560px, 45vw, 860px);
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Animated Flag Video Inside Backdrop (Büyütülmüş ve Dövüşçünün Gövdesini Kaplayan) */
.hero-flag-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.7);
  display: block;
  pointer-events: none;
  filter: contrast(1.18) saturate(1.15) brightness(1.0);
}

/* Subtle Vignette on Flag Edges to seamlessly blend into dark arena backdrop */
.flag-edge-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(6, 7, 9, 0.45) 72%, rgba(6, 7, 9, 0.96) 100%),
              linear-gradient(to bottom, transparent 65%, rgba(6, 7, 9, 0.98) 100%);
}

/* Waving National Flag Background Layer (Fallback) */
.hero-flag-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Realistic Moving Fabric Crease / Wave Overlay */
.flag-wave-overlay {
  position: absolute;
  inset: -50px;
  background: repeating-linear-gradient(
    -55deg,
    rgba(0, 0, 0, 0.65) 0px,
    rgba(0, 0, 0, 0.2) 50px,
    rgba(255, 255, 255, 0.25) 90px,
    rgba(0, 0, 0, 0.7) 140px,
    rgba(255, 255, 255, 0.22) 190px,
    rgba(0, 0, 0, 0.6) 240px
  );
  background-size: 250% 250%;
  animation: waveWindMotion 8s linear infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes waveWindMotion {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

/* Cinematic Shimmer on Flag */
.flag-lighting-shimmer {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
}

/* GIANT BACKGROUND TYPOGRAPHY: SILVA / DELGADO (Referans BOUZID Birebir: Aynı Boyut, Hizalı ve Boyun Hizası Üzerinde) */
.hero-giant-bg-text {
  position: absolute;
  top: 240px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 2;
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: clamp(140px, 17vw, 290px);
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 0.85;
  text-transform: uppercase;
  color: #ffffff;
  transform: scaleY(1.25);
  transform-origin: top center;
  text-shadow: 0 12px 36px rgba(0, 0, 0, 0.95);
  user-select: none;
  pointer-events: none;
  opacity: 1;
}

/* Foreground Fighter Cutout - Önceki İhtişamlı Boyutuna Döndürüldü */
.hero-standing-fighter-box {
  position: relative;
  z-index: 3;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  padding-bottom: 0px;
}

.hero-standing-fighter-img {
  height: 60vh;
  max-height: 70vh;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.95));
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 2s ease,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 2s ease;
}

.hero-standing-fighter-img.is-loading {
  opacity: 0;
  transform: translateY(34px) scale(0.97);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0));
}

.hero-standing-fighter-img.is-loaded {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-split-side:hover .hero-standing-fighter-img {
  transform: scale(1.02);
}

/* Bottom Identity Label */
.hero-athlete-identity {
  position: absolute;
  bottom: 30px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-athlete-identity.left {
  left: 40px;
  text-align: left;
}

.hero-athlete-identity.right {
  right: 40px;
  text-align: right;
}

.hero-identity-record {
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold-accent);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.hero-identity-name {
  font-family: var(--font-brand);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

.hero-identity-country {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
}

.hero-athlete-identity.right .hero-identity-country {
  justify-content: flex-end;
}

.country-code-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid rgba(245, 186, 19, 0.55);
  background: rgba(245, 186, 19, 0.12);
  color: var(--gold-accent);
  font-family: var(--font-brand);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1;
}

/* Floating Center Broadcast Strip */
.hero-floating-center {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  width: 90%;
  max-width: 960px;
}

.hero-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-brand);
  font-size: 13px;
  letter-spacing: 2.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  padding: 4px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-meta-tag {
  color: #fff;
}

.hero-meta-tag.red-pulse {
  color: var(--ufc-red);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-meta-tag.red-pulse::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--ufc-red);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--ufc-red);
  animation: pulse 1.5s infinite;
}

.hero-meta-dot {
  color: rgba(255, 255, 255, 0.3);
}

.hero-meta-date {
  color: var(--gold-accent);
}

.hero-headline-strip {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  font-family: var(--font-brand);
  font-size: clamp(34px, 4.5vw, 68px);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 8px;
  user-select: none;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  padding: 4px 20px;
  border-radius: 8px;
}

.hero-f1-title {
  color: #ffffff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}

.hero-vs-word {
  font-size: clamp(18px, 2.5vw, 32px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 2px;
}

.hero-f2-title {
  color: var(--ufc-red);
  text-shadow: 0 4px 24px rgba(224, 6, 19, 0.5);
}

.hero-subline-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c0c6d2;
  margin-bottom: 16px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  padding: 6px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.subline-sep {
  color: rgba(255, 255, 255, 0.25);
}

.subline-item.red-time {
  color: var(--gold-accent);
  font-weight: 700;
}

/* ==================== VS MORPH BUTTON (Crystal Kum Efekti - UFC Dark Tema) ==================== */

/* Container: Dividing Line Ortasında Konumlandırma */
.hero-center-showdown-vs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sand Particle Aura Canvas (Buton Etrafındaki Kum Halkası) */
.vs-aura-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

/* VS Morph Wrapper */
.ufc-vs-morph-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer Recessed Rim - Dark UFC Gold Theme */
.ufc-liquid-rim {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1a1a22 0%, #2a2a36 50%, #1a1a22 100%);
  padding: 5px;
  box-shadow:
    0 0 50px rgba(229, 9, 20, 0.5),
    0 0 80px rgba(229, 9, 20, 0.25),
    0 22px 46px -8px rgba(0, 0, 0, 0.9),
    inset 0 1.5px 3px rgba(255, 255, 255, 0.12),
    inset 0 -2px 4px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
  animation: vsRimGlow 3s ease-in-out infinite alternate;
}

@keyframes vsRimGlow {
  0% {
    box-shadow:
      0 0 40px rgba(229, 9, 20, 0.4),
      0 0 70px rgba(229, 9, 20, 0.2),
      0 22px 46px -8px rgba(0, 0, 0, 0.9),
      inset 0 1.5px 3px rgba(255, 255, 255, 0.12),
      inset 0 -2px 4px rgba(0, 0, 0, 0.8);
  }
  100% {
    box-shadow:
      0 0 60px rgba(229, 9, 20, 0.7),
      0 0 100px rgba(229, 9, 20, 0.35),
      0 22px 46px -8px rgba(0, 0, 0, 0.9),
      inset 0 1.5px 3px rgba(255, 255, 255, 0.18),
      inset 0 -2px 4px rgba(0, 0, 0, 0.8);
  }
}

.ufc-liquid-rim:hover {
  transform: scale(1.06);
}

.ufc-liquid-rim:active {
  transform: scale(0.97);
}

/* The Liquid Metal Button */
.liquid-metal-btn {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 3.5px;
  position: relative;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Dynamic Chromatic Liquid Metal Stroke Layer */
.liquid-stroke-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  overflow: hidden;
  filter: drop-shadow(0 0 2px rgba(255, 180, 0, 0.6)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.85));
}

/* Metal Base - UFC Gold Conic */
.stroke-metal-base {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: conic-gradient(
    from 40deg,
    #ffffff 0deg,
    #f5ba13 20deg,
    #c47c05 50deg,
    #2c303d 80deg,
    #13151c 95deg,
    #3f4454 115deg,
    #f5ba13 145deg,
    #ffffff 180deg,
    #f5ba13 200deg,
    #c47c05 230deg,
    #2c303d 260deg,
    #13151c 275deg,
    #f5ba13 295deg,
    #ffffff 360deg
  );
  animation: metal-sheen-wobble 16s ease-in-out infinite alternate;
}

@keyframes metal-sheen-wobble {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(45deg); }
  100% { transform: rotate(-25deg); }
}

/* Prism 1 - Red/Gold Crystal Spectrum */
.stroke-prism-1 {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 15deg,
    #e50914 20deg,
    #ff6600 27deg,
    #ffea00 34deg,
    #ff00aa 42deg,
    #ffffff 50deg,
    transparent 58deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 3px rgba(229, 9, 20, 0.8));
  animation: weave-prism-1 9.5s cubic-bezier(0.45, 0.05, 0.25, 0.95) infinite;
}

@keyframes weave-prism-1 {
  0%   { transform: rotate(0deg); opacity: 0.85; }
  25%  { transform: rotate(210deg); opacity: 0.55; }
  50%  { transform: rotate(155deg); opacity: 0.90; }
  75%  { transform: rotate(310deg); opacity: 0.45; }
  100% { transform: rotate(360deg); opacity: 0.85; }
}

/* Prism 2 - Reverse Gold Spectrum */
.stroke-prism-2 {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    transparent 25deg,
    #f5ba13 30deg,
    #ffffff 38deg,
    #00e1ff 46deg,
    #e50914 54deg,
    transparent 62deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 2px rgba(245, 186, 19, 0.6));
  animation: weave-prism-2 13s cubic-bezier(0.35, 0.15, 0.30, 0.95) infinite;
}

@keyframes weave-prism-2 {
  0%   { transform: rotate(360deg); opacity: 0.5; }
  33%  { transform: rotate(220deg); opacity: 0.9; }
  66%  { transform: rotate(130deg); opacity: 0.4; }
  100% { transform: rotate(0deg); opacity: 0.5; }
}

/* Prism 3 - Subtle White Hot */
.stroke-prism-3 {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg,
    transparent 0deg,
    transparent 40deg,
    rgba(255,255,255,0.9) 44deg,
    rgba(255,220,100,0.8) 50deg,
    transparent 56deg,
    transparent 360deg
  );
  mix-blend-mode: overlay;
  animation: weave-prism-3 7s linear infinite;
}

@keyframes weave-prism-3 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Metal Sheen Overlay */
.stroke-metal-sheen {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.22) 0%, transparent 60%);
  animation: sheen-drift 11s ease-in-out infinite alternate;
}

@keyframes sheen-drift {
  0%   { transform: rotate(0deg) scale(1.0); opacity: 0.6; }
  100% { transform: rotate(90deg) scale(1.1); opacity: 0.85; }
}

/* Inner Satin Dark Surface (Canvas Host) */
.ufc-liquid-inner {
  width: calc(100% - 7px);
  height: calc(100% - 7px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #1e1e2a 0%, #0a0a10 65%, #050507 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.9),
    inset 0 -1px 4px rgba(255, 255, 255, 0.06);
}

.liquid-inner-surface {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Ripple Effect on Click */
#clickRipple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

#clickRipple.trigger {
  animation: rippleBurst 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes rippleBurst {
  0%   { box-shadow: inset 0 0 0 0 rgba(229, 9, 20, 0.7); }
  60%  { box-shadow: inset 0 0 0 12px rgba(229, 9, 20, 0.3); }
  100% { box-shadow: inset 0 0 0 24px rgba(229, 9, 20, 0); }
}


/* Floating Action with CTA */
.hero-floating-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-countdown-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 8px 16px;
  border-radius: 20px;
  white-space: nowrap;
}

.hero-stream-cta-btn {
  background: var(--ufc-red);
  color: #fff;
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 22px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 6px 20px rgba(224, 6, 19, 0.5);
  white-space: nowrap;
}

.hero-stream-cta-btn:hover {
  background: var(--ufc-red-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(224, 6, 19, 0.7);
}

/* Bottom Cinematic Vignette Fade into Content */
.hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to top, #08090b 20%, rgba(8, 9, 11, 0.7) 60%, transparent 100%);
  z-index: 4;
  pointer-events: none;
}


/* ==================== 2. VIEW 1: EVENTS GRID (GÖRSEL 1 STİLİ) ==================== */
.main-view {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 60px;
  width: 100%;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-title-wrapper {
  padding-top: 60px;
  padding-bottom: 36px;
  margin-bottom: 8px;
}

.giant-headline {
  font-family: var(--font-brand);
  font-size: 64px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.15;
  word-break: break-word;
}

.section-subtext {
  display: none;
}

.events-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Event Card matching Image 1 */
.glory-event-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--ufc-red);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}

.glory-event-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
}

/* Left Half of Event Card */
.event-card-left {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}

.event-brand-header {
  display: flex;
  align-items: center;
}

.event-title-text {
  font-family: var(--font-brand);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
}

.event-date-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.event-date-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.event-date-sep {
  opacity: 0.35;
}

.event-weight-title {
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
  margin-top: 6px;
  line-height: 1.2;
}

.event-result-badge {
  display: inline-block;
  background: #fff;
  color: #000;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  margin-top: 2px;
}

.results-btn {
  margin-top: 16px;
  background: var(--ufc-red);
  color: #fff;
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 42px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}

.results-btn:hover {
  background: var(--ufc-red-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.6);
}

/* Live Event & Fight Styles */
.event-result-badge.is-live-badge {
  background: linear-gradient(135deg, #e50914 0%, #00e676 100%);
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  animation: liveBadgePulse 2s infinite ease-in-out;
  box-shadow: 0 0 10px rgba(229, 9, 20, 0.6);
}

.results-btn.is-live-btn {
  background: linear-gradient(135deg, #e50914, #00c853);
  box-shadow: 0 4px 18px rgba(0, 230, 118, 0.4), 0 0 10px rgba(229, 9, 20, 0.5);
  animation: liveBtnPulse 2.5s infinite ease-in-out;
}

.results-btn.is-live-btn:hover {
  background: linear-gradient(135deg, #ff1744, #00e676);
  box-shadow: 0 6px 24px rgba(0, 230, 118, 0.6), 0 0 16px rgba(229, 9, 20, 0.7);
  transform: translateY(-2px);
}

.glory-event-card.is-event-live {
  border-color: rgba(229, 9, 20, 0.55);
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.25), 0 0 40px rgba(0, 230, 118, 0.12);
}

.stream-fight-card.is-fight-live {
  border: 1px solid rgba(229, 9, 20, 0.7) !important;
  box-shadow: 0 0 24px rgba(229, 9, 20, 0.3), 0 0 12px rgba(0, 230, 118, 0.2) !important;
  background: linear-gradient(180deg, rgba(229, 9, 20, 0.08) 0%, rgba(17, 18, 22, 0.95) 100%) !important;
}

.stream-result-pill.is-live-pill {
  background: rgba(229, 9, 20, 0.25);
  border: 1px solid #e50914;
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: liveBadgePulse 2s infinite ease-in-out;
  box-shadow: 0 0 10px rgba(229, 9, 20, 0.5);
}

.live-blink-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00e676;
  box-shadow: 0 0 8px #00e676;
  animation: blinkLiveDot 1.2s infinite ease-in-out;
}

@keyframes blinkLiveDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    background: #e50914;
    box-shadow: 0 0 8px #e50914;
  }
  50% {
    opacity: 0.5;
    transform: scale(1.3);
    background: #00e676;
    box-shadow: 0 0 10px #00e676;
  }
}

@keyframes liveBadgePulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(229, 9, 20, 0.6);
    border-color: #e50914;
  }
  50% {
    box-shadow: 0 0 14px rgba(0, 230, 118, 0.7);
    border-color: #00e676;
  }
}

@keyframes liveBtnPulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.5);
  }
  50% {
    box-shadow: 0 4px 20px rgba(0, 230, 118, 0.6);
  }
}

/* Right Half of Event Card */
.event-card-right {
  padding: 24px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
}

.event-fighters-box {
  display: flex;
  align-items: stretch;
  position: relative;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.event-fighter-col {
  width: 210px;
  display: flex;
  flex-direction: column;
}

.event-headshot-wrap {
  position: relative;
  height: 240px;
  background: #181a20;
  overflow: hidden;
}

.event-headshot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* SOLID RED 'WIN' BADGE AT BOTTOM RIGHT */
.win-corner-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--ufc-red);
  color: #fff;
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 12px;
  text-transform: uppercase;
  z-index: 5;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5);
}

.win-corner-badge.is-loss,
.stream-win-badge.is-loss {
  background: #454b55;
}

.event-fighter-surname {
  background: #0a0b0d;
  color: #fff;
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.event-vs-divider {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background: #14161a;
  border: 1px solid var(--border-subtle);
  color: #fff;
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 3px;
  z-index: 6;
}

.event-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #555;
  font-size: 11px;
  margin-top: 16px;
  user-select: none;
}

.carousel-arrow {
  cursor: pointer;
  color: #888;
  font-size: 14px;
  padding: 0 4px;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #444;
}

.carousel-dot.active {
  background: #fff;
  transform: scale(1.2);
}

.carousel-arrow:hover {
  color: #fff;
  transform: scale(1.15);
  transition: all 0.15s;
}

.carousel-dot {
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

/* Carousel Track + Slides */
.event-carousel-track {
  width: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.event-carousel-slide {
  display: none;
  animation: slideIn 0.25s ease;
}

.event-carousel-slide.active {
  display: flex;
  justify-content: center;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ==================== 3. VIEW 2: EVENT STREAM VIEW (GÖRSEL 2 & 3) ==================== */
.stream-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 16px;
}

.back-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: #fff;
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.stream-event-header-info {
  text-align: right;
}

.stream-event-brand {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.stream-event-name {
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
}

.stream-event-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.stream-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.stream-meta-sep {
  opacity: 0.35;
}

.ui-meta-svg {
  display: inline-block;
  vertical-align: middle;
  stroke: var(--ufc-red);
  opacity: 0.9;
}

.timer-icon-svg {
  display: inline-block;
  vertical-align: middle;
  stroke: var(--ufc-red);
}

.stream-card-filter {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.filter-tab {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.filter-tab.active {
  background: var(--ufc-red);
  color: #fff;
  border-color: var(--ufc-red);
}

.tab-badge {
  background: rgba(0, 0, 0, 0.4);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

/* Stream Fights List */
.stream-fights-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* 3-Column Stream Match Card (Görsel 2) */
.stream-fight-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--ufc-red);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}

.stream-matchup-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: #000;
}

/* Left & Right Fighter Columns */
.stream-fighter-col {
  display: flex;
  flex-direction: column;
  background: #000;
}

.stream-avatar-wrap {
  position: relative;
  height: 280px;
  background: #14161d;
  overflow: hidden;
}

.stream-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stream-win-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--ufc-red);
  color: #fff;
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 14px;
  text-transform: uppercase;
  z-index: 5;
}

.stream-fighter-name {
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding: 12px 10px 4px;
  background: #0a0b0e;
}

.stream-fighter-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding-bottom: 12px;
  background: #0a0b0e;
}

/* Center Meta Column */
.stream-center-col {
  background: #050608;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.stream-weight-title {
  font-family: var(--font-brand);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold-accent);
  text-transform: uppercase;
  line-height: 1.2;
}

.stream-result-pill {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
  margin-top: 8px;
}

.stream-vs-label {
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 32px 0 16px;
}

.stream-rank-tag {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Bottom Toggle Bar */
.stream-card-footer {
  background: #111216;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}

.stream-expand-btn {
  background: #252830;
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.stream-expand-btn:hover {
  background: var(--ufc-red);
}

.chevron-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.stream-fight-card.expanded .chevron-icon {
  transform: rotate(180deg);
}

/* ==================== 4. EXPANDED STATS ACCORDION (GÖRSEL 3) ==================== */
.stream-stats-accordion {
  display: none;
  background: #090a0d;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  animation: slideDown 0.25s ease;
}

.stream-fight-card.expanded .stream-stats-accordion {
  display: block;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
}

.stats-table tr:nth-child(odd) {
  background: #0c0d12;
}

.stats-table tr:nth-child(even) {
  background: #101217;
}

.stats-table td {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stat-col-left {
  width: 38%;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.stat-col-metric {
  width: 24%;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.stat-col-right {
  width: 38%;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

/* Footer */
.app-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bold {
  font-weight: 700;
  color: #fff;
  margin-right: 8px;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}

.modal-backdrop.open {
  display: flex;
}

.modal-card {
  background: #14161b;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  padding: 24px;
}

/* Hero Fight Card Modal */
.modal-card.fight-card-modal {
  max-width: 820px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9);
  background: #0e0f13;
}

.fight-card-modal .modal-header {
  padding: 20px 24px;
  margin-bottom: 0;
  background: #15161c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fight-card-modal-title-box h2 {
  font-family: var(--font-brand);
  font-size: 21px;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 0 5px 0;
  text-transform: uppercase;
}

.fight-card-modal-meta {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.fight-card-modal-meta span {
  color: #c9cdd4;
}

.fight-card-modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  max-height: calc(88vh - 85px);
}

.fight-card-modal-section-title {
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ufc-red);
  margin: 16px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fight-card-modal-section-title:first-child {
  margin-top: 0;
}

.modal-bouts-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-bout-row {
  display: grid;
  grid-template-columns: 1fr 130px 1fr;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 16px;
  transition: background 0.2s, border-color 0.2s;
}

.modal-bout-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(229, 9, 20, 0.4);
}

.modal-bout-row.is-main-event {
  background: linear-gradient(90deg, rgba(229, 9, 20, 0.08) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(229, 9, 20, 0.08) 100%);
  border-color: rgba(229, 9, 20, 0.35);
  box-shadow: 0 0 15px rgba(229, 9, 20, 0.15);
}

.modal-bout-fighter {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-bout-fighter.left {
  justify-content: flex-end;
  text-align: right;
}

.modal-bout-fighter.right {
  justify-content: flex-start;
  text-align: left;
}

.modal-bout-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #23252b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.modal-bout-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.modal-bout-name {
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-bout-record {
  font-size: 11px;
  color: var(--text-dim);
}

.modal-bout-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.modal-bout-weight {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold-accent);
  margin-bottom: 2px;
  text-align: center;
  line-height: 1.2;
}

.modal-bout-vs {
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 7px;
  border-radius: 3px;
}

.modal-bout-role {
  font-size: 9px;
  color: #ff5252;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 3px;
  letter-spacing: 0.5px;
}

@media (max-width: 640px) {
  .modal-bout-row {
    grid-template-columns: 1fr 70px 1fr;
    padding: 8px 10px;
  }
  .modal-bout-avatar {
    width: 36px;
    height: 36px;
  }
  .modal-bout-name {
    font-size: 12px;
  }
  .modal-bout-record {
    font-size: 10px;
  }
  .modal-bout-weight {
    font-size: 9px;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-header h2 {
  font-family: var(--font-brand);
  font-size: 20px;
}

.close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.code-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.code-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.code-tab.active {
  color: #fff;
  border-bottom-color: var(--ufc-red);
}

.code-box {
  background: #090a0d;
  border-radius: 6px;
  padding: 14px;
  position: relative;
}

.code-box pre {
  color: #a5d6a7;
  font-size: 12px;
  overflow-x: auto;
}

.code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--ufc-red);
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}

/* Loading Box */
.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--ufc-red);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Morph Button Canvas Scaling Helper */
.liquid-inner-surface canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* App Footer */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-top: 1px solid var(--border-subtle);
  background: #050608;
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 60px;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-bold {
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fff;
  text-transform: uppercase;
}

.footer-copy {
  color: var(--text-muted);
  font-size: 12px;
}

.footer-right {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ========================================================================= */
/* 5. COMPREHENSIVE RESPONSIVE DESIGN SYSTEM (TABLET & MOBILE)              */
/* ========================================================================= */

/* ------------------------------------------------------------------------- */
/* 5.1 TABLET BREAKPOINT (769px to 1024px)                                   */
/* ------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Header & Navbar */
  .ufc-header {
    width: calc(100% - 24px);
    margin: 12px auto 20px;
    top: 8px;
  }

  .ufc-navbar-main {
    height: 54px;
    padding: 0 16px;
    grid-template-columns: 1fr auto 1fr;
  }

  .ufc-nav-group.left {
    gap: 8px;
  }

  .ufc-nav-group.left .ufc-link-btn {
    font-size: clamp(9px, 1.05vw, 11px);
    letter-spacing: 0.1px;
    padding: 0 1px;
  }

  .ufc-nav-group.right {
    gap: 12px;
  }

  .ufc-link-btn {
    font-size: 12.5px;
    letter-spacing: 0.8px;
    white-space: nowrap;
    gap: 5px;
    padding: 0 4px;
  }

  .brand-text-logo {
    font-size: 21px;
    letter-spacing: 1.8px;
  }

  .brand-image-logo {
    width: 48px;
    height: 48px;
  }

  .ufc-logo-center {
    padding: 0 14px;
  }

  /* Fullscreen Hero Section */
  .hero-featured-event.full-screen-hero {
    min-height: 580px;
    height: calc(100vh - 90px);
    max-height: 800px;
  }

  .hero-stage-split {
    grid-template-columns: 1fr 1fr;
    height: 100%;
  }

  .hero-standing-fighter-box {
    align-items: flex-end;
    padding-bottom: 0;
    height: 100%;
    z-index: 3;
  }

  .hero-standing-fighter-img {
    height: 58vh;
    max-height: 500px;
  }

  .hero-giant-bg-text {
    font-size: clamp(85px, 14vw, 150px);
    top: 29%;
    transform: scaleY(1.25);
    letter-spacing: 2px;
  }

  .hero-fighter-flag-backdrop {
    width: clamp(520px, 55vw, 780px);
    height: clamp(380px, 42vh, 550px);
    top: 46%;
    transform: translate(-50%, -50%);
    left: 50%;
  }

  .hero-center-showdown-vs {
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hero-athlete-identity {
    bottom: 26px;
    z-index: 10;
  }

  .hero-athlete-identity.left {
    left: 24px;
  }

  .hero-athlete-identity.right {
    right: 24px;
  }

  .hero-identity-name {
    font-size: clamp(18px, 2.6vw, 26px);
  }

  .hero-identity-record {
    font-size: 12px;
  }

  .hero-identity-country {
    font-size: 12px;
  }

  /* Center Showdown VS */
  .ufc-liquid-rim {
    width: 88px;
    height: 88px;
  }

  .vs-aura-canvas {
    width: 240px;
    height: 240px;
  }

  /* Floating Center Broadcast Strip */
  .hero-floating-center {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 780px;
    z-index: 25;
  }

  .hero-meta-row {
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 3px 12px;
    margin-bottom: 4px;
  }

  .hero-headline-strip {
    font-size: clamp(26px, 3.8vw, 42px);
    padding: 3px 16px;
    margin-bottom: 6px;
  }

  .hero-subline-strip {
    font-size: 11px;
    letter-spacing: 1.2px;
    padding: 4px 14px;
    margin-bottom: 10px;
    gap: 8px;
  }

  .hero-floating-action {
    gap: 10px;
  }

  .hero-countdown-pill {
    padding: 5px 14px;
    font-size: 12px;
  }

  .hero-stream-cta-btn {
    padding: 8px 22px;
    font-size: 13px;
  }

  /* Main View & Section Header */
  .main-view {
    padding: 0 20px 48px;
  }

  .section-title-wrapper {
    padding-top: 40px;
    padding-bottom: 24px;
  }

  .giant-headline {
    font-size: clamp(38px, 5vw, 52px);
    line-height: 1.15;
  }

  /* Event Cards */
  .glory-event-card {
    grid-template-columns: 1fr 1fr;
  }

  .event-card-left {
    padding: 26px 24px;
    gap: 10px;
  }

  .event-title-text {
    font-size: 24px;
  }

  .event-weight-title {
    font-size: 19px;
  }

  .results-btn {
    padding: 10px 32px;
    font-size: 14px;
  }

  .event-card-right {
    padding: 20px 18px;
  }

  .event-fighter-col {
    width: 145px;
  }

  .event-headshot-wrap {
    height: 175px;
  }

  .event-fighter-surname {
    font-size: 14px;
    padding: 8px 4px;
  }

  /* Stream View */
  .stream-matchup-row {
    grid-template-columns: 1fr 0.9fr 1fr;
  }

  .stream-avatar-wrap {
    height: 210px;
  }

  .stream-fighter-name {
    font-size: 20px;
    padding: 8px 6px 2px;
  }

  .stream-center-col {
    padding: 14px 8px;
  }

  .stream-weight-title {
    font-size: 18px;
  }

  .stream-vs-label {
    margin: 16px 0 8px;
    font-size: 20px;
  }

  .stats-table td {
    padding: 10px 14px;
    font-size: 13px;
  }

  .stat-col-metric {
    font-size: 11.5px;
  }
}

/* ------------------------------------------------------------------------- */
/* 5.2 MOBILE BREAKPOINT (max-width: 768px)                                  */
/* ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Header & Dual-Row Metallic Navbar */
  .ufc-header {
    width: calc(100% - 16px);
    margin: 8px auto 14px;
    top: 6px;
    border-radius: 4px;
  }

  .ufc-navbar-main {
    display: grid;
    grid-template-areas:
      "logo right"
      "nav nav";
    grid-template-columns: 1fr auto;
    height: auto;
    padding: 7px 10px 5px;
    row-gap: 5px;
  }

  .ufc-logo-center {
    grid-area: logo;
    justify-content: flex-start;
    padding: 0;
    height: 38px;
  }

  .brand-text-logo {
    font-size: 19px;
    letter-spacing: 1.5px;
  }

  .ufc-nav-group.right {
    grid-area: right;
    justify-content: flex-end;
    gap: 8px;
    height: 38px;
  }

  .ufc-nav-group.right .ufc-link-btn {
    font-size: 11.5px;
    letter-spacing: 0.8px;
    gap: 4px;
    padding: 0 4px;
  }

  .org-red-badge {
    width: 11px;
    height: 11px;
  }

  .chevron-mini {
    width: 9px;
    height: 9px;
  }

  .ufc-search-btn {
    padding: 4px;
  }

  .ufc-search-btn svg {
    width: 15px;
    height: 15px;
  }

  .ufc-nav-group.left {
    grid-area: nav;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    border-top: 1px solid rgba(120, 130, 140, 0.35);
    padding-top: 4px;
    height: 38px;
    gap: 2px;
    overflow: hidden;
  }

  .ufc-nav-group.left .ufc-link-btn {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    font-size: clamp(9px, 2.55vw, 11px);
    letter-spacing: 0.25px;
    justify-content: center;
    white-space: nowrap;
    padding: 0 1px;
    gap: 3px;
    overflow: hidden;
    text-align: center;
  }

  .ufc-nav-group.left .ufc-link-btn > span:not(.ufc-active-line):not(.ufc-live-pulse-dot) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ufc-live-pulse-dot {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
  }

  .ufc-active-line {
    bottom: 3px;
    height: 2.5px;
  }

  /* Organizations Dropdown Fixed Modal for Mobile */
  .ufc-dropdown-menu.org-menu-unified {
    position: fixed;
    top: 92px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
    max-height: 75vh;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.15);
  }

  /* Fullscreen Hero Section */
  .hero-featured-event.full-screen-hero {
    min-height: 520px;
    height: calc(100dvh - 100px);
    max-height: calc(100vh - 100px);
    position: relative;
    overflow: hidden;
  }

  .hero-stage-split {
    grid-template-columns: 1fr 1fr;
    height: 100%;
  }

  .hero-split-side {
    height: 100%;
    min-height: 100%;
  }

  .hero-standing-fighter-box {
    align-items: flex-end;
    padding-bottom: 4vh;
    height: 100%;
    z-index: 3;
  }

  .hero-standing-fighter-img {
    height: 58vh;
    max-height: 440px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.95));
  }

  /* GIANT NAME IN BLACK GAP ABOVE HEADS (REFERANS BİREBİR) */
  .hero-giant-bg-text {
    position: absolute;
    top: 24%;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    font-size: clamp(65px, 17.5vw, 105px);
    letter-spacing: 1.5px;
    opacity: 1;
    line-height: 0.85;
    transform: scaleY(1.25);
    transform-origin: center center;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.95);
  }

  /* FLAG BACKDROP DIRECTLY BEHIND THE FIGHTER'S UPPER BODY & NAME */
  .hero-fighter-flag-backdrop {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(380px, 120vw, 600px);
    height: clamp(280px, 45vh, 400px);
    z-index: 1;
  }

  .hero-flag-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.6);
    will-change: transform;
  }

  /* ATHLETE IDENTITY AT BOTTOM (FULLY VISIBLE ON INITIAL LOAD) */
  .hero-athlete-identity {
    bottom: 10px;
    z-index: 10;
    gap: 2px;
  }

  .hero-athlete-identity.left {
    left: 10px;
  }

  .hero-athlete-identity.right {
    right: 10px;
  }

  .hero-identity-name {
    font-size: clamp(14px, 4.2vw, 19px);
    letter-spacing: 0.8px;
    line-height: 1.1;
  }

  .hero-identity-record {
    font-size: 10.5px;
    letter-spacing: 1px;
    line-height: 1.1;
  }

  .hero-identity-country {
    font-size: 10.5px;
    letter-spacing: 1px;
    line-height: 1.1;
    gap: 4px;
  }

  .country-code-badge {
    min-width: 24px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
  }

  /* Center Showdown VS in alignment with chests */
  .hero-center-showdown-vs {
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
  }

  .ufc-liquid-rim {
    width: 68px;
    height: 68px;
    padding: 3px;
  }

  .vs-aura-canvas {
    width: 160px;
    height: 160px;
  }

  /* Floating Center Fight Info Strip */
  .hero-floating-center {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 16px);
    max-width: 100%;
    z-index: 25;
  }

  .hero-meta-row {
    font-size: 9.5px;
    letter-spacing: 1px;
    padding: 2px 8px;
    margin-bottom: 3px;
    gap: 5px;
  }

  .hero-headline-strip {
    font-size: clamp(18px, 5vw, 25px);
    padding: 3px 10px;
    margin-bottom: 3px;
    gap: 6px;
  }

  .hero-vs-word {
    font-size: clamp(12px, 3.2vw, 15px);
    letter-spacing: 1px;
  }

  .hero-subline-strip {
    font-size: 10px;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    margin-bottom: 6px;
    gap: 4px;
  }

  .hero-floating-action {
    gap: 6px;
    justify-content: center;
  }

  .hero-countdown-pill {
    padding: 4px 10px;
    font-size: 10.5px;
    letter-spacing: 0.5px;
  }

  .hero-countdown-pill svg {
    width: 11px;
    height: 11px;
  }

  .hero-stream-cta-btn {
    padding: 6px 14px;
    font-size: 11.5px;
    letter-spacing: 1px;
  }

  .hero-stream-cta-btn svg {
    width: 13px;
    height: 13px;
  }

  /* Main View & Section Header */
  .main-view {
    padding: 0 10px 36px;
  }

  .section-title-wrapper {
    padding-top: 28px;
    padding-bottom: 16px;
  }

  .giant-headline {
    font-size: clamp(24px, 7vw, 32px);
    letter-spacing: 1.2px;
    line-height: 1.15;
    word-break: break-word;
  }

  .events-grid {
    gap: 18px;
  }

  /* Glory Event Cards Single Column Stack */
  .glory-event-card {
    grid-template-columns: 1fr;
  }

  .event-card-left {
    padding: 20px 14px 16px;
    gap: 8px;
    align-items: center;
    text-align: center;
  }

  .event-brand-header {
    justify-content: center;
  }

  .event-date-text {
    justify-content: center;
    font-size: 11px;
  }

  .event-title-text {
    font-size: 21px;
  }

  .event-weight-title {
    font-size: 16px;
    margin-top: 2px;
  }

  .results-btn {
    width: 100%;
    max-width: 260px;
    padding: 11px 20px;
    font-size: 13.5px;
    margin-top: 8px;
  }

  .event-card-right {
    padding: 14px 10px 22px;
  }

  .event-fighters-box {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
  }

  .event-fighter-col {
    width: 50%;
  }

  .event-headshot-wrap {
    height: 150px;
  }

  .event-fighter-surname {
    font-size: 13.5px;
    padding: 8px 4px;
    letter-spacing: 1px;
  }

  .event-vs-divider {
    font-size: 11px;
    padding: 3px 5px;
  }

  .win-corner-badge {
    font-size: 11px;
    padding: 2px 7px;
  }

  /* Stream View */
  .stream-top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .stream-event-header-info {
    text-align: left;
  }

  .stream-event-brand {
    justify-content: flex-start;
  }

  .stream-event-name {
    font-size: 19px;
  }

  .stream-event-meta {
    justify-content: flex-start;
    font-size: 11px;
    gap: 6px;
  }

  .stream-card-filter {
    gap: 6px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .filter-tab {
    padding: 7px 12px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .stream-fights-list {
    gap: 16px;
  }

  /* Compact 3-Column Faceoff Preserved */
  .stream-matchup-row {
    grid-template-columns: 1fr 0.78fr 1fr;
  }

  .stream-avatar-wrap {
    height: 135px;
  }

  .stream-fighter-name {
    font-size: 13.5px;
    padding: 5px 3px 1px;
    letter-spacing: 0.3px;
  }

  .stream-fighter-sub {
    font-size: 9.5px;
    padding-bottom: 5px;
  }

  .stream-center-col {
    padding: 6px 3px;
  }

  .stream-weight-title {
    font-size: 12px;
  }

  .stream-result-pill {
    font-size: 8.5px;
    padding: 2px 5px;
    margin-top: 3px;
  }

  .stream-vs-label {
    margin: 6px 0 2px;
    font-size: 14px;
  }

  .stream-rank-tag {
    font-size: 10px;
  }

  .stream-win-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  /* Stream Stats Table */
  .stats-table td {
    padding: 7px 4px;
    font-size: 11px;
  }

  .stat-col-left {
    font-size: 11.5px;
  }

  .stat-col-metric {
    font-size: 9.5px;
  }

  .stat-col-right {
    font-size: 11.5px;
  }

  /* Footer */
  .app-footer {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 14px;
    margin-top: 32px;
  }

  .footer-left {
    justify-content: center;
    text-align: center;
    gap: 6px;
    flex-direction: column;
  }

  .footer-right {
    text-align: center;
  }
}

/* ------------------------------------------------------------------------- */
/* 5.3 EXTRA SMALL MOBILE BREAKPOINT (max-width: 420px)                     */
/* ------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .ufc-nav-group.left .ufc-link-btn {
    font-size: clamp(8px, 2.35vw, 9.5px);
    letter-spacing: 0;
    gap: 2px;
  }

  .ufc-nav-group.left {
    height: 36px;
  }

  .brand-text-logo {
    font-size: 17px;
    letter-spacing: 1px;
  }

  .hero-standing-fighter-box {
    padding-bottom: 4vh;
  }

  .hero-standing-fighter-img {
    height: 56vh;
    max-height: 400px;
  }

  .hero-giant-bg-text {
    font-size: clamp(55px, 16vw, 75px);
    top: 24%;
    transform: scaleY(1.25);
  }

  .hero-athlete-identity {
    bottom: 8px;
  }

  .hero-headline-strip {
    font-size: 17px;
  }

  .hero-subline-strip {
    font-size: 9px;
    padding: 2px 6px;
  }

  .stream-avatar-wrap {
    height: 115px;
  }

  .stream-fighter-name {
    font-size: 12px;
  }

  .stream-weight-title {
    font-size: 11px;
  }

  .stream-vs-label {
    font-size: 12px;
    margin: 4px 0 2px;
  }
}