/* =========================================================================
   Royalpera bonus paneli — marka katmanı (Luxor theme-cmt.css'in yerine yüklenir).
   Dil: royalpera181.com — lacivert zeminler, düz kartlar, 4–8px köşe, mavi tek vurgu,
   Plus Jakarta Sans, altın yalnız küçük işaretlerde. Görsel banner yok: kartlar HTML/CSS.
   ========================================================================= */
:root {
  --rp-bg: #0E202D;
  --rp-surface: #172b39;
  --rp-layer: #1c3140;
  --rp-switch: #243847;
  --rp-switch-active: #2c4252;
  --rp-border: rgba(236, 243, 249, 0.08);
  --rp-text: #ecf3f9;
  --rp-muted: #A1BFD6;
  --rp-blue: #1475E1;
  --rp-blue-hover: #2a86ee;
  --rp-blue-soft: rgba(20, 117, 225, 0.14);
  --rp-ghost: #3e586c;
  --rp-ghost-hover: #4a667c;
  --rp-gold: #ecb801;
}

html, body {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body {
  color: var(--rp-text) !important;
  background: var(--rp-bg) !important;
  background-image: radial-gradient(1200px 520px at 50% -180px, rgba(20, 117, 225, 0.16), transparent 70%) !important;
  background-attachment: fixed !important;
}

/* Başlık ikonları ve bölüm başlıkları: sitenin "Sana Özel Oyunlar" başlığı gibi sade */
main h2 { font-weight: 700 !important; letter-spacing: -0.01em; }
main h2 .material-symbols-outlined { color: var(--rp-muted) !important; font-size: 22px; }

/* Kart ve paneller: düz yüzey, ince sınır, gölge az */
.luxury-card {
  background-color: var(--rp-surface) !important;
  border: 1px solid var(--rp-border) !important;
  border-top: 1px solid var(--rp-border) !important;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6) !important;
}
.glass-panel {
  background: var(--rp-surface) !important;
  border: 1px solid var(--rp-border) !important;
}
.bonus-card-hero { border-radius: 8px !important; }

/* ---- Kart alt çubuğu ve butonlar (sitedeki Giriş Yap / Kayıt Ol butonları) ---- */
.bonus-card-hero__bar {
  background: var(--rp-surface) !important;
  border-top: 1px solid var(--rp-border) !important;
}
.btn-hero {
  border-radius: 4px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.btn-hero-primary, .btn-primary {
  background: var(--rp-blue) !important;
  color: #fff !important;
  border: none !important;
}
.btn-hero-primary:hover:not(:disabled), .btn-primary:hover:not(:disabled) { background: var(--rp-blue-hover) !important; }
.btn-hero-ghost, .btn-ghost {
  background: var(--rp-ghost) !important;
  color: #fff !important;
  border: none !important;
}
.btn-hero-ghost:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { background: var(--rp-ghost-hover) !important; }
.bonus-card-hero--soon .btn-hero:disabled,
.bonus-card-hero--soon .btn-hero-primary:disabled,
.bonus-card-hero--soon .btn-hero-ghost:disabled {
  background: var(--rp-switch) !important;
  color: rgba(236, 243, 249, 0.4) !important;
}

/* =========================================================================
   Kart görseli (banner yerine) — .rp-hero
   ========================================================================= */
.rp-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 573;
  overflow: hidden;
  isolation: isolate;
  padding: 5.5% 7%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(20, 117, 225, 0.55) 0%, rgba(20, 117, 225, 0) 55%),
    linear-gradient(135deg, #1a4f86 0%, #123a63 38%, #0E202D 100%);
}
.bonus-card-hero__figure { container-type: inline-size; }
/* ince elmas ızgara: sitedeki casino/spor görsellerinin parlak dokusuna gönderme */
.rp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.18;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}
.rp-hero__chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(14, 32, 45, 0.55);
  border: 1px solid rgba(236, 243, 249, 0.14);
  font-size: clamp(10px, 3.4cqi, 12px);
  font-weight: 700;
  color: var(--rp-text);
  margin-bottom: 3%;
  white-space: nowrap;
}
.rp-hero__chip::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rp-gold);
  box-shadow: 0 0 8px rgba(236, 184, 1, 0.8);
}
.rp-hero__value {
  font-size: clamp(28px, 14.5cqi, 58px);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 0%, #bfe0ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  max-width: 64%;
}
.rp-hero__value--sm { font-size: clamp(20px, 9cqi, 34px); letter-spacing: -0.02em; }
.rp-hero__title {
  margin-top: 2%;
  font-size: clamp(13px, 5.2cqi, 21px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 64%;
}
.rp-hero__sub {
  margin-top: 3%;
  font-size: clamp(11px, 3.7cqi, 14px);
  font-weight: 500;
  color: rgba(236, 243, 249, 0.78);
  line-height: 1.35;
  max-width: 58%;
}
/* sağdaki büyük ikon rozeti */
.rp-hero__badge {
  position: absolute;
  right: 5.5%;
  top: 50%;
  transform: translateY(-50%);
  width: 29%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.28), rgba(255,255,255,0) 45%),
    linear-gradient(160deg, #2b8cf5 0%, #1475E1 45%, #0b4f9e 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.25),
    inset 0 -6px 14px rgba(0,0,0,0.25),
    0 18px 40px -12px rgba(20, 117, 225, 0.75);
}
.rp-hero__badge::after {
  content: '';
  position: absolute;
  inset: -9%;
  border-radius: 50%;
  border: 1px solid rgba(140, 194, 255, 0.28);
}
.rp-hero__badge .material-symbols-outlined {
  font-size: clamp(30px, 14cqi, 60px) !important;
  color: #fff;
  font-variation-settings: 'FILL' 1, 'wght' 600;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}
