/* ==========================================================================
   DENİZLİ TOFAŞ BASKETBOL OKULLARI — Design System
   TOFAŞ Spor Kulübü sitesinin tasarım sistemi birebir alındı; spor okuluna
   özel parçalar dosyanın sonundaki "Denizli ekleri" bölümünde.

   Motion: giriş için ease-out, UI'da 300 ms altı, yalnız transform/opacity.
   ========================================================================== */

/* Fiat Typeface — TOFAŞ logosundaki yazı karakteri. Türkçe harfler (Ş İ Ğ Ö Ü Ç)
   ve noktalama içermediği için yalnız ASCII içerikli yerlerde (grup kodları,
   sayılar, skor etiketleri) kullanılır; eksik karakterler Archivo'ya düşer.
   Lisans: onlinewebfonts.com, CC BY 4.0 — kredi footer'da. */
@font-face {
  font-family: "Fiat Typeface";
  src: url("../fonts/fiat.woff2?v=2") format("woff2"), url("../fonts/fiat.woff?v=2") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Brand — logodan örneklendi */
  --navy: #1d2751;
  --navy-deep: #131a3a;
  --navy-ink: #0d1226;
  --blue: #003591;
  --blue-600: #002b73;
  --blue-400: #1a55c9;
  --green: #2f8f6e;
  --green-bright: #8fc63f;
  --green-soft: #e8f4ee;

  /* Surfaces */
  --bg: #ffffff;
  --bg-soft: #f4f6fa;
  --bg-softer: #fafbfd;
  --line: #e3e8f0;
  --line-strong: #ccd5e4;

  /* Text */
  --ink: #131a3a;
  --ink-2: #4d5875;
  --ink-3: #5f6b85;            /* ≥4.5:1 kontrast (beyaz ve açık gri zeminde) */
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, 0.74);
  --on-dark-3: rgba(255, 255, 255, 0.66);   /* lacivert zeminde ≥4.5:1 */

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", "Inter", -apple-system, sans-serif;
  --font-fiat: "Fiat Typeface", "Archivo", "Inter", sans-serif;

  /* Motion — hazır easing'ler zayıf kaldığı için özel eğriler */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Elevation — kenarlık yerine yumuşak gölge */
  --sh-1: 0 1px 2px rgba(19, 26, 58, 0.05), 0 1px 3px rgba(19, 26, 58, 0.06);
  --sh-2: 0 4px 10px -2px rgba(19, 26, 58, 0.08), 0 12px 28px -12px rgba(19, 26, 58, 0.18);
  --sh-3: 0 10px 24px -6px rgba(19, 26, 58, 0.12), 0 24px 48px -20px rgba(19, 26, 58, 0.28);

  /* Layout */
  --page: 1200px;
  --gutter: 24px;
  --radius: 10px;
  --radius-lg: 16px;
  --header-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

::selection { background: var(--blue); color: #fff; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 999;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 6px; font-weight: 700;
}
.skip:focus { left: 16px; }

/* ==========================================================================
   Header — üst şerit + beyaz ana bar
   ========================================================================== */

.topbar {
  background: var(--navy-ink);
  color: var(--on-dark-2);
  font-size: 13px;
}
.topbar__in {
  max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter);
  height: 34px; display: flex; align-items: center; gap: 16px;
}
.topbar__lang { display: flex; gap: 2px; }
.topbar__lang button {
  border: 0; background: transparent; color: var(--on-dark-3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 5px; cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, transform 140ms var(--ease-out);
}
.topbar__lang button[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, 0.12); }
.topbar__lang button:active { transform: scale(0.97); }
.topbar__note { color: var(--on-dark-3); }
.topbar__social { margin-left: auto; display: flex; gap: 3px; }
.topbar__social a {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.topbar__social svg { width: 13px; height: 13px; fill: var(--on-dark-3); transition: fill 160ms ease; }
.topbar__social a:active { transform: scale(0.94); }

.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 220ms var(--ease-out);
}
.hdr[data-stuck="true"] { box-shadow: var(--sh-1); }

.hdr__in {
  max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--header-h); display: flex; align-items: center; gap: 22px;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img { width: 52px; height: auto; }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__txt b {
  font-family: var(--font-display); font-size: 16px; font-weight: 800;
  letter-spacing: 0.01em; color: var(--navy);
}
.brand__txt span {
  font-size: 11px; letter-spacing: 0.17em; color: var(--ink-3);
  margin-top: 4px; text-transform: uppercase; font-weight: 600;
}

.nav { display: flex; align-items: center; gap: 1px; margin-left: 12px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 13px; border-radius: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-2); white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease;
}
.nav__link[aria-current="page"] { color: var(--blue); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: -19px;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--blue);
}
.nav__caret { width: 9px; opacity: 0.45; transition: transform 200ms var(--ease-out); }

/* Açılır menü tetikleyicisinden büyür, scale(0)'dan değil */
.nav__menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 226px;
  padding: 6px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--sh-3);
  transform-origin: top left; opacity: 0; transform: scale(0.96) translateY(-4px);
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.nav__item[data-open="true"] .nav__menu { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.nav__item[data-open="true"] .nav__caret { transform: rotate(180deg); }
.nav__item[data-open="true"] > .nav__link { color: var(--blue); background: var(--bg-soft); }
.nav__menu a {
  display: block; padding: 9px 11px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: color 140ms ease, background-color 140ms ease;
}

.hdr__end { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.leagues { display: flex; align-items: center; gap: 12px; }
.leagues img { height: 28px; width: auto; opacity: 0.92; transition: opacity 180ms ease; }
.leaguechip {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 9px;
  transition: color 160ms ease, border-color 160ms ease;
}

.burger {
  display: none; width: 40px; height: 36px; border: 1px solid var(--line-strong);
  background: #fff; border-radius: 9px; cursor: pointer; align-items: center; justify-content: center;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.burger:active { transform: scale(0.97); }
.burger span, .burger span::before, .burger span::after {
  display: block; width: 16px; height: 1.8px; background: var(--navy); border-radius: 2px;
}
.burger span { position: relative; transition: transform 220ms var(--ease-out); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  transition: transform 220ms var(--ease-out), opacity 140ms ease;
}
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }
.burger[aria-expanded="true"] span { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(-90deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-5px); opacity: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border: 1px solid transparent; border-radius: 9px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 180ms ease,
    border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 4px 14px -6px rgba(0, 53, 145, 0.6); }
.btn--outline { border-color: var(--line-strong); background: #fff; color: var(--navy); }
.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--onblue { background: #fff; color: var(--blue); }
.btn--sm { height: 36px; padding: 0 15px; font-size: 13px; border-radius: 8px; }
.btn svg { width: 14px; height: 14px; }

/* ==========================================================================
   Section furniture
   ========================================================================== */

.sec { padding: 68px 0; }
.sec--tight { padding: 44px 0; }
.sec--soft { background: var(--bg-soft); }
.sec--navy { background: var(--navy-ink); color: var(--on-dark); }
.sec--navy .sec__sub { color: var(--on-dark-2); }

.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.sec__title { font-size: clamp(24px, 3vw, 34px); }
.sec--navy .sec__title { color: #fff; }
.sec__sub { color: var(--ink-2); font-size: 16px; margin: 8px 0 0; max-width: 58ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 11px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue);
}
.eyebrow::before { content: ""; width: 20px; height: 3px; border-radius: 2px; background: var(--green-bright); }
.sec--navy .eyebrow { color: var(--green-bright); }

.link-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--blue);
  transition: color 160ms ease;
}
.link-more svg { width: 13px; transition: transform 200ms var(--ease-out); }
.sec--navy .link-more { color: var(--green-bright); }

/* ==========================================================================
   Hero slider
   ========================================================================== */

.hero { background: var(--navy-ink); }
.hero__in { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 0; }

.slider { position: relative; overflow: hidden; }
.slider__track { position: relative; aspect-ratio: 16 / 9; }
.slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 420ms var(--ease-out);
  pointer-events: none;
}
.slide[data-active="true"] { opacity: 1; pointer-events: auto; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
/* Haber görselleri kendi tipografisini taşıyan afişler olduğu için başlığın
   oturduğu sol-alt köşe iki katmanlı bir perde ile ayrıştırılıyor. */
.slide::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 18, 38, 0.8) 0%, rgba(13, 18, 38, 0.25) 46%, rgba(13, 18, 38, 0) 68%),
    linear-gradient(180deg, rgba(13, 18, 38, 0.28) 0%, rgba(13, 18, 38, 0) 34%, rgba(13, 18, 38, 0.72) 72%, rgba(13, 18, 38, 0.96) 100%);
}
.slide__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 32px; z-index: 2; pointer-events: none; }
.slide__body a, .slide__body button { pointer-events: auto; }
/* Görselin tamamı habere gider (düğme ve noktalar üstte kalır) */
.slide__link { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.slide__title {
  color: #fff; text-shadow: 0 2px 20px rgba(13, 18, 38, 0.6); font-size: clamp(20px, 2.4vw, 31px); max-width: 22ch;
  text-wrap: balance; margin-bottom: 14px;
}
.slide__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.slider__nav {
  position: absolute; right: 24px; bottom: 26px; z-index: 3;
  display: flex; gap: 7px;
}
.dot {
  width: 26px; height: 4px; border: 0; padding: 0; border-radius: 3px; cursor: pointer;
  background: rgba(255, 255, 255, 0.32);
  transition: background-color 200ms ease, transform 200ms var(--ease-out);
}
.dot[aria-selected="true"] { background: var(--green-bright); }
.dot:active { transform: scaleY(0.7); }

.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 4px;
  background: var(--green-bright); color: var(--navy-ink);
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.tag--blue { background: var(--blue); color: #fff; }
.tag--ghost { background: rgba(255, 255, 255, 0.14); color: #fff; }
.date { font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.02em; }
.slide .date { color: rgba(255, 255, 255, 0.82); }

/* Sıradaki maç paneli */
.nextmatch { background: var(--blue-600); color: #fff; padding: 26px 26px 24px; display: flex; flex-direction: column; }
.nextmatch__label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green-bright); margin-bottom: 4px;
}
.nextmatch__comp { font-size: 13px; color: var(--on-dark-2); font-weight: 600; margin-bottom: 22px; }
.nextmatch__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 20px; }
.nextmatch__team { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.nextmatch__team img { width: 52px; height: 52px; object-fit: contain; }
.nextmatch__team b { font-size: 13px; font-weight: 700; line-height: 1.25; }
.nextmatch__vs { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--on-dark-3); }
.nextmatch__when { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.nextmatch__where { font-size: 13px; color: var(--on-dark-2); margin: 4px 0 18px; }
.nextmatch__cd { display: flex; gap: 6px; margin-bottom: 18px; }
.cd { flex: 1; text-align: center; padding: 9px 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); }
.cd b {
  display: block; font-family: var(--font-display); font-size: 19px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.cd span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-3); font-weight: 700; }
