/* /bonuslar: otomatik dönen bonus slider'ı + bonus kartları */
.bnp {
  max-width: 1180px;
  margin: 24px auto 0;
  padding: 0 16px 32px;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.85);
}
.bnp-title {
  margin: 0 0 16px;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bnp-slider {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 3.4 / 1;
  min-height: 220px;
  background: #010028;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.bnp-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 64px;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s;
}
.bnp-slide.is-on { opacity: 1; visibility: visible; }
.bnp-slide.has-img { background-position: right center; }
.bnp-slide.has-img .bnp-slide__pct { display: none; }
.bnp-card__head.has-img { background-position: right center; justify-content: flex-start; padding-left: 18px; }
.bnp-slide__in { max-width: 62%; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bnp-badge {
  background: #ff0f50;
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.5px;
  border-radius: 999px;
  padding: 5px 12px;
}
.bnp-slide__t { margin: 0; color: #fff; font-size: 32px; font-weight: 900; line-height: 1.12; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45); }
.bnp-slide__s { margin: 0; color: #dfe6ff; font-size: 15px; line-height: 1.45; }
.bnp-slide__pct {
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 900;
  color: #fff;
  opacity: 0.92;
  line-height: 1;
  text-shadow: 0 6px 30px rgba(255, 15, 80, 0.55);
  white-space: nowrap;
}
.bnp-cta {
  border: 0;
  cursor: pointer;
  background: #ff0f50;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  border-radius: 10px;
  padding: 11px 20px;
  transition: filter 0.15s, transform 0.15s;
}
.bnp-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.bnp-cta--full { width: 100%; margin-top: auto; }
.bnp-arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  z-index: 2;
}
.bnp-arr:hover { background: rgba(0, 0, 0, 0.55); }
.bnp-arr--l { left: 12px; }
.bnp-arr--r { right: 12px; }
.bnp-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 2; }
.bnp-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.35); }
.bnp-dots button.is-on { background: #fff; width: 22px; border-radius: 5px; }

.bnp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.bnp-card {
  background: #0a173a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bnp-card__head {
  height: 120px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.bnp-card__pct { color: #fff; font-size: 46px; font-weight: 900; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); }
.bnp-card__lab { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 2px; opacity: 0.9; }
.bnp-card__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bnp-card__body h3 { margin: 0; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.3; }
.bnp-card__sub { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.bnp-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bnp-facts li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}
.bnp-facts span { color: rgba(255, 255, 255, 0.6); }
.bnp-facts b { color: #fff; text-align: right; }
.bnp-facts b.bnp-ok { color: #3ee08f; }
.bnp-desc { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); white-space: pre-line; overflow-wrap: anywhere; }
.bnp-card__body h3, .bnp-card__sub, .bnp-slide__t, .bnp-slide__s { overflow-wrap: anywhere; }
.bnp-facts span { flex: none; }
.bnp-facts b { min-width: 0; overflow-wrap: anywhere; }

.bnp-how {
  margin-top: 24px;
  background: #0a173a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
}
.bnp-how h2 { margin: 0 0 12px; color: #fff; font-size: 18px; font-weight: 800; }
.bnp-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bnp-how li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.bnp-how li b {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: #ff0f50;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.bnp-empty {
  background: #0a173a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 40px 20px;
  text-align: center;
  font-size: 15px;
}

@media (max-width: 900px) {
  .bnp-slide { padding: 24px 52px; }
  .bnp-slide__t { font-size: 24px; }
  .bnp-how ol { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bnp { margin-top: 14px; padding: 0 10px 90px; }
  .bnp-title { font-size: 21px; }
  .bnp-slider { aspect-ratio: auto; min-height: 250px; border-radius: 12px; }
  .bnp-slide { padding: 20px 18px 34px; align-items: flex-end; }
  .bnp-slide__in { max-width: 100%; position: relative; z-index: 1; }
  .bnp-slide__t { font-size: 21px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .bnp-slide__s { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .bnp-cta { padding: 10px 16px; font-size: 13px; }
  .bnp-card__head { height: 100px; }
  .bnp-card__pct { font-size: 40px; }
  .bnp-card__body { padding: 14px; }
  .bnp-how { padding: 14px; }
  .bnp-facts li { font-size: 12px; padding: 7px 9px; }
  .bnp-slide__pct { position: absolute; top: 14px; right: 16px; font-size: 54px; opacity: 0.35; }
  .bnp-slide.has-img { background-position: 72% center; }
  .bnp-slide.has-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(1, 0, 40, 0.94) 0%, rgba(1, 0, 40, 0.6) 50%, rgba(1, 0, 40, 0) 100%); }
  .bnp-arr { display: none; }
  .bnp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .bnp-slide { padding: 18px 14px 32px; }
  .bnp-slide__t { font-size: 18px; }
  .bnp-slide__pct { font-size: 44px; }
  .bnp-title { font-size: 19px; }
}