.topNotif { background: var(--accent); color: #fff; padding: 6px 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; display: flex; align-items: center; font-size: 10px; font-weight: 800; overflow: hidden; }
#homePage { margin-top: 60px; width: 100%; padding: 0 15px; max-width: 600px; margin-left: auto; margin-right: auto; min-height: 100vh; overflow-x: hidden; }
.marqueeWrapper { overflow: hidden; width: 100%; display: flex; }
.marqueeContent { display: inline-block; white-space: nowrap; animation: marqueeAnim 20s linear infinite; }
@keyframes marqueeAnim { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }
.closeNotif { position: absolute; right: 10px; background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; top: 50%; transform: translateY(-50%); }
.heroContainer { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 25px; border: 1px solid var(--border); background: var(--bg-card); }
.sliderWrapper { display: flex; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; }
.slideItem { min-width: 100%; }
.slideItem img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.sliderNav .navBtn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; z-index: 5; font-size: 10px; }
.navBtn.prev { left: 10px; }
.navBtn.next { right: 10px; }
.sliderDots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: 0.3s; }
.dot.active { background: var(--accent); width: 15px; border-radius: 10px; }
.popularGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.gameTile { background: var(--bg-card); border-radius: 18px; padding: 12px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); cursor: pointer; position: relative; transition: 0.2s; overflow: hidden; }
.gameTile:hover, .productCard:hover { border-color: var(--accent); background: rgba(225,0,255,0.05); }
.gameTile:active, .productCard:active { background: var(--accent) !important; }
.tileImg img { width: 45px; height: 45px; border-radius: 10px; object-fit: cover; }
.productGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.productCard { background: var(--bg-card); border-radius: 18px; padding: 10px; border: 1px solid var(--border); cursor: pointer; transition: 0.2s; text-align: center; position: relative; overflow: hidden; }
.cardImg img { width: 100%; aspect-ratio: 1/1; border-radius: 12px; object-fit: cover; margin-bottom: 8px; }
.productName, .tileTitle { font-size: 11px; font-weight: 800; color: #fff; text-transform: uppercase; line-height: 1.2; }
.ribbon { position: absolute; top: 10px; right: -25px; background: var(--accent); color: #fff; padding: 2px 25px; font-size: 8px; font-weight: 900; transform: rotate(45deg); box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 5; width: 90px; text-align: center; }
.ribbon::before, .ribbon::after { content: ''; position: absolute; bottom: -3px; border-top: 3px solid #800091; border-left: 3px solid transparent; border-right: 3px solid transparent; display: none; }
.searchBox { position: relative; }
.searchBox input { width: 100%; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: #fff; }
#clearSearch { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: none; cursor: pointer; }
.searchPreview { position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg-card); z-index: 100; border: 1px solid var(--border); border-radius: 12px; display: none; margin-top: 5px; }
@media (min-width: 768px) { #homePage { max-width: 1000px; } .popularGrid { grid-template-columns: repeat(4, 1fr); } .productGrid { grid-template-columns: repeat(6, 1fr); } }