/* ===================== Rekomendasi produk (partial bersama) ===================== */
.rk-seksi { margin-top: 36px; color: #f1f0f7; }
.rk-kepala { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rk-kepala h2 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.rk-kepala p { margin: 4px 0 0; color: #aaa9ba; font-size: 13px; }
.rk-kepala p.eyebrow { margin: 0 0 6px; color: #9c8bff; font-size: 9px; }

/* ---------- Promo flash sale ---------- */
.rk-promo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .rk-promo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rk-promo { grid-template-columns: 1fr; } }
.rk-promo a { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: linear-gradient(135deg, rgba(240, 130, 142, .1), transparent 60%), #171720; transition: transform .18s, border-color .18s; }
.rk-promo a:hover { transform: translateY(-2px); border-color: rgba(240, 130, 142, .4); }
.rk-promo img { width: 52px; height: 52px; flex: none; border-radius: 12px; object-fit: cover; }
.rk-promo .isi { min-width: 0; flex: 1; }
.rk-promo .isi small { display: block; overflow: hidden; color: #79788e; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.rk-promo .isi b { display: block; overflow: hidden; color: #f1f0f7; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.rk-promo .harga { margin-top: 3px; color: #f3a2ac; font-size: 14px; font-weight: 800; }
.rk-promo .harga s { margin-left: 5px; color: #79788e; font-size: 11.5px; font-weight: 500; }
.rk-promo .diskon { position: absolute; top: 0; right: 0; padding: 3px 9px; border-bottom-left-radius: 10px; background: #f0828e; color: #1a1020; font-size: 10.5px; font-weight: 800; }

/* ---------- Rekomendasi game ---------- */
.rk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .rk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
.rk-grid a { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: #171720; transition: transform .18s, border-color .18s, box-shadow .18s; }
.rk-grid a:hover { transform: translateY(-3px); border-color: rgba(178, 160, 255, .35); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
.rk-grid .img { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #14141c; }
.rk-grid .img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.rk-grid a:hover .img img { transform: scale(1.06); }
.rk-grid .label { position: absolute; top: 8px; left: 8px; padding: 3px 7px; border-radius: 7px; background: rgba(16, 16, 24, .82); color: #f3cd8a; font-size: 10px; font-weight: 800; }
.rk-grid .isi { padding: 10px 11px 12px; }
.rk-grid .isi b { display: block; overflow: hidden; color: #f1f0f7; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.rk-grid .isi small { display: block; overflow: hidden; margin-top: 2px; color: #79788e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }