/* ===== Football Alarm Web - mobil gorunum ===== */
.fb-app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  background-image: var(--fb-bg);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  padding-bottom: 84px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 0 30px rgba(0,0,0,.25);
}
.fb-app * { box-sizing: border-box; }
.fb-rtl { direction: rtl; }

/* Header banner */
.fb-header {
  height: 88px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  margin-bottom: 6px;
}
.fb-home-link {
  position: absolute;
  top: 8px; left: 10px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  color: #fff !important;
  border-radius: 50%;
  font-size: 20px;
  text-decoration: none;
}
.fb-screen-title {
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .5px;
  padding: 8px 12px;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.fb-body { padding: 8px 12px; }

/* ===== Ana menu (gate) ===== */
.fb-gate {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 4px 20px;
}
.fb-gate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 78px;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
  transition: transform .12s ease, filter .12s ease;
  overflow: hidden;
}
.fb-gate-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.fb-gate-btn span {
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .5px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.75);
  padding: 0 10px;
}

/* ===== Alt navigasyon ===== */
.fb-bottom-nav {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: rgba(10,20,10,.92);
  border-top: 2px solid #2e7d32;
}
.fb-bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px 10px;
  text-decoration: none;
  color: #fff;
}
.fb-bottom-nav img { width: 26px; height: 26px; object-fit: contain; }
.fb-bottom-nav span { font-size: 10px; font-weight: 700; text-align: center; line-height: 1.1; }

/* ===== Secim (dropdown) alani ===== */
.fb-selectors {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255,255,255,.9);
  padding: 16px;
  border-radius: 14px;
  margin-bottom: 14px;
}
.fb-select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid #2e7d32;
  font-size: 15px;
  background: #fff;
  color: #123;
}
.fb-continue {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 40px;
  background: linear-gradient(135deg, #43a047, #2e7d32);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .5px;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(0,0,0,.3);
}
.fb-continue:hover { filter: brightness(1.08); }

/* ===== Kartlar ===== */
.fb-list { display: flex; flex-direction: column; gap: 12px; }
.fb-card {
  background: rgba(255,255,255,.96);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,.28);
}
.fb-live-card { cursor: pointer; transition: transform .1s ease; }
.fb-live-card:hover { transform: translateY(-2px); }
.fb-card-league {
  background: #1565c0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  text-align: center;
}
.fb-card-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
}
.fb-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.fb-team img { width: 42px; height: 42px; object-fit: contain; }
.fb-team span { font-size: 13px; font-weight: 700; color: #123; }
.fb-center { text-align: center; min-width: 84px; }
.fb-elapsed { color: #f9a825; font-weight: 800; font-size: 13px; }
.fb-score { font-size: 24px; font-weight: 900; color: #111; }
.fb-result-score { color: #1b5e20; font-size: 22px; }
.fb-date { font-size: 12px; color: #444; }
.fb-status { font-size: 11px; color: #2e7d32; font-weight: 700; }
.fb-time { font-size: 22px; font-weight: 900; color: #f9a825; }
.fb-hour-label { font-size: 10px; color: #555; font-weight: 700; }
.fb-live-badge {
  display: inline-block;
  margin-top: 3px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
}

/* ===== Fikstur satiri + Alarm ===== */
.fb-fixture-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255,255,255,.96);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
.fb-fixture-teams { font-weight: 700; color: #123; font-size: 14px; }
.fb-fixture-date { font-size: 12px; color: #555; }
.fb-alarm-btn {
  border: none;
  background: linear-gradient(135deg, #fb8c00, #ef6c00);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 30px;
  cursor: pointer;
  white-space: nowrap;
}
.fb-alarm-btn.fb-alarm-set { background: #2e7d32; }

/* ===== Puan durumu tablosu ===== */
.fb-standings { background: rgba(255,255,255,.96); border-radius: 14px; padding: 8px; }
.fb-standings-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; font-weight: 800; color: #123;
}
.fb-standings-head img { width: 34px; height: 34px; object-fit: contain; }
.fb-standings-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.fb-standings-table th {
  background: #111; color: #fff; font-size: 12px; padding: 8px 4px; text-align: center;
}
.fb-standings-table td { font-size: 13px; padding: 8px 4px; text-align: center; color: #123; }
.fb-standings-table tbody tr:nth-child(even) { background: #f2f4f5; }
.fb-td-team { text-align: left !important; }
.fb-td-team img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.fb-rank { color: #f9a825; font-weight: 800; }
.fb-pts { font-weight: 900; color: #1b5e20; }

/* ===== Mac detayi ===== */
.fb-detail-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #1b5e20, #2e7d32);
  color: #fff;
  border-radius: 12px;
  padding: 16px 10px;
  margin-bottom: 12px;
}
.fb-detail-header .fb-team span { color: #fff; }
.fb-detail-header .fb-team img { width: 54px; height: 54px; }
.fb-detail-score { font-size: 34px; font-weight: 900; }
.fb-section-title {
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6);
  font-size: 16px; margin: 14px 0 8px; text-align: center;
}
.fb-stat {
  background: rgba(255,255,255,.96);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.fb-stat-top {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; color: #123; font-size: 14px; margin-bottom: 6px;
}
.fb-stat-label { font-size: 12px; color: #555; font-weight: 700; }
.fb-stat-bar { height: 8px; background: #1e88e5; border-radius: 6px; overflow: hidden; }
.fb-stat-bar-home { height: 100%; background: #e53935; }
.fb-events { display: flex; flex-direction: column; gap: 4px; }
.fb-event {
  background: rgba(255,255,255,.96);
  padding: 6px 12px; border-radius: 8px; font-size: 13px; color: #123;
}
.fb-event-away { text-align: right; }
.fb-event-red { border-left: 4px solid #e53935; }

/* ===== Modal ===== */
.fb-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 99999; padding: 20px 10px; overflow-y: auto;
}
.fb-modal[hidden] { display: none; }
.fb-modal-inner {
  width: 100%; max-width: 540px;
  background: linear-gradient(180deg, #0d3b16, #145223);
  border-radius: 16px; padding: 16px; position: relative;
}
.fb-modal-close {
  position: absolute; top: 8px; right: 12px;
  background: transparent; border: none; color: #fff; font-size: 28px; cursor: pointer;
}
.fb-modal-title { color: #fff; font-weight: 800; text-align: center; margin-bottom: 12px; }

/* ===== Yardimci ===== */
.fb-empty, .fb-loading {
  text-align: center; color: #fff; font-weight: 700;
  background: rgba(0,0,0,.4); padding: 18px; border-radius: 12px;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.fb-hint {
  text-align: center; color: #fff; font-size: 12px; margin-top: 6px;
  background: rgba(0,0,0,.35); padding: 8px; border-radius: 8px;
}

@media (max-width: 420px) {
  .fb-gate-btn span { font-size: 16px; }
  .fb-team span { font-size: 12px; }
  .fb-score { font-size: 20px; }
}