/* =============================================================
   index.php — ana sayfa stilleri
   ============================================================= */

/* =============================================================
   HERO PRO — sportif athletic dark hero
   ============================================================= */

.hero-pro{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-athletic-900);
  color: #fff;
  margin: 0 0 var(--sp-8);
  /* hero üst tarafı navbar offset'i kadar yukarıya uzansın */
  margin-top: calc(-1 * var(--nav-h));
  padding-top: calc(var(--nav-h) + var(--sp-10));
  padding-bottom: var(--sp-12);
}

.hero-pro-bg{
  position: absolute;
  inset: 0;
  z-index: -2;
  /* .08 idi — tavla deseni tamamen görünmezdi */
  opacity: .22;
}

.hero-pro-vignette{
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Renk noktaları .18/.16 idi; koyu overlay de .85'e kadar çıkınca
     hero tek düze lacivert bir bloğa dönüşüyordu. Renkler yukarı,
     overlay aşağı: aynı okunabilirlik, görünür renk. */
  background:
    radial-gradient(900px 380px at 18% 20%, rgba(var(--c-primary-rgb),.55), transparent 68%),
    radial-gradient(760px 340px at 82% 78%, rgba(var(--c-champion-rgb),.38), transparent 64%),
    radial-gradient(520px 260px at 60% 0%, rgba(var(--c-hot-rgb),.22), transparent 70%),
    linear-gradient(180deg, rgba(6,11,30,.42) 0%, rgba(6,11,30,.80) 100%);
}

/* Hero'nun altında ince altın çizgi — sayfayı "bitiriyor" */
.hero-pro::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--c-champion-500) 0%,
    var(--c-primary-500) 45%,
    var(--c-hot-500) 100%);
  opacity: .9;
  z-index: 2;
}

.hero-pro-accent{
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.hero-pro-accent-gold{
  top: -40px;
  left: -40px;
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, var(--c-champion-500) 0%, transparent 60%);
  opacity: .55;
  border-radius: 0 0 100% 0;
}

.hero-pro-accent-red{
  bottom: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: linear-gradient(315deg, var(--c-hot-500) 0%, transparent 60%);
  opacity: .45;
  border-radius: 100% 0 0 0;
}

.hero-pro-inner{
  position: relative;
  z-index: 1;
}

.hero-pro-eyebrow{
  margin-bottom: var(--sp-3);
}

.hero-pro-title{
  color: #fff;
  margin: 0 0 var(--sp-3);
  /* 1.05 idi; Türkçe İ/Ğ/Ş üst işaretlerini kırpıyordu */
  line-height: var(--lh-tight);
}

.hero-pro-line{
  display: block;
  margin-bottom: var(--sp-4);
}

.hero-pro-sub{
  color: var(--c-hero-muted);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 520px;
  margin: 0;
}

/* Hero pro buttons should include icon spacing */
.hero-pro .btn-primary-pro,
.hero-pro .btn-ghost-on-dark{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-block: .65rem;
  padding-inline: 1.35rem;
  font-size: .98rem;
}

/* ---------- Hero görseli ----------
   Sağ sütun. Görsel yoksa PHP tarafı sütunu hiç basmıyor, burada da
   karşılığı olmuyor — eksik dosya boş kutu bırakmasın. */

/* .hero-pro-visual kaldirildi: hero gorseli konmayacagina karar
   verildi, kurali kullanan markup index.php'den cikti. */


/* ---------- Stat şeridi (yatay, ikonlu) ----------
   Önceden sağ sütunda 2x2 ızgaraydı; sağ sütun görsele ayrılınca
   butonların altına yatay şerit olarak indi. Dört sayı yan yana
   okununca birbirleriyle karşılaştırılabiliyor.

   auto-fit + minmax: dar ekranda kendiliğinden 2'ye, sonra 1'e
   düşüyor; ayrı breakpoint kuralı yazmaya gerek kalmıyor. */

.hero-pro-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.hero-pro-tile{
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-hero-glass);
  border: 1px solid var(--c-hero-glass-bd);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  min-height: 78px;
  transition: transform var(--t-base), border-color var(--t-base);
  overflow: hidden;
}

.hero-pro-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
}

.hero-pro-tile-icon{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 1.15rem;
}

