/* ===== UX fixes: remove mobile/desktop blue tap/focus highlights ===== */    
* {    
  -webkit-tap-highlight-color: transparent;    
  -webkit-touch-callout: none;    
  -webkit-user-select: none;    
  -ms-touch-action: manipulation;    
  touch-action: manipulation;    
}    
    
/* remove default outlines (but keep accessible focus styles if needed later) */    
button, a {    
  outline: none;    
  -webkit-appearance: none;    
  appearance: none;    
  border-radius: 0;    
}    
    
/* if you need keyboard focus visible for accessibility later, add a custom :focus rule */    
button:focus, a:focus {    
  outline: none;    
  box-shadow: 0 0 0 3px rgba(7,153,153,0.12); /* soft focus ring if desired */    
}    
    
    
body {    
    font-family: Arial, sans-serif;    
    margin: 0;    
    padding: 10px;    
    transition: background 0.3s, color 0.3s;    
    padding-top: 60px;    
}    
    
.container {    
    max-width: 1200px;    
    margin: auto;    
    position: relative;    
}    
    
h1 {    
    text-align: center;    
    margin-bottom: 20px;    
}    
    
.filters {    
    display: flex;    
    justify-content: center;    
    gap: 15px;    
    margin-bottom: 20px;    
    flex-wrap: wrap;    
}    
    
.filters select,    
.filters input {    
    padding: 5px 10px;    
    font-size: 14px;    
}    
    
#top-bar {    
    position: fixed;    
    top: 0;    
    left: 0;    
    width: 100%;    
    height: 60px;    
    display: flex;    
    align-items: center;    
    padding: 0 15px;    
    background: #fff;    
    z-index: 2000;    
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);    
    border-bottom-left-radius: 10px;    
    border-bottom-right-radius: 10px;    
}    
    
#site-title {    
    position: absolute;    
    top: 50%; /* Vertikal mərkəz üçün */    
    left: 50%; /* Horizontal mərkəz üçün */    
    transform: translate(-50%, -50%); /* Hər iki ox üzrə mərkəzləşdirmə */    
    font-family: 'Montserrat Alternates', 'Poppins', sans-serif;    
    font-weight: 600;    
    font-size: 22px;    
    color: #0B76B7;    
    letter-spacing: 0.8px;    
    text-transform: uppercase;    
    background: linear-gradient(90deg, #079, #00b7ff);    
    -webkit-background-clip: text;    
    -webkit-text-fill-color: transparent;    
}    
    
#slider-toggle {    
    z-index: 2100;    
}    
    
#mode-toggle {    
    z-index: 2100;    
}    
    
.game-list {    
    display: grid;    
    grid-template-columns: repeat(auto-fill, minmax(160px,1fr));    
    gap: 15px;    
    margin-bottom: 80px;    
}    
    
.game {    
    padding: 10px;    
    border-radius: 10px;    
    text-align: center;    
    background: #fff;    
    border: 2px solid #fafafa;    
    transition: transform 0.2s, box-shadow 0.2s, background 0.3s, color 0.3s;    
    position: relative;    
}    
    
.game:hover {    
    transform: translateY(-5px);    
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);    
}    
    
.game:hover .cart-icon {    
    transform: none !important; /* ← kart qalxsa belə səbət qalxmasın */    
}    
    
.game {    
    position: relative;   /* ← bunu əlavə edirik */    
}    
    
.image-wrapper {    
    position: relative;    
}    
    
.image-wrapper img {    
    width: 100%;    
    border-radius: 8px;    
    display: block;    
}    
    
.platform-label {    
    position: absolute;    
    bottom: 5px;    
    left: 5px;    
    padding: 2px 5px;    
    font-size: 11px;    
    border-radius: 3px;    
    border: 1px solid #fff;    
    transition: background 0.3s, color 0.3s;    
}    
    
