/* İlk Maç Skoru (İMS) - MOBIL-FIRST */
.previous-leg-score{font-size:0.75em;/* Mobil temel */ font-weight:600;text-align:center;color:#1976d2;margin-top:6px;margin-bottom:2px;padding:3px 6px;background:linear-gradient(135deg, rgba(25, 118, 210, 0.08), rgba(25, 118, 210, 0.04));border-left:2px solid #1976d2;border-radius:4px;letter-spacing:0.3px;}
/* Toplam Skor (TOP) - MOBIL-FIRST */
.total-score {
    font-size: 0.75em;          /* Mobil temel */


    /* --- SOFASCORE CANVAS 2D MIMARISI: MODERN CSS --- */

    /* Light Mode (Default) */
    :root{/* Momentum Bar Colors */ --momentum-home-color:rgba(0, 180, 0, 0.7);/* Green for home */ --momentum-away-color:rgba(0, 0, 200, 0.7);/* Blue for away */ /* Grid Lines */ --grid-line-major-color:rgba(0, 0, 0, 0.4);/* HT/FT lines */ --grid-line-minor-color:rgba(0, 0, 0, 0.15);/* Minor grid */ /* Background & Text */ --chart-bg:white;--chart-border:#ddd;--text-primary:#333;--text-secondary:#666;--grid-bg:rgba(0, 0, 0, 0.02);/* Event Icons */ --icon-background:rgba(255, 255, 255, 0.8);--icon-text:#666;}
   :root.dark-mode{--momentum-home-color:rgba(76, 255, 76, 0.8);/* Bright Green for home */ --momentum-away-color:rgba(100, 150, 255, 0.8);/* Bright Blue for away */ --grid-line-major-color:rgba(255, 255, 255, 0.3);--grid-line-minor-color:rgba(255, 255, 255, 0.1);--chart-bg:#1e1e1e;--chart-border:#444;--text-primary:#e0e0e0;--text-secondary:#aaa;--grid-bg:rgba(255, 255, 255, 0.02);--icon-background:rgba(30, 30, 30, 0.9);--icon-text:#ddd;}
   @media (prefers-color-scheme: dark) {
        :root:not(.light-mode){--momentum-home-color:rgba(76, 255, 76, 0.8);--momentum-away-color:rgba(100, 150, 255, 0.8);--grid-line-major-color:rgba(255, 255, 255, 0.3);--grid-line-minor-color:rgba(255, 255, 255, 0.1);--chart-bg:#1e1e1e;--chart-border:#444;--text-primary:#e0e0e0;--text-secondary:#aaa;--grid-bg:rgba(255, 255, 255, 0.02);--icon-background:rgba(30, 30, 30, 0.9);--icon-text:#ddd;}
  }

    #attack-momentum-chart{position:relative;width:100%;height:300px;background:var(--chart-bg);border:1px solid var(--chart-border);border-radius:8px;overflow:hidden;transition:background 0.3s ease;}
   #momentum-canvas{display:block;width:100%;height:100%;}
   .incident-icons-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
   .incident-icon{position:absolute;font-size:16px;cursor:pointer;pointer-events:auto;transform:translate(-50%, -50%);z-index:10;transition:transform 0.2s ease;}
   .incident-icon:hover{transform:translate(-50%, -50%) scale(1.2);}
   .incident-badge{position:absolute;font-size:10px;color:var(--icon-text);background:var(--icon-background);padding:2px 4px;border-radius:3px;transform:translate(-50%, -50%);z-index:9;}
   .team-logos{position:absolute;left:5px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;z-index:5;}
   .team-logos .logo{width:24px;height:24px;object-fit:contain;}
   @media(max-width:768px){
        #attack-momentum-chart{height:200px;}
      .incident-icon{font-size:24px;}
      .team-logos .logo{width:20px;height:20px;}
  }

    @media(min-width:769px) and (max-width:1199px){
        #attack-momentum-chart{height:250px;}
      .incident-icon{font-size:20px;}
      .team-logos .logo{width:22px;height:22px;}
  }

    @media(min-width:1200px){
        #attack-momentum-chart{height:300px;}
      .incident-icon{font-size:16px;}
      .team-logos .logo{width:24px;height:24px;}
  }
    background-color: #f8f8f8;
}

.container{display:flex;max-width:1200px;margin:0 auto;padding:20px;flex-wrap:wrap;}
#live-scores{flex:1;padding:10px;background-color:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1);margin-right:0px;margin-bottom:20px;max-width:60%;}
@media(min-width:1025px){
    #live-scores{max-width:52.5%;}
  
    /* Desktop match details - ensure content fits on screen */
    #match-details{max-height:calc(100vh - 100px);/* Viewport height - margins */}
}

@media(max-width:768px){
    #live-scores{max-width:100%;}
}

#match-details{border:1px solid #ddd;border-radius:8px;padding:20px;background-color:#fff;position:fixed;right:20px;width:40%;overflow-y:auto;box-shadow:0 2px 4px rgba(0,0,0,0.1);z-index:1000;top:260px;/* ← Default value;JS overrides per scroll */ opacity:1;visibility:visible;transform:translateX(0) scale(1);transition:opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;will-change:opacity, transform;}
/* FIX: Empty match-details card on initial load */
/* When empty (no content), hide the card. Script will show it when details load. */
#match-details:empty{opacity:0;visibility:hidden;pointer-events:none;}
/* Closed state */
#match-details.detail-closed{opacity:0;visibility:hidden;transform:translateX(100%) scale(0.95);pointer-events:none;}
/* M2: Touch swipe handler styling */
#match-details{touch-action:none;/* Enable custom touch handling */ transition:none;/* Disable CSS transitions during swipe */}
#match-details.swiping{cursor:grabbing;}
@media(max-width:768px){
    #match-details{position:fixed;width:100%;left:0;top:70px;/* Header yüksekliğine göre sabit */ right:0;bottom:0;/* Ekranın en altına kadar uzatmak için */ height:auto;/* height değerini kaldır, top ve bottom ile boyut belirlensin */ max-height:none;/* max-height kısıtlaması kaldır */ margin:0;overflow:auto;padding:10px 10px 0 10px;/* Alt padding kaldırıldı */ box-sizing:border-box;background:white;box-shadow:0 0 10px rgba(0,0,0,0.1);z-index:1000;/* 9999 yerine 1000 (uygun seviye) - MIN3 FIX:removed !important */ transition:transform 0.3s ease, opacity 0.3s ease;border-radius:0;/* Köşeleri düzleştir */ transform:translateY(0);will-change:transform, opacity;display:flex;/* ← MOBILE FIX:Flexbox for full space utilization */ flex-direction:column;/* ← Stack elements vertically */}
  
    /* Mobile closed state */
    #match-details.detail-closed{transform:translateY(100%);opacity:0;visibility:hidden;}
   /* Sekmeler için scroll yüksekliği güncellemesi */
    .live-scores-match-detail-content .live-scores-tab-content{max-height:calc(100vh - 150px);/* ← MOBILE FIX:More vertical space */ padding-bottom:20px;/* İçeriğin en altında biraz boşluk bırak */ overflow-y:auto;display:flex;flex-direction:column;}
  
    /* M4 REVIZYON: Mobile entrance animation */
    #match-details.entrance-animation{transition:none;/* Override transition to allow animation */ animation:slideUpEntrance 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;}
}

/* Tablet (min-width: 769px and max-width: 1024px) */
@media(min-width:769px) and (max-width:1024px){
    #match-details{padding:12px 12px 0 12px;/* Tablet optimal padding */}
}

/* M4 REVIZYON: Smooth scroll behavior fallback for browsers that don't support scrollIntoView behavior */
html{scroll-behavior:smooth;}
/* M4 REVIZYON: Mobile entrance animation keyframes */
@keyframes slideUpEntrance {
    from{transform:translateY(100%);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}

@media(min-width:992px){
    #match-detail-sidebar{position:fixed;top:70px;/* WordPress menüsünün hemen altına hizalayın */ right:0;width:25%;/* Sidebar genişliğini belirleyin */ height:calc(100% - 70px);/* WordPress menüsünün yüksekliğini çıkarın */ overflow-y:auto;background-color:#fff;box-shadow:-2px 0 5px rgba(0,0,0,0.1);z-index:1000;transition:transform 0.3s ease;transform:translateX(100%);/* Başlangıçta gizli */}
   #match-detail-sidebar.show{transform:translateX(0);/* Gösterildiğinde konumu */}
   #match-detail-sidebar .live-scores-match-detail-header{background-color:#f8f9fa;padding:10px;font-size:18px;font-weight:bold;border-bottom:1px solid #ddd;}
   #match-detail-sidebar .live-scores-back-icon{cursor:pointer;font-size:28px;/* Tablet:keep consistent with mobile */ padding:10px;/* Touch area:48×48px */ top:10px;right:14px;}
}

@media(max-width:991px){
    #match-detail-sidebar{width:100%;height:auto;position:absolute;}
}

.controls-card{display:flex;align-items:center;margin-bottom:20px;}
.switch-menu{display:flex;justify-content:center;align-items:center;margin-right:3px;border:1px solid #ddd;border-radius:20px;width:250px;}
.switch-option{flex:1;text-align:center;padding:3px;cursor:pointer;transition:background-color 0.3s ease, color 0.3s ease;}
.switch-option#all-matches{color:green;font-weight:bold;}
.switch-option#live-matches{color:red;font-weight:bold;}
.switch-option.active{background-color:#e0e0e0;border:1px solid green;border-radius:20px;color:white;}
.date-picker-container{position:relative;display:none;}
.date-picker-container.visible{display:block;}
.date-picker-display{display:flex;justify-content:space-between;align-items:center;padding:10px;border:1px solid #ddd;border-radius:20px;background-color:#fff;cursor:pointer;width:172.5px;text-align:center;}
.date-picker-prev, .date-picker-next{cursor:pointer;padding:0 10px;}
.date-picker-current{flex-grow:1;}
.date-picker{position:absolute;top:100%;left:0;width:100%;background-color:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1);margin-top:5px;z-index:1000;max-height:300px;overflow-y:auto;}
.date-picker-item{padding:10px;text-align:center;cursor:pointer;transition:background-color 0.3s ease, color 0.3s ease;}
.date-picker-item.active{background-color:#007bff;color:#fff;}
.date-picker-item.today{background-color:#ff4136;color:#fff;}
.date-picker-item:hover{background-color:#f0f0f0;}
.hidden{display:none;}
.tournament{margin-bottom:5px;}
.live-scores-tournament-card{display:flex;align-items:center;padding:10px;background-color:#f4f4f4;border:1px solid #ddd;border-radius:8px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);width:100%;height:40px;}
/* Maç listesi için özel kırmızı kart ikonu tanımı */
.match-list-red-card-icon{color:#e53935;margin-left:5px;font-size:14px;vertical-align:middle;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));transition:transform 0.2s ease;}
.match-list-red-card-icon:hover{transform:scale(1.2);}
@media(max-width:768px){
    .live-scores-tournament-card{height:30px;}
}

@media(min-width:769px) and (max-width:1024px){
    .live-scores-tournament-card{height:35px;}
}

@media(min-width:1025px){
    .live-scores-tournament-card{height:40px;}
}

.live-scores-tournament-flag{width:24px;height:24px;margin-right:10px;vertical-align:middle;margin-bottom:0 !important;}
.live-scores-tournament-title{font-size:14px;font-weight:bold;vertical-align:middle;}
/* Takım isimleri için genel stil */
.live-scores-name, .team-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Turnuva isimleri için genel stil */
.live-scores-tournament-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Küçük ekranlar için özel stiller */
@media(max-width:768px){
    .live-scores-name, .team-name{max-width:150px;/* uygun gördüğünüz bir değer */}
   .live-scores-tournament-title{max-width:280px;/* uygun gördüğünüz bir değer */}
}

.live-scores-no-live-events{display:flex;justify-content:center;align-items:center;height:100px;font-size:18px;font-weight:bold;color:#ff0000;text-align:center;}
.live-scores-match, .match-card{display:flex;justify-content:space-between;align-items:center;padding:10px;border:1px solid #ddd;border-radius:8px;margin-bottom:10px;cursor:pointer;/* Optimize edilmiş transition - sadece background-color */ transition:background-color 0.2s ease;background-color:#fff;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);position:relative;height:55px;overflow:hidden;/* GPU acceleration */ transform:translateZ(0);/* Layout değişikliğini önle */ contain:layout style;}
@media(max-width:768px){
    .live-scores-match, .match-card{height:55px;}
}

@media(min-width:769px) and (max-width:1024px){
    .live-scores-match, .match-card{height:50px;}
}

@media(min-width:1025px){
    .live-scores-match, .match-card{height:55px;}
}

.live-scores-match:hover, .match-card:hover{background-color:#f0f0f0;}
.live-scores-time-container, .time-container{display:flex;flex-direction:column;align-items:center;margin-right:12px;}
.live-scores-time, .time{font-weight:bold;font-size:14px;}
.live-scores-minute, .minute{font-size:16px;color:#666;min-width:70px;max-width:110px;display:inline-block;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;/* FIX 8:Dakika display flickering düzeltmesi - smooth transition */ transition:opacity 0.15s ease;}
/* Farklı ekran boyutları için responsive dakika alanı */
@media(max-width:480px){
    .live-scores-minute, .minute{font-size:14px;min-width:60px;/* %10 artırıldı (50px'den 55px'e) */ max-width:100px;/* Genişletildi:text dakika değerleri için */}
}

@media(min-width:481px) and (max-width:768px){
    .live-scores-minute, .minute{font-size:15px;min-width:65px;/* %10 artırıldı (55px'den 60.5px'e) */ max-width:105px;/* Genişletildi:text dakika değerleri için */}
}

/* FIX 8: Dakika update animasyonu - smooth fade effect */
.live-scores-minute.updating, .minute.updating{opacity:0.7;}
.live-scores-teams, .teams{flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;}
.live-scores-team, .team{display:flex;align-items:center;justify-content:space-between;width:100%;}
.team-logo, .match-card .team-logo{width:20px;height:20px;margin-right:5px;margin-bottom:0 !important;}
/* Maç Detay Kartı Takım Logosu - RESPONSIVE SIZING */
/* FIX #3: Optimize logo sizes based on card width & header space */
/* Calculated: Extra-small 44px → Small 48px → Mid 56px → Tablet 75px → Desktop 100px */
.match-details-team-logo{width:44px;/* Extra small phones (< 375px) */ height:44px;margin-bottom:4px;/* Mobile optimal */ margin-top:0;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));transition:transform 0.2s ease, filter 0.2s ease;}
.match-details-team-logo:hover{transform:scale(1.05);filter:drop-shadow(0 4px 8px rgba(0,0,0,0.15));}
/* Small phones (375-480px) */
@media(min-width:375px){
    .match-details-team-logo{width:48px;height:48px;margin-bottom:4px;/* Keep mobile */}
}

/* Large phones (480px+) */
@media(min-width:480px){
    .match-details-team-logo{width:56px;height:56px;margin-bottom:4px;/* Keep mobile */}
}

/* Tablets (769px+) */
@media(min-width:769px){
    .match-details-team-logo{width:75px;height:75px;margin-bottom:5px;/* Tablet */}
}

/* Desktop (1025px+) */
@media(min-width:1025px){
    .match-details-team-logo{width:100px;height:100px;margin-bottom:6px;/* Desktop optimal */}
}

.live-scores-name, .match-card .team-name{font-size:14px;font-weight:500;vertical-align:middle;margin-top:0;}
.match-details-team-name{font-size:14px;font-weight:500;vertical-align:middle;margin-top:5px;margin-bottom:5px;}
.live-scores-score, .match-card .score{font-weight:bold;font-size:12px;flex-shrink:0;text-align:center;margin-left:auto;margin-top:2px;margin-bottom:2px;}
.live-scores-score-card, .match-card .score-card{background-color:#fff;border:1px solid #ddd;border-radius:8px;padding:2px;display:flex;justify-content:center;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,0.1);width:30px;height:calc(100% - 8px);text-align:center;box-sizing:border-box;margin-top:0;margin-bottom:0;}
@media(max-width:768px){
    .live-scores-score-card, .match-card .score-card{width:20px;padding:1px;font-size:12px;height:calc(100% - 6px);margin-top:0;margin-bottom:0;}
  .live-scores-score, .match-card .score{font-size:10px;}
}

@media(min-width:769px) and (max-width:1024px){
    .live-scores-score-card, .match-card .score-card{width:25px;padding:2px;font-size:13px;height:calc(100% - 7px);margin-top:0;margin-bottom:0;}
  .live-scores-score, .match-card .score{font-size:11px;}
}

@media(min-width:1025px){
    .live-scores-score-card, .match-card .score-card{width:30px;padding:2px;font-size:14px;height:calc(100% - 8px);margin-top:0;margin-bottom:0;}
  .live-scores-score, .match-card .score{font-size:12px;}
}

.live-scores-match .fa-chart-simple{margin-right:30px;color:#007bff;font-size:20px;position:absolute;right:15px;top:50%;transform:translateY(-50%);}
.live-scores-match-detail-header{display:flex;/* FIX #8:Semantic header with button + h1 */ align-items:center;gap:12px;/* Spacing between back button and title */ margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #ddd;}
/* Semantic H1 heading */
.live-scores-match-detail-header h1, .live-scores-header-title{font-size:14px;/* Mobile-first base */ font-weight:600;color:#333;margin:0;padding:0;flex:1;/* Take remaining space */}
/* Back button styling */
.live-scores-back-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* Tablet (min-width: 769px) */
@media(min-width:769px){
    .live-scores-match-detail-header h1, .live-scores-header-title{font-size:16px;}
}

/* Desktop (min-width: 1025px) */
@media(min-width:1025px){
    .live-scores-match-detail-header h1, .live-scores-header-title{font-size:18px;}
}

.live-scores-match-detail-content{font-size:14px;/* Mobile-first base */}
/* Tablet (min-width: 769px) */
@media(min-width:769px){
    .live-scores-match-detail-content{font-size:16px;}
}

/* Desktop (min-width: 1025px) */
@media(min-width:1025px){
    .live-scores-match-detail-content{font-size:18px;}
}

.live-scores-menu{display:flex;justify-content:space-around;margin-top:20px;border-top:1px solid #ddd;padding-top:10px;overflow-x:auto;/* Taşan içeriğin kaydırılabilir olmasını sağlar */ -webkit-overflow-scrolling:touch;/* FIX #9:Smooth scroll momentum (iOS) */ white-space:nowrap;/* Metinlerin satır kaydırmasını engeller */ list-style:none;/* FIX #8:Nav element */ scrollbar-width:thin;/* FIX #9:Firefox thin scrollbar */ scrollbar-color:rgba(0,0,0,0.2) transparent;/* FIX #9:Firefox scrollbar color */}
/* FIX #9: Webkit scrollbar styling (Chrome, Safari) */
.live-scores-menu::-webkit-scrollbar{height:6px;}
.live-scores-menu::-webkit-scrollbar-track{background:transparent;}
.live-scores-menu::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.2);border-radius:3px;}
.live-scores-menu::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,0.4);}
.live-scores-menu-item{cursor:pointer;padding:10px 12px;/* FIX #9:8px -> 10px vertical (WCAG AAA) */ font-size:13px;/* Mobile */ border-radius:8px;transition:background-color 0.3s ease;position:relative;white-space:nowrap;/* Tab items stay on one line */ flex-shrink:0;/* Allow horizontal scroll */ background:none;/* FIX #8:Button styling reset */ border:none;color:#333;font-family:inherit;min-height:44px;/* FIX #9:WCAG AAA 44x44 minimum */ display:flex;/* FIX #9:Vertical centering */ align-items:center;justify-content:center;}
/* Tablet */
@media(min-width:769px){
    .live-scores-menu-item{padding:12px 16px;/* FIX #9:10px -> 12px vertical */ font-size:14px;/* Tablet */ min-height:48px;/* FIX #9:WCAG AAA 48x48 optimal */}
}

/* Desktop */
@media(min-width:1025px){
    .live-scores-menu-item{padding:12px 20px;/* FIX #9:10px -> 12px vertical */ font-size:16px;/* Desktop original */ min-height:48px;/* FIX #9:Maintained 48px */}
}

.live-scores-menu-item:hover{background-color:#f0f0f0;}
.live-scores-menu-item:focus{outline:2px solid #1e88e5;/* FIX #8:Keyboard focus visible */ outline-offset:2px;}
.live-scores-menu-item[aria-selected="true"]{background-color:#f5f7fa;color:#1e88e5;font-weight:600;}
.live-scores-menu-item[aria-selected="true"]::after{content:'';position:absolute;bottom:-2px;left:25%;width:50%;height:3px;background-color:#1e88e5;border-radius:3px;}
.live-scores-tab-content{display:none;padding-top:10px;animation:fadeOut 0.3s ease-in-out forwards;}
.live-scores-active{display:block;animation:fadeIn 0.3s ease-in-out forwards;}
@keyframes fadeIn {
    from{opacity:0;}
  to{opacity:1;}
}

@keyframes fadeOut {
    from{opacity:1;}
  to{opacity:0;}
}

.live-scores-lineup-card{margin-top:20px;padding:15px;background-color:#f9f9f9;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);position:relative;}
.live-scores-lineup-card h3{margin-top:0;}
.live-scores-saha-image-container{position:relative;width:100%;height:auto;}
.live-scores-saha-image{width:100%;height:auto;max-height:400px;object-fit:contain;display:block;margin-top:0;}
.live-scores-saha-image-container::before{content:'111';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:white;font-size:2em;font-weight:bold;text-shadow:2px 2px 4px rgba(0,0,0,0.5);pointer-events:none;}
@media(max-width:768px){
    .container{flex-direction:column;padding:10px;}
  .live-scores-match, .match-card{max-width:100%;}
}

.live-scores-match-card{display:flex;justify-content:space-between;align-items:center;padding:12px;/* Mobile base */ background:linear-gradient(145deg, #ffffff, #f9f9f9);border:none;border-radius:16px;margin-bottom:10px;box-shadow:0 10px 25px rgba(0,0,0,0.07);transition:transform 0.3s ease, box-shadow 0.3s ease;/* GPU acceleration */ transform:translateZ(0);will-change:transform;}
.live-scores-match-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,0.1);}
/* Tablet */
@media(min-width:769px) and (max-width:1024px){
    .live-scores-match-card{padding:16px;/* Tablet padding */}
}

/* Desktop */
@media(min-width:1025px){
    .live-scores-match-card{padding:20px;/* Desktop original */}
}

.live-scores-match-card .live-scores-team{display:flex;flex-direction:column;align-items:center;margin-bottom:6px;/* Mobile base */}
/* Tablet */
@media(min-width:769px){
    .live-scores-match-card .live-scores-team{margin-bottom:8px;/* Tablet */}
}

/* Desktop */
@media(min-width:1025px){
    .live-scores-match-card .live-scores-team{margin-bottom:10px;/* Desktop */}
}

.live-scores-match-card .live-scores-team-name{font-weight:600;font-size:14px;margin-bottom:3px;text-align:center;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#212121;position:relative;display:inline-block;}
.live-scores-team-name:hover:after{content:attr(title);position:absolute;left:50%;transform:translateX(-50%);bottom:-25px;background-color:rgba(0,0,0,0.8);color:white;padding:5px 10px;border-radius:5px;font-size:12px;white-space:nowrap;z-index:1000;opacity:0;animation:fadeIn 0.3s forwards;}
@keyframes fadeIn {
    0%{opacity:0;}
  100%{opacity:1;}
}

    100%{opacity:1;}}

/* Takım Skoru - MOBIL-FIRST */
.live-scores-match-card .live-scores-team-score{  font-size: 32px;        /* Mobil temel - increased from 28px */
    font-weight: 700;
    color: #212121;
    text-shadow: 0 1px 2px rgba(0,0,0,0.05);
    line-height: inherit;
}

/* Small phones (max 480px) */
@media(max-width:480px){  .live-scores-match-card .live-scores-team-score{font-size:28px;/* Keep smaller for very small screens */}}

/* Tablet+ */
@media(min-width:769px){  .live-scores-match-card .live-scores-team-score{font-size:30px;}}

/* Desktop */
@media(min-width:1025px){  .live-scores-match-card .live-scores-team-score{font-size:36px;}}

/* Maç zamanı - MOBIL-FIRST */
.live-scores-match-card .live-scores-match-time{  font-size: 18px;          /* Mobil temel - slightly reduced to fit better */
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
    flex: 1;
    padding: 4px 6px;
    background-color: #f5f7fa;
    border-radius: 12px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Small phones (max 480px) */
@media(max-width:480px){  .live-scores-match-card .live-scores-match-time{font-size:16px;padding:3px 5px;min-height:28px;}}

/* Tablet+ */
@media(min-width:769px){  .live-scores-match-card .live-scores-match-time{font-size:22px;padding:6px 8px;margin-top:10px;}}

/* Desktop */
@media(min-width:1025px){  .live-scores-match-card .live-scores-match-time{font-size:24px;padding:6px 8px;margin-top:10px;}}

.live-scores-back-icon{  font-size: 28px;          /* Mobile optimal */
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 1001;
    padding: 8px;             /* Touch area: 44×44px */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.live-scores-back-icon:hover{  color: #666;
    transform: scale(1.05);   /* Subtle scale on hover */
}

.live-scores-back-icon:active{  transform: scale(0.95);   /* Press feedback */
}

/* Desktop tab content - allow full scroll */
@media(min-width:1025px){  .live-scores-match-detail-content .live-scores-tab-content{max-height:none;overflow-y:visible;}}

/* Mobile/Tablet tab content - allow full scroll */
@media(max-width:1024px){  .live-scores-match-detail-content .live-scores-tab-content{max-height:calc(100vh - 200px);/* ← MOBILE FIX:Use more screen space */ overflow-y:auto;display:flex;flex-direction:column;flex-grow:1;/* ← MOBILE FIX:Expand to fill available space */}
  
    .live-scores-match-detail-content{display:flex;/* ← MOBILE FIX:Flexbox layout */ flex-direction:column;flex-grow:1;/* ← Expand to fill space */}}

@media(min-width:769px){  #match-details{top:250px;/* Varsayılan başlangıç yüksekliği */ position:fixed;right:20px;width:40%;max-height:calc(100% - 100px);/* Sayfanın tepesinden 100px boşluk bırak */ overflow-y:auto;z-index:1000;}}

@media(max-width:768px){  .live-scores-match, .match-card{width:100%;}}

.live-scores-lineup-card{  display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.live-scores-lineup-card .live-scores-saha-image{  width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    display: block;
    margin-top: 0;
}

.live-scores-lineup-card .live-scores-saha-image-container::before{  content: '111';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    pointer-events: none;
}

.live-scores-lineup-card .live-scores-content{  margin-top: 20px;
}

.live-scores-lineup-card-wrapper{  display: flex;
    justify-content: space-between;
    gap: 20px;
}

.live-scores-lineup-card{  width: 48%;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

.live-scores-lineup-card h3{  margin-top: 0;
    margin-bottom: 10px;
}

.live-scores-lineup-card ul{  list-style-type: none;
    padding: 0;
}

.live-scores-lineup-card ul li{  padding: 5px 0;
    border-bottom: 1px solid #ddd;
}

.live-scores-lineup-card ul li:last-child{  border-bottom: none;
}

.live-scores-statistics-content{  margin-top: 20px;
}

.live-scores-stat-row{  display: flex;
    align-items: center;
    margin-bottom: 24px; /* Daha fazla boşluk */
    justify-content: space-between;
    position: relative;
    flex-direction: column;
    padding: 0 5px; /* Yanlarda biraz boşluk */
}

.live-scores-stat-label{  width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    position: absolute;
    top: -10px;
    margin-bottom: 5px;
    letter-spacing: 0.2px;
    font-family: 'Roboto', Arial, sans-serif;
}

@media(max-width:480px){  .live-scores-stat-label{font-size:12px;}}

@media(min-width:481px) and (max-width:768px){  .live-scores-stat-label{font-size:13px;}}

.live-scores-stat-bar-container{  flex-grow: 1;
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    height: 10px; /* Biraz daha kalın */
    width: 100%;
    margin-top: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); /* İç gölge */
}

@media(max-width:480px){  .live-scores-stat-bar-container{height:12px;/* Mobile:daha kolay tıklanabilir */}}

@media(min-width:481px) and (max-width:768px){  .live-scores-stat-bar-container{height:11px;/* Tablet:medium yükseklik */}}

.live-scores-stat-bar{  height: 100%;
    position: relative;
    transition: width 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.live-scores-stat-bar.home{  background: linear-gradient(to right, #1E88E5, #64B5F6);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.live-scores-stat-bar.away{  background: linear-gradient(to right, #E53935, #EF9A9A);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.live-scores-stat-value{  position: absolute;
    font-size: 14px;
    color: #fff;
}

.live-scores-stat-value.home{  left: 0;
    background-color: #1E88E5;
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.live-scores-stat-value.away{  right: 0;
    background-color: #E53935;
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* CANLI yazısı için optimize edilmiş stiller - DOM güncelleme problemini çözmek için */
.match-status{  display: inline-block;
    min-width: 50px;
    max-width: 140px; /* Flexible width - Türkçe metinler için (Başlamadı, Ertelendi) */
    text-align: center;
    font-weight: bold;
    padding: 2px 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Mobile optimization for match-status */
@media(max-width:480px){  .match-status{max-width:120px;/* Smaller max-width for very small phones */ font-size:0.9em;/* Slightly smaller font */ padding:2px 3px;/* Tighter padding */}}

/* Tablet optimization */
@media(min-width:481px) and (max-width:768px){  .match-status{max-width:130px;font-size:0.95em;padding:2px 4px;}}

.match-status{  border-radius: 4px;
    box-sizing: border-box;
    /* Kritik: Auto boyut - esnek layout */
    height: auto;
    line-height: 1.3;
    /* GPU acceleration için transform kullan */
    transform: translateZ(0);
    will-change: opacity;
    /* Layout thrashing'ı önle */
    contain: layout style paint;
}

.match-status-live{  background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
    /* Animasyon yerine sabit stil - performans için */
    opacity: 1;
}

.match-status-notstarted{  background-color: rgba(108, 117, 125, 0.1);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.match-status-finished{  background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.match-status-postponed{  background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* Live indicator - optimize edilmiş animasyon */
.live-indicator{  display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #dc3545;
    margin-left: 4px;
    vertical-align: middle;
    /* GPU acceleration */
    transform: translateZ(0);
    /* Performanslı animasyon - sadece opacity değişimi */
    animation: liveBlinking 2s infinite ease-in-out;
    /* Layout değişikliğini önle */
    will-change: opacity;
    contain: layout;
}

/* Optimize edilmiş blinking animasyonu - sadece opacity */
@keyframes liveBlinking{  0%, 50%{opacity:1;}
  51%, 100%{opacity:0.3;}}

/* Uzatma dakikası için stil */
.extra-time{  font-size: 0.8em;
    position: relative;
    top: -0.3em;
    color: #ff4136; /* Uzatma dakikasını kırmızı renkte göster */
    font-weight: bold;
}

/* Optimize edilmiş blinking quote - DOM güncelleme problemini çözmek için */
.blinking-quote{  color: #3a6e3e;
    /* GPU acceleration için */
    transform: translateZ(0);
    will-change: opacity;
    /* Performanslı animasyon - sadece opacity değişimi */
    animation: blinkingText 1.5s infinite ease-in-out;
    /* Layout değişikliğini önle */
    contain: layout;
}

@keyframes blinkingText{  0%, 40%{opacity:1;}
  41%, 100%{opacity:0.4;}}

/* Uzatma dakikasında geçen süre gösterimi için stil */
.extra-time-elapsed{  font-size: 0.7em;
    margin-top: 2px;
    color: #999;
    display: block;
    text-align: center;
    font-weight: normal;
}

.live-scores-tournament-card .live-scores-tournament-flag{  margin-bottom: 0 !important;
}

.place-holder{  display: inline-block;
    width: 30px;
    height: 1px;
    margin-left: auto;
}

#momentumChart{  width: 100%;
    height: 200px;
}

.lineup-field-image-container{  width: 100%;
    height: auto;
    position: relative;
}

.lineup-field-image{  width: 100%;
    height: auto;
}

.home-team-players .player, .away-team-players .player{  position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
}

.player.clickable-player{  cursor: pointer; /* Tıklanabilir olduğunu göstermek için imleç */
    position: absolute; /* Konumlandırma için gerekli */
    z-index: 100; /* Diğer elementlerin üzerinde olması için yüksek bir değer */
}

/* Yedek oyuncular için de tıklanabilir imleç */
.substitute-player.clickable-player{  cursor: pointer; /* Tıklanabilir olduğunu göstermek için imleç */
}

/* Tüm yedek oyuncular için tıklanabilir stil */
.substitute-player{  cursor: pointer; /* Yedek oyuncuların tıklanabilir olduğunu göstermek için imleç */
}

/* Tüm alt elemanlar için tıklama olaylarını geçir */
.player.clickable-player *,
.substitute-player.clickable-player *,
.substitute-player *{  pointer-events: none;
}

/* Tıklanabilirlik için player-jersey resminin görünür olduğundan emin ol */
.player-jersey{  width: 50px; /* Forma görselinin genişliği */
    height: auto;
    pointer-events: auto !important; /* Resimin tıklanabilir olmasını sağla */
}

.player-number{  display: block;
    font-size: 18px; /* Forma numarasının yazı boyutu */
    font-weight: bold;
    margin-top: -50px; /* Forma numarası ile forma görseli arasındaki mesafe */
    pointer-events: none; /* Tıklama olaylarını geçirmesini sağla */
    z-index: 1; /* Forma görselinin altında kalmalı */
}

.player-name{  display: block;
    text-align: center;
	color: #ffffff; /* Beyaz yazı rengi */
    font-size: 12px; /* Oyuncu isminin yazı boyutu */
    margin-top: 20px;
    max-width: 85px; /* Maksimum genişlik */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none; /* Tıklama olaylarını geçirmesini sağla */
    z-index: 1; /* Forma görselinin altında kalmalı */
}

/* Rating ve Substitution ikonları için pointer-events ve z-index */
.player-rating, .substitution-icon{  pointer-events: none; /* Tıklama olaylarını geçirmesini sağla */
    z-index: 1; /* Forma görselinin altında kalmalı */
}


@media only screen and (max-width: 600px){  .lineup-field-image-container{width:100%;}}

@media(max-width:768px){  .lineup-field-image{width:calc(100% - 6px);}}

@keyframes flashGoal{  0%, 20%, 40%, 60%, 80%, 100%{background-color:inherit;}
  10%, 30%, 50%, 70%, 90%{background-color:#3a6e3e;}}

@keyframes flashCancel{  0%, 20%, 40%, 60%, 80%, 100%{background-color:inherit;}
  10%, 30%, 50%, 70%, 90%{background-color:#ff4136;}}

.flash-goal{  animation: flashGoal 3s steps(1, end);
    border-radius: 5px;
    transition: background-color 0.3s ease;
    /* GPU acceleration */
    transform: translateZ(0);
}

.flash-cancel{  animation: flashCancel 3s steps(1, end);
    border-radius: 5px;
    transition: background-color 0.3s ease;
    /* GPU acceleration */
    transform: translateZ(0);
}

.flash-goal, .flash-cancel{  will-change: background-color;
    position: relative;
    z-index: 10;
}

/* Box-shadow sadece animasyon sırasında - performans için */
.flash-goal.animating, .flash-cancel.animating{  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.var-icon{  color: #1976d2;                        /* ← UI/UX FIX: Consistent blue */
}

.penalty-goal-icon{  color: #4caf50;                        /* ← UI/UX FIX: Consistent green */
}

.own-goal-icon{  color: #d32f2f;                        /* ← UI/UX FIX: Consistent red */
}

.qualified-icon{  font-size: 16px;                       /* Level 1: Status icons - Mobile */
    color: #28a745;                        /* Green: Team qualified */
    margin-left: 4px;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    transition: transform 0.2s ease;
}

.qualified-icon:hover{  transform: scale(1.15);
}

/* Responsive: Qualified Icon */
@media(min-width:769px) and (max-width:1024px){  .qualified-icon{font-size:18px;/* Level 1:Tablet */}}

@media(min-width:1025px){  .qualified-icon{font-size:20px;/* Level 1:Desktop */}}

.goal-icon{  color: #4caf50;                        /* ← UI/UX FIX: Added explicit green */
}

.yellow-card-icon{  color: #fbc02d;                        /* ← UI/UX FIX: Consistent yellow */
    margin-left: 5px;
    font-size: 16px;                       /* Level 2: Small cards - Mobile */
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    transition: transform 0.2s ease;
}

.yellow-card-icon:hover{  transform: scale(1.2);
}

/* Responsive: Yellow Card */
@media(min-width:769px) and (max-width:1024px){  .yellow-card-icon{font-size:18px;/* Level 2:Tablet */}}

@media(min-width:1025px){  .yellow-card-icon{font-size:20px;/* Level 2:Desktop */}}

.red-card-icon{  color: #c62828;                        /* ← UI/UX FIX: Darker red for contrast */
    margin-left: 5px;
    font-size: 16px;                       /* Level 2: Small cards - Mobile */
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    transition: transform 0.2s ease;
}

.red-card-icon:hover{  transform: scale(1.2);
}

/* Responsive: Red Card */
@media(min-width:769px) and (max-width:1024px){  .red-card-icon{font-size:18px;/* Level 2:Tablet */}}

@media(min-width:1025px){  .red-card-icon{font-size:20px;/* Level 2:Desktop */}}

.penalty-missed-icon{  color: #9e9e9e;                        /* ← UI/UX FIX: Consistent gray */
}

.goalkeeper-save-icon{  color: #ff9800;                        /* ← UI/UX FIX: Added orange */
}

.substitution-icon{  color: #6c757d;
}

.substitution-icon.injury{  color: #c62828;                        /* ← UI/UX FIX: Darker red */
}

.incident-details.home-incident span, .incident-details.away-incident span, .incident-details.general-incident span, .incident-details.home-incident i, .incident-details.away-incident i, .incident-details.general-incident i{  margin-right: 5px;
}

/* ← UI/UX FIX: .incident-time moved outside .incident-details (new semantic HTML) */
.incident-time{  color: #555;                           /* ← UI/UX FIX: Darker color for contrast */
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 700;                      /* ← Consistent font-weight value */
    display: inline-block;
    font-size: 13px;                       /* ← Desktop default */
    margin-right: 12px;                    /* ← Desktop default */
}

/* Old selector compatibility - for any nested .incident-time (if needed) */
.incident-details.home-incident .incident-time, .incident-details.away-incident .incident-time, .incident-details.general-incident .incident-time{  margin-left: 5px;
}

/* Genel olay stili */
.incident{  display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 12px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    font-size: 13px;                       /* ← Desktop default */
}

.incident:hover{  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* ← UI/UX FIX: Focus state for keyboard navigation */
.incident:focus-within{  outline: 2px solid #0066cc;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

.incident:focus-visible{  outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* ← VAR CANCELLATION: Cancelled incident styling */
.incident.cancelled-incident{  background-color: #f0f0f0;
    opacity: 0.7;
    border-left: 3px solid #999;
}

.incident.cancelled-incident .incident-player{  text-decoration: line-through;
    color: #999;
}

.incident-details{  font-size: 13px;                       /* ← Desktop default */
    display: flex;
    align-items: center;
    gap: 6px;                              /* ← Desktop default */
    flex-grow: 1;
    color: #1a1a1a;
    flex-wrap: nowrap;
}

.incident-score{  font-weight: 700;                      /* ← Consistent with incident-time */
    margin-right: 5px;
    flex-shrink: 0;
    color: #d32f2f;                        /* ← Emphasis color */
}

.incident-player{  font-weight: 700;                      /* ← Consistent with incident-time */
    color: #1a1a1a;                        /* ← UI/UX FIX: Darker color */
}

.incident-player-out{  font-weight: 700;                      /* ← Consistent with incident-time */
    color: #c62828;                        /* ← UI/UX FIX: Darker red for contrast */
}

.incident-player-in{  font-weight: 700;                      /* ← Consistent with incident-time */
    color: #1b5e20;                        /* ← UI/UX FIX: Darker green (AAA contrast) */
}

.assist{  font-style: italic;
    color: #555;                           /* ← UI/UX FIX: Better contrast */
    font-size: 12px;
}

/* Ev sahibi olayları */
.home-incident{  display: flex;
    flex-direction: row;
    text-align: left;        /* ← Text aligned LEFT */
    align-items: center;
    justify-content: flex-start;  /* ← Content starts from left */
}

.home-incident .incident-time{  order: -1;  /* Time appears FIRST */
    margin-left: 0;
    margin-right: 8px;
}

.home-incident .incident-details{  flex-grow: 1;
    justify-content: flex-start;
}

/* Deplasman olayları */
.away-incident{  display: flex;
    flex-direction: row;
    text-align: right;       /* ← Text aligned RIGHT */
    align-items: center;
    justify-content: flex-end;  /* ← Content ends at right */
}

.away-incident .incident-time{  order: 1;  /* Time appears LAST */
    margin-left: 8px;
    margin-right: 0;
}

.away-incident .incident-details{  flex-grow: 1;
    justify-content: flex-end;
}

/* Genel olaylar */
.general-incident{  display: flex;
    justify-content: center;
    text-align: center;
}

/* Mobil optimizasyonlar */
@media(max-width:768px){  #match-incidents{grid-template-columns:1fr;gap:0;overflow-y:auto;max-height:calc(100vh - 60px);flex-grow:1;min-height:300px;padding:0;}
  
    .incident{padding:6px 8px;margin-bottom:3px;font-size:11px;min-height:auto;line-height:1.2;background-color:#fafafa;border-radius:0;box-shadow:none;}
  
    /* General incidents - centered */
    .incident.general-incident{display:flex;justify-content:center;align-items:center;text-align:center;background-color:#e0e0e0;padding:6px 8px;margin-bottom:3px;}
  
    .incident.general-incident .incident-details{text-align:center;font-weight:600;color:#333;gap:0;font-size:11px;}
  
    /* Home incidents - left aligned */
    .home-incident{text-align:left;justify-content:flex-start;flex-direction:row;}
  
    /* Away incidents - right aligned */
    .away-incident{text-align:right;justify-content:flex-end;flex-direction:row;}
  
    .incident-details{gap:4px;flex:1;min-width:0;font-size:11px;flex-wrap:nowrap;display:flex;align-items:center;}
  
    .incident-time{font-size:12px;color:#000;}
  
    .home-incident .incident-time{order:-1;margin-right:4px;margin-left:0;}
  
    .away-incident .incident-time{order:1;margin-left:4px;margin-right:0;}
  
    .incident-score{font-size:11px;flex-shrink:0;}
  
    .incident-player, .incident-player-out,
    .incident-player-in{flex-shrink:0;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  
    /* Hide assist on mobile */
    .assist{display:none !important;}
  
    /* Icon sizing */
    .incident i{font-size:12px;flex-shrink:0;}
  
    .fa-futbol, .fa-square,
    .fa-exchange-alt, .fa-times-circle{font-size:12px;}
  
    /* Arrow icon */
    .fa-arrow-right{font-size:9px;margin:0 2px;flex-shrink:0;}}

/* Tablet optimizasyonları (769px - 1024px) */
@media(min-width:769px) and (max-width:1024px){  #match-incidents{grid-template-columns:1fr;gap:0;overflow-y:auto;max-height:calc(100vh - 100px);flex-grow:1;}
  
    .incident{padding:8px;margin-bottom:6px;font-size:12px;flex-wrap:wrap;align-items:center;}
  
    .incident-time{font-size:11px;margin-right:8px;}
  
    .incident-details{font-size:12px;gap:4px;}}

/* Desktop optimizasyonları (1025px+) */
@media(min-width:1025px){  #match-incidents{grid-template-columns:1fr;gap:0;overflow-y:auto;max-height:calc(100vh - 100px);flex-grow:1;}
  
    .incident{padding:12px;margin-bottom:8px;font-size:13px;flex-wrap:wrap;align-items:center;}
  
    .incident-time{font-size:13px;margin-right:8px;}
  
    .incident-details{font-size:13px;gap:6px;}}
}

@media(max-width:479px){
    .incident {
        padding: 6px;
        margin-bottom: 3px;
        font-size: 12px;
    }
    
    .incident-time{      font-size: 11px;
        margin-right: 6px;
    }
    
    .incident-details{      font-size: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .assist{      font-size: 10px;
    }
}

.match-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 18px;
}

.match-details-header .back-button{  cursor: pointer;
    font-size: 24px;
}

.match-details-content{  margin-top: 10px;
}

.match-details-content h3{  font-size: 20px;
    margin-top: 0;
}

.match-details-content p{  margin-bottom: 10px;
}

.match-details-stats{  margin-top: 20px;
}

.match-details-stats .stat{  display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.match-details-stats .stat span{  font-size: 14px;
}

.match-details-lineups{  margin-top: 20px;
}

.match-details-lineups .team{  display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

.match-details-lineups .team img{  width: 30px;
    height: auto;
    margin-right: 10px;
}

.match-details-lineups .team .name{  flex-grow: 1;
    font-size: 16px;
}

.match-details-lineups .team .score{  font-weight: bold;
    font-size: 16px;
}

.incident p{  margin: 0;
    font-size: 14px;
}

#attack-momentum-chart{  display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    flex-direction: column;
}

#attack-momentum-graph-container{  display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    flex-direction: column;
}

/* Veri bulunamadığında gösterilecek mesaj stilini tanımlama */
.no-data-message{  text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin: 10px 0;
    color: #666;
    border: 1px solid #ddd;
}

.no-data-message p{  margin: 0;
    font-size: 14px;
}

/* Canlı maç bulunamadığında gösterilecek mesaj stili */
.live-scores-no-live-events, .live-scores-no-events{  text-align: center;
    padding: 40px 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
    color: #666;
    border: 1px solid #ddd;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5; /* Okunabilirlik için */
}

/* Canlı maç yok mesajı için özel stil */
.live-scores-no-live-events{  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-color: #ffcc80;
    color: #e65100;
    /* Animasyon ekleyelim */
    animation: fadeIn 0.5s ease-in-out;
}

/* Mobil uyumluluk */
@media(max-width:768px){
    .live-scores-no-live-events, .live-scores-no-events {
        padding: 30px 15px;
        font-size: 14px;
        margin: 15px 0;
    }
}

/* Fade-in animasyonu */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to{      opacity: 1;
        transform: translateY(0);
    }
}

.attack-momentum-team-logo {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
}

.attack-momentum-team-logo img{  width: 20px;
    height: 20px;
}

.home-team-logo{  top: 25%;
    left: 5px;
}

.away-team-logo{  bottom: 45%;
    left: 5px;
}

#attack-momentum-graph-canvas{  width: 100%;
    padding-left: 20px;
    margin: 0;
    height: 180px;
    position: relative;
    box-sizing: border-box;
    overflow: visible;  /* Allow incident icons to display outside chart */
    z-index: 1;  /* Lower than icons so icons appear on top */
}

/* Tablet (768px - 1024px) */
@media(max-width:1024px) and (min-width:769px){
    #attack-momentum-graph-canvas {
        height: 160px;
        padding-left: 15px;
        overflow: visible;
    }
}

/* Mobil - Tablet (480px - 768px) */
@media(max-width:768px){
    #attack-momentum-graph-canvas {
        width: calc(100% - 15px);
        height: 35vh;
        min-height: 180px;
        padding-left: 15px;
        overflow: visible;
    }
}

/* Küçük mobil (< 480px) */
@media(max-width:479px){
    #attack-momentum-graph-canvas {
        width: calc(100% - 10px);
        height: 35vh;
        min-height: 160px;
        padding-left: 10px;
        overflow: visible;
    }
}

/* Lejant stil tanımlamaları */
.attack-momentum-legend {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
    flex-wrap: wrap;
}

.legend-item{  display: flex;
    align-items: center;
    margin: 0 10px;
}

.legend-color{  width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 3px;
}

.home-color{  background-color: rgba(0, 180, 0, 0.8);
}

.away-color{  background-color: rgba(0, 0, 200, 0.8);
}

.legend-text{  font-size: 12px;
    color: #666;
}

@media(max-width:768px){
    #attack-momentum-graph-container {
        padding-left: 0;
    }

    .attack-momentum-team-logo{      width: 20px;
        height: 20px;
    }

    .home-team-logo{      top: 25%;
        left: 0px;
    }

    .away-team-logo{      bottom: 45%;
        left: 0px;
    }
    
    .legend-item{      margin: 0 5px;
    }
    
    .legend-text{      font-size: 10px;
    }
}

@media(max-width:480px){
    #attack-momentum-graph-canvas {
        height: 120px;
    }
    
    .attack-momentum-legend{      flex-direction: column;
        align-items: center;
    }
    
    .legend-item{      margin: 3px 0;
    }
}

@media(max-width:768px){
    .date-picker-container {
        max-width: 80%;
        margin: 0 auto; /* Ortalamak için */
    }

    .date-picker-display{      padding: 2px; /* İç boşluğu azaltmak için daha fazla azaltma */
        display: flex;
        justify-content: center; /* Tarih verisini ortalamak için */
        text-align: center; /* Metni ortalamak için */
        width: 100%; /* Tam genişlik */
        box-sizing: border-box; /* İçerik kutusunu hesaba katma */
    }

    .date-picker-prev, .date-picker-next{      padding: 0 5px; /* İç boşluğu azaltmak için */
    }

    .date-picker-current{      flex: 1;
        text-align: center; /* Tarih verisini ortalamak için */
    }
}

/* Maç Listesi Kartı İçin CSS */
.live-scores-team .live-scores-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.live-scores-team .live-scores-name .team-country{  font-size: 12px;
    color: #666;
    margin-left: 5px;
}

.live-scores-team-name, .match-details-team-name{  font-size: 13px;             /* Mobile-first base */
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    position: relative;
    display: inline-block;
    line-height: 1.3;
}

/* Tablet (min-width: 769px) */
@media(min-width:769px){
    .live-scores-team-name, .match-details-team-name {
        font-size: 15px;
        max-width: 200px;
    }
}

/* Desktop (min-width: 1025px) */
@media(min-width:1025px){
    .live-scores-team-name, .match-details-team-name {
        font-size: 16px;
        max-width: 180px;
    }
}

.live-scores-team-name[title]:hover::after, .match-details-team-name[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    margin-top: 5px;
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1010;
    opacity: 0;
    pointer-events: none;
    animation: tooltipFadeIn 0.3s forwards;
}

@keyframes tooltipFadeIn {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
    100%{opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Maç listesi kartı için stil */
.live-scores-team-country {
    font-size: 12px;
    color: gray;
    margin-left: 5px;
}

/* Maç detay kartı için stil */
.match-details-team-country{  display: block;
    font-size: 13px;
    font-weight: 400;
    color: #616161;
    opacity: 0.8;
    margin-top: 3px;
    margin-bottom: 3px;  /* Mobile base */
    letter-spacing: 0.2px;
    font-family: 'Roboto', sans-serif;
}

/* Tablet */
@media(min-width:769px){
    .match-details-team-country {
        margin-bottom: 4px;  /* Tablet */
    }
}

/* Desktop */
@media(min-width:1025px){
    .match-details-team-country {
        margin-bottom: 5px;  /* Desktop */
    }
}

/* Responsive styles for team country and names */
@media(min-width:769px){
    .match-details-team-country {
        font-size: 13px; /* Tablet size */
        margin-top: 3px;
    }
    
    .live-scores-team-name, .match-details-team-name{      max-width: 200px;
        /* More space on tablet for team names */
    }
}

@media(max-width:768px){
    .match-details-team-country {
        font-size: 11px; /* Mobile override for smaller screen */
        margin-top: 2px;
    }
    
    .live-scores-team-name, .match-details-team-name{      max-width: calc(100vw - 140px);
        /* Dinamik width: ekran genişliğinden logoların ve spacing'in uzunluğu çıkarılır */
        /* Example: 375px - 140px (2×logo 48px + padding 20px + score 24px) = 235px */
    }
}

/* İstatistik sekmesi butonları - modern tasarım */
.statistics-period-selection {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    gap: 4px;
}

@media(max-width:480px){
    .statistics-period-selection {
        padding: 8px;
        gap: 6px;
        margin-bottom: 16px;
    }
}

@media(min-width:481px) and (max-width:768px){
    .statistics-period-selection {
        padding: 7px;
        gap: 5px;
    }
}

.statistics-period-selection button {
    background-color: transparent;
    border: none;
    padding: 10px 20px;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    flex: 1;
    font-weight: 500;
    letter-spacing: 0.3px;
    font-family: 'Roboto', Arial, sans-serif;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media(max-width:480px){
    .statistics-period-selection button {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 13px;
    }
}

@media(min-width:481px) and (max-width:768px){
    .statistics-period-selection button {
        min-height: 42px;
        padding: 11px 18px;
        font-size: 13px;
    }
}

.statistics-period-selection button:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}

.statistics-period-selection button.active{  background-color: white;
    color: #1E88E5;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.statistics-period-selection button:focus{  outline: none;
}

.statistics-period-selection button:active{  transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0, 123, 255, 0.3);
}

.live-scores-statistics-content{  padding: 20px;
}

.live-scores-stat-group h4{  background-color: #f3f6fa; /* Daha açık bir arka plan rengi */
    color: #2c3e50; /* Daha modern koyu mavi/gri renk */
    padding: 8px 12px; /* Daha fazla iç boşluk */
    text-align: center;
    margin: 0 0 16px 0;
    border-radius: 8px; /* Yuvarlak köşeler */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* İnce gölge */
    font-size: 16px; /* Yazı boyutu */
    font-weight: 600; /* Kalın yazı tipi */
    font-family: 'Roboto', Arial, sans-serif; /* Modern yazı tipi */
    transition: all 0.3s ease; /* Geçiş efektleri */
    border-left: 3px solid #4285f4; /* Sol kenar çizgisi */
    letter-spacing: 0.3px; /* Harf aralığı */
}

.standings-buttons{  display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.standings-table{  width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.standings-table th, .standings-table td{  padding: 10px;
    text-align: center;
    transition: all 0.2s ease;
}

.standings-table th{  background-color: #f1f3f5;
    padding: 12px 10px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.standings-table td{  border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

/* Zebra çizgili tablo */
.standings-table tbody tr:nth-child(odd){  background-color: #f8f9fa;
}

.standings-table tbody tr:nth-child(even){  background-color: #ffffff;
}

/* Hover efekti */
.standings-table tbody tr:hover{  background-color: #e9ecef;
    transition: background-color 0.2s ease;
}

.standings-table td.team-cell{  text-align: left;
}

.standings-table tbody tr.highlighted-row{  background-color: #e6f3fe; /* Vurgulamak için açık mavi bir renk */
    font-weight: bold;
}

/* Puan durumu tablosu statü renkleri - Lig formatı */
.promotion-champions{  background-color: rgba(46, 204, 113, 0.2);
    border-left: 3px solid #2ecc71;
}

.promotion-champions-qual{  background-color: rgba(39, 174, 96, 0.2);
    border-left: 3px solid #27ae60;
}

.promotion-europa{  background-color: rgba(52, 152, 219, 0.2);
    border-left: 3px solid #3498db;
}

.promotion-conference{  background-color: rgba(41, 128, 185, 0.2);
    border-left: 3px solid #2980b9;
}

.promotion-relegation{  background-color: rgba(231, 76, 60, 0.2);
    border-left: 3px solid #e74c3c;
}

/* Puan durumu tablosu statü renkleri - Turnuva formatı */
.promotion-next-round{  background-color: rgba(46, 204, 113, 0.2); /* açık yeşil (pale green) */
    border-left: 3px solid #2ecc71;
}

.promotion-playoffs{  background-color: rgba(241, 196, 15, 0.2); /* altın sarısı (gold) */
    border-left: 3px solid #f1c40f;
}

.promotion-qualification-playoffs{  background-color: rgba(230, 126, 34, 0.2); /* turuncu (orange) */
    border-left: 3px solid #e67e22;
}

.promotion-qualified{  background-color: rgba(52, 152, 219, 0.2); /* açık gökyüzü mavisi (light sky blue) */
    border-left: 3px solid #3498db;
}

/* Tooltip stili */
.tooltip{  position: relative;
    cursor: help;
}

/* Özel tooltip stili */
.custom-tooltip{  position: fixed;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: normal;
    white-space: nowrap;
    z-index: 9999;
    display: block;
    min-width: 60px;
    text-align: center;
    pointer-events: none; /* Mouse olaylarını alt elemanlarına geçir */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0.9;
}

/* Puan durumu lejant stili */
.standings-legend{  margin-top: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    font-size: 14px;
}

.legend-title{  font-weight: bold;
    margin-bottom: 10px;
}

.legend-items{  display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.legend-item{  display: flex;
    align-items: center;
    margin-right: 10px;
}

.legend-color{  display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border: 1px solid #ddd;
}

.legend-text{  font-size: 13px;
}

@media(max-width:768px){
    .legend-items {
        flex-direction: column;
        gap: 5px;
    }
    
    .legend-item{      margin-right: 0;
        margin-bottom: 5px;
    }
    
    .legend-color{      width: 15px;
        height: 15px;
    }
    
    .legend-text{      font-size: 12px;
    }
}


/* Geniş ekranlar için */
@media screen and (min-width:769px){
    .standings-table {
        display: table;
    }
    .standings-table tbody tr{      display: table-row;
    }
    .standings-table th, .standings-table td{      display: table-cell;
    }
    .standings-table th.position-cell, .standings-table td.position-cell{      width: 5%; /* # sütunu genişliği */
    }
    .standings-table th.team-cell, .standings-table td.team-cell{      width: 35%; /* Takım sütunu genişliği */
        text-align: left;
    }
    .standings-table th.matches-cell, .standings-table td.matches-cell,
    .standings-table th.wins-cell, .standings-table td.wins-cell,
    .standings-table th.draws-cell, .standings-table td.draws-cell,
    .standings-table th.losses-cell, .standings-table td.losses-cell,
    .standings-table th.goals-cell, .standings-table td.goals-cell,
    .standings-table th.points-cell, .standings-table td.points-cell{      width: 9%; /* Diğer sütunların genişlikleri */
    }

    .standings-table th{      font-size: 16px; /* Başlık font büyüklüğü */
        font-weight: bold; /* Başlık font ağırlığı */
    }

    .standings-table td{      font-size: 14px; /* Veri font büyüklüğü */
    }
}

.standings-period-selection {
    text-align: center;
    margin-bottom: 15px;
}

.standings-period-selection button{  background-color: #007bff;
    border: none;
    padding: 10px 20px;
    margin: 0 8px;
    cursor: pointer;
    font-size: 14px;
    color: white;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.standings-period-selection button:hover{  background-color: #0069d9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
}

.standings-period-selection button.active{  background-color: #0056b3;
    font-weight: bold;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 86, 179, 0.5);
}

.standings-period-selection button:focus{  outline: none;
}

.standings-period-selection button:active{  transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0, 123, 255, 0.3);
}

.standings-table td.team-cell img{     vertical-align: middle;
    }

/* Mobil Kart Görünümü Stilleri */
.standings-cards{  display: none; /* Varsayılan olarak gizli, media query ile gösterilecek */
}

.standings-card{  background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
}

.standings-card:hover{  transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.card-position{  width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 10px;
}

.card-team{  display: flex;
    align-items: center;
    flex: 1;
}

.card-team-logo{  width: 30px;
    height: 30px;
    margin-right: 10px;
}

.card-team-name{  font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.card-stats{  min-width: 100px;
    text-align: right;
}

.card-stat{  margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-stat-label{  font-size: 12px;
    color: #6c757d;
    margin-right: 5px;
}

.card-stat-value{  font-weight: 600;
    font-size: 14px;
}

.card-points{  font-size: 20px;
    font-weight: 700;
    color: #007bff;
}

.card-stats-grid{  display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 5px;
}

/* Vurgulanan kartlar için stil */
.highlighted-card{  box-shadow: 0 0 0 2px #4dabf7;
}

/* Küçük ekranlar için */
@media screen and (max-width:768px){
    /* Masaüstündeki tablo görünümünü göster */
    .standings-table {
        display: table !important;
    }
    
    /* Kart görünümünü gizle */
    .standings-cards{      display: none !important;
    }
    
    .standings-table-container{      display: block !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOS'ta daha akıcı kaydırma */
        margin-bottom: 10px;
    }
    
    /* Mobil için tablo görünümünü optimize edelim */
    .standings-table thead th{      padding: 8px 4px;
        font-size: 11px;
    }
    
    .standings-table tbody td{      padding: 8px 4px;
        font-size: 11px;
    }
    
    /* Takım hücresi için özel stil */
    .standings-table .team-cell{      text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }
    
    /* Takım logosunu optimize edelim */
    .standings-table .team-cell img{      width: 16px;
        height: 16px;
        margin-right: 4px;
        vertical-align: middle;
    }
    
    /* Diğer hücreleri sıkıştıralım */
    .standings-table th.matches-cell, .standings-table td.matches-cell,
    .standings-table th.wins-cell, .standings-table td.wins-cell,
    .standings-table th.draws-cell, .standings-table td.draws-cell,
    .standings-table th.losses-cell, .standings-table td.losses-cell,
    .standings-table th.goals-cell, .standings-table td.goals-cell,
    .standings-table th.points-cell, .standings-table td.points-cell{      padding: 4px 2px;
    }
    
    /* Daha iyi bir kontrastlık için zebra çizgisi efektini güçlendirelim */
    .standings-table tbody tr:nth-child(odd){      background-color: #f5f5f5;
    }
    
    /* Vurgulanan satırın her ekran boyutunda tutarlı görünmesini sağlayalım */
    .standings-table tbody tr.highlighted-row{      background-color: #e6f3fe; /* Açık mavi arka plan */
        font-weight: bold;
    }
    
    /* Hücrelerin hizalaması */
    .standings-table td{      text-align: center;
    }
    
    /* Lejant bölümü optimizasyonu */
    .standings-legend{      padding: 8px;
        font-size: 11px;
    }
    
    .legend-title{      font-size: 12px;
        margin-bottom: 5px;
    }
    
    .legend-items{      display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 sütunlu grid */
        gap: 5px;
    }
    
    .legend-item{      margin-right: 0;
        margin-bottom: 5px;
    }
    
    .legend-color{      width: 12px;
        height: 12px;
    }
    
    .legend-text{      font-size: 11px;
    }
}

/* Orta ekranlar için (tablet) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .standings-table {
        width: 100%;
    }
    
    .standings-table th, .standings-table td{      font-size: 12px;
        padding: 8px;
        text-align: center;
    }

    .standings-table th.position-cell, .standings-table td.position-cell{      width: 5%;
    }

    .standings-table th.team-cell, .standings-table td.team-cell{      width: 35%;
        text-align: left;
        vertical-align: middle;
    }

    .standings-table th.matches-cell, .standings-table td.matches-cell,
    .standings-table th.wins-cell, .standings-table td.wins-cell,
    .standings-table th.draws-cell, .standings-table td.draws-cell,
    .standings-table th.losses-cell, .standings-table td.losses-cell,
    .standings-table th.goals-cell, .standings-table td.goals-cell,
    .standings-table th.points-cell, .standings-table td.points-cell{      width: 9%;
    }

    .standings-table td.team-cell{      line-height: 1.5;
    }

    .standings-table td.team-cell img{      width: 20px;
        height: auto;
        margin-right: 3px;
        vertical-align: middle;
    }
}

/* Skor bölümü kontaineri (İMS, Zaman, TOP, PEN) */
.live-scores-match-time-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2px;  /* Skor öğeleri arasında boşluk */
    padding: 4px 0;
}

/* İMS - Üstte */
.previous-leg-score{  order: 1;
}

/* Maç zamanı - Ortada */
.live-scores-match-time{  font-size: 1.2em;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    order: 2;  /* TOP ve İMS'in ortasına yerleştir */
    padding: 2px 4px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mobile optimization for container match-time */
@media(max-width:768px){
    .live-scores-match-time {
        padding: 2px 3px; /* Tighter padding on mobile */
        min-height: 24px; /* Smaller min-height */
    }
}

/* TOP - Zaman altında */
.total-score {
    order: 3;
}

/* PEN - Altta */
.penalties-score{  order: 4;
}

.aggregated-score{  font-size: 0.8em;
    font-weight: normal;
    text-align: center;
    margin-bottom: 5px;
	font-family: Arial, sans-serif;
}

@media(max-width:768px){
    .lineup-field-image-container {
        width: 100%;
        padding: 5px 0; /* Saha görselinin çevresindeki boşluğu azalttık */
    }
    .lineup-field-image{      width: 100%;
        height: auto;
    }
    .home-team-players .player, .away-team-players .player{      transform: translate(-50%, -50%) scale(0.8); /* Ölçeği biraz daha küçülttük */
    }
    .player-jersey{      width: 40px; /* Forma boyutunu daha da küçülttük */
        height: auto;
    }
    .player-number{      font-size: 16px; /* Numara boyutunu küçülttük */
        margin-top: -45px; /* Numarayı formaya daha yakın hale getirdik */
    }
    .player-name{      font-size: 12px; /* İsim boyutunu küçülttük */
        margin-top: 10px; /* İsmi formaya daha yakın hale getirdik */
        max-width: 80px; /* Maksimum genişliği artırdık */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Oyuncu konumlarını optimize etmek için gereksiz transform'ları kaldırdık */
    /* Bunlar zaten position: absolute ile sağlanan oyuncu konumlarını bozuyor */
    /* 
    .home-team-players .player:nth-child(odd),
    .away-team-players .player:nth-child(odd){      transform: translateX(-60%) scale(0.8);
    }
    .home-team-players .player:nth-child(even),
    .away-team-players .player:nth-child(even){      transform: translateX(-40%) scale(0.8);
    }
    */
    /* Rating ve substitution icon için eklenen stiller */
    .player-rating{      bottom: 20px;
        left: -10px;
        font-size: 12px;
        padding: 3px 6px;
    }
.substitution-icon{  position: absolute; /* İkonun doğru şekilde konumlandırılması için ekleniyor */
    bottom: 18px !important; /* Forma görselinin altına yerleştirmek için */
    right: -10px !important;  /* Forma görselinin sağına yerleştirmek için */
    font-size: 16px; /* İkonun boyutunu ayarlayın */
    color: #FF0000; /* Kırmızı renk, isteğe göre değiştirilebilir */
}
}

/* Çok küçük ekranlar için ek optimizasyon */
@media(max-width:480px){
    .player-jersey {
        width: 55px;
    }
    .player-number{      font-size: 20px;
        margin-top: -55px;
    }
    .player-name{      font-size: 18px;
        margin-top: 30px;
        max-width: 100px;
    }
    .home-team-players .player, .away-team-players .player{      transform: translate(-50%, -50%) scale(0.7);
    }
    /* Rating ve substitution icon için eklenen stiller */
    .player-rating{      bottom: 12px;
        left: -10px;
        font-size: 18px;
        padding: 1px 2px;
    }
    .substitution-icon{      font-size: 12px; /* Çok küçük ekranlarda daha küçük ikon */
        bottom: 15px !important;
        right: -3px !important;
    }
}

.stats-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.stats-card i{  font-size: 24px;
    color: #007bff;
}

@media(max-width:768px){
    .stats-card {
        padding: 5px;
        margin-top: 10px;
    }

    .stats-card i{      font-size: 18px;
    }
}
/* Maç ayrıntıları tabı için stiller */
#tab-details {
    display: flex;
    flex-direction: column;
    position: relative; /* Göreceli konumlandırma ekle */
    z-index: 1; /* Z-indeks ekle */
}

#tab-details .tab-section{  width: 100%;
}

#tab-details .top-section{  order: 1;
    margin-bottom: 20px;
}

#tab-details .bottom-section{  order: 2;
}

/* Diğer tablar için stil - Önemli: Ayrıntılar sekmesinin üstüne çıkması için */
.live-scores-tab-content:not(#tab-details){  position: relative;
    z-index: 2;
    background-color: #fff;
}

#tab-details:not(.live-scores-active){  display: none !important;
}

/* ✅ Match Incidents Container */
#match-incidents{  width: 100%;
    display: grid;
    grid-template-columns: 1fr;  /* Single column */
    gap: 0;
}

/* General incidents span full width */
.incident.general-incident{  grid-column: 1;
}

/* Mobile/Tablet: incidents container with optimized scroll */
@media(max-width:1024px){
    #match-incidents {
        overflow-y: auto;
        max-height: calc(100vh - 60px);  /* ← MOBILE FIX: Use almost entire screen height */
        flex-grow: 1;                     /* ← MOBILE FIX: Expand to fill available space */
        min-height: 300px;               /* ← Minimum height safeguard */
    }
    
    /* ← MOBILE FIX: Substitution arrow and player spacing */
    .incident-player-out, .incident-player-in{      display: inline-block;
        max-width: calc(50% - 15px);
        word-break: break-word;
        white-space: normal;
    }
    
    .incident-details.away-incident, .incident-details.home-incident{      flex-wrap: wrap;
        gap: 4px;
    }
}

/* Tablet specific optimization */
@media(max-width:768px){
    #match-incidents {
        max-height: calc(100vh - 50px);  /* ← MOBILE FIX: Maximum screen utilization */
        flex-grow: 1;
    }
}

/* Desktop: incidents container scrolls with parent */
@media(min-width:1025px){
    #match-incidents {
        overflow-y: visible;
        max-height: none;
    }
}

/* Genel stiller */
.team-info-card {
    background-color: #59b200; /* Zemin rengi */
    padding: 2px 5px; /* İç boşlukları azaltıldı */
    margin: 0; /* Kartların arasındaki boşlukları kaldır */
    border-radius: 0; /* Kenarları oval yapmayı kaldır */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    color: #ffffff; /* Yazı rengi beyaz */
    font-family: 'Roboto', sans-serif; /* Yazı tipi */
}

.away-team-info-card{  background-color: #59b200; /* Zemin rengi */
}

.team-info{  display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.team-info .team-name{  font-size: 1em; /* Yazı boyutu azaltıldı */
    font-weight: bold;
    text-align: left; /* Takım ismi sola dayalı */
    width: 50%; /* Yüzde olarak genişlik ayarı */
    display: inline-block;
}

.team-info .team-coach{  font-size: 0.8em;
    text-align: left; /* Teknik direktör bilgisi sola dayalı */
    width: 100%; /* Yüzde olarak genişlik ayarı */
}

.team-info .team-formation{  font-size: 0.8em;
    text-align: right; /* Diziliş bilgisi sağa dayalı */
    width: 50%; /* Yüzde olarak genişlik ayarı */
    display: inline-block;
    position: absolute;
    top: 0;
    right: 5px; /* Sağdan biraz boşluk bıraktık */
    vertical-align: top; /* Üst hizalama */
}

/* Responsive tasarım */
@media(max-width:768px){
    .team-info-card {
        padding: 2px;
        margin: 0; /* Kartların arasındaki boşlukları kaldır */
    }

    .team-info .team-name{      font-size: 0.9em; /* Yazı boyutu azaltıldı */
    }

    .team-info .team-coach, .team-info .team-formation{      font-size: 0.7em;
    }

    .lineup-field-image-container{      margin-top: 0; /* Saha görselinin üst boşluğunu kaldır */
        margin-bottom: 0; /* Saha görselinin alt boşluğunu kaldır */
    }
}

@media(max-width:480px){
    .team-info-card {
        flex-direction: column;
        align-items: center;
        margin: 0; /* Kartların arasındaki boşlukları kaldır */
    }
}

/* Kartlar ve saha görseli arasında boşluk kaldırma */
.lineup-field-image-container {
    margin: 0; /* Saha görselinin tüm boşluklarını kaldır */
}

.home-team-players, .away-team-players{  margin: 0; /* Oyuncu dizilimi ile saha görseli arasındaki boşluğu kaldır */
}

.team-info-card:last-child{  margin-top: 0; /* Alt kart ile saha görseli arasındaki boşluğu kaldır */
}

/* Ek CSS kuralları */
.lineup-field-image-container{  padding: 0; /* İç boşlukları kaldır */
    display: flex;
    flex-direction: column;
}

.home-team-info-card{  margin-bottom: 0; /* Üst kart ile saha görseli arasındaki boşluğu kaldır */
}

.away-team-info-card{  margin-top: 0; /* Saha görseli ile alt kart arasındaki boşluğu kaldır */
}

/* H2H filtreleme butonları için stiller */
.history-buttons{  display: flex;
    justify-content: center;
    margin-bottom: 15px;
    flex-wrap: wrap; /* Mobil için satır atlamasına izin ver */
}

.history-buttons button{  background-color: #007bff;
    border: none;
    padding: 10px 20px;
    margin: 0 8px 8px 8px; /* Alt margin eklendi */
    cursor: pointer;
    font-size: 14px;
    color: white;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
    position: relative;
    overflow: hidden;
    text-align: center; /* Buton içindeki metin ortalandı */
    display: flex;
    align-items: center;
    justify-content: center; /* İçerik ortalandı */
    min-width: 120px; /* Minimum genişlik belirlendi */
}

.history-buttons button:hover{  background-color: #0069d9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
}

.history-buttons button.active{  background-color: #0056b3;
    font-weight: bold;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 86, 179, 0.5);
}

.history-buttons button:focus{  outline: none;
}

.history-buttons button:active{  transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0, 123, 255, 0.3);
}

/* Yeni butonlar için ekstra stiller */
.history-buttons button:focus{  outline: none;
}

.history-buttons button:active{  background-color: #003f7f;
    transform: scale(1.03);
}

@media(max-width:768px){
    .history-buttons button {
        font-size: 12px;
        padding: 8px 16px;
        margin: 0 4px 8px 4px; /* Alt margin korundu */
        min-width: 100px; /* Mobil için daha küçük minimum genişlik */
        flex: 0 0 calc(50% - 8px); /* 2 sütun için boyut hesaplama */
        max-width: calc(50% - 8px);
    }
    
    /* Geçmiş sekme içeriği için padding azaltıldı */
    #history-content{      padding: 10px;
    }
}

@media(min-width:769px) and (max-width:1024px){
    .history-buttons button {
        font-size: 13px;
        padding: 9px 18px;
    }
}

@media(min-width:1025px){
    .history-buttons button {
        font-size: 14px;
        padding: 10px 20px;
    }
}

#history-content {
    padding: 20px;
}

.h2h-content{  display: flex;
    flex-direction: column;
    gap: 5px;
}

.h2h-summary-title{  font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    color: #333;
    padding: 5px 0;
    background-color: #f5f5f5;
    border-radius: 5px;
}

/* Maç Karşılaşma İstatistik Barı */
.match-history-stats{  margin: 5px 0 15px 0;
}

.match-history-stats-bar{  display: flex;
    height: 26px;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    background-color: #f0f0f0;
    margin-bottom: 8px;
}

.match-history-segment{  display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
}

.match-history-segment.home-wins{  background-color: #007bff; /* Mevcut ev sahibi mavi renk */
}

.match-history-segment.draws{  background-color: #FFC107; /* Sarı */
}

.match-history-segment.away-wins{  background-color: #ff4136; /* Mevcut deplasman kırmızı renk */
}

.match-history-stats-legend{  display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.legend-item{  display: flex;
    align-items: center;
}

.match-history-color{  display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 2px;
}

.match-history-color.home-wins{  background-color: #007bff;
}

.match-history-color.draws{  background-color: #FFC107;
}

.match-history-color.away-wins{  background-color: #ff4136;
}

/* Takım performans istatistikleri */
.team-performance-stats{  margin: 5px 0 15px 0;
}

.team-performance-title{  font-size: 15px;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center;
    color: #333;
    padding: 5px 0;
    background-color: #f5f5f5;
    border-radius: 5px;
}

/* Galibiyet, beraberlik ve mağlubiyet renkleri */
.match-history-segment.wins{  background-color: #4CAF50; /* Galibiyet için yeşil */
}

.match-history-segment.losses{  background-color: #F44336; /* Mağlubiyet için kırmızı */
}

/* Mobil için responsive düzenlemeler */
@media(max-width:767px){
    /* Mobil için responsive düzenlemeler */
    .match-history-stats-bar {
        height: 20px;
    }

    .match-history-segment{      font-size: 12px;
    }
    
    .match-history-stats-legend{      flex-direction: column;
        align-items: flex-start;
    }
    
    .legend-item{      margin-bottom: 4px;
    }
    
    .team-performance-title{      font-size: 12px;
    }
    
    .h2h-summary-title{      font-size: 14px;
        padding: 3px 0;
    }
}

.h2h-match-card.match-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    height: 55px;
    overflow: hidden;
}

@media(max-width:768px){
    .h2h-match-card.match-card {
        height: 55px;
    }
}

@media(min-width:769px) and (max-width:1024px){
    .h2h-match-card.match-card {
        height: 50px;
    }
}

@media(min-width:1025px){
    .h2h-match-card.match-card {
        height: 55px;
    }
}

.h2h-match-card.match-card:hover {
    background-color: #f0f0f0;
}

.h2h-time-container.time-container{  display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
}

.h2h-time.time{  font-weight: bold;
    font-size: 14px;
}

.h2h-minute.minute{  font-size: 14px;
    color: #666;
    width: 60px;
    display: inline-block;
    text-align: center;
}

.h2h-teams.teams{  flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.h2h-team.team{  display: flex;
    align-items: center;
}

.h2h-team-logo.team-logo{  width: 20px;
    height: 20px;
    margin-right: 5px;
    margin-bottom: 0 !important;
}

.h2h-team-name.team-name{  font-size: 14px;
    font-weight: 500;
    vertical-align: middle;
    margin-top: 0;
}

.h2h-score-card.score-card{  background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width: 30px;
    height: calc(100% - 8px);
    text-align: center;
    box-sizing: border-box;
    margin-left: auto;
}

@media(max-width:768px){
    .h2h-score-card.score-card {
        width: 20px;
        padding: 1px;
        font-size: 12px;
        height: calc(100% - 6px);
        margin-top: 0;
        margin-bottom: 0;
    }
    .h2h-score.score{      font-size: 10px;
    }
}

@media(min-width:769px) and (max-width:1024px){
    .h2h-score-card.score-card {
        width: 25px;
        padding: 2px;
        font-size: 13px;
        height: calc(100% - 7px);
        margin-top: 0;
        margin-bottom: 0;
    }
    .h2h-score.score{      font-size: 11px;
    }
}

@media(min-width:1025px){
    .h2h-score-card.score-card {
        width: 30px;
        padding: 2px;
        font-size: 14px;
        height: calc(100% - 8px);
        margin-top: 0;
        margin-bottom: 0;
    }
    .h2h-score.score{      font-size: 12px;
    }
}

.h2h-red-card-icon {
    color: #dc3545;
    margin-left: 5px;
    font-size: 14px;
    vertical-align: middle;
}

.h2h-match-card .minute .blinking-quote{  display: none;
}

.h2h-red-card-count{  font-size: 10px; /* Yazı tipi boyutu */
    font-weight: bold; /* Kalın yazı */
    margin-left: 2px; /* Soldan biraz boşluk */
}

/* H2H filtreleme butonları için stiller */
.h2h-filter-buttons{  display: flex;
    justify-content: center;
    margin: 15px 0;
}

.h2h-filter-button{  background-color: #007bff;
    border: none;
    padding: 10px 20px;
    margin: 0 8px;
    cursor: pointer;
    font-size: 14px;
    color: white;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.h2h-filter-button:hover{  background-color: #0069d9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
}

.h2h-filter-button.active{  background-color: #0056b3;
    font-weight: bold;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 86, 179, 0.5);
}

.h2h-filter-button:focus{  outline: none;
}

.h2h-filter-button:active{  transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0, 123, 255, 0.3);
}

/* Mobil görünüm için */
@media(max-width:768px){
    .h2h-filter-button {
        padding: 8px 15px;
        font-size: 12px;
        margin: 0 4px;
    }
}

.custom-h2h-match-card.match-card {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    height: auto;
    overflow: hidden;
}

.custom-h2h-match-card .team{  display: flex;
    align-items: center;
    width: 100%;
}

.custom-h2h-match-card .team-name{  font-size: 14px;
    font-weight: 500;
    width: 40%; /* Kartın %40'ını kapla */
    text-align: left;
}

.custom-h2h-match-card .team-streak{  font-size: 14px;
    font-weight: 500;
    width: 45%; /* Kartın %45'ini kapla */
    text-align: left;
}

.custom-h2h-match-card .streak-value{  font-size: 14px;
    font-weight: 500;
    width: 15%; /* Kartın %15'ini kapla */
    text-align: right; /* Sağ hizalama */
}

.aggregated-score{  font-size: 0.8em;
    color: #888;
}

.live-scores-team .live-scores-score.hidden{  visibility: hidden;
}

.performance-container{  display: flex;
    justify-content: space-between;
    margin-top: 20px;
    flex-wrap: wrap; /* Küçük ekranlarda kartların sarma yapmasına izin verir */
}

.performance-team{  width: 48%;
    margin-bottom: 10px; /* Kartlar arasında dikey boşluk */
}

.performance-card{  margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
    background-color: #f8f8f8;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.performance-card:hover{  transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.performance-card .match-date{  font-size: 12px;
    color: #666;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.performance-card .tournament-name{  font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.performance-card .match-teams{  display: flex;
    flex-direction: column;
    gap: 0px; 
}

.performance-card .team{  display: flex;
    align-items: center;
    margin: 0;
    padding: 0; 
}

.performance-card .team-logo{  width: 20px;
    height: 20px;
    margin-right: 8px;
}

.performance-card .team-name{  flex: 1;
    font-size: 14px;
    text-align: left;
    margin: 0;
    padding: 0;
}

.performance-card .match-score{  font-size: 18px;
    font-weight: bold;
    text-align: right;
    width: 30px;
    margin: 0;
    align-self: center;
}

.performance-card .team-score-row{  display: flex;
    align-items: center;
    justify-content: space-between;
}

.performance-card .team-score-row:first-child{  margin-bottom: 10px;
}

.performance-card .team-score-row:last-child{  margin-top: 5px;
}

.performance-card.win{  background-color: #e6ffe6;
}

.performance-card.loss{  background-color: #ffe6e6;
}

.performance-card.draw{  background-color: #f0f0f0;
}

/* Küçük ekranlar için medya sorgusu */
@media(max-width:767px){
    .performance-container {
        display: flex;
        flex-wrap: wrap;
        gap: 4px; /* Kartlar arasındaki yatay ve dikey boşluk */
        margin: 0; /* Kenarlarda boşluk bırakılmaması için */
    }

    .performance-team{      width: calc(50% - 4px); /* Kart genişliğini %50 yaparken arada 4px boşluk bırakır */
        box-sizing: border-box;
    }

    .performance-card{      margin: 0;
        margin-bottom: 4px; /* Alt alta gelen kartlar arasında dikeyde 4px boşluk */
        padding: 10px;
        box-sizing: border-box; /* Padding'in genişliği etkilememesi için */
    }

    .performance-card .team{      display: flex;
        align-items: center;
        margin: 0; /* Takımlar arasındaki boşluğu kaldırdık */
    }

    .performance-card .team-logo{      width: 20px;
        height: 20px;
        margin-right: 0; /* Logo ile takım ismi arasındaki boşluğu kaldırdık */
    }

    .performance-card .team-name{      flex: 1;
        font-size: 12px;
        text-align: left;
        margin: 0;
        padding: 0; /* Gereksiz iç boşlukları kaldırdık */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .performance-card .match-score{      font-size: 16px; /* Skorun font boyutunu küçülttük */
        text-align: right;
    }

    .performance-card .match-date{      font-size: 12px;
        color: #666;
        margin-bottom: 5px;
        display: block; /* Tarih ve turnuva bilgisini dikey hizalamak için block yapıldı */
    }

    .performance-card .tournament-name{      font-size: 12px;
        color: #888;
        display: block; /* Turnuva ismi küçük ekranlarda tarih altında görünür */
        margin-top: 2px; /* Turnuva ismi ile tarih arasında küçük bir boşluk */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%; /* Genişliğini tam olarak kullan */
    }
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100%{transform: rotate(360deg); }
}

/* Skeleton Loading Animation Styles */

/* Temel skeleton çerçevesi */
.skeleton-match, .skeleton-tournament, .skeleton-pulse, .skeleton-pulse-slow {
    background-color: #e9ecef;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

/* Pulse Animation - Hızlı */
.skeleton-pulse::after{  content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
                rgba(255, 255, 255, 0) 0%, 
                rgba(255, 255, 255, 0.4) 50%, 
                rgba(255, 255, 255, 0) 100%);
    animation: pulse 1.5s ease-in-out infinite;
}

/* Pulse Animation - Yavaş */
.skeleton-pulse-slow::after{  content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
                rgba(255, 255, 255, 0) 0%, 
                rgba(255, 255, 255, 0.4) 50%, 
                rgba(255, 255, 255, 0) 100%);
    animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: translateX(-100%);
    }
    100%{      transform: translateX(100%);
    }
}

/* Skeleton boyutları */
.skeleton-match .live-scores-time {
    width: 45px;
    height: 14px;
    margin: 4px auto;
}

.skeleton-match .live-scores-minute{  width: 30px;
    height: 12px;
    margin: 0 auto;
}

.skeleton-match .team-logo{  width: 20px;
    height: 20px;
    border-radius: 50%;
}

.skeleton-match .live-scores-name{  width: 100px;
    height: 14px;
    margin: 4px 0;
}

.skeleton-match .live-scores-score{  width: 20px;
    height: 18px;
    margin-left: auto;
}

/* Turnuva skeleton özellikleri */
.skeleton-match .live-scores-tournament-flag{  width: 24px;
    height: 24px;
    border-radius: 50%;
}

.skeleton-match .live-scores-tournament-title{  width: 200px;
    height: 18px;
    margin-left: 10px;
}

/* Maç detayları skeleton özellikleri */
/* FIX: Updated to match responsive logo sizes (44→48→56→75→100px) */

/* Extra small phones (< 375px) */
.match-details-team-logo.skeleton-pulse{  width: 44px;
    height: 44px;
    border-radius: 50%;
    margin: 0 auto 10px auto;
}

/* Small phones (375-480px) */
@media(min-width:375px){
    .match-details-team-logo.skeleton-pulse {
        width: 48px;
        height: 48px;
    }
}

/* Large phones (480px+) */
@media(min-width:480px){
    .match-details-team-logo.skeleton-pulse {
        width: 56px;
        height: 56px;
    }
}

/* Tablets (769px+) */
@media(min-width:769px){
    .match-details-team-logo.skeleton-pulse {
        width: 75px;
        height: 75px;
    }
}

/* Desktop (1025px+) */
@media(min-width:1025px){
    .match-details-team-logo.skeleton-pulse {
        width: 100px;
        height: 100px;
    }
}

.match-details-team-name.skeleton-pulse {
    width: 100px;
    height: 16px;
    margin: 5px auto;
}

.live-scores-team-score.skeleton-pulse{  width: 30px;
    height: 30px;
    margin: 10px auto;
}

.live-scores-match-time.skeleton-pulse{  width: 60px;
    height: 18px;
    margin: 5px auto;
}

.previous-leg-score.skeleton-pulse{  width: 80px;
    height: 14px;
    margin: 5px auto;
}

/* Sekmeler için skeleton */
.live-scores-menu-item.skeleton-pulse{  width: 70px;
    height: 20px;
    display: inline-block;
    margin: 0 10px;
}

/* Note: .match-details-team-logo.skeleton-pulse responsive sizes moved to main logo rule (line 3732+) */
/* Now uses same breakpoints: 44px → 48px → 56px → 75px → 100px */

.skeleton-match .live-scores-name{  width: 80px;
}

/* Dairesel grafikler için modern stiller */
.circular-stat-container{  display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

.circular-stat-item{  text-align: center;
    width: 48%; /* Her bir öğe genişliğin yaklaşık yarısını kaplasın */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.circular-chart{  width: 42%; /* Biraz daha büyük */
    height: auto;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), filter 0.3s ease;
}

.circular-chart:hover{  transform: scale(1.05);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}

.circle-bg{  fill: none;
    stroke: #f4f4f4;
    stroke-width: 3.5;
    opacity: 0.8;
}

.circle{  fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    transition: stroke 0.3s ease;
}

.circular-chart .home-circle{  stroke: #1E88E5;
    stroke-width: 3.2;
}

.circular-chart .away-circle{  stroke: #E53935;
    stroke-width: 3.2;
}

.percentage{  fill: #444;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 0.38em;
    font-weight: 500;
    text-anchor: middle;
}

.circular-stat-text{  font-size: 13px;
    margin-top: 8px;
    font-weight: 500;
    color: #444;
}

@media(max-width:480px){
    .circular-chart {
        width: 50%; /* Mobile: ekstra büyük */
    }

    .percentage{      font-size: 0.42em;
    }

    .circular-stat-text{      font-size: 11px;
    }
}

@media(min-width:481px) and (max-width:768px){
    .circular-chart {
        width: 45%; /* Tablet: medium boyut */
    }

    .percentage{      font-size: 0.40em;
    }

    .circular-stat-text{      font-size: 10px;
    }
}

/* Desktop Hover Efektleri (1025px ve üzeri) */
@media(min-width:1025px){
    .live-scores-stat-bar.home:hover, .live-scores-stat-bar.away:hover {
        filter: brightness(1.1);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    
    .circular-chart:hover{      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
    }
    
    .live-scores-stat-value.home:hover, .live-scores-stat-value.away:hover{      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
    }
}

/* Rating (Puan) Bilgisi */
.player-rating {
    position: absolute;
    bottom: 20px; /* Biraz daha yukarıda olacak şekilde ayarlandı */
    left: -20px; /* Daha sol tarafa taşındı */
    background-color: #f1c40f; /* Sarı arka plan */
    color: #ffffff; /* Beyaz yazı rengi */
    font-size: 12px; /* Yazı boyutu */
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 5px;
    z-index: 15; /* Player div'den daha yüksek olmalı */
    pointer-events: none; /* Tıklamayı geçirmesi için */
}

/* Değişim İkonu */
.substitution-icon{  position: absolute; /* İkonun doğru şekilde konumlandırılması için ekleniyor */
    bottom: 15px !important; /* Forma görselinin altına yerleştirmek için */
    right: -10px !important;  /* Forma görselinin sağına yerleştirmek için */
    font-size: 24px; /* İkonun boyutunu ayarlayın */
    color: #FF0000; /* Kırmızı renk, isteğe göre değiştirilebilir */
    z-index: 15; /* Player div'den daha yüksek olmalı */
    pointer-events: none; /* Tıklamayı geçirmesi için */
}

.substitute-player{  display: flex;
    align-items: center;
    padding: 5px; /* Padding değerini küçülttük */
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    font-weight: bold;
}

.substitute-entered{  background-color: #e6ffe6;
}

.substitute-number{  margin-right: 8px;
    color: #333;
    font-weight: bold;
    font-size: 14px;
}

.substitute-name{  flex-grow: 1;
    color: #333;
    font-size: 13px;
}

.substitution-icon-substitute{  color: #28a745;
    font-size: 16px;
    margin-left: 5px;
}

/* Wrapper'dan padding tamamen kaldırıldı, boşluk sıfırlandı */
.substitutes-wrapper{  display: flex;
    justify-content: space-between;
    gap: 0; /* Gap değerini sıfırladık */
    width: 100%; /* Tam genişlik */
    padding: 0; /* Padding tamamen kaldırıldı */
}

.substitutes-container-wrapper{  flex: 1;
    display: flex;
    justify-content: space-between;
    margin: 0; /* Dış boşlukları sıfırladık */
    padding: 0; /* İç boşlukları sıfırladık */
}

.substitutes-container{  flex: 1;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 5px; /* İç padding azaltıldı */
    margin: 0; /* Varsayılan dış boşlukları kaldırdık */
    width: 50%; /* İki listeyi eşit genişlikte yap */
}

.substitutes-header{  font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
}

.substitutes-list{  display: flex;
    flex-direction: column;
}

/* Mobil görünüm için medya sorgusu */
@media(max-width:768px){
    .substitutes-wrapper {
        flex-direction: column;
        gap: 0;
    }

    .substitutes-container{      width: 100%;
        margin-bottom: 10px;
    }
}

/* Oyuncu Detay Popup - Modern Kart Yapısı */
.player-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Arttırıldı */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    backdrop-filter: blur(3px);
}

.player-popup-overlay.open{  opacity: 1;
    visibility: visible;
}

.player-popup{  background-color: #fff;
    padding: 0;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    overf8px;
    right: 8px;
    font-size: 20px;                       /* Level 3: Desktop base */
    cursor: pointer;
    color: #555;
    background-color: white;
    width: 32px;                           /* Level 3: Touch area 44×48 */
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 100;
    text-align: center;
    line-height: 1;
}

/* Responsive: Close Icon */
@media(min-width:769px) and (max-width:1024px){
    .close-icon {
        top: 8px;
        right: 8px;
        font-size: 18px;               /* Level 3: Tablet */
        width: 28px;                   /* Touch area 40×44 */
        height: 28px;
    };
    cursor: pointer;
    color: #555;
    background-color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 100;
    text-align: center;
    line-height: 1;
}

.player-card-header {
    padding: 18px 16px;
    display: flex;
    align-items: flex-start;
    position: relative;
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    border-bottom: 1px solid #f0f0f0;
    z-index: 1;
    border-radius: 12px 12px 0 0;
}

.player-card-image{  width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    object-fit: cover;
    margin-right: 15px;
    background-color: #fff;
    flex-shrink: 0;
}

.player-card-info{  flex: 1;
    min-width: 0;
}

.player-card-name{  font-size: 18px;
    font-weight: 700;
    margin: 0 0 5px 0;
    color: #222;
    word-wrap: break-word;
    line-height: 1.2;
}

.player-card-position, .player-card-team{  font-size: 14px;
    color: #555;
    margin: 3px 0;
    display: flex;
    align-items: center;
}

.player-card-position:before{  content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background-color: var(--position-color, #FFC107);
}

.player-card-team:before{  content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background-color: var(--team-color, #2196F3);
}


/* Ev sahibi takım renkleri */
.player-home-team .player-card-position:before{  background-color: #1e88e5; /* Ev sahibi takım ana rengi */
}

.player-home-team .player-card-team:before{  background-color: #64b5f6; /* Ev sahibi takım ikincil rengi */
}

.player-home-team .section-title::after{  background-color: #1e88e5; /* Ev sahibi takım ana rengi */
}

/* Deplasman takımı renkleri */
.player-away-team .player-card-position:before{  background-color: #e53935; /* Deplasman takımı ana rengi */
}

.player-away-team .player-card-team:before{  background-color: #ef5350; /* Deplasman takımı ikincil rengi */
}

.player-away-team .section-title::after{  background-color: #e53935; /* Deplasman takımı ana rengi */
}

/* Rating konumu - biraz daha aşağıda */
.player-card-rating-container{  position: absolute;
    top: 45px; /* Daha aşağıda konumlandırma */
    right: 16px;
    z-index: 5;
    width: 54px;
    height: 54px;
}

.player-card-rating{  position: absolute;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    background: conic-gradient(#ffd700 0%, #ffd700 var(--rating-percent), rgba(255, 215, 0, 0.2) var(--rating-percent), rgba(255, 215, 0, 0.2) 100%);
    box-shadow: 0 3px 8px rgba(214, 164, 2, 0.35);
    z-index: 2;
    letter-spacing: -0.5px;
    clip-path: circle(27px at center);
    color: #000;
}

.player-card-rating-inner{  position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: white;
    top: 5px;
    left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.player-card-rating-glow{  position: absolute;
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, rgba(255, 215, 0, 0) 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.9);
    }
    50%{      opacity: 0.75;
        transform: translate(-50%, -50%) scale(1.1);
    }
    100%{      opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.9);
    }
}

.rating-excellent {
    background: conic-gradient(#25c485 0%, #25c485 var(--rating-percent), rgba(37, 196, 133, 0.2) var(--rating-percent), rgba(37, 196, 133, 0.2) 100%);
    box-shadow: 0 3px 8px rgba(37, 196, 133, 0.35);
}

.rating-excellent + .player-card-rating-glow{  background: radial-gradient(circle, rgba(37, 196, 133, 0.8) 0%, rgba(37, 196, 133, 0) 70%);
}

.rating-good{  background: conic-gradient(#2196F3 0%, #2196F3 var(--rating-percent), rgba(33, 150, 243, 0.2) var(--rating-percent), rgba(33, 150, 243, 0.2) 100%);
    box-shadow: 0 3px 8px rgba(33, 150, 243, 0.35);
}

.rating-good + .player-card-rating-glow{  background: radial-gradient(circle, rgba(33, 150, 243, 0.8) 0%, rgba(33, 150, 243, 0) 70%);
}

.rating-average{  background: conic-gradient(#FFC107 0%, #FFC107 var(--rating-percent), rgba(255, 193, 7, 0.2) var(--rating-percent), rgba(255, 193, 7, 0.2) 100%);
    box-shadow: 0 3px 8px rgba(255, 193, 7, 0.35);
}

.rating-average + .player-card-rating-glow{  background: radial-gradient(circle, rgba(255, 193, 7, 0.8) 0%, rgba(255, 193, 7, 0) 70%);
}

.rating-poor{  background: conic-gradient(#FF5722 0%, #FF5722 var(--rating-percent), rgba(255, 87, 34, 0.2) var(--rating-percent), rgba(255, 87, 34, 0.2) 100%);
    box-shadow: 0 3px 8px rgba(255, 87, 34, 0.35);
}

.rating-poor + .player-card-rating-glow{  background: radial-gradient(circle, rgba(255, 87, 34, 0.8) 0%, rgba(255, 87, 34, 0) 70%);
}

.match-info-bar{  padding: 12px 16px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

.player-home-team .match-info-bar{  border-left: 3px solid var(--team-primary-color, #1e88e5);
}

.player-away-team .match-info-bar{  border-left: 3px solid var(--team-primary-color, #e53935);
}

.match-info-teams{  display: flex;
    align-items: center;
    justify-content: center;
}

.match-team-name{  font-weight: 600;
    color: #333;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-team-name{  color: var(--team-primary-color, #1e88e5);
    font-weight: 700;
}

.away-team-name{  color: var(--team-primary-color, #e53935);
    font-weight: 700;
}

.match-vs{  margin: 0 8px;
    color: #777;
    font-weight: 400;
}

.match-date{  color: #666;
    margin-left: 10px;
    font-size: 13px;
    position: relative;
    padding-left: 10px;
}

.match-date::before{  content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #999;
}

.player-card-content{  padding: 16px 14px;
}

.section-title{  font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 16px 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
    position: relative;
}

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

.section-title::after{  content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--team-primary-color, #FFC107);
    border-radius: 3px;
}

.player-card-section{  margin-bottom: 20px;
}

/* İstatistik alanı - tek sütun */
.player-card-stat-list{  display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 5px;
}

.player-card-stat-item{  background-color: #f8f9fa;
    border-radius: 8px;
    padding: 10px 14px;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.player-card-stat-item:hover{  background-color: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.player-card-stat-label{  font-size: 13px;
    font-weight: 500;
    color: #555;
}

.player-card-stat-value{  font-size: 14px;
    font-weight: 600;
    color: #333;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2px 7px;
    border-radius: 4px;
    min-width: 40px;
    text-align: center;
}

.no-stats{  text-align: center;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    color: #666;
    font-style: italic;
    margin: 10px 0;
}

/* Mobil için responsive düzenlemeler */
@media(max-width:576px){
    .player-card-header {
        padding: 14px 12px;
    }
    
    .player-card-image{      width: 60px;
        height: 60px;
    }
    
    .player-card-name{      font-size: 16px;
    }
    
    .player-card-position, .player-card-team{      font-size: 13px;
        margin: 2px 0;
    }
    
    .player-card-rating-container{      top: 55px; /* Mobil ekranda daha da aşağıda */
        right: 14px;
        width: 46px;
        height: 46px;
    }
    
    .player-card-rating{      width: 46px;
        height: 46px;
        font-size: 18px;
        clip-path: circle(23px at center);
    }
    
    .player-card-rating-inner{      width: 38px;
        height: 38px;
        top: 4px;
        left: 4px;
    }
    
    .player-card-stat-item{      padding: 10px 12px;
    }
    
    .player-card-stat-label{      font-size: 13px;
    }
    6px;
        right: 6px;
        font-size: 16px;               /* Level 3: Mobile */
        width: 26px;                   /* Touch area 38×42 */
        height: 26
    
    .match-info-bar{      padding: 10px 12px;
        font-size: 13px;
    }
    
    .match-team-name{      max-width: 100px;
    }
    
    .match-date{      font-size: 12px;
    }
    
    .player-card-content{      padding: 14px 12px;
    }
    
    .close-icon{      top: 8px;
        right: 8px;
        font-size: 16px;
        width: 22px;
        height: 22px;
    }
}

/* Baskı Grafiği6px;                       /* Level 1: Incident icons - Mobile */
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s ease;
}

.incident-icon:hover {
    transform: scale(1.15);
}

/* Responsive: Incident Icon (all variants) */
@media(min-width:769px) and (max-width:1024px){  .inciden2px;                           /* Level 2: Mobile */
    height: 16px;
    background-color: #e53935;
    border-radius: 2px;
    font-size: 10px;
    line-height: 16px;
}

@media(min-width:769px) and (max-width:1024px){  .incident-icon.red-card-icon{width:14px;/* Level 2:Tablet */ height:18px;line-height:18px;}}

@media(min-width:1025px){  .incident-icon.red-card-icon{width:16px;/* Level 2:Desktop */ height:20px;line-height:20px;}
@media(min-width:1025px){
    .incide10px;                           /* Level 2: Mobile */
    height: 14px;
    background-color: #d32f2f;
    border-radius: 1px;
    font-size: 8px;
    line-height: 14px;
    opacity: 0.8;
}

@media(min-width:769px) and (max-width:1024px){
    .incident-icon.yellow-red-card-icon {
        width: 12px;                   /* Level 2: Tablet */
        height: 16px;
        line-height: 16px;
    }
}

@media(min-width:1025px){
    .incident-icon.yellow-red-card-icon {
        width: 14px;                   /* Level 2: Desktop */
        height: 18px;
        line-height: 18px;
    }overlay{  position: absolute;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
    width: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;  /* KEY: Pushes top and bottom apart */
    gap: 0;
    box-sizing: border-box;
}

.incident-icons{  display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.incident-icons.top{  position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.incident-icons.bottom{  position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column-reverse;
}

.incident-icon{  font-size: 14px;
    line-height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s ease;
    cursor: pointer;
    padding: 4px;
    margin: -4px;
}

.incident-icon:hover{  transform: scale(1.15);
}

/* Doğrudan kırmızı kart - Kırmızı dikdörtgen */
.incident-icon.red-card-icon{  width: 10px;
    height: 14px;
    background-color: #e53935;
    border-radius: 2px;
    font-size: 10px;
    line-height: 14px;
}

/* İkinci sarı karttan kırmızı (2 Sarı = 1 Kırmızı) - Küçük kırmızı dikdörtgen */
.incident-icon.yellow-red-card-icon{  width: 8px;
    height: 12px;
    background-color: #d32f2f;
    border-radius: 1px;
    font-size: 8px;
    line-height: 12px;
    opacity: 0.8;
}

/* İptal edilen gol ikonları */
.incident-icon.cancelled-goal-icon{  font-size: 14px;
    line-height: 14px;
    color: #999;
    opacity: 0.6;
    text-decoration: line-through;
}

/* Incident Icons Container - Ana konteyner */
.incident-icons-container{  position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    bottom: -50px;
    pointer-events: none;
    width: 100%;
    height: auto;
    z-index: 100;
}

/* Dakika overlay - her dakika için konum container'ı */
.minute-incident-overlay{  position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transform: translateX(-50%);
}

/* ============================================
   7 BREAKPOINT STRATEGY - RESPONSIVE ICONS
   ============================================ */

/* 1. DESKTOP / LAPTOP (1200px+) - 15% traffic */
@media(min-width:1200px){  .incident-icons-container{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}
  
    .minute-incident-overlay{width:42px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;transform:translateX(-50%);}
  
    .incident-icons.top{position:absolute;top:2px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icons.bottom{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icon{font-size:16px;line-height:16px;}
  
    .incident-icon.red-card-icon{width:11px;height:15px;font-size:10px;}
  
    .incident-icon.yellow-red-card-icon{width:9px;height:13px;font-size:8px;}}

/* 2. TABLET LARGE (1024-1199px) - 2% traffic */
@media(min-width:1024px) and (max-width:1199px){  .incident-icons-container{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}
  
    .minute-incident-overlay{width:38px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;transform:translateX(-50%);}
  
    .incident-icons.top{position:absolute;top:2px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icons.bottom{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icon{font-size:15px;line-height:15px;}
  
    .incident-icon.red-card-icon{width:10px;height:14px;}
  
    .incident-icon.yellow-red-card-icon{width:8px;height:12px;}}

/* 3. TABLET SMALL (768-1023px) - 1% traffic */
@media(min-width:768px) and (max-width:1023px){  .incident-icons-container{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}
  
    .minute-incident-overlay{width:32px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;transform:translateX(-50%);}
  
    .incident-icons.top{position:absolute;top:2px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icons.bottom{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icon{font-size:14px;line-height:14px;}
  
    .incident-icon.red-card-icon{width:9px;height:13px;}
  
    .incident-icon.yellow-red-card-icon{width:7px;height:11px;}}

/* 4. LARGE MOBILE (600-767px) - 7% traffic */
@media(min-width:600px) and (max-width:767px){  .incident-icons-container{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}
  
    .minute-incident-overlay{width:28px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;transform:translateX(-50%);}
  
    .incident-icons.top{position:absolute;top:2px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icons.bottom{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icon{font-size:13px;line-height:13px;}
  
    .incident-icon.red-card-icon{width:8px;height:12px;}
  
    .incident-icon.yellow-red-card-icon{width:6px;height:10px;}}

/* 5. STANDARD MOBILE (480-599px) - 25% traffic */
@media(min-width:480px) and (max-width:599px){  .incident-icons-container{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}
  
    .minute-incident-overlay{width:25px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;transform:translateX(-50%);}
  
    .incident-icons.top{position:absolute;top:1px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icons.bottom{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icon{font-size:12px;line-height:12px;}
  
    .incident-icon.red-card-icon{width:7px;height:11px;}
  
    .incident-icon.yellow-red-card-icon{width:6px;height:9px;}}

/* 6. MEDIUM MOBILE (375-479px) - 30% traffic - MOST IMPORTANT */
@media(min-width:375px) and (max-width:479px){  .incident-icons-container{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}
  
    .minute-incident-overlay{width:23px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;transform:translateX(-50%);}
  
    .incident-icons.top{position:absolute;top:1px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icons.bottom{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icon{font-size:11px;line-height:11px;}
  
    .incident-icon.red-card-icon{width:7px;height:10px;}
  
    .incident-icon.yellow-red-card-icon{width:6px;height:8px;}}

/* 7. SMALL MOBILE (<375px) - 5% traffic - EXTREME constraints */
@media(max-width:374px){  .incident-icons-container{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}
  
    .minute-incident-overlay{width:20px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;transform:translateX(-50%);}
  
    .incident-icons.top{position:absolute;top:1px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icons.bottom{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:1px;pointer-events:auto;}
  
    .incident-icon{font-size:10px;line-height:10px;}
  
    .incident-icon.red-card-icon{width:6px;height:9px;}
  
    .incident-icon.yellow-red-card-icon{width:5px;height:7px;}}

/* DARK MODE UYUMLULUĞU - Comprehensive Dark Theme */
@media (prefers-color-scheme: dark){  /* === BAR CHART STYLING === */
    .live-scores-stat-bar.home{background:linear-gradient(to right, #42A5F5, #90CAF9);box-shadow:0 2px 4px rgba(66, 165, 245, 0.3);}
  
    .live-scores-stat-bar.away{background:linear-gradient(to right, #EF5350, #EF9A9A);box-shadow:0 2px 4px rgba(239, 83, 80, 0.3);}
  
    .live-scores-stat-bar.home:hover{filter:brightness(1.15);box-shadow:0 3px 6px rgba(66, 165, 245, 0.4);}
  
    .live-scores-stat-bar.away:hover{filter:brightness(1.15);box-shadow:0 3px 6px rgba(239, 83, 80, 0.4);}
  
    .live-scores-stat-value.home{background-color:#42A5F5;box-shadow:0 2px 4px rgba(66, 165, 245, 0.3);}
  
    .live-scores-stat-value.away{background-color:#EF5350;box-shadow:0 2px 4px rgba(239, 83, 80, 0.3);}
  
    /* === LABELS AND TEXT === */
    .live-scores-stat-label{color:#e0e0e0;}
  
    /* === BAR CONTAINER === */
    .live-scores-stat-bar-container{background-color:#424242;box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3);}
  
    /* === CIRCULAR CHART STYLING === */
    .circular-chart .home-circle{stroke:#42A5F5;}
  
    .circular-chart .away-circle{stroke:#EF5350;}
  
    .circle-bg{stroke:#555;opacity:0.6;}
  
    .percentage{fill:#e0e0e0;}
  
    .circular-stat-text{color:#d0d0d0;}
  
    /* === PERIOD BUTTONS === */
    .statistics-period-selection{background-color:#2a2a2a;box-shadow:0 2px 5px rgba(0, 0, 0, 0.3);}
  
    .statistics-period-selection button{color:#b0b0b0;}
  
    .statistics-period-selection button:hover{background-color:rgba(255, 255, 255, 0.05);}
  
    .statistics-period-selection button.active{background-color:#1a1a1a;color:#42A5F5;box-shadow:0 2px 5px rgba(66, 165, 245, 0.2);}
  
    /* === HOVER EFFECTS (Desktop - 1025px+) === */
    @media(min-width:1025px){
        .circular-chart:hover{filter:drop-shadow(0 4px 12px rgba(66, 165, 245, 0.3));}
  }
}