.hero-pro-tile-body{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hero-pro-tile-value{
  font-family: var(--font-numeric);
  font-size: clamp(1.5rem, 1.4vw + .9rem, 1.95rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;   /* rakamlar sütun hâlinde hizalansın */
  letter-spacing: -.02em;
}

.hero-pro-tile-label{
  font-size: .82rem;
  color: rgba(255,255,255,.72);
  line-height: 1.2;
}

/* Dernek kutusu vurgulu kalıyor — mevcut şampiyon rengiyle. */
.hero-pro-tile.is-champion{
  background: rgba(var(--c-champion-rgb), .20);
  border-color: rgba(var(--c-champion-rgb), .55);
  box-shadow: 0 8px 24px -12px rgba(var(--c-champion-rgb), .6);
}

.hero-pro-tile.is-champion .hero-pro-tile-icon{
  background: rgba(var(--c-champion-rgb), .28);
  border-color: rgba(var(--c-champion-rgb), .45);
  color: var(--c-champion-300);
}

.hero-pro-tile.is-champion .hero-pro-tile-value{
  color: var(--c-champion-300);
}

.hero-pro-tile.is-champion .hero-pro-tile-label{
  color: rgba(var(--c-champion-rgb), .85);
}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px){
  .hero-pro{
    margin-top: calc(-1 * var(--nav-h-mobile));
    padding-top: calc(var(--nav-h-mobile) + var(--sp-8));
    padding-bottom: var(--sp-10);
    margin-bottom: var(--sp-6);
  }

  .hero-pro-eyebrow{
    font-size: .68rem;
  }

  .hero-pro-sub{
    font-size: 1rem;
  }

  .hero-pro-stats{
    margin-top: var(--sp-6);
  }
}

@media (max-width: 575.98px){
  .hero-pro{
    padding-top: calc(var(--nav-h-mobile) + var(--sp-6));
    padding-bottom: var(--sp-8);
  }

  .hero-pro-eyebrow{ font-size: .64rem; }

  .hero-pro-tile{
    padding: var(--sp-3);
    min-height: 78px;
  }

  .hero-pro-tile-value{ font-size: 1.5rem; }

  /* hero butonları küçük ekranda eşit genişlik */
  .hero-pro .btn-primary-pro,
  .hero-pro .btn-ghost-on-dark{
    flex: 1 1 calc(50% - .25rem);
    justify-content: center;
  }

  .hero-pro-accent-gold,
  .hero-pro-accent-red{
    width: 110px;
    height: 110px;
  }
}

/* =============================================================
   HOME STREAM — son turnuvalar / ligler sekmesi
   ============================================================= */

#home-stream{
  background: var(--c-neutral-50);
  padding-block: var(--sp-10);
}

#home-stream > .container > .row > .col-lg-8 > .card{
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}

/* Tab pills sportif */
#homeTabs.nav-pills{
  border-bottom: 1px solid var(--c-border-soft);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4) !important;
}

#homeTabs .nav-link{
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--c-text-muted);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  padding: .5rem 1.1rem;
  transition: all var(--t-base);
}

#homeTabs .nav-link:hover{
  color: var(--c-primary-700);
  background: var(--c-primary-50);
}

#homeTabs .nav-link.active{
  background: var(--g-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--sh-primary);
}

#homeTabs .nav-link.active i{
  color: var(--c-champion-300);
}

/* ---------- Turnuva / Lig kartları ---------- */

.home-item-card{
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 4px);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  overflow: hidden;
}

.home-item-card::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--c-neutral-300);
  transition: background var(--t-base), width var(--t-base);
}

.home-item-card:hover{
  border-color: var(--c-border);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.home-item-card:hover::before{ width: 7px; }

/* Status accent for tournament cards (.tl-status holds status class) */
.home-item-card:has(.tl-status.s0)::before{ background: var(--g-champion); }
.home-item-card:has(.tl-status.s1)::before{ background: var(--g-primary); }
.home-item-card:has(.tl-status.s2)::before{ background: linear-gradient(180deg, var(--c-success-500), var(--c-success-700)); }

/* Status accent for league cards (.home-league-status via parent class) */
.home-item-card.st-1::before{ background: var(--g-primary); }
.home-item-card.st-0::before{ background: linear-gradient(180deg, var(--c-success-500), var(--c-success-700)); }

.home-item-title{
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  text-decoration: none;
  letter-spacing: -.01em;
  line-height: 1.25;
  display: inline-block;
}

.home-item-title:hover{
  color: var(--c-primary-700);
  text-decoration: none;
}

.home-item-card .text-muted.small{
  color: var(--c-text-muted) !important;
  font-size: .82rem;
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
}

.home-item-card .text-muted.small i{
  color: var(--c-text-subtle);
}

/* Statü etiketleri: .tl-status / .home-league-status görünümü
   components.css §5'te tanımlı — burada tekrar edilmiyor. */

/* Meta rozetler (oyuncu sayısı, format vs.) */
.home-item-card .badge.text-bg-light{
  background: var(--c-neutral-100) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border-soft) !important;
  border-radius: var(--r-pill);
  padding: .35rem .65rem;
  font-weight: var(--fw-semibold);
  font-size: .76rem;
}

