/* Sitenin genel arkaplan rengi */
body,
html {
background-color: #0e0e0e !important;
}
* {
font-family: 'DM Sans', sans-serif !important;
}
/* Sidebar ana container için oval kenarlar ve margin */
.sidebar {
border-radius: 20px !important;
border-top-right-radius: 0px !important;
margin: 15px !important;
overflow: hidden !important;
background-color: #090909 !important;
border: 1px solid #363535 !important;
}
.sidebar__nav li a {
font-weight: 600 !important;
}
.sidebar__big {
background-color: #090909 !important;
padding: 15px !important;
}
.sidebar__small {
background-color: #090909 !important;
}
.sidebar__btn {
background-color: #090909 !important;
border-radius: 8px !important;
border: 0.5px solid rgba(255, 255, 255, 0.6) !important;
transform: scale(0.9) !important;
}
.sidebar__nav--border{
border-bottom: 1px solid #2d2d2d !important;
}
/* Menü sırası: .sidebar__menu içindeki ilk ul > li; dar görünüm .sidebar__small altında da aynı */
.sidebar__menu > ul:first-of-type,
.sidebar__small .sidebar__menu > ul:first-of-type {
display: flex !important;
flex-direction: column !important;
}
.sidebar__menu > ul:first-of-type > li,
.sidebar__small .sidebar__menu > ul:first-of-type > li {
order: 10 !important;
}
.sidebar__menu > ul:first-of-type > li:has(> a[href$="/en"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href$="/en/"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href$="/tr"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href$="/tr/"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href$="/en"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href$="/en/"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href$="/tr"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href$="/tr/"]) {
order: 1 !important;
}
/* Sadece casino hub (son segment /casino); /en/casino/group/lobby gibi alt yollar dahil değil */
.sidebar__menu > ul:first-of-type > li:has(> a[href$="/en/casino"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href$="/en/casino/"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href$="/tr/casino"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href$="/tr/casino/"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href*="/en/casino?"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href*="/tr/casino?"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href*="/en/casino/?"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href*="/tr/casino/?"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href*="/en/casino#"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href*="/tr/casino#"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href$="/en/casino"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href$="/en/casino/"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href$="/tr/casino"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href$="/tr/casino/"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href*="/en/casino?"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href*="/tr/casino?"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href*="/en/casino/?"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href*="/tr/casino/?"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href*="/en/casino#"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href*="/tr/casino#"]) {
order: 2 !important;
}
/* Sportsbook hub; alt yollar aynı mantıkla hariç */
.sidebar__menu > ul:first-of-type > li:has(> a[href$="/en/sportsbook"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href$="/en/sportsbook/"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href$="/tr/sportsbook"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href$="/tr/sportsbook/"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href*="/en/sportsbook?"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href*="/tr/sportsbook?"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href*="/en/sportsbook/?"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href*="/tr/sportsbook/?"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href*="/en/sportsbook#"]),
.sidebar__menu > ul:first-of-type > li:has(> a[href*="/tr/sportsbook#"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href$="/en/sportsbook"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href$="/en/sportsbook/"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href$="/tr/sportsbook"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href$="/tr/sportsbook/"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href*="/en/sportsbook?"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href*="/tr/sportsbook?"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href*="/en/sportsbook/?"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href*="/tr/sportsbook/?"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href*="/en/sportsbook#"]),
.sidebar__small .sidebar__menu > ul:first-of-type > li:has(> a[href*="/tr/sportsbook#"]) {
order: 3 !important;
}
/* Casino hub gradient — yalnızca /en/casino veya /tr/casino (alt yol yok, örn. .../group/lobby değil) */
.sidebar__link--casino[href$="/en/casino"],
.sidebar__link--casino[href$="/en/casino/"],
.sidebar__link--casino[href$="/tr/casino"],
.sidebar__link--casino[href$="/tr/casino/"],
.sidebar__link--casino[href*="/en/casino?"],
.sidebar__link--casino[href*="/tr/casino?"],
.sidebar__link--casino[href*="/en/casino/?"],
.sidebar__link--casino[href*="/tr/casino/?"],
.sidebar__link--casino[href*="/en/casino#"],
.sidebar__link--casino[href*="/tr/casino#"] {
background: linear-gradient(to right, #e12034, #8d0101) !important;
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.4),
inset 0 0 30px rgba(255, 255, 255, 0.1) !important;
}
/* Sportsbook hub — aynı mantık */
.sidebar__link--casino[href$="/en/sportsbook"],
.sidebar__link--casino[href$="/en/sportsbook/"],
.sidebar__link--casino[href$="/tr/sportsbook"],
.sidebar__link--casino[href$="/tr/sportsbook/"],
.sidebar__link--casino[href*="/en/sportsbook?"],
.sidebar__link--casino[href*="/tr/sportsbook?"],
.sidebar__link--casino[href*="/en/sportsbook/?"],
.sidebar__link--casino[href*="/tr/sportsbook/?"],
.sidebar__link--casino[href*="/en/sportsbook#"],
.sidebar__link--casino[href*="/tr/sportsbook#"] {
background: linear-gradient(to right, #ffffff, #cfcfcf) !important;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15),
inset 0 0 30px rgba(0, 0, 0, 0.05) !important;
}
.sidebar__link--casino[href$="/en/sportsbook"] span,
.sidebar__link--casino[href$="/en/sportsbook/"] span,
.sidebar__link--casino[href$="/tr/sportsbook"] span,
.sidebar__link--casino[href$="/tr/sportsbook/"] span,
.sidebar__link--casino[href*="/en/sportsbook?"] span,
.sidebar__link--casino[href*="/tr/sportsbook?"] span,
.sidebar__link--casino[href*="/en/sportsbook/?"] span,
.sidebar__link--casino[href*="/tr/sportsbook/?"] span,
.sidebar__link--casino[href*="/en/sportsbook#"] span,
.sidebar__link--casino[href*="/tr/sportsbook#"] span {
color: #090909 !important;
}
/* Tüm scrollbar'lar için kırmızı renk */
::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
::-webkit-scrollbar-track {
background: #1a1a1a !important;
}
::-webkit-scrollbar-thumb {
background: #d81d2f !important;
border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
background: #b81a2a !important;
}
/* Firefox için scrollbar */
* {
scrollbar-width: thin !important;
scrollbar-color: #d81d2f #1a1a1a !important;
}
/* Sidebar içindeki başlıkları gizle */
.sidebar .sidebar__title {
display: none !important;
}
/* Sidebar içindeki link yazıları — tam beyaza göre hafif yumuşak ton */
.sidebar li a {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Sidebar li elementlerinden border ve outline kaldır */
.sidebar li {
border: none !important;
outline: none !important;
transition: all 0.2s ease !important;
}
/* Sidebar içindeki link SVG'leri — metinle aynı yumuşak beyaz */
.sidebar li a svg {
fill: rgba(255, 255, 255, 0.7) !important;
stroke: rgba(255, 255, 255, 0.7) !important;
color: rgba(255, 255, 255, 0.7) !important;
}
/* Active class'ına sahip li elementleri için özel stiller */
.sidebar li.active {
position: relative;
border-radius: 8px; /* eski ovallik */
background: #101010; /* koyu taban */
color: rgba(255, 255, 255, 0.72);
overflow: hidden;
}
/* kırmızı ana gradyan */
.sidebar li.active::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
135deg,
rgba(225, 32, 52, 0.4) 0%,
rgba(225, 32, 52, 0.25) 25%,
rgba(141, 1, 1, 0.15) 50%,
rgba(141, 1, 1, 0.08) 75%,
rgba(0, 0, 0, 0) 100%
);
pointer-events: none;
}
/* beyaz iç parıltı efekti */
.sidebar li.active::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
80% 60% at 40% 30%,
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0.1) 30%,
rgba(255, 255, 255, 0) 70%
);
pointer-events: none;
mix-blend-mode: screen; /* beyaz parıltıyı yumuşatır */
}
.sidebar li.active a {
color: rgba(255, 255, 255, 0.75) !important;
}
.sidebar__nav a svg,
.sidebar__nav a
.svg-icon {
color: rgba(255, 255, 255, 0.7) !important;
}
.sidebar li.active a svg {
fill: #e60008 !important;
stroke: #e60008 !important;
color: #e60008 !important;
}
.sidebar__nav li.active a,
.sidebar__nav li.active a svg {
stroke: none !important;
border: none !important;
}
.sidebar__nav li.active a {
background: transparent !important;
}
/* Hover class'ına sahip li elementleri için özel stiller */
.sidebar li:hover {
position: relative;
border-radius: 8px; /* eski ovallik */
background: #101010; /* koyu taban */
color: rgba(255, 255, 255, 0.72);
overflow: hidden;
border: none !important;
outline: none !important;
transition: all 0.2s ease !important;
}
/* kırmızı ana gradyan */
.sidebar li:hover::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
135deg,
rgba(225, 32, 52, 0.4) 0%,
rgba(225, 32, 52, 0.25) 25%,
rgba(141, 1, 1, 0.15) 50%,
rgba(141, 1, 1, 0.08) 75%,
rgba(0, 0, 0, 0) 100%
);
pointer-events: none;
}
/* beyaz iç parıltı efekti */
.sidebar li:hover::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
80% 60% at 40% 30%,
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0.1) 30%,
rgba(255, 255, 255, 0) 70%
);
pointer-events: none;
mix-blend-mode: screen; /* beyaz parıltıyı yumuşatır */
}
.sidebar li:hover a {
color: rgba(255, 255, 255, 0.75) !important;
}
.sidebar li:hover a svg {
fill: #e60008 !important;
stroke: #e60008 !important;
color: #e60008 !important;
}
.sidebar__nav li:hover a,
.sidebar__nav li:hover a svg {
stroke: none !important;
border: none !important;
}
.sidebar__nav li:hover a {
background: transparent !important;
}
/* Header stilleri */
.header {
border-radius: 20px !important;
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
margin: 15px !important;
background-color: #090909 !important;
max-width: 98% !important;
border: 1px solid #363535 !important;
}
.header__content {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
padding: 15px 20px !important;
}
/* Logo - Desktop gizle, Mobil göster */
.header__logo {
display: none !important;
}
/* Mobil Logo */
@media (max-width: 768px) {
.header__logo {
display: block !important;
width: 60px !important;
height: auto !important;
min-height: 50px !important;
background-image: url('https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/vmwmCnK2nHuHxZ4j9QYzNPGLz9ZGEfmN/statics/NAGyBlVbHCD6OL6AVpqGP1utpHNBqB49GFsff1F8.gif') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: left center !important;
flex-shrink: 0 !important;
margin-right: auto !important;
text-decoration: none !important;
order: -1 !important;
}
.header__logo img {
display: none !important;
}
.header__content {
justify-content: flex-start !important;
gap: 15px !important;
}
.header{
margin: 0px !important;
max-width: 100% !important;
border-radius: 0px !important;
border: none !important;
border-bottom: 1px solid #363535 !important;
}
/* Mobil arama butonu — yalnızca mobil görünümde gizli */
.header__search-btnmob {
display: none !important;
}
}
@media (max-width: 480px) {
.header__logo {
width: 50px !important;
min-height: 45px !important;
}
}
/* Arama butonu - sadece ikon */
.header__search-btn {
background: transparent !important;
border: none !important;
color: #ffffff !important;
padding: 8px !important;
border-radius: 8px !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
.header__search-btn svg {
fill: #ffffff !important;
stroke: #ffffff !important;
color: #ffffff !important;
}
/* Arama butonundaki "Ara" yazısını gizle */
.header__search-btn::before {
content: "" !important;
}
/* Header actions düzenleme */
.header__actions {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
/* Giriş yap butonu */
.header__signin:hover {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.5) !important;
color: #e12034 !important;
}
.header__signin:hover span {
color: #e12034 !important;
}
.header__signin:hover svg {
fill: #e12034 !important;
stroke: #e12034 !important;
color: #e12034 !important;
}
.header__signin svg {
fill: #ffffff !important;
stroke: #ffffff !important;
color: #ffffff !important;
}
.header__signin span {
color: #ffffff !important;
}
/* Kayıt ol butonu - casino butonuna benzer tasarım */
.header__signup {
background: linear-gradient(to right, #e12034, #8d0101) !important;
box-shadow: inset 0 0 10px rgba(255, 100, 100, 0.4),
inset 0 0 30px rgba(255, 120, 120, 0.1) !important;
border: none !important;
color: #ffffff !important;
padding: 6px 15px !important;
border-radius: 8px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
transition: all 0.2s ease !important;
font-weight: 500 !important;
height: auto !important;
min-height: 32px !important;
}
.header__signup:hover {
background: linear-gradient(to right, #f13044, #9d1111) !important;
box-shadow: inset 0 0 15px rgba(255, 120, 120, 0.5),
inset 0 0 35px rgba(255, 140, 140, 0.15) !important;
transform: translateY(-1px) !important;
}
.header__search {
display: none !important;
}
/* Canlı Destek linki için yeşil arkaplan - JavaScript ile class eklenir */
.live-support::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
135deg,
rgba(225, 32, 52, 0.7) 0%,
rgba(225, 32, 52, 0.5) 30%,
rgba(225, 32, 52, 0.3) 60%,
rgba(225, 32, 52, 0.1) 85%,
transparent 100%
);
pointer-events: none;
mix-blend-mode: screen; /* beyaz parıltıyı yumuşatır */
}
.sidebar__nav li.live-support:hover::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background: linear-gradient(
135deg,
rgba(225, 32, 52, 0.8) 0%,
rgba(225, 32, 52, 0.6) 30%,
rgba(225, 32, 52, 0.4) 60%,
rgba(225, 32, 52, 0.2) 85%,
transparent 100%
);
pointer-events: pointer !important;
mix-blend-mode: screen !important; /* beyaz parıltıyı yumuşatır */
}
.live-support {
position: relative;
border-radius: 8px;
background: #101010;
color: rgba(255, 255, 255, 0.7);
overflow: hidden;
}
.sidebar__nav li.live-support a {
color: rgba(255, 255, 255, 0.7) !important;
text-shadow: none !important;
font-weight: 600 !important;
position: relative;
z-index: 2;
}
.sidebar__nav li.live-support a svg {
fill: #E12034 !important;
stroke: #E12034 !important;
color: #E12034 !important;
}
.sidebar__nav li.live-support:hover a svg {
fill: #E12034 !important;
stroke: #E12034 !important;
color: #E12034 !important;
}
.sidebar__nav li.live-support:hover a,
.sidebar__nav li.live-support:hover a svg {
stroke: none !important;
border: none !important;
}
.sidebar__nav li.live-support:hover a {
background: transparent !important;
}
/* Küçük sidebar için Canlı Destek butonu - headset ikonu */
.sidebar__nav-small li.live-support-small {
position: relative;
border-radius: 8px;
background: #101010;
color: rgba(255, 255, 255, 0.7);
overflow: hidden;
}
.sidebar__nav-small li.live-support-small::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
135deg,
rgba(225, 32, 52, 0.7) 0%,
rgba(225, 32, 52, 0.5) 30%,
rgba(225, 32, 52, 0.3) 60%,
rgba(225, 32, 52, 0.1) 85%,
transparent 100%
);
pointer-events: none;
mix-blend-mode: screen;
}
.sidebar__nav-small li.live-support-small button {
position: relative;
z-index: 2;
background: transparent !important;
border: none !important;
}
.sidebar__nav-small li.live-support-small button svg {
fill: #E12034 !important;
stroke: #E12034 !important;
color: #E12034 !important;
}
/* Main slider'ı gizle */
#main-slider {
display: none !important;
}
/* WinGamb Banner Stilleri */
.wingamb-banner {
background: transparent !important;
border-radius: 20px !important;
margin: 15px auto !important;
display: flex !important;
align-items: center !important;
gap: 40px !important;
min-height: 250px !important;
width: calc(100% - 30px) !important;
max-width: 100% !important;
position: relative !important;
overflow: hidden !important;
box-sizing: border-box !important;
justify-content: center !important;
}
.wingamb-banner::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: transparent;
border-radius: 0 20px 20px 0;
z-index: 1;
}
.wingamb-banner-content {
flex: 1;
z-index: 2;
position: relative;
min-width: 0;
padding-right: 20px;
}
.wingamb-banner h1 {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 1.2;
}
.wingamb-banner h1 .brand {
color: #e12034;
}
.wingamb-banner h1 .subtitle {
color: #ffffff;
}
.wingamb-banner p {
color: #cccccc;
font-size: 1.1rem;
margin: 0 0 20px 0;
line-height: 1.4;
}
.wingamb-banner-actions {
display: flex;
align-items: center;
gap: 15px;
}
.wingamb-banner .telegram-btn {
background: #f5f5f5;
color: #333333;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.wingamb-banner .telegram-btn:hover {
background: #e0e0e0;
transform: translateY(-2px);
}
.wingamb-banner-social {
display: flex;
gap: 10px;
}
.wingamb-banner-social a {
background-color: #090909 !important;
width: 40px;
height: 40px;
border: 1px solid #363535 !important;
border-radius: 8px !important;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff !important;
text-decoration: none;
transition: all 0.3s ease;
}
.wingamb-banner-social a:hover {
color: #e12034 !important;
box-shadow: 0 0 20px rgba(225, 32, 52, 0.6),
0 0 40px rgba(225, 32, 52, 0.4),
0 0 60px rgba(225, 32, 52, 0.2);
transform: scale(1.1);
}
.wingamb-banner-images {
flex: 1;
display: flex;
gap: 20px;
z-index: 2;
position: relative;
min-width: 0;
max-width: 50%;
}
.wingamb-banner-image-link {
flex: 1;
text-decoration: none;
display: block;
transition: transform 0.3s ease;
}
.wingamb-banner-image-link:hover {
transform: scale(1.05);
}
.wingamb-banner-image {
border-radius: 12px;
overflow: hidden;
position: relative;
background: transparent;
border: none;
}
.wingamb-banner-image::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.4) 50%,
transparent 100%
);
animation: lightSweep 3s ease-in-out infinite;
z-index: 2;
pointer-events: none;
}
@keyframes lightSweep {
0% {
left: -100%;
}
50% {
left: 100%;
}
100% {
left: 100%;
}
}
.wingamb-banner-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Responsive Tasarım */
@media (max-width: 1024px) {
.wingamb-banner {
gap: 30px;
padding: 25px;
}
.wingamb-banner h1 {
font-size: 2.2rem;
}
.wingamb-banner-images {
max-width: 45%;
}
}
@media (max-width: 768px) {
.sidebar {
margin: 0 !important;
top: 10px !important;
bottom: 60px !important;
z-index: 999999999 !important;
border-radius: 0px !important;
}
.wingamb-banner {
flex-direction: column;
text-align: center;
padding: 20px;
gap: 20px;
width: calc(100% - 20px);
margin: 10px auto;
justify-content: center;
}
.wingamb-banner::before {
display: none;
}
.wingamb-banner-content {
padding-right: 0;
}
.wingamb-banner h1 {
font-size: 2rem;
}
.wingamb-banner p {
font-size: 1rem;
}
.wingamb-banner-actions {
justify-content: center;
}
.wingamb-banner-images {
flex-direction: row !important;
gap: 15px;
max-width: 100%;
width: 100%;
}
.wingamb-banner-image {
min-height: 150px;
max-height: 180px;
}
}
@media (max-width: 480px) {
.wingamb-banner {
margin: 10px auto;
padding: 15px;
justify-content: center;
}
.wingamb-banner h1 {
font-size: 1.5rem;
}
.wingamb-banner p {
font-size: 0.9rem;
}
.wingamb-banner .telegram-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.wingamb-banner-images {
flex-direction: row !important;
gap: 10px;
}
}
/* Tümünü Görüntüle butonu - Kayıt ol butonuna benzer ama daha az oval */
.section__view--carousel {
background: transparent !important;
color: #ffffff !important;
transition: all 0.2s ease !important;
border: none !important;
}
.section__view--carousel:hover {
color: #e12034 !important;
transform: translateY(-1px) !important;
text-decoration: none !important;
background: transparent !important;
border: none !important;
}
/* Kripto Para Bölümü Stilleri */
.crypto-section {
background: #0A0A0A !important;
border-radius: 20px !important;
padding: 30px;
display: flex;
align-items: center;
gap: 40px;
min-height: 200px;
max-width: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
border: none !important;
animation: cryptoSectionGlow 4s ease-in-out infinite;
}
@keyframes cryptoSectionGlow {
0% {
box-shadow:
0 0 20px rgba(225, 32, 52, 0.1),
0 0 40px rgba(225, 32, 52, 0.05),
inset 0 0 20px rgba(225, 32, 52, 0.1);
}
50% {
box-shadow:
0 0 30px rgba(225, 32, 52, 0.2),
0 0 60px rgba(225, 32, 52, 0.1),
inset 0 0 30px rgba(225, 32, 52, 0.15);
}
100% {
box-shadow:
0 0 20px rgba(225, 32, 52, 0.1),
0 0 40px rgba(225, 32, 52, 0.05),
inset 0 0 20px rgba(225, 32, 52, 0.1);
}
}
.crypto-section::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 110%;
height: 110%;
background-image: url('https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/vmwmCnK2nHuHxZ4j9QYzNPGLz9ZGEfmN/statics/bfiKe4KSVWzxshg6lu504ZCPtbCdFHLxOy0ptCnA.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
animation: cryptoBackgroundPulse 6s ease-in-out infinite;
}
@keyframes cryptoBackgroundPulse {
0% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.02);
}
100% {
opacity: 0.3;
transform: scale(1);
}
}
@keyframes floatUpDown {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0px);
}
}
/* Her ikon için özel animasyon */
/* Masaüstü - Crypto Icon'lar Aynı Hizada */
.crypto-icons {
flex: 1;
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
z-index: 2;
position: relative;
flex-wrap: nowrap !important;
height: auto !important;
align-content: center;
}
.crypto-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
position: relative;
transition: all 0.3s ease;
margin: 0 !important;
animation: floatUpDown 3s ease-in-out infinite;
}
.crypto-icon:nth-child(1) {
animation-delay: 0s;
}
.crypto-icon:nth-child(2) {
animation-delay: 0.7s;
}
.crypto-icon:nth-child(3) {
animation-delay: 1.4s;
}
.crypto-icon:nth-child(4) {
animation-delay: 2.1s;
}
.crypto-icon:hover {
animation-play-state: paused;
transform: scale(1.1) translateY(0px) !important;
box-shadow: 0 0 20px rgba(225, 32, 52, 0.3);
}
.crypto-icon img {
width: 120px;
filter: none;
}
.crypto-content {
flex: 1;
z-index: 2;
position: relative;
padding-left: 20px;
text-align: right;
animation: cryptoContentFloat 5s ease-in-out infinite;
}
@keyframes cryptoContentFloat {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-3px);
}
100% {
transform: translateY(0px);
}
}
.crypto-content h2 {
font-size: 2rem;
font-weight: bold;
margin: 0 0 5px 0;
color: #ffffff;
}
.crypto-content h3 {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 15px 0;
color: #e12034;
}
.crypto-content p {
color: #cccccc;
font-size: 1.1rem;
margin: 0 0 20px 0;
line-height: 1.4;
}
.crypto-content .details-section {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.crypto-content .details-text {
color: #cccccc;
font-size: 1.1rem;
margin: 0;
line-height: 1.4;
flex: 1;
}
.crypto-content .details-btn {
background: #f5f5f5;
color: #333333;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
display: inline-block;
white-space: nowrap;
}
.crypto-content .details-btn:hover {
background: #e0e0e0;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* Responsive Tasarım */
@media (max-width: 768px) {
.crypto-section {
flex-direction: column;
text-align: center;
padding: 30px 20px 20px 20px;
gap: 20px;
width: calc(100% - 20px);
margin: 10px auto;
}
.crypto-content {
padding-left: 0;
text-align: center;
}
.crypto-content h2 {
font-size: 1.5rem;
}
.crypto-content h3 {
font-size: 2rem;
}
.crypto-content p {
font-size: 1rem;
}
.crypto-content .details-section {
flex-direction: column;
align-items: center;
gap: 15px;
}
.crypto-content .details-text {
display: none;
}
/* Mobil - Crypto Icon'lar Aynı Hizaya */
.crypto-icons {
flex-direction: row !important;
justify-content: space-around !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 10px !important;
height: auto !important;
padding: 10px 0 !important;
}
.crypto-icon {
position: relative !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
.crypto-icon:nth-child(3) {
display: none !important;
}
}
.tabs-nav {
background: #1c1c1c !important;
border-radius: 17px !important;
}
.tabs-nav__btn {
margin-right: 15px;
transition: all 0.3s ease;
border-radius: 9px !important;
padding: 10px 20px !important;
color: #fff !important;
}
.tabs-nav__btn:last-child {
margin-right: 0;
}
.tabs-nav__btn:hover {
color: #fff !important;
opacity: 0.8;
transform: translateY(-1px);
}
.tabs-nav__btn svg {
fill: #fff !important;
}
.tabs-nav__btn.active {
background: linear-gradient(
90deg,
#e12034 0%,
#d11e30 29%,
#c11c2c 68%,
#b11a28 100%
) !important;
border-radius: 9px !important;
padding: 10px 20px !important;
box-shadow: 0 0 15px rgba(225, 32, 52, 0.3), 0 0 30px rgba(225, 32, 52, 0.2) !important;
color: #fff !important;
}
.tabs-nav__btn.active svg {
fill: #fff !important;
}
.table-wrap {
background-color: transparent !important;
border: none !important;
}
.table-wrap:before {
background: transparent !important;
}
.table-wrap__head .ss-arrow {
fill: white;
}
.table-wrap__head .ss-arrow:hover {
fill: #e12034;
}
.xtable thead th {
background: #1a1a1a !important;
color: #fff !important;
font-size: 14px !important;
font-weight: 600 !important;
text-align: center !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 25px !important;
padding-bottom: 25px !important;
}
.xtable thead th:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
text-align: start !important;
padding-left: 20px !important;
}
.xtable thead th:last-of-type {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.xtable {
border-collapse: separate;
border-spacing: 0 0.6em;
position: relative;
}
.xtable::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 250px;
background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
pointer-events: none;
z-index: 1;
}
.xtable tbody tr,
.xtable tbody tr:nth-child(even),
.xtable tbody tr:nth-child(odd),
.xtable tbody tr:nth-child(2n + 1) {
background: #161616 !important;
text-align: center !important;
padding: 2px !important;
padding-left: 10px !important;
color: #fff !important;
transition: all 0.3s ease-in-out;
}
.xtable tbody tr td,
.xtable tbody tr:nth-child(2n + 1) td {
background-color: #161616 !important;
text-align: center !important;
padding: 2px !important;
padding-left: 10px !important;
color: #fff !important;
transition: all 0.3s ease-in-out;
}
.xtable tbody tr td a {
color: #fff !important;
text-decoration: none;
}
.xtable tbody tr td svg {
fill: #fff !important;
}
.xtable tbody tr:hover td a {
color: #fff !important;
}
.xtable tbody tr:hover td svg {
fill: #fff !important;
}
.xtable tbody tr td:first-child {
text-align: start !important;
padding-left: 20px !important;
}
.xtable__text {
color: #fff !important;
}
.xtable tbody:before {
content: "@";
display: block;
line-height: 10px;
text-indent: -99999px;
}
.xtable__coin {
font-family: "JetBrains Mono", monospace !important;
font-feature-settings: "tnum" on, "lnum" on;
text-align: right !important;
white-space: nowrap !important;
}
.xtable__coin span {
font-size: 14px !important;
letter-spacing: -0.2px;
}
.xtable__coin--green {
color: #00ff29 !important;
font-size: 14px !important;
letter-spacing: -0.2px;
font-weight: 600 !important;
}
/* Negatif değerler için */
.xtable .text-secondary {
color: #fff !important;
}
.tabs-nav {
padding: 7px !important;
border: none !important;
}
.table-wrap__head {
margin-bottom: 5px !important;
}
@media (min-width: 768px) {
.table-wrap__head {
padding: 0px !important;
}
}
/* Partner Logo Hover Efekti */
.partner {
position: relative;
display: inline-block;
transition: all 0.3s ease;
border-radius: 8px;
overflow: hidden;
}
.partner::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(
circle,
rgba(225, 32, 52, 0.3) 0%,
rgba(255, 255, 255, 0.2) 30%,
rgba(225, 32, 52, 0.1) 60%,
transparent 100%
);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
z-index: 1;
pointer-events: none;
}
.partner::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.4) 0%,
rgba(225, 32, 52, 0.2) 40%,
rgba(255, 255, 255, 0.1) 70%,
transparent 100%
);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease;
z-index: 1;
pointer-events: none;
}
.partner:hover::before {
width: 120px;
height: 120px;
background: radial-gradient(
circle,
rgba(225, 32, 52, 0.4) 0%,
rgba(255, 255, 255, 0.3) 30%,
rgba(225, 32, 52, 0.2) 60%,
transparent 100%
);
}
.partner:hover::after {
width: 80px;
height: 80px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.5) 0%,
rgba(225, 32, 52, 0.3) 40%,
rgba(255, 255, 255, 0.2) 70%,
transparent 100%
);
}
.partner__logo {
position: relative;
z-index: 2;
transition: all 0.3s ease;
filter: brightness(1);
}
.partner:hover .partner__logo {
filter: brightness(1.1);
transform: scale(1.05);
}
/* Login Modal Stilleri - Görseldeki gibi basit ve şık */
#signin-modal .modal__content {
height: 600px !important;
max-width: 775px !important;
padding-right: 30px !important;
background: #1a1a1a !important;
border-radius: 20px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}
#signin-modal .modal__form {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
border-radius: 0 20px 20px 0 !important;
}
#signin-modal .modal__title {
color: #e12034 !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
margin-bottom: 30px !important;
text-align: left !important;
text-transform: uppercase !important;
}
#signin-modal .form__group {
margin-bottom: 20px !important;
position: relative !important;
}
#signin-modal .form__label {
color: #ffffff !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
margin-bottom: 8px !important;
display: block !important;
}
#signin-modal .form__input {
width: 100% !important;
padding: 12px 15px !important;
background: #1a1a1a !important;
border: 1px solid #444444 !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 1rem !important;
transition: border-color 0.3s ease !important;
}
#signin-modal .form__input:focus {
outline: none !important;
border-color: #e12034 !important;
}
#signin-modal .form__input::placeholder {
color: #888888 !important;
}
#signin-modal .form__btn {
background: #e12034 !important;
border: none !important;
padding: 12px 30px !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 1rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: background-color 0.3s ease !important;
text-transform: uppercase !important;
}
#signin-modal .form__btn:hover {
background: #c11c2c !important;
}
#signin-modal .form__delimiter {
color: #888888 !important;
font-size: 0.9rem !important;
text-align: center !important;
margin: 20px 0 !important;
position: relative !important;
}
#signin-modal .form__delimiter::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #444444;
z-index: 1;
}
#signin-modal .form__delimiter span {
background: #2a2a2a;
padding: 0 15px;
position: relative;
z-index: 2;
}
#signin-modal .form__text {
margin-top: 20px !important;
text-align: left !important;
}
#signin-modal .form__text p {
margin: 8px 0 !important;
color: #ffffff !important;
font-size: 0.9rem !important;
}
#signin-modal .form__text button {
background: none !important;
border: none !important;
color: #e12034 !important;
cursor: pointer !important;
font-size: 0.9rem !important;
text-decoration: underline !important;
transition: color 0.3s ease !important;
}
#signin-modal .form__text button:hover {
color: #ff6b6b !important;
}
#signin-modal .form__pass {
position: absolute !important;
right: 15px !important;
top: 65% !important;
transform: translateY(-50%) !important;
background: none !important;
border: none !important;
color: #888888 !important;
cursor: pointer !important;
transition: color 0.3s ease !important;
}
#signin-modal .form__pass:hover {
color: #e12034 !important;
}
@media screen and (min-width: 1200px) {
.modal--sign .modal__content {
padding-left: calc(100% - 650px) !important;
}
}
@media screen and (min-width: 1200px) {
.modal__sign-img {
right: 470px !important;
}
}
/* Responsive Tasarım */
@media (max-width: 768px) {
#signin-modal .modal__content {
height: auto !important;
max-width: 90% !important;
padding: 20px !important;
}
#signin-modal .modal__form {
border-radius: 20px !important;
}
#signin-modal .modal__title {
font-size: 1.3rem !important;
margin-bottom: 20px !important;
}
#signin-modal .form__input {
padding: 10px 12px !important;
}
#signin-modal .form__btn {
padding: 10px 25px !important;
font-size: 0.9rem !important;
}
}
/* Register Modal Stilleri - Responsive ve taşma yok */
#signup-modal .modal__content {
height: auto !important;
min-height: 600px !important;
max-height: 90vh !important;
max-width: 775px !important;
padding-right: 30px !important;
background: #1a1a1a !important;
border-radius: 20px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
}
#signup-modal .modal__form {
height: auto !important;
min-height: 600px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
padding: 25px !important;
border-radius: 0 20px 20px 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
max-height: 90vh !important;
-webkit-overflow-scrolling: touch !important;
}
#signup-modal .modal__title {
color: #e12034 !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
margin-bottom: 30px !important;
text-align: left !important;
text-transform: uppercase !important;
}
#signup-modal .tabs-nav {
display: flex !important;
gap: 10px !important;
margin-bottom: 20px !important;
}
#signup-modal .tabs-nav__btn {
background: #2a2a2a !important;
border: 1px solid #444444 !important;
color: #cccccc !important;
padding: 8px 16px !important;
border-radius: 6px !important;
font-size: 0.8rem !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
#signup-modal .tabs-nav__btn.active {
background: #e12034 !important;
border-color: #e12034 !important;
color: #ffffff !important;
}
#signup-modal .tabs-nav__btn:hover {
background: #444444 !important;
border-color: #666666 !important;
}
#signup-modal .tabs-nav__btn.active:hover {
background: #c11c2c !important;
border-color: #c11c2c !important;
}
#signup-modal .form__group {
margin-bottom: 12px !important;
position: relative !important;
}
#signup-modal .form__label {
color: #ffffff !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
margin-bottom: 8px !important;
display: block !important;
}
#signup-modal .form__input {
width: 100% !important;
padding: 10px 12px !important;
background: #1a1a1a !important;
border: 1px solid #444444 !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 0.95rem !important;
transition: border-color 0.3s ease !important;
}
#signup-modal .form__input:focus {
outline: none !important;
border-color: #e12034 !important;
}
#signup-modal .form__input::placeholder {
color: #888888 !important;
}
#signup-modal .react-tel-input {
position: relative !important;
}
#signup-modal .react-tel-input .form-control {
width: 100% !important;
padding: 10px 12px 10px 50px !important;
background: #1a1a1a !important;
border: 1px solid #444444 !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 0.95rem !important;
transition: border-color 0.3s ease !important;
}
#signup-modal .react-tel-input .form-control:focus {
outline: none !important;
border-color: #e12034 !important;
}
#signup-modal .react-tel-input .flag-dropdown {
position: absolute !important;
left: 0 !important;
top: 0 !important;
height: 100% !important;
width: 50px !important;
background: #2a2a2a !important;
border: 1px solid #444444 !important;
border-radius: 8px 0 0 8px !important;
cursor: pointer !important;
}
#signup-modal .react-tel-input .selected-flag {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
padding: 0 8px !important;
}
#signup-modal .react-tel-input .arrow {
width: 0 !important;
height: 0 !important;
border-left: 4px solid transparent !important;
border-right: 4px solid transparent !important;
border-top: 4px solid #cccccc !important;
margin-left: 5px !important;
}
#signup-modal .form__btn {
background: #e12034 !important;
border: none !important;
padding: 10px 25px !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: background-color 0.3s ease !important;
text-transform: uppercase !important;
}
#signup-modal .form__btn:hover {
background: #c11c2c !important;
}
#signup-modal .form__delimiter {
color: #888888 !important;
font-size: 0.9rem !important;
text-align: center !important;
margin: 15px 0 !important;
position: relative !important;
}
#signup-modal .form__delimiter::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #444444;
z-index: 1;
}
#signup-modal .form__delimiter span {
background: #1a1a1a;
padding: 0 15px;
position: relative;
z-index: 2;
}
#signup-modal .form__text {
margin-top: 15px !important;
text-align: left !important;
}
#signup-modal .form__text p {
margin: 8px 0 !important;
color: #ffffff !important;
font-size: 0.9rem !important;
}
#signup-modal .form__text button {
background: none !important;
border: none !important;
color: #e12034 !important;
cursor: pointer !important;
font-size: 0.9rem !important;
text-decoration: underline !important;
transition: color 0.3s ease !important;
}
#signup-modal .form__text button:hover {
color: #ff6b6b !important;
}
#signup-modal .form__pass {
position: absolute !important;
right: 15px !important;
top: 65% !important;
transform: translateY(-50%) !important;
background: none !important;
border: none !important;
color: #888888 !important;
cursor: pointer !important;
transition: color 0.3s ease !important;
}
#signup-modal .form__pass:hover {
color: #e12034 !important;
}
#signup-modal .form__checkbox {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 15px 0 !important;
}
#signup-modal .form__checkbox input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: #e12034 !important;
}
#signup-modal .form__checkbox label {
color: #cccccc !important;
font-size: 0.9rem !important;
cursor: pointer !important;
flex: 1 !important;
}
#signup-modal .form__checkbox button {
background: none !important;
border: none !important;
color: #e12034 !important;
cursor: pointer !important;
padding: 5px !important;
transition: color 0.3s ease !important;
}
#signup-modal .form__checkbox button:hover {
color: #ff6b6b !important;
}
#signup-modal .mini-icon {
width: 16px !important;
height: 16px !important;
fill: currentColor !important;
}
@media screen and (min-width: 1200px) {
.modal--sign .modal__content {
padding-left: calc(100% - 650px) !important;
}
}
@media screen and (min-width: 1200px) {
.modal__sign-img {
right: 470px !important;
}
#signup-modal .modal__sign-img {
right: 470px !important;
}
}
/* Register modal için görsel alanı düzeltmeleri */
#signup-modal .modal__sign-img {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 40% !important;
height: 100% !important;
border-radius: 20px 0 0 20px !important;
overflow: hidden !important;
}
#signup-modal .modal__sign-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
/* Responsive görsel ayarları */
@media (max-width: 1024px) {
#signup-modal .modal__sign-img {
width: 35% !important;
}
#signup-modal .modal__content {
padding-left: calc(100% - 65%) !important;
}
}
/* Register Modal Responsive */
@media (max-width: 768px) {
#signup-modal .modal__sign-img {
display: none !important;
}
#signup-modal .modal__content {
height: 80vh !important;
min-height: auto !important;
max-height: 80vh !important;
max-width: 95% !important;
padding: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow: hidden !important;
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
#signup-modal .modal__form {
padding: 20px !important;
border-radius: 20px !important;
height: 100% !important;
max-height: 100% !important;
min-height: auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
#signup-modal .modal__title {
font-size: 1.2rem !important;
margin-bottom: 15px !important;
}
#signup-modal .form__group {
margin-bottom: 10px !important;
}
#signup-modal .form__input {
padding: 8px 10px !important;
font-size: 0.9rem !important;
}
#signup-modal .react-tel-input .form-control {
padding: 8px 10px 8px 45px !important;
font-size: 0.9rem !important;
}
#signup-modal .form__btn {
padding: 8px 20px !important;
font-size: 0.85rem !important;
}
#signup-modal .tabs-nav__btn {
padding: 5px 10px !important;
font-size: 0.7rem !important;
}
#signup-modal .form__delimiter {
margin: 10px 0 !important;
}
#signup-modal .form__checkbox {
margin: 10px 0 !important;
}
#signup-modal .form__text {
margin-top: 10px !important;
}
/* Form içeriği için scroll fix */
#signup-modal .modal__form > * {
flex-shrink: 0 !important;
}
}
@media (max-width: 480px) {
#signup-modal .modal__sign-img {
display: none !important;
}
#signup-modal .modal__content {
height: 85vh !important;
max-width: 98% !important;
max-height: 85vh !important;
min-height: auto !important;
padding: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow: hidden !important;
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
#signup-modal .modal__form {
padding: 15px !important;
height: 100% !important;
max-height: 100% !important;
min-height: auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
#signup-modal .modal__title {
font-size: 1.1rem !important;
margin-bottom: 12px !important;
}
#signup-modal .form__group {
margin-bottom: 8px !important;
}
#signup-modal .form__input {
padding: 6px 8px !important;
font-size: 0.85rem !important;
}
#signup-modal .react-tel-input .form-control {
padding: 6px 8px 6px 40px !important;
font-size: 0.85rem !important;
}
#signup-modal .form__btn {
padding: 6px 15px !important;
font-size: 0.8rem !important;
}
/* Form içeriği için scroll fix */
#signup-modal .modal__form > * {
flex-shrink: 0 !important;
}
}
/* Bonus Request Link - Span Gizle (Kayıp Bonus hariç) */
.sidebar__link--bonus:not(.sidebar__link--loss-bonus-request) span {
display: none !important;
visibility: hidden !important;
}
/* Kayıp Bonus Talebi linki için span'ı gizleme */
.sidebar__link--loss-bonus-request span {
display: none !important;
visibility: hidden !important;
}
/* Promosyon Blog Grid Stilleri - WinGamb Teması */
.blog-grid {
gap: 20px !important;
}
.post {
background: rgba(26, 26, 26, 0.9) !important;
border: 1px solid rgba(68, 68, 68, 0.3) !important;
border-radius: 12px !important;
overflow: hidden !important;
text-decoration: none !important;
color: #ffffff !important;
transition: all 0.3s ease !important;
position: relative !important;
display: block !important;
height: 100% !important;
}
.post:hover {
transform: translateY(-5px) !important;
box-shadow: 0 10px 30px rgba(225, 32, 52, 0.3) !important;
border-color: rgba(225, 32, 52, 0.5) !important;
}
.post__cover {
position: relative !important;
width: 100% !important;
overflow: hidden !important;
display: block !important;
border-radius: 12px 12px 0 0 !important;
}
.post__cover .lazy-load-image-background {
width: 100% !important;
height: 100% !important;
display: block !important;
position: relative !important;
overflow: hidden !important;
}
.post__cover img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transition: transform 0.3s ease !important;
display: block !important;
}
.post:hover .post__cover img {
transform: scale(1.05) !important;
}
.post__meta {
padding: 15px 20px 10px 20px !important;
background: rgba(10, 10, 10, 0.9) !important;
border-bottom: 1px solid rgba(68, 68, 68, 0.2) !important;
}
.post__date {
color: #e12034 !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.post__title {
color: #ffffff !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
margin: 10px 20px 5px 20px !important;
line-height: 1.3 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.post__text {
color: #cccccc !important;
font-size: 0.9rem !important;
margin: 0 20px 20px 20px !important;
line-height: 1.4 !important;
font-weight: 400 !important;
}
/* Hover Efektleri */
.post::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, rgba(225, 32, 52, 0.1), rgba(255, 107, 107, 0.1)) !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
z-index: 1 !important;
border-radius: 12px !important;
}
.post:hover::before {
opacity: 1 !important;
}
.post__title,
.post__text,
.post__date {
position: relative !important;
z-index: 2 !important;
}
/* Responsive Tasarım */
@media (max-width: 1024px) {
.post__cover img {
object-fit: cover !important;
}
.post__title {
font-size: 1.1rem !important;
}
}
@media (max-width: 768px) {
.post__cover img {
object-fit: cover !important;
}
.post__meta {
padding: 12px 15px 8px 15px !important;
}
.post__title {
font-size: 1rem !important;
margin: 8px 15px 4px 15px !important;
}
.post__text {
font-size: 0.85rem !important;
margin: 0 15px 15px 15px !important;
}
.post__date {
font-size: 0.8rem !important;
}
}
@media (max-width: 480px) {
.post__cover img {
object-fit: cover !important;
}
.post__meta {
padding: 10px 12px 6px 12px !important;
}
.post__title {
font-size: 0.95rem !important;
margin: 6px 12px 3px 12px !important;
}
.post__text {
font-size: 0.8rem !important;
margin: 0 12px 12px 12px !important;
}
.post__date {
font-size: 0.75rem !important;
}
}
/* Özel Promosyon Kartları */
.post[href*="discount"] {
border-left: 4px solid #e12034 !important;
}
.post[href*="vip-rank"] {
border-left: 4px solid #ff6b6b !important;
}
.post[href*="dogum-gunu"] {
border-left: 4px solid #4ecdc4 !important;
}
/* Animasyon Efektleri */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.post {
animation: fadeInUp 0.6s ease-out !important;
}
.post:nth-child(1) {
animation-delay: 0.1s !important;
}
.post:nth-child(2) {
animation-delay: 0.2s !important;
}
.post:nth-child(3) {
animation-delay: 0.3s !important;
}
.sidebar__menu > ul:first-of-type > li > a[href*="/blog"],
.sidebar__small .sidebar__menu > ul:first-of-type > li > a[href*="/blog"] {
display: none !important;
}
.sidebar__menu > ul:first-of-type > li > a[href*="/poker"],
.sidebar__small .sidebar__menu > ul:first-of-type > li > a[href*="/poker"] {
display: none !important;
}
.sidebar__menu > ul:first-of-type > li > a[href*="/wheel"],
.sidebar__small .sidebar__menu > ul:first-of-type > li > a[href*="/wheel"] {
display: none !important;
}
.sidebar__menu > ul:first-of-type > li > a[href*="safe-online-casino"],
.sidebar__small .sidebar__menu > ul:first-of-type > li > a[href*="safe-online-casino"] {
display: none !important;
}
.sidebar__menu > ul:first-of-type > li > a[href*="/trade"],
.sidebar__small .sidebar__menu > ul:first-of-type > li > a[href*="/trade"] {
display: none !important;
}
.sidebar__menu > ul:first-of-type > li > a[href*="e-sport"],
.sidebar__small .sidebar__menu > ul:first-of-type > li > a[href*="e-sport"] {
display: none !important;
}
/* Merkez Logo Görseli */
.lowbar nav ul li {
background: transparent !important;
color: rgba(255, 255, 255, 0.7) !important;
}
/* Lowbar menü metin/ikon — sol sidebar ile aynı yumuşak beyaz */
.lowbar nav ul li a,
.lowbar nav ul li button,
.lowbar nav ul li span {
color: rgba(255, 255, 255, 0.7) !important;
}
.lowbar nav ul li a svg,
.lowbar nav ul li button svg,
.lowbar nav ul li svg {
fill: rgba(255, 255, 255, 0.7) !important;
stroke: rgba(255, 255, 255, 0.7) !important;
color: rgba(255, 255, 255, 0.7) !important;
}
.lowbar nav ul li.active a,
.lowbar nav ul li.active button,
.lowbar nav ul li.active span,
.lowbar nav ul li.router-link-active a,
.lowbar nav ul li.router-link-exact-active a,
.lowbar nav ul li.router-link-active button,
.lowbar nav ul li.router-link-exact-active button,
.lowbar nav ul li.router-link-active span,
.lowbar nav ul li.router-link-exact-active span {
color: rgba(255, 255, 255, 0.75) !important;
}
.lowbar nav ul li.active a svg,
.lowbar nav ul li.active button svg,
.lowbar nav ul li.active svg,
.lowbar nav ul li.router-link-active a svg,
.lowbar nav ul li.router-link-exact-active a svg,
.lowbar nav ul li.router-link-active button svg,
.lowbar nav ul li.router-link-exact-active button svg {
fill: #e60008 !important;
stroke: #e60008 !important;
color: #e60008 !important;
}
#main-icon {
position: relative !important;
}
#main-icon .lowbar-logo {
display: none !important;
}
.lowbar-logo,
.sticky-menu-container
.outer-button
.icon-container.icon.plus img {
padding: 10px !important;
}
#main-icon::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 40px !important;
height: 40px !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ia2F0bWFuXzIiIGRhdGEtbmFtZT0ia2F0bWFuIDIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA4MTYuNzEgNzQ4LjAyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiB1cmwoI0Fkc8Sxel9kZWdyYWRlXzQ4KTsKICAgICAgICBzdHJva2U6ICNlNjIyMzc7CiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOwogICAgICAgIHN0cm9rZS13aWR0aDogM3B4OwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJBZHPEsXpfZGVncmFkZV80OCIgZGF0YS1uYW1lPSJBZHPEsXogZGVncmFkZSA0OCIgeDE9IjIuMDEiIHkxPSIzNzQuNzUiIHgyPSI4MTQuMjQiIHkyPSIzNzQuNzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjOGIwMDAwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2U2MjIzNyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPGcgaWQ9Ik1haW4iPgogICAgPGcgaWQ9Il80IiBkYXRhLW5hbWU9IjQiPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNDEuNDksOTguNzFsODcuNTUsMzExLjc1LDk4Ljg1LTMwNC40OSwyLjE5LTMuMjdjNS4zMS0zLjUzLDExNC42OS0zLDEyNy40Mi0xLjQsMywuMzgsNi4xMy0uMjYsOC4xMywyLjgxbDk0LjI1LDI5NS40Miw3OS4yOS0yNTMuMDVjLjcxLTYuMDctLjYtMy4xMi00LjA0LTMuOTYtMjEuMDEtNS4xMS00My41My01Ljg5LTY0LjI3LTEyLjM0TDgxNC4yNCwyLjk5bC0xMjMuMzEsNDA0LjQ4LTI2MC41NiwyLjY2LTM5Ljk4LTExNC41LTkwLjA2LDI5MS41M2MxLjg3LDIyLjk0LDE4LjMxLDMxLjc1LDM5LjQ3LDMzLjg3LDQ5Ljc2LDQuOTksMTA3LjU4LTMuMzQsMTU4LjIyLS4zNCw2Ljc4LTIuMjgsMTcuMDYtNTcuODIsMjAuODktNjhoLTEwOS4zOWwzMC4zNS0xMDYuMzgsMjQzLjEyLTMtODUuMTUsMzAzLjE3LTQwNC4wMS4wM0wyLjAxLDk4LjcxaDEzOS40OFoiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==") !important;
z-index: 1 !important;
}
/* Cüzdan Bölümü Stilleri */
.header__wallet {
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
z-index: 10 !important;
}
.header__wallet-dropdown {
position: relative !important;
}
.header__wallet-dropdown-btn {
background: #090909 !important;
border: 1px solid #363535 !important;
border-radius: 12px !important;
padding: 8px 16px !important;
color: #ffffff !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
min-width: 140px !important;
}
.header__wallet-dropdown-btn:hover {
background: #1c1c1c !important;
border-color: #444444 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
.header__wallet-dropdown-btn:focus {
outline: none !important;
border-color: #e12034 !important;
box-shadow: 0 0 0 2px rgba(225, 32, 52, 0.2) !important;
}
.instrument-icon-wrapper {
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
overflow: hidden !important;
}
.header__wallet-menu {
background: #090909 !important;
border: 1px solid #363535 !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
padding: 12px !important;
margin-top: 8px !important;
min-width: 320px !important;
max-width: 400px !important;
flex-direction: column !important;
}
.header__wallet-search {
margin-bottom: 12px !important;
}
.header__wallet-search .search {
position: relative !important;
}
.header__wallet-search .search__input {
width: 100% !important;
background: #1c1c1c !important;
border: 1px solid #2d2d2d !important;
border-radius: 8px !important;
padding: 10px 14px !important;
color: #ffffff !important;
font-size: 0.9rem !important;
transition: all 0.3s ease !important;
}
.header__wallet-search .search__input::placeholder {
color: #666666 !important;
}
.header__wallet-search .search__input:focus {
outline: none !important;
border-color: #e12034 !important;
box-shadow: 0 0 0 2px rgba(225, 32, 52, 0.2) !important;
}
.header__wallet-currencies {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
max-height: 300px !important;
overflow-y: auto !important;
}
.header__wallet-currencies li {
padding: 10px 12px !important;
border-radius: 8px !important;
margin-bottom: 4px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
.header__wallet-currencies li:hover {
background: #1c1c1c !important;
}
.header__wallet-currencies li:active {
background: #252525 !important;
}
.header__wallet-currencies .instrument-icon-wrapper {
width: 28px !important;
height: 28px !important;
flex-shrink: 0 !important;
background: #1c1c1c !important;
border-radius: 6px !important;
padding: 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #2d2d2d !important;
}
.header__wallet-currencies li:hover .instrument-icon-wrapper {
background: #252525 !important;
border-color: #363535 !important;
}
/* İlk span - Icon ve para birimi adı (sol tarafta) */
.header__wallet-currencies li > span:first-child {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-shrink: 0 !important;
color: #ffffff !important;
font-weight: 500 !important;
font-size: 0.9rem !important;
}
/* İkinci span - Miktar (sağ tarafta) */
.header__wallet-currencies li > span:last-child {
color: #ffffff !important;
font-weight: 500 !important;
font-size: 0.9rem !important;
text-align: right !important;
flex-shrink: 0 !important;
margin-left: auto !important;
}
.header__wallet-btn {
background: #090909 !important;
border: 1px solid #363535 !important;
border-radius: 12px !important;
padding: 0px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #ffffff !important;
transition: all 0.3s ease !important;
min-width: 40px !important;
height: 45px !important;
}
.header__wallet-btn:hover {
background: linear-gradient(to right, #e12034, #8d0101) !important;
border-color: #e12034 !important;
box-shadow: 0 0 15px rgba(225, 32, 52, 0.3) !important;
transform: translateY(-1px) !important;
}
.header__wallet-btn svg {
width: 20px !important;
height: 20px !important;
fill: currentColor !important;
}
.header__wallet-btn:hover svg {
fill: #ffffff !important;
}
/* Wallet Settings Butonu */
.header__wallet-menu .header__dropdown-btn {
background: linear-gradient(to right, #e12034, #8d0101) !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 20px !important;
color: #ffffff !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
text-transform: uppercase !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
margin-top: 12px !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
text-decoration: none !important;
}
.header__wallet-menu .header__dropdown-btn:hover {
background: linear-gradient(to right, #d11e30, #7d0101) !important;
box-shadow: 0 0 15px rgba(225, 32, 52, 0.4) !important;
transform: translateY(-1px) !important;
}
.header__wallet-menu .header__dropdown-btn svg {
width: 18px !important;
height: 18px !important;
fill: #ffffff !important;
}
.header__wallet-menu .header__dropdown-btn span {
color: #ffffff !important;
font-weight: 600 !important;
}
/* Responsive Cüzdan */
@media (max-width: 768px) {
.header__wallet {
gap: 5px !important;
}
.header__wallet-dropdown-btn {
padding: 6px 12px !important;
font-size: 0.85rem !important;
min-width: 120px !important;
}
.header__wallet-menu {
min-width: 280px !important;
max-width: 90vw !important;
}
.header__wallet-btn {
padding: 8px !important;
min-width: 36px !important;
height: 36px !important;
}
}
@media (max-width: 480px) {
.header__wallet-dropdown-btn {
padding: 6px 10px !important;
font-size: 0.8rem !important;
min-width: 100px !important;
}
.header__wallet-menu {
min-width: calc(100vw - 40px) !important;
max-width: calc(100vw - 40px) !important;
}
}
/* Lucky Wheel Gizleme */
.header__action #lucky-wheel {
display: none !important;
}
/* Wheel Button Gizleme */
button.header__action:has(#lucky-wheel) {
display: none !important;
}
/* Header Logged - Action Button Gizleme */
.header--logged .header__action button {
display: none !important;
}
.category-tile.active {
background: transparent !important;
}
.category-image {
width: 100px !important;
}
.post[href*="dogum-gunu"] {
border-left: none !important;
}
.post[href*="birthday"] {
border-left: none !important;
}
/* ============================================
FOOTER STYLES
============================================ */
/* Footer Ana Container */
.footer {
background: #0e0e0e !important;
border-top: 1px solid rgba(225, 32, 52, 0.1) !important;
padding: 50px 0 25px 0 !important;
margin-top: 50px !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
.footer::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, rgba(225, 32, 52, 0.3), transparent) !important;
}
.footer__content {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 15px !important;
}
/* Footer Description Section */
.footer-desc {
margin-bottom: 40px !important;
}
/* Footer Navigation Section */
.footer__nav {
margin-bottom: 30px !important;
padding: 0 !important;
}
.footer__title {
color: #ffffff !important;
font-size: 1rem !important;
font-weight: 600 !important;
margin-bottom: 18px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
position: relative !important;
display: inline-block !important;
}
.footer__title::after {
content: "" !important;
position: absolute !important;
bottom: -6px !important;
left: 0 !important;
width: 30px !important;
height: 2px !important;
background: linear-gradient(90deg, #e12034, transparent) !important;
border-radius: 2px !important;
}
.footer__title div {
color: #ffffff !important;
font-size: 1rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
/* Footer List */
.footer__list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.footer__list li {
margin-bottom: 10px !important;
}
.footer__list li:last-child {
margin-bottom: 0 !important;
}
.footer__list a {
color: #b0b0b0 !important;
font-size: 0.9rem !important;
text-decoration: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: inline-block !important;
position: relative !important;
padding-left: 0 !important;
}
.footer__list a::before {
content: "" !important;
position: absolute !important;
left: -8px !important;
top: 50% !important;
transform: translateY(-50%) scaleX(0) !important;
width: 4px !important;
height: 4px !important;
background: #e12034 !important;
border-radius: 50% !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.footer__list a:hover {
color: #ffffff !important;
transform: translateX(5px) !important;
padding-left: 12px !important;
}
.footer__list a:hover::before {
transform: translateY(-50%) scaleX(1) !important;
}
/* Footer Social Media */
.footer__social {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
gap: 15px !important;
flex-wrap: wrap !important;
}
.footer__social li {
margin: 0 !important;
}
.footer__social a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
border-radius: 10px !important;
background: rgba(26, 26, 26, 0.6) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
color: #b0b0b0 !important;
text-decoration: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
overflow: hidden !important;
}
.footer__social a::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 0 !important;
height: 0 !important;
border-radius: 50% !important;
background: radial-gradient(circle, rgba(225, 32, 52, 0.3), transparent) !important;
transform: translate(-50%, -50%) !important;
transition: width 0.4s ease, height 0.4s ease !important;
}
.footer__social a:hover {
background: linear-gradient(135deg, #e12034, #c01c28) !important;
color: #ffffff !important;
transform: translateY(-3px) scale(1.05) !important;
box-shadow: 0 6px 20px rgba(225, 32, 52, 0.4), 0 0 0 1px rgba(225, 32, 52, 0.2) !important;
border-color: rgba(225, 32, 52, 0.3) !important;
}
.footer__social a:hover::before {
width: 100px !important;
height: 100px !important;
}
.footer__social .svg-icon {
width: 18px !important;
height: 18px !important;
fill: currentColor !important;
}
/* Footer Currencies */
.footer__currencies {
margin-bottom: 25px !important;
}
.footer__accepted {
list-style: none !important;
padding: 0 !important;
margin: 18px 0 0 0 !important;
display: flex !important;
gap: 8px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(225, 32, 52, 0.3) transparent !important;
padding-bottom: 5px !important;
-webkit-overflow-scrolling: touch !important;
background-color: transparent !important;
}
.footer__accepted::-webkit-scrollbar {
height: 4px !important;
}
.footer__accepted::-webkit-scrollbar-track {
background: transparent !important;
}
.footer__accepted::-webkit-scrollbar-thumb {
background: rgba(225, 32, 52, 0.3) !important;
border-radius: 4px !important;
}
.footer__accepted::-webkit-scrollbar-thumb:hover {
background: rgba(225, 32, 52, 0.5) !important;
}
.footer__accepted li {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 12px !important;
border-radius: 8px !important;
background: rgba(26, 26, 26, 0.8) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
min-width: fit-content !important;
}
.footer__accepted li:hover {
background: rgba(225, 32, 52, 0.15) !important;
border-color: rgba(225, 32, 52, 0.3) !important;
transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0 4px 12px rgba(225, 32, 52, 0.2), 0 0 0 1px rgba(225, 32, 52, 0.1) !important;
}
.footer__accepted .instrument-icon-wrapper {
width: 20px !important;
height: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.footer__accepted .instrument-icon-wrapper svg,
.footer__accepted .instrument-icon-wrapper img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.footer__accepted span {
color: #e0e0e0 !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
letter-spacing: 0.3px !important;
}
/* Footer Logo */
.footer__logo {
margin-bottom: 20px !important;
height: 50px !important;
}
/* Footer Description */
.footer__description {
color: #b0b0b0 !important;
font-size: 0.9rem !important;
line-height: 1.7 !important;
margin: 0 !important;
letter-spacing: 0.3px !important;
}
/* Footer Licenses */
.footer__licenses {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
}
.footer__licenses-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
gap: 15px !important;
flex-wrap: wrap !important;
}
.footer__licenses-list li {
margin: 0 !important;
}
/* Footer Cellar (Bottom Section) */
.footer__cellar {
border-top: 1px solid rgba(225, 32, 52, 0.1) !important;
padding-top: 25px !important;
margin-top: 40px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 20px !important;
position: relative !important;
}
.footer__cellar::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100px !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, rgba(225, 32, 52, 0.3), transparent) !important;
}
.footer__contacts {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
gap: 20px !important;
flex-wrap: wrap !important;
}
.footer__contacts li {
color: #b0b0b0 !important;
font-size: 0.9rem !important;
margin: 0 !important;
}
.footer__contacts a {
color: #e12034 !important;
text-decoration: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
}
.footer__contacts a::after {
content: "" !important;
position: absolute !important;
bottom: -2px !important;
left: 0 !important;
width: 0 !important;
height: 1px !important;
background: linear-gradient(90deg, #e12034, transparent) !important;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.footer__contacts a:hover {
color: #f13044 !important;
}
.footer__contacts a:hover::after {
width: 100% !important;
}
/* Footer Copyright */
.footer__copyright {
color: #888888 !important;
font-size: 0.85rem !important;
margin: 0 !important;
letter-spacing: 0.5px !important;
}
/* Footer Responsive */
@media (max-width: 1024px) {
.footer {
padding: 45px 0 22px 0 !important;
}
.footer__content {
padding: 0 20px !important;
}
}
@media (max-width: 768px) {
.footer {
padding: 35px 0 18px 0 !important;
margin-top: 35px !important;
}
.footer__content {
padding: 0 15px !important;
}
.footer-desc {
margin-bottom: 20px !important;
}
.footer__nav {
margin-bottom: 20px !important;
}
.footer__title {
font-size: 0.9rem !important;
margin-bottom: 12px !important;
}
.footer__list li {
margin-bottom: 8px !important;
}
.footer__list a {
font-size: 0.8rem !important;
}
.footer__social {
gap: 12px !important;
}
.footer__social a {
width: 32px !important;
height: 32px !important;
}
.footer__social .svg-icon {
width: 16px !important;
height: 16px !important;
}
.footer__accepted {
gap: 6px !important;
margin-top: 15px !important;
}
.footer__accepted li {
padding: 7px 10px !important;
gap: 6px !important;
}
.footer__accepted .instrument-icon-wrapper {
width: 18px !important;
}
.footer__accepted span {
font-size: 0.8rem !important;
}
.footer__description {
font-size: 0.8rem !important;
text-align: center !important;
margin-bottom: 15px !important;
}
.footer__licenses {
justify-content: center !important;
}
.footer__cellar {
flex-direction: column !important;
text-align: center !important;
gap: 12px !important;
}
.footer__contacts {
justify-content: center !important;
gap: 15px !important;
}
}
@media (max-width: 480px) {
.footer {
padding: 30px 0 15px 0 !important;
margin-top: 30px !important;
}
.footer__content {
padding: 0 12px !important;
}
.footer__title {
font-size: 0.85rem !important;
}
.footer__list a {
font-size: 0.75rem !important;
}
.footer__social {
gap: 10px !important;
}
.footer__social a {
width: 30px !important;
height: 30px !important;
}
.footer__contacts {
flex-direction: column !important;
gap: 10px !important;
}
.footer__contacts li {
font-size: 0.8rem !important;
}
.footer__copyright {
font-size: 0.75rem !important;
}
.footer__accepted {
gap: 5px !important;
margin-top: 12px !important;
}
.footer__accepted li {
padding: 6px 9px !important;
gap: 5px !important;
}
.footer__accepted .instrument-icon-wrapper {
width: 16px !important;
height: 16px !important;
}
.footer__accepted span {
font-size: 0.75rem !important;
}
}
/* ============================================
PROFILE VERIFICATION STYLES
============================================ */
/* Dropdown Toggle */
.content__dropdown {
margin-bottom: 20px !important;
}
.content__dropdown-toggle {
background: rgba(26, 26, 26, 0.8) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
padding: 10px 16px !important;
color: #ffffff !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
width: 100% !important;
justify-content: space-between !important;
}
.content__dropdown-toggle:hover {
background: rgba(225, 32, 52, 0.15) !important;
border-color: rgba(225, 32, 52, 0.3) !important;
transform: translateY(-1px) !important;
}
.content__dropdown-toggle .svg-icon {
width: 16px !important;
height: 16px !important;
fill: currentColor !important;
transition: transform 0.3s ease !important;
}
.content__dropdown-toggle[aria-expanded="true"] .svg-icon {
transform: rotate(180deg) !important;
}
/* Dropdown Menu */
.content__dropdown-menu {
background: rgba(26, 26, 26, 0.95) !important;
backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
padding: 8px 0 !important;
margin-top: 8px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(225, 32, 52, 0.1) !important;
min-width: 200px !important;
overflow: hidden !important;
}
.content__dropdown-item {
background: transparent !important;
border: none !important;
color: #b0b0b0 !important;
font-size: 0.9rem !important;
padding: 10px 20px !important;
width: 100% !important;
text-align: left !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
}
.content__dropdown-item::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 3px !important;
background: #e12034 !important;
transform: scaleX(0) !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.content__dropdown-item:hover,
.content__dropdown-item:focus {
background: rgba(225, 32, 52, 0.1) !important;
color: #ffffff !important;
}
.content__dropdown-item:hover::before,
.content__dropdown-item:focus::before {
transform: scaleX(1) !important;
}
.content__dropdown-item .svg-icon {
width: 14px !important;
height: 14px !important;
fill: currentColor !important;
opacity: 0.6 !important;
}
.content__dropdown-item:hover .svg-icon,
.content__dropdown-item:focus .svg-icon {
opacity: 1 !important;
}
/* Content Menu - Tabs */
.content__menu {
margin-bottom: 25px !important;
background-color: transparent !important;
}
.content__nav {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
border: none !important;
padding: 0 !important;
background: transparent !important;
}
.content__nav .nav-item {
margin: 0 !important;
}
.content__nav .nav-item button {
background: rgba(26, 26, 26, 0.8) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 8px !important;
padding: 10px 16px !important;
color: #b0b0b0 !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
overflow: hidden !important;
}
.content__nav .nav-item button::before {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 2px !important;
background: linear-gradient(90deg, #e12034, #c01c28) !important;
transform: scaleX(0) !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.content__nav .nav-item button:hover {
background: rgba(225, 32, 52, 0.15) !important;
border-color: rgba(225, 32, 52, 0.3) !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
}
.content__nav .nav-item button:hover::before {
transform: scaleX(1) !important;
}
.content__nav .nav-item button.active {
background: linear-gradient(135deg, rgba(225, 32, 52, 0.2), rgba(193, 28, 40, 0.15)) !important;
border-color: rgba(225, 32, 52, 0.4) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(225, 32, 52, 0.2) !important;
}
.content__nav .nav-item button.active::before {
transform: scaleX(1) !important;
}
.content__nav .nav-item button .svg-icon {
width: 14px !important;
height: 14px !important;
fill: currentColor !important;
}
/* Content Main */
.content__main {
background: rgba(26, 26, 26, 0.15) !important;
backdrop-filter: blur(5px) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-radius: 12px !important;
padding: 25px !important;
margin-top: 20px !important;
}
/* Settings Title */
.settings__title {
color: #ffffff !important;
font-size: 1.5rem !important;
font-weight: 600 !important;
margin-bottom: 25px !important;
letter-spacing: 0.5px !important;
position: relative !important;
display: inline-block !important;
padding-bottom: 10px !important;
}
.settings__title::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 50px !important;
height: 3px !important;
background: linear-gradient(90deg, #e12034, transparent) !important;
border-radius: 2px !important;
}
p strong{
color: #ffffff !important;
font-weight: 700 !important;
background: linear-gradient(135deg, #eb2d40, #ffffff) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* ============================================
BENEFITS MODAL STYLES
============================================ */
/* Benefits Modal Container */
.benefits.modal__content {
backdrop-filter: blur(15px) !important;
border-radius: 16px !important;
max-height: 90vh !important;
overflow-y: auto !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(235, 45, 64, 0.5) rgba(255, 255, 255, 0.1) !important;
}
.benefits.modal__content::-webkit-scrollbar {
width: 8px !important;
}
.benefits.modal__content::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
}
.benefits.modal__content::-webkit-scrollbar-thumb {
background: rgba(235, 45, 64, 0.5) !important;
border-radius: 10px !important;
transition: background 0.3s ease !important;
}
.benefits.modal__content::-webkit-scrollbar-thumb:hover {
background: rgba(235, 45, 64, 0.7) !important;
}
/* Accordion Benefits */
.benefits .accordion-benefits {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin-bottom: 25px !important;
}
.benefits .accordion-benefits__card {
background: linear-gradient(135deg, rgba(235, 45, 64, 0.1), rgba(255, 255, 255, 0.05)) !important;
backdrop-filter: blur(12px) !important;
border: none !important;
border-left: 3px solid #ffffff !important;
border-radius: 12px !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
}
.benefits .accordion-benefits__card::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 2px !important;
background: linear-gradient(90deg, #eb2d40, #ffffff, #eb2d40) !important;
opacity: 0 !important;
transition: opacity 0.4s ease !important;
}
.benefits .accordion-benefits__card:hover {
border-left-color: #ffffff !important;
border-left-width: 3px !important;
transform: translateX(3px) !important;
box-shadow: 0 6px 24px rgba(235, 45, 64, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
background: linear-gradient(135deg, rgba(235, 45, 64, 0.15), rgba(255, 255, 255, 0.1)) !important;
}
.benefits .accordion-benefits__card:hover::before {
opacity: 1 !important;
}
/* Benefits Accordion Card Color Variants - Tüm Border'lar Beyaz */
.benefits .accordion-benefits__card--topaz {
border-left: 3px solid #ffffff !important;
}
.benefits .accordion-benefits__card--topaz::before {
background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff) !important;
}
.benefits .accordion-benefits__card--obsidian {
border-left: 3px solid #ffffff !important;
}
.benefits .accordion-benefits__card--obsidian::before {
background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff) !important;
}
.benefits .accordion-benefits__card--diamond {
border-left: 3px solid #ffffff !important;
}
.benefits .accordion-benefits__card--diamond::before {
background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff) !important;
}
.benefits .accordion-benefits__card--pearl {
border-left: 3px solid #ffffff !important;
}
.benefits .accordion-benefits__card--pearl::before {
background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff) !important;
}
.benefits .accordion-benefits__card--copper {
border-left: 3px solid #ffffff !important;
}
.benefits .accordion-benefits__card--copper::before {
background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff) !important;
}
.benefits .accordion-benefits__card--emerald {
border-left: 3px solid #ffffff !important;
}
.benefits .accordion-benefits__card--emerald::before {
background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff) !important;
}
.benefits .accordion-benefits__card--king {
border-left: 3px solid #ffffff !important;
}
.benefits .accordion-benefits__card--king::before {
background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff) !important;
}
.benefits .accordion-benefits__card--jade {
border-left: 3px solid #ffffff !important;
}
.benefits .accordion-benefits__card--jade::before {
background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff) !important;
}
.benefits .accordion-benefits__card--sapphire {
border-left: 3px solid #ffffff !important;
}
.benefits .accordion-benefits__card--sapphire::before {
background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff) !important;
}
.benefits .accordion-benefits__card--onyx {
border-left: 3px solid #ffffff !important;
}
.benefits .accordion-benefits__card--onyx::before {
background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff) !important;
}
.benefits .accordion-benefits__card--bronze {
border-left: 3px solid #ffffff !important;
}
.benefits .accordion-benefits__card--bronze::before {
background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff) !important;
}
/* Accordion Button */
.benefits .accordion-benefits__card button {
background: transparent !important;
border: none !important;
padding: 18px 20px !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
color: #ffffff !important;
font-size: 1rem !important;
font-weight: 600 !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer !important;
position: relative !important;
}
.benefits .accordion-benefits__card button:hover {
background: rgba(235, 45, 64, 0.08) !important;
color: #ffffff !important;
}
.benefits .accordion-benefits__card button:not(.collapsed) {
background: rgba(235, 45, 64, 0.12) !important;
color: #ffffff !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.benefits .accordion-benefits__card button .d-flex {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.benefits .accordion-benefits__card button .rank-icon {
width: 35px !important;
height: 35px !important;
object-fit: contain !important;
filter: drop-shadow(0 2px 8px rgba(235, 45, 64, 0.4)) !important;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.benefits .accordion-benefits__card button:hover .rank-icon {
transform: scale(1.1) rotate(5deg) !important;
filter: drop-shadow(0 4px 12px rgba(235, 45, 64, 0.6)) !important;
}
.benefits .accordion-benefits__card button span {
color: #ffffff !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
font-size: 0.95rem !important;
}
.benefits .accordion-benefits__card button svg {
width: 20px !important;
height: 20px !important;
stroke: #ffffff !important;
stroke-width: 2 !important;
fill: none !important;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.benefits .accordion-benefits__card button:not(.collapsed) svg {
transform: rotate(180deg) !important;
stroke: #eb2d40 !important;
}
.benefits .accordion-benefits__card button:hover svg {
stroke: #eb2d40 !important;
}
/* Accordion Collapse Content */
.benefits .accordion-benefits__card .collapse {
background: rgba(26, 26, 26, 0.3) !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.benefits .accordion-benefits__card .collapse.show {
display: block !important;
}
.benefits .accordion-benefits__card .collapse ul {
list-style: none !important;
padding: 20px !important;
margin: 0 !important;
}
.benefits .accordion-benefits__card .collapse ul div {
margin: 0 !important;
}
.benefits .accordion-benefits__card .collapse ul p {
color: rgba(255, 255, 255, 0.9) !important;
font-size: 0.95rem !important;
line-height: 1.8 !important;
margin: 0 !important;
text-align: left !important;
}
.benefits .accordion-benefits__card .collapse ul p strong {
color: #ffffff !important;
font-weight: 700 !important;
background: linear-gradient(135deg, #eb2d40, #ffffff) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.benefits .accordion-benefits__card .collapse ul p em {
color: #eb2d40 !important;
font-style: normal !important;
font-weight: 600 !important;
}
/* Benefits Form Button */
.benefits .form__btn {
background: linear-gradient(135deg, #eb2d40, #ff4757) !important;
border: none !important;
padding: 14px 30px !important;
border-radius: 10px !important;
color: #ffffff !important;
font-size: 1rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer !important;
box-shadow: 0 4px 16px rgba(235, 45, 64, 0.3) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-top: 10px !important;
}
.benefits .form__btn:hover {
background: linear-gradient(135deg, #ff4757, #eb2d40) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 24px rgba(235, 45, 64, 0.5) !important;
}
.benefits .form__btn:active {
transform: translateY(0px) !important;
box-shadow: 0 2px 8px rgba(235, 45, 64, 0.4) !important;
}
.benefits .form__btn span {
color: #ffffff !important;
}
/* Benefits Modal Responsive */
@media (max-width: 768px) {
.benefits.modal__content {
padding: 20px !important;
max-height: 95vh !important;
}
.benefits .accordion-benefits {
gap: 10px !important;
margin-bottom: 20px !important;
}
.benefits .accordion-benefits__card {
border-radius: 10px !important;
}
.benefits .accordion-benefits__card button {
padding: 15px 18px !important;
font-size: 0.95rem !important;
}
.benefits .accordion-benefits__card button .rank-icon {
width: 30px !important;
height: 30px !important;
}
.benefits .accordion-benefits__card button span {
font-size: 0.9rem !important;
}
.benefits .accordion-benefits__card .collapse ul {
padding: 15px !important;
}
.benefits .accordion-benefits__card .collapse ul p {
font-size: 0.9rem !important;
line-height: 1.7 !important;
}
.benefits .form__btn {
padding: 12px 25px !important;
font-size: 0.95rem !important;
}
}
@media (max-width: 480px) {
.benefits.modal__content {
padding: 15px !important;
border-radius: 12px !important;
}
.benefits .accordion-benefits {
gap: 8px !important;
margin-bottom: 15px !important;
}
.benefits .accordion-benefits__card {
border-radius: 8px !important;
border-left-width: 2px !important;
}
.benefits .accordion-benefits__card::before {
height: 1px !important;
}
.benefits .accordion-benefits__card button {
padding: 12px 15px !important;
font-size: 0.9rem !important;
}
.benefits .accordion-benefits__card button .rank-icon {
width: 28px !important;
height: 28px !important;
}
.benefits .accordion-benefits__card button span {
font-size: 0.85rem !important;
}
.benefits .accordion-benefits__card button svg {
width: 18px !important;
height: 18px !important;
}
.benefits .accordion-benefits__card .collapse ul {
padding: 12px !important;
}
.benefits .accordion-benefits__card .collapse ul p {
font-size: 0.85rem !important;
line-height: 1.6 !important;
}
.benefits .form__btn {
padding: 10px 20px !important;
font-size: 0.9rem !important;
letter-spacing: 0.5px !important;
}
}
/* Settings Level */
.settings__level {
color: #ffffff !important;
font-size: 1rem !important;
font-weight: 600 !important;
}
/* Accordion Collapse */
.collapse.show {
display: block !important;
}
/* Settings Container */
.settings {
padding: 20px !important;
}
.settings__container {
margin-bottom: 20px !important;
}
.settings__text {
color: #b0b0b0 !important;
font-size: 0.95rem !important;
line-height: 1.6 !important;
margin: 0 !important;
}
/* Settings Form */
.settings__form {
margin-bottom: 20px !important;
}
.form__group {
margin-bottom: 20px !important;
}
.form__label {
color: #ffffff !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
margin-bottom: 8px !important;
display: block !important;
}
.form__label b {
color: #e12034 !important;
margin-left: 4px !important;
}
.form__input {
width: 100% !important;
padding: 12px 15px !important;
background: rgba(26, 26, 26, 0.8) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 0.9rem !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.form__input:focus {
outline: none !important;
border-color: #e12034 !important;
background: rgba(26, 26, 26, 0.9) !important;
box-shadow: 0 0 0 3px rgba(225, 32, 52, 0.1) !important;
}
.form__input::placeholder {
color: #666666 !important;
}
/* Form Select */
.form__select {
background: rgba(26, 26, 26, 0.8) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
color: #ffffff !important;
padding: 12px 15px !important;
font-size: 0.9rem !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer !important;
}
.form__select:focus {
outline: none !important;
border-color: #e12034 !important;
box-shadow: 0 0 0 3px rgba(225, 32, 52, 0.1) !important;
}
/* Form Image Upload */
.form__img {
border: 2px dashed rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
padding: 30px !important;
text-align: center !important;
background: rgba(26, 26, 26, 0.4) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer !important;
}
.form__img:hover {
border-color: rgba(225, 32, 52, 0.3) !important;
background: rgba(225, 32, 52, 0.05) !important;
}
.form__img label {
display: block !important;
color: #b0b0b0 !important;
font-size: 0.9rem !important;
cursor: pointer !important;
}
.form__img input[type="file"] {
display: none !important;
}
/* Form Note */
.form__note {
color: #888888 !important;
font-size: 0.85rem !important;
margin-top: 10px !important;
margin-bottom: 0 !important;
}
/* Settings Actions */
.settings__actions {
margin-top: 25px !important;
padding-top: 20px !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.settings__note {
color: #888888 !important;
font-size: 0.85rem !important;
margin-bottom: 15px !important;
text-align: center !important;
}
.settings__btns {
display: flex !important;
justify-content: center !important;
gap: 15px !important;
}
.settings__btn {
background: linear-gradient(135deg, #e12034, #c01c28) !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 30px !important;
color: #ffffff !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 12px rgba(225, 32, 52, 0.3) !important;
}
.settings__btn:hover:not(:disabled) {
background: linear-gradient(135deg, #f13044, #d11e30) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(225, 32, 52, 0.4) !important;
}
.settings__btn:active:not(:disabled) {
transform: translateY(0) !important;
}
.settings__btn:disabled,
.settings__btn.disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
box-shadow: none !important;
}
/* Responsive */
@media (max-width: 768px) {
.content__main {
padding: 20px !important;
}
.settings__title {
font-size: 1.3rem !important;
}
.accordion-head {
padding: 15px !important;
font-size: 0.95rem !important;
}
.form__group {
margin-bottom: 18px !important;
}
.form__input,
.form__select {
padding: 10px 12px !important;
font-size: 0.85rem !important;
}
.settings__btn {
padding: 10px 25px !important;
font-size: 0.9rem !important;
}
.content__nav {
gap: 6px !important;
}
.content__nav .nav-item button {
padding: 8px 12px !important;
font-size: 0.85rem !important;
}
}
@media (max-width: 480px) {
.content__main {
padding: 15px !important;
}
.settings__title {
font-size: 1.2rem !important;
}
.accordion-head {
padding: 12px !important;
font-size: 0.9rem !important;
}
.form__input,
.form__select {
padding: 8px 10px !important;
font-size: 0.8rem !important;
}
.settings__btn {
padding: 10px 20px !important;
font-size: 0.85rem !important;
}
.content__nav {
flex-direction: column !important;
}
.content__nav .nav-item {
width: 100% !important;
}
.content__nav .nav-item button {
width: 100% !important;
justify-content: space-between !important;
}
}
.accordion-benefits__card--bronze{
border-left: 3px solid #EB2D40 !important;
}
.accordion-benefits__card--bronze:before{
background: linear-gradient(to right, #EB2D40, #ffffff) !important;
}
.accordion-benefits__card--silver{
border-left: 3px solid #ffffff !important;
}
.accordion-benefits__card--silver:before{
background: linear-gradient(to right, #EB2D40, #ffffff) !important;
}
.accordion-benefits__card--gold{
border-left: 3px solid #EB2D40 !important;
}
.accordion-benefits__card--gold:before{
background: linear-gradient(to right, #EB2D40, #ffffff) !important;
}
.accordion-benefits__card--rose{
border-left: 3px solid #ffffff !important;
}
.accordion-benefits__card--rose:before{
background: linear-gradient(to right, #EB2D40, #ffffff) !important;
}
/* ============================================
VIP PROFILE & RANKING STYLES
============================================ */
/* VIP User Progress Wrapper */
#vip-user-progress {
background: rgba(235, 45, 64, 0.1) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 16px !important;
padding: 25px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
margin-bottom: 30px !important;
}
#vip-user-progress:hover {
border-color: rgba(235, 45, 64, 0.4) !important;
box-shadow: 0 8px 32px rgba(235, 45, 64, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
background: rgba(235, 45, 64, 0.15) !important;
}
/* Modal Profile */
.modal__profile {
margin-bottom: 25px !important;
padding-bottom: 25px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.modal__icon {
width: 60px !important;
height: 60px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
background: rgba(255, 255, 255, 0.05) !important;
border-radius: 12px !important;
padding: 8px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.modal__icon .rank-icon {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
filter: drop-shadow(0 4px 12px rgba(235, 45, 64, 0.4)) !important;
}
.modal__user p {
color: #ffffff !important;
font-size: 1.2rem !important;
font-weight: 600 !important;
margin: 0 !important;
margin-bottom: 6px !important;
letter-spacing: 0.3px !important;
}
.modal__user span {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 0.9rem !important;
margin: 0 !important;
}
/* Modal Progress */
.modal__progress {
margin-top: 20px !important;
}
.modal__progress-text {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 12px !important;
color: rgba(255, 255, 255, 0.8) !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
}
.modal__progress-text--white {
margin-top: 12px !important;
margin-bottom: 0 !important;
color: #ffffff !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
}
.modal__progress-text--white span {
display: flex !important;
align-items: center !important;
gap: 10px !important;
color: #ffffff !important;
}
.modal__progress-text--white .rank-icon {
width: 24px !important;
height: 24px !important;
object-fit: contain !important;
}
/* Modal Progress Bar */
.modal__progress-bar {
width: 100% !important;
height: 10px !important;
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
overflow: hidden !important;
position: relative !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
.modal__progress-bar span {
display: block !important;
height: 100% !important;
background: linear-gradient(90deg, #eb2d40, #ff4757, #ffffff) !important;
border-radius: 10px !important;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
box-shadow: 0 0 15px rgba(235, 45, 64, 0.6), 0 2px 8px rgba(255, 255, 255, 0.2) !important;
}
.modal__progress-bar span::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent) !important;
animation: shimmer 2s infinite !important;
}
@keyframes shimmer {
0% {
transform: translateX(-100%) !important;
}
100% {
transform: translateX(100%) !important;
}
}
/* VIP Section Title */
.section__title--center {
color: #ffffff !important;
font-size: 2rem !important;
font-weight: 700 !important;
margin-bottom: 40px !important;
letter-spacing: 1px !important;
position: relative !important;
padding-bottom: 20px !important;
text-align: center !important;
display: block !important;
width: 100% !important;
}
.section__title--center::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100px !important;
height: 4px !important;
background: linear-gradient(90deg, transparent, #eb2d40, #ffffff, #eb2d40, transparent) !important;
border-radius: 2px !important;
box-shadow: 0 2px 8px rgba(235, 45, 64, 0.4) !important;
}
/* Ranking Cards Container - Gap Artırma */
.row .col-12.col-md-4.col-xx-4 {
margin-bottom: 25px !important;
}
.row .col-12.col-md-4.col-xx-4:last-child {
margin-bottom: 0 !important;
}
/* Ranking Cards */
.ranking {
background: linear-gradient(135deg, rgba(235, 45, 64, 0.1), rgba(255, 255, 255, 0.05)) !important;
backdrop-filter: blur(15px) !important;
border: 2px solid #ffffff !important;
border-radius: 16px !important;
padding: 30px 25px !important;
min-height: 550px !important;
height: 550px !important;
max-height: 550px !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
overflow: hidden !important;
}
.ranking::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, #eb2d40, #ffffff, #eb2d40) !important;
opacity: 0 !important;
transition: opacity 0.4s ease !important;
}
.ranking::after {
content: "" !important;
position: absolute !important;
top: -50% !important;
left: -50% !important;
width: 200% !important;
height: 200% !important;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent) !important;
opacity: 0 !important;
transition: opacity 0.4s ease !important;
}
.ranking:hover {
border-color: #ffffff !important;
border-width: 2px !important;
transform: translateY(-8px) scale(1.02) !important;
box-shadow: 0 12px 40px rgba(235, 45, 64, 0.3), 0 0 0 2px rgba(235, 45, 64, 0.3) !important;
background: linear-gradient(135deg, rgba(235, 45, 64, 0.2), rgba(255, 255, 255, 0.1)) !important;
}
.ranking:hover::before {
opacity: 1 !important;
}
.ranking:hover::after {
opacity: 1 !important;
}
/* Ranking Header */
.ranking > div:first-child {
margin-bottom: 20px !important;
padding-bottom: 20px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.rank-icon {
width: 45px !important;
height: 45px !important;
object-fit: contain !important;
filter: drop-shadow(0 4px 12px rgba(235, 45, 64, 0.4)) brightness(1.1) !important;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ranking:hover .rank-icon {
transform: scale(1.15) rotate(8deg) !important;
filter: drop-shadow(0 6px 16px rgba(235, 45, 64, 0.6)) brightness(1.2) !important;
}
.ranking__name {
color: #ffffff !important;
font-size: 1.3rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
text-shadow: 0 2px 8px rgba(235, 45, 64, 0.3) !important;
}
/* Ranking Amount */
.ranking__amount {
display: block !important;
color: #eb2d40 !important;
font-size: 1.8rem !important;
font-weight: 800 !important;
margin: 15px 0 8px 0 !important;
letter-spacing: 1px !important;
text-shadow: 0 2px 10px rgba(235, 45, 64, 0.5) !important;
}
/* Ranking Wager */
.ranking__wager {
display: block !important;
color: rgba(255, 255, 255, 0.7) !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
margin-bottom: 20px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
/* Ranking List */
.ranking__list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
flex: 1 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
max-height: 200px !important;
min-height: 200px !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(235, 45, 64, 0.5) rgba(255, 255, 255, 0.1) !important;
-webkit-overflow-scrolling: touch !important;
}
.ranking__list::-webkit-scrollbar {
width: 6px !important;
}
.ranking__list::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
}
.ranking__list::-webkit-scrollbar-thumb {
background: rgba(235, 45, 64, 0.5) !important;
border-radius: 10px !important;
transition: background 0.3s ease !important;
}
.ranking__list::-webkit-scrollbar-thumb:hover {
background: rgba(235, 45, 64, 0.7) !important;
}
.ranking__list div {
margin: 0 !important;
}
.ranking__list p {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 0.95rem !important;
line-height: 1.8 !important;
margin: 0 !important;
text-align: left !important;
}
.ranking__list p strong {
color: #ffffff !important;
font-weight: 600 !important;
}
/* VIP Progress Wrapper Responsive */
@media (max-width: 1200px) {
.section__title--center {
font-size: 1.8rem !important;
}
.ranking {
padding: 28px 22px !important;
min-height: 520px !important;
height: 520px !important;
max-height: 520px !important;
}
.ranking__list {
max-height: 180px !important;
min-height: 180px !important;
}
.row .col-12.col-md-4.col-xx-4 {
margin-bottom: 22px !important;
}
}
@media (max-width: 1024px) {
.section__title--center {
font-size: 1.7rem !important;
margin-bottom: 35px !important;
}
.ranking {
padding: 25px 20px !important;
min-height: 500px !important;
height: 500px !important;
max-height: 500px !important;
}
.ranking__list {
max-height: 160px !important;
min-height: 160px !important;
}
.ranking__name {
font-size: 1.2rem !important;
}
.ranking__amount {
font-size: 1.6rem !important;
}
.row .col-12.col-md-4.col-xx-4 {
margin-bottom: 20px !important;
}
}
@media (max-width: 768px) {
#vip-user-progress {
padding: 22px !important;
margin-bottom: 25px !important;
}
.modal__icon {
width: 55px !important;
height: 55px !important;
}
.modal__user p {
font-size: 1.1rem !important;
}
.modal__user span {
font-size: 0.85rem !important;
}
.modal__progress-text {
font-size: 0.9rem !important;
}
.modal__progress-text--white {
font-size: 0.85rem !important;
}
.modal__progress-bar {
height: 9px !important;
}
.section__title--center {
font-size: 1.6rem !important;
margin-bottom: 30px !important;
margin-top: 25px !important;
padding-bottom: 18px !important;
text-align: center !important;
display: block !important;
width: 100% !important;
}
.section__title--center::after {
width: 80px !important;
height: 3px !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
.ranking {
padding: 22px 18px !important;
border-radius: 14px !important;
min-height: 480px !important;
height: 480px !important;
max-height: 480px !important;
}
.ranking__list {
max-height: 140px !important;
min-height: 140px !important;
}
.ranking:hover {
transform: translateY(-6px) scale(1.01) !important;
}
.ranking__name {
font-size: 1.15rem !important;
}
.ranking__amount {
font-size: 1.5rem !important;
margin: 12px 0 6px 0 !important;
}
.ranking__wager {
font-size: 0.85rem !important;
margin-bottom: 18px !important;
}
.rank-icon {
width: 38px !important;
height: 38px !important;
}
.ranking__list p {
font-size: 0.9rem !important;
line-height: 1.7 !important;
}
.row .col-12.col-md-4.col-xx-4 {
margin-bottom: 20px !important;
}
}
@media (max-width: 480px) {
#vip-user-progress {
padding: 18px !important;
margin-bottom: 20px !important;
border-radius: 14px !important;
}
.modal__profile {
margin-bottom: 20px !important;
padding-bottom: 20px !important;
}
.modal__icon {
width: 50px !important;
height: 50px !important;
padding: 6px !important;
}
.modal__user p {
font-size: 1rem !important;
}
.modal__user span {
font-size: 0.8rem !important;
}
.modal__progress {
margin-top: 15px !important;
}
.modal__progress-text {
font-size: 0.85rem !important;
margin-bottom: 10px !important;
}
.modal__progress-text--white {
font-size: 0.8rem !important;
margin-top: 10px !important;
}
.modal__progress-text--white .rank-icon {
width: 20px !important;
height: 20px !important;
}
.modal__progress-bar {
height: 8px !important;
}
.section__title--center {
font-size: 1.4rem !important;
margin-bottom: 25px !important;
margin-top: 30px !important;
padding-bottom: 15px !important;
letter-spacing: 0.5px !important;
text-align: center !important;
display: block !important;
width: 100% !important;
}
.section__title--center::after {
width: 60px !important;
height: 2px !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
.ranking {
padding: 20px 15px !important;
border-radius: 12px !important;
min-height: 450px !important;
height: 450px !important;
max-height: 450px !important;
}
.ranking__list {
max-height: 120px !important;
min-height: 120px !important;
}
.ranking::before {
height: 3px !important;
}
.ranking:hover {
transform: translateY(-4px) scale(1.01) !important;
box-shadow: 0 8px 24px rgba(235, 45, 64, 0.25) !important;
}
.ranking > div:first-child {
margin-bottom: 18px !important;
padding-bottom: 18px !important;
}
.ranking__name {
font-size: 1.05rem !important;
letter-spacing: 1px !important;
}
.ranking__amount {
font-size: 1.3rem !important;
margin: 10px 0 6px 0 !important;
}
.ranking__wager {
font-size: 0.8rem !important;
margin-bottom: 15px !important;
}
.ranking__list p {
font-size: 0.85rem !important;
line-height: 1.6 !important;
}
.rank-icon {
width: 35px !important;
height: 35px !important;
}
.ranking:hover .rank-icon {
transform: scale(1.1) rotate(6deg) !important;
}
.row .col-12.col-md-4.col-xx-4 {
margin-bottom: 18px !important;
}
}
@media (max-width: 360px) {
#vip-user-progress {
padding: 15px !important;
}
.modal__icon {
width: 45px !important;
height: 45px !important;
}
.section__title--center {
font-size: 1.3rem !important;
margin-top: 25px !important;
text-align: center !important;
display: block !important;
width: 100% !important;
}
.section__title--center::after {
left: 50% !important;
transform: translateX(-50%) !important;
}
.ranking {
padding: 18px 12px !important;
min-height: 420px !important;
height: 420px !important;
max-height: 420px !important;
}
.ranking__list {
max-height: 100px !important;
min-height: 100px !important;
}
.ranking__name {
font-size: 1rem !important;
}
.ranking__amount {
font-size: 1.2rem !important;
}
}
/* ============================================
MEYDAN OKUMALAR SAYFASI (CHALLENGES)
============================================ */
/* Game Card List Container */
.game-card-list {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 24px !important;
padding: 30px 0 !important;
max-width: 1400px !important;
margin: 0 auto !important;
}
/* Game Card */
.game-card {
display: flex !important;
flex-direction: column !important;
background: rgba(26, 26, 26, 0.8) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 16px !important;
overflow: hidden !important;
text-decoration: none !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
.game-card:hover {
transform: translateY(-8px) !important;
border-color: rgba(225, 32, 52, 0.4) !important;
box-shadow: 0 12px 32px rgba(225, 32, 52, 0.2), 0 0 0 1px rgba(225, 32, 52, 0.1) !important;
}
.game-card::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 3px !important;
background: linear-gradient(90deg, transparent, #e12034, transparent) !important;
opacity: 0 !important;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 1 !important;
}
.game-card:hover::before {
opacity: 1 !important;
}
/* Game Image Wrapper */
.game-image-wrapper {
position: relative !important;
width: 100% !important;
overflow: hidden !important;
background: rgba(15, 15, 15, 0.5) !important;
display: block !important;
padding: 0 !important;
}
.game-image-wrapper .lazy-load-image-background {
width: 100% !important;
height: auto !important;
display: block !important;
line-height: 0 !important;
}
.game-image-wrapper .lazy-load-image-background[style*="height"] {
height: auto !important;
}
.game-image-wrapper img,
.game-image-wrapper .lazy-load-image-background img,
.game-image {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
min-height: auto !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.game-image-wrapper img[height="100%"],
.game-image-wrapper img[width="100%"] {
width: 100% !important;
height: auto !important;
}
.game-card:hover .game-image-wrapper img,
.game-card:hover .game-image-wrapper .lazy-load-image-background img,
.game-card:hover .game-image {
transform: scale(1.05) !important;
}
.game-image-wrapper::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 40% !important;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent) !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* Game Content */
.game-content {
padding: 20px 24px !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
flex: 1 !important;
}
/* Game Title - Hidden */
.game-title {
display: none !important;
}
.game-title.one-line-ellipsis {
display: none !important;
}
/* Game Studio */
.game-studio {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
margin: 0 !important;
margin-bottom: 4px !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
}
/* Game Meta */
.game-meta {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
margin-top: 0 !important;
padding-top: 14px !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.game-meta p {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
gap: 12px !important;
}
.game-meta p > span:first-child {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
letter-spacing: 0.3px !important;
flex-shrink: 0 !important;
}
.game-meta p > span:last-child {
color: #ffffff !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
text-align: right !important;
letter-spacing: 0.5px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
}
/* Instrument Icon Wrapper */
.game-meta .instrument-icon-wrapper {
width: 24px !important;
height: 24px !important;
flex-shrink: 0 !important;
border-radius: 50% !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.1) !important;
}
.game-meta .instrument-icon-wrapper svg {
width: 100% !important;
height: 100% !important;
}
/* Challenges Div */
.challenges {
margin-top: 12px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Responsive Meydan Okumalar */
@media (max-width: 1200px) {
.game-card-list {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
gap: 20px !important;
}
}
@media (max-width: 768px) {
.game-card-list {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
gap: 16px !important;
padding: 20px 0 !important;
}
.game-content {
padding: 20px !important;
gap: 12px !important;
}
.game-title {
font-size: 1.15rem !important;
}
.game-studio {
font-size: 0.85rem !important;
}
.game-meta {
gap: 10px !important;
padding-top: 12px !important;
}
.game-meta p > span:first-child {
font-size: 0.9rem !important;
}
.game-meta p > span:last-child {
font-size: 1rem !important;
}
#challenge-973,
#challenge-972,
[id^="challenge-"],
#challenge-prize-973,
#challenge-prize-972,
[id^="challenge-prize-"] {
font-size: 1rem !important;
}
}
@media (max-width: 480px) {
.game-card-list {
grid-template-columns: 1fr !important;
gap: 16px !important;
padding: 16px 0 !important;
}
.game-content {
padding: 16px !important;
gap: 10px !important;
}
.game-title {
font-size: 1.05rem !important;
}
.game-meta {
gap: 8px !important;
}
.game-meta p > span:first-child {
font-size: 0.85rem !important;
}
.game-meta p > span:last-child {
font-size: 0.95rem !important;
}
}
[class^="slot__title--"],
[class*=" slot__title--"] {
display: none !important;
}