/* Kariyer Köprüsü — takım kurulumu ve futbolcu yanıt ekranı için iki ayrı vitrin */
:root {
  --kk59-ink: #183229;
  --kk59-muted: #66786f;
  --kk59-paper: #e4ebe5;
  --kk59-paper-2: #d1ddd4;
  --kk59-line: #b8cabd;
  --kk59-green: #1c7350;
  --kk59-green-2: #2d9770;
  --kk59-blue: #397f94;
  --kk59-gold: #d5ad55;
}

html,
body {
  background:
    radial-gradient(circle at 8% 18%, rgba(57, 127, 148, .16), transparent 26rem),
    radial-gradient(circle at 92% 5%, rgba(213, 173, 85, .15), transparent 24rem),
    linear-gradient(145deg, #c8d5cf 0%, #dce3dc 50%, #bdcec6 100%) !important;
  color: var(--kk59-ink) !important;
}

body::before,
body::after { opacity: .10 !important; }

.surface {
  background: linear-gradient(145deg, rgba(236, 240, 234, .98), rgba(215, 225, 218, .98)) !important;
  border-color: rgba(244, 247, 241, .80) !important;
  box-shadow: 0 18px 46px rgba(24, 55, 43, .13) !important;
}

.topbar {
  color: #f3f5ed !important;
  background: linear-gradient(120deg, #183e32, #245847 58%, #326858) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 16px 38px rgba(17,47,36,.22) !important;
}

.topbar .brand strong,
.topbar .brand span { color: #f2f5ed !important; }
.topbar .brand span { opacity: .70; }
.topbar .topnav__info,
.topbar .topnav__primary {
  background: rgba(238, 244, 237, .12) !important;
  color: #f4f6ef !important;
  border: 1px solid rgba(238, 244, 237, .18) !important;
  box-shadow: none !important;
}

.portal-home-button {
  background: linear-gradient(135deg, #255d4b, #337866) !important;
  border-color: rgba(255,255,255,.22) !important;
}

.portal-lang-switch {
  background: rgba(20, 58, 45, .94) !important;
  border-color: rgba(255,255,255,.18) !important;
}

.setup-showcase {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(210px, .72fr) minmax(250px, .9fr) !important;
  align-items: center !important;
  gap: 20px !important;
  min-height: 202px !important;
  margin: 0 0 14px !important;
  padding: 22px 24px !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #f4f5ed !important;
  border: 1px solid rgba(181, 215, 194, .30) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 74% 28%, rgba(213,173,85,.23), transparent 20rem),
    linear-gradient(130deg, #173e32 0%, #25644e 56%, #397a6b 100%) !important;
  box-shadow: 0 20px 48px rgba(18, 55, 42, .20), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.setup-showcase::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: .55 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important;
  background-size: 34px 34px !important;
}

.setup-showcase__copy,
.setup-showcase__visual,
.setup-showcase__stats { position: relative !important; z-index: 2 !important; }

.setup-showcase__copy > span {
  color: #aee7c8 !important;
  background: rgba(238,246,240,.08) !important;
  border-color: rgba(174,231,200,.25) !important;
}
.setup-showcase__copy > strong { color: #fff !important; font-size: 28px !important; }
.setup-showcase__copy > small { color: #cae0d4 !important; }

.setup-showcase__visual {
  height: 166px !important;
  min-width: 0 !important;
  border: 1px solid rgba(188, 223, 205, .18) !important;
  border-radius: 20px !important;
  background:
    url("./webp/kariyer-setup-3d.webp") center / 116% auto no-repeat,
    rgba(9, 37, 28, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(5,30,22,.18) !important;
}

.setup-showcase__visual > * { opacity: 0 !important; }
.setup-showcase__stats span {
  background: rgba(238, 245, 238, .10) !important;
  border-color: rgba(238,245,238,.16) !important;
}

.mode-switch--three,
.solo-settings,
.online-setup,
.online-room-bar,
.selection-warning,
.match-settings__group,
.players-grid,
.player-card,
.game-actions,
.side-card {
  background: linear-gradient(145deg, rgba(238, 241, 234, .96), rgba(217, 226, 219, .96)) !important;
  border-color: var(--kk59-line) !important;
  box-shadow: 0 10px 26px rgba(22, 57, 43, .09) !important;
}

.mode-switch--three button,
.difficulty-tabs button,
.setting-tabs button,
.club-search,
.club-summary > div,
.round-player-choice,
.player-suggestions,
.player-suggestions button {
  background: rgba(246, 247, 241, .72) !important;
  border-color: #bdccc0 !important;
  color: var(--kk59-ink) !important;
}

.mode-switch--three button.active,
.difficulty-tabs button.active,
.setting-tabs button.active {
  background: linear-gradient(135deg, #246d50, #36946d) !important;
  color: #fff !important;
  border-color: #276e52 !important;
  box-shadow: 0 8px 18px rgba(28,115,80,.18) !important;
}

.club-search:focus-within {
  border-color: #3f9671 !important;
  box-shadow: 0 0 0 4px rgba(45,151,112,.13) !important;
}

.role-card,
.game-actions .btn--primary {
  background: linear-gradient(135deg, #1e6b4b, #33966c) !important;
}

.round-arena {
  background: linear-gradient(145deg, #e7ece5, #cedbd2) !important;
  border-color: #a9bfb0 !important;
  box-shadow: 0 22px 56px rgba(18,55,42,.16) !important;
}

.round-content::before {
  content: "";
  display: block;
  width: 100%;
  height: 108px;
  margin: 0 0 12px;
  border: 1px solid rgba(76, 139, 124, .28);
  border-radius: 18px;
  background:
    url("./webp/kariyer-player-3d.webp") center / contain no-repeat,
    radial-gradient(circle at 74% 18%, rgba(213,173,85,.20), transparent 16rem),
    linear-gradient(120deg, #234c42, #47776e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 26px rgba(23,65,52,.13);
}

.round-heading-row h3 { color: #17352b !important; }
.round-kicker { background: #d8e9de !important; color: #1d6b4c !important; }
.round-back-button {
  background: rgba(242, 245, 238, .84) !important;
  color: #235f47 !important;
  border-color: #aabfaf !important;
}

.opponent-strip,
.round-match-meta,
.round-play-grid,
.answer-panel,
.feedback {
  background: rgba(238, 242, 235, .82) !important;
  border-color: #b6c8ba !important;
  color: var(--kk59-ink) !important;
}

.answer-box input {
  background: #f5f6f0 !important;
  color: #17342a !important;
  border-color: #a8bdae !important;
}
.answer-box input:focus {
  border-color: #348b66 !important;
  box-shadow: 0 0 0 4px rgba(52,139,102,.14) !important;
}
.answer-box > button:not(.answer-pass-button) {
  background: linear-gradient(135deg, #1d6b4b, #33966c) !important;
}
.answer-box .answer-pass-button {
  background: #e8d6a9 !important;
  color: #654a16 !important;
  border-color: #cfb873 !important;
}

.search-menu,
.modal-card {
  background: linear-gradient(145deg, #ebefe8, #d3ddd5) !important;
  color: var(--kk59-ink) !important;
  border-color: #afc2b3 !important;
}

@media (max-height: 860px) and (min-width: 1101px) {
  .round-content::before { height: 74px; margin-bottom: 8px; }
}

@media (max-width: 1100px) {
  .setup-showcase {
    grid-template-columns: minmax(0, 1fr) 220px !important;
  }
  .setup-showcase__stats { grid-column: 1 / -1 !important; }
}

@media (max-width: 760px) {
  .setup-showcase {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 16px !important;
  }
  .setup-showcase__visual { height: 128px !important; }
  .setup-showcase__stats { grid-column: 1 !important; }
  .round-content::before { height: 86px; border-radius: 14px; }
}

@media (max-width: 520px) {
  .setup-showcase__copy > strong { font-size: 22px !important; }
  .setup-showcase__visual { height: 104px !important; }
  .round-content::before { height: 72px; }
}