@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --wb-bg: #080909;
  --wb-surface: #121412;
  --wb-surface-2: #191c1a;
  --wb-border: #3b3525;
  --wb-gold: #d9a93a;
  --wb-gold-light: #f2ca63;
  --wb-text: #f5f5f5;
  --wb-muted: #a4a4a1;
}

html { scrollbar-width: thin; scrollbar-color: #8f712c #0b0d0b; }

html,
body,
body.app-body {
  min-height: 100%;
  color: var(--wb-text);
  font-family: Manrope, Inter, Arial, sans-serif !important;
  background-color: var(--wb-bg) !important;
  background-image:
    linear-gradient(90deg, rgba(8, 9, 9, .44), rgba(8, 9, 9, .26) 52%, rgba(8, 9, 9, .56)),
    url("https://woltbet679.com/uploads/3ca8ecde_Alt_n_Ta_l_Gizemli_Kumarhane_Arenas_1.png") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Sadece sitenin ana kaydırma alanı sayfa arka planını kapatmasın.
   Genel div seçicisi Radix popup portalını da seçtiği için kullanılmaz. */
body.app-body .flex-1.flex.flex-col.h-full.bg-transparent.overflow-y-auto {
  background-color: transparent !important;
}

::selection { background: var(--wb-gold-light); color: #111; }

@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: #0b0d0b; border-left: 1px solid rgba(217,169,58,.1); }
  ::-webkit-scrollbar-thumb {
    min-height: 48px;
    border: 3px solid #0b0d0b;
    border-radius: 999px;
    background: linear-gradient(#b28b32, #76591e);
  }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--wb-gold-light), var(--wb-gold)); }
}

/* HEADER */
header {
  background: rgba(8,9,9,.94) !important;
  border-bottom: 1px solid rgba(217,169,58,.2) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(242,202,99,.6), transparent);
}

@media (min-width: 1024px) {
  header .container { max-width: 1440px; padding-right: 28px; padding-left: 28px; }
  header .container > div { min-height: 74px; }
  header nav > nav > ul { gap: 4px !important; }
  header nav > nav > ul > li > a {
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 9px;
    color: #d8d8d8 !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
  }
  header nav > nav > ul > li > a:hover {
    border-color: rgba(242,202,99,.26) !important;
    background: rgba(217,169,58,.1);
    color: var(--wb-gold-light) !important;
  }
  header nav > nav > ul > li:first-child > a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 99px;
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444;
  }
}

