@charset "UTF-8";
:root {
  --cs-primary-color:#823ed3;
  --cs-secondary-color:#19183e;
  --cs-third-color:#4e70e7;
  /*Lineer Gradient*/
  --cs-pr-linear-gradient:linear-gradient(var(--cs-primary-color), var(--cs-third-color));
  --cs-pr-radial-gradient:radial-gradient(var(--cs-third-color), var(--cs-primary-color));
  --cs-max-width:1270px;
  /*System*/
  --bodyBg:#823ed3 !important;
  --navbarAccent:#823ed3 !important;
  --buttonG:var(--cs-pr-linear-gradient) !important ;
}

app-footer,
app-main {
  max-width: var(--cs-max-width);
}

/*Header*/
/*GlassMorph*/
/*Marquee*/
.marquee.area {
  width: 100%;
  overflow: hidden;
  /*position: fixed;*/
  bottom: 45px;
  z-index: 10;
  padding-top: 10px;
  padding-bottom: 50px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  margin-top: 10px;
}

.marquee p {
  display: inline-block;
  white-space: nowrap;
  position: absolute;
  will-change: transform;
  animation: marquee 10s linear infinite;
  font-size: 1.5em;
  color: #fff;
}

/*Marquee*/
/*GlassMorph*/
/*Homepage*/
/*Content Layout*/
.btn.btn-close {
  color: #ffffff !important;
}

.b-widget-promotion-content {
  display: none !important;
}

