/* StarFoot — gece maçı / TV yayını görünümü
   Düzen: masaüstünde solda oyuncu kartı + sağda içerik; telefonda tek sütun ve altta sekme çubuğu. */
:root {
  color-scheme: dark;
  --bg: #0a1530;
  --bg-2: #07102a;
  --panel: #112050;
  --panel-2: #172a63;
  --line: rgba(160, 185, 255, 0.16);
  --chalk: #f3f1ea;
  --muted: #9fb0d6;
  --flood: #ffcf3f;
  --flood-ink: #1a1400;
  --grass: #2fbf71;
  --red: #ff5a4f;
  --sky: #4fb3ff;
  --violet: #b394ff;
  --display: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Barlow Semi Condensed", "Segoe UI", "Roboto", sans-serif;
  --cut: 12px;
  --tabbar: 0px;
}

* { box-sizing: border-box; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1200px 500px at 50% -180px, rgba(79, 179, 255, 0.14), transparent 70%),
    var(--bg);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.4;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, .act, .chip, .tabs, .mg, .tg, .hdr { user-select: none; -webkit-user-select: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
small { font-size: 13px; }
h1, h2, h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-style: italic; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; }
h2 { font-size: 30px; }
h3 { font-size: 22px; }
p { margin: 0 0 10px; }
.ic { width: 20px; height: 20px; flex-shrink: 0; vertical-align: -4px; }
:focus-visible { outline: 2px solid var(--flood); outline-offset: 2px; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--panel-2); color: var(--chalk);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 16px; min-height: 42px;
  font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; transition: transform .08s, background .15s, filter .15s;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-big, .btn-play {
  background: var(--flood); color: var(--flood-ink); border: 0;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  padding: 14px 28px; font-size: 21px; font-style: italic; min-height: 54px;
}
.btn-play .ic { width: 22px; height: 22px; fill: currentColor; }
.btn-ghost { background: transparent; }
.btn-danger { background: #8e1f22; border-color: #c43a3a; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- Başlık ekranı ---------- */
.title-screen {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; padding-block: 32px; padding-inline: max(16px, 7vw);
  overflow: hidden;
}
#title-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-card { position: relative; max-width: 460px; width: 100%; }
.title-logo {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: clamp(64px, 14vw, 112px); line-height: .85; letter-spacing: -0.02em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .5);
}
.title-logo span, .logo span { color: var(--flood); }
.title-sub { font-size: 20px; color: var(--chalk); opacity: .9; margin: 12px 0 28px; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.title-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.title-btns .btn { min-width: 260px; }
#btn-continue { background: var(--chalk); }
.title-note { color: var(--muted); font-size: 13px; margin-top: 26px; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
@media (max-width: 700px) {
  .title-screen { align-items: flex-start; padding-top: 12vh; }
  .title-btns .btn { min-width: 0; width: 100%; }
}

/* ---------- Karakter oluşturma ---------- */
#create { padding-block: 24px; padding-inline: 16px; display: flex; justify-content: center; }
.cr-card { max-width: 760px; width: 100%; }
.cr-card h1 { font-size: 46px; margin: 0; }
.cr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.cr-grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.cr-grid .full { grid-column: 1 / -1; }
.cr-grid small { text-transform: none; letter-spacing: 0; font-weight: 400; }
input, select {
  background: var(--panel); color: var(--chalk); border: 1px solid var(--line);
  border-radius: 4px; padding: 11px 12px; font-size: 16px; font-family: var(--body);
}
.lbl { font-weight: 700; margin: 16px 0 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.cr-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.cs { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; }
.cs.key { border-color: rgba(255, 207, 63, .55); }
.cs span { flex: 1; }
.cs b { width: 28px; text-align: center; font-family: var(--display); font-size: 20px; }
.cs button { width: 34px; height: 34px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2); color: var(--chalk); font-size: 18px; cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg button { flex: 1; background: transparent; color: var(--chalk); border: 0; padding: 9px 14px; cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.seg button.on { background: var(--flood); color: var(--flood-ink); }
.seg.big { width: 100%; }
.seg.big button { padding: 12px 10px; font-size: 18px; }

/* ---------- Üst bar ve sekmeler ---------- */
.hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, #050b1d, #0b1736);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 6;
}
.topbar { position: sticky; top: 0; z-index: 7; }
.logo { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 26px; letter-spacing: -0.01em; cursor: pointer; line-height: 1; }
.hdr-info { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.hdr-info span { display: inline-flex; align-items: center; gap: 6px; }
.hi-club { color: var(--chalk); font-weight: 600; }
.hi-week b { color: var(--chalk); }
.hi-money { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid rgba(255, 207, 63, .45); background: linear-gradient(180deg, rgba(255, 207, 63, .14), rgba(255, 207, 63, .04)); border-radius: 999px; font-variant-numeric: tabular-nums; }
.hm-coin { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff2b0, #ffcf3f 45%, #b8860b); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 12px rgba(255, 207, 63, .35); }
.hm-coin .ic { width: 18px; height: 18px; color: #5a3d00; }
.hm-t { display: flex; flex-direction: column; line-height: 1; }
.hm-t small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hm-t b { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--flood); }
.hm-inc { font-style: normal; font-size: 12px; font-weight: 700; color: #7ee0a8; padding-left: 8px; border-left: 1px solid rgba(255, 207, 63, .3); }
.hm-inc small { color: var(--muted); font-weight: 500; }
@media (max-width: 560px) { .hm-inc { display: none; } .hi-money { padding-right: 10px; } }
.shirt { width: 20px; height: 20px; flex-shrink: 0; }
.shirt.big { width: 34px; height: 34px; }

.tabs { display: flex; gap: 2px; padding: 0 16px; background: #0b1736; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; color: var(--muted);
  padding: 12px 14px; cursor: pointer; white-space: nowrap;
  font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.tabs button.on { color: var(--chalk); border-bottom-color: var(--flood); }
.layout { display: grid; grid-template-columns: 330px 1fr; gap: 16px; padding-block: 16px calc(24px + var(--tabbar)); padding-inline: 16px; max-width: 1320px; margin: 0 auto; }
#main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Paneller ---------- */
.card {
  background: linear-gradient(180deg, var(--panel), #0f1c47);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  padding: 16px; min-width: 0;
}
.card-h {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.card-h > span:first-child {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 800; font-style: italic; font-size: 21px; letter-spacing: .02em; text-transform: uppercase;
}
.card-h > span:first-child .ic { color: var(--flood); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tag { font-size: 13px; padding: 4px 10px; border-radius: 3px; background: var(--panel-2); color: var(--chalk); font-weight: 600; }
.role-starter { background: rgba(47, 191, 113, .18); color: #7ee0a8; }
.role-bench { background: rgba(255, 207, 63, .16); color: var(--flood); }
.role-out, .role-inj { background: rgba(255, 90, 79, .16); color: #ff8f86; }

/* ---------- Oyuncu kartı ---------- */
.pc { display: flex; flex-direction: column; gap: 2px; background: linear-gradient(180deg, var(--panel), #0d1940); border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); padding-bottom: 14px; }
.pc-hero {
  position: relative; display: grid; grid-template-columns: 88px 1fr auto; align-items: end; gap: 10px;
  padding: 14px 14px 0; min-height: 132px; overflow: hidden;
  background:
    linear-gradient(115deg, var(--c1) 0 55%, color-mix(in srgb, var(--c2) 85%, #000) 55% 62%, transparent 62%),
    linear-gradient(180deg, #1a2d66, #0f1c47);
}
.pc-fig { width: 88px; height: 110px; align-self: end; }
.pc-id { align-self: center; min-width: 0; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.pc-num { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 34px; line-height: 1; opacity: .9; }
.pc-name { font-size: 17px; line-height: 1.1; }
.pc-name b { display: block; font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .01em; }
.pc-sub { font-size: 12px; letter-spacing: .06em; opacity: .92; }
.pc-ovr { align-self: center; display: flex; flex-direction: column; align-items: center; background: rgba(5, 11, 29, .82); padding: 6px 10px 8px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); }
.pc-ovr b { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1; }
.pc-ovr span { font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.pc-inj { display: flex; align-items: center; gap: 8px; background: rgba(255, 90, 79, .16); color: #ff8f86; padding: 8px 14px; font-weight: 600; }
.pc-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 10px 14px 4px; font-size: 13px; color: var(--muted); }
.pc-meta .pot { color: var(--flood); letter-spacing: 1px; }
.pc-meta .pot i { color: rgba(255, 255, 255, .18); font-style: normal; }
.pc-meta .up { color: #7ee0a8; } .pc-meta .down { color: #ff8f86; }
.pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 14px; }
.ps { background: rgba(5, 11, 29, .35); border: 1px solid var(--line); padding: 6px 8px 7px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps b { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.ps span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-sec { padding: 10px 14px 4px; font-weight: 700; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
.mt-row { display: grid; grid-template-columns: 18px 70px 1fr 30px; align-items: center; gap: 8px; padding: 3px 14px; font-size: 14px; }
.mt-row .ic { width: 16px; height: 16px; color: var(--muted); }
.mt-row b { text-align: right; font-variant-numeric: tabular-nums; }
.pc-contract { display: flex; gap: 8px; align-items: flex-start; margin: 10px 14px 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pc-contract b { color: var(--chalk); }
.bar { height: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bar > div { height: 100%; background: var(--grass); transition: width .3s; }
.c-elite { color: #46e08f; } .bar.c-elite > div { background: #46e08f; }
.c-good { color: #a6e35d; } .bar.c-good > div { background: #a6e35d; }
.c-mid { color: var(--flood); } .bar.c-mid > div { background: var(--flood); }
.c-low { color: #ff9f4a; } .bar.c-low > div { background: #ff9f4a; }
.c-poor { color: #ff6f64; } .bar.c-poor > div { background: #ff6f64; }
.bar.c-energy > div { background: var(--sky); }
.bar.c-morale > div { background: var(--flood); }
.bar.c-fame > div { background: var(--violet); }
.bar.c-rel > div { background: #4fd6c0; }

/* ---------- Maç günü ve haftalık plan ---------- */
.next { display: flex; flex-direction: column; gap: 10px; }
.nm-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 0; }
.nm-team { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.nm-team b { font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; line-height: 1.05; }
.nm-team .shirt.big { width: 54px; height: 54px; }
.nm-team .nat { font-family: var(--display); font-weight: 800; font-size: 26px; background: var(--panel-2); padding: 6px 10px; }
.vs { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 30px; color: var(--flood); }
.nm-meta { color: var(--muted); font-size: 13px; text-align: center; }
.warn { display: flex; gap: 8px; align-items: center; background: rgba(255, 90, 79, .14); color: #ff9b93; padding: 9px 12px; font-size: 14px; }
.hint { color: var(--muted); font-size: 13px; text-align: center; }
.next .btn-play { margin-top: auto; width: 100%; }
.ap { display: inline-flex; gap: 5px; }
.ap i { width: 22px; height: 8px; background: rgba(255, 255, 255, .12); transform: skewX(-20deg); }
.ap i.on { background: var(--flood); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(5, 11, 29, .4); border: 1px solid var(--line); color: var(--chalk);
  padding: 7px 11px; font-size: 14px; cursor: pointer; font-family: var(--body); border-radius: 3px;
}
.chip b { font-family: var(--display); font-weight: 800; color: var(--muted); }
.chip.on { background: var(--flood); border-color: var(--flood); color: var(--flood-ink); font-weight: 600; }
.chip.on b { color: var(--flood-ink); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.act {
  display: flex; gap: 10px; align-items: center; text-align: left;
  background: rgba(5, 11, 29, .4); border: 1px solid var(--line); color: var(--chalk);
  padding: 10px 12px; cursor: pointer; font-family: var(--body); border-radius: 3px; min-height: 58px;
  transition: border-color .15s, background .15s;
}
.act .ic { width: 26px; height: 26px; color: var(--flood); }
.act:active:not(:disabled) { transform: scale(.98); }
.act:disabled { opacity: .35; cursor: not-allowed; }
.act b { display: block; font-size: 15px; }
.act small { color: var(--muted); font-size: 12px; }

.news { display: flex; flex-direction: column; }
.nw { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.nw small { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 2px; }
.nw.good small { color: #7ee0a8; }
.nw.bad small { color: #ff8f86; }

.offer { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); margin-bottom: 8px; background: rgba(5, 11, 29, .4); }
.of-info { flex: 1 1 140px; min-width: 0; }
.of-info em { color: var(--flood); font-style: normal; font-size: 12px; margin-left: 4px; }
.of-info small, .of-terms small { display: block; color: var(--muted); }
.of-terms { text-align: right; }
.of-terms b { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--flood); }

/* ---------- Tablolar ---------- */
.tscroll { }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tbl th { color: var(--muted); font-weight: 600; text-align: center; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.tbl td { text-align: center; padding: 7px 4px; border-bottom: 1px solid rgba(160, 185, 255, .08); }
.tbl .l { text-align: left; }
.tbl tr.hl td { background: rgba(255, 207, 63, .12); font-weight: 600; }
.tbl tr.hl td:first-child { box-shadow: inset 3px 0 0 var(--flood); }
.tbl tr.cur td { background: rgba(79, 179, 255, .12); }
.tbl b.w { color: #46e08f; } .tbl b.l { color: #ff6f64; } .tbl b.d { color: var(--flood); }
.code { display: inline-block; min-width: 36px; font-family: var(--display); font-weight: 800; font-size: 12px; background: var(--panel-2); padding: 1px 5px; text-align: center; }

/* ---------- Mağaza ---------- */
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; background: rgba(5, 11, 29, .4); border: 1px solid var(--line); padding: 10px 12px; }
.item.own { border-color: rgba(47, 191, 113, .6); }
.it-i { width: 42px; height: 42px; display: grid; place-items: center; background: var(--panel-2); color: var(--flood); flex-shrink: 0; }
.it-i .ic { width: 24px; height: 24px; }
.it-t { flex: 1; min-width: 0; }
.it-t small { display: block; color: var(--muted); }
.item .btn { font-size: 15px; padding: 8px 12px; }
.item .tag { background: rgba(47, 191, 113, .2); color: #7ee0a8; }
.trophies { margin: 0; padding-left: 18px; }
.trophies li { margin: 5px 0; }
.ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; }
.ms-grid.big { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.ms-grid div { background: rgba(5, 11, 29, .45); border: 1px solid var(--line); padding: 8px 10px; display: flex; flex-direction: column; }
.ms-grid span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.ms-grid b { font-family: var(--display); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; }

/* ---------- Modal ve bildirimler ---------- */
.modal { position: fixed; inset: 0; background: rgba(3, 7, 18, .78); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  padding: 24px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.modal-card.wide { max-width: 700px; }
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.modal-btns .btn:last-child:not(.btn-ghost):not(.btn-danger) { background: var(--flood); color: var(--flood-ink); border: 0; }
.tips { padding-left: 18px; } .tips li { margin: 7px 0; }
.ev-tag { display: inline-block; background: var(--sky); color: #04122b; font-size: 11px; padding: 3px 8px; margin-bottom: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tro { background: rgba(255, 207, 63, .1); border: 1px solid rgba(255, 207, 63, .4); padding: 10px 14px; margin: 12px 0; color: var(--flood); font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
.chgs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chg { font-size: 13px; padding: 3px 8px; background: rgba(5, 11, 29, .45); }
.chg.up { color: #7ee0a8; } .chg.down { color: #ff8f86; }
.se-msg { background: rgba(5, 11, 29, .45); padding: 9px 12px; }
.offers { margin-top: 10px; }
#toasts { pointer-events: none; position: fixed; top: calc(70px + env(safe-area-inset-top, 0px)); right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: calc(100vw - 32px); }
.toast {
  background: #0b1736; border: 1px solid var(--line); border-left: 4px solid var(--sky);
  padding: 10px 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); animation: tin .25s; transition: opacity .4s, transform .4s; font-weight: 600;
}
.toast.good { border-left-color: var(--grass); }
.toast.bad { border-left-color: var(--red); }
.toast.out { opacity: 0; transform: translateX(30px); }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Maç ekranı ---------- */
.overlay { position: fixed; inset: 0; background: var(--bg-2); z-index: 40; overflow-y: auto; }
.mt-wrap { max-width: 1100px; margin: 0 auto; padding-block: calc(10px + env(safe-area-inset-top, 0px)) 24px; padding-inline: 16px; }
.mt-top { background: #050b1d; border: 1px solid var(--line); }
.mt-comp { text-align: center; color: var(--muted); font-size: 12px; padding: 6px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.mt-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; }
.mt-team { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1.05; }
.mt-team span { min-width: 0; overflow-wrap: anywhere; }
.mt-team.right { justify-content: flex-end; text-align: right; }
.mt-score { display: flex; align-items: center; gap: 8px; background: var(--flood); color: var(--flood-ink); padding: 2px 14px; font-family: var(--display); font-weight: 800; font-size: 38px; line-height: 1.1; font-variant-numeric: tabular-nums; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.mt-score i { width: 10px; height: 3px; background: currentColor; }
.mt-time { display: flex; align-items: center; gap: 10px; padding: 0 12px 10px; }
.mt-time span { font-family: var(--display); font-weight: 800; font-size: 18px; background: var(--red); color: #fff; padding: 0 8px; min-width: 46px; text-align: center; }
.mt-prog { flex: 1; height: 4px; background: rgba(255, 255, 255, .1); }
.mt-prog div { height: 100%; background: var(--flood); width: 0; transition: width .2s; }
.mt-body { display: grid; grid-template-columns: 1fr 270px; gap: 12px; margin-top: 12px; }
.mt-feed { background: var(--panel); border: 1px solid var(--line); padding: 8px; height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.fd { padding: 8px 10px; background: rgba(5, 11, 29, .4); font-size: 14px; animation: tin .2s; }
.fd .ft { display: inline-block; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .08em; padding: 1px 6px; margin-right: 8px; background: var(--panel-2); color: var(--muted); }
.fd.goal.own { background: rgba(47, 191, 113, .16); }
.fd.goal.own .ft { background: var(--grass); color: #03200f; }
.fd.goal.opp { background: rgba(255, 90, 79, .12); }
.fd.goal.opp .ft { background: var(--red); color: #fff; }
.fd.bad .ft { background: var(--flood); color: var(--flood-ink); }
.fd.info { color: var(--muted); }
.fd .sc { float: right; font-family: var(--display); font-weight: 800; font-size: 16px; }
.mt-side { display: flex; flex-direction: column; gap: 12px; }
.mt-me { position: relative; overflow: hidden; background: linear-gradient(155deg, #16285e, #0b1533 70%); border: 1px solid rgba(255, 207, 63, .35); padding: 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); }
.mt-me::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--flood), #ff7a1a); }
.me-id { display: flex; align-items: center; gap: 10px; }
.me-num { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); border: 2px solid rgba(255, 255, 255, .6); border-radius: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.me-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.me-nm b { font-family: var(--display); font-weight: 800; font-size: 18px; text-transform: uppercase; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-nm small { color: var(--muted); font-size: 12px; }
.me-rt { flex: none; min-width: 52px; padding: 6px 8px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 24px; background: rgba(255, 255, 255, .08); border-radius: 8px; font-variant-numeric: tabular-nums; }
.me-rt.hi { background: #1f9d55; color: #fff; } .me-rt.mid { background: #c79a12; color: #0a1530; } .me-rt.lo { background: #c0392b; color: #fff; }
.me-st { margin: 10px 0 8px; display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(79, 179, 255, .16); color: #8cc9ff; border-radius: 999px; }
.me-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.me-chips div { padding: 6px; text-align: center; background: rgba(255, 255, 255, .05); border: 1px solid rgba(160, 185, 255, .1); }
.me-chips span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.me-chips b { font-family: var(--display); font-size: 20px; font-variant-numeric: tabular-nums; }
.me-en { margin-top: 10px; }
.me-en-h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.me-en-h span { display: inline-flex; align-items: center; gap: 4px; }
.me-en-h .ic { width: 14px; height: 14px; color: var(--flood); }
.me-en-h b { font-family: var(--display); font-size: 18px; color: var(--chalk); font-variant-numeric: tabular-nums; }
.me-en-bar { height: 8px; background: rgba(255, 255, 255, .08); border-radius: 999px; overflow: hidden; }
.me-en-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2fbf71, #7ee0a8); border-radius: 999px; transition: width .4s; }
.me-en-bar i.mid { background: linear-gradient(90deg, #d9a400, #ffcf3f); }
.me-en-bar i.lo { background: linear-gradient(90deg, #c0392b, #ff6f64); }
.mt-me-name { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; margin-bottom: 8px; }
.mt-me-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; color: var(--muted); border-bottom: 1px solid rgba(160, 185, 255, .08); }
.mt-me-row b { color: var(--chalk); font-variant-numeric: tabular-nums; }
.mt-ctrl { display: flex; flex-direction: column; gap: 8px; }
.mt-ctrl .seg { width: 100%; }

/* Pozisyon: tam ekran */
.mt-moment {
  position: fixed; inset: 0; z-index: 45; background: #050b1d;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mm-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 54px; background: #050b1d; border-bottom: 1px solid var(--line); }
.mm-min { font-family: var(--display); font-weight: 800; font-size: 20px; background: var(--red); color: #fff; padding: 2px 8px; }
.mm-tt { flex: 1; min-width: 0; }
.mm-title { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 22px; text-transform: uppercase; line-height: 1.05; }
.mm-desc { color: var(--muted); font-size: 13px; line-height: 1.25; }
#mm-auto { min-height: 38px; padding: 6px 12px; font-size: 15px; }
#mm-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mg, .tg { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mg-stage, .tg-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.mg-canvas, .tg-canvas { position: absolute; inset: 0; display: block; touch-action: none; }
.mg-canvas { cursor: crosshair; }
.tg { touch-action: none; cursor: pointer; }
.mg-lift { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; background: #050b1d; }
.mg-lift button {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: var(--panel); border: 1px solid var(--line); color: var(--chalk);
  padding: 8px 6px; cursor: pointer; min-height: 50px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.mg-lift button b { font-family: var(--display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.mg-lift button small { color: var(--muted); font-size: 12px; }
.mg-lift button.on { background: var(--flood); color: var(--flood-ink); border-color: var(--flood); }
.mg-lift button.on small { color: rgba(26, 20, 0, .75); }
.mg-lift.locked { opacity: .45; pointer-events: none; }
.tg-foot { text-align: center; color: var(--muted); font-size: 14px; padding: 10px; background: #050b1d; }
.tg-foot b { color: #7ee0a8; }
kbd { background: var(--panel-2); border: 1px solid var(--line); padding: 0 5px; font-size: 12px; font-family: var(--body); }

/* Maç sonu */
.ms { margin: 12px auto; flex: none; width: min(560px, calc(100% - 32px)); background: var(--panel); border: 1px solid var(--line); padding: 24px; text-align: center; }
.ms-rating { font-family: var(--display); font-weight: 800; font-size: 76px; line-height: 1; color: var(--flood); }
.ms-rating.good { color: #46e08f; } .ms-rating.bad { color: #ff6f64; }
.ms-motm { color: var(--flood); font-family: var(--display); font-weight: 800; font-style: italic; font-size: 24px; margin: 10px 0; text-transform: uppercase; }
.ms-none { color: var(--muted); margin: 20px 0; }
.ms .btn-big { width: 100%; margin-top: 8px; }

/* Kariyer sonu */
#end { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-block: 24px; padding-inline: 16px; }
.end-card { max-width: 660px; width: 100%; text-align: center; }
.end-card h1 { font-size: 48px; }
.end-title { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 32px; color: var(--flood); text-transform: uppercase; margin-bottom: 10px; }
.end-card .trophies { text-align: left; }

/* ---------- Telefon ---------- */
@media (max-width: 900px) {
  :root { --tabbar: 64px; }
  .layout { grid-template-columns: 1fr; padding-block: 12px calc(24px + var(--tabbar) + env(safe-area-inset-bottom, 0px)); }
  .pc { position: static; }
  .grid2 { grid-template-columns: 1fr; }
  .tabs {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 30; padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--line); border-bottom: 0; background: #050b1d;
    display: grid; grid-template-columns: repeat(5, 1fr);
  }
  .tabs button { flex-direction: column; gap: 2px; padding: 8px 2px 7px; font-size: 11px; border-bottom: 0; border-top: 3px solid transparent; }
  .tabs button.on { border-top-color: var(--flood); }
  .tabs .ic { width: 22px; height: 22px; }
  .mt-body { grid-template-columns: 1fr; }
  .mt-feed { height: 42vh; order: 2; }
}
@media (max-width: 560px) {
  .hdr { padding-inline: 12px; }
  .logo { font-size: 22px; }
  .hdr-info { gap: 10px; font-size: 12px; }
  .hi-club { display: none !important; }
  .acts { grid-template-columns: 1fr; }
  .cr-grid { grid-template-columns: 1fr; }
  .mt-team { font-size: 14px; gap: 6px; }
  .mt-team .shirt.big { width: 24px; height: 24px; }
  .mt-score { font-size: 28px; padding: 2px 10px; }
  .mm-title { font-size: 18px; }
  .mm-desc { display: none; }
  #mm-auto span { display: none; }
  .mg-lift button small { display: none; }
  .ms-grid { grid-template-columns: repeat(2, 1fr); }
  .tbl { font-size: 13px; }
  .offer { flex-wrap: wrap; }
  .offer > .btn { flex: 1 1 100%; }
  .nm-team b { font-size: 16px; }
}

/* ---------- Durum şeridi (her sekmede) ---------- */
.status {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border-bottom: 1px solid var(--line);
}
.st-cell { display: flex; align-items: center; gap: 8px; background: #081332; padding: 7px 12px; min-width: 0; }
.st-cell > .ic { width: 18px; height: 18px; color: var(--muted); }
.st-cell > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-cell span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); line-height: 1; }
.st-cell b { font-family: var(--display); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.st-cell em { font-style: normal; font-weight: 700; font-size: 14px; line-height: 1; }
.st-ok > .ic { color: #7ee0a8; } .st-ok em { color: #7ee0a8; }
.st-mid > .ic, .st-mid b { color: var(--flood); }
.st-low { background: #2a0e18; } .st-low > .ic, .st-low b, .st-low em { color: #ff7d74; }
.st-ap .ap i { width: 16px; height: 7px; }
.only-m { display: none !important; }

/* ---------- Haftalık plan ---------- */
.ap-pill { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; background: var(--flood); color: var(--flood-ink); padding: 4px 10px; }
.ap-pill.done { background: var(--red); color: #fff; }
.lbl small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; color: var(--flood); }
.focus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fc {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  background: rgba(5, 11, 29, .45); border: 1px solid var(--line); color: var(--chalk);
  padding: 8px 10px 9px; cursor: pointer; font-family: var(--body); min-width: 0; border-radius: 3px;
  transition: border-color .15s, background .15s, transform .08s;
}
.fc span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fc span i { font-style: normal; color: var(--flood); margin-left: 4px; }
.fc b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; }
.fc .bar { width: 100%; }
.fc:active { transform: scale(.97); }
.fc.on { border-color: var(--flood); background: rgba(255, 207, 63, .12); box-shadow: inset 0 0 0 1px var(--flood); }
.fc.on span { color: var(--chalk); }
.focus-info { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; background: rgba(79, 179, 255, .08); border: 1px solid rgba(79, 179, 255, .25); font-size: 14px; color: var(--muted); }
.focus-info .ic { color: var(--sky); margin-top: 1px; }
.focus-info b { color: var(--chalk); }
.act { position: relative; }
.act .cost { margin-left: auto; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 13px; padding: 2px 7px; background: rgba(47, 191, 113, .16); color: #7ee0a8; white-space: nowrap; align-self: flex-start; }
.act .cost.neg { background: rgba(79, 179, 255, .14); color: #8cc9ff; }

/* ---------- Mağaza ekleri ---------- */
.shop-head p { margin: 0 0 4px; }
.item.use .it-i { color: var(--sky); }
.item.locked { opacity: .5; }
.item.locked .tag { background: var(--panel-2); color: var(--muted); }

/* ---------- Kupa vitrini ve madalyalar ---------- */
.cabinet {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0;
  background: linear-gradient(180deg, #1b1209, #2a1c0e); border: 6px solid #4a3218; padding: 10px 6px 0;
}
.trophy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 8px 6px 12px; border-bottom: 8px solid #5a3e1e; box-shadow: 0 -2px 0 rgba(255, 207, 63, .08) inset; }
.trophy svg { width: 62px; height: 62px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.trophy b { font-size: 12px; line-height: 1.15; color: #f6e2b0; }
.trophy small { font-family: var(--display); font-weight: 800; color: var(--flood); font-size: 14px; }
.cab-empty { grid-column: 1 / -1; color: #c9b48a; padding: 28px 12px; text-align: center; border-bottom: 8px solid #5a3e1e; }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.medal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 10px 6px; background: rgba(5, 11, 29, .45); border: 1px solid var(--line); }
.medal svg { width: 42px; height: 50px; }
.medal svg.locked { filter: grayscale(1) brightness(.45); }
.medal b { font-size: 13px; line-height: 1.1; }
.medal small { font-size: 11px; color: var(--muted); line-height: 1.2; }
.medal.got { border-color: rgba(255, 207, 63, .45); }
.medal.got small { color: var(--flood); font-family: var(--display); font-weight: 800; font-size: 13px; }

/* ---------- Sürpriz paket ---------- */
.loot { text-align: center; }
.loot-box {
  width: 120px; height: 110px; margin: 10px auto; display: block; border: 0; cursor: pointer; position: relative;
  background: linear-gradient(180deg, #c8102e, #8e0b20); clip-path: polygon(6% 22%, 94% 22%, 94% 100%, 6% 100%);
  animation: wob 1.6s ease-in-out infinite;
}
.loot-box.silver { background: linear-gradient(180deg, #9aa6b8, #5d6878); }
.loot-box.gold { background: linear-gradient(180deg, #ffd34d, #b8860b); }
.loot-box span { position: absolute; left: 44%; top: 0; width: 12%; height: 100%; background: rgba(255, 255, 255, .85); }
.loot-box::before { content: ""; position: absolute; left: 0; right: 0; top: 22%; height: 18%; background: rgba(0, 0, 0, .18); }
.loot-box.open { animation: pop .6s forwards; }
.loot-res { min-height: 34px; font-family: var(--display); font-size: 24px; color: var(--flood); }
@keyframes wob { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-6deg); } 20% { transform: rotate(6deg); } 30% { transform: rotate(0); } }
@keyframes pop { 50% { transform: scale(1.25); } 100% { transform: scale(0); opacity: 0; } }

/* ---------- Devre arası ---------- */
.ht { margin: auto; width: min(620px, calc(100% - 32px)); background: var(--panel); border: 1px solid var(--line); padding: 22px; }
.ht h3 { font-size: 30px; margin-bottom: 4px; }
.ht-score { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--muted); margin-bottom: 14px; }
.ht-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ht-opts .act { min-height: 74px; }
@media (max-width: 560px) { .ht-opts { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  #side { display: none; }
  .only-m { display: inline-flex !important; }
  .tabs { grid-template-columns: repeat(5, 1fr) !important; }
  .tabs button { font-size: 11px; letter-spacing: .03em; }
}
@media (max-width: 560px) {
  .status { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-ap { display: none; }
  .st-cell { padding: 6px 8px; gap: 6px; }
  .st-cell > .ic { display: none; }
  .st-cell b { font-size: 17px; }
  .focus { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .fc { padding: 7px 8px; }
  .fc b { font-size: 22px; }
  .acts { grid-template-columns: 1fr 1fr; }
  .act { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; min-height: 0; }
  .ht-opts .act { flex-direction: row; align-items: center; }
  .ht-opts .act small { display: block; }
  .tbl { font-size: 12.5px; table-layout: auto; }
  .tbl th { font-size: 10px; letter-spacing: 0; padding: 6px 2px; }
  .tbl td { padding: 6px 2px; overflow-wrap: anywhere; }
  .act .cost { position: absolute; top: 8px; right: 8px; }
  .act small { display: none; }
}


/* ---------- Kadro ---------- */
.sq-head { background: linear-gradient(110deg, color-mix(in srgb, var(--c1) 55%, #0f1c47) 0 34%, #0f1c47 34%); }
.sq-id { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sq-id .shirt.big { width: 58px; height: 58px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.sq-id h2 { margin: 0; font-size: 28px; line-height: 1; }
.sq-id small { color: var(--muted); }
.sq-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sq-stats div { background: rgba(5, 11, 29, .5); border: 1px solid var(--line); padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; }
.sq-stats span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sq-stats b { font-family: var(--display); font-weight: 800; font-size: 24px; }
.sq-stats b[class^="role-"] { background: none; padding: 0; }
.sq-stats b.role-starter { color: #7ee0a8; } .sq-stats b.role-bench { color: var(--flood); } .sq-stats b.role-out { color: #ff8f86; }
.sq-lines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.sq-lines div { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; font-size: 13px; color: var(--muted); }
.sq-lines .bar { grid-column: 1 / -1; grid-row: 2; }
.sq-lines b { color: var(--chalk); font-family: var(--display); font-weight: 800; font-size: 17px; }
.sq-note { margin: 12px 0 0; }
.sq-note b { color: var(--chalk); }
.sq-grid { align-items: start; }
.formation {
  position: relative; aspect-ratio: 3 / 4; max-width: 100%;
  background:
    linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.75)) 50% 0 / 40% 2px no-repeat,
    repeating-linear-gradient(180deg, #2f8c45 0 10%, #38994d 10% 20%);
  border: 2px solid rgba(255, 255, 255, .7);
  overflow: hidden;
}
.formation::before { content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 15%; border: 2px solid rgba(255,255,255,.7); border-top: 0; }
.formation::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 15%; border: 2px solid rgba(255,255,255,.7); border-bottom: 0; }
.pp { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; width: 23%; z-index: 1; text-align: center; }
.pp b { font-size: 12px; line-height: 1.1; background: rgba(5, 11, 29, .78); padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp span { font-family: var(--display); font-weight: 800; font-size: 14px; background: rgba(5, 11, 29, .78); padding: 0 6px; line-height: 1.3; }
.pp.me b { background: var(--flood); color: var(--flood-ink); }
.pp-shirt { position: relative; display: grid; place-items: center; }
.pp-shirt .shirt.big { width: 40px; height: 40px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.pp-shirt i { position: absolute; top: 46%; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 13px; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.pp.me .pp-shirt .shirt { filter: drop-shadow(0 0 6px var(--flood)); }
.bench { display: flex; flex-direction: column; gap: 6px; }
.bc { display: grid; grid-template-columns: 40px 1fr auto 40px; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(5, 11, 29, .45); border: 1px solid var(--line); }
.bc.me { border-color: var(--flood); background: rgba(255, 207, 63, .1); }
.bc .pp-shirt .shirt.big { width: 34px; height: 34px; }
.bc-t { min-width: 0; }
.bc-t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-t small { color: var(--muted); }
.bc .pos { font-family: var(--display); font-weight: 800; font-size: 12px; background: var(--panel-2); padding: 2px 6px; color: var(--muted); }
.bc .rt { font-family: var(--display); font-weight: 800; font-size: 22px; text-align: right; }
@media (max-width: 560px) {
  .sq-stats, .sq-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sq-id h2 { font-size: 22px; }
  .pp-shirt .shirt.big { width: 32px; height: 32px; }
  .pp b { font-size: 11px; }
}


/* ---------- Lig ---------- */
.lg-head { background: linear-gradient(110deg, color-mix(in srgb, var(--c1) 45%, #0f1c47) 0 30%, #0f1c47 30%); }
.lg-head .sq-id > .ic { width: 46px; height: 46px; color: var(--flood); }
.form { display: inline-flex; gap: 3px; vertical-align: middle; }
.fm { display: inline-grid; place-items: center; width: 20px; height: 20px; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 12px; color: #fff; }
.fm-W { background: #22a35a; } .fm-D { background: #8a7a2a; } .fm-L { background: #c0392b; }
.sq-stats b.form { padding-top: 4px; }
.lgt td { padding: 8px 4px; }
.lgt .tm { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lgt .rk { display: inline-grid; place-items: center; width: 24px; height: 24px; font-family: var(--display); font-weight: 800; }
.lgt tr.z-champ .rk { background: var(--flood); color: var(--flood-ink); }
.lgt tr.z-up .rk { background: #22a35a; color: #fff; }
.lgt tr.z-down .rk { background: #c0392b; color: #fff; }
.lgt .pts { font-family: var(--display); font-size: 18px; }
.lgt td.pos { color: #7ee0a8; } .lgt td.neg { color: #ff8f86; }
.lg-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.lg-legend i { display: inline-block; width: 10px; height: 10px; margin-left: 8px; }
.lg-legend i.z-champ { background: var(--flood); } .lg-legend i.z-up { background: #22a35a; } .lg-legend i.z-down { background: #c0392b; }
.fixtures { display: flex; flex-direction: column; gap: 4px; }
.mc { display: grid; grid-template-columns: 26px 1fr 74px 1fr; align-items: center; gap: 8px; padding: 7px 8px; background: rgba(5, 11, 29, .45); border: 1px solid var(--line); font-size: 13px; }
.mc .nm-s { display: none; font-family: var(--display); font-weight: 800; }
.mc-t .nm-l { overflow: hidden; text-overflow: ellipsis; }
.mc .wk { font-family: var(--display); font-weight: 800; color: var(--muted); }
.mc-t { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mc-t.h { justify-content: flex-end; text-align: right; }
.mc-s { text-align: center; font-family: var(--display); font-weight: 800; font-size: 16px; background: var(--panel-2); padding: 2px 0; }
.mc-s.r-W { background: #22a35a; } .mc-s.r-L { background: #c0392b; } .mc-s.r-D { background: #8a7a2a; }
.mc.cur { border-color: var(--flood); }
.mc.cur .mc-s { background: var(--flood); color: var(--flood-ink); font-size: 12px; }
.scorers { display: flex; flex-direction: column; gap: 4px; }
.scr { display: grid; grid-template-columns: 24px 22px 1fr auto; align-items: center; gap: 8px; padding: 7px 8px; background: rgba(5, 11, 29, .45); border: 1px solid var(--line); }
.scr .rk { font-family: var(--display); font-weight: 800; color: var(--muted); text-align: center; }
.scr-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scr-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-t small { color: var(--muted); }
.scr .g { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--flood); }
.scr.me { border-color: var(--flood); background: rgba(255, 207, 63, .1); }

/* ---------- Sosyal medya ---------- */
.nw.world small { color: var(--sky); font-family: var(--display); font-weight: 800; letter-spacing: .08em; }
@media (max-width: 560px) {
  .hide-s { display: none; }
  .lgt .tm { gap: 6px; }
  .lgt .tm .shirt { width: 16px; height: 16px; }
  .mc { grid-template-columns: 22px 1fr 62px 1fr; gap: 6px; font-size: 14px; }
  .mc .nm-l { display: none; }
  .mc .nm-s { display: inline; }
  .mc .shirt { width: 16px; height: 16px; }
    }

/* ---------- Kariyer slotları ---------- */
.slots { display: flex; flex-direction: column; gap: 8px; }
.slot { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px; background: rgba(5, 11, 29, .78); border: 1px solid var(--line); padding: 8px 10px; }
.slot.empty { grid-template-columns: 34px 1fr auto; opacity: .92; }
.sl-n { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--flood); text-align: center; }
.sl-t { min-width: 0; }
.sl-t b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-t small { color: var(--muted); }
.slot .btn { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.slot .btn-play { clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); min-height: 40px; padding: 8px 16px; font-size: 16px; }
.sl-del { width: 40px; padding: 0; }
.title-card { max-width: 520px; }

/* ---------- Sosyal gündem ---------- */
.so-trends { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.so-tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; background: rgba(5, 11, 29, .45); border-left: 3px solid var(--sky); }
.so-tr.retire { border-left-color: var(--flood); }
.so-tr b { color: var(--sky); font-size: 13px; }
.so-tr span { grid-column: 1 / -1; font-size: 14px; }
.so-tr small { grid-row: 1; grid-column: 2; display: inline-flex; align-items: center; gap: 4px; color: #ff6f8a; font-weight: 700; }
.so-tr small .ic { width: 13px; height: 13px; fill: currentColor; }

/* ---------- Kupalar ---------- */
.cups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.cup { background: rgba(5, 11, 29, .45); border: 1px solid var(--line); padding: 10px; min-width: 0; }
.cup-h { display: flex; flex-direction: column; margin-bottom: 8px; }
.cup-h b { font-family: var(--display); font-weight: 800; font-size: 18px; text-transform: uppercase; color: var(--flood); }
.cup-h small { color: var(--muted); }
.cup-list { display: flex; flex-direction: column; gap: 3px; }
.cm { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; font-size: 13px; padding: 4px 6px; }
.cm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.cm span:first-child { text-align: right; }
.cm span.w { color: var(--chalk); font-weight: 700; }
.cm b { font-family: var(--display); font-weight: 800; }
.cm.me { background: rgba(255, 207, 63, .12); }
.cup-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 13px; }
.cup-teams span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cup-teams span.me { color: var(--flood); font-weight: 700; }
.cup-teams .shirt { width: 16px; height: 16px; }
.cup-in { margin: 8px 0 0; color: var(--flood); font-size: 13px; }
.cup-hist { display: flex; flex-direction: column; gap: 3px; }
.cup-hist div { display: grid; grid-template-columns: 46px 1fr auto; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.cup-hist small { font-family: var(--display); font-weight: 800; color: var(--flood); }
.cup-hist span { color: var(--muted); }

.cr-diff-note { display: block; margin-top: 6px; }
.diff-row { display: flex; align-items: center; gap: 10px; flex-basis: 100%; margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Antrenman mini oyunları */
.drill { z-index: 60; }
.dr-tag { background: var(--flood); color: #0a1530; font-size: 15px; }
.dr-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#dr-skip { min-height: 38px; padding: 6px 12px; font-size: 15px; }
.drill-tg { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(255, 207, 63, .06); cursor: pointer; }
.drill-tg input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--flood); flex: none; }
.drill-tg span { display: flex; flex-direction: column; gap: 2px; }
.drill-tg b { font-family: var(--display); font-size: 16px; text-transform: uppercase; }
.drill-tg small { color: var(--muted); font-size: 13px; line-height: 1.3; }

.more-btn { width: 100%; margin-top: 10px; min-height: 40px; }

/* Kaptanlık */
.armband { display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--flood); color: #0a1530; font-family: var(--display); font-style: normal; font-weight: 800; font-size: 14px; border-radius: 4px; margin-right: 6px; vertical-align: middle; }
.armband.off { background: transparent; color: var(--muted); border: 2px dashed var(--muted); }
.armband.sm { width: 16px; height: 16px; font-size: 11px; margin: 0 0 0 3px; }
.cap-card.on { border-color: var(--flood); background: linear-gradient(135deg, rgba(255, 207, 63, .14), var(--panel) 60%); }
.cap-goals { display: grid; gap: 6px; margin: 4px 0 10px; }
.cg { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.cg-i { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 2px solid var(--muted); border-radius: 50%; font-size: 12px; font-weight: 800; }
.cg.ok .cg-i { background: #46e08f; border-color: #46e08f; color: #0a1530; }
.cg-l { flex: 1; font-size: 14px; }
.cg b { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted); }
.cg.ok b { color: #46e08f; }

.motm-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 12px; background: linear-gradient(180deg, #2a1d0f, #1a1208); border-bottom: 6px solid #4a3418; }
.motm-mini { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; }
.motm-mini svg { width: 48px; height: 48px; }
.motm-mini b { font-family: var(--display); font-size: 18px; color: var(--flood); }
.motm-mini small { color: #d8c9a8; font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
/* Başarım kategorileri */
.ach-cats { display: grid; gap: 6px; margin-top: 12px; }
.ach-cat { border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.ach-cat summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.ach-cat summary::-webkit-details-marker { display: none; }
.ach-cat summary b { font-family: var(--display); font-size: 17px; text-transform: uppercase; flex: none; }
.ach-cat summary .muted { font-size: 13px; flex: none; }
.ach-prog { flex: 1; height: 6px; background: rgba(255, 255, 255, .08); display: block; }
.ach-prog i { display: block; height: 100%; background: var(--flood); }
.ach-cat summary::after { content: '▾'; color: var(--muted); transition: transform .2s; }
.ach-cat[open] summary::after { transform: rotate(180deg); }
.ach-cat .medals { padding: 0 12px 12px; }

/* Hediye paketi ve reklam */
.gift { text-align: center; }
.gift-box { position: relative; width: 110px; height: 100px; margin: 12px auto 6px; display: grid; place-items: center; background: linear-gradient(160deg, #ff3d6e, #a3123a); clip-path: polygon(4% 22%, 96% 22%, 96% 100%, 4% 100%); animation: wob 1.8s ease-in-out infinite; }
.gift-box::before { content: ""; position: absolute; left: 0; right: 0; top: 22%; height: 16%; background: rgba(0, 0, 0, .2); }
.gift-box i { position: absolute; left: 45%; top: 0; width: 10%; height: 100%; background: var(--flood); }
.gift-box .ic { position: relative; width: 38px; height: 38px; color: #fff; margin-top: 18px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }
.gift-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.gift-opt { padding: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); display: flex; flex-direction: column; gap: 2px; }
.gift-opt span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.gift-opt b { font-family: var(--display); font-size: 20px; }
.gift-opt.hot { border-color: var(--flood); background: rgba(255, 207, 63, .1); }
.gift-opt.hot b { color: var(--flood); }
.ad-ov { position: fixed; inset: 0; z-index: 90; background: rgba(2, 6, 18, .92); display: grid; place-items: center; padding: 16px; }
.ad-box { width: min(420px, 100%); background: #0f1d44; border: 1px solid var(--line); padding: 16px; text-align: center; display: grid; gap: 12px; }
.ad-tag { justify-self: start; font-size: 11px; letter-spacing: .14em; padding: 2px 8px; background: #2a3a66; color: #cfd8ff; }
.ad-art { padding: 34px 12px; background: linear-gradient(135deg, #ffcf3f, #ff7a1a); color: #0a1530; display: grid; gap: 4px; }
.ad-art b { font-family: var(--display); font-size: 30px; font-style: italic; }
.ad-cnt { color: var(--muted); }
.ad-cnt b { color: var(--flood); font-size: 18px; }

/* Haftalık plan: aksiyon hakları, antrenman kartları ve aktiviteler */
.ap-pips { display: inline-flex; align-items: center; gap: 5px; }
.ap-pips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--flood); }
.ap-pips i.on { background: var(--flood); box-shadow: 0 0 8px rgba(255, 207, 63, .6); }
.ap-pips b { margin-left: 4px; font-family: var(--display); font-size: 14px; text-transform: uppercase; color: var(--flood); }
.ap-pips.done i { border-color: var(--red); }
.ap-pips.done b { color: #ff8f86; }
.lbl small { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.tr-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tr-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; text-align: left; color: var(--chalk); cursor: pointer; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(79, 179, 255, .12), rgba(10, 21, 48, .6)); transition: transform .12s, border-color .12s; }
.tr-card.tr-intense { background: linear-gradient(160deg, rgba(255, 120, 90, .16), rgba(10, 21, 48, .6)); }
.tr-card.tr-coach { background: linear-gradient(160deg, rgba(255, 207, 63, .16), rgba(10, 21, 48, .6)); }
.tr-card:disabled { opacity: .35; cursor: not-allowed; }
.tr-top { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.tr-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.tr-ic .ic { width: 22px; height: 22px; color: var(--flood); }
.tr-cost { font-style: normal; font-family: var(--display); font-weight: 800; font-size: 13px; padding: 2px 7px; background: rgba(47, 191, 113, .16); color: #7ee0a8; }
.tr-cost.neg { background: rgba(79, 179, 255, .14); color: #8cc9ff; }
.tr-card b { font-family: var(--display); font-size: 17px; text-transform: uppercase; line-height: 1.05; }
.tr-int { display: flex; gap: 3px; }
.tr-int i { width: 16px; height: 5px; background: rgba(255, 255, 255, .15); }
.tr-int i.on { background: var(--flood); }
.tr-gain { font-family: var(--display); font-weight: 800; font-size: 22px; color: #7ee0a8; line-height: 1; }
.tr-card small { color: var(--muted); font-size: 12px; line-height: 1.25; }
.ac-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-tile { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; text-align: left; color: var(--chalk); cursor: pointer; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.ac-tile:disabled { opacity: .35; cursor: not-allowed; }
.ac-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(79, 179, 255, .16); }
.ac-ic .ic { width: 20px; height: 20px; color: var(--sky); }
.ac-rest .ac-ic { background: rgba(126, 224, 168, .16); } .ac-rest .ac-ic .ic { color: #7ee0a8; }
.ac-talk .ac-ic { background: rgba(255, 207, 63, .16); } .ac-talk .ac-ic .ic { color: var(--flood); }
.ac-fans .ac-ic { background: rgba(255, 61, 110, .16); } .ac-fans .ac-ic .ic { color: #ff7a9a; }
.ac-t { display: flex; flex-direction: column; min-width: 0; }
.ac-t b { font-size: 15px; }
.ac-t small { color: var(--muted); font-size: 12px; line-height: 1.2; }
.ac-tile em { margin-left: auto; align-self: flex-start; white-space: nowrap; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 12px; padding: 1px 6px; background: rgba(47, 191, 113, .16); color: #7ee0a8; }
.ac-tile em.neg { background: rgba(79, 179, 255, .14); color: #8cc9ff; }
@media (max-width: 560px) {
  .tr-row { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .tr-card { padding: 9px; }
  .tr-card small { display: none; }
  .tr-card b { font-size: 14px; }
  .tr-gain { font-size: 18px; }
  .tr-ic { width: 30px; height: 30px; }
  .ac-t small { display: none; }
}

/* Mağaza */
.shop-wallet { display: flex; align-items: center; gap: 18px; padding: 10px 12px; margin: 4px 0 8px; background: rgba(255, 207, 63, .08); border: 1px solid rgba(255, 207, 63, .3); }
.shop-wallet .ic { width: 26px; height: 26px; color: var(--flood); }
.shop-wallet span { display: flex; flex-direction: column; }
.shop-wallet small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.shop-wallet b { font-family: var(--display); font-size: 20px; color: var(--flood); }
.shop-cat { margin-bottom: 10px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), #0d1940); }
.shop-cat summary { display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; list-style: none; }
.shop-cat summary::-webkit-details-marker { display: none; }
.shop-cat summary > .ic { width: 26px; height: 26px; color: var(--flood); flex: none; }
.sc-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sc-t b { font-family: var(--display); font-size: 19px; font-style: italic; text-transform: uppercase; }
.sc-t small { color: var(--muted); font-size: 12px; }
.sc-n { font-family: var(--display); font-weight: 800; font-size: 14px; padding: 2px 8px; background: rgba(255, 255, 255, .08); }
.sc-chev { width: 20px; height: 20px; color: var(--muted); transition: transform .2s; }
.shop-cat[open] .sc-chev { transform: rotate(180deg); }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 0 12px 12px; }
.sh-item { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.sh-item.own { border-color: rgba(70, 224, 143, .5); background: rgba(70, 224, 143, .06); }
.sh-item.locked { opacity: .5; }
.sh-art { height: 74px; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 70%); }
.sh-art svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.sh-t { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sh-t b { font-size: 14px; line-height: 1.2; }
.sh-t small { color: var(--muted); font-size: 12px; line-height: 1.25; }
.sh-act .btn-buy { width: 100%; min-height: 36px; padding: 6px; font-size: 14px; }
.sh-act .tag { display: inline-flex; align-items: center; gap: 4px; }
.sh-act .tag.own { color: #7ee0a8; }
.sh-act .tag .ic { width: 14px; height: 14px; }
@media (max-width: 560px) { .sh-grid { grid-template-columns: 1fr 1fr; } }

/* Gazete */
.paper { background: #f1e9d6; color: #1b1712; border: 0; clip-path: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); padding: 18px; }
.paper .muted { color: #6b5f4d; }
.pp-mast { text-align: center; border-bottom: 3px double #1b1712; padding-bottom: 8px; margin-bottom: 12px; }
.pp-top { display: flex; justify-content: space-between; font-family: 'Lora', serif; font-size: 12px; border-bottom: 1px solid #1b1712; padding-bottom: 4px; text-transform: uppercase; letter-spacing: .08em; }
.pp-mast h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: clamp(30px, 7vw, 44px); line-height: 1; margin: 8px 0 2px; letter-spacing: -.01em; text-transform: none; font-style: normal; color: #1b1712; }
.pp-sub { font-family: 'Lora', serif; font-style: italic; font-size: 13px; color: #4a4033; }
.pp-k { display: inline-block; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #a3122a; margin-bottom: 4px; }
.pp-lead { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #1b1712; }
.pp-lead h3 { text-transform: none; font-style: normal; letter-spacing: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: clamp(22px, 5vw, 30px); line-height: 1.1; margin: 0 0 6px; color: #1b1712; }
.pp-lead p { font-family: 'Lora', serif; font-size: 16px; line-height: 1.45; margin: 0 0 4px; }
.pp-lead small, .pp-item small { font-family: 'Lora', serif; font-style: italic; font-size: 12px; color: #6b5f4d; }
.pp-cols { column-count: 2; column-gap: 22px; column-rule: 1px solid rgba(27, 23, 18, .35); }
.pp-item { break-inside: avoid; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(27, 23, 18, .2); }
.pp-item p { font-family: 'Lora', serif; font-size: 14px; line-height: 1.45; margin: 0 0 2px; }
.pp-item p b { font-weight: 600; }
.pp-item.world .pp-k { color: #1f4f9e; }
.pp-item.bad .pp-k { color: #6b5f4d; }
.paper .more-btn { color: #1b1712; border-color: #1b1712; background: transparent; }
@media (max-width: 560px) { .pp-cols { column-count: 1; } .paper { padding: 14px; } }

.tr-cost { white-space: nowrap; }
@media (max-width: 560px) { .ac-tile { flex-wrap: wrap; } .ac-tile em { margin-left: 46px; } }

/* Hava durumu etiketi */
.mt-wx { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--chalk); text-transform: none; letter-spacing: 0; }
.mt-wx.wx-rain { background: rgba(79, 179, 255, .2); } .mt-wx.wx-snow { background: rgba(255, 255, 255, .22); } .mt-wx.wx-fog { background: rgba(160, 170, 190, .25); } .mt-wx.wx-wind { background: rgba(126, 224, 168, .2); }
/* Lige özel TV skorbordu (pozisyon ekranı) */
.mm-sb { position: absolute; left: 10px; top: calc(66px + env(safe-area-inset-top, 0px)); z-index: 2; display: flex; align-items: stretch; pointer-events: none; font-family: var(--display); font-weight: 800; font-size: 14px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(18, 26, 52, .92), rgba(6, 10, 24, .92)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 8px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mm-sb:empty { display: none; }
.mm-sb > span { display: flex; align-items: center; padding: 0 8px; height: 30px; }
.sb-tag { background: linear-gradient(135deg, var(--sb1), color-mix(in srgb, var(--sb1) 70%, #000)); color: var(--sb2); font-size: 10px; letter-spacing: .1em; padding: 0 10px !important; border-right: 1px solid rgba(255, 255, 255, .12); }
.sb-t { gap: 6px; color: #fff; letter-spacing: .06em; font-size: 15px; }
.sb-t i { display: block; width: 4px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, var(--k1) 50%, var(--k2) 50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.sb-s { gap: 0; padding: 0 !important; background: #f3f1ea; color: #0a1530; font-variant-numeric: tabular-nums; }
.sb-s b { display: grid; place-items: center; min-width: 22px; height: 100%; font-size: 18px; }
.sb-s em { display: block; width: 1px; height: 16px; background: rgba(10, 21, 48, .25); }
.sb-m { gap: 6px; color: var(--flood); min-width: 46px; justify-content: center; border-left: 1px solid rgba(255, 255, 255, .1); font-variant-numeric: tabular-nums; }
.sb-m .live { display: block; width: 7px; height: 7px; border-radius: 50%; background: #ff3d3d; box-shadow: 0 0 0 0 rgba(255, 61, 61, .7); animation: sbpulse 1.4s infinite; }
@keyframes sbpulse { 0% { box-shadow: 0 0 0 0 rgba(255, 61, 61, .7); } 70% { box-shadow: 0 0 0 6px rgba(255, 61, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 61, 61, 0); } }
@media (max-width: 560px) { .mm-sb > span { height: 26px; padding: 0 6px; } .sb-tag { display: none !important; } .sb-t { font-size: 13px; } .sb-s b { font-size: 16px; min-width: 19px; } }
.ms-grid .wide { grid-column: 1 / -1; }
.ms-grid small.neg { color: #ff8f86; font-size: 13px; }
/* Forma numarası */
.num-row { display: flex; gap: 14px; align-items: center; }
.num-big { flex: none; width: 74px; height: 84px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 44px; color: #fff; background: linear-gradient(160deg, #c8102e, #7a0a1c); clip-path: polygon(22% 0, 78% 0, 100% 18%, 88% 30%, 88% 100%, 12% 100%, 12% 30%, 0 18%); text-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.num-big.ok { background: linear-gradient(160deg, #2fbf71, #146c3c); margin: 8px auto; }
.num-big.no { background: linear-gradient(160deg, #6b7280, #374151); margin: 8px auto; }
.num-form { flex: 1; display: grid; gap: 6px; }
.num-form select { min-height: 40px; }
.num-form small { font-size: 12px; line-height: 1.3; }
.ball-thumb { width: 64px; height: 64px; }

/* Maçın oyuncusu (premium) */
.motm-card { position: relative; overflow: hidden; margin: 14px 0; padding: 20px 16px 16px; text-align: center; border: 1px solid rgba(255, 215, 110, .7); background: radial-gradient(ellipse at 50% 22%, rgba(255, 207, 63, .32), transparent 55%), linear-gradient(170deg, #241a05, #0d1330 55%, #070b1d); box-shadow: 0 0 0 1px rgba(255, 207, 63, .15), 0 20px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .15); animation: motmIn .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.motm-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--c1), #ffcf3f, var(--c2)); }
.motm-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg at 50% 38%, rgba(255, 226, 122, .1) 0 8deg, transparent 8deg 18deg); animation: motmSpin 18s linear infinite; pointer-events: none; }
.motm-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.motm-confetti i { position: absolute; top: -12px; left: var(--x); width: 7px; height: 12px; background: var(--c); opacity: .9; animation: motmFall 2.8s linear var(--d) infinite; }
.motm-kicker { position: relative; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #d8c9a8; }
.motm-title { position: relative; margin-top: 4px; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 30px; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(180deg, #fff6c8, #ffcf3f 55%, #b8860b); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.motm-stage { position: relative; width: 190px; height: 170px; margin: 6px auto 0; }
.motm-laurel { position: absolute; inset: -10px 0 0; width: 100%; height: 100%; opacity: .95; }
.motm-av { position: absolute; left: 50%; top: 0; width: 140px; height: 140px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%); }
.motm-trophy { position: absolute; right: 6px; bottom: 0; width: 64px; height: 64px; filter: drop-shadow(0 6px 14px rgba(255, 207, 63, .7)); animation: motmBob 2.4s ease-in-out infinite; }
.motm-trophy svg { width: 100%; height: 100%; }
.motm-name { position: relative; font-family: var(--display); font-weight: 800; font-size: 28px; text-transform: uppercase; line-height: 1; }
.motm-club { position: relative; margin: 6px 0 12px; }
.motm-club span { display: inline-block; padding: 2px 12px; font-size: 13px; font-weight: 700; background: linear-gradient(90deg, var(--c1), var(--c2)); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.motm-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.motm-stats div { padding: 8px 4px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 215, 110, .25); }
.motm-stats b { display: block; font-family: var(--display); font-size: 24px; color: #ffe27a; line-height: 1; }
.motm-stats span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #d8c9a8; }
.motm-card > small { position: relative; display: block; color: #d8c9a8; margin-top: 10px; }
@keyframes motmIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes motmSpin { to { transform: rotate(360deg); } }
@keyframes motmBob { 50% { transform: translateY(-6px); } }
@keyframes motmFall { to { transform: translateY(560px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .motm-card, .motm-rays, .motm-trophy, .motm-confetti i { animation: none; } }

/* Sosyal medya (premium) */
.social { background: linear-gradient(165deg, #1a1440, #0d1736 60%); border-color: rgba(214, 41, 118, .35); }
.so-top { display: flex; align-items: center; gap: 14px; }
.so-ring { flex: none; padding: 3px; border-radius: 50%; background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.so-avatar { display: block; width: 76px; height: 76px; border-radius: 50%; border: 3px solid #120e2e; }
.so-id { min-width: 0; }
.so-handle { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; }
.so-ver { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #3897f0; color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.so-name { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1.1; }
.so-bio { color: var(--muted); font-size: 13px; }
.so-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 10px; text-align: center; }
.so-stats div { padding: 8px 2px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); }
.so-stats div.hl { background: linear-gradient(135deg, rgba(214, 41, 118, .3), rgba(79, 91, 213, .3)); border-color: rgba(214, 41, 118, .5); }
.so-stats b { display: block; font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.1; }
.so-stats span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.so-stories { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.so-stories::-webkit-scrollbar { display: none; }
.so-story { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; }
.so-story i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 15px; background: #1d2550; box-shadow: 0 0 0 2px #120e2e, 0 0 0 4px #d62976; }
.so-story.retire i { box-shadow: 0 0 0 2px #120e2e, 0 0 0 4px #ffcf3f; }
.so-story.debut i { box-shadow: 0 0 0 2px #120e2e, 0 0 0 4px #46e08f; }
.so-story small { font-size: 11px; color: var(--muted); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-feature { border: 1px solid rgba(255, 255, 255, .08); background: rgba(5, 8, 24, .5); margin-bottom: 8px; }
.so-fhead { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; }
.so-fhead small { margin-left: auto; color: var(--muted); }
.so-mini { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(#feda75, #d62976, #4f5bd5, #feda75); }
.so-fimg { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; align-content: center; gap: 10px; padding: 16px; text-align: center; color: #fff; background: linear-gradient(135deg, #2a6fdb, #7b3fe4); }
.so-fimg .ic { width: 46px; height: 46px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }
.so-fimg span { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.15; text-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.so-feature.goal .so-fimg, .so-tile.goal { background: linear-gradient(135deg, #22a35a, #0b6e4f); }
.so-feature.trophy .so-fimg, .so-feature.motm .so-fimg, .so-tile.trophy, .so-tile.motm { background: linear-gradient(135deg, #ffcf3f, #b8860b); color: #1a1400; }
.so-feature.transfer .so-fimg, .so-tile.transfer { background: linear-gradient(135deg, #c8102e, #7a1a33); }
.so-feature.life .so-fimg, .so-tile.life { background: linear-gradient(135deg, #1d2433, #4b5873); }
.so-factions { display: flex; gap: 14px; align-items: center; padding: 8px 10px 4px; font-size: 13px; color: var(--muted); }
.so-factions .heart { display: inline-flex; align-items: center; gap: 5px; color: #ff6f8a; }
.so-factions .heart b { color: var(--chalk); }
.so-factions .ic { width: 18px; height: 18px; fill: currentColor; }
.so-c { padding: 0 10px 6px; font-size: 13px; color: var(--muted); }
.so-c b { color: var(--chalk); }
.so-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.so-tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #2a6fdb, #7b3fe4); }
.so-tile > .ic { width: 30px; height: 30px; opacity: .9; }
.so-tl { position: absolute; left: 6px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.so-tl .ic { width: 12px; height: 12px; fill: currentColor; }

/* Maç sonrası rapor */
.report { border-left: 4px solid var(--muted); }
.report.res-W { border-left-color: #46e08f; } .report.res-L { border-left-color: #ff6f64; } .report.res-D { border-left-color: var(--flood); }
.rp-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rp-score { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.rp-score small { font-size: 13px; color: var(--muted); }
.rp-score small:last-child { text-align: right; }
.rp-score b { font-family: var(--display); font-weight: 800; font-size: 30px; }
.rp-rt { text-align: center; padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.rp-rt small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.rp-rt b { font-family: var(--display); font-size: 26px; line-height: 1; }
.rp-rt i { display: block; font-style: normal; font-size: 10px; font-weight: 700; color: #1a1400; background: var(--flood); margin-top: 3px; padding: 1px 4px; }
.rp-rt.hi { background: rgba(31, 157, 85, .3); } .rp-rt.lo { background: rgba(192, 57, 43, .3); } .rp-rt.mid { background: rgba(199, 154, 18, .25); }
.rp-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rp-chip { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.rp-chip .ic { grid-row: 1 / 3; width: 20px; height: 20px; color: var(--muted); }
.rp-chip span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.rp-chip b { font-family: var(--display); font-size: 19px; font-variant-numeric: tabular-nums; }
.rp-chip.up b, .rp-chip.up .ic { color: #46e08f; } .rp-chip.down b, .rp-chip.down .ic { color: #ff6f64; }
.rp-why { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rp-why span { font-size: 12px; padding: 3px 8px; background: rgba(79, 179, 255, .12); color: #b9dcff; border-radius: 999px; }
@media (max-width: 560px) { .rp-chip { padding: 6px 8px; } .rp-chip b { font-size: 16px; } }

/* Haftalık plan (premium) */
.card.plan { position: relative; overflow: hidden; background: radial-gradient(ellipse at 100% 0, rgba(255, 207, 63, .12), transparent 45%), linear-gradient(160deg, #17295f, #0b1533 70%); border: 1px solid rgba(255, 207, 63, .35); box-shadow: 0 14px 34px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); }
.card.plan::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--flood), #ff7a1a, #ff3d6e); }
.plan .fc { background: rgba(255, 255, 255, .04); border: 1px solid rgba(160, 185, 255, .14); border-radius: 8px; transition: transform .12s, box-shadow .12s, border-color .12s; }
.plan .fc.on { border-color: var(--flood); background: linear-gradient(160deg, rgba(255, 207, 63, .2), rgba(255, 207, 63, .04)); box-shadow: 0 0 0 1px rgba(255, 207, 63, .4), 0 6px 18px rgba(255, 207, 63, .18); transform: translateY(-1px); }
.plan .fc.key i { color: var(--flood); }
.plan .drill-tg { border-radius: 10px; border-color: rgba(255, 207, 63, .3); background: rgba(255, 207, 63, .06); }
.plan .drill-tg input { appearance: none; -webkit-appearance: none; position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .15); transition: background .2s; cursor: pointer; margin-top: 0; }
.plan .drill-tg input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.plan .drill-tg input:checked { background: #2fbf71; }
.plan .drill-tg input:checked::after { transform: translateX(18px); }
.plan .tr-card { border-radius: 12px; border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.plan .tr-ic { border-radius: 50%; background: rgba(255, 207, 63, .14); box-shadow: inset 0 0 0 1px rgba(255, 207, 63, .35); }
.plan .tr-intense .tr-ic { background: rgba(255, 120, 90, .16); box-shadow: inset 0 0 0 1px rgba(255, 120, 90, .45); }
.plan .tr-intense .tr-ic .ic { color: #ff8a6a; }
.plan .tr-gain { text-shadow: 0 0 14px rgba(126, 224, 168, .35); }
.plan .ac-tile { border-radius: 12px; background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .08); }
.plan .lbl { color: #d8c9a8; }

/* Maç sonu ekranı uzun olabilir: kaydırılabilir */
#mm-host:has(.ms) { overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) { .ms { padding: 16px; } .ms-rating { font-size: 60px; } }

/* Maç sonu istatistikleri (premium) */
.ms { background: linear-gradient(165deg, #16285e, #0b1533 70%); border: 1px solid rgba(255, 207, 63, .3); box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); position: relative; }
.ms::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--flood), #ff7a1a, #ff3d6e); }
.ms-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; text-align: left; }
.ms-ring { --c: var(--flood); flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, #0e1a42 79%, transparent 80% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0); box-shadow: 0 0 24px color-mix(in srgb, var(--c) 35%, transparent); }
.ms-ring.hi { --c: #2fbf71; } .ms-ring.lo { --c: #ff6f64; }
.ms-ring b { font-family: var(--display); font-weight: 800; font-size: 38px; line-height: 1; color: var(--c); }
.ms-ring small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ms-res { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ms-res span { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .14em; padding: 2px 8px; background: rgba(255, 255, 255, .1); }
.ms-res.res-W span { background: #1f9d55; } .ms-res.res-L span { background: #c0392b; } .ms-res.res-D span { background: #c79a12; color: #0a1530; }
.ms-res b { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1.05; }
.ms-res small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mst { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 10px; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .08); }
.mst i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(79, 179, 255, .15); }
.mst i .ic { width: 17px; height: 17px; color: #8cc9ff; }
.mst b { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mst span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mst.hl { border-color: rgba(255, 207, 63, .55); background: linear-gradient(180deg, rgba(255, 207, 63, .18), rgba(255, 207, 63, .03)); box-shadow: 0 6px 18px rgba(255, 207, 63, .12); }
.mst.hl i { background: rgba(255, 207, 63, .2); } .mst.hl i .ic { color: var(--flood); } .mst.hl b { color: #ffe27a; }
.ms-energy { margin: 10px 0 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); text-align: left; }
.mse-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mse-h span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mse-h .ic { width: 15px; height: 15px; color: var(--flood); }
.mse-h b { font-family: var(--display); font-size: 20px; }
.mse-h small { color: #ff8f86; font-size: 14px; }
.mse-bar { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mse-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.mse-bar i.was { background: rgba(255, 111, 100, .35); }
.mse-bar i.now { background: linear-gradient(90deg, #2fbf71, #7ee0a8); }
.mse-bar i.now.mid { background: linear-gradient(90deg, #d9a400, #ffcf3f); } .mse-bar i.now.lo { background: linear-gradient(90deg, #c0392b, #ff6f64); }
@media (max-width: 560px) { .ms-ring { width: 86px; height: 86px; } .ms-ring b { font-size: 30px; } .ms-res b { font-size: 32px; } .mst b { font-size: 24px; } }
.lgt tr.z-ucl .rk { background: #2f6fd6; color: #fff; } .lgt tr.z-uel .rk { background: #f36f21; color: #fff; } .lgt tr.z-uecl .rk { background: #0b7a3e; color: #fff; } .lgt tr.z-csa .rk { background: #8b5cf6; color: #fff; }
.lgt tr.z-ucl td:first-child { box-shadow: inset 3px 0 0 #2f6fd6; } .lgt tr.z-uel td:first-child { box-shadow: inset 3px 0 0 #f36f21; } .lgt tr.z-uecl td:first-child { box-shadow: inset 3px 0 0 #0b7a3e; } .lgt tr.z-csa td:first-child { box-shadow: inset 3px 0 0 #8b5cf6; }
.lg-legend i.z-ccc { background: #0e7490; } .lg-legend i.z-acl { background: #a21caf; }
.lgt tr.z-ccc .rk { background: #0e7490; color: #fff; } .lgt tr.z-acl .rk { background: #a21caf; color: #fff; }
.lgt tr.z-ccc td:first-child { box-shadow: inset 3px 0 0 #0e7490; } .lgt tr.z-acl td:first-child { box-shadow: inset 3px 0 0 #a21caf; }
.ofc-tag.z-ccc { background: #0e7490; } .ofc-tag.z-acl { background: #a21caf; }
.lg-legend i.z-ucl { background: #2f6fd6; } .lg-legend i.z-uel { background: #f36f21; } .lg-legend i.z-uecl { background: #0b7a3e; } .lg-legend i.z-csa { background: #8b5cf6; }
.lg-legend { flex-wrap: wrap; row-gap: 2px; }

/* Transfer teklif kartları */
.offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 10px 0; }
.ofc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 14px; text-align: left; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 28%, #0e1a42), #0b1533 70%); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.ofc.own { border-color: rgba(255, 207, 63, .6); }
.ofc-band { position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.ofc-head { display: flex; align-items: center; gap: 10px; }
.ofc-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ofc-id b { font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; line-height: 1.05; }
.ofc-id small { color: var(--muted); font-size: 12px; }
.ofc-tag { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--flood); color: #0a1530; }
.ofc-tag.eu { color: #fff; }
.ofc-tag.z-ucl { background: #2f6fd6; } .ofc-tag.z-uel { background: #f36f21; } .ofc-tag.z-uecl { background: #0b7a3e; } .ofc-tag.z-csa { background: #8b5cf6; }
.ofc-bars { display: grid; gap: 5px; }
.ofc-bars div { display: grid; grid-template-columns: 86px 1fr 26px; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ofc-bars em { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ofc-bars em i { display: block; height: 100%; background: linear-gradient(90deg, var(--c1), var(--c2)); border-radius: 999px; }
.ofc-bars em.me i { background: linear-gradient(90deg, #2fbf71, #7ee0a8); }
.ofc-bars b { color: var(--chalk); text-align: right; font-variant-numeric: tabular-nums; }
.ofc-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ofc-terms div { padding: 7px 9px; border-radius: 10px; background: rgba(255, 255, 255, .05); display: flex; flex-direction: column; }
.ofc-terms div:last-child { grid-column: 1 / -1; }
.ofc-terms span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ofc-terms b { font-family: var(--display); font-size: 17px; }
.ofc-terms small.up { color: #46e08f; font-weight: 700; } .ofc-terms small.down { color: #ff8f86; font-weight: 700; }
.ofc-btn { width: 100%; margin: 0; }

/* Sezon sonu ödül töreni */
.ceremony { position: relative; overflow: hidden; margin: -4px -4px 12px; padding: 18px 14px 14px; text-align: center; border-radius: 14px; border: 1px solid rgba(255, 215, 110, .5); background: radial-gradient(ellipse at 50% 15%, rgba(255, 207, 63, .3), transparent 55%), linear-gradient(170deg, #231a06, #0d1330 60%); }
.cer-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg at 50% 30%, rgba(255, 226, 122, .08) 0 8deg, transparent 8deg 18deg); animation: motmSpin 20s linear infinite; pointer-events: none; }
.cer-kicker { position: relative; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #d8c9a8; }
.cer-title { position: relative; margin: 4px 0 10px; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 30px; text-transform: uppercase; background: linear-gradient(180deg, #fff6c8, #ffcf3f 55%, #b8860b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cer-pos { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 3px solid rgba(255, 255, 255, .25); }
.cer-pos b { font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1; }
.cer-pos span { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cer-pos.gold { background: radial-gradient(circle at 35% 30%, #fff2b0, #ffcf3f 50%, #b8860b); border-color: #ffe27a; color: #3a2a00; box-shadow: 0 0 26px rgba(255, 207, 63, .5); }
.cer-pos.silver { background: radial-gradient(circle at 35% 30%, #ffffff, #c8d1dc 50%, #7d8794); border-color: #eef3f8; color: #1d2433; }
.cer-pos.bronze { background: radial-gradient(circle at 35% 30%, #ffd6b0, #e0995a 50%, #8a4b1f); border-color: #f0b98a; color: #2a1404; }
.cer-pos.gold span, .cer-pos.silver span, .cer-pos.bronze span { color: inherit; opacity: .8; }
.cer-tag { position: relative; display: inline-block; margin: 8px 6px 0; padding: 3px 10px; font-size: 12px; font-weight: 800; border-radius: 999px; }
.cer-tag.up { background: #1f9d55; } .cer-tag.down { background: #c0392b; }
.cer-ticket { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 10px auto 0; padding: 8px 14px; border-radius: 12px; background: #2f6fd6; color: #fff; text-align: left; animation: motmIn .6s .2s both; }
.cer-ticket.z-uel { background: #f36f21; } .cer-ticket.z-uecl { background: #0b7a3e; } .cer-ticket.z-csa { background: #8b5cf6; }
.cer-ticket .ic { width: 24px; height: 24px; }
.cer-ticket small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.cer-ticket b { font-family: var(--display); font-size: 17px; }
.cer-awards { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; }
.cer-aw { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 215, 110, .35); animation: motmIn .6s both; }
.cer-aw svg { width: 56px; height: 56px; filter: drop-shadow(0 6px 12px rgba(255, 207, 63, .5)); }
.cer-aw b { font-size: 12px; line-height: 1.25; }
.cer-none { position: relative; margin: 12px 0 0; }
.cer-prize { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: #d8c9a8; }
.cer-prize .ic { width: 16px; height: 16px; color: var(--flood); }
.cer-prize b { color: var(--flood); }
.se-stats { margin-bottom: 10px; }
/* Kariyer tablosu */
.tbl tr.cur td { background: rgba(79, 179, 255, .1); }
.live-dot { display: block; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ff6f64; }
.hist-tro { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.hist-tro span { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 207, 63, .16); color: #ffe27a; }
.hist-tro span.eu { background: rgba(47, 111, 214, .25); color: #b9d4ff; }
.ofc-id .ofc-tag { align-self: flex-start; margin-top: 4px; }
.ofc-id b { overflow-wrap: anywhere; }
.ofc-terms b[class^="role-"] { background: none; padding: 0; color: #7ee0a8; }
.ofc-terms b.role-bench { color: var(--flood); } .ofc-terms b.role-out { color: #ff8f86; }
.ofc-btn { font-size: 18px; min-height: 48px; padding: 8px 12px; }

/* --- Görünüm seçici (sekme içi) --- */
.vnav { display: flex; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 14px; background: rgba(5, 11, 29, .55); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.vnav::-webkit-scrollbar { display: none; }
.vnav button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.vnav button .ic { width: 16px; height: 16px; }
.vnav button.on { background: linear-gradient(180deg, #ffd85a, #f2b81f); color: var(--flood-ink); box-shadow: 0 4px 14px rgba(255, 207, 63, .25); }
@media (max-width: 560px) { .vnav button { padding: 9px 8px; font-size: 12px; } .vnav button .ic { display: none; } }

/* --- Gol / asist krallığı --- */
.kings .card-h { align-items: center; }
.kseg button { padding: 6px 12px; font-size: 13px; }
.k-lead { position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px; margin: 10px 0 8px; padding: 14px; border-radius: 14px; overflow: hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 55%, #0a1530), #0b1533 75%); border: 1px solid rgba(255, 207, 63, .4); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.k-lead::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 207, 63, .25), transparent 70%); }
.k-crown { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, #ffe27a, #e0a812); color: var(--flood-ink); font-family: var(--display); font-weight: 800; font-size: 17px; box-shadow: 0 0 0 3px rgba(255, 207, 63, .2); }
.k-lead .shirt { width: 36px; height: 36px; }
.k-id { min-width: 0; display: flex; flex-direction: column; }
.k-id b, .k-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-id b { font-family: var(--display); font-size: 20px; letter-spacing: .02em; }
.k-id small, .k-t small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-num { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.k-num b { font-family: var(--display); font-weight: 800; font-size: 38px; color: #ffe27a; font-variant-numeric: tabular-nums; }
.k-num small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.k-lead.me, .k-row.me { box-shadow: inset 3px 0 0 var(--flood); }
.k-list { display: flex; flex-direction: column; gap: 2px; }
.k-row { display: grid; grid-template-columns: 26px 22px 1fr 34px; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; }
.k-row:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.k-row.me { background: rgba(255, 207, 63, .1); }
.k-rk { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-family: var(--display); font-weight: 800; color: var(--muted); background: rgba(255, 255, 255, .05); }
.k-rk.r2 { background: linear-gradient(180deg, #e8eef8, #a9b6c9); color: #0a1530; }
.k-rk.r3 { background: linear-gradient(180deg, #e6a774, #a8642e); color: #1a0d00; }
.k-t { min-width: 0; display: grid; grid-template-columns: 1fr; }
.k-t b { font-size: 14px; }
.k-bar { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.k-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), var(--flood)); border-radius: 2px; }
.k-v { font-family: var(--display); font-weight: 800; font-size: 20px; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Lig seçici --- */
.lpick { margin: 0 0 14px; border-radius: 14px; background: linear-gradient(160deg, #17295f, #0b1533 75%); border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); overflow: hidden; }
.lpick summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.lpick summary::-webkit-details-marker { display: none; }
.lp-flag, .lp-cc { display: grid; place-items: center; font-family: var(--display); font-weight: 800; letter-spacing: .06em; font-style: normal; background: linear-gradient(180deg, #ffd85a, #f2b81f); color: var(--flood-ink); border-radius: 8px; }
.lp-flag { width: 44px; height: 44px; font-size: 15px; }
.lp-t { display: flex; flex-direction: column; min-width: 0; }
.lp-t small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.lp-t b { font-family: var(--display); font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--chalk); white-space: nowrap; }
.lp-btn .ic { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .2s; }
.lpick[open] .lp-btn .ic { transform: rotate(-90deg); }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 4px 14px 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.lp-c { display: flex; flex-direction: column; gap: 4px; }
.lp-c > span { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.lp-cc { width: 28px; height: 18px; font-size: 10px; border-radius: 4px; }
.lp-c button { text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(5, 11, 29, .45); color: var(--chalk); font-family: inherit; font-size: 14px; cursor: pointer; }
.lp-c button small { color: var(--muted); font-size: 11px; }
.lp-c button.on { border-color: var(--flood); background: rgba(255, 207, 63, .12); }

/* --- Kupa ekranı --- */
.cup-sel { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 12px; }
.cup-sel::-webkit-scrollbar { display: none; }
.cup-sel button { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(5, 11, 29, .45); color: var(--muted); font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
.cup-sel button.mine { color: var(--chalk); border-color: rgba(79, 179, 255, .45); }
.cup-sel button.on { background: var(--flood); color: var(--flood-ink); border-color: var(--flood); }
.cup-hd { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(120deg, #1d3c8f, #0b1533 80%); border: 1px solid rgba(255, 255, 255, .1); }
.cup-hd h3 { margin: 0; font-family: var(--display); font-size: 22px; letter-spacing: .02em; }
.cup-hd small { color: var(--muted); }
.cup-hd small b { color: var(--flood); }
.lgt.sw tr.z-r16 .rk { background: #22a35a; color: #fff; }
.lgt.sw tr.z-po .rk { background: #2f6fd6; color: #fff; }
.lgt.sw tr.z-out td { opacity: .6; }
.lgt.sw tr.z-r16 td:first-child { box-shadow: inset 3px 0 0 #22a35a; }
.lgt.sw tr.z-po td:first-child { box-shadow: inset 3px 0 0 #2f6fd6; }
.cup-my, .cup-ko { display: flex; flex-direction: column; gap: 4px; }
.cm2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: rgba(5, 11, 29, .45); border: 1px solid transparent; font-size: 13px; }
.cm2 .t { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cm2 .t.h { justify-content: flex-end; text-align: right; }
.cm2 .t em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm2 .t .shirt { flex: 0 0 auto; width: 18px; height: 18px; }
.cm2 .t.w { color: var(--chalk); font-weight: 700; }
.cm2 > b { min-width: 44px; text-align: center; padding: 3px 6px; border-radius: 6px; background: #f3f1ea; color: #0a1530; font-family: var(--display); font-size: 15px; font-variant-numeric: tabular-nums; }
.cm2 > b small { font-size: 10px; margin-left: 2px; }
.cm2.next > b { background: rgba(255, 255, 255, .08); color: var(--muted); font-size: 12px; }
.cm2.me { border-color: rgba(255, 207, 63, .45); background: rgba(255, 207, 63, .08); }

/* --- Milli takım sıralaması --- */
.nr-list { display: flex; flex-direction: column; gap: 3px; }
.nr-row { display: grid; grid-template-columns: 26px 34px 46px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(5, 11, 29, .4); }
.nr-row.me { background: rgba(255, 207, 63, .1); box-shadow: inset 3px 0 0 var(--flood); }
.nr-rk { font-family: var(--display); font-weight: 800; font-size: 18px; text-align: center; color: var(--muted); }
.nr-row.top1 .nr-rk { color: #ffe27a; } .nr-row.top2 .nr-rk { color: #d6deea; } .nr-row.top3 .nr-rk { color: #e6a774; }
.nr-row.top1 { background: linear-gradient(90deg, rgba(255, 207, 63, .14), rgba(5, 11, 29, .4) 60%); }
.nr-mv { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; }
.nr-mv.up { color: #46e08f; } .nr-mv.down { color: #ff6f64; }
.nr-code { display: grid; place-items: center; height: 26px; border-radius: 6px; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .06em; color: var(--nt); background: var(--n1); box-shadow: inset 0 -4px 0 var(--n2), 0 0 0 1px rgba(255, 255, 255, .12); }
.nr-t { display: flex; flex-direction: column; min-width: 0; }
.nr-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-t small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-p { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.nr-p b { font-family: var(--display); font-size: 20px; font-variant-numeric: tabular-nums; }
.nr-p small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 560px) { .nr-row { grid-template-columns: 22px 28px 42px 1fr auto; gap: 7px; padding: 7px 8px; } }
.tour-cal { display: flex; flex-direction: column; gap: 6px; }
.tc { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(5, 11, 29, .45); border-left: 3px solid var(--sky); }
.tc b { grid-row: span 2; align-self: center; font-family: var(--display); font-size: 22px; color: var(--flood); }
.tc span { font-weight: 700; }
.tc small { color: var(--muted); font-size: 12px; }
.tc.wc { border-left-color: #c8102e; } .tc.euro { border-left-color: #1d4ed8; } .tc.nl { border-left-color: #22a35a; }

/* --- Teklif bonservisi, krampon ömrü --- */
.ofc-terms div.ofc-fee { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; background: linear-gradient(90deg, rgba(255, 207, 63, .14), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 207, 63, .3); }
.ofc-terms div.ofc-fee b { color: #ffe27a; font-size: 19px; }
.ofc-terms div.ofc-fee.free { background: rgba(70, 224, 143, .1); border-color: rgba(70, 224, 143, .35); }
.ofc-terms div.ofc-fee.free b { color: #7ee0a8; }
.sh-act .tag.own.warn { color: #ff8f86; }

/* --- Kariyer sezon kartları --- */
.seasons { display: flex; flex-direction: column; gap: 8px; }
.sn { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; grid-template-areas: "y c st" "y tro tro"; align-items: center; column-gap: 12px; row-gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(5, 11, 29, .45); border: 1px solid var(--line); }
.sn.live { border-color: rgba(79, 179, 255, .45); background: linear-gradient(90deg, rgba(79, 179, 255, .12), rgba(5, 11, 29, .45) 60%); }
.sn-y { grid-area: y; display: flex; flex-direction: column; align-items: flex-start; align-self: start; }
.sn-y b { font-family: var(--display); font-size: 22px; line-height: 1; color: var(--flood); }
.sn-y small { color: var(--muted); font-size: 11px; }
.sn-c { grid-area: c; display: flex; flex-direction: column; min-width: 0; }
.sn-c b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-c small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-c small em { font-style: normal; color: var(--chalk); font-weight: 700; }
.sn-st { grid-area: st; display: flex; gap: 4px; }
.sn-st span { display: flex; flex-direction: column; align-items: center; min-width: 36px; padding: 3px 4px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.sn-st b { font-family: var(--display); font-size: 17px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sn-st small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sn-st span.ovr b { color: #8cc9ff; }
.sn .hist-tro { grid-area: tro; margin: 0; }
.hist-tro span.tf { background: rgba(70, 224, 143, .14); color: #9ff0c3; }
@media (max-width: 560px) {
  .sn { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "y c" "st st" "tro tro"; }
  .sn-st { justify-content: space-between; }
  .sn-st span { flex: 1; min-width: 0; }
}

/* --- Instagram tarzı sosyal medya --- */
.card.ig { background: #000; border: 1px solid #262626; color: #f5f5f5; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 12px 0 14px; clip-path: none; }
.card.ig::before, .card.ig::after { display: none; }
.igi { width: 24px; height: 24px; flex: none; color: #f5f5f5; }
.igi.on { color: #ff3040; }
.igv { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
.ig-top { display: flex; align-items: baseline; justify-content: space-between; padding: 0 14px 10px; }
.ig-top b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.ig-top small { color: #a8a8a8; font-size: 13px; }
.ig-prof { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 4px 14px 10px; }
.ig-ring { padding: 3px; border-radius: 50%; background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.ig-ring .so-avatar { display: block; width: 84px; height: 84px; border-radius: 50%; border: 3px solid #000; }
.ig-nums { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ig-nums b { display: block; font-size: 18px; font-weight: 700; }
.ig-nums span { font-size: 13px; color: #f5f5f5; }
.ig-bio { display: flex; flex-direction: column; padding: 0 14px; font-size: 14px; line-height: 1.35; }
.ig-bio b { font-weight: 600; }
.ig-bio small { color: #a8a8a8; font-size: 13px; }
.ig-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px 14px 4px; }
.ig-btns span { text-align: center; padding: 7px 0; border-radius: 8px; background: #262626; font-size: 14px; font-weight: 600; }
.ig-hl { display: flex; gap: 14px; overflow-x: auto; padding: 12px 14px 6px; scrollbar-width: none; }
.ig-hl::-webkit-scrollbar { display: none; }
.ig-st { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px; }
.ig-st i { display: block; padding: 2.5px; border-radius: 50%; background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.ig-st.retire i { background: #737373; }
.ig-st canvas { display: block; width: 58px; height: 58px; border-radius: 50%; border: 2.5px solid #000; }
.ig-st small { font-size: 12px; color: #f5f5f5; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px; border-top: 1px solid #262626; }
.ig-tabs span { display: grid; place-items: center; padding: 10px 0; color: #737373; border-top: 1px solid transparent; margin-top: -1px; }
.ig-tabs span .igi { color: inherit; width: 22px; height: 22px; }
.ig-tabs span.on { color: #f5f5f5; border-top-color: #f5f5f5; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-tile { position: relative; display: block; aspect-ratio: 1; padding: 0; border: 0; background: #121212; cursor: pointer; overflow: hidden; }
.ig-tile canvas { display: block; width: 100%; height: 100%; }
.ig-badge { position: absolute; top: 6px; right: 6px; }
.ig-badge .igi { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.ig-hov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; background: rgba(0, 0, 0, .35); color: #fff; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .15s; }
.ig-hov .igi { width: 18px; height: 18px; color: #fff; }
@media (hover: hover) { .ig-tile:hover .ig-hov { opacity: 1; } }
.ig-tile:focus-visible .ig-hov { opacity: 1; }
.ig .so-trends { padding: 0 14px; }
.ig .lbl { padding: 0 14px; }
/* gönderi */
.ig-post { background: #000; }
.ig-ph { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.ig-pav { padding: 2px; border-radius: 50%; background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.ig-pav .so-avatar.sm { display: block; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #000; }
.ig-pid { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ig-pid b { font-size: 14px; font-weight: 600; }
.ig-pid small { font-size: 12px; color: #f5f5f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-media { background: #111; }
.ig-media canvas { display: block; width: 100%; aspect-ratio: 4 / 5; }
.ig-acts { display: flex; align-items: center; gap: 16px; padding: 10px 12px 6px; }
.ig-acts .sp { flex: 1; }
.ig-likes { padding: 0 12px; font-size: 14px; font-weight: 600; }
.ig-cap { padding: 4px 12px 0; font-size: 14px; line-height: 1.4; }
.ig-cap b, .ig-cm b { font-weight: 600; }
.ig-all { padding: 4px 12px 0; font-size: 14px; color: #a8a8a8; }
.ig-cm { display: flex; align-items: center; gap: 4px; padding: 2px 12px 0; font-size: 14px; }
.ig-cm b { margin-right: 2px; }
.ig-cm .igi { width: 12px; height: 12px; margin-left: auto; color: #a8a8a8; }
.ig-time { display: block; padding: 6px 12px 0; font-size: 11px; letter-spacing: .02em; color: #a8a8a8; text-transform: uppercase; }
.ig-home { padding-bottom: 10px; }
.ig-home .ig-top { padding-bottom: 6px; }
.ig-modal { margin: -6px -4px 6px; border-radius: 10px; overflow: hidden; border: 1px solid #262626; max-height: 72vh; overflow-y: auto; background: #000; color: #f5f5f5; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
@media (min-width: 900px) { .ig-home .ig-post { max-width: 470px; margin: 0 auto; } }
.tw-tag { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(70, 224, 143, .15); color: #9ff0c3; border: 1px solid rgba(70, 224, 143, .35); white-space: nowrap; }

/* --- Gol sevinci ve şampiyonluk töreni --- */
.celeb-cv { display: block; width: 100%; height: 100%; cursor: pointer; }
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.cb { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5, 11, 29, .45); color: var(--chalk); text-align: left; font-family: inherit; cursor: pointer; }
.cb b { font-family: var(--display); font-size: 17px; letter-spacing: .02em; }
.cb small { color: var(--muted); font-size: 12px; line-height: 1.25; }
.cb.on { border-color: var(--flood); background: linear-gradient(180deg, rgba(255, 207, 63, .18), rgba(255, 207, 63, .04)); }
.cb.on b { color: #ffe27a; }
.cb.lock { opacity: .5; cursor: default; }
.cer-trophy { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: #02040b; }
.ct-host { flex: 1; min-height: 0; }
.ct-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(2, 4, 11, 0), #02040b 30%); }
.ct-foot b { font-family: var(--display); font-size: 24px; letter-spacing: .04em; text-transform: uppercase; color: #ffe27a; text-align: center; }
.ct-foot small { color: var(--muted); margin-bottom: 6px; }
.ct-foot .btn { min-width: 220px; }
.scr.me { border-color: rgba(255, 207, 63, .55); background: rgba(255, 207, 63, .1); }

/* Profil sekmesi: profil fotoğrafı simgesi */
.tab-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; padding: 2px; background: transparent; }
.tab-av .so-avatar { display: block; width: 22px; height: 22px; border-radius: 50%; }
.tabs button.on .tab-av { background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.tabs button.on .tab-av .so-avatar { border: 2px solid #050b1d; width: 22px; height: 22px; }
.tab-prof { display: inline-flex; align-items: center; gap: 6px; }
.vnav button:disabled { opacity: .35; cursor: default; }

/* --- Yaşam --- */
.lf-head .lf-rows { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.lf-row { display: grid; grid-template-columns: 70px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.lf-row b { text-align: right; color: var(--chalk); font-family: var(--display); font-size: 17px; }
.lf-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.lf-bar i { display: block; height: 100%; border-radius: 4px; }
.lf-gf { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.lf-gf b { color: #ff9fb3; }
.lf-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lf-money div { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); display: flex; flex-direction: column; }
.lf-money span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lf-money b { font-family: var(--display); font-size: 17px; }
.lf-ban { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; background: rgba(255, 90, 79, .14); border: 1px solid rgba(255, 90, 79, .45); }
.lf-ban.warn { background: rgba(255, 207, 63, .12); border-color: rgba(255, 207, 63, .45); }
.lf-ban .ic { width: 22px; height: 22px; color: #ff8f86; flex: none; }
.lf-ban b { display: block; } .lf-ban small { color: var(--muted); }
.lf-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lf-act { min-height: 70px; }
.lf-break { grid-column: 1 / -1; }
@media (max-width: 560px) { .lf-acts { grid-template-columns: 1fr; } }
.lf-mgr, .lf-cand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(5, 11, 29, .45); border: 1px solid var(--line); }
.lf-mgr small, .lf-cand small { display: block; color: var(--muted); font-size: 12px; }
.lf-cands { display: flex; flex-direction: column; gap: 6px; }
.lf-sps { display: flex; flex-direction: column; gap: 6px; }
.lf-sp { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(5, 11, 29, .45); border: 1px solid var(--line); }
.lf-sp.offer { border-color: rgba(255, 207, 63, .45); }
.lf-sp > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-style: normal; font-family: var(--display); font-weight: 800; background: var(--b1); color: var(--b2); box-shadow: inset 0 -3px 0 var(--b2); }
.lf-sp small { display: block; color: var(--muted); font-size: 12px; }
.lf-sp-w { font-family: var(--display); font-size: 17px; color: #9ff0c3; }
.lf-sp-w small { display: inline; }
.lf-sp-b { display: flex; gap: 6px; }
.lf-sp-b .btn { padding: 8px 10px; font-size: 13px; }
@media (max-width: 560px) { .lf-sp.offer { grid-template-columns: 40px 1fr; } .lf-sp-b { grid-column: 1 / -1; } .lf-sp-b .btn { flex: 1; } }
.bet-warn { padding: 10px 12px; border-radius: 10px; background: rgba(255, 90, 79, .12); border: 1px solid rgba(255, 90, 79, .4); font-size: 13px; color: #ffc2bd; margin-bottom: 10px; }
.bet-stake, .cs-stake { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.bet-stake button, .cs-stake button { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(5, 11, 29, .45); color: var(--chalk); font-family: var(--display); font-weight: 700; cursor: pointer; }
.bet-stake button.on, .cs-stake button.on { background: var(--flood); color: var(--flood-ink); border-color: var(--flood); }
.bet-list { display: flex; flex-direction: column; gap: 4px; }
.bet-row { display: grid; grid-template-columns: 1fr repeat(3, 52px); align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(5, 11, 29, .45); font-size: 13px; }
.bet-row.mine { border: 1px solid rgba(255, 90, 79, .5); }
.bet-row em { font-style: normal; color: #ff8f86; font-size: 11px; }
.bet-row button { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--chalk); font-weight: 800; cursor: pointer; }
.bet-row button small { font-weight: 600; color: var(--flood); font-size: 11px; }
.bet-done { grid-column: span 3; text-align: center; color: var(--flood); font-weight: 700; }
.bet-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Kumarhane --- */
.casino { color: var(--chalk); }
.cs-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.cs-top h3 { margin: 0; font-family: var(--display); font-size: 26px; color: #ffe27a; letter-spacing: .04em; text-transform: uppercase; }
.cs-bal { font-size: 13px; color: var(--muted); }
.cs-bal b { color: var(--chalk); } .cs-bal b.up { color: #46e08f; } .cs-bal b.down { color: #ff8f86; }
.cs-tabs { display: flex; gap: 4px; margin: 10px 0; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .3); }
.cs-tabs button { flex: 1; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-family: var(--display); font-weight: 800; font-size: 14px; text-transform: uppercase; cursor: pointer; }
.cs-tabs button.on { background: linear-gradient(180deg, #ffd85a, #f2b81f); color: var(--flood-ink); }
.cs-body { min-height: 240px; padding: 14px; border-radius: 14px; background: radial-gradient(ellipse at 50% 0, #1b7a43, #0b4527 75%); border: 6px solid #5a3a1a; box-shadow: inset 0 0 30px rgba(0, 0, 0, .45); }
.cs-msg { text-align: center; font-family: var(--display); font-weight: 800; font-size: 20px; margin: 10px 0; }
.cs-msg.up { color: #ffe27a; } .cs-msg.down { color: #ffb4ae; }
.bj-table { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bj-hand { text-align: center; }
.bj-hand > span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); margin-bottom: 6px; }
.bj-hand > div { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pc-card { width: 52px; height: 74px; border-radius: 7px; background: #fff; color: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); font-family: var(--display); }
.pc-card b { font-size: 22px; line-height: 1; }
.pc-card svg { width: 20px; height: 20px; }
.pc-card.red { color: #d10f2f; }
.pc-card.back { background: repeating-linear-gradient(45deg, #b91c1c 0 6px, #7f1d1d 6px 12px); border: 3px solid #fff; }
.rl { display: flex; flex-direction: column; align-items: center; }
.rl-wheel-w { position: relative; width: 200px; height: 200px; }
.rl-wheel { width: 100%; height: 100%; border-radius: 50%; border: 8px solid #5a3a1a; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); background: conic-gradient(#16a34a 0 9.7deg, #c8102e 9.7deg 19.4deg, #111 19.4deg 29.1deg, #c8102e 29.1deg 38.8deg, #111 38.8deg 48.5deg, #c8102e 48.5deg 58.2deg, #111 58.2deg 67.9deg, #c8102e 67.9deg 77.6deg, #111 77.6deg 87.3deg, #c8102e 87.3deg 97deg, #111 97deg 106.7deg, #c8102e 106.7deg 116.4deg, #111 116.4deg 126.1deg, #c8102e 126.1deg 135.8deg, #111 135.8deg 145.5deg, #c8102e 145.5deg 155.2deg, #111 155.2deg 164.9deg, #c8102e 164.9deg 174.6deg, #111 174.6deg 184.3deg, #c8102e 184.3deg 194deg, #111 194deg 203.7deg, #c8102e 203.7deg 213.4deg, #111 213.4deg 223.1deg, #c8102e 223.1deg 232.8deg, #111 232.8deg 242.5deg, #c8102e 242.5deg 252.2deg, #111 252.2deg 261.9deg, #c8102e 261.9deg 271.6deg, #111 271.6deg 281.3deg, #c8102e 281.3deg 291deg, #111 291deg 300.7deg, #c8102e 300.7deg 310.4deg, #111 310.4deg 320.1deg, #c8102e 320.1deg 329.8deg, #111 329.8deg 339.5deg, #c8102e 339.5deg 349.2deg, #111 349.2deg 360deg); }
.rl-pin { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 18px solid #ffe27a; z-index: 2; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.rl-res { position: absolute; inset: 0; margin: auto; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 30px; background: #f5ecd7; color: #1a1400; border: 4px solid #5a3a1a; }
.rl-res.r { background: #c8102e; color: #fff; } .rl-res.b { background: #111; color: #fff; } .rl-res.g { background: #16a34a; color: #fff; }
.rl-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.rl-opts button { padding: 8px 4px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .25); color: #fff; cursor: pointer; }
.rl-opts button small { display: block; color: #ffe27a; font-size: 11px; }
.rl-opts .rl-red { background: #a50d26; } .rl-opts .rl-black { background: #111; } .rl-opts .rl-n0 { background: #15803d; }
.hr-track { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 6px 26px; border-radius: 10px; background: repeating-linear-gradient(90deg, #a16207 0 30px, #92400e 30px 60px); }
.hr-lane { position: relative; height: 26px; border-bottom: 1px dashed rgba(255, 255, 255, .35); }
.hr-n { position: absolute; left: -20px; top: 4px; font-family: var(--display); font-weight: 800; color: #fff; }
.hr-horse { position: absolute; top: 2px; width: 34px; height: 22px; border-radius: 12px 14px 6px 6px; background: #5b3a1e; box-shadow: inset 10px -6px 0 var(--hc); }
.hr-horse::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50% 50% 30% 30%; background: #5b3a1e; }
.hr-finish { position: absolute; top: 0; bottom: 0; right: 8%; width: 6px; background: repeating-linear-gradient(0deg, #fff 0 6px, #111 6px 12px); }
.hr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hr-opts button { padding: 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .25); color: #fff; text-align: left; cursor: pointer; }
.hr-opts button small { display: block; color: #ffe27a; font-size: 11px; }

/* --- Gazete: manşet fotoğrafı, yan sütun, kısa kısa --- */
.pp-front { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px solid #1b1712; }
.pp-front .pp-lead { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.pp-fig { margin: 0 0 10px; }
.pp-photo { display: block; width: 100%; aspect-ratio: 1 / 0.62; background: #2b2620; }
.pp-fig figcaption { font-family: 'Lora', serif; font-style: italic; font-size: 11px; color: #6b5f4d; padding-top: 4px; border-bottom: 1px solid rgba(27, 23, 18, .3); padding-bottom: 4px; }
.pp-side { display: flex; flex-direction: column; gap: 12px; border-left: 1px solid rgba(27, 23, 18, .35); padding-left: 16px; }
.pp-box h4 { margin: 0 0 6px; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #a3122a; border-bottom: 2px solid #1b1712; padding-bottom: 3px; }
.pp-box ul, .pp-box ol { list-style: none; margin: 0; padding: 0; }
.pp-box li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 4px 0; border-bottom: 1px dotted rgba(27, 23, 18, .35); font-family: 'Lora', serif; font-size: 13px; }
.pp-box li span:last-child { text-align: right; }
.pp-box li b { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; }
.pp-box ol li { grid-template-columns: 1fr auto; counter-increment: pp; }
.pp-box ol { counter-reset: pp; }
.pp-box ol li span::before { content: counter(pp) ". "; color: #6b5f4d; }
.pp-box li.me { font-weight: 700; background: rgba(163, 18, 42, .08); }
.pp-sc { margin: 6px 0 0; font-family: 'Lora', serif; font-size: 12px; }
.pp-item h5 { margin: 0 0 3px; font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: 16px; line-height: 1.2; color: #1b1712; text-transform: none; letter-spacing: 0; font-style: normal; }
.pp-item p { color: #3a3128; }
@media (max-width: 700px) {
  .pp-front { grid-template-columns: 1fr; }
  .pp-side { border-left: 0; padding-left: 0; border-top: 1px solid rgba(27, 23, 18, .35); padding-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 420px) { .pp-side { grid-template-columns: 1fr; } }
.inbox ul { list-style: none; margin: 0; padding: 0; }
.inbox li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.inbox li small { color: var(--muted); white-space: nowrap; }
.lf-acts .act { flex-direction: row; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; min-height: 64px; }
.lf-acts .act small { display: block; }
.lf-acts .act .ic { flex: none; }
.lf-orig { font-size: 13px; margin: 0 0 10px; }
.lf-orig b { color: var(--chalk); }
.tabs button.badge { position: relative; }
.tabs button.badge::after { content: ""; position: absolute; top: 6px; left: calc(50% + 10px); width: 9px; height: 9px; border-radius: 50%; background: #ff3d6e; box-shadow: 0 0 0 2px #050b1d; }
.sp-home { border-color: rgba(255, 207, 63, .45); }

/* --- Fikstürde kupa maçları --- */
.mc.cupfx { grid-template-rows: auto auto; background: linear-gradient(90deg, color-mix(in srgb, var(--ct2) 45%, transparent), rgba(5, 11, 29, .5)); border-color: color-mix(in srgb, var(--cta) 45%, transparent); }
.mc.cupfx .wk.ck { display: grid; place-items: center; height: 22px; border-radius: 5px; font-size: 10px; background: var(--ct1); color: var(--cta); box-shadow: inset 0 0 0 1px var(--cta); }
.mc.cupfx .mc-cup { grid-column: 2 / -1; text-align: center; font-size: 11px; color: var(--cta); letter-spacing: .04em; margin-top: -2px; }
.mc.cupfx.cur { border-color: var(--cta); box-shadow: 0 0 0 1px var(--cta); }
.mc.cupfx.cur .mc-s { background: var(--cta); color: #0a1530; }

/* --- Turnuva teması: Maç Günü kartı ve maç ekranı --- */
.themed { --ct-stars: radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 32% 64%, #fff 50%, transparent 52%), radial-gradient(1.8px 1.8px at 58% 28%, #fff 50%, transparent 52%), radial-gradient(1.1px 1.1px at 78% 72%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 90% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 46% 88%, #fff 50%, transparent 52%); }
.card.next.themed { position: relative; overflow: hidden; color: #fff; border-color: color-mix(in srgb, var(--cta) 55%, transparent);
  background: radial-gradient(ellipse at 85% -10%, color-mix(in srgb, var(--cta) 30%, transparent), transparent 55%), linear-gradient(160deg, var(--ct2), var(--ct1) 75%); }
.card.next.themed.fx-stars { background: var(--ct-stars), radial-gradient(ellipse at 85% -10%, color-mix(in srgb, var(--cta) 30%, transparent), transparent 55%), linear-gradient(160deg, var(--ct2), var(--ct1) 75%); background-size: 160px 160px, auto, auto; animation: ctTwinkle 6s linear infinite; }
.card.next.themed.fx-gold { background: radial-gradient(ellipse at 50% -20%, rgba(255, 207, 63, .35), transparent 60%), repeating-linear-gradient(115deg, rgba(255, 207, 63, .07) 0 14px, transparent 14px 28px), linear-gradient(160deg, var(--ct2), var(--ct1) 75%); }
.card.next.themed.fx-rays { background: repeating-conic-gradient(from 0deg at 100% 0%, rgba(255, 255, 255, .05) 0 6deg, transparent 6deg 12deg), linear-gradient(160deg, var(--ct2), var(--ct1) 75%); }
@keyframes ctTwinkle { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 160px 80px, 0 0, 0 0; } }
.card.next.themed .card-h > span:first-child .ic { color: var(--cta); }
.card.next.themed .nm-meta { color: color-mix(in srgb, var(--cta) 70%, #fff); }
.card.next.themed .btn-play { background: linear-gradient(180deg, color-mix(in srgb, var(--cta) 85%, #fff), var(--cta)); color: #0a1530; box-shadow: 0 6px 22px color-mix(in srgb, var(--cta) 45%, transparent); }
.ct-badge { display: inline-flex; align-items: center; gap: 8px; margin: -2px 0 10px; padding: 5px 12px; border-radius: 999px; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--cta); background: rgba(0, 0, 0, .3); border: 1px solid color-mix(in srgb, var(--cta) 55%, transparent); }
.ct-star { display: inline-block; width: 16px; height: 16px; background: var(--cta); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.overlay.themed { background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--ct2) 85%, transparent), transparent 60%), var(--ct1); }
.overlay.themed.fx-stars { background: var(--ct-stars), radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--ct2) 85%, transparent), transparent 60%), var(--ct1); background-size: 180px 180px, auto, auto; background-attachment: fixed; }
.overlay.themed.fx-gold { background: radial-gradient(ellipse at 50% -10%, rgba(255, 207, 63, .3), transparent 55%), repeating-linear-gradient(115deg, rgba(255, 207, 63, .05) 0 16px, transparent 16px 32px), var(--ct1); }
.overlay.themed .mt-top { background: linear-gradient(180deg, color-mix(in srgb, var(--ct2) 70%, #000), var(--ct1)); border-color: color-mix(in srgb, var(--cta) 55%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--cta) 20%, transparent); }
.overlay.themed .mt-comp { color: var(--cta); border-bottom-color: color-mix(in srgb, var(--cta) 35%, transparent); font-weight: 700; }
.overlay.themed .mt-score { color: #fff; }
.overlay.themed #mt-bar { background: var(--cta); }
.overlay.themed .mt-me, .overlay.themed .mt-feed { border-color: color-mix(in srgb, var(--cta) 30%, transparent); }

/* Dil seçici ve başlık alt bağlantısı */
.lang-sw { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 3; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(5, 12, 30, .6); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); }
.lang-sw button { font: 700 13px/1 'Barlow Semi Condensed', sans-serif; letter-spacing: .06em; color: var(--muted); background: none; border: 0; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.lang-sw button.on { background: var(--flood); color: #0a1530; }
.title-foot { margin-top: 10px; font-size: 12px; }
.title-foot a { color: var(--muted); text-decoration: underline; }

/* Haftalık ödüllü reklam: enerji */
.ad-energy { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 14px; padding: 10px 14px; border-radius: 12px; cursor: pointer; text-align: left; color: var(--chalk); background: linear-gradient(90deg, rgba(56, 189, 248, .18), rgba(56, 189, 248, .04)); border: 1px solid rgba(56, 189, 248, .45); font: inherit; }
.ad-energy svg { width: 22px; height: 22px; flex: none; color: #38bdf8; }
.ad-energy b { display: block; font-size: 15px; }
.ad-energy small { color: var(--muted); font-size: 12px; }
.ad-energy:disabled { opacity: .55; }


/* Dokunmatik ekranda hover ilk dokunuşu yutmasın (iOS çift dokunma sorunu) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { filter: brightness(1.15); }
  .act:hover:not(:disabled) { border-color: var(--flood); background: rgba(255, 207, 63, .07); }
  .tr-card:hover:not(:disabled) { border-color: var(--flood); transform: translateY(-2px); }
  .ac-tile:hover:not(:disabled) { border-color: var(--sky); }
  .plan .fc:hover { border-color: rgba(255, 207, 63, .5); }
  .plan .tr-card:hover:not(:disabled) { box-shadow: 0 10px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1); }
  .plan .ac-tile:hover:not(:disabled) { background: rgba(79, 179, 255, .08); }
}
button, .btn, a, [data-act], [data-tab] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Sakatlık: fizyoterapi önerisi */
.physio-tip { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 90, 79, .16), rgba(79, 179, 255, .10)); border: 1px solid rgba(255, 120, 110, .45); }
.physio-tip > svg { width: 26px; height: 26px; flex: none; color: #ff9b93; }
.physio-tip span { flex: 1; display: flex; flex-direction: column; }
.physio-tip b { font-size: 15px; } .physio-tip small { color: var(--muted); font-size: 13px; }
.physio-tip em { font-style: normal; font-size: 12px; color: var(--muted); }

/* Bildirim merkezi */
.hdr-l { display: flex; align-items: center; gap: 12px; }
@media (max-width: 760px) { .hdr-l { width: 100%; justify-content: space-between; } }
.notif-btn { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--chalk); display: grid; place-items: center; cursor: pointer; padding: 0; }
.notif-btn .ic { width: 21px; height: 21px; }
.nb-n { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font: 700 12px/20px var(--body, sans-serif); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #0b1736; }
.nb-n.hidden { display: none; }
.nf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nf-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; }
.nf-item { display: grid; grid-template-columns: 10px 1fr; gap: 2px 10px; align-items: start; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.nf-item i { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--sky, #4fb3ff); grid-row: span 2; }
.nf-item.good i { background: var(--grass); } .nf-item.bad i { background: var(--red); } .nf-item.info i { background: #4fb3ff; }
.nf-item span { font-size: 14px; line-height: 1.35; }
.nf-item small { grid-column: 2; color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.toast.info { border-left-color: #4fb3ff; }

/* ---------- Yeni kariyer ekranı ---------- */
#create { display: block; padding: 0 0 40px; background: radial-gradient(120% 60% at 50% 0, #17306e 0%, #0a1530 55%, #060d22 100%); min-height: 100vh; }
.cr-wrap { max-width: 1040px; margin: 0 auto; }
.cr-hero { position: relative; overflow: hidden; padding: calc(34px + env(safe-area-inset-top, 0px)) 20px 70px; text-align: center; }
.cr-hero-bg { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(60, 170, 90, .10) 0 60px, rgba(60, 170, 90, .04) 60px 120px);
  -webkit-mask: linear-gradient(0deg, #000, transparent 75%); mask: linear-gradient(0deg, #000, transparent 75%); }
.cr-hero-bg i { position: absolute; top: -120px; width: 320px; height: 520px; background: linear-gradient(180deg, rgba(255, 240, 200, .22), transparent 70%); filter: blur(10px); }
.cr-hero-bg i:first-child { left: -60px; transform: rotate(-22deg); } .cr-hero-bg i:last-child { right: -60px; transform: rotate(22deg); }
.cr-hero-t { position: relative; }
.cr-kicker { display: inline-block; padding: 6px 16px; border-radius: 999px; font: 700 12px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--flood); border: 1px solid rgba(255, 207, 63, .45); background: rgba(255, 207, 63, .08); }
.cr-hero h1 { margin: 14px 0 8px; font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(44px, 11vw, 76px); line-height: .95; text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 6px 30px rgba(0, 0, 0, .45); }
.cr-hero h1 span { background: linear-gradient(180deg, #fff3c2, var(--flood) 55%, #e39a12); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cr-hero p { max-width: 560px; margin: 0 auto; color: #c3cdeb; font-size: 17px; line-height: 1.45; }
.cr-layout { display: grid; grid-template-columns: 300px 1fr; gap: 22px; padding: 0 16px; margin-top: -40px; position: relative; }
.cr-pv { position: sticky; top: 16px; align-self: start; }
.cr-card-fx { position: relative; border-radius: 22px; padding: 16px 16px 18px; text-align: center; overflow: hidden;
  background: linear-gradient(160deg, #f6d36b 0%, #c9962a 38%, #7a5612 100%); color: #2a1d02;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .35); }
.cr-card-fx::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 10%, rgba(255, 255, 255, .55), transparent 45%); pointer-events: none; }
.pv-top { position: relative; display: flex; align-items: center; gap: 10px; }
.pv-ovr { font: 800 52px/0.9 var(--display); font-style: italic; }
.pv-pos { font: 800 20px/1 var(--display); padding: 4px 8px; border-radius: 6px; background: rgba(42, 29, 2, .85); color: #ffe7a0; }
.pv-flag { margin-left: auto; font-size: 12px; font-weight: 700; text-align: right; max-width: 120px; line-height: 1.2; }
#pv-art { display: block; width: 100%; max-width: 230px; aspect-ratio: 1; margin: 2px auto 0; position: relative; }
.pv-name { position: relative; font: 800 26px/1 var(--display); font-style: italic; letter-spacing: .01em; margin-top: 4px; word-break: break-word; }
.pv-meta { position: relative; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pv-meta span { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(42, 29, 2, .14); border: 1px solid rgba(42, 29, 2, .25); }
.cr-steps { display: flex; flex-direction: column; gap: 14px; }
.cr-step { border-radius: 18px; padding: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(6px); }
.cr-step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cr-step-h > i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 18px/1 var(--display); font-style: normal; color: var(--flood-ink); background: linear-gradient(180deg, #ffe07a, var(--flood)); box-shadow: 0 0 18px rgba(255, 207, 63, .35); }
.cr-step-h b { display: block; font: 800 22px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.cr-step-h small { color: var(--muted); font-size: 13px; }
.cr-step-h > div { flex: 1; }
.cr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cr-f { display: flex; flex-direction: column; gap: 6px; }
.cr-f > span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cr-f input, .cr-f select { width: 100%; height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(5, 12, 30, .55); color: var(--chalk); font-size: 17px; font-family: inherit; }
.cr-f input:focus, .cr-f select:focus { outline: none; border-color: var(--flood); box-shadow: 0 0 0 3px rgba(255, 207, 63, .2); }
.cr-note { margin: 10px 0 12px; font-size: 14px; color: #b9c6e8; }
.cr-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(5, 12, 30, .55); border: 1px solid rgba(255, 255, 255, .12); }
.cr-toggle button { height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 800 18px/1 var(--display); text-transform: uppercase; cursor: pointer; }
.cr-toggle button.on { background: linear-gradient(180deg, #ffe07a, var(--flood)); color: var(--flood-ink); }
.cr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cr-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 14px; border-radius: 14px; cursor: pointer;
  background: rgba(5, 12, 30, .5); border: 1px solid rgba(255, 255, 255, .12); color: var(--chalk); font-family: inherit; }
.cr-opt svg { width: 26px; height: 26px; color: var(--sky, #4fb3ff); }
.cr-opt b { font: 800 20px/1 var(--display); text-transform: uppercase; }
.cr-opt small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.cr-opt.on { border-color: var(--flood); background: linear-gradient(180deg, rgba(255, 207, 63, .16), rgba(255, 207, 63, .04)); box-shadow: 0 0 0 1px var(--flood) inset, 0 10px 26px rgba(0, 0, 0, .3); }
.cr-opt.on svg { color: var(--flood); }
.cr-opt.on::after { content: '✓'; position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--flood); color: var(--flood-ink); }
.cr-opt.d-easy b { color: #6ee7a8; } .cr-opt.d-normal b { color: #ffe07a; } .cr-opt.d-hard b { color: #ff8f86; }
.cr-pts { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--flood) 0 100%); color: var(--flood-ink); box-shadow: 0 0 22px rgba(255, 207, 63, .35); }
.cr-pts b { font: 800 26px/1 var(--display); } .cr-pts small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.cr-pts.done { background: #1f9d55; color: #fff; box-shadow: 0 0 22px rgba(70, 224, 143, .35); }
#create .cr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#create .cs { display: grid; grid-template-columns: 1fr 34px 34px 34px; grid-template-rows: auto 6px; align-items: center; gap: 6px 8px; padding: 10px 12px; border-radius: 12px; background: rgba(5, 12, 30, .5); border: 1px solid rgba(255, 255, 255, .1); }
#create .cs.key { border-color: rgba(255, 207, 63, .45); }
#create .cs-l { font-weight: 600; font-size: 15px; } #create .cs-l i { color: var(--flood); font-style: normal; }
#create .cs b { width: auto; text-align: center; font: 800 22px/1 var(--display); grid-column: 3; grid-row: 1; }
#create .cs button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: var(--chalk); font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
#create .cs button[data-d="-1"] { grid-column: 2; grid-row: 1; } #create .cs button[data-d="1"] { grid-column: 4; grid-row: 1; }
#create .cs button:disabled { opacity: .3; }
#create .cs-bar { grid-column: 1 / -1; grid-row: 2; position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
#create .cs-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #2b6fd6, #4fb3ff); border-radius: 3px; }
#create .cs-bar em { position: absolute; top: 0; bottom: 0; background: var(--flood); }
.cr-cta { position: sticky; bottom: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, #060d22 60%, transparent); z-index: 3; }
.cr-cta .btn-big { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; }
.cr-cta .btn-big svg { width: 22px; height: 22px; }
@media (max-width: 820px) {
  .cr-layout { grid-template-columns: 1fr; margin-top: -50px; }
  .cr-pv { position: relative; top: 0; }
  .cr-card-fx { display: grid; grid-template-columns: 120px 1fr; grid-template-areas: 'art top' 'art name' 'art meta'; align-items: center; text-align: left; gap: 4px 12px; padding: 12px 14px; }
  .cr-card-fx .pv-top { grid-area: top; } .cr-card-fx #pv-art { grid-area: art; max-width: 120px; margin: 0; }
  .cr-card-fx .pv-name { grid-area: name; font-size: 22px; } .cr-card-fx .pv-meta { grid-area: meta; justify-content: flex-start; margin-top: 4px; }
  .pv-ovr { font-size: 40px; }
  .cr-cards { grid-template-columns: 1fr; }
  .cr-opt { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cr-opt small { flex-basis: 100%; }
  #create .cr-stats { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .cr-row2 { grid-template-columns: 1fr; } .cr-hero { padding-bottom: 64px; } }
.cr-cta .btn { min-height: 60px; } .cr-cta .btn-big { white-space: nowrap; font-size: clamp(18px, 5vw, 22px); padding-inline: 14px; }
.cr-cta .btn-big svg { fill: currentColor; }

/* ---------- Üst bar (yeniden düzen) ---------- */
.hi-week { gap: 6px !important; letter-spacing: .06em; }
.hi-week em { font-style: normal; font-size: 12px; text-transform: uppercase; color: var(--muted); }
.hi-week em + em::before { content: '·'; margin-right: 6px; opacity: .6; }
.hi-week b { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--chalk); }
.hi-week b small { font-size: 12px; color: var(--muted); font-weight: 600; }
@media (max-width: 760px) {
  .hdr { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: 'logo money bell' 'week money bell'; align-items: center; column-gap: 10px; row-gap: 2px; padding-bottom: 10px; }
  .hdr-l, .hdr-info { display: contents; }
  .hdr-l { width: auto; }
  .logo { grid-area: logo; font-size: 24px; align-self: end; }
  .hi-week { grid-area: week; align-self: start; font-size: 11px; }
  .hi-week b { font-size: 14px; }
  .hi-money { grid-area: money; }
  .notif-btn { grid-area: bell; width: 40px; height: 40px; }
  .hi-club { display: none !important; }
}

/* ---------- Haftalık plan: antrenman ve aktivite kartları ---------- */
.plan .tr-card { display: grid; grid-template-columns: 40px 1fr auto; grid-template-areas: 'ic name gain' 'ic info cost'; align-items: center; column-gap: 12px; row-gap: 6px; padding: 12px 14px; }
.plan .tr-card .tr-ic { grid-area: ic; width: 40px; height: 40px; }
.plan .tr-card > b { grid-area: name; font-size: 17px; line-height: 1.1; }
.plan .tr-card .tr-int { grid-area: info; align-self: center; }
.plan .tr-card .tr-gain { grid-area: gain; justify-self: end; font-size: 22px; }
.plan .tr-card .tr-cost { grid-area: cost; justify-self: end; border-radius: 6px; padding: 3px 8px; }
.plan .tr-card small { display: none; }
.plan .tr-row { grid-template-columns: 1fr; gap: 8px; }
.plan .ac-row { grid-template-columns: 1fr 1fr; gap: 8px; }
.plan .ac-tile { display: grid; grid-template-columns: 38px 1fr; grid-template-areas: 'ic t' 'ic cost'; align-items: center; column-gap: 10px; row-gap: 4px; padding: 12px; min-height: 72px; flex-wrap: nowrap; }
.plan .ac-tile .ac-ic { grid-area: ic; width: 38px; height: 38px; align-self: center; }
.plan .ac-tile .ac-t { grid-area: t; align-self: end; }
.plan .ac-tile .ac-t b { font-size: 15px; line-height: 1.15; }
.plan .ac-tile .ac-t small { display: none; }
.plan .ac-tile em { grid-area: cost; justify-self: start; align-self: start; margin: 0; border-radius: 6px; padding: 2px 7px; }
.plan .ac-tile:not(:has(em)) { grid-template-areas: 'ic t' 'ic t'; }
.plan .ac-tile:not(:has(em)) .ac-t { align-self: center; }
/* Fikstür: rakibi henüz belli olmayan kupa turları */
.mc.cupfx.tbd { opacity: .62; border-style: dashed; }
.mc.cupfx.tbd .mc-cup { color: var(--muted); }
.tbd-shirt { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--muted); color: var(--muted); font-size: 12px; font-weight: 800; }
/* Ödüllü reklam: kaçan anı tekrar oyna */
.retry-ad { margin: auto; width: min(92%, 380px); display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 22px 20px; border-radius: 16px; text-align: center; background: linear-gradient(160deg, #182a5c, #0b1430); border: 1px solid rgba(255, 207, 63, .35); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.retry-ad b { font-family: var(--display); font-style: italic; font-size: 30px; color: #ffcf3f; text-transform: uppercase; }
.retry-ad p { color: var(--chalk); margin-bottom: 4px; }
.retry-ad small { color: var(--muted); }
.retry-ad .btn { font-size: 18px; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
/* StarFoot Premium kartı */
.prem { position: relative; overflow: hidden; border-color: rgba(255, 207, 63, .45); background: linear-gradient(150deg, rgba(255, 207, 63, .16), rgba(20, 34, 79, .9) 45%, rgba(8, 15, 38, .95)); }
.prem::after { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 207, 63, .3), transparent 70%); pointer-events: none; }
.prem-h { display: flex; align-items: center; gap: 12px; }
.prem-h > i { font-style: normal; font-size: 30px; filter: drop-shadow(0 0 12px rgba(255, 207, 63, .7)); }
.prem-h b { display: block; font-family: var(--display); font-style: italic; font-size: 22px; color: #ffcf3f; letter-spacing: .02em; }
.prem-h small { color: var(--muted); }
.prem-l { margin: 12px 0 14px; padding-left: 20px; display: grid; gap: 6px; color: var(--chalk); font-size: 14px; }
.prem-l b { color: #ffcf3f; }
.prem .btn { width: 100%; }
.prem .prem-restore { margin-top: 8px; font-size: 13px; }
.prem.on { padding-top: 14px; padding-bottom: 14px; }
.prem-in { margin: 0 0 12px; padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 207, 63, .45); }
/* Kariyer oluşturma: otomatik dağıt / sıfırla */
.cr-auto { display: flex; gap: 8px; margin: 4px 0 12px; }
.cr-auto .btn { flex: 1; padding: 10px 12px; font-size: 14px; }
.cr-auto .btn:first-child { flex: 2; border-color: rgba(255, 207, 63, .5); color: #ffcf3f; }
/* Profil › Ayarlar */
.settings .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.settings .set-row:first-of-type { border-top: 0; }
.settings .set-row > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.settings .set-row small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.settings .set-row .seg { flex-shrink: 0; }
@media (max-width: 480px) { .settings .set-row { flex-direction: column; align-items: stretch; } .settings .set-row .seg { display: flex; } .settings .set-row .seg button { flex: 1; } }
.settings .set-links { display: grid; gap: 8px; }
.settings .set-links .btn { text-align: center; text-decoration: none; }
.settings .set-ver { margin-top: 12px; text-align: center; font-size: 12px; color: var(--muted); }
.settings .card-h small { font-size: 12px; }
/* Son dakika dramı */
.mt-moment.drama { box-shadow: inset 0 0 0 3px rgba(255, 60, 60, .85), inset 0 0 90px rgba(255, 30, 30, .45); animation: dramaPulse 1s ease-in-out infinite; }
.mt-moment.drama #mm-title { color: #ff5a5a; letter-spacing: .04em; }
.mt-moment.drama #mm-min { background: #ff3b3b; animation: dramaPulse .6s ease-in-out infinite; }
@keyframes dramaPulse { 0%, 100% { box-shadow: inset 0 0 0 3px rgba(255, 60, 60, .85), inset 0 0 60px rgba(255, 30, 30, .3); } 50% { box-shadow: inset 0 0 0 3px rgba(255, 60, 60, 1), inset 0 0 120px rgba(255, 30, 30, .6); } }
/* Derbi ve final atmosferi */
.overlay.derby::before, .overlay.final::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 160px; pointer-events: none; z-index: 1; }
.overlay.derby::before { background: radial-gradient(60% 120% at 15% -20%, rgba(255, 70, 40, .55), transparent 70%), radial-gradient(60% 120% at 85% -20%, rgba(255, 70, 40, .55), transparent 70%); animation: flare 2.2s ease-in-out infinite alternate; }
.overlay.final::before { background: radial-gradient(70% 120% at 50% -30%, rgba(255, 207, 63, .5), transparent 70%); animation: flare 3s ease-in-out infinite alternate; }
@keyframes flare { from { opacity: .55; } to { opacity: 1; } }
/* Basın toplantısı */
.press h3 { margin: 10px 0 14px; line-height: 1.3; text-transform: none; font-style: normal; font-family: inherit; font-size: 20px; letter-spacing: 0; }
.press-mics { display: flex; justify-content: center; gap: 18px; margin-top: 8px; }
.press-mics i { width: 10px; height: 26px; border-radius: 5px; background: #2b2f38; box-shadow: 0 -8px 0 4px #0b0d12; }
.press-opts { display: grid; gap: 8px; }
.press-a { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; white-space: normal; text-transform: none; font-size: 15px; padding: 12px 14px; }
.press-a small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #ffcf3f; }
/* Günlük ödül */
.daily h2 { margin: 6px 0 4px; }
.dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 4px; }
.dl-t { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); text-align: center; }
.dl-t small { font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.dl-t i { font-style: normal; font-size: 22px; }
.dl-t b { font-size: 11px; line-height: 1.2; }
.dl-t.got { opacity: .45; }
.dl-t.now { border-color: #ffcf3f; background: rgba(255, 207, 63, .14); box-shadow: 0 0 0 1px #ffcf3f, 0 0 24px rgba(255, 207, 63, .3); }
.dl-t.big { grid-column: span 2; background: linear-gradient(135deg, rgba(255, 207, 63, .2), rgba(255, 122, 26, .12)); }
/* Günlük görevler */
.missions .ms-streak { font-weight: 800; color: #ff9a3c; font-size: 14px; }
.ms-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.ms-row > i { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 900; }
.ms-row.ok > i { background: #2fbf71; border-color: #2fbf71; color: #fff; }
.ms-row span { flex: 1; font-size: 14px; position: relative; z-index: 1; }
.ms-row b { font-size: 13px; color: var(--muted); position: relative; z-index: 1; }
.ms-row em { position: absolute; left: 0; bottom: 0; height: 3px; background: #ffcf3f; transition: width .4s; }
.ms-row.ok em { background: #2fbf71; }
.missions .btn { width: 100%; margin-top: 4px; }
.ms-done { text-align: center; color: var(--muted); font-size: 13px; margin-top: 6px; }
/* Ezeli rakip */
.rival .rv-bal { font-size: 13px; font-weight: 800; color: #ffcf3f; }
.rv-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 6px 0 12px; }
.rv-p { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 10px 6px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.rv-p.me { background: rgba(255, 207, 63, .08); }
.rv-p b { font-family: var(--display); font-style: italic; font-size: 20px; text-transform: uppercase; }
.rv-p small { font-size: 11px; color: var(--muted); }
.rv-p em { font-style: normal; font-family: var(--display); font-weight: 800; font-size: 26px; color: #ffcf3f; }
.rv-vs { font-family: var(--display); font-style: italic; font-weight: 800; color: #ff5a5a; font-size: 22px; }
.rv-row { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; font-weight: 800; margin-top: 8px; }
.rv-row span:first-child { color: #ffcf3f; } .rv-row span:last-child { text-align: right; color: #ff8a8a; }
.rv-row label { text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.rv-bar { display: block; height: 6px; border-radius: 3px; background: #ff8a8a55; overflow: hidden; margin-top: 4px; }
.rv-bar > i { display: block; height: 100%; background: #ffcf3f; }
/* Altın Top */
.ballon .scr.rv b { color: #ff8a8a; }
.bal-top { margin: 10px 0 12px 20px; display: grid; gap: 6px; font-weight: 700; }
.bal-top li small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.bal-top li.me { color: #ffcf3f; }
/* Özel yetenekler */
.tr-list { display: grid; gap: 6px; }
.trt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); opacity: .7; }
.trt.got { opacity: 1; background: linear-gradient(135deg, rgba(255, 207, 63, .16), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 207, 63, .35); }
.trt .tic { font-size: 20px; color: #ffcf3f; width: 22px; text-align: center; }
.trt .ttx { flex: 1; display: flex; flex-direction: column; }
.trt small { font-size: 12px; color: var(--muted); }
.trt em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--muted); }
/* Rekorlar */
.rec { margin-bottom: 12px; }
.rec-h { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.rec-h small { color: var(--muted); font-size: 12px; text-align: right; }
.rec-v { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 4px; }
/* Başlangıç ekranı: senaryolar ve efsaneler salonu */
.title-x { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.title-x .btn { font-size: 14px; padding: 10px 8px; }
.title-x em { font-style: normal; font-size: 11px; color: var(--flood); margin-left: 4px; }
.hof { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.hof-r { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.hof-r.top { background: linear-gradient(135deg, rgba(255, 207, 63, .15), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 207, 63, .3); }
.hof-r .rk { width: 22px; font-family: var(--display); font-weight: 800; color: var(--muted); text-align: center; }
.hof-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hof-t b em { font-style: normal; font-size: 11px; color: var(--flood); }
.hof-t small { font-size: 12px; color: var(--muted); }
.hof-r .g { font-family: var(--display); font-size: 22px; color: var(--flood); }
.scn { display: grid; gap: 8px; margin-top: 8px; }
.scn-r { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--chalk); font: inherit; cursor: pointer; }
.scn-r:active { transform: scale(.99); }
.scn-r.got { border-color: rgba(47, 191, 113, .55); background: linear-gradient(135deg, rgba(47, 191, 113, .14), rgba(255, 255, 255, .03)); }
.scn-r > i { font-style: normal; font-size: 26px; line-height: 1; }
.scn-r span { display: flex; flex-direction: column; gap: 3px; }
.scn-r b { font-family: var(--display); font-size: 19px; text-transform: uppercase; font-style: italic; }
.scn-r small { font-size: 13px; color: var(--muted); }
.scn-r em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--flood); }
.scn-goal { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 207, 63, .1); border: 1px solid rgba(255, 207, 63, .3); font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.scn-card .msn-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.scn-card .msn-bar > i { display: block; height: 100%; background: var(--flood); }
/* Emeklilik: miras ve paylaş */
.hof-rank { margin: 14px 0 8px; font-weight: 700; color: var(--flood); }
.heir { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; text-align: left; margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(79, 179, 255, .16), rgba(255, 255, 255, .03)); border: 1px solid rgba(79, 179, 255, .4); }
.heir small { grid-column: 1; font-size: 12px; color: var(--muted); }
.heir .btn { grid-column: 2; grid-row: 1 / span 2; }
.end-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.heir-tag { margin-top: 10px; display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(79, 179, 255, .18); border: 1px solid rgba(79, 179, 255, .45); font-size: 13px; font-weight: 700; }
.sh-btn { width: 100%; margin-top: 10px; display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.sh-btn svg, .end-btns svg, .ct-btns svg, .sh-btns svg { width: 18px; height: 18px; }
.ct-btns { display: flex; gap: 8px; }
.ct-foot .ct-btns .btn { min-width: 0; }
.ct-foot .ct-go { min-width: 180px; }
.sh-ov { position: fixed; inset: 0; z-index: 9999; background: rgba(2, 4, 11, .86); display: grid; place-items: center; padding: 16px; }
.sh-box { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; }
.sh-box img { width: 100%; max-height: 72vh; object-fit: contain; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.sh-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-btns .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.scn-r > i:empty { display: none; }
/* Maç sonrası: küçük şerit */
.report.mini { padding: 10px 14px; }
.rpm { display: flex; align-items: center; gap: 12px; }
.rpm-k { display: flex; flex-direction: column; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rpm-k small { font-family: var(--body); font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none; }
.rpm-s { flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rpm-s b { font-family: var(--display); font-weight: 800; font-size: 24px; white-space: nowrap; }
.rpm-s small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report.mini .rp-rt { padding: 4px 10px; }
.report.mini .rp-rt b { font-size: 20px; }
.rpm-chips { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.rpm-chips b { font-variant-numeric: tabular-nums; }
.rpm-chips .up b { color: #46e08f; } .rpm-chips .down b { color: #ff6f64; }
/* Yaşıtların */
.pr-sum { margin: 0 0 8px; font-size: 14px; }
.pr-sum b { color: var(--flood); font-size: 18px; }
.pr-sum small { color: var(--muted); }
.peers .scr.rv b { color: #ff8a8a; }
.peers .g small { font-size: 12px; color: var(--muted); margin-left: 2px; }
/* Mağaza: sekmeler, bölümler, çanta */
.sh-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; }
.sh-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--muted); font: 600 11px var(--body); cursor: pointer; }
.sh-tabs button .ic { width: 20px; height: 20px; }
.sh-tabs button.on { color: var(--flood-ink); background: var(--flood); border-color: var(--flood); }
.shop-body { padding-top: 6px; }
.shop-body .sh-grid { padding: 0; }
.sh-sec + .sh-sec { margin-top: 16px; }
.sh-sec-h { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.sh-sec-h > .ic { width: 22px; height: 22px; color: var(--flood); flex: none; }
.sh-sec-h span { flex: 1; display: flex; flex-direction: column; }
.sh-sec-h b { font-family: var(--display); font-size: 18px; text-transform: uppercase; font-style: italic; }
.sh-sec-h small { font-size: 12px; color: var(--muted); }
.sh-sec-h em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.bag-item { display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; padding: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); margin-bottom: 10px; }
.bag-item .sh-art { height: 64px; }
.bag-item .sh-art svg { width: 54px; height: 54px; }
.bag-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bag-t b { font-size: 15px; }
.bag-t small { font-size: 12px; color: var(--muted); }
.bag-pips { display: flex; align-items: center; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.bag-pips i { width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.bag-pips i.on { background: var(--sky); box-shadow: 0 0 6px rgba(79, 179, 255, .6); }
.bag-pips em { font-style: normal; font-size: 12px; font-weight: 800; margin-left: 6px; }
.bag-act { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; }
.bag-act .btn { min-height: 38px; padding: 6px; font-size: 13px; }
.bag-note { font-size: 12px; margin: 4px 0 0; }
.stockbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.stk { display: flex; flex-direction: column; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.stk-use { flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 8px 10px; background: none; border: 0; color: var(--chalk); font: inherit; cursor: pointer; min-width: 0; }
.stk-use .ic { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--sky); }
.stk-use span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-use b { font-family: var(--display); font-size: 18px; }
.stk-use:disabled { opacity: .5; cursor: default; }
.stk-use:not(:disabled):active { background: rgba(79, 179, 255, .12); }
.stk-buy { border: 0; border-top: 1px solid var(--line); background: rgba(255, 207, 63, .1); color: var(--flood); font: 700 12px var(--body); padding: 7px 8px; cursor: pointer; }
.stk-buy:disabled { opacity: .4; cursor: default; }
.bal-how { margin: -2px 0 10px; font-size: 12px; color: var(--muted); } .bal-how b { color: var(--chalk); }
/* Görevler tamamlandı: küçük şerit */
.missions.done { padding: 10px 14px; }
.ms-mini { display: flex; align-items: center; gap: 12px; }
.ms-mini > i { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #2fbf71; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 900; }
.ms-mini span { flex: 1; display: flex; flex-direction: column; }
.ms-mini b { font-size: 14px; }
.ms-mini small { font-size: 12px; color: var(--muted); }
/* Uygulama içi gizlilik politikası */
.pv-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(2, 4, 11, .9); display: flex; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.pv-box { flex: 1; display: flex; flex-direction: column; max-width: 820px; margin: 0 auto; width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pv-bar b { font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.pv-bar .btn { min-height: 36px; padding: 6px 14px; }
.pv-box iframe { flex: 1; width: 100%; border: 0; background: #0a1530; }
.prem-err { margin: 8px 0 0; font-size: 12px; color: #ff8f86; text-align: center; }