/* Maçlar Nerede? — v5.4 (tabs + 4-card Today row) */
:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --muted:#9fb1ce;
  --text:#eaf2ff;
  --accent:#3ea8ff;
  --accent-strong:#1d7dd8;
  --card:#0e1a33;
  --chip:#12223f;
  --ring:#3ea8ff44;
  --soft:#0a1326;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif; line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1280px,100% - 32px); margin-inline:auto; padding:20px 0}
.header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,#0b1220ee,#0b122000); border-bottom:1px solid #ffffff14; backdrop-filter:saturate(140%) blur(6px)}
.brand{display:flex;gap:12px;align-items:center;padding:12px 0}
.brand .emoji{font-size:22px}
h1{margin:0;font-size:28px}
.subtitle{color:var(--muted); margin-top:4px}

.tabs{display:flex;gap:8px;margin:16px 0 8px 0}
.tab{
  padding:10px 14px;border-radius:999px;background:var(--chip);border:1px solid #ffffff20;color:var(--text);cursor:pointer;
}
.tab.active{background:var(--accent);border-color:transparent;color:#001225; font-weight:600}

.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width: 1100px){ .row4{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 820px){ .row4{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 520px){ .row4{grid-template-columns:1fr; grid-auto-flow:column; grid-auto-columns:90%; overflow-x:auto; scroll-snap-type:x mandatory} .card{scroll-snap-align:start} }

.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; justify-content:center}

.card{
  background:var(--card); border:1px solid #ffffff1a; border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 10px 24px #00000033
}
.card .title{font-size:18px; font-weight:800; letter-spacing:.2px}
.badge{display:inline-flex;gap:8px;align-items:center; font-size:12px;padding:4px 10px;border-radius:999px;background:var(--chip); border:1px solid #ffffff20; color:var(--muted); width:max-content}
.row{display:flex;gap:8px;flex-wrap:wrap; align-items:center}
.kv{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px;background:#0b1731;border:1px solid #ffffff12;border-radius:999px;padding:6px 10px}
.actions{display:flex;gap:8px;margin-top:auto}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--accent);color:#001225;border:0;cursor:pointer;font-weight:700}
.btn.secondary{background:transparent;color:var(--text);border:1px solid #ffffff2a}
.section-title{font-size:22px;margin:18px 0 10px 0}
.lead-chip{display:inline-flex;align-items:center;gap:8px;background:#092046;border:1px solid #ffffff1c;color:#b7c9e6;padding:8px 12px;border-radius:999px}

.filters{margin-top:24px;padding:16px;border:1px solid #ffffff14;background:var(--soft);border-radius:16px min-height: 64px;}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.controls input,.controls select,.controls button{background:var(--panel); border:1px solid #ffffff1a; color:var(--text);
  border-radius:12px; padding:10px 12px; outline:none;}
.controls button{cursor:pointer}
.controls input:focus,.controls select:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring)}

.empty{opacity:.8; border:1px dashed #ffffff22; border-radius:18px; padding:24px; text-align:center; margin-top:12px}
footer{color:var(--muted);font-size:12px;margin:16px 0}


/* v5.5 additions: Carousel arrows + track sizing */
.today-carousel{position:relative; margin-top:8px}
.today-viewport{overflow:hidden}
.today-track{
  display:grid; grid-auto-flow:column; gap:16px;
  grid-auto-columns: calc((100% - 48px)/4); /* 4-up with 16px gaps */
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
}
.today-track > .card{scroll-snap-align:start}
.nav-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  background:linear-gradient(180deg,#1a2a52,#0f1f3e); color:#eaf2ff; border:1px solid #ffffff2a;
  box-shadow:0 10px 24px #00000055; cursor:pointer; z-index:5;
}
.nav-arrow:hover{filter:brightness(1.1)}
.nav-arrow.left{left:-10px}
.nav-arrow.right{right:-10px}

@media (max-width: 1100px){
  .today-track{ grid-auto-columns: calc((100% - 32px)/3); } /* 3-up */
}
@media (max-width: 820px){
  .today-track{ grid-auto-columns: calc((100% - 16px)/2); } /* 2-up */
}
@media (max-width: 520px){
  .today-track{ grid-auto-columns: 100%; } /* 1-up */
  .nav-arrow{ display:none; } /* arrows off on tiny screens, swipe instead */
}

.nav-arrow.disabled{opacity:.4;pointer-events:none}


/* === centered site header (minimal) === */
.site-header{ position: sticky; top:0; z-index:50; backdrop-filter: blur(6px); background: rgba(8,14,28,.55); grid-column:1 / -1; }
.site-header .header-inner{ max-width:1100px; margin:0 auto; padding: clamp(1.25rem, 3vw + .25rem, 2.5rem) 1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; justify-self:center; }
.site-header .sport-icons{ display:inline-flex; gap:.6rem; font-size: clamp(1.35rem, 2.5vw, 2rem); line-height:1; margin-bottom:.35rem; }
.site-header .site-title{ font-weight:800; font-size: clamp(1.4rem, 3.2vw, 2.2rem); margin:.15rem 0 0; }
.site-header .site-subtitle{ font-size: clamp(.9rem, 1.2vw, 1.05rem); opacity:.85; margin-top:.35rem; }
.site-header.shrink .header-inner{ padding:.6rem 1rem; }
.site-header.shrink .site-title{ font-size:1.25rem; }
.site-header.shrink .sport-icons{ font-size:1.1rem; margin-bottom:.1rem; }
.site-header.shrink .site-subtitle{ display:none; }



/* === Turkish-safe font & emoji-safe icons for header === */
.site-header .site-title,
.site-header .site-subtitle {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", "DejaVu Sans", "Noto Sans Display", sans-serif !important;
  font-kerning: normal;
  font-feature-settings: "liga","kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.site-header .sport-icons span {
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla", emoji, sans-serif !important;
}



/* === header entities+svg patch === */
.site-header{ position: sticky; top:0; z-index:50; backdrop-filter: blur(6px); background: rgba(8,14,28,.55); grid-column:1 / -1; }
.site-header .header-inner{ max-width:1100px; margin:0 auto; padding: clamp(1.25rem, 3vw + .25rem, 2.5rem) 1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.site-header .sport-icons{ display:inline-flex; gap:.6rem; margin-bottom:.35rem; }
.site-header .sport-icons .icon{ width:28px; height:28px; }
.site-header .site-title{ font-weight:800; font-size: clamp(1.4rem, 3.2vw, 2.2rem); margin:.15rem 0 0; text-align:center; }
.site-header .site-subtitle{ font-size: clamp(.9rem, 1.2vw, 1.05rem); opacity:.85; margin-top:.35rem; text-align:center; }
.site-header.shrink .header-inner{ padding:.6rem 1rem; }
.site-header.shrink .site-title{ font-size:1.25rem; }
.site-header.shrink .sport-icons .icon{ width:22px; height:22px; }
.site-header.shrink .site-subtitle{ display:none; }


/* === subheader 3-icons === */
.subheader-icons{ display:flex; gap:.5rem; align-items:center; justify-content:center; margin: .25rem 0 .35rem; }
.subheader-icons .icon{ width:22px; height:22px; }

/* === rebuilt subheader (left icons + text) === */
.subheader{ padding: 0.75rem 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.subheader .subheader-inner{ max-width:1100px; margin:0 auto; padding: 0 1rem; display:flex; align-items:center; gap:.75rem; }
.subheader .subheader-icons{ display:flex; gap:.35rem; flex:0 0 auto; }
.subheader .subheader-icons .icon{ width:24px; height:24px; }
.subheader .subheader-text h2{ margin:0; font-size:1.35rem; font-weight:800; }
.subheader .subheader-text p{ margin:.15rem 0 0; opacity:.8; }
@media (max-width: 640px){
  .subheader .subheader-text h2{ font-size:1.15rem; }
  .subheader .subheader-icons .icon{ width:20px; height:20px; }
}





/* hide legacy container brand header */
header .container.brand{display:none!important;}

/* Today page: back-to-home top bar */
.page-topbar{position:sticky;top:0;z-index:48;background:linear-gradient(180deg,rgba(10,16,28,.85),rgba(10,16,28,.6));backdrop-filter:blur(6px);padding:.5rem 1rem;border-bottom:1px solid rgba(255,255,255,.06)}
.page-topbar .back-home{display:inline-block;padding:.45rem .75rem;border-radius:.65rem;background:var(--chip);color:var(--text);text-decoration:none;font-weight:600}
.page-topbar .back-home:hover{background:rgba(62,168,255,.13);box-shadow:0 0 0 2px var(--ring) inset}
@media (max-width:520px){.page-topbar{padding:.4rem .75rem}.page-topbar .back-home{padding:.4rem .6rem}}


/* --- PATCH: Subheader başlık ortalama --- */
.subheader {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: 0 auto;
}

.subheader-icons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.subheader-text h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.subheader-text p {
  font-size: 1rem;
  opacity: 0.9;
}


/* --- PATCH: Subheader title size & Today topbar title --- */
.subheader-text h2 {
  font-size: 2rem;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .subheader-text h2 { font-size: 2.25rem; }
}
.page-topbar {
  display: flex;
  align-items: center;
  justify-content: center; /* title stays centered */
  position: relative;
  gap: 0.5rem;
  min-height: 56px;
}
.page-topbar .back-home {
  position: absolute;
  left: 0;
}
.topbar-title {
  font-weight: 700;
  font-size: 1.125rem;
}


/* --- PATCH: Ana başlık (Maçlar Nerede?) --- */
.main-header {
  text-align: center;
  padding: 2rem 1rem 1rem;
}
.site-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--text-color, #fff);
  letter-spacing: -0.02em;
}
@media (max-width: 768px) {
  .site-title {
    font-size: 2.2rem;
  }
}


    /* --- PATCH2: Ana başlık (Maçlar Nerede?) görünürlük & ölçüler --- */
    .main-header {
      text-align: center;
      padding: 2rem 1rem 1rem;
      position: relative;
      z-index: 1;
    }
    .site-title {
      font-size: 2.9rem;
      font-weight: 800;
      line-height: 1.1;
      margin: 0;
      color: inherit;
      letter-spacing: -0.02em;
    }
    @media (max-width: 768px) {
      .site-title { font-size: 2.25rem; }
    }
    

/* --- PATCH FINAL: Ana başlık (Maçlar Nerede?) --- */
.main-header {
  text-align: center;
  padding: 2.5rem 1rem 1rem;
  background: transparent;
  position: relative;
  z-index: 10;
}
.site-title {
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  color: #111;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
  .site-title {
    font-size: 2.4rem;
  }
}


/* --- PATCH: Dynamic calendar emoji (SVG) --- */
.calendar-emoji{ display:inline-block; width:22px; height:22px; vertical-align:-4px; margin-right:6px }
.calendar-emoji svg{ width:100%; height:100%; display:block }


/* --- PATCH: Title color & date text next to calendar --- */
.main-header .site-title{ color:#ffffff !important; text-shadow:0 2px 6px rgba(0,0,0,0.25); }
.calendar-emoji{ display:inline-block; width:22px; height:22px; vertical-align:-4px; margin-right:8px }
.lead-chip{ display:flex; align-items:center; gap:8px; }
#today-label{ font-weight:600; opacity:0.92; }
@media (max-width: 480px){ #today-label{ font-size:0.95rem; } }

/* --- PATCH: Category selector tiles --- */
.category-choices{
  margin: 32px auto 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 960px;
}
@media (min-width: 640px){
  .category-choices{ grid-template-columns: repeat(3, 1fr); }
}
.cat-tile{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  transition: opacity .25s ease;
}
.cat-tile:hover, .cat-tile:focus{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.cat-tile.voleybol::before,
.cat-tile.basketbol::before,
.cat-tile.futbol::before{
  content: '';
  width: 10px; height: 10px; border-radius: 999px; margin-right: 10px;
}
.cat-tile.voleybol::before{ background:#f59e0b; }
.cat-tile.basketbol::before{ background:#ef4444; }
.cat-tile.futbol::before{ background:#22c55e; }

/* --- PATCH: Voleybol label and back-home button --- */
.sport-label{
  text-align:center;
  font-weight:700;
  font-size:1.25rem;
  color:#fbbf24;
  margin-top:12px;
}
.back-home-btn{
  display:inline-block;
  padding:10px 20px;
  border-radius:8px;
  background:#3b82f6;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition: opacity .25s ease;
}
.back-home-btn:hover{ background:#2563eb; }

/* --- PATCH: Voleybol top back-home button --- */
.back-home-top{
  background:#2563eb;
  margin-top:12px;
}
.back-home-top:hover{
  background:#1d4ed8;
}


/* --- PATCH: Today card emoji sizing (minimal) --- */
.kv { display:flex; align-items:center; gap:8px; }
.kv { font-size: .95rem; }
.kv::first-letter{ } /* noop to keep patch anchor unique */

/* === Today Page: 4-column grid layout === */
#today-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
#today-cards .card { width: 100%; }

/* Responsive fallbacks */
@media (max-width: 1280px) {
  #today-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  #today-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #today-cards { grid-template-columns: 1fr; }
}


/* === Mobil için "Bugün oynanan maçlar" yatay kaydırma override === */
@media (max-width: 767px) {
  /* Yalnız bugün bölümüne ekleyeceğimiz sınıf */
  .today-mobile-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 8px 12px;
  }
  .today-mobile-scroll .card {
    flex: 0 0 auto;
    min-width: 85vw;
    scroll-snap-align: start;
  }
  .today-mobile-scroll::-webkit-scrollbar { display: none; }

  /* Grid düzeni varsa mobilde yatay akışı engellemesin */
  .today-mobile-scroll {
    grid-auto-flow: column;
    grid-auto-columns: 85vw;
  }
}


/* === Mobile overrides for 'Bugün oynanan maçlar' carousel === */
@media (max-width: 767px){
  .today-viewport{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .today-track{
    grid-auto-columns: 85vw !important;
  }
  .today-track > *{
    scroll-snap-align: start;
  }
  /* Optional: hide desktop arrows on mobile */
  .today-carousel .nav-arrow{ display: none; }
}


/* === Lig/rozet taşmalarını engelleme === */
.card .meta, .card .tags, .card .leagues, .card .badges, .card .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: hidden;
}

.card .chip, .card .badge, .card .tag {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Başlık satırı ve uzun metinler için güvenli kırpma */
.card .title, .card .subtitle, 


/* === Lig isimleri: kırpma yok, en fazla 2 satır, taşma yok === */


/* Eğer daha önce genel chip'lerde nowrap varsa, lig özelinde ez */



/* === Lig isimleri (league chips) iki satıra kadar, kırpma yok === */


/* Genel chip kuralları lig özelinde ezilsin */



/* === CLEAN: Lig satırı iki satır, ellipsis yok, kart içinde taşma yok === */
.card .league-line,
.card .league-name,
.card .chip.league,
.card .badge.league,
.card .tag.league {
  /* çok satır desteği */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  /* pill yapısını bozma: padding ve radius kalsın, yalnızca metin sarsın */
  display: block;           /* inline-flex ezilebilir; metnin sarabilmesi için block */
  line-height: 1.25;
  max-width: 100%;

  /* 2 satır sınırı, ellipsis YOK; taşan 3. satır gizlenir */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: clip;
  overflow: hidden;
}

/* Chip/satır kapsayıcıları sarabilsin */
.card .meta, .card .leagues, .card .chip-row, .card .badges, .card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
}


/* === ONLY cards' league badge: wrap up to 2 lines, no ellipsis (safe, minimal) === */
article.card > .badge {
  display: block;               /* allow multi-line */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  /* clamp to 2 lines (no visual ellipsis) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* === Logo (Centered Header - Dark Friendly) === */
.site-header{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:16px 0 8px;
  margin-bottom:8px;
}
.site-header--transparent{
  background: transparent;
  border: none;
}
.site-logo{ height:120px;
  width:auto;
  max-width:92vw;
  object-fit:contain;
  /* If logo is too dark on dark bg, uncomment the next line to brighten:
     filter: drop-shadow(0 0 12px rgba(255,255,255,0.08));
  */
}
@media (max-width: 600px){ .site-logo{ height:84px; }
}


/* -- Anti-blur overrides for header -- */
.site-header,
.site-header *{
  filter: none !important;
  -webkit-filter: none !important;
}
.site-header{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  position: relative;
  z-index: 2;
}



/* === Homepage Larger Logo === */
body.index-page .site-logo{
  height: 150px !important;
}
@media (max-width:600px){
  body.index-page .site-logo{
    height:110px !important;
  }
}




/* === HERO HOMEPAGE ENHANCEMENTS === */

/* Typography */
body { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body.index-page h1 { 
  font-family: 'Bebas Neue', Impact, system-ui, sans-serif; 
  letter-spacing: 0.5px;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.05;
  margin-top: 8px;
  margin-bottom: 6px;
  animation: fadeDown 0.8s ease-out both;
}
body.index-page h2, 
body.index-page .subtitle, 
body.index-page p.subtitle {
  font-weight: 600;
  opacity: 0.9;
  animation: fadeDown 1s ease-out both;
  animation-delay: .05s;
}

/* Background gradient (dark-friendly) */
body {
  background: radial-gradient(1200px 600px at 50% -10%, rgba(0, 164, 255, .06), transparent 60%),
              linear-gradient(180deg, #0b132b 0%, #151e37 60%, #0b132b 100%);
}

/* Logo glow + larger on homepage */
body.index-page .site-logo{
  height: 170px !important;
  filter: drop-shadow(0 6px 22px rgba(0, 180, 255, 0.25));
}

/* Gentle entrance for header area */
@keyframes fadeDown {
  0% { opacity: 0; transform: translateY(-14px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hover refinements for cards and buttons */
.card, .home-card, .category-card {
  transition: opacity .25s ease;
}
.card:hover, .home-card:hover, .category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.btn, .button, a.btn {
  transition: opacity .25s ease;
}
.btn:hover, .button:hover, a.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 200, 255, 0.18);
}

/* Space under logo to breathe */
.site-header { margin-bottom: 12px; }

/* Anti-blur safety remains */
.site-header, .site-header *{ filter:none !important; -webkit-filter:none !important; }
.site-header{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:transparent !important; position:relative; z-index:2; }




/* === Voleybol Page — Scoped Enhancements (safe) === */
body.voleybol-page{
  /* subtle animated gradient */
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(0, 164, 255, .05), transparent 60%),
    linear-gradient(180deg, #0b132b 0%, #151e37 60%, #0b132b 100%);
  background-size: 200% 200%;
  /* animation removed to prevent CLS */
}
 100%{background-position:100% 100%} }
@media (prefers-reduced-motion: reduce){ body.voleybol-page{ animation:none } }

/* Headings: only on voleybol page */
body.voleybol-page h1,
body.voleybol-page .page-title{
  font-family: 'Bebas Neue', Impact, system-ui, sans-serif;
  letter-spacing: .5px;
}
body.voleybol-page h2,
body.voleybol-page .section-title{
  font-family: 'Bebas Neue', Impact, system-ui, sans-serif;
  letter-spacing: .3px;
}

/* One-time entrance animation */
body.voleybol-page .vb-animate-in{animation:fadeIn .3s ease forwards;will-change:auto}
body.voleybol-page .vb-anim-delay-0{ animation-delay: .05s; }
body.voleybol-page .vb-anim-delay-1{ animation-delay: .12s; }
body.voleybol-page .vb-anim-delay-2{ animation-delay: .18s; }
body.voleybol-page .vb-anim-delay-3{ animation-delay: .24s; }
@keyframes vbFadeUp{
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Gentle hover on cards/buttons */
body.voleybol-page .card,
body.voleybol-page .home-card,
body.voleybol-page .category-card{
  transition: opacity .25s ease;
}
body.voleybol-page .card:hover,
body.voleybol-page .home-card:hover,
body.voleybol-page .category-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
body.voleybol-page .btn, body.voleybol-page a.btn, body.voleybol-page .button{
  transition: opacity .25s ease;
}
body.voleybol-page .btn:hover, body.voleybol-page a.btn:hover, body.voleybol-page .button:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 200, 255, 0.16);
}

/* Safety: never blur content */
body.voleybol-page *{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }



/* === Mobile date input visibility fix (iOS/WebKit & dark theme) === */
input[type="date"]{
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-900, #0b1323);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px 12px;
  border-radius: 9999px;
  color: #e5e7eb;
  font: inherit;
  min-width: 12ch;
  line-height: 1.2;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field{
  color: #e5e7eb;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: .85;
}


/* --- Performance & CLS fixes for /voleybol --- */
body.voleybol-page{ min-height:100vh; }
body.voleybol-page .site-header{ min-height:72px }
body.voleybol-page section.filters{  contain: layout paint;  min-height: 64px;}
body.voleybol-page .match-list, 
body.voleybol-page .cards, 
body.voleybol-page .list, 
body.voleybol-page .grid{
  content-visibility:auto;
  contain-intrinsic-size: 900px 1200px;
}

/* Pause paint-heavy animations until ready and for reduced-motion */
@media (prefers-reduced-motion: reduce){
  
}

/* Avoid composite-less animation properties */
body.voleybol-page .back-home-btn,
body.voleybol-page .btn{
  will-change: transform;
  transform: translateZ(0);
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.defer-visibility{content-visibility:auto;contain-intrinsic-size:1px 800px}


/* Chooser in-card */
.venue-actions{ position:relative; min-height:56px; }
.mc-chooser{ position:relative; display:block; }
.mc-chooser__menu{
  position:absolute; left:0; bottom:0; transform:translateY(8px);
  display:inline-flex; gap:12px; padding:10px 12px;
  border:1px solid rgba(255,255,255,.08); border-radius:12px;
  background: rgba(13,23,42,.95); color:#E5E7EB;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index:20;
}
.mc-chooser__btn{
  display:inline-block; padding:8px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(30,41,59,.9); color:#E5E7EB;
  text-decoration:none; font-weight:600;
}
.mc-chooser__btn:hover{ filter:brightness(1.05); }


/* === Maps Chooser — refined aesthetics === */
:root{
  --mc-bg: rgba(17, 24, 39, 0.85);         /* slate-900 glass */
  --mc-border: rgba(255,255,255,0.10);
  --mc-btn-bg: rgba(31, 41, 55, 0.92);     /* slate-800 glass */
  --mc-btn-border: rgba(255,255,255,0.14);
  --mc-text: #E5E7EB;                      /* gray-200 */
  --mc-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
@media (prefers-color-scheme: light){
  :root{
    --mc-bg: rgba(255,255,255,0.95);
    --mc-border: rgba(15,23,42,0.10);
    --mc-btn-bg: rgba(248,250,252,0.98);
    --mc-btn-border: rgba(15,23,42,0.12);
    --mc-text: #111827;
    --mc-shadow: 0 10px 26px rgba(0,0,0,0.12);
  }
}

.venue-actions{
  position: relative;
  min-height: 56px;
  padding-bottom: 4px;
}

.mc-chooser{
  position: relative;
  display: block;
  contain: layout paint;
}

.mc-chooser__menu{
  position: absolute;
  left: 0; bottom: 0; transform: translateY(10px);
  display: inline-flex; flex-wrap: wrap; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--mc-border);
  border-radius: 14px;
  background: var(--mc-bg);
  color: var(--mc-text);
  backdrop-filter: blur(8px);
  box-shadow: var(--mc-shadow);
  z-index: 22;
  max-width: calc(100% - 8px);
}

.mc-chooser__btn{
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid var(--mc-btn-border);
  background: var(--mc-btn-bg);
  color: var(--mc-text);
  text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: .01em;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.mc-chooser__btn:hover{ filter:brightness(1.05); transform: translateY(-1px); }
.mc-chooser__btn:active{ transform: translateY(0); }
.mc-chooser__btn:focus-visible{ outline: 2px solid #60A5FA; outline-offset: 2px; }

/* enter animation */
.mc-chooser--enter{ opacity: 0; transform: translateY(16px) scale(.98); }
.mc-chooser--enter-active{ opacity: 1; transform: translateY(10px) scale(1); transition: all .22s ease; }

/* little arrow */
.mc-chooser__menu::after{
  content: ""; position: absolute; left: 18px; bottom: 100%;
  border-width: 8px; border-style: solid;
  border-color: transparent transparent var(--mc-bg) transparent;
  filter: drop-shadow(0 -1px 0 var(--mc-border));
}

/* Compact on very small screens → transforms to bottom sheet bar */
@media (max-width: 420px){
  .mc-chooser__menu{
    left: 8px; right: 8px; bottom: 8px; transform: none;
    width: auto; max-width: none;
    justify-content: space-between;
  }
  .mc-chooser__menu::after{ display: none; }
  .venue-actions{ min-height: 64px; }
}


/* Fix: keep button layout; menu overlays, toggles */
.venue-actions{
  position: relative;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.mc-chooser{
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 22;
}
.mc-chooser__menu{
  position: relative;
}


/* === On-top chooser (portal) === */
.mc-portal{
  position: fixed; inset: 0 0 auto 0;   /* top/left set by JS; full overlay for outside click */
  width: 100%; height: 0;
  z-index: 10050;
}
.mc-portal__menu{
  position: absolute; left: 0; top: 0;
  background: rgba(17,24,39,0.92); color: #E5E7EB;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0,0,0,0.38);
  padding: 12px;
  backdrop-filter: blur(8px);
}
.mc-portal__title{
  font-weight: 800; font-size: 13px; letter-spacing: .02em;
  opacity: .9; margin: 4px 4px 8px;
}
.mc-portal__row{ display: flex; gap: 10px; }
.mc-portal__btn{
  display: inline-flex; align-items:center; justify-content:center;
  padding: 9px 14px; border-radius: 12px; text-decoration: none;
  background: rgba(31,41,55,0.92); color:#E5E7EB;
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 700; font-size: 14px;
}
.mc-portal__btn:hover{ filter:brightness(1.06); transform: translateY(-1px); transition: all .12s ease; }
.mc-portal--enter{ opacity: 0; }
.mc-portal--enter-active{ opacity: 1; transition: opacity .18s ease; }
/* light scheme */
@media (prefers-color-scheme: light){
  .mc-portal__menu{
    background: rgba(255,255,255,0.98); color:#111827;
    border-color: rgba(15,23,42,0.10);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  }
  .mc-portal__btn{
    background: rgba(248,250,252,0.98); color:#111827;
    border-color: rgba(15,23,42,0.12);
  }
}


/* === Portal chooser styles (dark/light, perf-friendly) === */
.mc-portal{
  position: fixed; z-index: 10050; inset: 0 0 auto 0; height: 0;
}
.mc-portal__menu{
  position: absolute; left: 0; top: 0;
  background: rgba(17,24,39,0.92); color: #E5E7EB;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0,0,0,0.38);
  padding: 12px;
  backdrop-filter: blur(8px);
  will-change: transform, opacity;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform .22s ease-out, opacity .22s ease-out;
  max-width: 380px;
}
.mc-portal--enter-active .mc-portal__menu{ transform: translateY(0) scale(1); opacity: 1; }
.mc-portal__title{ font-weight: 800; font-size: 13px; letter-spacing: .02em; opacity: .9; margin: 4px 4px 10px; }
.mc-portal__row{ display: flex; gap: 10px; }
.mc-portal__btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 12px; text-decoration: none;
  background: rgba(31,41,55,0.92); color:#E5E7EB;
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 700; font-size: 14px;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  will-change: transform;
}
.mc-portal__btn:hover{ transform: translateY(-1px) scale(1.03); filter: brightness(1.05); }
.mc-portal__icon{ flex: 0 0 18px; }
@media (prefers-color-scheme: light){
  .mc-portal__menu{ background: rgba(255,255,255,0.98); color:#111827; border-color: rgba(15,23,42,0.10); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
  .mc-portal__btn{ background: rgba(248,250,252,0.98); color:#111827; border-color: rgba(15,23,42,0.12); }
}