.nextmatch .btn { width: 100%; margin-top: auto; }

/* ==========================================================================
   Cards
   ========================================================================== */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: block; background: #fff; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease;
}
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease-out); }
.card__badge { position: absolute; top: 11px; left: 11px; z-index: 2; }
.card__body { padding: 15px 16px 18px; }
.card__title {
  font-size: 16px; line-height: 1.3; margin-bottom: 9px; color: var(--navy);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card__meta { display: flex; align-items: center; gap: 9px; }

/* Oyuncu kartı — kadro şeridinin dili */
.pcard {
  display: block; position: relative; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(178deg, #f2f5fa 0%, #e7ecf5 58%, #dde4f0 100%);
  border: 1px solid var(--line);
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease;
}
.pcard__media {
  position: relative; aspect-ratio: 26 / 33;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.pcard__media::before {
  content: ""; position: absolute; left: 50%; bottom: -36%;
  width: 118%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 53, 145, 0.13), rgba(0, 53, 145, 0) 66%);
}
.pcard__media img {
  position: relative; height: 100%; width: auto; object-fit: contain; object-position: bottom center;
  transition: transform 340ms var(--ease-out);
}
.pcard__ghost {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 60px; font-weight: 800;
  letter-spacing: -0.04em; color: rgba(29, 39, 81, 0.15);
}
.pcard__pos {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
  color: #fff; background: var(--blue); padding: 4px 8px; border-radius: 4px;
}
.pcard__flag {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink-2);
  background: rgba(255, 255, 255, 0.9); padding: 3px 7px; border-radius: 4px;
}
.pcard__body { position: relative; padding: 13px 14px 15px; background: #fff; border-top: 1px solid var(--line); }
.pcard__name { font-size: 14px; line-height: 1.2; color: var(--navy); }
.pcard__sub {
  font-size: 11px; color: var(--ink-3); margin-top: 5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Teknik/idari kadro */
.scard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.scard__media { aspect-ratio: 1; background: var(--bg-soft); overflow: hidden; }
.scard__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.scard__body { padding: 13px 14px 15px; }
.scard__name { font-size: 14px; color: var(--navy); }
.scard__title {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue); font-weight: 800; margin-top: 5px;
}

/* ==========================================================================
   Fixtures
   ========================================================================== */

.fx {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) 168px; align-items: center; gap: 18px;
  padding: 15px 20px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--sh-1);
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease;
}
.fx + .fx { margin-top: 10px; }
.fx__comp { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.fx__date { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.fx__row { display: grid; grid-template-columns: 1fr 112px 1fr; align-items: center; gap: 14px; }
.fx__team { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fx__team--a { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.fx__team img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.fx__team b { font-size: 14px; font-weight: 650; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx__score {
  text-align: center; font-family: var(--font-display); font-size: 21px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--navy);
}
.fx__score.pending {
  font-size: 11px; color: var(--ink-3); letter-spacing: 0.09em; font-weight: 800;
  background: var(--bg-soft); border-radius: 6px; padding: 6px 0;
}
.fx__score.win { color: var(--green); }
.fx__score.loss { color: #b3243a; }
.fx__end { display: flex; justify-content: flex-end; }
.fx__venue { font-size: 11px; color: var(--ink-3); text-align: right; line-height: 1.35; }

/* Dar ekranda sekme çubuğu yatay kayar; kırpma hesabı bozulmasın diye
   kaydırma dış kapsayıcıda yapılır. */
.tabsbar {
  margin-bottom: 24px; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 2px;
}
.tabsbar::-webkit-scrollbar { display: none; }

/* Sekmeler — aktif etiket klonun kırpılmış kopyası, renk geçişi göstergeyle senkron */
.tabs {
  position: relative; display: inline-flex; padding: 4px; border-radius: 10px;
  background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; max-width: 100%;
}
.tabs__list { display: flex; gap: 2px; }
.tabs__btn {
  border: 0; background: transparent; padding: 7px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
  transition: color 160ms ease, transform 160ms var(--ease-out);
}
.tabs__btn:active { transform: scale(0.97); }
.tabs__ind {
  position: absolute; top: 4px; height: calc(100% - 8px); border-radius: 7px; background: var(--blue);
  transition: transform 260ms var(--ease-out), width 260ms var(--ease-out); pointer-events: none;
}
.tabs__clip {
  position: absolute; inset: 4px; display: flex; gap: 2px; pointer-events: none;
  clip-path: inset(0 100% 0 0); transition: clip-path 260ms var(--ease-out);
}
.tabs__clip .tabs__btn { color: #fff; }

/* ==========================================================================
   Puan durumu
   ========================================================================== */

.tablewrap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sh-1); overflow-x: auto;
}
table.standings { width: 100%; border-collapse: collapse; min-width: 620px; }
table.standings th {
  text-align: left; font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3); padding: 13px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--bg-softer);
}
table.standings td {
  padding: 11px 12px; font-size: 14px; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2);
}
table.standings tbody tr { transition: background-color 160ms ease; }
table.standings tbody tr:last-child td { border-bottom: 0; }
table.standings td.pos { color: var(--ink-3); font-weight: 700; width: 48px; }
table.standings td.team { font-weight: 700; width: 100%; color: var(--navy); }
table.standings td.pts { font-weight: 800; font-family: var(--font-display); color: var(--navy); }
table.standings tr.me { background: rgba(0, 53, 145, 0.05); box-shadow: inset 3px 0 0 var(--blue); }
table.standings tr.me td.team { color: var(--blue); }
table.standings tr.zone-top td.pos { color: var(--green); }
table.standings tr.zone-bottom td.pos { color: #b3243a; }

.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* ==========================================================================
   Kadro şeridi — beğenilen bölüm, kimliğe uyarlandı
   ========================================================================== */

.roster-strip { position: relative; overflow: hidden; padding: 4px 0; }
.roster-strip::before, .roster-strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.roster-strip::before { left: 0; background: linear-gradient(90deg, var(--bg-soft), rgba(244, 246, 250, 0)); }
.roster-strip::after { right: 0; background: linear-gradient(270deg, var(--bg-soft), rgba(244, 246, 250, 0)); }
.roster-track { display: flex; gap: 16px; width: max-content; animation: marquee 52s linear infinite; }
@media (hover: hover) and (pointer: fine) { .roster-strip:hover .roster-track { animation-play-state: paused; } }
.roster-track > * { width: 208px; flex-shrink: 0; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   Galeri / video
   ========================================================================== */

.tile {
  display: block; position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--navy-ink); box-shadow: var(--sh-1);
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.tile__media { aspect-ratio: 16 / 10; overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease-out); }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 18, 38, 0) 42%, rgba(13, 18, 38, 0.88) 100%);
}
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 15px 16px; }
.tile__title {
  color: #fff; font-size: 14px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile__meta { font-size: 11px; color: var(--on-dark-2); margin-top: 6px; font-weight: 600; }
.tile__play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
}
.tile__play span {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92);
  transition: transform 220ms var(--ease-out), background-color 220ms ease;
}
.tile__play svg { width: 17px; height: 17px; fill: var(--blue); margin-left: 3px; }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(9, 12, 26, 0.9); padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}
.lb[data-open="true"] { opacity: 1; pointer-events: auto; }
.lb__inner {
  position: relative; max-width: 1100px; width: 100%;
  transform: scale(0.97); transition: transform 220ms var(--ease-out);
}
.lb[data-open="true"] .lb__inner { transform: scale(1); }
.lb img, .lb iframe {
  width: 100%; max-height: 82vh; object-fit: contain; border-radius: 10px; border: 0; background: #000;
}
.lb iframe { aspect-ratio: 16 / 9; height: auto; }
.lb__bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: #fff; }
.lb__count { font-size: 13px; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.lb__btn {
  width: 40px; height: 40px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.lb__btn:active { transform: scale(0.95); }
.lb__btn svg { width: 15px; height: 15px; fill: #fff; }
.lb__close { margin-left: auto; }

/* ==========================================================================
   İstatistik / branş / promo
   ========================================================================== */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { padding: 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.sec--navy .stat { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
.stat b {
  display: block; font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.sec--navy .stat b { color: var(--green-bright); }
.stat span {
  display: block; margin-top: 9px; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 700;
}
.sec--navy .stat span { color: var(--on-dark-3); }

.branch {
  position: relative; padding: 24px; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.branch h3 { font-size: 18px; margin-bottom: 8px; color: var(--navy); }
.branch p { color: var(--ink-2); font-size: 16px; margin: 0; }
.branch a { color: var(--blue); font-weight: 700; }
.branch__no {
  position: absolute; right: 14px; top: 6px; font-family: var(--font-display);
  font-size: 58px; font-weight: 800; color: rgba(0, 53, 145, 0.06); letter-spacing: -0.05em;
}

.promo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.promo a {
  display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.promo img { width: 100%; height: auto; }

/* ==========================================================================
   Prose / sayfa başlığı
   ========================================================================== */

.prose { max-width: 70ch; }
.prose p { color: var(--ink-2); font-size: 16px; line-height: 1.75; margin: 0 0 16px; }
.prose h2 { font-size: 21px; margin: 32px 0 12px; color: var(--navy); }
.prose strong { color: var(--ink); }

.phead { padding: 40px 0 26px; border-bottom: 1px solid var(--line); background: var(--bg-softer); }
.phead h1 { font-size: clamp(28px, 4.4vw, 46px); color: var(--navy); }
.phead p { color: var(--ink-2); margin: 12px 0 0; max-width: 62ch; font-size: 16px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 13px; }
.crumbs a { transition: color 150ms ease; }

/* Antrenör vitrini */
.coach {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sh-2);
}
.coach__media { background: var(--bg-soft); }
.coach__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.coach__body { padding: 28px 30px; }
.coach__name { font-size: 28px; color: var(--navy); margin-bottom: 16px; }
.coach__role { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue); font-weight: 800; margin-bottom: 16px; }
.coach__bio { color: var(--ink-2); font-size: 16px; line-height: 1.7; margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */

.ftr { background: var(--navy-ink); color: var(--on-dark-2); padding: 52px 0 24px; }
.ftr__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; margin-bottom: 38px; }
.ftr .brand__txt b { color: #fff; }
.ftr .brand__txt span { color: var(--on-dark-3); }
.ftr h4, .ftr__title {
  font-family: var(--font); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--on-dark-3); margin-bottom: 14px; font-weight: 800;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ftr a { font-size: 14px; color: var(--on-dark-2); transition: color 150ms ease; }
.ftr__about { font-size: 16px; color: var(--on-dark-2); max-width: 34ch; margin: 15px 0 18px; }
.social { display: flex; gap: 8px; }
.social a {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  transition: transform 180ms var(--ease-out), background-color 180ms ease;
}
.social svg { width: 18px; height: 18px; fill: var(--on-dark-2); transition: fill 180ms ease; }
.social a:active { transform: scale(0.97); }
.apps { display: flex; gap: 9px; margin-top: 16px; }
.apps img { height: 34px; width: auto; }
.ftr__base {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px; color: var(--on-dark-3); flex-wrap: wrap;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ==========================================================================
   Hover — dokunmatikte yanlış tetiklenmesin diye kapılı
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .topbar__social a:hover { background: rgba(255, 255, 255, 0.1); }
  .topbar__social a:hover svg { fill: var(--green-bright); }
  .topbar__lang button:hover { color: #fff; }
  .nav__link:hover { color: var(--blue); background: var(--bg-soft); }
  .nav__menu a:hover { color: var(--blue); background: var(--bg-soft); }
  .leagues img:hover { opacity: 1; }
  .leaguechip:hover { color: var(--blue); border-color: var(--blue); }
  .btn--primary:hover { background: var(--blue-400); }
  .btn--outline:hover { border-color: var(--blue); color: var(--blue); }
  .btn--ghost:hover { color: var(--blue); }
  .btn--onblue:hover { background: var(--green-bright); color: var(--navy-ink); }
  .card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
  .card:hover .card__media img { transform: scale(1.045); }
  .pcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
  .pcard:hover .pcard__media img { transform: translateY(-6px) scale(1.03); }
  .scard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
  .fx:hover { box-shadow: var(--sh-2); border-color: var(--line-strong); }
  .branch:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
  .promo a:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
  .tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
  .tile:hover .tile__media img { transform: scale(1.05); }
  .tile:hover .tile__play span { transform: scale(1.08); background: #fff; }
  .lb__btn:hover { background: rgba(255, 255, 255, 0.16); }
  table.standings tbody tr:hover { background: var(--bg-soft); }
  table.standings tbody tr.me:hover { background: rgba(0, 53, 145, 0.09); }
  .link-more:hover { color: var(--navy); }
  .link-more:hover svg { transform: translateX(3px); }
  .social a:hover { background: rgba(255, 255, 255, 0.14); }
  .social a:hover svg { fill: var(--green-bright); }
  .ftr a:hover { color: var(--green-bright); }
  .crumbs a:hover { color: var(--blue); }
  .dot:hover { background: rgba(255, 255, 255, 0.55); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .leagues { display: none; }
  .coach { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  .topbar__note { display: none; }

  /* Panel ekrana göre konumlanır; üst kenarı başlığın alt kenarıdır
     (--nav-top, menü açılırken app.js'te ölçülür). */
  .nav--open {
    display: flex; position: fixed; top: var(--nav-top, var(--header-h)); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 2px; margin: 0;
    padding: 18px var(--gutter) 40px; overflow-y: auto; background: #fff; z-index: 99;
  }
  .nav--open .nav__item { width: 100%; }
  .nav--open .nav__link { width: 100%; height: 48px; font-size: 16px; justify-content: space-between; }
  .nav--open .nav__link[aria-current="page"]::after { display: none; }
  .nav--open .nav__menu {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    border: 0; box-shadow: none; padding: 0 0 6px 12px; display: none; min-width: 0;
  }
  .nav--open .nav__item[data-open="true"] .nav__menu { display: block; }
  .nav--open .nav__menu a { height: 42px; display: flex; align-items: center; }

  .sec { padding: 48px 0; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .fx { grid-template-columns: 1fr; gap: 13px; }
  .fx__end { justify-content: flex-start; }
  .fx__venue { text-align: left; }
  .coach { grid-template-columns: 1fr; }
  .coach__media { aspect-ratio: 16 / 9; }
  .coach__media img { object-position: center 22%; }
}

@media (max-width: 620px) {
  :root { --gutter: 16px; }
  .grid--2, .promo { grid-template-columns: 1fr; }
  .pcard__flag { display: none; }
  .pcard__pos { font-size: 11px; letter-spacing: 0.09em; padding: 3px 6px; }
  .sec__head { flex-direction: column; align-items: flex-start; }
  .fx__row { grid-template-columns: 1fr 84px 1fr; gap: 8px; }
  .fx__team b { font-size: 13px; white-space: normal; }
  /* Haber görselleri kendi başlığını taşıyor; dar ekranda kare-uzun bir alan
     verip metni afişin altındaki koyu bölgeye indiriyoruz. */
  .slider__track { aspect-ratio: 4 / 5; }
  .slide img { object-position: center 22%; }
  .slide::after {
    background: linear-gradient(180deg, rgba(13, 18, 38, 0.15) 0%, rgba(13, 18, 38, 0) 30%,
      rgba(13, 18, 38, 0.72) 56%, rgba(13, 18, 38, 0.97) 78%);
  }
  .slide__body { padding: 20px; }
  .slider__nav { right: 20px; bottom: 16px; }
  .brand img { width: 44px; }
}

/* ==========================================================================
   Reduced motion — hareket kalkar, anlamı taşıyan opaklık geçişleri kalır
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
  [data-reveal] { transform: none; }
  .roster-track { animation: none; }
  .card:hover, .pcard:hover, .scard:hover, .branch:hover, .tile:hover, .promo a:hover { transform: none; }
  .btn:active, .social a:active, .burger:active, .tabs__btn:active, .lb__btn:active { transform: none; }
  .roster-track { animation: none; }
  .club:hover { transform: none; }
}

/* ==========================================================================
   Denizli ekleri — TOFAŞ bileşenlerinin diliyle
   ========================================================================== */

/* Instagram fotoğrafı gelene kadar lacivert zemin + soluk rozet */
.ph { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-ink) 100%); }
.ph::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/favicon.png?v=3") center / auto 34% no-repeat; opacity: 0.16;
}
.ph > img { position: relative; }
.tile__media { position: relative; }
.card__media.ph::before { background-size: auto 40%; }

/* Rakip takım armasının yerine baş harf */
.crest {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: var(--bg-soft); border: 1px solid var(--line);
  font-family: var(--font-display); font-size: 11px; font-weight: 800; color: var(--ink-3);
}

/* Ön kayıt paneli (sıradaki maç panelinin yerinde) */
.nextmatch__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.nextmatch__brand img { width: 58px; height: 58px; }
.nextmatch__brand b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 800; line-height: 1.2; }
.nextmatch__brand span { display: block; font-size: 13px; color: var(--on-dark-2); margin-top: 3px; }
.nextmatch__when a { color: #fff; }
.nextmatch__btns { margin-top: auto; display: grid; gap: 8px; }
.nextmatch .nextmatch__btns .btn { margin-top: 0; }
.btn--onblue-line { border-color: rgba(255, 255, 255, 0.3); background: transparent; color: #fff; }
.btn .wa { fill: currentColor; }

/* Yaş grupları tablosu — puan durumu tablosunun dili */
table.standings td.muted { color: var(--ink-3); font-size: 13px; }
table.standings td.team a { color: inherit; }

/* Konum kartları */
.branch .btn { margin-top: 14px; }
.branch .btn--primary { color: #fff; }
.branch .btn--outline { color: var(--navy); }
.map { margin-top: 22px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sh-1); border: 1px solid var(--line); }
.map iframe { display: block; width: 100%; height: 380px; border: 0; }

/* Teknik ekip: iki baş antrenör vitrini yan yana */
.coaches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.coaches .coach { grid-template-columns: 200px minmax(0, 1fr); }
.coach__media.pcard__media { aspect-ratio: auto; min-height: 220px; }
.coach__media .pcard__ghost { font-size: 72px; }
.coach__body .eyebrow { margin-bottom: 8px; }

/* Ön kayıt formu — TOFAŞ kart ve buton diliyle */
.grid--form { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.formcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sh-1); padding: 28px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: 0.01em; }
.field__label small { font-weight: 500; color: var(--ink-3); font-size: 13px; }
.input {
  width: 100%; height: 44px; padding: 0 13px; border-radius: 9px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font: inherit; font-size: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
textarea.input { height: 96px; padding: 11px 13px; resize: vertical; }
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%234d5875' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 13px center / 11px no-repeat;
}
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 53, 145, 0.12); }
.input[aria-invalid="true"] { border-color: #b3243a; }
.field__err { font-size: 13px; font-weight: 600; color: #b3243a; }
.field__err:empty { display: none; }
.choice { display: flex; gap: 8px; }
.choice label {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 9px;
  border: 1px solid var(--line-strong); font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.choice label:active { transform: scale(0.97); }
.choice input { accent-color: var(--blue); margin: 0; }
.choice label:has(input:checked) { border-color: var(--blue); color: var(--blue); }
.choice label:has(input[aria-invalid="true"]) { border-color: #b3243a; }
.suggest { font-size: 13px; color: var(--ink-2); background: var(--green-soft); border-radius: 8px; padding: 9px 12px; }
.suggest b { color: var(--green); }
.suggest a { color: var(--blue); font-weight: 700; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kvkk { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); margin: 0; }
.formdone { grid-column: 1 / -1; font-size: 16px; color: var(--ink-2); background: var(--bg-soft); border-radius: 8px; padding: 11px 14px; margin: 0; }
.formdone a { color: var(--blue); font-weight: 700; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 14px; }
.steps li { counter-increment: s; position: relative; padding-left: 40px; font-size: 16px; color: var(--ink-2); }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px; width: 27px; height: 27px; border-radius: 7px;
  display: grid; place-items: center; background: var(--blue); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
}
.steps b { color: var(--navy); }

/* SSS — akordeon, fikstür kartlarının dili */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-1);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.faq details[open] { box-shadow: var(--sh-2); border-color: var(--line-strong); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23003591' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 200ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq__a { padding: 0 20px 18px; margin: 0; color: var(--ink-2); font-size: 16px; }
.faq__a a { color: var(--blue); font-weight: 700; }

/* Fiat Typeface — yalnız ASCII içerikli öğeler */
.stat b, .cd b, table.standings td.pts, .fx__score.pending, .ff-fiat {
  font-family: var(--font-fiat); font-weight: 400; letter-spacing: 0;
}
.fx__score.pending { letter-spacing: 0.06em; }

/* İki kulüp, eşit ağırlık: TOFAŞ Denizli + DİBA */
.brand--duo { gap: 14px; }
.brand--duo .brand__tofas { width: auto; height: 42px; }
.brand--duo .brand__diba { width: auto; height: 54px; }
.brand__x { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--ink-3); }
.ftr .brand__x { color: var(--on-dark-3); }
.ftr .brand--duo .brand__tofas { height: 46px; }
.ftr .brand--duo .brand__diba { height: 60px; }
.ftr__name { display: block; margin-top: 16px; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; letter-spacing: 0.01em; }
.ftr__name span { display: block; font-family: var(--font); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-3); margin-top: 4px; font-weight: 600; }
.nextmatch__brand .duo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nextmatch__brand .duo .brand__tofas { width: auto; height: 34px; }
.nextmatch__brand .duo .brand__diba { width: auto; height: 46px; }

/* Kulüp kartları — TOFAŞ teknik kadro vitrininin dili */
.clubs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.club {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--sh-1); overflow: hidden;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.club__media {
  display: flex; align-items: center; justify-content: center; height: 200px; padding: 24px;
  background: linear-gradient(178deg, #f2f5fa 0%, #e7ecf5 58%, #dde4f0 100%); border-bottom: 1px solid var(--line);
}
.club__media img { max-height: 100%; width: auto; max-width: 80%; }
.club__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.club__body h3 { font-size: 20px; color: var(--navy); }
.club__body p { margin: 0; font-size: 16px; color: var(--ink-2); }
.club__body .btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.ftr__credit a { font-size: 13px; color: var(--on-dark-3); }
.ftr__design { font-size: 13px; color: var(--on-dark-3) !important; transition: color 160ms ease; }
.ftr__design b { color: #fff; font-weight: 600; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .ftr__design:hover, .ftr__design:hover b { color: var(--green-bright) !important; } }

/* Maç istatistikleri (TBF maç kâğıdı) */
table.boxscore { min-width: 900px; }
table.boxscore th, table.boxscore td { text-align: center; padding: 10px 9px; }
table.boxscore th:nth-child(2), table.boxscore td.team { text-align: left; }
table.boxscore td.team a { color: var(--navy); }
table.boxscore td.team small { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink-3); margin-left: 4px; }
table.boxscore td.pts { font-size: 16px; }
table.boxscore td.pos { width: 44px; }
table.boxscore tr.dnp td { color: var(--ink-3); }
table.boxscore td.muted { text-align: left; font-style: italic; color: var(--ink-3); }
table.boxscore tfoot td { border-top: 2px solid var(--line-strong); font-weight: 800; color: var(--navy); background: var(--bg-softer); }
table.boxscore tfoot tr.pcts td { border-top: 0; font-weight: 600; color: var(--ink-2); }
table.boxscore--q { min-width: 520px; }
table.boxscore--q th:first-child { text-align: left; }
table.boxscore .win { color: var(--green); font-weight: 800; }
table.boxscore .loss { color: #b3243a; font-weight: 800; }
@media (hover: hover) and (pointer: fine) { table.boxscore td.team a:hover { color: var(--blue); } }
.boxlead { margin: 22px 0 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#pl-avg.boxlead { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0; }
.boxlead .stat em { display: block; margin-top: 6px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--navy); }
.boxtitle { font-size: 18px; color: var(--navy); margin: 26px 0 12px; }
.boxnote { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
@media (max-width: 900px) { .boxlead, #pl-avg.boxlead { grid-template-columns: repeat(2, minmax(0, 1fr)); } #pl-avg.boxlead { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Ana sayfa: fotoğraf şeridi (yalnız görseller) */
.photostrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.photostrip__item { aspect-ratio: 1; border: 0; padding: 0; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; background: rgba(255, 255, 255, 0.06); }
.photostrip__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 260ms var(--ease-out); }
.photostrip__item:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .photostrip__item:hover img { transform: scale(1.04); } }
@media (max-width: 620px) { .photostrip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* Ana sayfa: konum — bilgiler ve harita tek kartta yan yana */
.place { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sh-1); }
.place__info { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.place__row { display: grid; gap: 4px; }
.place__k { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.place__row p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.place__row b { color: var(--navy); }
.place__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.place__map { min-height: 340px; }
.place__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
@media (max-width: 900px) { .place { grid-template-columns: 1fr; } .place__info { padding: 20px; } .place__map, .place__map iframe { min-height: 260px; } }

/* Haber detayı */
.post { max-width: 820px; }
.post__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--ink-3); }
.post__media { margin: 0 0 26px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sh-2); }
.post__media img { width: 100%; height: auto; display: block; }
.post__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* Tıklanabilir maç satırı, kartlar */
a.fx { display: grid; color: inherit; }
a.scard, a.coach { display: block; color: inherit; }
a.coach { display: grid; }
.fx-month {
  font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin: 26px 0 12px;
}
.fx-month:first-child { margin-top: 0; }
.fx__team .crest, .nextmatch__team .crest { flex-shrink: 0; }
.nextmatch__team .crest { width: 52px; height: 52px; font-size: 14px; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
table.standings td.pts a { color: var(--blue); }
table.roster-table { min-width: 520px; }
table.roster-table td.team a { color: var(--navy); }

/* TBF bağlantısı (TOFAŞ'taki lig logoları alanı) */
.leagues a { display: flex; align-items: center; gap: 8px; }
.leagues img { height: 38px; }
.leagues span { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; color: var(--ink-2); text-transform: uppercase; }
.ftr__tbf { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; }
.ftr__tbf img { height: 40px; width: auto; background: #fff; border-radius: 6px; padding: 3px; }

/* Takım sayfası */
.team-hero { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); background: var(--navy-ink); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sh-2); }
.team-photo { position: relative; aspect-ratio: 16 / 9; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo__note {
  position: absolute; left: 18px; bottom: 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--on-dark-2); background: rgba(13, 18, 38, 0.55); padding: 6px 10px; border-radius: 6px;
}
.team-hero .nextmatch { border-radius: 0; }

/* Maç detayı — skor tabelası */
.matchhead { background: var(--navy-ink); color: #fff; padding: 34px 0 30px; }
.matchhead__comp { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-bright); }
.matchhead__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin: 22px auto 16px; max-width: 860px; }
.matchhead__team { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.matchhead__team img, .matchhead__team .crest { width: 96px; height: 96px; object-fit: contain; }
.matchhead__team .crest { font-size: 22px; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.matchhead__team b { font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.25; }
.matchhead__score { font-family: var(--font-fiat); font-size: 52px; letter-spacing: 0.02em; min-width: 150px; text-align: center; }
.matchhead__score span { font-size: 40px; color: var(--on-dark-2); }
.matchhead__when { text-align: center; font-size: 14px; color: var(--on-dark-2); }
.matchhead__status { text-align: center; margin-top: 8px; }
.matchhead__status span { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); color: var(--on-dark-2); }
.mfacts { margin: 0; display: grid; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-1); }
.mfacts div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.mfacts div:last-child { border-bottom: 0; }
.mfacts dt { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.mfacts dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--navy); }

/* Profil (oyuncu / antrenör) */
.profile { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 40px; align-items: start; }
.profile__media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(178deg, #f2f5fa 0%, #e7ecf5 58%, #dde4f0 100%); }
.profile__media .pcard__media { aspect-ratio: 4 / 5; }
.profile__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.profile .stats { grid-template-columns: repeat(2, 1fr); margin-bottom: 22px; }
.profile .stat b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }

/* Salonlar */
.venue { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sh-1); }
.venue + .venue { margin-top: 24px; }
.venue__photo { position: relative; min-height: 260px; }
.venue__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.venue__body { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.venue__body h3 { font-size: 21px; color: var(--navy); }
.venue__body p { margin: 0; color: var(--ink-2); font-size: 16px; }
.venue__map { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.venue__map iframe { display: block; width: 100%; height: 320px; border: 0; }

/* ==========================================================================
   Çeki düzen — header hizası, maç kartı, takım sayfası, kadro, TBF bandı, açılış
   ========================================================================== */

/* Ana sayfa hero: tam genişlik haber slider'ı.
   İlk tam ekran slider'ın düzeni: ekran genişliğinde, bilgisayarda 21:9'a yakın (en az 440 px,
   ekran yüksekliğini aşmaz), tablette 16:9, telefonda 4:3; görsel alanı doldurur.
   Üstünde yazı ya da karartma yok; oklar iki yanda, noktalar sağ altta sayfa içeriğiyle hizalı. */
.hero--full { padding: 0; }
.hero--full .hero__in { padding: 0; max-width: none; }
.hero--full .hero__grid { grid-template-columns: 1fr; }

.hs { position: relative; background: var(--navy-ink); color: #fff; outline: none; }
.hs__stage { position: relative; aspect-ratio: 16 / 9; background: #0a0e1d; overflow: hidden; }
@media (min-width: 901px) { .hs__stage { aspect-ratio: auto; height: clamp(440px, calc(100vw * 9 / 21), calc(100vh - 140px)); } }
@media (max-width: 767px) { .hs__stage { aspect-ratio: 4 / 3; } }
.hs__track { position: absolute; inset: 0; }
.hs__slide {
  position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden;
  transition: opacity 320ms var(--ease-out), visibility 0s linear 320ms;
}
.hs__slide[data-active="true"] { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease-out), visibility 0s; }
.hs__slide picture { display: block; width: 100%; height: 100%; }
.hs__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.hs__slide:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--green-bright); }

.hs__arrow {
  position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(13, 18, 38, 0.55); backdrop-filter: blur(6px);
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out);
}
.hs__arrow svg { width: 18px; height: 18px; }
.hs__arrow--prev { left: 16px; }
.hs__arrow--next { right: 16px; }
.hs__arrow:active { transform: scale(0.94); }

.hs__dots {
  position: absolute; right: max(24px, calc((100vw - var(--page)) / 2 + var(--gutter))); bottom: 24px; z-index: 2;
  display: flex; gap: 6px; padding: 7px 10px; border-radius: 99px; background: rgba(13, 18, 38, 0.5); backdrop-filter: blur(6px);
}
/* Nokta görünürde ince bir çizgi; dokunma alanı 24 px yüksekliğinde (telefonda kolay basılsın) */
.hs__dot { position: relative; width: 18px; height: 24px; margin: -10px 0; border: 0; padding: 0; background: none; cursor: pointer; transition: width 200ms var(--ease-out); }
.hs__dot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); transition: background-color 200ms ease; }
.hs__dot[aria-current="true"] { width: 30px; }
.hs__dot[aria-current="true"]::before { background: var(--green-bright); }
.hs__dot:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; border-radius: 3px; }
.hs--single .hs__arrow, .hs--single .hs__dots { display: none; }
.hs:focus-visible { box-shadow: inset 0 0 0 3px var(--green-bright); }
@media (hover: hover) and (pointer: fine) {
  .hs__arrow:hover { background: rgba(13, 18, 38, 0.85); border-color: rgba(255, 255, 255, 0.6); }
  .hs__dot:hover::before { background: rgba(255, 255, 255, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .hs__slide, .hs__slide[data-active="true"], .hs__dot, .hs__dot::before { transition: none; }
}
@media (max-width: 900px) {
  .hs__arrow { width: 32px; height: 32px; margin-top: -16px; background: rgba(13, 18, 38, 0.45); }
  .hs__arrow svg { width: 13px; height: 13px; }
  .hs__arrow--prev { left: 8px; }
  .hs__arrow--next { right: 8px; }
  .hs__dots { right: 12px; bottom: 10px; padding: 5px 8px; gap: 5px; }
  .hs__dot { width: 14px; }
  .hs__dot::before { height: 3px; margin-top: -1.5px; }
  .hs__dot[aria-current="true"] { width: 22px; }
}

/* Header: logolar solda, menü ve Ön Kayıt sağda */
.hdr .nav { margin-left: auto; }
.hdr__end { margin-left: 14px; }

/* Açılış ekranı */
/* Açılış ekranı ilk girişte ve sayfa yenilenince; site içi sayfa geçişlerinde gösterilmez */
.no-intro .loader { display: none; }
.loader {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: #fff;
  transition: opacity 320ms var(--ease-out), visibility 0s linear 320ms;
  animation: loaderFailsafe 0s linear 4.5s forwards;   /* JS çalışmazsa */
}
.loader__in { display: flex; align-items: center; gap: 28px; animation: loaderIn 600ms var(--ease-out) both; }
.loader__in img:first-child { height: 84px; width: auto; }
.loader__in img:last-child { height: 112px; width: auto; }
.loader__in span { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink-3); }
.loader__bar { position: absolute; left: 50%; bottom: 38%; width: 120px; height: 3px; margin-left: -60px; border-radius: 3px; background: var(--line); overflow: hidden; }
.loader__bar::after { content: ""; position: absolute; inset: 0; background: var(--green-bright); transform-origin: left; animation: loaderBar 1.1s var(--ease-in-out) infinite; }
.loader.is-done { opacity: 0; visibility: hidden; }
@keyframes loaderIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes loaderBar { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; } }

/* TBF bandı — footer üstü, ortalanmış federasyon logosu */
.partners { background: #fff; border-top: 1px solid var(--line); padding: 30px 0; }
.partners__in { display: flex; justify-content: center; align-items: center; gap: 40px; }
.partners a { display: inline-flex; align-items: center; gap: 14px; opacity: 0.86; transition: opacity 180ms ease, transform 160ms var(--ease-out); }
.partners a:active { transform: scale(0.97); }
.partners img { height: 58px; width: auto; }
.partners span { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); line-height: 1.35; }
.partners span small { display: block; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--ink-3); font-size: 13px; }

/* Maç kartı */
.game {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) 200px 150px; align-items: center; gap: 22px;
  padding: 14px 22px 14px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sh-1); color: inherit;
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease;
}
.game + .game { margin-top: 10px; }
.game:active { transform: scale(0.99); }
.game__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  height: 76px; border-radius: 8px; background: var(--bg-soft); text-align: center;
}
.game__date b { font-family: var(--font-fiat); font-size: 28px; font-weight: 400; line-height: 1; color: var(--navy); }
.game__date span { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.game__date small { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.game__opp { display: flex; align-items: center; gap: 16px; min-width: 0; }
.game__crest { position: relative; flex-shrink: 0; width: 52px; height: 52px; display: grid; place-items: center; }
.game__crest img { width: 52px; height: 52px; object-fit: contain; }
.game__crest .crest { width: 48px; height: 48px; font-size: 13px; }
.game__info { min-width: 0; }
.game__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.game__team {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--blue); padding: 3px 7px; border-radius: 4px; white-space: nowrap;
}
.game__name { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--navy); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game__where { display: flex; flex-direction: column; gap: 3px; padding-left: 20px; border-left: 1px solid var(--line); }
.game__where b { font-family: var(--font-fiat); font-weight: 400; font-size: 19px; color: var(--navy); }
.game__where span { font-size: 13px; color: var(--ink-2); }
.game__end { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.game__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--blue); }
.game__cta svg { width: 13px; transition: transform 200ms var(--ease-out); }
.game__res { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; }
.game__res.is-win { background: var(--green); }
.game__res.is-loss { background: #b3243a; }
.game__score { font-family: var(--font-fiat); font-weight: 400; font-size: 22px; color: var(--navy); }

/* Öne çıkan maç */
.feature {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); color: #fff;
  background: linear-gradient(120deg, var(--navy-ink) 0%, var(--blue-600) 100%); box-shadow: var(--sh-2);
  padding: 22px 28px 20px;
}
.feature__top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.feature__label { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-bright); }
.feature__comp { font-size: 13px; font-weight: 600; color: var(--on-dark-2); }
.feature__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin: 18px 0; }
.feature__team { display: flex; align-items: center; gap: 16px; }
.feature__team:last-child { flex-direction: row-reverse; text-align: right; }
.feature__team img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.feature__team .crest { width: 66px; height: 66px; font-size: 18px; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.feature__team b { font-family: var(--font-display); font-size: 19px; font-weight: 800; line-height: 1.2; }
.feature__mid { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 140px; }
.feature__time, .feature__score { font-family: var(--font-fiat); font-weight: 400; font-size: 40px; line-height: 1; }
.feature__mid span { font-size: 13px; color: var(--on-dark-2); }
.feature__foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; color: var(--on-dark-2); }

