/* =========================================================
   BÜLTEN GENEL CSS
   (tablar, paneller, yarışlar, tablo, responsive)
   ========================================================= */

/* SAYFA GENEL */
.pg, .pg *{ box-sizing:border-box; }
.pg{
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  line-height: 1.45;
  color: #111;
  background: #fff;
}
.pg-wrap{
  max-width: 1200px;
  margin: 16px auto;
  padding: 0 12px;
}

/* TABS */
.tabs{
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
}
.tablist{
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  gap: 8px;
  overflow: auto;
}
.tab{
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
}
.tab:hover{ background: #f7f7f7; }
.tab[aria-current="true"]{
  background: #e80f2e;
  color: #fff;
  border-color: #e80f2e;
}

/* PANELLER */
.panel{ display: none; margin-top: 12px; }

/* RACE BLOKLARI */
.race{
  border: 1px solid #dee2e6;
  border-radius: 10px;
  background: #fff;
  margin: 14px 0;
  overflow: hidden;
}
.rhead{
  display: grid;
  grid-template-columns: 180px 1fr 1fr 160px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: #f8f9fb;
  border-bottom: 1px solid #e6e6e6;
}
.rno{ font-weight: 800; font-size: 16px; }
.rtime{ font-weight: 700; }
.rname{ font-size: 14px; color: #333; display: flex; flex-direction: column; }
.rname .prize{ font-weight: 800; color: #09910c; font-size: 13px; }
.rdist{ font-weight: 800; text-align: right; }
.rdist.rd-cim{ color: #0a8a2a; }
.rdist.rd-kum{ color: #a56a32; }
.rdist.rd-sentetik{ color: #0b65c2; }
.agf-pct.agf-top{ color: #0a8a2a; font-weight: 800; }

.rmeta{
  padding: 8px 12px;
  font-size: 12px;
  color: #475569;
  background: #fcfcfd;
  border-top: 1px solid #eee;
}

/* TABLO */
.tbl{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  table-layout: fixed;
}
.tbl thead th{
  font-size: 12px;
  color: #666;
  background: #f7f7f7;
  border-top: none;
}
.tbl th, .tbl td{
  padding: 8px;
  border-top: 1px solid #efefef;
  vertical-align: top;
  text-align: left;
  font-size: 14px;
  line-height: 1.2;
}
.tbl tr:first-child td{ border-top: none; }

.col-name{ font-weight: 700; width: 260px; max-width: 322px; }
.col-name .subtxt, .col-name .subtxt2{ font-weight: 400; }
.col-puan{ width: 40px; text-align: center; font-weight: 800; color: #111; }
.col-agf{ width: 80px; text-align: center; vertical-align: middle; }
.agf-line{ display: block; white-space: nowrap; font-size: 12px; letter-spacing: -0.1px; }
.col-origin{ width: 160px; }
.origin2{ font-size: 12px; line-height: 1.2; }
.origin2 .o1, .origin2 .o2{ display: block; }
.col-kilo{ width: 56px; text-align: right; white-space: nowrap; }
.col-klv{ width: 64px; text-align: center; white-space: nowrap; }
.col-deg{ width: 90px; text-align: right; }

.subtxt{ display: block; font-size: 11px; color: #6b7280; margin-top: 2px; line-height: 1.25; }
.subtxt2{ display: block; font-size: 11px; color: #475569; margin-top: 2px; line-height: 1.25; }
.badge{
  display: inline-block;
  font-size: 11px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0 4px;
  margin-left: 6px;
  color: #555;
  background: #fff;
}
.ap{ font-size: 10px; vertical-align: super; margin-left: 3px; opacity: .8; }
.son6 .kum{ color: #a56a32; font-weight: 700; }
.son6 .cim{ color: #0a8a2a; font-weight: 700; }
.son6 .sep{ color: #999; padding: 0 2px; }



.tag {
  display: inline;
  font-size: 13px;
  color: #475569;
  font-weight: 400;
  line-height: 1.4;
  background: none;
  border: none;
  padding: 0;
  margin-right: 8px; /* hafif boşluk */
  cursor: default;
}
.tag.yd {
  color: #475569;
  background: none;
  border: none;
  font-weight: 400;
}



.phead{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 10px; }
.meta{ font-size: 12px; color: #475569; margin: 12px 2px; }

/* Eküriler */
.ekuri{ display: inline-block; margin-left: 6px; font-size: 11px; line-height: 1; padding: 0 4px; border-radius: 999px; font-weight: 700; }
.ekuri-1{ color: #111; }
.ekuri-2{ color: #e80f2e; }
.ekuri-3{ color: #0a8a2a; }
.ekuri-4{ color: #0b65c2; }
.ekuri-5{ color: #a56a32; }

/* Kupon açıklama tonlaması */
.kosmaz-kupon{
  color: #94a3b8;
  opacity: .85;
  font-weight: 400;
}
.ticket-block strong .kosmaz-kupon,
.ticket-comments .kosmaz-kupon{
  color: #94a3b8;
  opacity: .85;
  font-weight: 400;
}

/* SCR (scratched) */
.is-scr td{ color: #64748b; }
.is-scr .subtxt, .is-scr .subtxt2{ color: #94a3b8; }
.is-scr .badge{ border-color: #cbd5e1; color: #64748b; background: #fff; }
.is-scr .son6 .kum, .is-scr .son6 .cim{ color: #94a3b8; }

/* SA kolonu */
.col-sa{
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-sa .sa-owner,
.col-sa .sa-trainer{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rakam göstergeleri */
.pn-raw, .fav-raw{
  font-size: 10px;
  opacity: .7;
}
.fav-puan{
  color: #0a8a2a;
  background: rgba(10, 138, 42, 0.08);
  border-radius: 4px;
  padding: 0 3px;
}

/* --- Kupa ikon fix (mobil dahil) --- */
.ico-cup {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  display: inline-block;
  vertical-align: -2px;
  flex-shrink: 0;
}
.ico-cup path {
  fill: currentColor;
}
.cup-gold {
  color: #d4af37 !important; /* sabit altın tonu */
}
.cup-grey {
  color: #9ea4ac !important; /* sabit gri tonu */
}


/* Responsive */
@media (max-width: 900px){
  .race{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .rhead,
  .rmeta{
    position: sticky;
    left: 0;
    min-width: 100%;
    z-index: 2;
  }
  .rhead{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    background: #f8f9fb;
    padding: 10px 12px;
  }
  .rname{
    font-size: 13px;
    flex: 1 1 auto;
    min-width: 180px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .rdist{
    margin-left: auto;
    white-space: nowrap;
  }
  .rmeta{ background: #fcfcfd; }
  .tbl{
    min-width: 1220px;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
  }
  .col-sa{ width: 170px; max-width: 170px; }
  .col-origin{ width: 150px; }
  .phead{
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 6px 2px;
  }
  .phead > *{ flex: 0 0 auto; }
  .phead::-webkit-scrollbar{ display: none; }
}