/* Rubik fontunu yükleyin */
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap");

body{font-family:'Rubik', Arial, sans-serif;}
.match-card{border:1px solid #ccc;border-radius:5px;margin:10px 0;padding:10px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;background-color:#fff;width:100%;box-sizing:border-box;}
.match-card:hover{background-color:#f1f1f1;}
.match-card .match-info{flex-grow:1;text-align:left;}
.match-card .match-time{margin-left:auto;text-align:right;font-weight:bold;min-width:60px;/* Yeterli boşluk sağlamak için */}
.match-details{display:none;padding:10px;background-color:#f9f9f9;border:1px solid #ccc;margin-bottom:10px;width:100%;box-sizing:border-box;position:relative;}
.icon{transition:transform 0.3s;margin-left:10px;/* Simgenin sola kayması için boşluk ekle */}
.icon.rotated{transform:rotate(180deg);}
.detail-card{border:1px solid #ccc;border-radius:5px;padding:20px;background-color:#fff;}
.detail-card h3{margin-top:0;}
.single-column{margin-bottom:10px;}
.details-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px;}
.details-grid div{padding:10px;background-color:rgba(0, 0, 0, 0.05);border-radius:8px;text-align:center;}
.close-icon{position:absolute;top:10px;right:10px;cursor:pointer;font-size:1.5em;/* Boyutunu büyütmek için */}
.container{width:100%;max-width:800px;margin:0 auto;}
#match-list{width:100%;box-sizing:border-box;}
/* Butonlar için stil */
#buttons{text-align:center;margin-bottom:5px;}
.btn{display:inline-block;padding:10px 20px;margin:5px;font-size:16px;text-align:center;text-decoration:none;border-radius:25px;/* Diğer butonlarla aynı */ transition:background-color 0.3s ease;cursor:pointer;}
.btn.red{background-color:#ff4d4d;color:#fff;}
.btn.red:hover{background-color:#ff3333;}
.btn.green{background-color:#4CAF50;color:#fff;}
.btn.green:hover{background-color:#45a049;}
/* Mavi butonun yanıp sönme animasyonu */
@keyframes blink {
    0%{background-color:#0095B6;/* Başlangıç rengi */}
  50%{background-color:#1560BD;/* Ara renk */}
  100%{background-color:#0095B6;/* Başlangıç rengine geri dön */}
}

.btn.blue{background-color:#0095B6;color:#fff;padding:10px 20px;border:none;border-radius:25px;cursor:pointer;font-size:16px;animation:blink 1s infinite;/* Yanıp sönme efekti */}
.btn.blue:hover{background-color:#1560BD;animation:none;/* Hover'da animasyonu durdur */}
/* Küçük ekranlar için medya sorgusu */
@media(max-width:600px){
    .btn.blue{animation:blink 1s infinite;/* Küçük ekranlarda da animasyonun devam etmesi için */}
}

.ad-container{margin:20px 0;text-align:center;}
/* Başlık stili */
.caption{text-align:center;font-size:1em;font-weight:bold;margin:20px 0;padding-bottom:10px;border-bottom:2px solid #ddd;}
.hidden-seo-text{position:absolute;left:-9999px;top:-9999px;visibility:hidden;}
.visible-seo-text{font-size:14px;line-height:1.5;color:#333;margin-top:20px;padding:15px;background-color:#f9f9f9;border:1px solid #ddd;border-radius:5px;max-width:800px;margin:20px auto;}
/* Mobil cihazlar için düzenlemeler */
@media(max-width:768px){
    .visible-seo-text{font-size:12px;padding:10px;}
   .details-grid div{font-size:14px;/* Detay kartı içindeki yazı boyutunu küçült */}
   .detail-card h3{font-size:16px;/* Başlık boyutunu küçült */}
   .single-column div{font-size:14px;/* Tek sütun içindeki yazı boyutunu küçült */}
}

@media(max-width:600px){
    .details-grid{grid-template-columns:1fr 1fr;/* Mobilde de iki sütun halinde göstermek için */}
  .caption{font-size:0.8em;/* Mobil cihazlar için başlık boyutunu küçült */}
}

.lig-card{background-color:#f8f8f8;padding:10px;margin-bottom:15px;border-radius:5px;border:1px solid #ddd;position:relative;}
.lig-info{font-size:14px;font-weight:bold;text-align:center;}
/* cloude sonradan ekledi */


.match-card{-webkit-tap-highlight-color:transparent;/* iOS'ta dokunma vurgusunu kaldırır */ touch-action:manipulation;/* Dokunma gecikmesini azaltır */}
.close-icon{padding:10px;/* Dokunma alanını genişletir */}
@media(max-width:768px){
    .match-card{padding:15px 10px;/* Mobilde dokunma alanını biraz genişlet */ display:flex;justify-content:space-between;/* İçerikleri iki uç noktaya yay */ align-items:center;/* Yatayda aynı hizaya getir */ width:100%;/* Kartın tam genişlikte olmasını sağla */ box-sizing:border-box;/* Genişlik hesaplamasında padding'i dahil et */}
   .match-card .match-info{font-size:14px;/* Mobilde yazı boyutunu küçült */ flex-grow:1;/* Takım isimlerinin bulunduğu alanı genişlet */ text-align:left;/* Takım isimlerini sola hizala */ white-space:nowrap;/* Takım isimlerinin taşmasını engelle */ overflow:hidden;/* Uzun takım isimlerini kes */ text-overflow:ellipsis;/* Uzun takım isimlerinin sonuna '...' ekle */ padding-right:10px;/* Saat ile takım ismi arasında boşluk bırak */ min-width:0;}
   .match-card .match-time{font-size:12px;/* Mobilde saat yazı boyutunu küçült */ text-align:right;/* Saat bilgisini sağa hizala */ min-width:60px;/* Saat için sabit genişlik */ flex-shrink:0;/* Saat alanının daralmasını önle */}
   .icon{font-size:18px;/* Mobilde ikon boyutunu büyüt */}
   .detail-card{padding:15px;/* Mobilde iç boşluğu azalt */}
   .details-grid{gap:5px;/* Mobilde grid boşluğunu azalt */}
   .details-grid div{padding:8px;/* Mobilde grid öğelerinin iç boşluğunu azalt */}
}