/*Content Layout*/
/*Homepage*/
/*SportBet*/
.ai_odd .ai_odd_stake {
  background: -webkit-linear-gradient(var(--cs-primary-color), var(--cs-third-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*SportBet*/
/*Sticky Nav*/
/*.m-bottom-nav*/
/*{*/
/*    background:var(--cs-secondary-color) !important;*/
/*}*/
.m-bottom-nav {
  background: rgba(40, 50, 98, 0.6); /* Seffaf arka plan */
  backdrop-filter: blur(5px); /* Bulaniklik efekti */
  -webkit-backdrop-filter: blur(5px); /* Safari destegi */
  border-radius: 20px !important;
  padding: 5px; /* Içerik boslugu */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Hafif beyaz kenarlik */
  min-height: 60px !important;
  box-shadow: 0px 0px 10px 5px var(--cs-primary-color) !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  bottom: 20px !important;
}

/* Nav item için stil */
.m-bottom-nav .item {
  color: #ffffff; /* Metin rengini beyaz yapalim */
  font-weight: 500; /* Yazi tipini biraz kalinlastiralim */
  text-align: center; /* Metinleri ortalayalim */
  padding: 10px 0; /* Üstten ve alttan bosluk verelim */
  transition: background-color 0.3s ease, color 0.3s ease; /* Hover için geçis efekti */
}

/* Hover durumu */
.m-bottom-nav .item:hover {
  background-color: rgba(130, 62, 211, 0.5); /* Hover sirasinda hafif mor ton */
  color: #ffffff; /* Metin rengini beyaz tutalim */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Ikonlar için stil */
.m-bottom-nav .item i {
  margin-bottom: 5px; /* Ikon ile metin arasinda bosluk */
}

/* Seçili olan ögeye (aktif duruma) stil ekleyelim */
.m-bottom-nav .item.active {
  background-color: rgba(130, 62, 211, 0.8); /* Seçili olan ögeye daha belirgin bir mor ton */
  border-radius: 10px;
  color: #ffffff;
}

/* Genel menü için yuvarlak kenarlik */
.m-bottom-nav {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.btn.btn-top.show {
  display: none !important;
}

/*Sticky Nav*/
/*Header*/
main {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--cs-max-width);
}

/*Popup*/
.modal .modal-dialog > .modal-content {
  background: var(--cs-pr-linear-gradient) !important;
  border-radius: 50px !important;
  border-bottom: 6px solid var(--cs-secondary-color) !important;
  border-top: 6px solid var(--cs-secondary-color) !important;
  border-left: 2px solid var(--cs-secondary-color) !important;
  border-right: 2px solid var(--cs-secondary-color) !important;
  box-shadow: 0 -2px 80px var(--cs-third-color) !important;
  padding: 4px;
}

.modal .modal-dialog .modal-content .modal-header {
  border-top-left-radius: 50px !important;
  border-top-right-radius: 50px !important;
  padding: 1.7rem !important;
}

.modal .modal-dialog .modal-content .modal-footer {
  border-bottom-left-radius: 50px !important;
  border-bottom-right-radius: 50px !important;
  padding: 1.5rem !important;
}

.modal .modal-dialog .modal-content .modal-body,
.modal .modal-dialog .modal-content .modal-header,
.modal .modal-dialog .modal-content .modal-footer {
  background: transparent !important;
}

.modal .modal-dialog .modal-content .modal-body h6,
.modal .modal-dialog .modal-content .modal-body h5,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label,
label {
  color: #ffffff !important;
}

/*Popup*/
@media only screen and (min-width: 1023px) {
  header .inner .top.d-flex {
    display: grid !important;
    grid-template-areas: "socialIcon logo userArea";
    justify-content: space-between !important;
    align-items: center !important;
    justify-items: center !important;
    align-content: center !important;
  }
  header .inner .top.d-flex .column:nth-child(1) {
    grid-area: logo;
    position: relative;
    left: 50%;
  }
  header .inner .top.d-flex .column:nth-child(2) {
    grid-area: socialIcon;
  }
  header .inner .top.d-flex .flex-grow-1.d-flex.justify-content-end {
    grid-area: userArea;
  }
  .b-bonus.main .b-bonus-box {
    max-width: 16.6666666667%;
  }
  .b-content .b-games app-live-casino-game:after {
    content: "";
    display: block;
    position: absolute;
    width: 90px;
    height: 20px;
    top: 1rem;
    right: 5px;
    background-image: url("https://d1gnrvs4hpyg5b.cloudfront.net/banners/114/5721cbb0-a1c8-4521-8819-dcd7dd436113.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    background-color: var(--cs-secondary-color);
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
  }
}
/*Telefon Tablet*/
@media only screen and (max-width: 992px) {
  /*Canvas*/
  #offcanvasNavbar {
    width: 260px !important;
    background: var(--cs-secondary-color) !important;
  }
  #offcanvasNavbar div.mobile-nav a:hover i,
  #offcanvasNavbar div.mobile-nav a.current i,
  #offcanvasNavbar div.mobile-nav a.active i {
    background: linear-gradient(var(--cs-primary-color), var(--cs-secondary-color)) !important;
  }
  #offcanvasNavbar div.mobile-nav a:hover,
  #offcanvasNavbar div.mobile-nav a.current,
  #offcanvasNavbar div.mobile-nav a.active {
    color: #ffffff !important;
    background-image: var(--cs-pr-radial-gradient) !important;
    box-shadow: 0px 0px 15px var(--cs-primary-color) !important;
  }
  #offcanvasNavbar div.mobile-nav a {
    transform: skew(-18deg, 0deg) !important;
  }
  #offcanvasNavbar div.mobile-nav a > * {
    transform: skew(18deg, 0deg) !important;
  }
  /*Canvas*/
  .col-sm-3 {
    width: 33.3333333%;
  }
  .row.row-cols-4.g-2.d-hide.btn-set-home.mb-2.home-buttons {
    display: none !important;
  }
  .b-games {
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }
  .b-games > * {
    width: calc(50% - 5px) !important;
  }
  div.b-widget div.b-content div.bw-game-item {
    height: auto;
  }
  .b-content .b-games app-live-casino-game:after {
    content: "";
    display: block;
    position: absolute;
    width: 70px;
    height: 17px;
    top: 1rem;
    right: 5px;
    background-image: url("https://d1gnrvs4hpyg5b.cloudfront.net/banners/114/5721cbb0-a1c8-4521-8819-dcd7dd436113.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    background-color: var(--cs-secondary-color);
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
  }
  .b-bonus.main .b-bonus-box {
    min-width: calc(33.3333333333% - 5px) !important;
  }
  /*Nav*/
  app-bottom-navbar .m-bottom-nav.sticky-bottom nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 4px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  app-bottom-navbar .m-bottom-nav.sticky-bottom nav a:nth-child(3) {
    background: var(--cs-pr-linear-gradient) !important;
    box-shadow: 0px -3px 14px -3px rgba(130, 62, 211, 0.8) !important;
    border-radius: 10px 10px 0px 0px !important;
    margin-bottom: 15px !important;
    transition: all 0.5s !important;
    color: rgb(255, 255, 255) !important;
  }
  /*Nav*/
  /*Footer*/
  app-footer footer .footer-inner .b-container .b-content .row .col-12.col-md-6 {
    display: grid;
    justify-items: center;
  }
  app-footer footer .footer-inner .b-container .b-content .row .col-12.col-md-6 .w-100 {
    width: auto !important;
  }
  app-footer footer .footer-inner .b-container .b-content .row .col-12.col-md-6:nth-child(2) .w-100 {
    width: auto !important;
  }
  app-footer footer .footer-inner .b-container .b-content .row .col-12.col-md-6:nth-child(2) .w-100 a {
    max-width: 80px !important;
  }
  app-footer footer .footer-inner .b-container .b-content .row .col-12.col-md-6:nth-child(2) .w-100 a.gamcare img {
    max-width: 50px !important;
  }
  app-footer footer .footer-inner .b-container .b-content:nth-child(2) .row .col-12.col-md-6 {
    display: grid;
    justify-items: center;
  }
  app-footer footer .footer-inner .b-container .b-content:nth-child(2) .w-100 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  app-footer footer .footer-inner .b-container .b-content:nth-child(2) .w-100 a {
    color: #ffffff;
  }
  app-footer footer .b-content .col-12.col-md-6 .btn:not(#bwgadgets):not([title="Beni Ara!"]):not(.btn-login):not(.btn-register),
  .btn:not(#bwgadgets):not([title="Beni Ara!"]):not(.btn-login):not(.btn-register) {
    background-image: unset !important;
  }
  /*Footer*/
  /*Footer Providers*/
  .footer-providers {
    overflow: unset !important;
  }
  .footer-providers ul {
    min-width: unset !important;
  }
  .footer-providers ul li {
    background-color: transparent !important;
    border-image: var(--cs-pr-linear-gradient) 1 !important;
    border: 2px solid;
    border-radius: 10px !important;
    margin: 2px;
  }
  /*Footer Providers*/
  /*Footer Last Text*/
  app-footer footer .b-content:nth-child(4) small {
    text-align: justify;
    text-align-last: center;
    display: block;
  }
  /*Footer Last Text*/
  /*Live Support*/
  #pagex div#chat-widget-container {
    bottom: 49px !important;
  }
  /*Live Support*/
  /*Kayit giris Modal*/
  .mdl-login.modal-dialog.modal-dialog-centered.modal-fullscreen-lg-down,
  .mdl-register.modal-dialog.modal-fullscreen-lg-down {
    max-width: 320px !important;
    max-height: 640px !important;
    min-height: unset !important;
    margin: 50px auto !important;
  }
  /*Kayit giris Modal*/
}
/*Jackpot*/
div.jackpots {
  border-color: var(--cs-third-color) !important;
  background: var(--cs-secondary-color) !important;
}

div.jackpots:hover {
  text-shadow: 0 0 10px var(--cs-third-color);
}

div.jackpots div.jackpot.mega div.inner span.title,
sub {
  color: var(--cs-third-color) !important;
}

/*Jackpot*/
header div.nav ul.nav-menu li a.current i.nav-icon {
  color: #ffffff;
}

header div.nav ul.nav-menu li a.current {
  transform: skew(0deg, 0deg);
  background-image: linear-gradient(to left, var(--cs-primary-color), var(--cs-third-color));
  color: #ffffff;
}

header div.nav ul.nav-menu li a.current > * {
  transform: skew(18deg, 0deg);
  background-image: linear-gradient(to left, var(--cs-primary-color), var(--cs-third-color));
  color: #ffffff;
}

header div.nav ul.nav-menu li {
  background-color: rgba(255, 255, 255, 0.07);
  /*border:1px solid var(--cs-primary-color);*/
  transform: skew(-18deg, 0deg);
  margin-left: 3px;
}

header div.nav ul.nav-menu li:hover {
  background-color: unset;
  background-image: linear-gradient(to left, var(--cs-primary-color), var(--cs-third-color));
  /*border:1px solid var(--cs-primary-color);*/
  transform: skew(-18deg, 0deg);
}

header div.nav ul.nav-menu li:hover a {
  color: rgb(255, 255, 255);
}

header div.nav ul.nav-menu li a:hover {
  background: unset;
}

header div.nav ul.nav-menu li a {
  transform: skew(18deg, 0deg);
}

html body,
header,
header div.nav,
footer {
  background: var(--cs-secondary-color);
}

.btn.btn-base,
header div.nav ul.nav-menu li a {
  color: #ffffff;
}

html body {
  background-image: url("https://d1gnrvs4hpyg5b.cloudfront.net/banners/114/89252138-67a7-4d47-8394-8938f59a2210.jpg");
  background-attachment: fixed;
  background-position: top center;
  background-size: cover;
}

.btn:not(#bwgadgets):not([title="Beni Ara!"]):not(.btn-login):not(.btn-register) {
  background-image: var(--cs-pr-linear-gradient) !important;
}

.btn.btn-register {
  background: unset !important;
}

.btn.btn-login,
.btn.btn-register {
  margin-right: 10px;
  padding-left: calc(0.5rem + 0.1vw) !important;
  padding-right: calc(0.5rem + 0.1vw) !important;
  font-weight: bold;
  color: #fff;
  position: relative;
  z-index: 1;
}

.b-visitor.ng-star-inserted .btn-register:before,
.b-visitor.ng-star-inserted .btn-login:before {
  content: "";
  display: block;
  background-image: var(--cs-pr-linear-gradient) !important;
  transform: skew(-18deg, 0deg);
  position: absolute;
  width: 100%;
  height: 100%;
  margin-right: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.btn-group-social .btn-base {
  border-radius: 100%;
}

app-live-casino-game {
  position: relative;
}

app-live-casino-game .bw-game-item {
  margin: 5px;
}

app-live-casino-game:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(to left, var(--cs-primary-color), var(--cs-third-color));
  position: absolute;
  top: 0px;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 10px;
}

#area1 .row .col-sm-3.col-md-2 {
  padding: 3px !important;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/*GlassMorph*/
header div.nav,
.modal .modal-dialog > .modal-content {
  position: relative;
  background: rgba(255, 255, 255, 0.1) !important; /* Cam efekti için yari saydam arka plan */
  border-radius: 20px; /* Yuvarlak köseler */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Hafif gölge */
  backdrop-filter: blur(10px); /* Bulaniklik efekti */
  -webkit-backdrop-filter: blur(10px); /* Safari destegi */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Hafif kenarlik */
}

header div.nav,
header div.nav:before {
  border-radius: 4px !important;
}

/* Arka plan rengini döngüde tutmak için */
header div.nav:before,
.modal .modal-dialog > .modal-content:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background: linear-gradient(45deg, rgba(130, 62, 211, 0.4), rgba(78, 112, 231, 0.4), rgba(25, 24, 62, 0.4));*/
  background: linear-gradient(45deg, rgba(130, 62, 211, 0.4), rgba(78, 112, 231, 0.4), rgba(130, 62, 211, 0.4)) !important;
  background-size: 300% 300% !important;
  z-index: -1; /* Içerigin arkasinda kalmasi için */
  border-radius: 20px; /* Köseleri ayni sekilde yuvarlat */
}

