/* ============================================================ assets/css/store.css Diporting LANGSUNG dari desain referensi yang dikirim user (struktur & nama class dipertahankan persis), direcolor dari dark-gold jadi biru-putih elegan, plus animasi tambahan. ============================================================ */ :root{ --bg:#FFFFFF; --bg-2:#F3F6FB; --bg-3:#E9EEF6; --surface:#FFFFFF; --border:#E2E8F0; --text:#0F172A; --muted:#64748B; --gold:#2563EB; /* aksen biru utama (nama var dipertahankan biar minim perubahan) */ --gold-2:#1D4ED8; /* biru lebih gelap */ --gold-soft:#93C5FD; /* biru muda/soft */ --radius:14px; --radius-lg:20px; } *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--bg);color:var(--text);font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip} h1,h2,h3,.logo,.banner-title,.section-head h2{font-family:'Sora','Manrope',system-ui,sans-serif} /* ---- Mode Gelap Kontras: token warna store.css sendiri ikut berubah lewat data-surface di ---- */ body[data-surface="gelap"]{ --bg:#0F172A;--bg-2:#1E293B;--bg-3:#334155;--surface:#111827; --border:#334155;--text:#F8FAFC;--muted:#CBD5E1; } a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} img{max-width:100%;display:block} .container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px} /* ============ HEADER ============ */ .site-header{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 2px 12px rgba(15,23,42,.08);transition:background .25s ease,box-shadow .25s ease,border-color .25s ease} .site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-2),transparent);opacity:.55} body[data-surface="gelap"] .site-header{background:var(--surface);border-bottom-color:var(--border)} .site-header.is-scrolled{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 24px -12px rgba(15,23,42,.18);border-bottom-color:var(--border)} body[data-surface="gelap"] .site-header.is-scrolled{background:var(--surface);box-shadow:0 8px 24px -12px rgba(0,0,0,.5)} /* PERBAIKAN: Ukuran tombol ikon header disesuaikan agar rapi dan tidak terlalu besar */ .icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--gold) 16%,var(--border));border-radius:10px;color:var(--text);background:color-mix(in srgb,var(--gold) 6%,var(--bg-2));transition:.2s} .icon-btn:hover{border-color:var(--gold);color:#fff;background:linear-gradient(180deg,var(--gold),var(--gold-2));transform:translateY(-2px);box-shadow:0 8px 18px -6px color-mix(in srgb,var(--gold) 60%,transparent)} .icon-btn svg{width:18px;height:18px} .header-inner{display:flex;align-items:center;justify-content:space-between;height:65px} .logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:22px;color:var(--gold)} .logo-img{height:28px;width:auto;display:block;transition:transform .3s ease} .logo:hover .logo-img{transform:scale(1.04)} .logo.logo-has-text .logo-img{height:38px} .footer-brand .logo-img{height:30px} .footer-brand.logo-has-text .logo-img{height:46px} .logo-mark{font-size:26px;color:var(--gold);text-shadow:0 0 20px rgba(37,99,235,.25);transition:transform .4s ease} .logo:hover .logo-mark{transform:rotate(180deg)} .logo-mark.big{font-size:56px} .logo-text{letter-spacing:-.5px} .header-actions{display:flex;align-items:center;gap:8px} .lang-btn{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-2);font-size:13px;font-weight:600;transition:.2s} .lang-btn:hover{border-color:var(--gold);background:#EFF6FF} .lang-btn .flag{font-size:15px} /* ============ DRAWER ============ */ .drawer-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);opacity:0;pointer-events:none;transition:.25s;z-index:50} .drawer-overlay.open{opacity:1;pointer-events:auto} .drawer{position:fixed;top:0;left:0;height:100vh;width:min(85vw,360px);background:#FFFFFF;transform:translateX(-100%);transition:.35s cubic-bezier(.4,0,.2,1);z-index:60;padding:20px;overflow-y:auto;box-shadow:20px 0 60px rgba(15,23,42,.15)} body[data-surface="gelap"] .drawer{background:var(--surface);box-shadow:20px 0 60px rgba(0,0,0,.6)} .drawer.open{transform:translateX(0)} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px dashed var(--border)} .drawer-nav{display:flex;flex-direction:column;padding-top:10px} .drawer-nav a{display:flex;align-items:center;justify-content:space-between;padding:18px 4px;font-size:17px;font-weight:600;color:var(--text);border-radius:10px;transition:.2s;opacity:0;transform:translateX(-12px);animation:drawerItemIn .4s ease forwards} .drawer-nav a:hover{color:var(--gold);background:#EFF6FF;padding-left:10px;padding-right:10px} .drawer-nav a svg{width:22px;height:22px;color:var(--muted);transition:.2s} .drawer-nav a:hover svg{color:var(--gold);transform:translateX(2px)} .drawer-sep{height:1px;background:var(--border);margin:10px 0} @keyframes drawerItemIn{to{opacity:1;transform:translateX(0)}} .drawer.open .drawer-nav a:nth-child(1){animation-delay:.05s} .drawer.open .drawer-nav a:nth-child(2){animation-delay:.1s} .drawer.open .drawer-nav a:nth-child(3){animation-delay:.15s} .drawer.open .drawer-nav a:nth-child(4){animation-delay:.2s} .drawer.open .drawer-nav a:nth-child(5){animation-delay:.25s} .drawer.open .drawer-nav a:nth-child(7){animation-delay:.32s} .drawer.open .drawer-nav a:nth-child(8){animation-delay:.37s} /* ============ HERO / BANNER ============ */ .hero{padding:20px 16px 8px} .banner{ border-radius:var(--radius-lg);overflow:hidden; background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 70%,#0F172A),var(--gold) 45%,color-mix(in srgb,var(--gold-2) 65%,#0F172A)); aspect-ratio:var(--banner-ar, 2.05/1);position:relative; box-shadow:0 6px 0 -2px color-mix(in srgb,var(--gold-2) 55%,#000 30%),0 26px 55px -16px color-mix(in srgb,var(--gold) 55%,transparent),0 2px 4px rgba(0,0,0,.15); border:1px solid color-mix(in srgb,var(--gold) 35%,transparent); transition:aspect-ratio .35s ease, transform .35s ease, box-shadow .35s ease; } @media(hover:hover){ .banner:hover{transform:translateY(-3px) scale(1.003);box-shadow:0 8px 0 -2px color-mix(in srgb,var(--gold-2) 55%,#000 30%),0 34px 65px -16px color-mix(in srgb,var(--gold) 60%,transparent),0 2px 4px rgba(0,0,0,.18)} } .banner::after{ content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;z-index:4;pointer-events:none; background:linear-gradient(120deg,var(--gold),var(--gold-2),transparent,var(--gold)); background-size:250% 250%; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:bannerBorderFlow 6s ease infinite;opacity:.85; } @keyframes bannerBorderFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .banner::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.5) 1.5px,transparent 1.5px);background-size:28px 28px;opacity:.25;animation:bannerDrift 18s linear infinite;z-index:1} @keyframes bannerDrift{from{background-position:0 0}to{background-position:120px 120px}} .banner .banner-shine{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden} .banner .banner-shine::before{content:"";position:absolute;top:0;left:-40%;width:35%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:bannerShineSweep 5s ease-in-out infinite} @keyframes bannerShineSweep{0%{left:-40%}35%{left:120%}100%{left:120%}} .banner-inner{ position:absolute;inset:12px;border-radius:calc(var(--radius-lg) - 6px);display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;padding:20px;z-index:2; background:radial-gradient(circle at center, rgba(255,255,255,.12), transparent 65%); backdrop-filter:none;-webkit-backdrop-filter:none; } .banner-brand{font-size:14px;color:#fff;opacity:.95;margin-bottom:8px;letter-spacing:.5px;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.35)} .banner-title{font-family:'Sora',sans-serif;font-size:clamp(28px,7vw,54px);font-weight:800;letter-spacing:.5px;text-shadow:0 4px 20px rgba(0,0,0,.3);background:linear-gradient(180deg,#FFFFFF,var(--gold-soft,#fff));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:bannerGlow 3.5s ease-in-out infinite} @keyframes bannerGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}50%{filter:drop-shadow(0 0 20px rgba(255,255,255,.6))}} .banner-sub{margin-top:12px;font-size:11px;letter-spacing:2px;color:#fff;background:rgba(15,23,42,.35);padding:6px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.28);backdrop-filter:none;-webkit-backdrop-filter:blur(6px)} .banner-shape{position:absolute;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);z-index:1;animation:shapeFloat 7s ease-in-out infinite;pointer-events:none} .banner-shape.sq{border-radius:8px} .banner-shape.circ{border-radius:50%} .banner-shape.s1{width:46px;height:46px;top:12%;left:8%;animation-delay:0s} .banner-shape.s2{width:30px;height:30px;top:22%;right:12%;animation-delay:1.2s} .banner-shape.s3{width:60px;height:60px;bottom:14%;left:16%;animation-delay:2.4s} .banner-shape.s4{width:24px;height:24px;bottom:20%;right:20%;animation-delay:.6s} .banner-shape.s5{width:38px;height:38px;top:50%;left:4%;animation-delay:3s} .banner-shape.s6{width:20px;height:20px;top:65%;right:8%;animation-delay:1.8s} @keyframes shapeFloat{0%,100%{transform:translateY(0) rotate(0deg);opacity:.7}50%{transform:translateY(-16px) rotate(12deg);opacity:1}} /* ============ SECTIONS ============ */ .section{padding:32px 16px} .section-head h2{font-size:22px;font-weight:800;margin-bottom:6px;color:var(--text)} .section-head p{color:var(--muted);font-size:14px;margin-bottom:20px} /* ============ POPULER CARDS ============ */ .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .prod-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;position:relative;overflow:hidden;transition:.25s cubic-bezier(.2,.8,.2,1);border:1px solid var(--border);background:var(--surface)} .prod-card::after{display:none} .prod-card::before{display:none} .prod-card:hover::before{left:130%} .prod-card:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 14px 28px -10px rgba(37,99,235,.35)} .prod-thumb{width:42px;height:42px;flex-shrink:0;border-radius:9px;background:var(--bg-2);display:grid;place-items:center;font-weight:800;font-size:12px;color:var(--text)} .prod-info{display:flex;flex-direction:column;min-width:0} .prod-info strong{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25} .prod-info span{font-size:10.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .grad-1{background:linear-gradient(135deg,var(--gold),var(--gold-2))} .grad-2{background:linear-gradient(135deg,var(--gold-soft),var(--gold))} .grad-3{background:linear-gradient(135deg,var(--gold-2),color-mix(in srgb,var(--gold-2) 55%,black))} .grad-4{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 65%,white),var(--gold))} .grad-5{background:linear-gradient(135deg,var(--gold-soft),var(--gold-2))} .grad-6{background:linear-gradient(135deg,color-mix(in srgb,var(--gold-2) 75%,black),#0F172A)} .grad-7{background:linear-gradient(135deg,var(--gold),color-mix(in srgb,var(--gold) 55%,black))} /* ============ TABS ============ */ .tabs-row{display:flex;align-items:center;gap:6px;margin-bottom:18px} .tabs{display:flex;gap:6px;overflow-x:auto;scroll-behavior:smooth;flex:1;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{padding:8px 14px;border-radius:9px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);font-size:12.5px;font-weight:700;white-space:nowrap;transition:.2s} .tab:hover{border-color:var(--gold);color:var(--gold)} .tab.active{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#fff;border-color:transparent;box-shadow:0 3px 10px -3px rgba(37,99,235,.5)} .tab-arrow{width:32px;height:32px;border-radius:9px;background:var(--bg-2);border:1px solid var(--border);color:var(--text);font-size:15px;font-weight:700;flex-shrink:0;transition:.2s;display:flex;align-items:center;justify-content:center} .tab-arrow:hover{border-color:var(--gold);color:var(--gold);background:#EFF6FF} /* ============ GAMES GRID (brand cards) ============ */ .games-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px} .games-grid .game-card{transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;align-items:center;min-width:0;-webkit-tap-highlight-color:transparent} .games-grid .game-card:hover{transform:translateY(-5px)} .game-cover{ aspect-ratio:3/4; width:100%; border-radius:var(--radius); position:relative; overflow:hidden; box-sizing:border-box; border:1.5px solid color-mix(in srgb,var(--gold) 70%,white 8%); box-shadow: 0 10px 26px -10px rgba(15,23,42,.35), 0 2px 0 rgba(255,255,255,.4) inset, 0 -10px 18px rgba(0,0,0,.35) inset; transition:box-shadow .3s ease, border-color .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), filter .22s ease; } .games-grid .game-card:hover .game-cover{box-shadow:0 18px 34px -10px rgba(37,99,235,.45),0 2px 0 rgba(255,255,255,.4) inset,0 -10px 18px rgba(0,0,0,.35) inset} .game-cover .cover-fallback-text{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;text-shadow:0 2px 8px rgba(0,0,0,.5)} .game-cover.no-photo::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 8px,transparent 8px 20px);z-index:0;animation:coverPatternMove 12s linear infinite} @keyframes coverPatternMove{from{background-position:0 0}to{background-position:80px 80px}} .game-cover img.cover-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .4s ease} .games-grid .game-card:hover .cover-photo{transform:scale(1.08)} .game-name{ display:block; margin-top:8px; font-size:11px; font-weight:800; letter-spacing:.03em; color:var(--text); text-transform:uppercase; text-align:center; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .games-grid .game-card.is-pressed .game-cover, .games-grid .game-card:active .game-cover{ transform:scale(.9); filter:blur(3px) brightness(.82); border-color:var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 20px 3px color-mix(in srgb,var(--gold) 55%,transparent), 0 10px 26px -10px rgba(15,23,42,.35); } .cover-1{background:linear-gradient(160deg,var(--gold),var(--gold-2))} .cover-2{background:linear-gradient(160deg,var(--gold-soft),var(--gold))} .cover-3{background:linear-gradient(160deg,var(--gold-2),color-mix(in srgb,var(--gold-2) 55%,black))} .cover-4{background:linear-gradient(160deg,var(--gold),#0F172A)} .cover-5{background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 65%,white),var(--gold-2))} .cover-6{background:linear-gradient(160deg,color-mix(in srgb,var(--gold-2) 70%,black),#1E1B4B)} .cover-7{background:linear-gradient(160deg,var(--muted),#1E293B)} /* ============ DECOR BANNER ============ */ .deco-banner{margin:32px 0;padding:48px 16px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.08),transparent),url("data:image/svg+xml;utf8,");border-top:1px solid rgba(37,99,235,.15);border-bottom:1px solid rgba(37,99,235,.15)} .deco-inner{display:flex;align-items:center;justify-content:center;gap:14px} .deco-title{font-size:40px;font-weight:800;color:var(--gold);letter-spacing:-1px} .deco-banner.deco-banner-img{margin:32px 0;padding:0;background:none;border:0} .deco-banner-photo{display:block;width:100%;height:auto} /* ============ ABOUT GLASS CARD ============ */ .about-glass-card{ position:relative;overflow:hidden;border-radius:var(--radius-lg); padding:36px 24px;text-align:center;margin:28px 0 8px; background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 16%,var(--bg-2)),color-mix(in srgb,var(--gold-2) 14%,var(--bg-3))); border:1px solid color-mix(in srgb,var(--gold) 28%,var(--border)); box-shadow:0 30px 60px -24px color-mix(in srgb,var(--gold) 45%,transparent); backdrop-filter:none;-webkit-backdrop-filter:none; } body[data-surface="gelap"] .about-glass-card{background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 22%,rgba(255,255,255,.05)),color-mix(in srgb,var(--gold-2) 16%,rgba(255,255,255,.04)));border-color:color-mix(in srgb,var(--gold) 35%,transparent)} .about-glass-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 55%,transparent),transparent 70%);top:-120px;right:-80px;filter:blur(10px);animation:blobFloat1 14s ease-in-out infinite;pointer-events:none} .about-glass-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px} .about-glass-eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--gold);text-transform:uppercase} .about-glass-logo{height:52px;width:auto;margin:4px 0} .about-glass-title{font-family:'Sora',sans-serif;font-size:26px;font-weight:800;background:linear-gradient(90deg,var(--gold),var(--gold-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .about-glass-desc{max-width:560px;color:var(--muted);font-size:13.5px;line-height:1.7;margin-top:2px} .about-glass-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:14px} .about-glass-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;font-weight:700;font-size:13.5px;box-shadow:0 12px 24px -8px color-mix(in srgb,var(--gold) 60%,transparent);transition:.25s} .about-glass-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 30px -8px color-mix(in srgb,var(--gold) 70%,transparent)} /* ---- Marquee metode pembayaran ---- */ .pay-marquee-wrap{width:100%;max-width:640px;margin:16px auto 0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent);mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent)} .pay-marquee-track{display:flex;width:max-content;gap:12px;animation:payMarqueeScroll 22s linear infinite} .pay-marquee-track:hover{animation-play-state:paused} @keyframes payMarqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .pay-chip{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:8px 14px 8px 8px;border-radius:999px;background:color-mix(in srgb,var(--gold) 8%,transparent);border:1px solid color-mix(in srgb,var(--gold) 22%,var(--border))} .pay-chip-badge{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0;background:color-mix(in srgb,var(--gold) 55%,var(--muted))} .pay-chip-badge.has-img{background:#fff;padding:4px;box-shadow:0 0 0 1px rgba(0,0,0,.06)} .pay-chip-badge.has-img img{width:100%;height:100%;object-fit:contain;border-radius:50%} .pay-chip span{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap} .pay-grid-wrap{width:100%;max-width:520px;margin:16px auto 0} .pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .pay-grid-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:14px;background:color-mix(in srgb,var(--gold) 8%,transparent);border:1px solid color-mix(in srgb,var(--gold) 22%,var(--border))} .pay-grid-badge{width:100%;height:34px;border-radius:8px;background:#fff;display:grid;place-items:center;padding:5px;box-shadow:0 0 0 1px rgba(0,0,0,.06)} .pay-grid-badge img{width:100%;height:100%;object-fit:contain} .pay-grid-badge i{font-size:16px;color:color-mix(in srgb,var(--gold) 60%,var(--muted))} .pay-grid-name{font-size:10.5px;font-weight:700;color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} @media (max-width:380px){.pay-grid{grid-template-columns:repeat(3,1fr)}} /* ============ FOOTER ============ */ .site-footer{padding:40px 0 24px;background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 5%,var(--bg-2)),color-mix(in srgb,var(--gold-2) 7%,var(--bg-3)));border-top:1px solid color-mix(in srgb,var(--gold) 16%,var(--border))} body[data-surface="gelap"] .site-footer{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 18%,var(--bg-2)),color-mix(in srgb,var(--gold-2) 22%,var(--bg-3)));border-top-color:color-mix(in srgb,var(--gold) 30%,transparent)} .footer-brand{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:800;color:var(--gold);margin-bottom:20px} .footer-desc{color:#475569;font-size:14px;line-height:1.7;max-width:640px;margin-bottom:20px} .socials{display:flex;gap:12px;margin-bottom:36px} .social{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;transition:.2s} .social:hover{transform:translateY(-3px) scale(1.05)} .social.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)} .social.tt{background:#0F172A;border:1px solid #334155} .social.gm{background:linear-gradient(135deg,var(--gold),var(--gold-soft))} .social.yt{background:var(--gold)} .footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;margin-bottom:32px} .footer-cols h4{color:var(--gold);font-size:15px;font-weight:700;margin-bottom:16px} .footer-cols a{display:block;color:#475569;font-size:14px;padding:10px 0;transition:.2s} .footer-cols a:hover{color:var(--gold);padding-left:4px} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid var(--border);color:var(--muted);font-size:13px} .theme-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--bg-3);font-size:18px;transition:.2s} .theme-btn:hover{border-color:var(--gold);transform:rotate(15deg)} @media (max-width:640px){ .site-footer{padding-bottom:88px} } .live-bottom-bar ~ .site-footer{padding-bottom:132px} /* ============ CS FLOAT ============ */ .cs-float{position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:14px;background:linear-gradient(180deg,var(--gold),var(--gold-2));display:grid;place-items:center;color:#fff;box-shadow:0 10px 26px -6px rgba(37,99,235,.55);z-index:30;animation:csFloatBob 3s ease-in-out infinite} .cs-float:hover{animation-play-state:paused;transform:scale(1.08)} .cs-float svg{width:26px;height:26px} @keyframes csFloatBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .sticky-checkout-bar ~ .cs-float{bottom:92px} .live-bottom-bar ~ .cs-float{bottom:76px} .live-bottom-bar ~ .sticky-checkout-bar ~ .cs-float{bottom:148px} /* ============ SCROLL-REVEAL ============ */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)} .reveal.show{opacity:1;transform:none} /* ============ RESPONSIVE ============ */ @media(min-width:640px){ .grid-2{grid-template-columns:repeat(2,1fr)} .games-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .footer-cols{grid-template-columns:repeat(3,1fr)} } @media(min-width:900px){ .grid-2{grid-template-columns:repeat(4,1fr)} .games-grid{grid-template-columns:repeat(6,minmax(0,1fr))} } @media(max-width:520px){ .lang-btn span:last-child{display:none} .lang-btn{padding:0 8px} } @media (prefers-reduced-motion: reduce){ .banner::before,.banner-title,.cs-float,.logo-mark,.brand-banner-deco,.brand-banner-shape{animation:none !important} .drawer-nav a{animation:none !important;opacity:1;transform:none} .reveal{opacity:1 !important;transform:none !important;transition:none !important} .bg-blob{animation:none !important} } /* ============ BADGE POJOK (Hot/Baru/Diskon) ============ */ .badge-corner{position:absolute;top:8px;right:8px;z-index:3;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.3px;color:#fff;box-shadow:0 4px 10px -2px rgba(0,0,0,.35);animation:badgePulse 2s ease-in-out infinite} .badge-corner.hot{background:linear-gradient(135deg,#F97316,#DC2626)} .badge-corner.new{background:linear-gradient(135deg,var(--gold),var(--gold-2))} @keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} /* ============ SECTION HEAD ICON BOUNCE ============ */ .section-head h2{display:inline-flex;align-items:center;gap:8px} .section-head h2::before{content:"";display:inline-block;width:5px;height:20px;border-radius:4px;background:linear-gradient(180deg,var(--gold),var(--gold-2));box-shadow:0 0 10px color-mix(in srgb,var(--gold) 60%,transparent)} .game-card{position:relative} /* ============ PRODUK DETAIL / HALAMAN ORDER ============ */ .order-hero{max-width:720px;margin:-40px auto 24px;position:relative;z-index:5;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0 20px 20px;text-align:center;box-shadow:0 24px 55px -22px rgba(15,23,42,.3)} .order-hero-cover{width:112px;height:140px;margin:-50px auto 12px;border-radius:16px;overflow:hidden;border:3px solid var(--surface);box-shadow:0 16px 32px -10px rgba(0,0,0,.4);background:linear-gradient(160deg,var(--gold),var(--gold-2));display:flex;align-items:center;justify-content:center} .order-hero-cover img{width:100%;height:100%;object-fit:cover} .order-hero-cover .cover-fallback{color:#fff;font-weight:800;font-size:22px} .order-hero h1{font-family:'Sora',sans-serif;font-size:19px;font-weight:800;color:var(--text);line-height:1.3} .order-hero .order-hero-cat{color:var(--muted);font-size:12.5px;font-weight:600;margin-top:2px} .order-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:14px;font-size:12px;font-weight:700;color:var(--text)} .order-badges span{display:flex;align-items:center;gap:6px;white-space:nowrap} .order-badges i{color:var(--gold)} .order-rating{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:12.5px;color:var(--muted);font-weight:700} .order-rating .stars{color:#F59E0B;letter-spacing:1px} .order-tabs{display:flex;gap:8px;margin-bottom:18px} .order-tab{flex:1;padding:12px;border-radius:12px;font-weight:800;font-size:13px;border:1px solid var(--border);background:var(--bg-2);color:var(--muted);transition:.2s ease} .order-tab.active{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;border-color:transparent;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--gold) 60%,transparent)} .order-tab:not(.active):hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--border));color:var(--gold)} .order-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:14px;box-shadow:0 12px 28px -20px rgba(15,23,42,.35)} .order-step-head{background:linear-gradient(120deg,var(--gold),var(--gold-2));color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:13px} .order-step-num{width:23px;height:23px;border-radius:8px;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:11.5px;flex-shrink:0} .order-step-body{padding:16px} .order-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .order-input{width:100%;background:var(--bg-2);border:1.5px solid var(--border);border-radius:12px;padding:12.5px 15px;font-size:13.5px;font-weight:600;color:var(--text);outline:none;transition:.2s ease} .order-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)} .order-input::placeholder{color:var(--muted);opacity:.85} .nominal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(min-width:480px){.nominal-grid{grid-template-columns:repeat(3,1fr)}} .nominal-item{position:relative;text-align:left;border:2px solid var(--border);border-radius:14px;padding:12px;background:var(--bg-2);transition:.16s ease} .nominal-item:hover{border-color:color-mix(in srgb,var(--gold) 55%,var(--border));transform:translateY(-2px)} .nominal-item.selected{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--bg-2));box-shadow:0 12px 24px -14px color-mix(in srgb,var(--gold) 65%,transparent)} .nominal-item .nm-check{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;box-shadow:0 4px 10px -2px rgba(0,0,0,.35);transform:scale(0);transition:transform .18s ease} .nominal-item.selected .nm-check{transform:scale(1)} .nominal-item .nm-name{font-size:11.5px;font-weight:700;color:var(--text);line-height:1.35;margin-bottom:6px} .nominal-item .nm-price{font-size:13px;font-weight:800;color:var(--gold)} .order-summary-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:13px} .order-summary-row .lbl{color:var(--muted);font-weight:700;flex-shrink:0} .order-summary-row .val{color:var(--text);font-weight:800;text-align:right} .order-summary-row .val.price{color:var(--gold);font-weight:900} .promo-row{display:flex;gap:8px} .promo-row .order-input{flex:1;text-transform:uppercase} .promo-btn{padding:0 20px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;font-weight:800;font-size:12.5px;flex-shrink:0} .pay-opt-grid{display:grid;grid-template-columns:1fr;gap:8px} @media(min-width:640px){.pay-opt-grid{grid-template-columns:repeat(2,1fr)}} .pay-opt{text-align:left;border:2px solid var(--border);border-radius:12px;padding:11px 12px;background:var(--bg-2);transition:.16s ease;display:flex;align-items:center;gap:10px} .pay-opt:hover{border-color:color-mix(in srgb,var(--gold) 55%,var(--border))} .pay-opt.selected{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--bg-2))} .pay-opt-logo{width:32px;height:32px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border:1px solid var(--border)} .pay-opt-logo img{width:100%;height:100%;object-fit:contain} .pay-opt-logo i{color:var(--gold);font-size:13px} .pay-opt .pay-opt-name{font-size:12px;font-weight:800;color:var(--text)} .pay-opt .pay-opt-desc{font-size:10px;color:var(--muted);margin-top:1px;line-height:1.3} .order-empty-box{border:2px dashed var(--border);border-radius:12px;padding:18px;text-align:center;color:var(--muted);font-size:12.5px;font-weight:600} .order-alert-error{background:color-mix(in srgb, #E11D48 12%, var(--bg-2));border:1px solid color-mix(in srgb, #E11D48 35%, var(--border));color:#E11D48;font-size:13px;font-weight:700;border-radius:12px;padding:12px 16px;margin-bottom:16px} body[data-surface="gelap"] .order-alert-error{color:#FDA4AF} .order-login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;text-align:center} .order-login-card p{color:var(--muted);font-size:13.5px;margin-bottom:16px} .sticky-order-bar{position:fixed;bottom:0;left:0;width:100%;background:var(--surface);border-top:1px solid var(--border);padding:12px 16px;z-index:40;box-shadow:0 -8px 24px -14px rgba(15,23,42,.3);backdrop-filter:none;-webkit-backdrop-filter:blur(14px)} .sticky-order-bar .total-lbl{font-size:10.5px;color:var(--muted);font-weight:700} .sticky-order-bar .total-val{font-weight:900;color:var(--text);font-size:15px} .sticky-order-bar .btn-order-now{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;box-shadow:0 10px 24px -8px color-mix(in srgb,var(--gold) 60%,transparent)} .sticky-order-bar .btn-order-now:disabled{opacity:.55;box-shadow:none} .order-modal-card{background:var(--surface);color:var(--text)} .order-modal-card p, .order-modal-card label{color:var(--muted)} .order-modal-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:2px 0} .order-modal-row .k{color:var(--muted);flex-shrink:0} .order-modal-row .v{font-weight:700;color:var(--text);text-align:right} .order-modal-box{background:var(--bg-2);border:1px solid var(--border);border-radius:16px;padding:16px} .btn-press{transition:transform .15s cubic-bezier(.3,.7,.4,1), box-shadow .15s ease} .btn-press:active{transform:scale(.94)} /* ============ BANNER BAWAH ============ */ .bottom-banner-section{padding:8px 16px 32px} .bottom-banner-grid{display:grid;grid-template-columns:1fr;gap:14px} .bottom-banner-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:21/9;border:1px solid var(--border);box-shadow:0 14px 30px -14px rgba(15,23,42,.25);transition:.3s cubic-bezier(.2,.8,.2,1)} .bottom-banner-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -14px rgba(37,99,235,.35)} .bottom-banner-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .bottom-banner-card:hover img{transform:scale(1.05)} @media(min-width:640px){.bottom-banner-grid{grid-template-columns:repeat(2,1fr)}} /* ---- About footer ---- */ .about-glass-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:420px;margin:18px 0 24px} .about-glass-point{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--gold) 6%,transparent);border:1px solid color-mix(in srgb,var(--gold) 16%,var(--border))} .about-glass-point i{font-size:12px;color:var(--gold);flex-shrink:0} .about-glass-point span{font-size:11px;font-weight:700;color:var(--text)} .about-info-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;width:100%;max-width:480px;margin:16px auto 0} .about-info-links a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted);transition:.2s} .about-info-links a:hover{color:var(--gold)} .about-info-links a i{font-size:12px} .about-contact-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px} .about-contact-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font-weight:700;font-size:13px;transition:.25s} .about-contact-btn.wa{background:#22C55E;color:#fff;box-shadow:0 12px 24px -8px rgba(34,197,94,.5)} .about-contact-btn.wa:hover{transform:translateY(-2px)} .about-contact-btn.mail{background:#fff;color:var(--text);border:1px solid var(--border)} .about-contact-btn.mail:hover{border-color:var(--gold);color:var(--gold)} .live-ticker-wrap{width:100%;max-width:560px;margin:20px auto 0;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--gold) 6%,transparent);border:1px solid color-mix(in srgb,var(--gold) 16%,var(--border));padding:9px 16px;display:flex;align-items:center;gap:10px} .live-ticker-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;flex-shrink:0;box-shadow:0 0 0 3px rgba(34,197,94,.2);animation:liveDotPulse 1.6s ease-in-out infinite} @keyframes liveDotPulse{0%,100%{opacity:1}50%{opacity:.4}} .live-ticker-track-wrap{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent);mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent)} .live-ticker-track{display:flex;width:max-content;gap:36px;animation:liveTickerScroll 18s linear infinite;white-space:nowrap} .live-ticker-track:hover{animation-play-state:paused} @keyframes liveTickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .live-ticker-item{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap} .live-ticker-item b{color:var(--text);font-weight:800} .live-ticker-item .prod{color:var(--gold);font-weight:700} @media (max-width:420px){ .about-glass-grid{grid-template-columns:1fr 1fr;max-width:100%} .about-info-links{gap:6px 14px} } /* ========================================================================= FIX ERROR: TOP BANNER & LIVE TICKER YANG TERPOTONG/KECIL Menyesuaikan secara otomatis lebar mobile & menaikkan min-height teks ========================================================================= */ .top-banner-wrap{display:flex;flex-direction:column;gap:6px;padding:12px 16px 0;width:100%;box-sizing:border-box} .top-banner{display:flex;align-items:center;gap:10px;border-radius:14px;padding:8px 12px;max-width:900px;margin:0 auto;overflow:hidden;width:100%;box-sizing:border-box} .top-banner.running-banner{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 10%,#EAF4FF),color-mix(in srgb,var(--gold-2) 10%,#EAF4FF))} .top-banner.live-banner{background:color-mix(in srgb,#22C55E 8%,#fff);border:1px solid color-mix(in srgb,#22C55E 20%,var(--border))} .top-banner-icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-size:12px} .top-banner-dot{flex-shrink:0;width:8px;height:8px;margin-left:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.2);animation:liveDotPulse 1.6s ease-in-out infinite} .top-banner-track-wrap{flex:1;min-width:0;overflow:hidden;position:relative;height:24px;-webkit-mask-image:linear-gradient(to right,transparent,black 10px,black calc(100% - 10px),transparent);mask-image:linear-gradient(to right,transparent,black 10px,black calc(100% - 10px),transparent)} .top-banner-track{position:relative;height:100%} .top-banner-item{position:absolute;left:0;top:0;height:100%;display:inline-flex;align-items:center;white-space:nowrap;font-size:13px;font-weight:700;color:var(--text);opacity:0;width:max-content;max-width:none} .live-banner .top-banner-item{font-weight:600;color:var(--muted)} .live-banner .top-banner-item b{color:var(--text);font-weight:800} .live-banner .top-banner-item .prod{color:#16A34A;font-weight:700} .top-banner-close{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 20%,var(--border));display:grid;place-items:center;color:var(--text);font-size:12px;transition:.2s;cursor:pointer} .top-banner-close:hover{background:#fff;color:var(--gold)} @media (max-width:480px){ .top-banner-wrap{padding:0} .top-banner{border-radius:0;padding:8px 12px;gap:8px} .top-banner-icon{width:24px;height:24px;font-size:11px} .top-banner-item{font-size:12.5px} } .live-bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,#22C55E 8%,#fff);border-top:1px solid color-mix(in srgb,#22C55E 22%,var(--border));box-shadow:0 -6px 18px -8px rgba(0,0,0,.10)} .live-bottom-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:9px 14px;box-sizing:border-box} .live-bottom-badge{flex-shrink:0;display:flex;align-items:center;gap:6px;background:rgba(34,197,94,.14);border-radius:999px;padding:4px 10px} .live-bottom-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.2);animation:liveDotPulse 1.6s ease-in-out infinite} .live-bottom-live-text{font-size:11px;font-weight:800;color:#16A34A;text-transform:uppercase;letter-spacing:.04em} .live-bottom-viewport{flex:1;min-width:0;overflow:hidden;position:relative;height:24px;-webkit-mask-image:linear-gradient(to right,transparent,black 10px,black calc(100% - 10px),transparent);mask-image:linear-gradient(to right,transparent,black 10px,black calc(100% - 10px),transparent)} .live-bottom-item{position:absolute;left:0;top:0;height:100%;display:inline-flex;align-items:center;white-space:nowrap;font-size:13px;font-weight:600;color:var(--muted);opacity:0;width:max-content;max-width:none} .live-bottom-item b{color:var(--text);font-weight:800} .live-bottom-item .prod{color:#16A34A;font-weight:700} .live-bottom-close{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.75);display:grid;place-items:center;color:var(--muted);font-size:12px;transition:.2s;cursor:pointer} .live-bottom-close:hover{background:#fff;color:var(--text)} @media (max-width:480px){ .live-bottom-inner{padding:7px 12px;gap:8px} .live-bottom-item{font-size:12.5px} .live-bottom-live-text{font-size:10px} } .pay-section{padding:36px 16px 34px;text-align:center} .pay-section-title{font-family:var(--font-head,inherit);font-weight:800;font-size:18px;color:var(--text);margin-bottom:4px} .pay-section-sub{font-size:12.5px;color:var(--muted);margin-bottom:18px} /* FINAL THEME RULES: solid surfaces + consistent contrast */ /* Theme surfaces: keep POPULER/REKOMENDASI gradient cards intact. Do NOT overwrite .prod-card background here; the grad-* classes are the intentional card colors used by the original design in both themes. */ body[data-surface="gelap"] .order-step,body[data-surface="gelap"] .order-hero,body[data-surface="gelap"] .pay-grid-card,body[data-surface="gelap"] .faq-item{background:var(--surface)!important;color:var(--text);border-color:var(--border)!important;} body[data-surface="gelap"] .game-name,body[data-surface="gelap"] .section-head h2{color:var(--text)!important;} body[data-surface="gelap"] .section-head p,body[data-surface="gelap"] .about-glass-desc,body[data-surface="gelap"] .footer-desc,body[data-surface="gelap"] .footer-cols a{color:var(--muted)!important;} body[data-surface="terang"] .order-step,body[data-surface="terang"] .order-hero,body[data-surface="terang"] .pay-grid-card,body[data-surface="terang"] .faq-item{background:#fff!important;color:var(--text);border-color:var(--border)!important;} body[data-surface="terang"] .game-name,body[data-surface="terang"] .section-head h2{color:var(--text)!important;} body[data-surface="terang"] .section-head p,body[data-surface="terang"] .about-glass-desc,body[data-surface="terang"] .footer-desc,body[data-surface="terang"] .footer-cols a{color:var(--muted)!important;} /* Original colored cards: both light and dark themes keep the palette. */ .prod-card.grad-1,.prod-card.grad-2,.prod-card.grad-3,.prod-card.grad-4, .prod-card.grad-5,.prod-card.grad-6,.prod-card.grad-7{ color:#fff !important; border-color:rgba(255,255,255,.24) !important; } .prod-card.grad-1 .prod-info strong,.prod-card.grad-2 .prod-info strong,.prod-card.grad-3 .prod-info strong, .prod-card.grad-4 .prod-info strong,.prod-card.grad-5 .prod-info strong,.prod-card.grad-6 .prod-info strong,.prod-card.grad-7 .prod-info strong, .prod-card.grad-1 .prod-info span,.prod-card.grad-2 .prod-info span,.prod-card.grad-3 .prod-info span, .prod-card.grad-4 .prod-info span,.prod-card.grad-5 .prod-info span,.prod-card.grad-6 .prod-info span,.prod-card.grad-7 .prod-info span{ color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.28); } .prod-card.grad-1 .prod-thumb,.prod-card.grad-2 .prod-thumb,.prod-card.grad-3 .prod-thumb, .prod-card.grad-4 .prod-thumb,.prod-card.grad-5 .prod-thumb,.prod-card.grad-6 .prod-thumb,.prod-card.grad-7 .prod-thumb{ background:rgba(255,255,255,.16) !important; } /* ============================================================ THEME FIX V7 - LIVE/RUNNING TICKERS + FLASH SALE No transparency that can destroy contrast in dark/light mode. ============================================================ */ body[data-surface="terang"]{ --live-bg:#FFFFFF; --live-surface:#F8FAFC; --live-border:#DDE5EF; --live-text:#0F172A; --live-muted:#475569; --live-product:#15803D; --flash-wrap:#1F2329; --flash-card:#343A43; --flash-text:#F8FAFC; --flash-muted:#CBD5E1; --flash-old:#AEB7C3; } body[data-surface="gelap"]{ --live-bg:#0F172A; --live-surface:#111827; --live-border:#334155; --live-text:#F8FAFC; --live-muted:#CBD5E1; --live-product:#4ADE80; --flash-wrap:#171B22; --flash-card:#222B3A; --flash-text:#F8FAFC; --flash-muted:#CBD5E1; --flash-old:#94A3B8; } /* Running announcement */ .top-banner.running-banner{ background:var(--live-surface)!important; border:1px solid var(--live-border)!important; color:var(--live-text)!important; } .top-banner.running-banner .top-banner-item{ color:var(--live-text)!important; text-shadow:none!important; } .top-banner.running-banner .top-banner-close{ background:var(--live-bg)!important; color:var(--live-text)!important; border:1px solid var(--live-border)!important; box-shadow:none!important; } body[data-surface="gelap"] .top-banner.running-banner .top-banner-close:hover{ background:#1E293B!important; color:#fff!important; } /* Bottom live notification */ .live-bottom-bar{ background:var(--live-bg)!important; border-top:1px solid var(--live-border)!important; box-shadow:0 -8px 24px -14px rgba(0,0,0,.55)!important; color:var(--live-text)!important; } .live-bottom-badge{ background:rgba(34,197,94,.12)!important; } .live-bottom-live-text{color:var(--live-product)!important} .live-bottom-item{color:var(--live-muted)!important;text-shadow:none!important} .live-bottom-item b{color:var(--live-text)!important} .live-bottom-item .prod{color:var(--live-product)!important} .live-bottom-close{ background:var(--live-surface)!important; color:var(--live-muted)!important; border:1px solid var(--live-border)!important; } .live-bottom-close:hover{ background:var(--bg-2)!important; color:var(--live-text)!important; } /* Flash sale: every state uses the same theme-safe surface. This also prevents the single tapped/focused card from becoming white. */ .flash-sale-wrap{ background:var(--flash-wrap)!important; color:var(--flash-text)!important; border:1px solid var(--border)!important; } .flash-sale-card, .flash-sale-card:visited, .flash-sale-card:hover, .flash-sale-card:active, .flash-sale-card:focus, .flash-sale-card:focus-visible{ background:var(--flash-card)!important; color:var(--flash-text)!important; border:1px solid var(--border)!important; outline:none!important; -webkit-tap-highlight-color:transparent!important; } .flash-sale-card:focus-visible{ box-shadow:0 0 0 2px var(--gold)!important; } .flash-sale-name{color:var(--flash-text)!important} .flash-sale-category{color:var(--flash-muted)!important} .flash-sale-old{color:var(--flash-old)!important} .flash-sale-new{color:var(--flash-text)!important} .flash-sale-voucher{color:var(--flash-muted)!important} .flash-sale-voucher span{color:var(--flash-muted)!important} .flash-sale-thumb{background:#111827!important} /* Do not let generic anchor/button theme rules repaint flash cards. */ body[data-surface="gelap"] .flash-sale-card, body[data-surface="gelap"] .flash-sale-card:visited, body[data-surface="gelap"] .flash-sale-card:hover, body[data-surface="gelap"] .flash-sale-card:active, body[data-surface="gelap"] .flash-sale-card:focus{ background:#222B3A!important; color:#F8FAFC!important; } body[data-surface="terang"] .flash-sale-card, body[data-surface="terang"] .flash-sale-card:visited, body[data-surface="terang"] .flash-sale-card:hover, body[data-surface="terang"] .flash-sale-card:active, body[data-surface="terang"] .flash-sale-card:focus{ background:#FFFFFF!important; color:#0F172A!important; } body[data-surface="terang"] .flash-sale-name{color:#0F172A!important} body[data-surface="terang"] .flash-sale-new{color:#0F172A!important} body[data-surface="terang"] .flash-sale-category{color:#64748B!important} body[data-surface="terang"] .flash-sale-old{color:#94A3B8!important} /* ============================================================ THEME INTEGRATION V9 — STORE PAGES ============================================================ */ body[data-surface="gelap"] .top-banner.live-banner{ background:#10261B!important; border-color:#24543A!important; } body[data-surface="gelap"] .top-banner.live-banner .top-banner-item, body[data-surface="gelap"] .top-banner.live-banner .live-banner .top-banner-item{ color:#E2E8F0!important; } body[data-surface="gelap"] .top-banner.live-banner .top-banner-item b{color:#F8FAFC!important;} body[data-surface="gelap"] .top-banner.live-banner .top-banner-item .prod{color:#4ADE80!important;} /* Keep all non-gradient store cards tied to the theme. */ body[data-surface="gelap"] .order-hero, body[data-surface="gelap"] .order-step, body[data-surface="gelap"] .faq-item, body[data-surface="gelap"] .pay-opt, body[data-surface="gelap"] .payment-option-card{ background:var(--surface)!important; color:var(--text)!important; border-color:var(--border)!important; } body[data-surface="gelap"] .footer-desc, body[data-surface="gelap"] .footer-cols a{color:var(--muted)!important;} body[data-surface="gelap"] .footer-cols a:hover{color:var(--gold)!important;} /* The original coloured recommendation/popular palette is intentional. */ body[data-surface="gelap"] .prod-card.grad-1, body[data-surface="gelap"] .prod-card.grad-2, body[data-surface="gelap"] .prod-card.grad-3, body[data-surface="gelap"] .prod-card.grad-4, body[data-surface="gelap"] .prod-card.grad-5, body[data-surface="gelap"] .prod-card.grad-6, body[data-surface="gelap"] .prod-card.grad-7{ color:#fff!important; } /* Flash sale: never inherit a white surface from generic anchors. */ body[data-surface="gelap"] .flash-sale-wrap{background:#171B22!important;color:#F8FAFC!important;} body[data-surface="gelap"] .flash-sale-card, body[data-surface="gelap"] .flash-sale-card:hover, body[data-surface="gelap"] .flash-sale-card:active, body[data-surface="gelap"] .flash-sale-card:focus, body[data-surface="gelap"] .flash-sale-card:visited{background:#222B3A!important;color:#F8FAFC!important;} body[data-surface="terang"] .flash-sale-wrap{background:#1F2329!important;color:#F8FAFC!important;} body[data-surface="terang"] .flash-sale-card, body[data-surface="terang"] .flash-sale-card:hover, body[data-surface="terang"] .flash-sale-card:active, body[data-surface="terang"] .flash-sale-card:focus, body[data-surface="terang"] .flash-sale-card:visited{background:#343A43!important;color:#F8FAFC!important;} body[data-surface="terang"] .flash-sale-name, body[data-surface="terang"] .flash-sale-new{color:#F8FAFC!important;} body[data-surface="terang"] .flash-sale-category{color:#CBD5E1!important;} body[data-surface="terang"] .flash-sale-old{color:#AEB7C3!important;}