/* Gece maci + kulup odasi. Saha cizgisi, projektör, forma altini. */

:root {
  /* Oyun bilincli olarak sabit koyu kimlik (gece maci). color-scheme: dark ile
     OS light/dark degisse de gorunum TUTARLI kalir; form kontrolleri ters donmez. */
  color-scheme: dark;
  --night: #041108;
  --turf-deep: #072013;
  --turf: #0d3a1f;
  --turf-lit: #14532b;
  --pitch: #1b7a3c;
  --pitch-stripe: #176f36;

  --bg-0: #06140c;
  --bg-1: #0a1f12;
  --bg-2: #0e2818;
  --bg-3: #143422;
  --line: rgba(232, 244, 228, .1);
  --line-strong: rgba(232, 244, 228, .22);

  --text-1: #f3f7f0;
  --text-2: #cddccd;
  --text-3: #95ab96;

  --accent: #e4c441;
  --accent-2: #f6e08a;
  --accent-bg: #3a3010;
  --good: #5ee08a;
  --good-bg: #123322;
  --warn: #f0c400;
  --warn-bg: #3a2c08;
  --danger: #e23b2e;
  --danger-bg: #3a1210;
  --purple: #8ec8e8;
  --purple-bg: #12303a;

  --stat-taktik: #5ee08a;
  --stat-medya: #e23b2e;
  --stat-finans: #e4c441;
  --stat-menajer: #8ec8e8;
  --stat-federasyon: #7eb8d4;

  --font: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-display: "Oswald", "Barlow Condensed", sans-serif;
  --font-serif: "Barlow", "Segoe UI", system-ui, sans-serif;

  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-xxl: 32px;

  --radius: 10px;
  --radius-lg: 16px;
  --pad-sm: 8px;
  --pad-md: 12px;
  --pad-lg: 16px;
  --pad-xl: 20px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --maxw: 1120px;
  --ad-h: 50px;
  --ad-lip: 12px;            /* gorunur ayirici seridi (reklam ustunde) */
  --ad-dock: calc(var(--ad-h) + var(--ad-lip)); /* rezerve: banner + lip */
  --topbar-h: 52px;
  --shadow: 0 18px 40px rgba(0, 0, 0, .35);
  --app-pad: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  touch-action: manipulation;          /* cift-dokunus (double-tap) zoom kapali */
  -webkit-text-size-adjust: 100%;      /* iOS otomatik metin buyutme kapali */
  text-size-adjust: 100%;
}

body {
  color: var(--text-1);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  background: var(--night);
  overscroll-behavior: none;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 42% at 50% -8%, rgba(244, 228, 166, .16), transparent 58%),
    radial-gradient(ellipse 70% 36% at 50% 108%, rgba(27, 122, 60, .28), transparent 62%),
    repeating-linear-gradient(
      90deg,
      rgba(27, 122, 60, .07) 0 42px,
      rgba(10, 48, 26, .04) 42px 84px
    ),
    linear-gradient(180deg, #07180e 0%, #041108 46%, #072013 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  background:
    linear-gradient(90deg, transparent 8%, rgba(255,255,255,.18) 8.15%, transparent 8.4%),
    linear-gradient(180deg, transparent 49.6%, rgba(255,255,255,.14) 50%, transparent 50.4%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 40%, #000 20%, transparent 75%);
}

.app {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding:
    max(var(--app-pad), env(safe-area-inset-top))
    max(var(--app-pad), env(safe-area-inset-right))
    var(--app-pad)
    max(var(--app-pad), env(safe-area-inset-left));
  height: 100dvh;
  height: calc(100dvh - var(--ad-dock) - env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app.view-menu {
  padding-top: max(12px, env(safe-area-inset-top));
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 15px; font-weight: 600; }

.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.row { display: flex; align-items: center; gap: var(--gap-md); }
.col { display: flex; flex-direction: column; gap: var(--gap-md); }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.center { text-align: center; }

.page-kicker {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.page-title {
  margin-bottom: 6px;
  font-size: 28px;
  line-height: 1.05;
}
.page-lead {
  font-size: 15px;
  color: var(--text-1);
  font-weight: 600;
  max-width: 40em;
  margin-bottom: 16px;
}