/* Zeka Küpü Türkiye — brand layer on top of Bootstrap 5.
   Placeholder palette (navy + red). Swap the --zkt-* variables when the real
   logo / brand colors arrive — everything else cascades from here. */

:root {
  --zkt-navy: #182747;
  --zkt-navy-700: #101c33;
  --zkt-red: #d6263b;
  --zkt-red-600: #b41f31;
  --zkt-bg: #f4f5f7;
  --zkt-line: #e2e6ec;
  --zkt-ink: #1d2433;
  --zkt-muted: #5b6472;
  --zkt-soft: #cfd6e4;
}

html, body { overflow-x: hidden; max-width: 100%; }

body {
  background-color: var(--zkt-bg);
  color: var(--zkt-ink);
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  font-size: 16px;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, .display-font {
  font-family: "Oswald", "Source Sans 3", sans-serif;
  font-weight: 600;
  letter-spacing: .2px;
}

a { color: var(--zkt-red-600); text-decoration: none; }
a:hover { color: var(--zkt-red); }

/* ---------- Navbar ---------- */
.navbar-zkt { background-color: var(--zkt-navy); box-shadow: 0 2px 12px rgba(16, 28, 51, .18); padding-top: .55rem; padding-bottom: .55rem; }
.navbar-zkt .navbar-brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-family: "Oswald", sans-serif; font-weight: 600; font-size: 1.4rem; letter-spacing: .3px; }
.navbar-zkt .navbar-brand small { display: block; font-family: "Source Sans 3", sans-serif; font-size: .62rem; letter-spacing: .22em; color: var(--zkt-soft); font-weight: 600; line-height: 1; }
.brand-mark { width: 36px; height: 36px; flex: 0 0 auto; }
.brand-logo { height: 58px; width: auto; display: block; }
.navbar-zkt .nav-link { color: var(--zkt-soft); font-weight: 600; font-size: 1.04rem; position: relative; }
.navbar-zkt .nav-link:hover { color: #fff; }
.navbar-zkt .nav-link.active { color: #fff; font-weight: 700; }
.navbar-zkt .nav-link::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 4px; height: 2px; background: var(--zkt-red); transform: scaleX(0); transition: transform .2s ease; }
.navbar-zkt .nav-link:hover::after, .navbar-zkt .nav-link.active::after { transform: scaleX(1); }
.navbar-zkt .social-link { color: #fff; display: inline-flex; padding: .35rem; }
.navbar-zkt .social-link:hover { color: var(--zkt-red); }
.navbar-zkt .navbar-toggler { border-color: rgba(255,255,255,.4); }

/* ---------- Buttons (recolor Bootstrap via its own vars) ---------- */
.btn-primary {
  --bs-btn-bg: var(--zkt-red); --bs-btn-border-color: var(--zkt-red);
  --bs-btn-hover-bg: var(--zkt-red-600); --bs-btn-hover-border-color: var(--zkt-red-600);
  --bs-btn-active-bg: var(--zkt-red-600); --bs-btn-active-border-color: var(--zkt-red-600);
}
.btn-outline-primary {
  --bs-btn-color: var(--zkt-red-600); --bs-btn-border-color: var(--zkt-red);
  --bs-btn-hover-bg: var(--zkt-red); --bs-btn-hover-border-color: var(--zkt-red);
  --bs-btn-active-bg: var(--zkt-red); --bs-btn-active-border-color: var(--zkt-red);
}
.btn-navy {
  --bs-btn-color: #fff; --bs-btn-bg: var(--zkt-navy); --bs-btn-border-color: var(--zkt-navy);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--zkt-navy-700); --bs-btn-hover-border-color: var(--zkt-navy-700);
}

/* ---------- Section titles ---------- */
.section-title { font-size: 1.95rem; color: var(--zkt-navy); margin-bottom: 1.35rem; position: relative; padding-bottom: .55rem; }
.section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--zkt-red); }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--zkt-line); border-radius: 11px; }
.card-title { font-family: "Oswald", sans-serif; color: var(--zkt-navy); }
.list-group-item + .list-group-item { border-top-color: var(--zkt-line); }

/* ---------- Hero ---------- */
.hero { background: #fff; border-bottom: 1px solid var(--zkt-line); }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.7rem); line-height: 1.02; color: var(--zkt-navy); font-weight: 700; }
.hero .lead { color: var(--zkt-muted); }
.spotlight-card { border-top: 4px solid var(--zkt-red); }
.spotlight-card .label { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--zkt-red-600); font-weight: 600; font-size: .85rem; }

