:root {  
    --bg-color: #f4f4f4;  
    --text-color: #1e1e1e;  
    --card-bg: #fff;  
    --card-hover: #f0f0f0;  
    --accent-color: #ff4c4c;  
    --border-gradient: linear-gradient(45deg,#ff6b6b,#f06595,#ff6b6b);  
}  
body.dark {  
    --bg-color: #1e1e1e;  
    --text-color: #f0f0f0;  
    --card-bg: #2c2c2c;  
    --card-hover: #333;  
    --accent-color: #ff4c4c;  
    --border-gradient: linear-gradient(45deg,#ff6b6b,#f06595,#ff6b6b);  
}  
body{  
    font-family: Arial,sans-serif;  
    background: var(--bg-color);  
    color: var(--text-color);  
    margin:0;  
    padding-bottom:70px;  
}  
.container{max-width:1200px;margin:auto;padding:15px;}  
h1{text-align:center;margin-bottom:10px;font-size:22px;}  




/* Ümumi loqo */  
.site-logo {  
    height: 50px;      /* Default hündürlük (masaüstü) */  
    width: auto;       /* En avtomatik */  
    object-fit: contain;  
    display: block;  
    transition: filter 0.3s ease; /* Dark/light mod üçün yumşaq keçid */  
}  
  
/* Kiçik ekranlar (mobil/tablet) üçün */  
@media (max-width: 768px) {  
    .site-logo {  
        height: 35px;  /* Mobil ekran üçün kiçik hündürlük */  
    }  
}  
  
/* Çox kiçik ekranlar (telefon) */  
@media (max-width: 480px) {  
    .site-logo {  
        height: 30px;  /* Telefon üçün hündürlük */  
    }  
}  
  
/* Dark mode üçün */  
body.dark-mode .site-logo {  
    filter: brightness(0) invert(1); /* Ağ loqo üçün */  
}  
  
/* Light mode üçün */  
body.light-mode .site-logo {  
    filter: none; /* Default loqo rəngi */  
}  





/* === Kiçik BETA nişanı (PlayStation tərzi animasiya ilə) === */
.beta-badge {
  position: fixed;
  bottom: 25px; /* alt menyudan bir az yuxarıda */
  right: 25px;
  background: linear-gradient(135deg, #0070f3, #00b0ff);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 115, 255, 0.6);
  z-index: 9999;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: glowPulse 2.5s infinite ease-in-out;
}

/* Hover effekti */
.beta-badge:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(0, 160, 255, 0.8);
}

/* "Nəfəs alan" parıltı animasiyası */
@keyframes glowPulse {
  0% {
    box-shadow: 0 0 10px rgba(0, 115, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 180, 255, 0.9);
  }
  100% {
    box-shadow: 0 0 10px rgba(0, 115, 255, 0.5);
  }
}

/* Mobil üçün daha kiçik ölçü */
@media (max-width: 600px) {
  .beta-badge {
    bottom: 115px;
    right: 15px;
    font-size: 11px;
    padding: 5px 8px;
    animation: glowPulse 3s infinite ease-in-out;
  }







/* Wrapper ilə mərkəzləşdir */
.search-wrapper {
    display: flex;
    justify-content: center; /* horizontal mərkəz */
    margin: 20px 0; /* yuxarı və aşağı boşluq */
}

/* Search Bar dizaynı */
#searchBar {
    width: 100%;
    max-width: 330px;  /* daha kompakt */
    padding: 10px 14px; /* kompakt padding */
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
    transition: all 0.2s;
}


.no-results {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;                /* Mesajın ölçüsü bir az böyük olsun */
    font-weight: 600;
    margin: 20px auto;              /* Ortalanmış və yuxarıdan boşluq */
    padding: 15px 20px;
    border-radius: 8px;
    max-width: 400px;               /* Mesajın maksimum eni */
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: background 0.3s, color 0.3s;
}

/* Light mode */
body.light-mode .no-results {
    background-color: #f9f9f9;       /* Açıq fon */
    color: #2c3e50;                  /* Tünd yazı */
}

/* Dark mode */
body.dark-mode .no-results {
    background-color: #2c3e50;       /* Tünd fon */
    color: #ecf0f1;                  /* Açıq yazı */
}



/* Fokus effekti */
#searchBar:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 5px rgba(255,76,76,0.4);
}

/* Dark mode dəstəyi */
body.dark #searchBar {
    background: #2c2c2c;
    color: #f0f0f0;
    border: 1px solid #555;
}


.header-top {
    display: flex;
    align-items: center;
    justify-content: center; /* mərkəz */
    gap: 10px;
    margin-bottom: 15px;
}
.header-top .logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.site-title {
    font-size: 18px;
}