.cart-icon {    
    position: absolute;    
    bottom: 5px;    
    right: 5px;    
    width: 30px;    
    height: 30px;    
    cursor: pointer;    
    z-index: 20; /* şəkildən və game-dən yuxarı olsun */    
    border-radius: 3px; /* Platform label ilə uyğun */    
    background: rgba(255,255,255,0.8); /* şəffaf fon əlavə
    border: 1px solid #fff; /* Platform label ilə eyni */    
    display: flex;    
    justify-content: center;    
    align-items: center;    
    padding: 0;    
    box-shadow: 0 4px 12px rgba(0,0,0,0.35); /* daha dərin kölgə */    
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;    
}    
    
.cart-icon:hover {    
    transform: scale(1.15);    
    z-index: 30;     /* hover zamanı ən üst olsun */    
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);    
    background: linear-gradient(135deg, #00b7ff, #079);    
}    
    
.cart-icon img {    
    width: 40px;    
    height: 40px;    
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));    
    transition: transform 0.3s;    
}    
    
.cart-icon:hover img {    
    transform: scale(1.1); /* hover zamanı ikon da böyüsün */    
}    
    
    
.favorite-icon {    
    position: absolute;    
    top: 1px;          /* kənardan məsafəni azca artırdıq */  
    right: 1px;        /* kənardan məsafəni azca artırdıq */  
    font-size: 26px;   /* əvvəl 16px idi, indi böyüdülüb */  
    cursor: pointer;    
    padding: 6px;      /* ikonun ətrafında boşluq */  
    border-radius: 50%;    
    display: flex;    
    justify-content: center;    
    align-items: center;    
    z-index: 25;       /* səbət ikonundan yuxarı */  
    transition: transform 0.3s, color 0.3s;    
}    

.favorite-icon i {    
    color: red; /* dolu favorit ikonu */    
    transition: transform 0.3s;    
}    

.favorite-icon:hover {    
    transform: scale(1.3); /* hover zamanı böyüsün */    
}
  
    
.version {    
    font-size: 12px;    
    color: #666;    
    margin-top: 4px;    
}    
    
.title {    
    font-weight: bold;    
    font-size: 14px;    
    margin-top: 4px;    
    height: 38px;    
    overflow: hidden;    
}    
    
.discount-percent {    
    color: #079;    
    font-size: 12px;    
    margin-top: 2px;    
}    
    
.discounted-price.no-discount {    
    color: #00ccff;    
    font-weight: bold;    
}    
    
.prices {    
    margin-top: 4px;    
}    
    
.discounted-price {    
    color: #d40000;    
    font-weight: bold;    
    margin-right: 5px;    
}    
    
.price-original {    
    text-decoration: line-through;    
    color: #666;    
    font-size: 13px;    
}    
    
.pagination {    
    display: flex;    
    justify-content: center;    
    margin-top: 20px;    
    gap: 5px;    
    margin-bottom: 80px;    
    position: relative;    
    z-index: 1;    
}    
    
.pagination button {    
    padding: 5px 10px;    
    font-size: 14px;    
    cursor: pointer;    
    border-radius: 5px;    
    border: 1px solid #ccc;    
    background: #fff;    
    color: #000;    
    transition: background 0.3s, color 0.3s;    
}    
    
.pagination button.active {    
    background: #079;    
    color: #fff;    
    border-color: #079;    
}    
    
.platform-label.day-mode {        
    background: rgba(0,0,0,1);        
    color: #fff;        
}        
        
.platform-label.night-mode {        
    background: rgba(0,0,0,1);        
    color: #fff;        
}        
    
body.night-mode .pagination button {        
    background: #1e1e1e;        
    color: #fff;        
    border-color: #444;        
}        
        
body.night-mode .pagination button.active {        
    background: #0a9;        
}        
/* Sidebar */    
#slider-bar {    
    position: fixed;    
    top: 0;    
    left: -250px;    
    width: 250px;    
    height: 100%;    
    background: #121212;    
    color: #fff;    
    box-shadow: 2px 0 10px rgba(0,0,0,0.3);    
    transition: left 0.3s;    
    z-index: 3000; /* overlay üstündə */    
    padding-top: 60px;    
    display: flex;    
    flex-direction: column;    
    overflow-y: auto;    
}    
    