/* ---------- Stats band ---------- */
.stats { background: var(--zkt-navy); color: #fff; }
.stat .num { font-family: "Oswald", sans-serif; font-size: 2.6rem; font-weight: 700; line-height: 1; color: #fff; }
.stat .lbl { color: var(--zkt-soft); text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; font-weight: 600; }

/* ---------- Footer ---------- */
.footer { background: var(--zkt-navy-700); color: #fff; }
.footer a { color: var(--zkt-soft); }
.footer a:hover { color: #fff; }
.footer h6 { font-family: "Oswald", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; font-weight: 600; }

/* ---------- Filter bar ---------- */
.filter-bar { background: #fff; border: 1px solid var(--zkt-line); border-radius: 11px; padding: 1.1rem 1.1rem .4rem; }
.filter-bar label { font-weight: 600; color: var(--zkt-muted); font-size: .82rem; }

/* ---------- Competition table ---------- */
.comp-table { background: #fff; border: 1px solid var(--zkt-line); border-radius: 11px; overflow: hidden; }
.comp-table thead th { background: var(--zkt-navy); color: #fff; font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .03em; border: 0; padding: .85rem 1rem; }
.comp-table tbody td { padding: .85rem 1rem; vertical-align: middle; border-color: var(--zkt-line); }
.comp-table tbody tr { border-left: 4px solid transparent; }
.comp-name { font-family: "Oswald", sans-serif; font-size: 1.15rem; color: var(--zkt-navy); font-weight: 600; }
.comp-name:hover { color: var(--zkt-red); }
.comp-date { font-weight: 600; color: var(--zkt-ink); white-space: nowrap; }
.countdown { font-size: .78rem; color: var(--zkt-red-600); font-weight: 600; white-space: nowrap; }

.status-open  { background: #fdecee; border-left-color: var(--zkt-red) !important; }
.status-soon  { background: #fff7e6; border-left-color: #d99004 !important; }
.status-live  { background: #e9f7ef; border-left-color: #1f9d57 !important; }
.status-ended { background: #f1f2f4; border-left-color: #9aa3b0 !important; }

.badge-st { font-family: "Source Sans 3", sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .03em; color: #fff; padding: .35em .6em; border-radius: 5px; white-space: nowrap; }
.badge-open  { background: var(--zkt-red); }
.badge-soon  { background: #d99004; }
.badge-live  { background: #1f9d57; }
.badge-ended { background: #9aa3b0; }

/* ---------- Event chips (colors from CubingChina) ---------- */
.ev { display: inline-block; padding: .12rem .45rem; border-radius: 4px; font-size: .7rem; font-weight: 700; color: #fff; background: var(--zkt-navy); margin: 1px; }
.ev-333 { background: #2a5caa; } .ev-222 { background: #2585a6; } .ev-444 { background: #dea32c; }
.ev-555 { background: #f58220; } .ev-oh { background: #7fb80e; } .ev-pyram { background: #d64f44; }
.ev-skewb { background: #585eaa; } .ev-clock { background: #00a6ac; } .ev-minx { background: #8552a1; }

/* ---------- Results / rankings ---------- */
.event-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.event-tabs .ev { font-size: .85rem; padding: .4rem .75rem; cursor: pointer; }
.event-tabs .ev.active { box-shadow: 0 0 0 3px rgba(24, 39, 71, .28); }
.rank { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--zkt-navy); }
.rank-1 { color: #c9a227; } .rank-2 { color: #8a9099; } .rank-3 { color: #b06a3b; }
.result { font-weight: 700; color: var(--zkt-navy); font-variant-numeric: tabular-nums; }
.person-name { font-weight: 600; color: var(--zkt-ink); }
.person-name:hover { color: var(--zkt-red); }

/* ---------- Event icon picker (Sonuçlar) ---------- */
.event-pick { display: flex; flex-wrap: wrap; gap: .5rem; }
.event-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; border: 1px solid var(--zkt-line); border-radius: 999px;
  background: #fff; color: var(--zkt-ink); font-weight: 600; font-size: .9rem;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.event-chip .cubing-icon { color: var(--zkt-navy); }
.event-chip:hover { border-color: var(--zkt-navy); }
.event-chip.active { background: var(--zkt-navy); border-color: var(--zkt-navy); color: #fff; }
.event-chip.active .cubing-icon { color: #fff; }

/* ---------- Responsive table -> cards (mobile) ---------- */
@media (max-width: 767.98px) {
  .comp-table { border: 0; background: transparent; }
  .comp-table thead { display: none; }
  .comp-table, .comp-table tbody, .comp-table tr, .comp-table td { display: block; width: 100%; }
  .comp-table tr { margin-bottom: 1rem; background: #fff; border: 1px solid var(--zkt-line); border-left-width: 4px; border-radius: 11px; overflow: hidden; }
  .comp-table td { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; border: 0; border-bottom: 1px solid var(--zkt-line); text-align: right; }
  .comp-table td:last-child { border-bottom: 0; }
  .comp-table td::before { content: attr(data-label); font-family: "Oswald", sans-serif; font-weight: 600; color: var(--zkt-muted); text-align: left; }
}