#newView { margin: 0px auto; background: #fe1d1da6; border-radius: 14px; padding: 6px 4px; max-width: 100%; position: relative; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; border: 2px solid #efff00; } #newView .tit { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } #newView .tit h3 { color: #ffffff; font-size: 16px; font-weight: 900; margin: 0; } #newView .btn-game-lainnya { display: inline-block; background: #fbff00; color: #fff; font-size: 13px; font-weight: bold; padding: 5px 10px; border-radius: 6px; text-decoration: none; text-shadow: 0 0 3px #000000; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } #newView .wrapgames { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 8px; scroll-behavior: smooth; } #newView .wrapgames::-webkit-scrollbar { height: 5px; } #newView .wrapgames::-webkit-scrollbar-thumb { background: #999; border-radius: 4px; } #newView .kartu { min-width: 115px; max-width: 115px; background: white; border-radius: 10px; padding: 4px; flex-shrink: 0; text-align: center; border: 2px solid #ddd; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); position: relative; transition: transform 0.2s ease; } #newView .kartu:hover { transform: scale(1.05); } #newView .kartu img { width: 100%; height: auto; border-radius: 6px; margin-bottom: 6px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.05); } #newView .kartu p { font-size: 13px; margin: 0; color: #222; font-weight: 500; } .badge { position: absolute; top: 6px; left: 6px; padding: 2px 6px; font-size: 10px; font-weight: bold; color: white; border-radius: 6px; z-index: 2; box-shadow: 0 0 4px rgba(0,0,0,0.3); animation: pulseBadge 1.3s infinite ease-in-out; } .badge-viral { background: red; } .badge-hot { background: orange; } .badge-new { background: green; } @keyframes pulseBadge { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.9; } 100% { transform: scale(1); opacity: 1; } } #newView .scroll-hint { position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: bold; color: #002b5c; cursor: pointer; z-index: 3; user-select: none; background: transparent !important; } #newView .scroll-hint.left { left: 0; } #newView .scroll-hint.right { right: 0; } #newView .scroll-hint.disabled { opacity: 0.2; pointer-events: none; }