/* SARPULİ — sıcak koyu zemin + altın vurgular.
   Amaç: uzun süre bakınca göz yormayan, kontrastı dengeli, "pahalı" duran bir yüzey. */

:root {
  /* zemin: saf siyah değil, hafif sıcak koyu */
  --bg: #0e0f12;
  --bg-2: #121318;
  --panel: #16181e;
  --panel-2: #1c1f27;
  --line: #262a33;
  --line-soft: #20242c;

  /* metin: saf beyaz yerine kırık bej — parlamayı azaltır */
  --text: #ece6dc;
  --muted: #9a958c;
  --muted-2: #7c776f;

  /* altın ailesi */
  --gold: #d9b169;
  --gold-soft: #e7cd9a;
  --gold-deep: #a8823c;
  --gold-dim: rgba(217, 177, 105, 0.14);
  --gold-line: rgba(217, 177, 105, 0.28);

  /* durum renkleri (altınla uyumlu, doygunluğu düşük) */
  --good: #6cc08a;
  --bad: #d9686d;
  --warn: #d9a441;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* html'e de zemin rengi veriyoruz: aksi halde kaydırırken üstte/altta beyaz şerit görünüyor */
html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 50% -180px, rgba(217, 177, 105, 0.10), transparent 70%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 420px);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* üstteki yumuşak ışık */
.glow {
  position: fixed;
  top: -260px; left: 50%; transform: translateX(-50%);
  width: 820px; height: 420px;
  background: radial-gradient(closest-side, rgba(217, 177, 105, 0.16), transparent 75%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

/* ----------------------------- üst bar ----------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: rgba(14, 15, 18, 0.78);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid var(--line-soft);
}

.brand { display: flex; align-items: center; gap: 8px; }

.brand-mark {
  width: 27px; height: 27px; display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, #2a2318, #17181d);
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700; font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(231, 205, 154, 0.18);
}

.brand-text {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2.6px;
  background: linear-gradient(100deg, #b8924a 0%, #f0dcae 38%, #d9b169 58%, #a8823c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(217, 177, 105, 0.16);
}

.brand-sub {
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}

/* ------------------------ ortadaki sekmeler ------------------------ */

.tabs {
  justify-self: center;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(28, 31, 39, 0.9), rgba(20, 22, 28, 0.9));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 14px rgba(0, 0, 0, 0.22);
}

.tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  letter-spacing: .2px;
  transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.tab small { font-size: 10.5px; opacity: .7; font-weight: 500; }

.tab:hover { color: var(--gold-soft); transform: translateY(-1px); }

.tab.active {
  color: #1a1508;
  background: linear-gradient(160deg, #f0dcae 0%, #d9b169 45%, #b8924a 100%);
  box-shadow: 0 6px 18px rgba(217, 177, 105, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  font-weight: 700;
}

.tab.active small { opacity: .75; }

.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bad);
  box-shadow: 0 0 0 0 rgba(217, 104, 109, 0.6);
  animation: pulse 2s infinite;
}
.tab.active .dot-live { background: #7a1f22; box-shadow: none; animation: none; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(217, 104, 109, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(217, 104, 109, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 104, 109, 0); }
}

/* ------------------------ arama ------------------------ */

.topbar-right { justify-self: end; display: flex; align-items: center; gap: 12px; }

.search { position: relative; display: flex; align-items: center; }

.search input {
  width: 215px;
  padding: 6px 28px 6px 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(28, 31, 39, .9), rgba(20, 22, 28, .9));
  color: var(--text);
  font: 500 12.5px var(--font);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, width .25s ease;
}
.search input::placeholder { color: var(--muted-2); font-weight: 400; }
.search input:focus {
  width: 280px;
  border-color: var(--gold-line);
  box-shadow: 0 0 0 3px rgba(217, 177, 105, .1);
}
.search input::-webkit-search-cancel-button { display: none; }

.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-52%);
  color: var(--gold-deep); font-size: 17px; pointer-events: none;
}
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--muted-2);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 50%;
}
.search-clear:hover { color: var(--gold); }

.search-results {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(420px, 92vw);
  max-height: min(460px, 70vh); overflow-y: auto;
  background: linear-gradient(180deg, #1a1d24, #15171c);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  padding: 6px;
  z-index: 40;
}

.sr-item {
  display: grid; gap: 4px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.sr-item:hover, .sr-item.active { background: rgba(217, 177, 105, .10); }
.sr-teams { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; flex-wrap: wrap; }
.sr-team { display: inline-flex; align-items: center; gap: 6px; }
.sr-team img { width: 18px; height: 18px; object-fit: contain; }
.mini-logo { width: 18px; height: 18px; border-radius: 50%; background: var(--panel-2); display: inline-block; }
.sr-vs { color: var(--muted-2); }
.sr-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted-2); }
.sr-badge {
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sr-badge.live { color: var(--bad); border-color: rgba(217, 104, 109, .4); font-weight: 700; }
.sr-empty { padding: 18px 14px; color: var(--muted); font-size: 13.5px; text-align: center; }

.conn {
  display: flex; align-items: center; gap: 7px;
  color: var(--muted-2); font-size: 11.5px; letter-spacing: .3px;
}
.conn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.conn.ok .dot { background: var(--good); box-shadow: 0 0 10px rgba(108, 192, 138, 0.5); }
.conn.off .dot { background: var(--bad); }

/* ----------------------------- gövde ----------------------------- */

.view { position: relative; z-index: 1; max-width: 1020px; margin: 0 auto; padding: 26px 18px 10px; }
.loading, .empty { padding: 60px 0; text-align: center; color: var(--muted); }

.league-group { margin-bottom: 26px; }
.league-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--gold-deep);
  margin: 0 0 10px 4px;
}
.league-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--gold-line), transparent);
}