#slider-bar.active {    
    left: 0;    
}    
    
#slider-bar.day-mode {    
    background: #fff;    
    color: #000;    
}    
    
#slider-bar a {    
    padding: 12px 20px;    
    text-decoration: none;    
    display: flex;    
    align-items: center;    
    gap: 10px;    
    transition: background 0.2s, color 0.3s;    
    color: inherit;    
}    
    
#slider-bar a:hover {    
    background: rgba(255,255,255,0.1);    
}    

#slider-bar a i{
    width:22px;
    text-align:center;
    font-size:18px;
    color:#0B76B7;
}
    
/* Overlay */    
.overlay {    
    position: fixed;    
    top:0;    
    left:0;    
    width:100%;    
    height:100%;    
    background: rgba(0,0,0,0.4);    
    display:none;    
    z-index: 2500; /* sliderin altı */    
}    
    
.overlay.active {    
    display:block;    
}    
    
/* Close (X) button */    
#slider-bar .close-btn {    
    position: absolute;    
    top: 10px;    
    right: 10px;    
    font-size: 24px;    
    z-index: 3200;    
    background: transparent;    
    border: none;    
    color: #0B76B7;   /* ← düzəliş */    
    cursor: pointer;    
}    
    
    
    
/* Burger button */    
.burger-btn {    
    position: fixed;    
    top: 20px;    
    left: 20px;    
    width: 30px;    
    height: 24px;    
    display: flex;    
    flex-direction: column;    
    justify-content: space-between;    
    cursor: pointer;    
    background: transparent;    
    border: none;    
    z-index: 3300; /* slider və X-dən üstündə */    
    padding: 0;    
}    
    
.burger-btn span {    
    display: block;    
    height: 3px;    
    width: 100%;    
    background: #0B76B7;    
    border-radius: 3px;    
    transition: all 0.4s ease;    
}    
    
.burger-btn.active span:nth-child(1) {    
    transform: rotate(45deg) translate(5px, 5px);    
}    
    
.burger-btn.active span:nth-child(2) {    
    opacity: 0;    
}    
    
.burger-btn.active span:nth-child(3) {    
    transform: rotate(-45deg) translate(5px, -5px);    
}    
    
    
/* Bottom menu */    
#bottom-menu {    
    position: fixed;    
    bottom: 0;    
    left: 0;    
    width: 100%;    
    height: 60px;    
    background: #fff;    
    display: flex;    
    justify-content: space-around;    
    align-items: center;    
    z-index: 2000;    
    box-shadow: 0 -3px 15px rgba(0,0,0,0.2);    
    border-top-left-radius: 15px;    
    border-top-right-radius: 15px;    
}    
    
#bottom-menu a {    
    color: #555;    
    text-decoration: none;    
    font-size: 12px;    
    display: flex;    
    flex-direction: column;    
    align-items: center;    
    justify-content: center;    
    transition: color 0.3s, transform 0.2s;    
    position: relative;    
}    
    
#bottom-menu a i {    
    font-size: 22px;    
    margin-bottom: 4px;    
    transition: color 0.3s;    
}    
    
#bottom-menu a span {    
    font-size: 12px;    
}    
    
#bottom-menu a:hover,    
#bottom-menu a.active {    
    color: #0B76B7;    
    transform: translateY(-2px);    
}    
    
#bottom-menu a.active::after {    
    content: '';    
    position: absolute;    
    top: -8px;    
    width: 40%;    
    height: 3px;    
    background: linear-gradient(135deg,#079,#2575fc);    
    border-radius: 2px;    
}    

/* ===== Toast mesajı ===== */
#toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(7, 153, 153, 0.8); /* şəffaf fon */
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
    z-index: 5000;
    font-size: 14px;
    text-align: center;

    white-space: nowrap; /* mətn sətir qırılmasın */
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background: red;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%;
    pointer-events: none;
}

