.elementor-214 .elementor-element.elementor-element-7aaf5e5{--display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-76ea0bc *//* Pastikan kartu jadi konteks positioning */ .vir-card{ position:relative; overflow:hidden; } /* Pita di pojok kiri atas */ .vip-ribbon{ position:absolute; top:12px; left:0; /* left:-12px bisa, tapi mulai dari 0 biar pasti kelihatan */ transform: translateX(0); display:flex; align-items:center; gap:6px; padding:8px 14px; border-top-right-radius:12px; border-bottom-right-radius:12px; font-weight:800; font-size:12px; letter-spacing:.02em; color:#111; box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:3; } .vip-ribbon svg{ display:block; color:currentColor; } /* Varian warna */ .vip-rare{ background: linear-gradient(135deg,#b4f0ff,#dbe8ff 40%,#ecf7ff); color:#00374a; border:1px solid #9fd9ea; } .vip-premium{ background: linear-gradient(135deg,#C9A447,#E9D08A); color:#1a1100; border:1px solid rgba(201,164,71,.65); } .vip-fire{ background: linear-gradient(135deg,#ff6b6b,#ff2f2f); color:#fff; border:1px solid rgba(255,70,70,.8); } /* Bingkai halus sesuai highlight (opsional) */ .vir-card.hl-rare { box-shadow:0 0 0 2px rgba(160,220,240,.35), 0 10px 24px rgba(0,0,0,.15); } .vir-card.hl-premium { box-shadow:0 0 0 2px rgba(201,164,71,.35), 0 10px 24px rgba(0,0,0,.15); } .vir-card.hl-fire_sale{ box-shadow:0 0 0 2px rgba(255,90,90,.35), 0 10px 24px rgba(0,0,0,.15); }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-e405a49 *//* ================================ VIRANUSA Listings – Clean Base ================================ */ /* Grid & Card */ .vir-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px} .vir-card{ position:relative; isolation:isolate; overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; box-shadow:0 14px 30px rgba(0,0,0,.12); padding:14px; transition:.2s; color:#111; } .vir-card:hover{transform:translateY(-3px); box-shadow:0 18px 42px rgba(0,0,0,.18)} .vir-thumb{display:block;border-radius:12px;overflow:hidden;margin-bottom:10px} .vir-thumb img{width:100%;height:auto;display:block} .vir-title{font-size:18px;font-weight:800;margin:.25rem 0 .1rem} .vir-price{font-weight:800;margin:4px 0 6px;color:#C9A447} .vir-meta{display:flex;gap:10px;flex-wrap:wrap;color:#666;font-size:13px;margin-bottom:8px} .vir-actions{display:flex;gap:8px;flex-wrap:wrap} .btn{display:inline-block;padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none} .btn-gold{background:linear-gradient(135deg,#C9A447,#E9D08A);color:#111} .btn-gold-outline{border:1px solid #caa24b;color:#caa24b;background:transparent} .btn-gold-outline:hover{border-color:#E9D08A} /* Decorative layers (stay behind content) */ .vir-card::before, .vir-card::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:1; } .vir-card > *{position:relative; z-index:1} /* --------------------------- Ribbon (kategori) – umum --------------------------- */ .vip-ribbon{ position:absolute; top:12px; left:0; z-index:3; display:flex; align-items:center; gap:6px; padding:8px 14px; font:800 12px/1 Inter,system-ui,sans-serif; letter-spacing:.02em; border-top-right-radius:12px; border-bottom-right-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.25); } /* ========================= HOVER FX – Rare / Premium / Fire (tidak perlu ubah HTML/PHP) ========================= */ /* ---------- RARE: diamond dust jatuh ---------- */ .vir-card.hl-rare:hover::after, .vir-card[data-highlight="rare"]:hover::after{ /* layer 1 = ikon diamond yang sudah ada layer 2..6 = butiran kilau */ background: url("data:image/svg+xml;utf8,") no-repeat center/contain, radial-gradient(2px 2px at 10% -10%, rgba(0,174,239,.95) 60%, transparent 61%), radial-gradient(3px 3px at 30% -15%, rgba(160,235,255,.9) 60%, transparent 61%), radial-gradient(2px 2px at 60% -12%, rgba(0,174,239,.85) 60%, transparent 61%), radial-gradient(3px 3px at 80% -18%, rgba(160,235,255,.9) 60%, transparent 61%), radial-gradient(2px 2px at 50% -8%, rgba(0,174,239,.9) 60%, transparent 61%); background-size: 130px 130px, 6px 6px, 8px 8px, 6px 6px, 8px 8px, 6px 6px; background-position: right -30px top -30px, 10% -10%, 30% -15%, 60% -12%, 80% -18%, 50% -8%; animation: vp-spin 18s linear infinite, /* ikon mutar (sudah ada, tetap) */ vp-fall 3.6s linear infinite; /* butiran jatuh */ opacity:.9; } /* ---------- PREMIUM: shimmer + twinkles ---------- */ .vir-card.hl-premium:hover::after, .vir-card[data-highlight="premium"]:hover::after{ /* layer 1 = shimmer conic (sudah ada, dipercepat) */ /* layer 2..4 = bintang kelip */ background: conic-gradient(from 0deg at 50% 50%, rgba(255,245,210,0) 0 75%, rgba(255,240,180,.55) 85%, rgba(255,245,210,0) 95%), radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.85) 60%, transparent 61%), radial-gradient(3px 3px at 70% 40%, rgba(255,255,255,.75) 60%, transparent 61%), radial-gradient(2px 2px at 45% 70%, rgba(255,255,255,.8) 60%, transparent 61%); background-size:auto, 6px 6px, 8px 8px, 6px 6px; animation: vp-shimmer 3.8s linear infinite, /* shimmer lebih cepat */ vp-twinkle 1.8s ease-in-out infinite; /* bintang kelip */ opacity:.85; } /* ---------- FIRE SALE: api membara + bara naik ---------- */ .vir-card.hl-fire_sale:hover::after, .vir-card.hl-fire-sale:hover::after, .vir-card.hl-firesale:hover::after, .vir-card.hl-fire:hover::after, .vir-card[data-highlight="fire"]:hover::after{ /* layer bara kecil (di atas “flames” yang sudah ada) */ background: radial-gradient(60px 40px at 10% 100%, rgba(255,200,60,.95), transparent 70%), radial-gradient(70px 50px at 30% 100%, rgba(255,140,0,.95), transparent 70%), radial-gradient(60px 40px at 50% 100%, rgba(255,100,0,.9), transparent 70%), radial-gradient(70px 50px at 70% 100%, rgba(255,160,0,.95), transparent 70%), radial-gradient(60px 40px at 90% 100%, rgba(255,200,60,.95), transparent 70%), /* bara: titik kecil naik */ radial-gradient(2px 2px at 20% 110%, rgba(255,220,180,.9) 60%, transparent 61%), radial-gradient(2px 2px at 50% 115%, rgba(255,180,120,.9) 60%, transparent 61%), radial-gradient(2px 2px at 80% 112%, rgba(255,220,180,.9) 60%, transparent 61%); animation: vp-fire 1.9s ease-in-out infinite alternate, /* nyala api lebih cepat */ vp-embers 2.6s linear infinite; /* bara melayang naik */ filter:blur(7px); opacity:.95; } /* ---------- Keyframes tambahan ---------- */ @keyframes vp-fall { 0% { background-position: right -30px top -30px, 10% -10%, 30% -15%, 60% -12%, 80% -18%, 50% -8%; } 100% { background-position: right -30px top -30px, 10% 110%, 30% 115%, 60% 112%, 80% 118%, 50% 108%; } } @keyframes vp-twinkle { 0%,100% { opacity:.6; transform:translateZ(0); } 50% { opacity:1; } } @keyframes vp-embers { 0% { background-position: 0 0,0 0,0 0,0 0,0 0, 20% 110%, 50% 115%, 80% 112%; } 100% { background-position: 0 0,0 0,0 0,0 0,0 0, 18% -10%, 48% -5%, 78% -8%; } } /* Hormati preferensi pengguna */ @media (prefers-reduced-motion: reduce){ .vir-card:hover::after{ animation:none !important; } } .vip-ribbon svg{width:14px;height:14px;display:block} /* Nama kelas alternatif untuk FIRE supaya “ketangkep” */ .vip-fire,.vip-fire-sale,.vip-firesale,.vip_fire,.vip-fire_sale, .vir-card .ribbon-fire,[data-highlight="fire"]{ /* gaya di bawah */ } /* ------------------------- RARE (Diamond) ------------------------- */ .vir-card.hl-rare::before, .vir-card[data-highlight="rare"]::before{ background: radial-gradient(120% 100% at 0% 0%, rgba(180,240,255,.32), transparent 55%), linear-gradient(135deg,#b3ecff 0%, #e5f5ff 45%, #f8fcff 100%); filter:saturate(1.05); } .vir-card.hl-rare::after, .vir-card[data-highlight="rare"]::after{ width:130px; height:130px; right:-30px; top:-30px; background:url("data:image/svg+xml;utf8,") no-repeat center/contain; opacity:.15; animation:vp-spin 5s linear infinite; } /* ------------------------- PREMIUM (Gold) ------------------------- */ .vir-card.hl-premium::before, .vir-card[data-highlight="premium"]::before{ background: radial-gradient(circle at 50% 80%, rgba(233,208,138,.45), rgba(201,164,71,.4) 40%, rgba(90,70,10,.25) 100%), linear-gradient(135deg,#F4E2B0 0%, #C9A447 55%, #E9D08A 100%); background-blend-mode:screen; filter:brightness(1.1) saturate(1.1); } .vir-card.hl-premium .title, .vir-card.hl-premium .price, .vir-card.hl-premium .meta span, .vir-card[data-highlight="premium"] .title, .vir-card[data-highlight="premium"] .price, .vir-card[data-highlight="premium"] .meta span { color:#2c1a00 !important; /* teks lebih gelap, mudah dibaca */ } /* Efek shimmer lembut */ @media (prefers-reduced-motion: no-preference){ .vir-card.hl-premium::after, .vir-card[data-highlight="premium"]::after{ inset:auto; left:-30%; right:-30%; bottom:-60%; height:200%; background: conic-gradient(from 0deg at 50% 50%, rgba(255,245,210,0) 0 75%, rgba(255,240,180,.5) 85%, rgba(255,245,210,0) 95%); filter:blur(28px); opacity:.7; animation:vp-shimmer 4s linear infinite; } } /* ------------------------- FIRE SALE (Api) ------------------------- */ .vir-card.hl-fire_sale::before, .vir-card.hl-fire-sale::before, .vir-card.hl-firesale::before, .vir-card.hl-fire::before, .vir-card[data-highlight="fire"]::before{ background: radial-gradient(150% 90% at 50% 120%, rgba(255,120,70,.75), rgba(255,50,0,.6) 60%, #3b0000 100%); filter:brightness(1.05) saturate(1.1); } .vir-card.hl-fire .title, .vir-card.hl-fire .price, .vir-card.hl-fire .meta span, .vir-card[data-highlight="fire"] .title, .vir-card[data-highlight="fire"] .price, .vir-card[data-highlight="fire"] .meta span { color:#fff !important; /* teks putih kontras */ } /* Animasi nyala api lembut */ .vir-card.hl-fire_sale::after, .vir-card.hl-fire-sale::after, .vir-card.hl-firesale::after, .vir-card.hl-fire::after, .vir-card[data-highlight="fire"]::after{ bottom:-10px; left:0; right:0; height:55%; background: radial-gradient(60px 40px at 10% 100%, rgba(255,200,60,.9), transparent 70%), radial-gradient(70px 50px at 30% 100%, rgba(255,140,0,.9), transparent 70%), radial-gradient(60px 40px at 50% 100%, rgba(255,100,0,.8), transparent 70%), radial-gradient(70px 50px at 70% 100%, rgba(255,160,0,.9), transparent 70%), radial-gradient(60px 40px at 90% 100%, rgba(255,200,60,.9), transparent 70%); mix-blend-mode:screen; filter:blur(8px); opacity:.9; animation:vp-fire 4s ease-in-out infinite alternate; } /* ------------------------- Animasi umum ------------------------- */ @keyframes vp-spin { to { transform: rotate(360deg); } } @keyframes vp-shimmer{ to { transform: rotate(360deg); } } @keyframes vp-fire { 0% { transform: translateY(4px); } 100% { transform: translateY(-6px); } }/* End custom CSS */