#themeToggle{  
    position: fixed; top:10px; right:15px;  
    background: var(--accent-color); color:#fff; border:none; border-radius:5px;  
    padding:6px 12px; cursor:pointer; z-index:1001; font-weight:bold;  
}  
.games-grid{  
    display:grid; grid-template-columns:repeat(2,1fr); gap:12px;  
}  
@media(min-width:600px){.games-grid{grid-template-columns:repeat(2,1fr);}}  
@media(min-width:900px){.games-grid{grid-template-columns:repeat(3,1fr);}}  
.game-card{  
    background: var(--card-bg);  
    border-radius:8px; overflow:hidden;  
    display:flex; flex-direction:column;  
    transition: all 0.4s; cursor:pointer;  
    border: 3px solid transparent;  
    background-clip: padding-box;  
    position: relative;  
}  
.game-card::before{  
    content:""; position:absolute; top:-3px; left:-3px; right:-3px; bottom:-3px;  
    background: var(--border-gradient); border-radius:10px;  
    z-index:-1; transition: all 0.3s; opacity:1;  
}  
.game-card:hover::before{opacity:0.8; transform:scale(1.03);}  
.game-card img{  
    width:100%; aspect-ratio:2/2; object-fit:contain;  
    border-bottom:1px solid #ddd;  
}  
.game-info{ padding:6px;text-align:center; }  




.game-info h2 {
    font-size: 16px;
    margin: 4px 0 8px 0; /* ad ilə qiymət arası boşluq */
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.1); /* açıq rejimdə incə xətt */
}

/* Dark mod üçün daha açıq xətt */
body.dark .game-info h2 {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}





.price{ font-size:14px; margin:2px 0; }  
.original-price{text-decoration:line-through;color:#999;margin-right:5px;}  
.discount-price{ color:var(--accent-color); font-weight:bold; }  
.discount-rate{  
    display:inline-block;  
    background:var(--accent-color);  
    color:#fff;  
    font-size:12px;  
    font-weight:bold;  
    padding:2px 6px;  
    border-radius:5px;  
    margin-left:5px;  
}  


.modal-description {
    text-align: left;
    white-space: pre-line;
    margin-top: 6px;
    line-height: 1.5;
    font-size: 14px;
}





#loadMore{ display:block;margin:20px auto;padding:10px 20px; background:var(--accent-color); color:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:bold;}  
#loadMore:hover{ background:#e04343; }  
  
/* Modal */  
.modal{ display:none; position:fixed; z-index:999; left:0; top:0; width:100%; height:100%; overflow:auto; background:rgba(0,0,0,0.85); }  





/* 🔹 Mobil Chrome'da parent elementin basılma effektini blokla */
.game-card, .add-to-cart, button {
    -webkit-tap-highlight-color: transparent; /* Chrome basma parıltısını sil */
}

/* 🔹 Kart kliklənəndə parent sıxılmasın */
.game-card:active {
    transform: none !important;
}





#toast {
    position: fixed;
    top: 50%;                     /* ekranın ortası */
    right: 20px;                   /* sağdan məsafə */
    transform: translateY(-50%) translateX(100px); /* görünərkən sağdan gəlir */
    min-width: 200px;
    max-width: 300px;
    background: linear-gradient(135deg, #1e90ff, #00bfff);
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-weight: bold;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: all 0.4s ease;
}

#toast.show {
    opacity: 1;
    transform: translateY(-50%) translateX(0);  /* görünərkən mərkəzə gəlir */
}


.add-to-cart {
    margin-top: 5px;
    background: linear-gradient(135deg, #ff6600, #ff9933); /* portakal tonları saytla uyğun */
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.3s ease;
}

.add-to-cart:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    background: linear-gradient(135deg, #ff5500, #ffb366); /* hover zamanı biraz fərqli ton */
}











/* 🔹 Səbətə əlavə et düyməsi üçün klik effekti */
.add-to-cart {
    position: relative;
    overflow: hidden;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

/* Klik zamanı yüngül sıçrama effekti */
.add-to-cart:active {
    transform: scale(0.94);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* Ripple parıltısı */
.add-to-cart::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

.add-to-cart.clicked::after {
    animation: rippleEffect 0.6s ease-out;
}

/* Ripple animasiyası */
@keyframes rippleEffect {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.8;
        box-shadow: 0 0 10px rgba(255,255,255,0.5);
    }
    60% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(6);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(8);
    }
}

/* Hover zamanı azca parlaq görünsün */
.add-to-cart:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}