/* Takım başlığı: fotoğraf ekranın tam genişliğinde, alanı doldurur (5:2 yatay kadraj),
   altında takım adı. Fotoğrafın üstünde yazı yok. */
.teamtop { background: var(--bg-soft); padding: 0 0 20px; }
.teamtop__photo { position: relative; aspect-ratio: 5 / 2; overflow: hidden; background: var(--navy-ink); }
.teamtop__photo.ph::before { background-image: url("../img/diba.png?v=3"); background-size: auto 46%; opacity: 0.18; }
.teamtop__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.teamtop__title { padding: 18px 2px 0; }
.teamtop__title h1 { color: var(--navy); font-size: clamp(28px, 3.6vw, 42px); }
.teamtop__title p { margin: 6px 0 0; color: var(--ink-2); font-size: 16px; }
.teamnav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: var(--header-h); z-index: 50; }
.teamnav__in { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.teamnav__in::-webkit-scrollbar { display: none; }
.teamnav a {
  position: relative; display: inline-flex; align-items: center; height: 50px; padding: 0 14px; white-space: nowrap;
  font-size: 14px; font-weight: 700; color: var(--ink-2); transition: color 160ms ease;
}
.teamnav a[aria-current="page"] { color: var(--blue); }
.teamnav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--green-bright); }
.team-photo__note { z-index: 3; }
.teamtop__photo .team-photo__note { left: auto; right: 18px; top: 16px; bottom: auto; color: var(--on-dark-2); }