/* Cart icon premium flash effekti */
.cart-flash {
    animation: flash-cart-premium 0.7s ease-in-out;
}

@keyframes flash-cart-premium {
    0%   { transform: scale(1); filter: brightness(1); color: #fff; }
    20%  { transform: scale(1.3); filter: brightness(2); color: #25D366; }
    50%  { transform: scale(1.5); filter: brightness(2.5); color: #25D366; }
    70%  { transform: scale(1.3); filter: brightness(2); color: #25D366; }
    100% { transform: scale(1); filter: brightness(1); color: #fff; }
}

.scroll-top {
    position: fixed;
    bottom: 80px; /* bottom menunun üstü üçün */
    right: 20px;  /* sağ kənar */
    width: 45px;
    height: 45px;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.scroll-top.show {
    opacity: 1;
}

.scroll-top svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

/* Ox div-i tam ortada */
.scroll-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.scroll-icon i {
    font-size: 18px; /* bir az kiçildik */
    color: #ff2d03;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Pulse effekt klik zamanı */
.scroll-top.pulse {
    animation: pulse-ox 0.5s ease-in-out;
}

@keyframes pulse-ox {
    0%   { transform: scale(1); filter: brightness(1); }
    50%  { transform: scale(1.3); filter: brightness(2.5); }
    100% { transform: scale(1); filter: brightness(1); }
}

#whatsapp-btn {  
    position: fixed;  
    bottom: 140px; /* scroll-to-top üstündə */  
    right: 20px;  
    width: 45px;  
    height: 45px;  
    background-color: #25D366;  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    color: #fff;  
    font-size: 24px;  
    z-index: 10000;  
    text-decoration: none;  
    box-shadow: 0 0 10px rgba(0,0,0,0.3);  
}  
  
/* Pulse halo */  
#whatsapp-btn .pulse-ring,  
#whatsapp-btn .pulse-ring.second {  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    border: 2px solid #25D366;  
    border-radius: 50%;  
    top: 0;  
    left: 0;  
    animation: pulse-ring 2s infinite;  
    opacity: 0.6;  
}  
  
#whatsapp-btn .pulse-ring.second {  
    animation-delay: 1s;  
    opacity: 0.3;  
}  
  
@keyframes pulse-ring {  
    0% {  
        transform: scale(0.8);  
        opacity: 0.6;  
    }  
    50% {  
        transform: scale(1.6);  
        opacity: 0;  
    }  
    100% {  
        transform: scale(0.8);  
        opacity: 0;  
    }  
}

.no-games {
    text-align: center;
    font-size: 1.2rem;
    color: #2e4f59;
    margin: 40px 0;
}  

.slider-container {
    position: relative;
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 20px;
    margin-top: 15px;
}

.slider-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Slider keçid effekti */
.slider-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.slider-slide.active {
    opacity: 1;
    position: relative;
}

/* Dots */
.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.slider-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.3s;
}

.slider-dots .dot.active {
    background: #079; /* yaşıl aktiv nöqtə */
}

/* ===== Premium Slogan ===== */
.site-slogan,
h7 {
    display: block;
    text-align: center;
    margin: 20px 0 28px;

    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;

    color: #111827;
}


.partners-section{
    margin:50px 0 30px;
    text-align:center;
}

.partners-section h3{
    font-family:'Poppins',sans-serif;
    font-size:16px;
    font-weight:500;
    letter-spacing:2px;
    color:#333;
    margin-bottom:20px;
}

.partners-slider{
    display:flex;
    gap:40px;
    overflow:hidden;
    align-items:center;
    white-space:nowrap;
}

.partner-item{
    flex:0 0 auto;
    
    
    transition:.3s;
}

.partner-item img{
    height:60px;
    object-fit:contain;
    
}

.partner-item:hover{
    opacity:1;
}

.partner-item:hover img{
    filter:none;
}