.cart-menu {
    position: relative;
    display: inline-block;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -12px;
    background: linear-gradient(135deg, #ff4d4d, #ff9900);
    color: #fff;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid #fff;
    transition: transform 0.2s ease, background 0.3s ease;
}

.cart-badge:hover {
    transform: scale(1.2);
    background: linear-gradient(135deg, #ff1a1a, #ffcc33);
}


/* Şəkil ilə Açıqlama arası uzun separator */
.modal-content img {
    display: block;
    margin: 0 auto;
}

/* Şəkildən dərhal sonra gələn elementdən əvvəl xətt çəkirik */
.modal-content img + * {
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: 10px;
    padding-top: 10px;
}

body.dark .modal-content img + * {
    border-top: 1px solid rgba(255,255,255,0.08);
}





/* --- Modal daxilində bölmələr arası zərif separatorlar --- */

/* Açıqlama hissəsi ilə qiymət arası */
#modalDesc {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

body.dark #modalDesc {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Qiymət ilə WhatsApp arası */
.modal-content .price {
    margin-top: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

body.dark .modal-content .price {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* WhatsApp düyməsindən sonra sadəcə məsafə */
.modal-buttons {
    margin-top: 10px;
}

/* Modalın əsas stili (dizayn qorumaq üçün) */
.modal-content {
    background: var(--card-bg);
    margin: auto;
    padding: 15px;
    border-radius: 12px;
    width: 80%;
    max-width: 350px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}









.modal-content img {  
    width: 100%;  
    max-width: 150px;  
    height: auto;  
    border-radius: 8px;  
    margin: 10px auto;  
    display: block;  
    transition: transform 0.3s;  
}  
.modal-content img:hover{ transform: scale(1.02);}  
.close-btn{ position:absolute; top:10px; right:15px; font-size:28px; font-weight:bold; color:var(--accent-color); cursor:pointer; transition: all 0.3s; }  
.close-btn:hover{ transform: rotate(90deg); color:#e04343; }  
  
.order-btn {  
    display: inline-flex;  
    align-items: center;  
    justify-content: center;  
    gap: 4px;  
    padding: 10px 16px;  
    font-size: 14px;  
    font-weight: bold;  
    color: #fff;  
    text-decoration: none;  
    border-radius: 6px;  
    background-color: #25D366;  
    height: 30px;  
    transition: all 0.3s;  
}  
.order-btn img { width: 18px; height: 18px; }  
.order-btn:hover { background-color: #128C7E; }  
  
.footer-menu{ background:var(--card-bg); display:flex; justify-content:space-around; align-items:center; padding:8px 0; position:fixed; bottom:0; width:100%; border-top:1px solid #ddd; z-index:1000; }  
.footer-menu a{ color:var(--text-color); text-decoration:none; font-size:12px; display:flex; flex-direction:column; align-items:center; gap:3px; transition:color 0.3s; }  
.footer-menu a img{ width:22px; height:22px; }  
.footer-menu a:hover, .footer-menu a.active{ color:var(--accent-color); }  

/* Dark modda footer iconlarını invert et ki açıq görünsün */
body.dark .footer-menu a img {
    filter: brightness(0) invert(1);
}







/* Scroll-to-Top Düyməsi */
#scrollTopBtn {
    position: fixed;
    bottom: 90px; /* alt menu üstündə */
    right: 20px;
    z-index: 10000; /* alt menu-dan yuxarı */
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff4d4d, #ff9900);
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 26px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    opacity: 0;
    /* Əsas vəziyyət üçün transform əlavə edildi */
    transform: translateY(0) scale(1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}

/* Düymə görünəndə */
#scrollTopBtn.show {
    opacity: 1;
}

/* Hover effekti */
#scrollTopBtn:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    background: linear-gradient(135deg, #ff9900, #ff4d4d);
}

/* Dairəvi progress SVG */
#scrollTopBtn svg {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg); /* dairəyi start nöqtəsini yuxara gətirir */
    width: 55px;
    height: 55px;
    pointer-events: none; /* klik düyməyə keçir */
}

/* SVG-dakı arxa dairə */
#scrollTopBtn svg circle:first-child {
    stroke: #ffffff55; /* yarı şəffaf arxa dairə */
    stroke-width: 8;
    fill: none;
}

/* SVG-dakı progress dairə */
#scrollTopBtn svg circle:nth-child(2) {
    stroke: #fff; /* əsas progress rəngi */
    stroke-width: 8;
    fill: none;
    stroke-dasharray: 283; /* JS ilə override olunur */
    stroke-dashoffset: 283;
    stroke-linecap: round;
}

/* Ox mərkəzdə qalır */
#scrollTopBtn::after {
    content: "↑";
    position: absolute;
    font-size: 26px;
    font-weight: bold;
    color: #fff;
}

/* Responsive dizayn */
@media (max-width: 768px) {
    #scrollTopBtn {
        width: 45px;
        height: 45px;
        bottom: 75px;
    }
    #scrollTopBtn svg {
        width: 45px;
        height: 45px;
    }
    #scrollTopBtn::after {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    #scrollTopBtn {
        width: 40px;
        height: 40px;
        bottom: 65px;
        right: 15px;
    }
    #scrollTopBtn svg {
        width: 40px;
        height: 40px;
    }
    #scrollTopBtn::after {
        font-size: 20px;
    }
}