.home-item-card .badge.text-bg-light i{
  color: var(--c-text-muted);
}

.home-item-card .badge.bg-info{
  background: var(--c-primary-100) !important;
  color: var(--c-primary-800) !important;
  border-radius: var(--r-pill);
  padding: .35rem .65rem;
  font-weight: var(--fw-semibold);
  font-size: .76rem;
}

.home-item-card .badge.bg-warning.text-dark{
  background: var(--c-champion-100) !important;
  color: var(--c-champion-800) !important;
  border-radius: var(--r-pill);
  padding: .35rem .65rem;
  font-weight: var(--fw-semibold);
  font-size: .76rem;
}

/* "Tüm turnuvalar" outline butonu sportif */
#home-stream .btn.btn-outline-primary{
  border-radius: var(--r-pill);
  padding: .55rem 1.25rem;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  border-color: var(--c-border);
  color: var(--c-text);
  transition: all var(--t-base);
}

#home-stream .btn.btn-outline-primary:hover{
  background: var(--c-athletic-900);
  border-color: var(--c-athletic-900);
  color: #fff;
}

.home-item-title{
  font-size:1.05rem;
  font-weight:700;
  color:inherit;
  text-decoration:none;
}
.home-item-title:hover{ text-decoration:underline; }

.home-match-card{
  border:1px solid var(--c-border-soft);
  border-radius:14px;
  padding:14px;
  background:#fff;
}

.home-match-player{
  flex:1 1 0;
  min-width:0;
  font-size:.95rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.home-match-player.is-winner{
  font-weight:700;
  color:#198754;
}

.home-match-score{
  flex:0 0 auto;
  font-weight:800;
  padding:6px 10px;
  border-radius:10px;
  background:#f8f9fa;
  border:1px solid var(--c-border);
}

/* =============================================================
   Ozellikler — uc sutun
   -------------------------------------------------------------
   Onceden on iki esit .feature-card vardi (4 sutunlu izgara). Besi
   ayni seyi soyluyordu ve liste kime seslendigini soylemiyordu.

   Yeni yapi: dernekler / oyuncular / her yerde. Kart yok, sutun var;
   her satir bir ikon + kisa baslik + tek cumle. Mobilde alt alta.
   ============================================================= */
.ozellik-izgara{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.5rem;
}

.ozellik-sutun{
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-xl);
  background:var(--c-surface);
  padding:22px;
}

.ozellik-sutun-baslik{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0 0 1.1rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--c-border-soft);
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:var(--fw-bold);
  letter-spacing:-.01em;
  color:var(--c-text);
}

.ozellik-sutun-baslik i{
  color:var(--c-primary-600);
  font-size:1.1rem;
}

.ozellik-liste{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.ozellik{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
}

.ozellik-ikon{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(var(--c-primary-rgb),.10);
  color:var(--c-primary-600);
  font-size:.95rem;
}

.ozellik-govde{ min-width:0; }

.ozellik-ad{
  display:block;
  font-family:var(--font-ui);
  font-weight:var(--fw-semibold);
  font-size:.95rem;
  line-height:1.35;
  color:var(--c-text);
}

.ozellik-metin{
  display:block;
  margin-top:1px;
  font-size:.86rem;
  line-height:1.45;
  color:var(--c-text-muted);
}

@media (max-width:575.98px){
  .ozellik-izgara{ gap:1rem; }
  .ozellik-sutun{ padding:16px; }
  .ozellik-liste{ gap:.85rem; }
  .ozellik-ikon{ width:28px; height:28px; border-radius:8px; font-size:.85rem; }
  .ozellik-ad{ font-size:.9rem; }
  .ozellik-metin{ font-size:.82rem; }
}

/* =============================================================
   Apps showcase (mobile app banner)
   ============================================================= */

.apps-showcase{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(var(--c-primary-rgb),.10);
  border-radius:28px;
  padding:32px;
  background:
    radial-gradient(circle at top left, rgba(var(--c-primary-rgb),.16), transparent 36%),
    radial-gradient(circle at bottom right, rgba(25,135,84,.14), transparent 32%),
    linear-gradient(135deg, #f8fbff 0%, #ffffff 58%, #f7fbf8 100%);
  box-shadow:0 18px 40px rgba(16,24,40,.08);
}

.apps-showcase::before,
.apps-showcase::after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter:blur(2px);
  pointer-events:none;
}

.apps-showcase::before{
  width:180px;
  height:180px;
  top:-70px;
  right:-40px;
  background:rgba(var(--c-primary-rgb),.08);
}

.apps-showcase::after{
  width:140px;
  height:140px;
  left:-30px;
  bottom:-40px;
  background:rgba(25,135,84,.08);
}

.apps-copy{
  position:relative;
  z-index:1;
}

.apps-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(var(--c-primary-rgb),.12);
  color:#0d4db8;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.02em;
}

