body {
    background: #111;
    color: #FFF;
    font-family: 'Geist', 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px; /* 157.143% */
    letter-spacing: 0.2px;
    
    
    font-feature-settings: 'liga' off, 'clig' off;
    margin: 0;
    padding: 0;
  }

  a {
    text-decoration: none;
  }

  a .event:hover {
    background-color: rgba(255, 128, 0, 0.1); /* çok hafif arka plan vurgusu */
    box-shadow: 0 0 12px rgba(255, 128, 0, 0.50); /* turuncu yumuşak dış glow */
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
  }
  

  .timezone-select-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #181818;
    border-radius: 12px;
    padding: 18px 24px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);
    max-width: 420px;
}

.timezone-select-container label {
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
    margin-right: 16px;
    letter-spacing: 0.5px;
}

#timezoneSelect {
    background: #232323;
    color: #fff;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 1em;
    outline: none;
    transition: border 0.2s;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.08);
}

#timezoneSelect:focus {
    border: 1.5px solid #4e9cff;
}
  
  
  .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 14px;
  }
  
  header .logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    text-decoration: none;
  }
  
  .logo-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
    text-decoration: none;
  }

  .topbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .divider {
    height: 1px;
    background-color: #333;
    width: 100%;
  }

  .divider2 {
    height: 1px;
    background-color: #333;
    width: 100%;
    margin-bottom: 24px;
  }
  
  .menu-alt {
    display: flex;
    gap: 24px;
    padding-left: 10px;
  }
  
  .menu-alt a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Geist', sans-serif;
    transition: color 0.3s;
  }
  
  .menu-alt a:hover {
    color: #ff8000;
  }
  
  
  header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #FFF;
  font-family: 'Geist', sans-serif;
    font-style: normal;
    line-height: 22px;
    letter-spacing: 0.2px;
    
    
    font-feature-settings: 'liga' off, 'clig' off;
    text-decoration: none;
  }
  
  header .subtitle {
    color: #ff8000;
    font-size: 14px;
    font-weight: 600;
  font-family: 'Geist', sans-serif;
    font-style: normal;
    line-height: 22px;
    letter-spacing: 0.2px;
    
    
    font-feature-settings: 'liga' off, 'clig' off;
    text-decoration: none;
  }
  
  main h2 {
    font-size: 1.5rem;
    margin-bottom: 24px;
    font-weight: 600;
    color: #FFF;
  font-family: 'Geist', sans-serif;
    font-style: normal;
    line-height: 22px;
    letter-spacing: 0.2px;
    
    
    font-feature-settings: 'liga' off, 'clig' off;
  }

  header.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Mobil uyumu için */
  }
  
  .menu {
    display: flex;
    gap: 24px;
  }
  
  .menu a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Geist', sans-serif;
    transition: color 0.3s;
  }
  
  .menu a:hover {
    color: #ff8000;
  }
  

  
  
  .categories-wrapper {
    margin-bottom: 32px;
  }
  
  .categories {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
  }
  
  .categories button {
    background: #222;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 500;
  }
  
  .categories button.active,
  .categories button:hover {
    background: #ff8000;
    color: #fff;
  }




  .categories2 button {
    background: #ff8000;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 500;
  }
  
  .categories2 button.active,
  .categories2 button:hover {
    background: #222;
    color: #fff;
  }


  
  .date-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 32px 0 12px 0;
    color: #ff8000;
    font-family: 'Geist', sans-serif;
    font-style: normal;
    line-height: 22px;
    letter-spacing: 0.2px;
    
    
    font-feature-settings: 'liga' off, 'clig' off;
  }
  
  .date-title span.count {
    font-size: 0.9rem;
    color: #fff;
    background: rgba(255, 128, 0, 0.2);
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: 8px;
  }
  
  .event-list {
    background: #181818;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
  }
  
  .event {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid #222;
    font-size: 14px;
  font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.2px;
    
    
    font-feature-settings: 'liga' off, 'clig' off;
    text-decoration: none;
  }
  
  
  .time {
    color: #fff;
    font-weight: 600;
    min-width: 40px;
  font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.2px;
    
    
    font-feature-settings: 'liga' off, 'clig' off;
  }
  
  .desc {
    flex: 1;
    color: #fff;
  font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.2px;
    
    
    font-feature-settings: 'liga' off, 'clig' off;
  }
  
  .tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.2px;
    font-feature-settings: 'liga' off, 'clig' off;
  }


  .live-event .live-badge {
    background-color: rgba(255, 0, 0, 0.392);
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.2px;
  }

  .live-event {
    background-color: #2a00002b; /* koyu bordo / soft kırmızı ton */
  }


  

  
  

  
  .tag.live {
    background: #3a2327;
    color: #ff8080;
  }
  
  .channel {
    color: #bbb;
    font-size: 0.95em;
    text-align: right;
  font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.2px;
    
    
    font-feature-settings: 'liga' off, 'clig' off;
  }

  .hero-list {
    background: #181818;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
  }

    /* Başlık ve alt başlık stilleri */
  .hero-title {
    font-size: 14px; /* Başlık boyutu */
    font-weight: bold; /* Kalın yazı */
    color: #fff; /* Yazı rengi */
    text-align: left; /* Ortala */
    margin-left: 24px; /* Alt boşluk */
    margin-top: 20px; /* Alt boşluk */
    margin-bottom: 16px; /* Alt boşluk */
    max-width: 700px; /* İstediğin kadar daraltabilirsin, örneğin 500px de yapabilirsin */
    word-break: break-word;
  }

  .hero-subtitle {
    font-size: 14px; /* Alt başlık boyutu */
    color: #666; /* Yazı rengi */
    text-align: left; /* Ortala */
    margin-left: 24px; /* Alt boşluk */
    margin-bottom: 16px; /* Alt boşluk */
    max-width: 700px; /* İstediğin kadar daraltabilirsin, örneğin 500px de yapabilirsin */
    word-break: break-word;
  }

  .hero-link {
    text-align: left; /* Ortala */
    margin-left: 24px; /* Alt boşluk */
    padding-bottom: 24px; /* Alt boşluk */
  }

  .link {
    color: #666; /* Bağlantı rengi */
    text-decoration: none; /* Alt çizgi yok */
    font-weight: bold; /* Kalın yazı */
    margin-right: 24px; /* Alt boşluk */
  }

  .link:hover {
    text-decoration: underline; /* Üzerine gelince alt çizgi */
  }
  .kategori-football {
    background-color: #3a3627;
    color: #e6d68f;
  }
  
  .kategori-basketball {
    background-color: #3b332a;
    color: #f0c97c;
  }
  
  .kategori-volleyball {
    background-color: #2e3029;
    color: #d9e68f;
  }
  
  .kategori-motorsport {
    background-color: #2d2d39;
    color: #c8c0ff;
  }
  
  .kategori-motorcycle-racing {
    background-color: #3a2c36;
    color: #f5c7de;
  }
  
  .kategori-boxing,
  .kategori-mixed-martial-arts,
  .kategori-judo,
  .kategori-karate,
  .kategori-taekwondo {
    background-color: #392c2c;
    color: #f5a9a9;
  }
  
  .kategori-athletics {
    background-color: #2c3935;
    color: #a9f5cb;
  }
  
  .kategori-tennis,
  .kategori-table-tennis {
    background-color: #39392c;
    color: #f5f1a9;
  }
  
  .kategori-snooker {
    background-color: #2c3932;
    color: #a9f5b6;
  }
  
  .kategori-cycling {
    background-color: #2c3839;
    color: #a9e7f5;
  }
  
  .kategori-wrestling {
    background-color: #392f2c;
    color: #f5c6a9;
  }
  
  .kategori-handball {
    background-color: #392f2c;
    color: #f5c6a9;
  }
  
  /* Otomatik oluşturulan diğer kategoriler */
  
  .kategori-baseball {
    background-color: #2c3737;
    color: #f5cdd7;
  }
  
  .kategori-cricket {
    background-color: #2c2e2e;
    color: #f5bec8;
  }
  
  .kategori-american-football {
    background-color: #2c3a3a;
    color: #f5d2dc;
  }
  
  .kategori-golf {
    background-color: #2c3d3d;
    color: #f5d7e1;
  }
  
  .kategori-ice-hockey {
    background-color: #2c4040;
    color: #f5dce6;
  }
  
  .kategori-rugby-union {
    background-color: #2c4343;
    color: #f5e1eb;
  }
  
  .kategori-swimming {
    background-color: #2c5555;
    color: #f5b9c3;
  }
  
  .kategori-olympics {
    background-color: #2c5b5b;
    color: #f5c3cd;
  }
  
  .kategori-skiing {
    background-color: #2c6161;
    color: #f5cdd7;
  }
  
  .kategori-darts {
    background-color: #2c6a6a;
    color: #f5dce6;
  }
  
  .kategori-surfing {
    background-color: #2c6d6d;
    color: #f5e1eb;
  }
  
  .kategori-skateboarding {
    background-color: #2c7070;
    color: #f5e6f0;
  }
  
  .kategori-gymnastics {
    background-color: #2c7373;
    color: #f5ebf5;
  }
  
  .kategori-hockey {
    background-color: #2c7676;
    color: #f5f0fa;
  }
  
  .kategori-softball {
    background-color: #2c7979;
    color: #f5f5ff;
  }
  
  .kategori-climbing {
    background-color: #2c7f7f;
    color: #f5b9c3;
  }
  
  .kategori-shooting {
    background-color: #2c8585;
    color: #f5c3cd;
  }
  
  .kategori-rugby-league {
    background-color: #2c8888;
    color: #f5c8d2;
  }
  
  .kategori-netball {
    background-color: #2c8b8b;
    color: #f5cdd7;
  }
  
  .kategori-ice-skating {
    background-color: #2c2a2a;
    color: #f5d2dc;
  }
  
  .kategori-ten-pin-bowling {
    background-color: #2c2d2d;
    color: #f5d7e1;
  }
  
  .kategori-bull-riding {
    background-color: #2c3030;
    color: #f5dce6;
  }
  
  .kategori-poker {
    background-color: #2c3333;
    color: #f5e1eb;
  }
  
  .kategori-horse-racing {
    background-color: #2c3636;
    color: #f5e6f0;
  }
  
  
  .site-footer {
    background: #181818;
    color: #aaa;
    font-size: 14px;
    text-align: center;
    padding: 30px 10px;
    margin-top: 40px;
    border-radius: 12px; /* <<< KÖŞELER YUVARLATILDI */
  }
  
  .footer-links {
    margin-bottom: 15px;
  }
  
  .footer-links a {
    color: #ccc;
    margin: 0 10px;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.3s;
  }
  
  .footer-links a:hover {
    color: #fff;
  }
  
  .footer-bottom {
    font-size: 13px;
    color: #666;
  }

  .content-list {
    background: #181818;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
  }

  .content-empty {
    margin-bottom: 50px;
  }

  .content-text-empty {
    margin-bottom: 50px;
  }


  

  .content-title {
    font-size: 14px; /* Başlık boyutu */
    font-weight: bold; /* Kalın yazı */
    color: #fff; /* Yazı rengi */
    text-align: left; /* Ortala */
    margin-left: 24px; /* Alt boşluk */
    margin-top: 20px; /* Alt boşluk */
    max-width: 750px; /* İstediğin kadar daraltabilirsin, örneğin 500px de yapabilirsin */
    word-break: break-word;
  }

  .content-title h1 {
    font-size: 34px;
    text-align: left;
    line-height: 40px;   
  }

  .content-subtitle {
    font-size: 16px; /* Alt başlık boyutu */
    color: #a2a2a2; /* Yazı rengi */
    text-align: left; /* Ortala */
    margin-left: 24px; /* Alt boşluk */
    line-height: 25px;   
    margin-bottom: 16px; /* Alt boşluk */
    max-width: 750px; /* İstediğin kadar daraltabilirsin, örneğin 500px de yapabilirsin */
    word-break: break-word;
  }

  .content-title h2 {
    font-size: 24px;
    text-align: left;
    line-height: 30px;   
  }

  .content-resim img {
    width: 100%;           /* Yatayda container'a oturur */
    height: auto;          /* Oranı korur */
    max-height: 300px;     /* İstediğin yüksekliğe göre ayarla (örnek: 300px) */
    object-fit: cover;     /* Taşma olursa kırpar ama tam oturtur */
    display: block;        /* Kenar boşluklarını sıfırlar */
  }

  .content-title .mac-detaylari {
    list-style: none;       /* Noktaları kaldırır */
    padding: 0;
    margin: 15px 0;
    font-size: 16px;
    line-height: 1.8;
    color: #ddd;
  }
  
  .content-title .mac-detaylari li::before {
    content: "— ";          /* Her satır başına tire koyar (isteğe bağlı) */
    color: #999;
  }


  .ads-left, .ads-right {
    position: fixed;
    top: 100px;
    width: 160px;
    z-index: 9999;
  }
  
  .ads-left {
    left: 0;
  }
  
  .ads-right {
    right: 0;
  }
  


  #mobile-sticky-ad {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a1a;
    padding: 10px 0;
    box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    text-align: center;
  }
  
  #mobile-sticky-ad .close-btn {
    position: absolute;
    top: 5px;
    right: 12px;
    font-size: 20px;
    color: #ccc;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10000;
  }
  
  #mobile-sticky-ad ins.adsbygoogle {
    display: inline-block;
    max-height: 100px;
    width: 100%;
    overflow: hidden;
  }

  

  
  
  
  
  /* Responsive Tasarım */
  @media (max-width: 700px) {
    .container {
      padding: 14px 4px;
      margin-left: 16px;
      margin-right: 16px;
    }

    .categories-wrapper {
      margin: 0 -16px 20px -16px;
      overflow: hidden;
    }

    .categories-wrapper {
      margin-bottom: 0px;
    }

    .content-title {
      max-width: 400px; /* İstediğin kadar daraltabilirsin, örneğin 500px de yapabilirsin */

    }

    .content-subtitle {
      max-width: 400px; /* İstediğin kadar daraltabilirsin, örneğin 500px de yapabilirsin */

    }

    .menu {
      display: flex;
      gap: 24px;
      margin-bottom: 16px;
    }

    

    @media (max-width: 768px) {
      #mobile-sticky-ad {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    
      .ads-left,
      .ads-right {
        display: none;
      }
    }
    


    .event {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 14px 10px;
    }
    .channel {
      margin-left: 0;
      text-align: left;
      min-width: unset;
    }
    .categories {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 8px;
      overflow-x: auto;
      white-space: nowrap;
      margin-bottom: -10px;
      padding-left: 16px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }
    .categories::-webkit-scrollbar {
      display: none; /* Chrome, Safari and Opera */
    }
    .categories button {
      flex: 0 0 auto;
    }

    .hero-title {
      max-width: 400px; /* İstediğin kadar daraltabilirsin, örneğin 500px de yapabilirsin */
      word-break: break-word;
    }
  
    .hero-subtitle {
      word-break: break-word;
      max-width: 400px; /* İstediğin kadar daraltabilirsin, örneğin 500px de yapabilirsin */
      font-weight: 200; /* İnce font */
    }

  }