/* ----------------------------- maç satırı ----------------------------- */

.match {
  position: relative;
  display: grid; grid-template-columns: 78px 1fr auto; gap: 14px; align-items: center;
  background: linear-gradient(180deg, var(--panel) 0%, #14161b 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.match::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  opacity: 0; transition: opacity .2s ease;
}

.match:hover {
  border-color: var(--gold-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.match:hover::before { opacity: 1; }

.match .when { font-size: 13px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.match .when .live { color: var(--bad); font-weight: 700; letter-spacing: .5px; }
.match .teams { display: grid; gap: 6px; min-width: 0; max-width: 560px; }
.match .row { display: flex; align-items: center; gap: 10px; }
.match .row img { width: 22px; height: 22px; object-fit: contain; }
.match .row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match .score { font-weight: 700; min-width: 20px; text-align: right; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.match .go { color: var(--muted-2); font-size: 22px; transition: color .2s ease, transform .2s ease; }
.match:hover .go { color: var(--gold); transform: translateX(3px); }

.pill {
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .8px;
}
.pill.live { color: var(--bad); border-color: rgba(217, 104, 109, .38); }

/* ----------------------------- kartlar ----------------------------- */

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(24, 26, 32, .96), rgba(19, 21, 26, .96));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 20px; margin-bottom: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
}

.card h3 {
  margin: 0 0 14px; font-size: 15px; font-weight: 700; letter-spacing: .2px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card h3::before {
  content: ''; width: 3px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
}
.card h4 {
  margin: 18px 0 9px; font-size: 11.5px; font-weight: 600;
  color: var(--gold-deep); text-transform: uppercase; letter-spacing: 1.3px;
}

.back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); margin-bottom: 14px; font-size: 13.5px;
  transition: color .2s ease, gap .2s ease;
}
.back:hover { color: var(--gold); gap: 10px; }

/* maç başlığı */
.head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; text-align: center; }
.head .team { display: grid; justify-items: center; gap: 8px; font-weight: 600; }
.head .team img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.head .big {
  font-size: 34px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(180deg, #f4e4be, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.head .meta { color: var(--muted); font-size: 12.5px; }

/* ----------------------------- çubuklar ----------------------------- */

.bars { display: grid; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 92px; gap: 12px; align-items: center; font-size: 14px; }
.bar {
  height: 10px; background: #22252d; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
  box-shadow: 0 0 14px rgba(217, 177, 105, .35);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
/* 1X2 çubukları: hepsi sıcak tonlarda ama birbirinden ayırt edilebilir */
.bar.home > span { background: linear-gradient(90deg, var(--gold-deep), #f2dfb2); }
.bar.draw > span { background: linear-gradient(90deg, #4b4f59, #8d8578); box-shadow: none; }
.bar.away > span { background: linear-gradient(90deg, #8a5a33, #c9895a); box-shadow: 0 0 14px rgba(201, 137, 90, .22); }
.bar.green > span { background: linear-gradient(90deg, #4f8f68, var(--good)); box-shadow: 0 0 14px rgba(108,192,138,.25); }
.bar.amber > span { background: linear-gradient(90deg, #9a7430, var(--warn)); box-shadow: none; }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold-soft); white-space: nowrap; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

/* ----------------------------- momentum ----------------------------- */

.momentum { margin-top: 8px; }
.momentum .track {
  position: relative; height: 13px; border-radius: 999px;
  background: #22252d; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.momentum .fill {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
  box-shadow: 0 0 16px rgba(217, 177, 105, .4);
  transition: all .5s cubic-bezier(.4, 0, .2, 1);
}
.momentum .mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.12); }
.momentum .labels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted-2); margin-top: 8px; }

/* ----------------------------- faktörler ----------------------------- */

.factor { border-top: 1px solid var(--line-soft); padding: 14px 0; }
.factor:first-of-type { border-top: 0; padding-top: 2px; }
.factor .f-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.factor .f-name { font-weight: 600; }
.factor .f-note { color: var(--muted); font-size: 13.5px; margin-top: 5px; line-height: 1.65; }

.chip {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.chip.up { color: var(--good); border-color: rgba(108, 192, 138, .35); background: rgba(108, 192, 138, .08); }
.chip.down { color: var(--bad); border-color: rgba(217, 104, 109, .35); background: rgba(217, 104, 109, .08); }
.chip.off { opacity: .6; }

/* ----------------------------- oranlar ----------------------------- */

.odds-row { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.odds-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(217,177,105,.10), rgba(217,177,105,.04));
  border: 1px solid var(--gold-line); color: var(--gold-soft);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.odds-chip b { color: var(--gold-deep); font-weight: 700; margin-right: 5px; }

/* ----------------------------- tablolar ----------------------------- */

table.mini { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.mini td, table.mini th {
  padding: 8px 6px; border-bottom: 1px solid var(--line-soft); text-align: left;
}
table.mini tr:last-child td { border-bottom: 0; }
table.mini th {
  color: var(--gold-deep); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px;
}
table.mini td { font-variant-numeric: tabular-nums; }

.ok { color: var(--good); }
.no { color: var(--bad); }

/* ----------------------------- geçmiş / rapor ----------------------------- */

.match.past { cursor: default; grid-template-columns: 92px 1fr; align-items: start; }
.match.past:hover { border-color: var(--line-soft); transform: none; box-shadow: none; }
.match.past:hover::before { opacity: 0; }
.match.past .when { display: grid; gap: 5px; justify-items: center; }
.predline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* yüksek oran (değer) işareti */
.value-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 10px; border-radius: 999px;
  color: #ffd9a8;
  background: linear-gradient(135deg, rgba(217, 104, 109, .22), rgba(217, 164, 65, .20));
  border: 1px solid rgba(217, 164, 65, .45);
  box-shadow: 0 0 14px rgba(217, 164, 65, .18);
  width: fit-content;
  margin-bottom: 2px;
}
.match.has-value { border-color: rgba(217, 164, 65, .38); }
.match.has-value::before { opacity: .55; background: linear-gradient(180deg, #e5a94a, #b86c3a); }

/* --- canli "yuksek tutarlilik" filtresi --- */
.filterbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 2px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 164, 65, .16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(217, 164, 65, .06), rgba(255, 255, 255, .02));
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .2px;
  cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  color: #e8dcc6;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(217, 164, 65, .3);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.filter-chip:hover { background: rgba(217, 164, 65, .12); border-color: rgba(217, 164, 65, .5); }
.filter-chip.on {
  color: #1a1406;
  background: linear-gradient(135deg, #e7c47a, #d9a441);
  border-color: rgba(217, 164, 65, .85);
  box-shadow: 0 0 18px rgba(217, 164, 65, .28);
}
.filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; font-size: 11px; font-weight: 800;
  background: rgba(0, 0, 0, .28); color: inherit;
}
.filter-chip.on .filter-count { background: rgba(26, 20, 6, .22); }
.filter-note { font-size: 12px; color: var(--muted); flex: 1 1 240px; line-height: 1.45; }
.filter-note small { opacity: .75; }

.hl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 10px; border-radius: 999px;
  color: #bff0d2;
  background: linear-gradient(135deg, rgba(60, 190, 120, .20), rgba(217, 164, 65, .14));
  border: 1px solid rgba(70, 200, 130, .40);
  width: fit-content;
  margin-bottom: 2px;
}
.hl-badge small { opacity: .8; font-size: 10px; font-weight: 700; }
.odds-chip.off { color: var(--muted-2); border-style: dashed; font-weight: 500; }
.odds-row.empty-odds { opacity: .55; }
.match.has-highlight::before { opacity: .6; background: linear-gradient(180deg, #56cf90, #d9a441); }

@media (max-width: 720px) {
  .filterbar { gap: 8px; padding: 9px 10px; }
  .filter-note { flex-basis: 100%; }
}

.value-card {
  border-color: rgba(217, 164, 65, .45);
  background:
    radial-gradient(560px 170px at 12% -30px, rgba(217, 164, 65, .12), transparent 70%),
    linear-gradient(180deg, rgba(26, 28, 34, .96), rgba(19, 21, 26, .96));
}
.value-card .verdict {
  font-size: 14.5px; line-height: 1.7;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(217, 164, 65, .09);
  border-left: 3px solid var(--warn);
}

/* değişim göstergesi (artış/azalış oku) */
.tr {
  font-size: 11px; font-weight: 700; margin-left: 4px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tr.up { color: var(--good); }
.tr.down { color: var(--bad); }
.tr.flat { color: var(--muted-2); font-weight: 500; }
.mom-val { color: var(--gold-soft); font-weight: 700; }

/* şüpheli hareket kartı */
.integrity .verdict {
  font-size: 14.5px; line-height: 1.7;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(108, 192, 138, .07);
  border-left: 3px solid var(--good);
}
.integrity.orta .verdict { background: rgba(217, 164, 65, .08); border-left-color: var(--warn); }
.integrity.yüksek .verdict { background: rgba(217, 104, 109, .09); border-left-color: var(--bad); }
.integrity.bilinmiyor .verdict { background: var(--panel-2); border-left-color: var(--line); color: var(--muted); }

/* hakem kartı */
.referee .verdict {
  font-size: 14.5px; line-height: 1.7;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(108, 192, 138, .07);
  border-left: 3px solid var(--good);
  margin-bottom: 10px;
}
.referee.warn .verdict { background: rgba(217, 164, 65, .08); border-left-color: var(--warn); }
.referee.bad .verdict { background: rgba(217, 104, 109, .09); border-left-color: var(--bad); }
.referee.off .verdict { background: var(--panel-2); border-left-color: var(--line); color: var(--muted); }
.referee h4 { margin: 14px 0 6px; font-size: 12.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--gold-soft); }
.referee .mini { margin-top: 10px; }
.referee .chip.ok { color: var(--good); border-color: rgba(108, 192, 138, .4); }
.referee .chip.warn { color: var(--warn); border-color: rgba(217, 164, 65, .4); }
.referee .chip.bad { color: var(--bad); border-color: rgba(217, 104, 109, .4); }
.referee .chip.off { color: var(--muted-2); }

.ref-watch {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--line);
}
.ref-watch.warn { border-left-color: var(--warn); background: rgba(217, 164, 65, .07); }
.ref-watch.bad { border-left-color: var(--bad); background: rgba(217, 104, 109, .08); }
.ref-watch.ok { border-left-color: var(--good); background: rgba(108, 192, 138, .06); }
.ref-watch .verdict { background: none; border: 0; padding: 6px 0; margin: 0; font-size: 14px; }

.report {
  background:
    radial-gradient(600px 180px at 80% -40px, rgba(217, 177, 105, .10), transparent 70%),
    linear-gradient(180deg, rgba(26, 28, 34, .96), rgba(19, 21, 26, .96));
  border-color: var(--gold-line);
}
/* spor geçişi: Futbol / Basketbol */
/* Marka ve spor gecisi AYNI SATIRDA: gecis markanin sagindadir */
.brand-block {
  display: flex; align-items: center; gap: 12px;
  justify-self: start; min-width: 0;
}
.sports {
  display: inline-flex; gap: 3px; padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line-soft);
  width: fit-content;
}
.sport {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--muted); text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.sport:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.sport.active {
  color: #1a1406;
  background: linear-gradient(135deg, #e7c47a, #d9a441);
  box-shadow: 0 0 12px rgba(217, 164, 65, .22);
}
.sport-icon { font-size: 12px; line-height: 1; }

@media (max-width: 1100px) {
  .brand-block { gap: 9px; }
  .sport { padding: 4px 9px; font-size: 11px; }
  .sport span:not(.sport-icon) { display: inline; }
}
@media (max-width: 700px) {
  /* Dar ekranda sadece ikon kalir; bar yine ince gorunur */
  .sport { padding: 4px 8px; gap: 0; font-size: 0; }
  .sport-icon { font-size: 14px; }
}

/* rapor başlığı + dönem seçimi */
.report-head { justify-content: space-between; }
.period-select {
  margin-left: auto;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text);
  background-color: var(--panel-2);
  border: 1px solid rgba(217, 164, 65, .35);
  border-radius: 999px;
  padding: 7px 34px 7px 14px;
  cursor: pointer;
  appearance: none;
  /* altın renkli küçük ok */
  background-image: linear-gradient(45deg, transparent 50%, #d9b169 50%), linear-gradient(135deg, #d9b169 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .15s, background-color .15s;
}
.period-select:hover { border-color: rgba(217, 164, 65, .65); background-color: rgba(217, 164, 65, .10); }
.period-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.period-select option { background: #14161b; color: var(--text); font-weight: 500; }
.report .period-note { font-size: 12px; color: var(--muted-2); margin: -6px 0 12px; }

.report .bigline { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; font-size: 13.5px; color: var(--muted); }
.report .bigline b { color: var(--text); font-size: 19px; font-weight: 700; }
.report .pctbig {
  margin-left: auto; font-size: 30px; font-weight: 800;
  background: linear-gradient(180deg, #f4e4be, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ----------------------------- notlar ----------------------------- */

.note { color: var(--muted); font-size: 13px; line-height: 1.65; }
.warnbox {
  border-left: 3px solid var(--warn);
  padding: 10px 14px; background: rgba(217, 164, 65, .07);
  border-radius: 8px; color: #e5d5b0; font-size: 13px;
}
.errbox {
  border-left: 3px solid var(--bad);
  padding: 12px 14px; background: rgba(217, 104, 109, .08); border-radius: 8px;
}

/* ----------------------------- alt bilgi ----------------------------- */

.foot {
  position: relative; z-index: 1;
  max-width: 1020px; margin: 28px auto 48px; padding: 20px 18px 0;
  border-top: 1px solid var(--line-soft);
  color: var(--muted-2); font-size: 11.5px; line-height: 1.8;
}
.foot-brand {
  display: block; font-weight: 800; letter-spacing: 3px; font-size: 12px;
  color: var(--gold-deep); margin-bottom: 4px;
}

/* ----------------------------- mobil ----------------------------- */

/* Dar masaüstünde bağlantı yazısı taşmasın: sadece nokta kalsın */
@media (min-width: 721px) and (max-width: 1150px) {
  .conn #connText { display: none; }
}

@media (max-width: 980px) {
  .brand-sub { display: none; }
  .search input { width: 180px; }
  .search input:focus { width: 220px; }
}

@media (max-width: 720px) {
  .topbar { grid-template-columns: 1fr auto; gap: 10px; padding: 12px 14px; }
  .brand-sub { display: none; }
  .tabs { grid-column: 1 / -1; justify-self: center; width: 100%; justify-content: center; }
  .tab { padding: 9px 14px; font-size: 13px; }
  .topbar-right { grid-column: 1 / -1; justify-self: stretch; gap: 10px; }
  .search { flex: 1; }
  .search input, .search input:focus { width: 100%; }
  .search-results { right: auto; left: 0; width: min(420px, 94vw); }
  .conn { flex-shrink: 0; }
  .view { padding: 18px 14px 6px; }
  .match { grid-template-columns: 64px 1fr auto; padding: 12px; }
  .match.past { grid-template-columns: 74px 1fr; }
  .bar-row { grid-template-columns: 92px 1fr 80px; font-size: 12.5px; line-height: 1.3; gap: 8px; }
  .head .big { font-size: 26px; }
  .head .team img { width: 40px; height: 40px; }
  .card { padding: 16px; }
}

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

/* ------------------- karar katmanı: güven, senaryo, tahminler ------------------- */

.conf .verdict {
  font-size: 14px; line-height: 1.7;
  padding: 11px 13px; border-radius: var(--radius-sm);
  background: rgba(108, 192, 138, .07);
  border-left: 3px solid var(--good);
  margin: 10px 0 4px;
}
.conf.warn .verdict { background: rgba(217, 164, 65, .08); border-left-color: var(--warn); }
.conf.bad .verdict { background: rgba(217, 104, 109, .08); border-left-color: var(--bad); }
.conf h4 { margin: 14px 0 6px; }

.meter {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-soft);
}
.meter > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
  box-shadow: 0 0 14px rgba(217, 177, 105, .28);
}

.scenario {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.scenario:last-child { border-bottom: 0; padding-bottom: 0; }
.s-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14.5px; margin-bottom: 8px; }
.s-head .pill { margin-left: auto; }
.s-bar {
  height: 6px; border-radius: 999px; overflow: hidden; margin-bottom: 8px;
  background: rgba(255, 255, 255, .05);
}
.s-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #8a5a33, var(--gold)); }

.picks .pick {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.picks .pick:last-of-type { border-bottom: 0; }
.p-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 15px; }
.p-rank {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 8px;
  background: linear-gradient(145deg, #2a2318, #17181d);
  border: 1px solid var(--gold-line);
  color: var(--gold); font-size: 11.5px; font-weight: 800;
}
.p-prob {
  margin-left: auto; font-size: 18px; font-weight: 800;
  background: linear-gradient(180deg, #f4e4be, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.p-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 7px 0 5px; }

.summary .mini td:first-child { color: var(--muted); }
.summary .mini td:last-child { text-align: right; }

@media (max-width: 720px) {
  .p-head { font-size: 14px; }
  .p-prob { font-size: 16px; }
  .s-head .pill { margin-left: 0; }
}

/* ===================== karar katmanı: gerekçe / karşı kanıt ===================== */

.why {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--gold-line);
  background: rgba(217, 177, 105, 0.05);
  border-radius: 0 6px 6px 0;
}
.why-h {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  color: var(--gold-soft);
  font-weight: 600;
  margin-bottom: 5px;
}
.why-row { display: flex; gap: 8px; align-items: baseline; margin: 3px 0; }
.why-k { flex: 0 0 auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.why-t { flex: 1 1 auto; font-size: 12.5px; color: var(--text); line-height: 1.45; }

.against {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid rgba(217, 104, 109, 0.45);
  background: rgba(217, 104, 109, 0.06);
  border-radius: 0 6px 6px 0;
}
.against-h {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  color: #e79a9d;
  font-weight: 600;
  margin-bottom: 5px;
}
.against-row { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 3px 0; }

/* tahmin üretilemedi uyarısı */
.nobet {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 164, 65, 0.4);
  background: rgba(217, 164, 65, 0.08);
  border-radius: 8px;
  font-size: 13px;
}
.nobet b { color: var(--warn); display: block; margin-bottom: 3px; }
.nobet div { color: var(--muted); line-height: 1.5; }

/* risk kategorisi rozetleri */
.chip.cat-LOW { color: var(--good); border-color: rgba(108, 192, 138, 0.4); }
.chip.cat-MEDIUM { color: var(--gold-soft); border-color: var(--gold-line); }
.chip.cat-HIGH { color: var(--warn); border-color: rgba(217, 164, 65, 0.4); }
.chip.cat-SPECULATIVE { color: var(--bad); border-color: rgba(217, 104, 109, 0.4); }
.chip.cat-NO_BET { color: var(--bad); border-color: rgba(217, 104, 109, 0.55); background: rgba(217, 104, 109, 0.08); }

/* ===================== modelin kendini sorgulaması ===================== */

.sc-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.sc-row:last-child { border-bottom: 0; }
.sc-mark { flex: 0 0 14px; font-weight: 700; }
.sc-row.ok .sc-mark { color: var(--good); }
.sc-row.bad .sc-mark { color: var(--bad); }
.sc-q { flex: 1 1 200px; color: var(--text); }
.sc-d { flex: 1 1 100%; color: var(--muted-2); font-size: 11.5px; padding-left: 22px; }

/* ===================== alt modeller / bayes ===================== */

.ens-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 12.5px; }
.ens-l { flex: 0 0 42%; color: var(--muted); }
.ens-row .s-bar { flex: 1 1 auto; margin: 0; }
.ens-p { flex: 0 0 48px; text-align: right; color: var(--gold-soft); font-variant-numeric: tabular-nums; }

.bayes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.b-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  min-width: 78px;
}
.b-box i { font-style: normal; font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.06em; }
.b-box b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.b-box.on { border-color: var(--gold-line); background: var(--gold-dim); }
.b-box.on b { color: var(--gold-soft); }
.b-arrow { color: var(--muted-2); }

/* ===================== gerçek performans / şans ===================== */

.luck-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.luck-col > b { display: block; margin-bottom: 6px; color: var(--gold-soft); font-size: 13px; }
.luck-bar {
  display: flex;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--line-soft);
  margin-bottom: 6px;
}
.luck-bar .true { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.luck-bar .chance { background: rgba(217, 104, 109, 0.55); }

@media (max-width: 720px) {
  .luck-grid { grid-template-columns: 1fr; }
  .ens-l { flex-basis: 100%; }
}

/* ======================= KESİN TAHMİN bloğu ======================= */

.card.verdict {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, rgba(217, 177, 105, 0.07), transparent 55%), var(--panel);
}
.card.verdict.v-none { border-color: rgba(217, 104, 109, 0.35); background: var(--panel); }
.card.verdict.v-weak { border-color: rgba(217, 164, 65, 0.35); }

.v-headline {
  font-size: 19px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--gold-soft);
  margin: 4px 0 6px;
  letter-spacing: 0.01em;
}
.card.verdict.v-none .v-headline { color: var(--muted); }

.v-score { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.v-score b { color: var(--text); }

.v-lines { display: flex; flex-direction: column; gap: 6px; }
.v-line {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel-2);
  border-left: 3px solid var(--line);
}
.v-line.v-strong { border-left-color: var(--good); }
.v-line.v-mid { border-left-color: var(--gold); }
.v-line.v-weak { border-left-color: var(--warn); }
.v-line.v-none { border-left-color: var(--bad); }

.v-market { font-size: 11px; color: var(--muted-2); letter-spacing: 0.05em; text-transform: uppercase; }
.v-pick { font-size: 14.5px; font-weight: 650; color: var(--text); }
.v-prob { font-size: 14px; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.v-why {
  grid-column: 2 / -1;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.v-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

@media (max-width: 620px) {
  .v-line { grid-template-columns: 1fr auto; }
  .v-market { grid-column: 1 / -1; }
  .v-why { grid-column: 1 / -1; }
  .v-headline { font-size: 17px; }
}

/* ===================== ÜYELİK EKRANLARI ===================== */

.authwrap {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}
.authcard {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 26px;
}
.authbrand {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-align: center;
  margin-bottom: 20px;
}
.authtitle { font-size: 17px; margin: 0 0 8px; text-align: center; }
.authtabs {
  display: flex;
  gap: 4px;
  background: var(--panel-2);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
}
.authtab {
  flex: 1;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.authtab.on { background: var(--gold-dim); color: var(--gold-soft); font-weight: 600; }

.fld { display: block; margin-bottom: 14px; }
.fldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fldrow .fld { margin-bottom: 14px; }
.fld.grow { flex: 1 1 200px; }
.fld-label {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.fld input,
.fld select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.fld input:focus,
.fld select:focus { outline: none; border-color: var(--gold-line); background: var(--panel-2); }
.fld-hint { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 4px; }
.fld-err { display: block; font-size: 12px; color: var(--bad); margin-top: 4px; min-height: 0; }

.authbtn {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: #17130b;
  font: inherit;
  font-weight: 650;
  font-size: 14.5px;
  cursor: pointer;
  margin-top: 4px;
}
.authbtn:disabled { opacity: 0.55; cursor: default; }
.authbtn.ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.authbtn.small { width: auto; padding: 9px 16px; font-size: 13px; }

.authmsg { font-size: 13px; margin-top: 12px; line-height: 1.5; }
.authmsg.err { color: var(--bad); }
.authmsg.ok { color: var(--good); }
.authalt { font-size: 12.5px; color: var(--muted); margin-top: 14px; text-align: center; }
.authalt a { color: var(--gold-soft); }
.authnote { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 16px; }
.authfoot { font-size: 12px; color: var(--muted-2); margin-top: 16px; text-align: center; }
.keyicon { font-size: 34px; text-align: center; margin-bottom: 8px; }

/* hesap rozeti */
.acct { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.acct-name { color: var(--text); font-weight: 600; }
.acct-access {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.acct-access.ok { color: var(--good); border-color: rgba(108, 192, 138, 0.4); }
.acct-access.off { color: var(--bad); border-color: rgba(217, 104, 109, 0.4); }
/* Yonetim ve mesaj simgeleri: 15px'te tiklamasi zordu ve gozden kaciyordu.
   Boyut buyutuldu, ayrica tiklama alani genisletildi (line-height + padding). */
.acct-admin {
  font-size: 21px;
  line-height: 1;
  padding: 2px 3px;
  text-decoration: none;
  color: var(--gold-soft);
  transition: color 0.15s ease, transform 0.15s ease;
}
.acct-admin:hover { color: var(--gold); transform: translateY(-1px); }
.acct-out {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 7px;
  padding: 4px 10px;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.acct-out:hover { color: var(--text); border-color: var(--gold-line); }

/* ===================== YÖNETİM PANELİ ===================== */

.admin-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-head h1 { font-size: 20px; margin: 0; }
.admin-tabs { display: flex; gap: 4px; background: var(--panel-2); border-radius: 9px; padding: 4px; }
.atab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.atab.on { background: var(--gold-dim); color: var(--gold-soft); font-weight: 600; }

.admin-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.astat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 96px;
}
.astat b { display: block; font-size: 20px; color: var(--gold-soft); }
.astat span { font-size: 11.5px; color: var(--muted); }
.astat.mail b { font-size: 14px; }

.admin-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.admin-search {
  flex: 1 1 260px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}
.admin-form {
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}
.admin-form h3 { margin: 0 0 12px; font-size: 15px; }
.admin-form-acts { display: flex; gap: 10px; }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.atable { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.atable th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 11px 12px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.atable td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.atable tr:last-child td { border-bottom: 0; }
.atable .empty { text-align: center; color: var(--muted-2); padding: 26px; }
.u-name { font-weight: 600; }
.u-nick, .u-phone, .u-date { font-size: 11.5px; color: var(--muted-2); }
.u-contact div { margin: 1px 0; }
.k-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gold-soft); white-space: nowrap; }
.k-label { color: var(--muted); }
.u-acts { display: flex; gap: 4px; white-space: nowrap; }
.mini {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
.mini:hover { color: var(--text); border-color: var(--gold-line); }
.mini.danger:hover { color: var(--bad); border-color: rgba(217, 104, 109, 0.5); }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.tag.ok { color: var(--good); border-color: rgba(108, 192, 138, 0.35); }
.tag.bad { color: var(--bad); border-color: rgba(217, 104, 109, 0.35); }
.tag.off { color: var(--muted-2); }
.tag.gold { color: var(--gold-soft); border-color: var(--gold-line); }

/* anahtar üreticisi */
.keygen {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
}
.keygen h3 { margin: 0 0 12px; font-size: 15px; }
/* Telegram: aciklamanin altindaki baglanti satirinin onizlemesi.
   Telegram'daki gorunume yakin olsun diye koyu zemin + mavi baglanti. */
.tg-preview {
  margin: 8px 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  font-size: 15px;
  line-height: 1.5;
  word-break: break-word;
}
.tg-preview a { color: #4ea3ff; font-weight: 700; text-decoration: none; }
.tg-preview a:hover { text-decoration: underline; }

.keygen-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.keygen-row .fld { margin-bottom: 0; }
.keygen-row .authbtn { width: auto; padding: 11px 20px; }
.keyout {
  margin-top: 16px;
  border: 1px solid var(--gold-line);
  background: var(--gold-dim);
  border-radius: 10px;
  padding: 14px;
}
.keyout-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.keyout-head .warn { font-size: 12px; color: var(--warn); }
.keyout-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.keyout-list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--gold-soft);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
  user-select: all;
}
.keyout-fallback { width: 100%; height: 80px; margin-top: 8px; }

@media (max-width: 620px) {
  .fldrow { grid-template-columns: 1fr; }
  .authcard { padding: 22px 18px; }
  .acct-name { display: none; }
}

/* ---- Hesap rozeti eklenince üst bar üç sütuna sığmıyordu ----
   Çözüm: bar artık sarabiliyor. Geniş ekranda tek satır, dar ekranda
   sekmeler alt satıra iniyor ve hiçbir şey kırpılmıyor. */
.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
/* Sekmeleri SAYFANIN ortasina hizalamak icin iki yan blok esit pay alir.
   Eskiden yalnizca `margin: 0 auto` vardi; bu, sekmeleri KALAN BOSLUGUN
   ortasina koyuyordu. Sag blok (arama + hesap) sol bloktan genis oldugu icin
   sekmeler surekli sola kayik duruyordu. `flex: 1 1 0` ikisine de ayni payi
   verir, boylece ortadaki oge gercekten sayfa ortasinda kalir. */
.topbar .tabs { order: 2; flex: 0 0 auto; margin: 0 auto; }
.topbar .brand-block { order: 1; flex: 1 1 0; min-width: 0; }
.topbar-right { order: 3; flex: 1 1 0; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; }
.acct { flex-wrap: nowrap; white-space: nowrap; }

@media (max-width: 1180px) {
  .topbar-right .search input { width: 150px; }
}
@media (max-width: 1200px) {
  /* Sekmeler kendi satırına insin; üstte marka + hesap kalsın.
     Eşik 1040'tan 1200'e çıkarıldı: sekmeler artık tam ortalandığı için
     1040-1200 arasında sağ blok fazla daralıyor ve arama kutusu
     okunamayacak hale geliyordu. */
  /* SATIR KIRMA HILESI: görünmez bir ::after tüm satırı kaplayıp kendinden
     sonrakini alt satıra iter. Böylece sekme hapı KENDİ GENİŞLİĞİNDE kalır
     (flex-basis:100% verseydik hap tüm satıra yayılır, tuhaf duran geniş bir
     çubuk olurdu) ve margin:auto ile satırın ortasına yerleşir. */
  .topbar::after { content: ''; flex-basis: 100%; height: 0; order: 3; }
  .topbar .tabs { order: 4; flex: 0 0 auto; justify-content: center; margin: 8px auto 0; }
  .topbar-right .search input { width: 170px; }
}
@media (max-width: 760px) {
  .acct-access { display: none; }
  .acct-name { display: none; }
  .acct-out { padding: 4px 8px; }
  .topbar-right .search input { width: 120px; }
}

/* ===================== MESAJ KUTUSU / TALEPLER / PANEL EKLERI ===================== */

/* --- ust bardaki mesaj rozeti --- */
.acct-inbox {
  position: relative;
  font-size: 21px;
  line-height: 1;
  padding: 2px 3px;
  text-decoration: none;
  color: var(--gold-soft);
  transition: color 0.15s ease, transform 0.15s ease;
}
.acct-inbox:hover { color: var(--gold); transform: translateY(-1px); }
.acct-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 17px;
  padding: 1px 4px;
  border-radius: 9px;
  background: var(--bad);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  line-height: 15px;
}

/* --- kullanici mesaj kutusu --- */
.inbox { max-width: 900px; margin: 0 auto; padding: 4px 0 40px; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.inbox-head h1 { font-size: 20px; margin: 0; }
.inbox-acts { display: flex; gap: 8px; align-items: center; }
.inbox .sub, .admin .sub { margin: 26px 0 10px; font-size: 15px; color: var(--gold-soft); }

.msglist { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.msg {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.msg.unread { border-color: var(--gold-line); background: linear-gradient(180deg, var(--gold-dim), transparent); }
.msg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  flex-wrap: wrap;
}
.msg-head:hover { background: rgba(255, 255, 255, 0.02); }
.msg-title { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 140px; }
.msg-date { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.msg-from { color: var(--muted); font-size: 12px; }
.msg-kind {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.msg-kind.duyuru, .msg-kind.oneri { color: var(--gold-soft); border-color: var(--gold-line); }
.msg-kind.yanit { color: var(--good); border-color: rgba(108, 192, 138, 0.4); }
.msg-kind.sikayet { color: var(--bad); border-color: rgba(217, 104, 109, 0.4); }
.msg-body { display: none; padding: 0 14px 14px; font-size: 13.5px; line-height: 1.7; color: var(--text); }
.msg.open .msg-body { display: block; }
.msg-body p { margin: 0 0 10px; white-space: normal; }
.answer {
  border-left: 2px solid var(--gold-line);
  padding: 8px 0 2px 12px;
  margin-top: 10px;
  color: var(--text);
  font-size: 13px;
}
.answer.waiting { color: var(--muted); border-left-color: var(--line); font-style: italic; }
.ticket-reply { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.ticket-reply textarea { width: 100%; margin-bottom: 8px; }

/* --- form ogeleri --- */
.ticketform { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--panel); margin-top: 12px; }
textarea {
  width: 100%;
  background: var(--panel-2, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.6;
}
textarea:focus { outline: none; border-color: var(--gold-line); }
select[multiple] { min-height: 130px; padding: 6px; }
.fld.grow { flex: 1; }
/* `.fld { display:flex }` tarayicinin [hidden] kuralini ezdigi icin gizlenmesi
   gereken alanlar ekranda kaliyordu (duyuru ekranindaki kisi listesi gibi). */
.fld[hidden] { display: none; }
.note.tight { margin: 6px 0 12px; padding-left: 18px; }
.note.tight li { margin: 3px 0; }

/* --- panel ekleri --- */
.atab { position: relative; }
/* DIKKAT: `hidden` ozniteligi tarayicinin kendi display:none kuralindan gelir
   ve ASAGIDAKI .atab-badge kurali onu ezer — rozet bos bir kirmizi leke olarak
   gorunur. Bu yuzden hidden durumunu acikca yaziyoruz. */
.atab-badge[hidden] { display: none; }
.atab-badge {
  display: inline-block;
  min-width: 15px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--bad);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
}
.astat.warn b { color: var(--warn); }
.astat.ok b { color: var(--good); }
.admin-form.wide { max-width: 720px; }
.admin-search.small { max-width: 130px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip.on { background: var(--gold-dim); color: var(--gold-soft); border-color: var(--gold-line); }
.mini.gold { color: var(--gold-soft); border-color: var(--gold-line); }
.admin-tickets .msg-head { padding: 12px 14px; }

.excelgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.filepick { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
/* Gizli ama ERISILEBILIR: display:none olsaydi klavye ile secilemezdi */
.filepick input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filepick label { cursor: pointer; }
.filepick input[type='file']:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }
.filepick .filename { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.impbox { margin-top: 16px; border: 1px solid var(--gold-line); border-radius: 12px; padding: 16px; }
.impsum { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.atable tr.error td { opacity: 0.65; }
.atable tr.create td:first-child { border-left: 2px solid var(--good); }
.atable tr.update td:first-child { border-left: 2px solid var(--gold); }
.atable tr.error td:first-child { border-left: 2px solid var(--bad); }

@media (max-width: 640px) {
  .msg-head { gap: 7px; }
  .msg-title { min-width: 100%; order: 3; }
  .inbox-head { gap: 8px; }
}

/* ------------------------------ tanılama ------------------------------ */
.diagbox { margin-bottom: 22px; }
.diagbox .admin-bar { align-items: center; }
.diag-err {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.diag-err b { color: var(--bad); }
.tag.warn { color: var(--warn); border-color: rgba(217, 164, 65, 0.4); }
.tag.gold { color: var(--gold-soft); border-color: var(--gold-line); }

/* Rapor boşken "neden boş?" kutusu */
.pendingbox {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm);
  background: var(--gold-dim);
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
}
.pendingbox b { color: var(--gold-soft); }

/* Üst bar sağ blok: sekmeleri ortalamak için bu blok artık esneyebiliyor
   (flex: 1 1 0). Esnerken "canlı bağlantı açık" yazısı üç satıra bölünüyordu.
   Çözüm: yazılar sarmasın, daralması gerekirse ARAMA KUTUSU daralsın. */
.topbar-right .conn { white-space: nowrap; flex: 0 0 auto; }
.topbar-right .search { flex: 0 1 auto; min-width: 0; }
.topbar-right .search input { min-width: 0; max-width: 100%; }
.topbar-right .acct { flex: 0 0 auto; }

/* Sekmeler tam ortada dururken sağ blok daralıyor ve arama kutusu kırpılıyordu.
   1560px altında bağlantı YAZISI gizlenir, renkli nokta kalır (durum yine
   görünür, üstüne gelince yazı tooltip olarak okunur). Böylece arama kutusu
   tam genişliğini korur. */
@media (max-width: 1560px) {
  .topbar-right .conn #connText { display: none; }
  .topbar-right .conn { gap: 0; }
}

/* ------------------------- anahtar modu anahtarı ------------------------- */
.modebox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  background: var(--gold-dim);
  flex-wrap: wrap;
}
.modebox.off { border-color: rgba(108, 192, 138, 0.35); background: rgba(108, 192, 138, 0.07); }
.modebox-main { flex: 1; min-width: 240px; }
.modebox-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
.modebox .note i { color: var(--muted-2); }

/* aç/kapat anahtarı */
.switch {
  position: relative;
  width: 54px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.switch .switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s ease, background 0.18s ease;
}
.switch.on { background: linear-gradient(160deg, #f0dcae, #b8924a); border-color: var(--gold-line); }
.switch.on .switch-knob { transform: translateX(24px); background: #1a1508; }
.switch:disabled { opacity: 0.6; cursor: wait; }
.switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.ok-text { color: var(--good); }
.bad-text { color: var(--bad); }
.chips .chip small { opacity: .7; margin-left: 4px; }