.apps-title{
  font-size:clamp(1.9rem, 3vw, 2.7rem);
  line-height:1.1;
  margin:16px 0 14px;
  color:#14213d;
}

.apps-subtitle{
  max-width:640px;
  color:#5c667a;
  font-size:1rem;
  line-height:1.7;
  margin-bottom:0;
}

.apps-points{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}

.apps-points li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(20,33,61,.08);
  color:#31415f;
  font-weight:600;
}

.apps-points i{ color:#198754; }

.store-grid{
  position:relative;
  z-index:1;
  display:grid;
  gap:18px;
}

.store-card{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:142px;
  padding:22px;
  text-decoration:none;
  color:inherit;
  border-radius:22px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(20,33,61,.08);
  box-shadow:0 14px 30px rgba(16,24,40,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.store-card:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--c-primary-rgb),.25);
  box-shadow:0 18px 34px rgba(16,24,40,.12);
}

.store-icon{
  width:64px;
  height:64px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.75rem;
  flex:0 0 auto;
}

.store-card.ios .store-icon{
  background:linear-gradient(135deg, #111827 0%, #3b4454 100%);
}

.store-card.android .store-icon{
  background:linear-gradient(135deg, #1faa59 0%, #34d399 100%);
}

.store-overline{
  display:block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
  margin-bottom:4px;
}

.store-title{
  font-size:1.2rem;
  font-weight:800;
  color:#14213d;
  margin-bottom:4px;
}

.store-text{
  margin:0;
  color:#5c667a;
  line-height:1.55;
  font-size:.95rem;
}

.store-arrow{
  margin-left:auto;
  color:var(--c-primary-600);
  font-size:1.25rem;
  flex:0 0 auto;
}

/* =============================================================
   Mobile breakpoints
   ============================================================= */

@media (max-width: 991.98px){
    .apps-showcase{ padding:24px; }
}

@media (max-width: 576px){
  .apps-showcase{
    padding:22px 18px;
    border-radius:22px;
  }

  .apps-title{ font-size:1.7rem; }

  .apps-points{ gap:10px; }
  .apps-points li{
    width:100%;
    justify-content:flex-start;
  }

  .store-card{
    min-height:auto;
    padding:18px;
    gap:14px;
    border-radius:18px;
  }

  .store-icon{
    width:56px;
    height:56px;
    border-radius:18px;
    font-size:1.5rem;
  }
}

@media (max-width: 767.98px){
/* küçük ekranda iki buton eşit genişlikte alt alta değil, yan yana sığsın */
}

/* ---------- Hero içindeki davet bandı ----------
   Eskiden sayfanın ortasında ayrı bir .join-cta bölümüydü ve kendi koyu
   zeminini, süs katmanlarını kuruyordu. Hero'nun içine taşınınca bunların
   hiçbiri gerekmiyor: zemin zaten hero'nun. Geriye yalnızca istatistik
   şeridinden ayıran ince bir çizgi kalıyor. */

.hero-pro-join{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5, 20px);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(255,255,255,.12);
}

.hero-pro-join-text{ flex: 1 1 380px; min-width: 0; }

.hero-pro-join-title{
  font-family: var(--font-display);
  /* Hero başlığından belirgin şekilde küçük: bu ikincil bir çağrı,
     h1 ile yarışmamalı. */
  font-size: clamp(1.15rem, 1.2vw + .8rem, 1.5rem);
  font-weight: var(--fw-bold);
  color: #fff;
  margin: 0 0 .35rem;
  line-height: 1.25;
  text-wrap: balance;
}

.hero-pro-join-sub{
  color: rgba(255,255,255,.72);
  font-size: .95rem;
  line-height: 1.5;
  margin: 0;
  max-width: 56ch;
}

.hero-pro-join-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  flex: 0 0 auto;
}

@media (max-width: 575.98px){
  /* Dar ekranda düğmeler tam genişlik: yan yana sıkışıp okunmaz
     hâle gelmelerindense alt alta dursunlar. */
  .hero-pro-join-actions{ width: 100%; }

  /* display:flex ŞART. Bu düğmeler (.btn-champion, .btn-ghost-on-dark)
     flex kapsayıcı değil, düz <a>; tek başına justify-content yazmak
     hiçbir şey yapmıyordu ve tam genişlikte metin sola yaslı kalıyordu.
     Kapsayıcıyı flex yapınca ikon + metin birlikte ortalanıyor. */
  .hero-pro-join-actions > a{
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    text-align: center;
  }
}