@media only screen and (min-width: 725px) {
  header div.nav:before,
  .modal .modal-dialog > .modal-content:before {
    animation: gradientAnimation 5s ease infinite; /* Renk döngüsü animasyonu */
  }
  header div.nav,
  .modal .modal-dialog > .modal-content {
    overflow: hidden;
  }
}
/* Arka plan renk geçisi animasyonu */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*GlassMorph*/
/* Label ilk hali */
.form-floating > .form-control ~ label,
.form-floating > .form-select ~ label {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  padding: 0 0.25rem;
  pointer-events: none;
  font-size: 1rem;
  transition: all 0.3s ease-in-out;
  color: rgba(255, 255, 255, 0.7); /* Label rengini görünür yapalim */
  background-color: transparent; /* Arka plani baslangiçta tamamen seffaf yapalim */
}

/* Focus veya içerik girildiginde label'in yukari kaymasi */
.form-control:focus ~ label,
.form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  top: 0;
  left: 0.75rem;
  transform: scale(0.85) translateY(-100%);
  background-color: transparent; /* Yaziyi kapatmayacak hafif seffaf arka plan */
  padding: 0 0.25rem;
  color: #fff; /* Focus oldugunda daha belirgin renk */
}

.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  transform: scale(0.85) translateY(-0.9rem) translateX(0.15rem) !important;
}

/* Form-control ayari */
.form-control,
.form-floating > .form-select {
  height: calc(1.5em + 1.5rem);
  padding: 0.375rem 0.75rem;
  background-color: rgba(40, 50, 98, 0.8);
  color: #fff;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus,
.form-floating > .form-select:focus {
  border-color: var(--cs-primary-color);
  box-shadow: 0 0 10px rgba(130, 62, 211, 0.5);
}