/* OYUN KARTLARI */
main section.my-12 h3 { color: var(--wb-text) !important; font-weight: 800 !important; }
main section.my-12 h3 [class~="bg-purple-500"] {
  background: linear-gradient(var(--wb-gold-light), var(--wb-gold)) !important;
  box-shadow: 0 0 14px rgba(217,169,58,.45);
}
main section.my-12 h3 + a:hover { color: var(--wb-gold-light) !important; }
main a.group[href*="/casino/game/"] { gap: 9px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
main a.group[href*="/casino/game/"] > div:first-child {
  border: 1px solid rgba(217,169,58,.22) !important;
  border-radius: 12px !important;
  background: var(--wb-surface) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.26);
}
main a.group[href*="/casino/game/"]:hover > div:first-child {
  border-color: rgba(242,202,99,.72) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.4), 0 0 0 3px rgba(217,169,58,.08);
  transform: translateY(-4px);
}
main a.group[href*="/casino/game/"] > div:first-child > div:last-child { background: rgba(8,9,9,.62) !important; backdrop-filter: blur(3px); }
main a.group[href*="/casino/game/"] button {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(255,237,178,.58) !important;
  background: linear-gradient(135deg, var(--wb-gold-light), var(--wb-gold)) !important;
  color: #111 !important;
}
main a.group[href*="/casino/game/"] > div:last-child > p:first-child { color: #f1f1ec !important; font-size: 12px !important; font-weight: 800 !important; }
main a.group[href*="/casino/game/"] > div:last-child > p:last-child { color: #c5b784 !important; font-size: 9px !important; font-weight: 700; letter-spacing: .08em; }

/* FOOTER */
footer {
  border-top: 1px solid rgba(217,169,58,.35) !important;
  background: linear-gradient(rgba(8,9,9,.58), rgba(4,4,4,.8)) !important;
}
footer::before {
  content: "";
  display: block;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--wb-gold), transparent);
}
.wolt-footer-intro { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin-bottom: 38px; padding: 0 0 26px; border-bottom: 1px solid rgba(217,169,58,.18); }
.wolt-footer-brand { display: flex; align-items: center; gap: 15px; }
.wolt-footer-brand img { width: auto; max-width: 180px; height: 48px; object-fit: contain; }
.wolt-footer-brand strong { display: block; color: var(--wb-gold-light); font-size: 14px; font-weight: 800; letter-spacing: .035em; }
.wolt-footer-brand p { max-width: 490px; margin: 4px 0 0; color: var(--wb-muted); font-size: 12px; line-height: 1.6; }
footer a.wolt-footer-cta {
  flex: 0 0 auto;
  padding: 11px 16px;
  border: 1px solid rgba(255,237,178,.42);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--wb-gold-light), var(--wb-gold));
  color: #111 !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: none;
}
footer a.wolt-footer-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
footer h4 { margin-bottom: 16px !important; color: var(--wb-text) !important; font-size: 13px; font-weight: 800 !important; letter-spacing: .03em; }
footer h4 > span.text-xl { display: none; }
footer h4::after { content: ""; display: block; width: 26px; height: 2px; margin-top: 9px; border-radius: 99px; background: var(--wb-gold); }
footer [data-wolt-footer-col] > nav:not(.wolt-footer-links) { display: none !important; }
footer .wolt-footer-links { display: block !important; }
footer .wolt-footer-links ul { display: grid; gap: 7px; margin: 0; padding: 0; }
footer .wolt-footer-links a { color: #c0c1bc !important; font-size: 13px !important; line-height: 1.45; text-decoration: none; }
footer .wolt-footer-links a:hover { color: var(--wb-gold-light) !important; }
footer [class*="border-t"] { border-color: rgba(217,169,58,.18) !important; }
footer .w-12.h-12.rounded-xl { border: 1px solid rgba(217,169,58,.22); background: rgba(217,169,58,.1) !important; }
footer .w-12.h-12.rounded-xl svg { color: var(--wb-gold-light) !important; }
footer p.text-gray-500.text-xs.text-center.md\:text-left { font-size: 14px !important; line-height: 1.5; }
footer .flex.flex-wrap.items-center.justify-center.md\:justify-end.gap-3.text-gray-500.text-xs { gap: 12px !important; font-size: 14px !important; line-height: 1.5; }
footer a[href*="verify.pagcorlicense"] img { height: 48px !important; }
footer span.bg-red-600 { padding: 4px 10px !important; font-size: 13px !important; border-radius: 6px !important; }

/* CANLI DESTEK */
button[title="Bahis Öner"] { display: none !important; }
[data-wolt-support-toggle] {
  width: 104px !important;
  height: 104px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("https://woltbet679.com/uploads/5b565c7b_Woltbet_Canl_Destek_Rozeti_1.png") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
[data-wolt-support-toggle] svg { display: none !important; }
[data-wolt-support-toggle]:hover { filter: drop-shadow(0 14px 24px rgba(217,169,58,.4)); }
[data-wolt-live-support-panel] { border: 1px solid rgba(217,169,58,.42) !important; border-radius: 18px !important; background: #101211 !important; box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 4px rgba(217,169,58,.08) !important; }
[data-wolt-live-support-panel] > div:first-child { border-bottom: 1px solid rgba(242,202,99,.24); background: linear-gradient(135deg, #2a2414, #141611) !important; }
[data-wolt-live-support-panel] > div:first-child .w-10.h-10 { border: 1px solid rgba(255,237,178,.55); background: linear-gradient(135deg, var(--wb-gold-light), var(--wb-gold)) !important; }
[data-wolt-live-support-panel] > div:first-child .w-10.h-10 svg { color: #111 !important; }
[data-wolt-live-support-panel] > .flex-1, [data-wolt-live-support-panel] > .p-4.border-t { background: #101211 !important; }
[data-wolt-live-support-panel] > .p-4.border-t { border-color: rgba(217,169,58,.24) !important; }
[data-wolt-live-support-panel] h4 { color: var(--wb-text) !important; }
[data-wolt-live-support-panel] p.text-gray-500 { color: var(--wb-muted) !important; }
[data-wolt-live-support-panel] input { border-color: var(--wb-border) !important; background: #171a17 !important; color: var(--wb-text) !important; }
[data-wolt-live-support-panel] input::placeholder { color: #737571 !important; }
[data-wolt-live-support-panel] .bg-amber-50 { border-color: rgba(217,169,58,.28) !important; background: rgba(217,169,58,.1) !important; }
[data-wolt-live-support-panel] .bg-amber-50 p { color: var(--wb-gold-light) !important; font-weight: 700; }
[data-wolt-live-support-panel] button[title] { color: #a8aaa8 !important; }
[data-wolt-live-support-panel] button[title]:hover { background: rgba(217,169,58,.12) !important; color: var(--wb-gold-light) !important; }
[data-wolt-live-support-panel] > .flex-1 button, [data-wolt-live-support-panel] > .p-4.border-t button:last-child { border: 1px solid rgba(255,237,178,.45) !important; background: linear-gradient(135deg, var(--wb-gold-light), var(--wb-gold)) !important; color: #111 !important; font-weight: 800 !important; }

/* PRELOADER */
#wolt-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #080909;
  background-image:
    radial-gradient(circle at 50% 44%, rgba(217,169,58,.16), transparent 28%),
    linear-gradient(90deg, rgba(8,9,9,.76), rgba(8,9,9,.62), rgba(8,9,9,.8)),
    url("https://woltbet679.com/uploads/3ca8ecde_Alt_n_Ta_l_Gizemli_Kumarhane_Arenas_1.png");
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-size: auto, cover, cover;
  opacity: 1;
  visibility: visible;
  transition: opacity .42s ease, visibility .42s ease;
}
#wolt-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.wolt-preloader-card { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.wolt-preloader-logo { width: min(230px, 66vw); height: auto; filter: drop-shadow(0 0 12px rgba(242,202,99,.38)) drop-shadow(0 14px 28px rgba(0,0,0,.55)); animation: wolt-logo-pulse 1.5s ease-in-out infinite; }
.wolt-preloader-loader { width: 164px; height: 4px; overflow: hidden; border: 1px solid rgba(242,202,99,.25); border-radius: 999px; background: rgba(255,255,255,.07); }
.wolt-preloader-loader::after { content: ""; display: block; width: 48%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b98a22, #f5d36c, #b98a22); box-shadow: 0 0 14px rgba(242,202,99,.7); animation: wolt-loader-move 1.05s ease-in-out infinite; }
.wolt-preloader-text { color: #d8d8d8; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
@keyframes wolt-loader-move { from { transform: translateX(-110%); } to { transform: translateX(230%); } }
@keyframes wolt-logo-pulse { 0%, 100% { transform: scale(1); opacity: .88; } 50% { transform: scale(1.035); opacity: 1; } }

@media (max-width: 767px) {
  html, body, body.app-body {
    background-image: linear-gradient(180deg, rgba(8,9,9,.34), rgba(8,9,9,.62)), url("https://woltbet679.com/uploads/99b5a2f6_Mistik_Alt_n_Krall_n_Gece_Arenas_1.png") !important;
    background-position: center top !important;
    background-attachment: scroll !important;
  }
  .wolt-footer-intro { align-items: flex-start; flex-direction: column; }
  .wolt-footer-brand img { max-width: 155px; height: 42px; }
  footer a.wolt-footer-cta { width: 100%; text-align: center; }
  footer p.text-gray-500.text-xs.text-center.md\:text-left, footer .flex.flex-wrap.items-center.justify-center.md\:justify-end.gap-3.text-gray-500.text-xs { font-size: 13px !important; }
  footer a[href*="verify.pagcorlicense"] img { height: 44px !important; }
  [data-wolt-support-toggle] { width: 104px !important; height: 104px !important; }
  [data-wolt-live-support-panel] { border-radius: 0 !important; }
  #wolt-preloader {
    background-image:
      radial-gradient(circle at 50% 44%, rgba(217,169,58,.14), transparent 30%),
      linear-gradient(180deg, rgba(8,9,9,.68), rgba(8,9,9,.82)),
      url("https://woltbet679.com/uploads/99b5a2f6_Mistik_Alt_n_Krall_n_Gece_Arenas_1.png");
    background-position: center, center, center top;
  }
}

@media (min-width: 768px) {
  [data-wolt-support-toggle] { width: 126px !important; height: 126px !important; }
}

/* KULLANICI PANELI: ana sayfa arka planından bağımsız, opak koyu panel. */
[role="dialog"].md\:flex-row {
  background: #151817 !important;
}

[role="dialog"].md\:flex-row > .md\:w-\[260px\] {
  background: #101210 !important;
  border-color: rgba(217,169,58,.2) !important;
}

[role="dialog"].md\:flex-row > .md\:flex,
[role="dialog"].md\:flex-row .bg-\[\#1a1a1a\] {
  background-color: #151817 !important;
}

[role="dialog"].md\:flex-row .bg-\[\#111\] {
  background-color: #101210 !important;
}

@media (max-width: 767px) {
  [role="dialog"].md\:flex-row {
    background: #151817 !important;
  }
}

/* Son güvence: Radix popup katmanı hiçbir sayfada şeffaf kalmasın. */
div[role="dialog"][data-state="open"] {
  opacity: 1 !important;
  background: #151817 !important;
  background-image: none !important;
}

div[role="dialog"][data-state="open"] > div:first-of-type {
  background: #101210 !important;
}

div[role="dialog"][data-state="open"] > div:last-of-type {
  background: #151817 !important;
}

/* SPONSORLARIMIZ */
[data-wolt-sponsors] {
  position: relative;
  margin-top: 2.75rem !important;
  margin-bottom: 2.75rem !important;
  padding: 24px 18px 18px !important;
  overflow: hidden;
  border: 1px solid rgba(217,169,58,.2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(217,169,58,.15), transparent 31%),
    linear-gradient(135deg, rgba(20,22,19,.94), rgba(8,9,8,.9));
  box-shadow: 0 22px 50px rgba(0,0,0,.22);
}

[data-wolt-sponsors]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wb-gold-light), transparent);
}

.wolt-sponsors-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
}

.wolt-sponsors-heading h2 {
  margin: 0;
  color: var(--wb-text);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -.03em;
}

.wolt-sponsors-heading h2 span { color: var(--wb-gold-light); }
.wolt-sponsors-heading p { margin: 0; color: var(--wb-muted); font-size: 12px; font-weight: 600; }
[data-wolt-sponsors] > .flex { position: relative; }
[data-wolt-sponsor-card] { margin-bottom: 0 !important; }

[data-wolt-sponsor-card] > div {
  min-height: 132px !important;
}

[data-wolt-sponsor-card] > div > div {
  min-height: 132px !important;
  border: 1px solid rgba(217,169,58,.28);
  border-radius: 14px !important;
  background: #0c0e0c;
  box-shadow: 0 12px 26px rgba(0,0,0,.34);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

[data-wolt-sponsor-card] > div > div::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(242,202,99,.2), transparent 34%, rgba(0,0,0,.18));
  opacity: .55;
  transition: opacity .35s ease;
}

[data-wolt-sponsor-card] img { filter: saturate(.92) contrast(1.04); transition: transform .55s ease, filter .35s ease !important; }
[data-wolt-sponsor-card]:hover > div > div { z-index: 2; border-color: rgba(242,202,99,.85); box-shadow: 0 22px 42px rgba(0,0,0,.48), 0 0 0 4px rgba(217,169,58,.1); transform: translateY(-8px); }
[data-wolt-sponsor-card]:hover img { filter: saturate(1.14) contrast(1.08) brightness(1.08); transform: scale(1.09) !important; }
[data-wolt-sponsor-card]:hover > div > div::after { opacity: .08; }

@media (max-width: 767px) {
  [data-wolt-sponsors] { margin-top: 2rem !important; margin-bottom: 2rem !important; padding: 18px 8px 8px !important; border-radius: 16px; }
  .wolt-sponsors-heading { align-items: flex-start; flex-direction: column; gap: 5px; padding: 0 8px; margin-bottom: 16px; }
  [data-wolt-sponsors] > .flex { margin-right: -6px; margin-left: -6px; }
  [data-wolt-sponsor-card] { width: 50% !important; padding-right: 6px !important; padding-left: 6px !important; margin-bottom: 12px !important; }
  [data-wolt-sponsor-card] > div { min-height: 92px !important; }
  [data-wolt-sponsor-card] > div > div { min-height: 92px !important; border-radius: 11px !important; }
  [data-wolt-sponsor-card]:hover > div > div { transform: translateY(-4px); }
}

/* JS çalışmasa bile sponsor görsellerinin ölçüsünü zorla. */
section.my-12:has(img[src*="bfc85dcf_"]) .min-h-\[200px\] {
  height: 132px !important;
  min-height: 132px !important;
}

section.my-12:has(img[src*="bfc85dcf_"]) .min-h-\[200px\] > div {
  height: 132px !important;
  min-height: 132px !important;
}

/* Sponsor armaları kırpılmadan, tamamı görünür olsun. */
section.my-12:has(img[src*="bfc85dcf_"]) img[alt="Banner"] {
  padding: 3px !important;
  object-fit: contain !important;
  background: radial-gradient(circle, rgba(217,169,58,.08), transparent 68%);
}

section.my-12:has(img[src*="bfc85dcf_"]) [data-wolt-sponsor-card]:hover img,
section.my-12:has(img[src*="bfc85dcf_"]) .group:hover img[alt="Banner"] {
  transform: scale(1.04) !important;
}

@media (max-width: 767px) {
  section.my-12:has(img[src*="bfc85dcf_"]) .min-h-\[200px\],
  section.my-12:has(img[src*="bfc85dcf_"]) .min-h-\[200px\] > div {
    height: 92px !important;
    min-height: 92px !important;
  }
  section.my-12:has(img[src*="bfc85dcf_"]) img[alt="Banner"] { padding: 2px !important; }
}