/* Kadro satırları (Sidearms dili, bizim kartlarımızla) */
.rrow {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 220px 90px; align-items: center; gap: 22px;
  padding: 14px 20px 14px 14px; color: inherit; border-bottom: 1px solid var(--line);
  transition: background-color 160ms ease;
}
.rrow:nth-child(even) { background: var(--bg-softer); }
.rrows { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-1); overflow: hidden; }
.rrows .rrow:last-child { border-bottom: 0; }
.rrow__photo { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(178deg, #f2f5fa 0%, #dde4f0 100%); }
.rrow__photo img { width: 100%; height: 100%; object-fit: cover; }
.rrow__photo span { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: rgba(29, 39, 81, 0.25); }
.rrow__meta { font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: 4px; }
.rrow__name { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--navy); }
.rrow__no {
  min-width: 30px; height: 26px; padding: 0 6px; border-radius: 5px; display: grid; place-items: center;
  font-family: var(--font-fiat); font-weight: 400; font-size: 16px; color: #fff; background: var(--blue);
}
.rrow__side b { display: block; font-size: 14px; color: var(--navy); }
.rrow__side span { font-size: 13px; color: var(--ink-3); }
.rrow__go { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--blue); }
.rrow__go svg { width: 13px; transition: transform 200ms var(--ease-out); }
.rs-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.rs-tools label { font-size: 13px; font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.rs-tools select { height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-strong); font: inherit; font-size: 14px; background: #fff; }

/* Excel indirme */
.fx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.fx-toolbar .tabsbar { margin-bottom: 0; min-width: 0; }
.btn--excel svg.xl { width: 16px; height: 16px; fill: #1d6f42; }
.sec__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Kulübümüz: yalnız logolar */
.logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 8vw, 110px); padding: 30px 0 10px; flex-wrap: wrap; }
.logos img:first-child { width: min(440px, 80vw); height: auto; }
.logos img:last-child { width: min(300px, 60vw); height: auto; }