/* kart çeşitleri: ton farkı az, aile aynı */
.rp-hero--altin .rp-hero__badge {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0) 45%),
    linear-gradient(160deg, #ffd54d 0%, #ecb801 50%, #a87f00 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -6px 14px rgba(0,0,0,0.2), 0 18px 40px -12px rgba(236, 184, 1, 0.6);
}
.rp-hero--altin .rp-hero__badge .material-symbols-outlined { color: #2a1f00; filter: none; }
.rp-hero--koyu {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(20, 117, 225, 0.38) 0%, rgba(20, 117, 225, 0) 55%),
    linear-gradient(135deg, #1c3140 0%, #172b39 45%, #0E202D 100%);
}

/* dar kart (mobilde 2 sütun): yalnız değer + başlık, rozet sağ üstte küçük */
@container (max-width: 280px) {
  .rp-hero { padding: 8% 8% 7%; justify-content: flex-end; }
  .rp-hero__chip, .rp-hero__sub { display: none; }
  .rp-hero__badge { width: 27%; top: 10%; right: 7%; transform: none; }
  .rp-hero__badge::after { display: none; }
  .rp-hero__badge .material-symbols-outlined { font-size: 22px !important; }
  .rp-hero__value { font-size: 27px; max-width: 72%; white-space: nowrap; }
  .rp-hero__value--sm { font-size: 17px; }
  .rp-hero__title { font-size: 11.5px; max-width: 100%; margin-top: 3px; }
}

/* ---- Kart sırası (müşteri yolculuğu): deneme → yatırım → kayıp → salla kazan; kapalılar sonda ---- */
.bonus-cards-grid > #denemeBonusCard { order: 1; }
.bonus-cards-grid > #yatirimBonusCard { order: 2; }
.bonus-cards-grid > .bonus-card-hero:not([id]) { order: 3; }   /* kayıp kartının id'si yok */
.bonus-cards-grid > #shakeWinCard { order: 4; }
.bonus-cards-grid > #sokBonusCard { order: 5; }
.bonus-cards-grid > #ozelYatirimBonusCard { order: 6; }

/* ---- Logo ---- */
.rp-logo { height: 44px; width: auto; }
@media (min-width: 768px) { .rp-logo { height: 58px; } }

/* ---- Geçmiş tablosu ---- */
.history-table thead, .bg-surface-container-low { background-color: var(--rp-layer) !important; }
.history-status span { border-radius: 4px !important; }

/* ---- Modallar: sitenin kart yüzeyi ---- */
[role="dialog"] .luxury-card, .modal-scroll { scrollbar-color: rgba(161,191,214,0.3) transparent; }