@media (hover: hover) and (pointer: fine) {
  .game:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
  .game:hover .game__cta svg, .rrow:hover .rrow__go svg { transform: translateX(3px); }
  .rrow:hover { background: var(--bg-soft); }
  .partners a:hover { opacity: 1; }
  .teamnav a:hover { color: var(--blue); }
}

@media (max-width: 1080px) {
  .game { grid-template-columns: 70px minmax(0, 1fr) 170px; }
  .game__end { display: none; }
  /* oynanmış maçta sonuç (G/M + skor) dar ekranda da görünür */
  .game--played { grid-template-columns: 70px minmax(0, 1fr) 150px auto; }
  .game--played .game__end { display: flex; }
  .rrow { grid-template-columns: 64px minmax(0, 1fr) 180px; }
  .rrow__go { display: none; }
}

@media (max-width: 620px) {
  .game { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .game__date { height: 64px; }
  .game__date b { font-size: 23px; }
  .game__where { grid-column: 2; flex-direction: row; align-items: baseline; gap: 8px; padding-left: 0; border-left: 0; margin-top: -6px; }
  .game__where b { font-size: 16px; }
  .game--played { grid-template-columns: 58px minmax(0, 1fr); }
  .game--played .game__end { grid-column: 2; justify-content: flex-start; margin-top: -4px; }
  .game--played .game__where b { display: none; }
  .game__crest, .game__crest img { width: 40px; height: 40px; }
  .game__crest .crest { width: 38px; height: 38px; font-size: 11px; }
  .game__name { font-size: 16px; white-space: normal; }
  .game__meta { flex-wrap: wrap; gap: 6px; }
  .feature { padding: 18px 16px; }
  .feature__row { gap: 10px; }
  .feature__team { flex-direction: column; text-align: center; gap: 8px; }
  .feature__team:last-child { flex-direction: column; text-align: center; }
  .feature__team img, .feature__team .crest { width: 52px; height: 52px; }
  .feature__team b { font-size: 14px; }
  .feature__mid { min-width: 0; }
  .feature__time, .feature__score { font-size: 28px; }
  .teamtop__photo { aspect-ratio: 2 / 1; }
  .rrow { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .rrow__photo { width: 52px; height: 52px; }
  .rrow__side { display: none; }
  .rrow__name { font-size: 16px; }
  .partners img { height: 48px; }
  .loader__in img:first-child { height: 46px; }
  .loader__in img:last-child { height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader__in, .loader__bar::after { animation: none; }
  .game:hover { transform: none; }
}

/* Mobil menü sonundaki eylemler */
.nav__cta { display: none; }

/* Mobil alt eylem çubuğu — Ara · WhatsApp · Ön Kayıt */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
  grid-template-columns: 1fr 1fr 1.3fr; gap: 8px;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94); border-top: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.actionbar .btn { height: 44px; padding: 0 10px; }

@media (hover: hover) and (pointer: fine) {
  .btn--onblue-line:hover { background: rgba(255, 255, 255, 0.1); }
}

@media (hover: hover) and (pointer: fine) {
  .club:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
  a.fx:hover { transform: translateY(-2px); }
  a.coach:hover { box-shadow: var(--sh-3); }
  table.roster-table td.team a:hover { color: var(--blue); }
  .choice label:hover { border-color: var(--blue); }
  .faq summary:hover { color: var(--blue); }
}

@media (max-width: 1080px) {
  .hdr__wa { display: none; }
  .coaches { grid-template-columns: 1fr; }
  .grid--form { grid-template-columns: 1fr; }
  .team-hero, .profile, .venue { grid-template-columns: 1fr; }
  .venue__photo { min-height: 200px; }
  .nav__link { padding: 0 10px; }
}

@media (max-width: 900px) {
  .nav--open .nav__cta { display: grid; gap: 10px; margin-top: 16px; }
  .nav--open .nav__cta .btn { width: 100%; height: 48px; font-size: 16px; }
}

@media (max-width: 620px) {
  .map iframe { height: 300px; }
  .form { grid-template-columns: 1fr; }
  .formcard { padding: 20px 16px; }
  .coaches .coach { grid-template-columns: 1fr; }
  .clubs { grid-template-columns: 1fr; }
  .matchhead__team img, .matchhead__team .crest { width: 64px; height: 64px; }
  .matchhead__team b { font-size: 14px; }
  .matchhead__score { font-size: 34px; min-width: 0; }
  .matchhead__score span { font-size: 26px; }
  .matchhead__row { gap: 12px; }
  .mfacts div { grid-template-columns: 100px minmax(0, 1fr); }
  .venue__map iframe { height: 260px; }
  .brand--duo { gap: 10px; }
  .brand--duo .brand__tofas { height: 32px; }
  .brand--duo .brand__diba { height: 42px; }
  .brand__x { font-size: 13px; }
  .club__media { height: 160px; }
  .coach__media.pcard__media { min-height: 0; aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Tablet ve telefon düzeni — en sonda, önceki kuralları ezer
   ========================================================================== */

/* Tablet (768–900): menü sığıyor, hamburgere gerek yok */
@media (min-width: 768px) and (max-width: 900px) {
  .nav { display: flex; }
  .burger { display: none; }
  .nav__link { padding: 0 9px; font-size: 13px; }
  .actionbar { display: none; }
  body { padding-bottom: 0; }
  .brand--duo .brand__tofas { height: 36px; }
  .brand--duo .brand__diba { height: 46px; }
}

/* Tablet genel (≤1080) */
@media (max-width: 1080px) {
  .feature__team b { font-size: 16px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* Telefon (<768) */
@media (max-width: 767px) {
  :root { --gutter: 18px; --header-h: 64px; }
  .topbar { display: none; }
  .hdr__in { height: var(--header-h); }
  .hdr__end { margin-left: auto; gap: 8px; }
  .nav__link[aria-current="page"]::after { bottom: -14px; }

  /* başlık ve bölümler */
  .sec { padding: 44px 0; }
  .sec--tight { padding: 26px 0; }
  .sec__head { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; }
  .sec__head > div:first-child { flex: 1 1 220px; }
  .sec__title { font-size: 25px; }
  .sec__sub { font-size: 16px; }
  .phead { padding: 26px 0 20px; }
  .phead h1 { font-size: 29px; }
  .phead p { font-size: 16px; }

  /* haber kartları: telefonda yatay liste */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; gap: 12px; }
  .grid > .card { display: grid; grid-template-columns: 116px minmax(0, 1fr); }
  .grid > .card .card__media { position: relative; aspect-ratio: auto; height: 100%; min-height: 100px; }
  .grid > .card .card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .grid > .card .card__body { padding: 12px 14px; }
  .grid > .card .card__title { font-size: 16px; -webkit-line-clamp: 3; }
  .grid > .card .card__badge { top: 6px; left: 6px; font-size: 11px; height: 20px; padding: 0 7px; }

  /* galeri kareleri ikili */
  #galleryhome, #albums, #videos { grid-template-columns: repeat(2, 1fr); }
  .tile__body { padding: 10px 11px; }
  .tile__title { font-size: 13px; }
  .tile__meta { font-size: 11px; }
  .tile__play span { width: 40px; height: 40px; }

  /* sayılar */
  .stats { gap: 10px; }
  .stat { padding: 16px; }
  .stat b { font-size: 28px; }

  /* antrenör, branş, kulüp */
  .branch { padding: 20px; }
  .scard__body { padding: 10px 12px 12px; }
  .scard__name { font-size: 13px; }
  .grid--4 > .scard { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
  .grid--4 > .scard .scard__media { aspect-ratio: 1; }
  .coach__body { padding: 20px; }
  .coach__name { font-size: 22px; }

  /* profil fotoğrafı ekranı kaplamasın */
  .profile { gap: 22px; }
  .profile__media { max-width: 300px; width: 100%; margin: 0 auto; }
  .profile .stats { grid-template-columns: repeat(2, 1fr) !important; }

  /* takım başlığı */
  .teamtop__photo { aspect-ratio: 2 / 1; }
  .teamtop { padding: 0 0 16px; }
  .teamtop__title { padding-top: 14px; }
  .teamnav a { height: 46px; padding: 0 11px; font-size: 13px; }
  .teamnav a[aria-current="page"]::after { left: 11px; right: 11px; }

  /* kadro şeridi kartları biraz küçük */
  .roster-track > * { width: 168px; }
  .roster-strip::before, .roster-strip::after { width: 40px; }

  /* fikstür */
  .fx-month { margin: 22px 0 10px; }
  .fx-toolbar { margin-bottom: 18px; }
  .fx-toolbar .tabsbar { width: 100%; }
  .tabsbar { margin-bottom: 18px; }

  /* footer */
  .partners { padding: 22px 0; }
  .ftr { padding: 40px 0 20px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .ftr__grid > :first-child { grid-column: 1 / -1; }
  .ftr__about { max-width: none; }
  .ftr__base { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* harita */
  .map iframe, .venue__map iframe { height: 260px; }
}

/* Küçük telefon (≤380) */
@media (max-width: 380px) {
  :root { --gutter: 14px; }
  .brand--duo .brand__tofas { height: 28px; }
  .brand--duo .brand__diba { height: 38px; }
  .hdr__end .btn--sm { padding: 0 11px; font-size: 13px; }
  .grid > .card { grid-template-columns: 100px minmax(0, 1fr); }
  .ftr__grid { grid-template-columns: 1fr; }
  .game__name { font-size: 14px; }
}

@media print {
  .topbar, .hdr, .ftr, .slider__nav, .hs__arrow, .hs__dots, .actionbar { display: none; }
  body { color: #000; }
}

/* ==========================================================================
   Erişilebilirlik ve telefon ayarları (UI/UX taraması, 27.10.2026)
   ========================================================================== */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Dokununca gecikme olmasın; kontrollerin yazısı uzun basınca seçilmesin (içerik metni seçilebilir kalır) */
a, button, [role="button"], label, select, summary { touch-action: manipulation; }
button, .btn, .burger, .tabs__btn, .hs__arrow, .hs__dot, .nav__link, .teamnav a, .choice label {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Slider'da yatay kaydırma bizim; dikey kaydırma tarayıcıda kalır */
.hs__track { touch-action: pan-y; }
/* Telefon yan çevrildiğinde çentik bölgesine içerik girmesin */
.wrap, .hdr__in { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ftr__title { margin-top: 0; }

/* En küçük etiket yazıları okunabilir boyuta çekildi */
.tag { font-size: 11px; }
.game__team { font-size: 11px; }
.ftr h4, .ftr__title { font-size: 11px; }
.choice input { width: 18px; height: 18px; }

/* Bağlantı metinlerinin dokunma alanı görünümü değiştirmeden büyür */
.link-more { padding: 12px 0; margin: -12px 0; }
.ftr__design { display: inline-block; padding: 12px 0; margin: -12px 0; }

@media (max-width: 767px) {
  /* Dokunma alanları en az 44 px */
  .btn--sm, .hdr__end .btn--sm { min-height: 44px; height: auto; }
  .burger { width: 44px; height: 44px; }
  .tabs__btn { min-height: 44px; }
  .social a { width: 44px; height: 44px; }
  .hs__arrow { width: 40px; height: 40px; margin-top: -20px; }
  .hs__dot { height: 32px; margin: -14px 0; }
  .pcard__pos { font-size: 11px; }
  .brand { min-height: 44px; }
  .ftr__name span { font-size: 11px; }
  /* iOS'ta alana dokununca sayfanın yakınlaşmaması için form yazıları 16 px */
  .input, select.input, textarea.input, .fx-toolbar select, #rs-sort { font-size: 16px; }
  #rs-sort { min-height: 44px; }
  /* Yapışkan menüde bulanıklık telefonda kaydırmayı yavaşlatır: düz beyaz */
  .hdr { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}