/* Dipindah dari shop/index.php (blok #6, id=monochrome-blue-only) */ /* ════════════════════════════════════════════════════════════ MONOCHROME PALETTE: ONLY WHITE, BLACK, BLUE All other accent colors are normalized to blue/white/black. ════════════════════════════════════════════════════════════ */ /* Section pills — semua varian (orange/green/cyan/amber/pink/etc.) jadi biru */ .sg-pill-blue, .sg-pill-cyan, .sg-pill-green, .sg-pill-amber, .sg-pill-orange, .sg-pill-pink, .sg-pill-purple, .sg-pill-red, .sg-pill-yellow, .sg-pill-emerald, .sg-pill-rose { background: #e8f0ff !important; color: #0f6ee6 !important; border-color: #cfdcff !important; } [data-theme="dark"] .sg-pill-blue, [data-theme="dark"] .sg-pill-cyan, [data-theme="dark"] .sg-pill-green, [data-theme="dark"] .sg-pill-amber, [data-theme="dark"] .sg-pill-orange, [data-theme="dark"] .sg-pill-pink, [data-theme="dark"] .sg-pill-purple, [data-theme="dark"] .sg-pill-red, [data-theme="dark"] .sg-pill-yellow, [data-theme="dark"] .sg-pill-emerald, [data-theme="dark"] .sg-pill-rose, html:not([data-theme="light"]) .sg-pill-blue, html:not([data-theme="light"]) .sg-pill-cyan, html:not([data-theme="light"]) .sg-pill-green, html:not([data-theme="light"]) .sg-pill-amber, html:not([data-theme="light"]) .sg-pill-orange, html:not([data-theme="light"]) .sg-pill-pink, html:not([data-theme="light"]) .sg-pill-purple, html:not([data-theme="light"]) .sg-pill-red, html:not([data-theme="light"]) .sg-pill-yellow, html:not([data-theme="light"]) .sg-pill-emerald, html:not([data-theme="light"]) .sg-pill-rose { background: rgba(26, 134, 255,.18) !important; color: #ffffff !important; border-color: rgba(26, 134, 255,.35) !important; } .sg-pill-blue i, .sg-pill-cyan i, .sg-pill-green i, .sg-pill-amber i, .sg-pill-orange i, .sg-pill-pink i, .sg-pill-purple i, .sg-pill-red i, .sg-pill-yellow i, .sg-pill-emerald i, .sg-pill-rose i { color: #1a86ff !important; } [data-theme="dark"] .sg-pill-blue i, [data-theme="dark"] .sg-pill-cyan i, [data-theme="dark"] .sg-pill-green i, [data-theme="dark"] .sg-pill-amber i, [data-theme="dark"] .sg-pill-orange i, [data-theme="dark"] .sg-pill-pink i, [data-theme="dark"] .sg-pill-purple i, [data-theme="dark"] .sg-pill-red i, [data-theme="dark"] .sg-pill-yellow i, [data-theme="dark"] .sg-pill-emerald i, [data-theme="dark"] .sg-pill-rose i, html:not([data-theme="light"]) .sg-pill-blue i, html:not([data-theme="light"]) .sg-pill-cyan i, html:not([data-theme="light"]) .sg-pill-green i, html:not([data-theme="light"]) .sg-pill-amber i, html:not([data-theme="light"]) .sg-pill-orange i, html:not([data-theme="light"]) .sg-pill-pink i, html:not([data-theme="light"]) .sg-pill-purple i, html:not([data-theme="light"]) .sg-pill-red i, html:not([data-theme="light"]) .sg-pill-yellow i, html:not([data-theme="light"]) .sg-pill-emerald i, html:not([data-theme="light"]) .sg-pill-rose i { color: #ffffff !important; } /* Status badges (od-state-*, tg-status-*) — blue normalize */ [class*="od-state-pending"], [class*="od-state-paid"], [class*="od-state-success"], [class*="od-state-completed"], [class*="od-state-expired"], [class*="od-state-failed"], .tg-status-warning, .tg-status-success, .tg-status-error, .tg-status-info, .tg-status-pending, .tg-status-paid { background: rgba(26, 134, 255,.18) !important; color: #ffffff !important; border-color: rgba(26, 134, 255,.35) !important; } [data-theme="light"] [class*="od-state-pending"], [data-theme="light"] [class*="od-state-paid"], [data-theme="light"] [class*="od-state-success"], [data-theme="light"] [class*="od-state-completed"], [data-theme="light"] [class*="od-state-expired"], [data-theme="light"] [class*="od-state-failed"], [data-theme="light"] .tg-status-warning, [data-theme="light"] .tg-status-success, [data-theme="light"] .tg-status-error, [data-theme="light"] .tg-status-info, [data-theme="light"] .tg-status-pending, [data-theme="light"] .tg-status-paid { background: #e8f0ff !important; color: #0f6ee6 !important; border-color: #cfdcff !important; } /* Hapus pewarnaan non-biru di icon umum */ .sg-section-pill i, .sg-product-cat i, .sg-benefit-icon, .sg-benefit-icon i, .sg-cat-card i, .tg-game-card i { color: #1a86ff !important; } [data-theme="dark"] .sg-section-pill i, [data-theme="dark"] .sg-product-cat i, [data-theme="dark"] .sg-benefit-icon i, [data-theme="dark"] .sg-cat-card i, [data-theme="dark"] .tg-game-card i, html:not([data-theme="light"]) .sg-section-pill i, html:not([data-theme="light"]) .sg-product-cat i, html:not([data-theme="light"]) .sg-benefit-icon i, html:not([data-theme="light"]) .sg-cat-card i, html:not([data-theme="light"]) .tg-game-card i { color: #ffffff !important; } /* Benefit icons — pakai blue gradient */ .sg-benefit-icon { background: linear-gradient(135deg, #0f6ee6, #1a86ff) !important; color: #ffffff !important; box-shadow: 0 12px 28px -14px rgba(26, 134, 255,.55) !important; } .sg-benefit-icon i { color:#ffffff !important; } /* Tag colors di product card / catalog — blue */ .sg-product-tag, .sg-product-badge, .sg-cat-card-tag, .tg-market-card-badge { background: #1a86ff !important; color: #ffffff !important; border-color: transparent !important; } /* Label brand text fade — pakai blue gradient (bukan cyan/teal) */ .sg-hero-title span, .tg-hero-panel h1 span { background: linear-gradient(135deg, #ffffff 0%, #cfe0ff 60%, #ffffff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* Footer brand chips */ .sg-footer-chip, .sg-footer-tag { background: rgba(26, 134, 255,.12) !important; color: #ffffff !important; border-color: rgba(26, 134, 255,.3) !important; } [data-theme="light"] .sg-footer-chip, [data-theme="light"] .sg-footer-tag { background: rgba(0, 0, 0, .06) !important; color: #000000 !important; border-color: #e2e8f0 !important; } /* Reduce non-blue accents on links */ a { color: #1a86ff; } a:hover { color: #2e93ff; } [data-theme="dark"] a, html:not([data-theme="light"]) a { color: #cfe0ff; } [data-theme="dark"] a:hover, html:not([data-theme="light"]) a:hover { color: #ffffff; } /* Ghost/secondary buttons: pure white text (override link color) */ a.sg-btn-ghost, .sg-btn-ghost, [data-theme="dark"] a.sg-btn-ghost, [data-theme="dark"] .sg-btn-ghost, html:not([data-theme="light"]) a.sg-btn-ghost, html:not([data-theme="light"]) .sg-btn-ghost, a.od-btn-secondary, a.od-btn-ghost, [data-theme="dark"] a.od-btn-secondary, [data-theme="dark"] a.od-btn-ghost, html:not([data-theme="light"]) a.od-btn-secondary, html:not([data-theme="light"]) a.od-btn-ghost { color: #ffffff !important; } a.sg-btn-ghost i, .sg-btn-ghost i, a.od-btn-secondary i, a.od-btn-ghost i { color: #ffffff !important; } /* Primary buttons — teks hitam di light theme */ a.sg-btn-primary, .sg-btn-primary { color: #0f6ee6 !important; } a.sg-btn-primary i, .sg-btn-primary i { color: #0f6ee6 !important; } html[data-theme="light"] a.sg-btn-primary, html[data-theme="light"] .sg-btn-primary, html[data-theme="light"] a.sg-btn-primary i, html[data-theme="light"] .sg-btn-primary i { color: #000000 !important; } [data-theme="dark"] a.sg-btn-primary, [data-theme="dark"] .sg-btn-primary, html:not([data-theme="light"]) a.sg-btn-primary, html:not([data-theme="light"]) .sg-btn-primary { background: #ffffff !important; color: #0f6ee6 !important; } /* ════════════════════════════════════════════════════════════ SURFACE & TEXT — strict white/black/blue ════════════════════════════════════════════════════════════ */ /* LIGHT MODE: white surfaces, black/blue text, blue borders */ html[data-theme="light"] body, html[data-theme="light"] .tg-app, html[data-theme="light"] .tg-main, html[data-theme="light"] .sg-section, html[data-theme="light"] .sg-section-card, html[data-theme="light"] .sg-card-market, html[data-theme="light"] .sg-card-recent, html[data-theme="light"] .sg-card-track, html[data-theme="light"] .sg-home-categories, html[data-theme="light"] .sg-product-card, html[data-theme="light"] .sg-cat-card, html[data-theme="light"] .sg-benefit-card, html[data-theme="light"] .tg-card, html[data-theme="light"] .tg-game-card, html[data-theme="light"] .tg-product-card, html[data-theme="light"] .tg-trust-strip, html[data-theme="light"] .tg-trust-item, html[data-theme="light"] .tg-recent-list .tg-rx, html[data-theme="light"] .sg-tab, html[data-theme="light"] .tg-input, html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { background: #ffffff !important; background-image: none !important; background-color: #ffffff !important; border-color: #cfdcff !important; } html[data-theme="light"], html[data-theme="light"] body, html[data-theme="light"] .tg-app, html[data-theme="light"] .tg-main { color: #000000 !important; } html[data-theme="light"] .sg-product-cat, html[data-theme="light"] .sg-product-meta, html[data-theme="light"] .sg-section-desc, html[data-theme="light"] .tg-text-muted, html[data-theme="light"] small, html[data-theme="light"] .text-muted, html[data-theme="light"] .muted { color: #000000 !important; } html[data-theme="light"] .sg-product-name, html[data-theme="light"] .sg-section-title, html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6, html[data-theme="light"] strong, html[data-theme="light"] b { color: #000000 !important; } /* Hero text in light mode tetap putih (di atas latar biru) */ html[data-theme="light"] .sg-hero, html[data-theme="light"] .sg-hero *, html[data-theme="light"] .tg-hero, html[data-theme="light"] .tg-hero * { color: #ffffff !important; } html[data-theme="light"] .sg-hero-search, html[data-theme="light"] .sg-hero-search-standalone { background: #ffffff !important; } html[data-theme="light"] .sg-hero-search input, html[data-theme="light"] .sg-hero-search-standalone input { color: #000000 !important; } html[data-theme="light"] .sg-hero-search input::placeholder, html[data-theme="light"] .sg-hero-search-standalone input::placeholder { color: #64748b !important; opacity: .75; } /* Kategori tabs — light theme final override */ html[data-theme="light"] .sg-tabs-wrap .sg-section-title { color: #0f172a !important; } html[data-theme="light"] .sg-tabs-wrap .sg-section-desc { color: #64748b !important; } html[data-theme="light"] .sg-tabs-wrap .sg-tab { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } html[data-theme="light"] .sg-tabs-wrap .sg-tab:not(.is-active) i { color: #000000 !important; } html[data-theme="light"] .sg-tabs-wrap .sg-tab:not(.is-active) em { background: rgba(0, 0, 0, .06) !important; color: #000000 !important; } html[data-theme="light"] .sg-tabs-wrap .sg-tab.is-active { background: #1a86ff !important; border-color: #1a86ff !important; color: #ffffff !important; } html[data-theme="light"] .sg-tabs-wrap .sg-tab.is-active i { color: #ffffff !important; } html[data-theme="light"] .sg-tabs-wrap .sg-tab.is-active em { background: rgba(255, 255, 255, .18) !important; color: #ffffff !important; } /* DARK MODE: black surfaces, white text, blue borders */ html:not([data-theme="light"]) body, html[data-theme="dark"] body, html:not([data-theme="light"]) .sg-section, html:not([data-theme="light"]) .sg-section-card, html:not([data-theme="light"]) .sg-card-market, html:not([data-theme="light"]) .sg-card-recent, html:not([data-theme="light"]) .sg-card-track, html:not([data-theme="light"]) .sg-home-categories, html:not([data-theme="light"]) .sg-product-card, html:not([data-theme="light"]) .sg-cat-card, html:not([data-theme="light"]) .sg-benefit-card, html:not([data-theme="light"]) .tg-card, html:not([data-theme="light"]) .tg-game-card, html:not([data-theme="light"]) .tg-product-card, html:not([data-theme="light"]) .tg-trust-strip, html:not([data-theme="light"]) .tg-trust-item, html:not([data-theme="light"]) .tg-recent-list .tg-rx, html:not([data-theme="light"]) .sg-tab, html:not([data-theme="light"]) .tg-input, html:not([data-theme="light"]) input:not(.sg-hero-search input):not(.sg-hero-search-standalone input):not(.sg-nav-search-input), html:not([data-theme="light"]) textarea, html:not([data-theme="light"]) select { border-color: rgba(26, 134, 255,.25) !important; } html:not([data-theme="light"]) { color: #ffffff !important; } html:not([data-theme="light"]) .sg-product-cat, html:not([data-theme="light"]) .sg-product-meta, html:not([data-theme="light"]) .sg-section-desc, html:not([data-theme="light"]) .tg-text-muted, html:not([data-theme="light"]) small, html:not([data-theme="light"]) .text-muted, html:not([data-theme="light"]) .muted { color: rgba(255,255,255,.78) !important; } html:not([data-theme="light"]) .sg-product-name, html:not([data-theme="light"]) .sg-section-title, html:not([data-theme="light"]) h1, html:not([data-theme="light"]) h2, html:not([data-theme="light"]) h3, html:not([data-theme="light"]) h4, html:not([data-theme="light"]) h5, html:not([data-theme="light"]) h6 { color: #ffffff !important; } /* Buang shadow berwarna selain biru */ .sg-product-card, .sg-section-card, .sg-cat-card, .sg-benefit-card, .tg-card, .tg-product-card { box-shadow: 0 8px 24px -16px rgba(26, 134, 255,.35) !important; } /* Recent transactions feed — product name & price putih di dark mode */ html:not([data-theme="light"]) .tg-rx-prod, [data-theme="dark"] .tg-rx-prod { color: #ffffff !important; } html:not([data-theme="light"]) .tg-rx-price, [data-theme="dark"] .tg-rx-price { color: #ffffff !important; } html:not([data-theme="light"]) .tg-rx-meta, [data-theme="dark"] .tg-rx-meta { color: rgba(255,255,255,.7) !important; } /* Section pill ("Populer", "Mobile Game", dll) — solid blue */ .sg-section-pill, [data-theme="dark"] .sg-section-pill, html[data-theme="dark"] .sg-section-pill, html:not([data-theme="light"]) .sg-section-pill { background: #1a86ff !important; background-image: none !important; color: #ffffff !important; border: 1px solid #1a86ff !important; box-shadow: 0 8px 18px -10px rgba(26, 134, 255,.55) !important; } .sg-section-pill i, [data-theme="dark"] .sg-section-pill i, html[data-theme="dark"] .sg-section-pill i, html:not([data-theme="light"]) .sg-section-pill i { color: #ffffff !important; } html[data-theme="light"] .sg-section-pill { background: #1a86ff !important; color: #ffffff !important; border-color: #1a86ff !important; } html[data-theme="light"] .sg-section-pill i { color: #ffffff !important; } html:not([data-theme="light"]) .sg-product-card, html:not([data-theme="light"]) .sg-section-card, html:not([data-theme="light"]) .sg-cat-card, html:not([data-theme="light"]) .sg-benefit-card, html:not([data-theme="light"]) .tg-card, html:not([data-theme="light"]) .tg-product-card { box-shadow: 0 8px 24px -16px rgba(26, 134, 255,.5) !important; } /* ════════ INFO BOX — pure black bg, no gradient ════════ */ .tg-info-box, [data-theme="dark"] .tg-info-box, html[data-theme="dark"] .tg-info-box, html:not([data-theme="light"]) .tg-info-box { background: #000000 !important; background-image: none !important; background-color: #000000 !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; color: rgba(255,255,255,.82) !important; } html[data-theme="light"] .tg-info-box { background: #ffffff !important; background-image: none !important; border: 1px solid #cfdcff !important; color: #000000 !important; } .tg-info-box h3, .tg-info-box h4 { color: #ffffff !important; } html[data-theme="light"] .tg-info-box h3, html[data-theme="light"] .tg-info-box h4 { color: #000000 !important; } /* Tip box & pay card juga hitam */ .tg-tip, .tg-summary, .tg-pay-card, html:not([data-theme="light"]) .tg-tip, html:not([data-theme="light"]) .tg-summary, html:not([data-theme="light"]) .tg-pay-card { background: #000000 !important; background-image: none !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html[data-theme="light"] .tg-tip, html[data-theme="light"] .tg-summary, html[data-theme="light"] .tg-pay-card { background: #ffffff !important; border: 1px solid #cfdcff !important; } /* ════════ STEP CIRCLE — blue & white only ════════ */ .tg-step, .sg-card-title .tg-step, [data-theme="dark"] .tg-step, html[data-theme="dark"] .tg-step, html:not([data-theme="light"]) .tg-step { background: #1a86ff !important; background-image: none !important; color: #ffffff !important; box-shadow: 0 8px 18px -8px rgba(26, 134, 255,.45) !important; border: none !important; } html[data-theme="light"] .tg-step, html[data-theme="light"] .sg-card-title .tg-step { background: #1a86ff !important; background-image: none !important; color: #ffffff !important; } /* ════════ INPUT/TEXTAREA — black background (dark theme) ════════ */ html:not([data-theme="light"]) .tg-input, html:not([data-theme="light"]) .input, html:not([data-theme="light"]) .od-track-input, html:not([data-theme="light"]) input[type="text"]:not(.sg-hero-search input):not(.sg-hero-search-standalone input):not(.sg-nav-search-input), html:not([data-theme="light"]) input[type="search"]:not(.sg-hero-search input):not(.sg-hero-search-standalone input):not(.sg-nav-search-input), html:not([data-theme="light"]) input[type="tel"], html:not([data-theme="light"]) input[type="email"], html:not([data-theme="light"]) input[type="number"], html:not([data-theme="light"]) input[type="password"], html:not([data-theme="light"]) textarea, html:not([data-theme="light"]) select { background: #000000 !important; background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: none !important; color-scheme: dark !important; } html:not([data-theme="light"]) .tg-input::placeholder, html:not([data-theme="light"]) input::placeholder, html:not([data-theme="light"]) textarea::placeholder { color: rgba(255,255,255,.55) !important; opacity: 1; } html:not([data-theme="light"]) .tg-input:focus, html:not([data-theme="light"]) input:focus:not(.sg-hero-search input):not(.sg-hero-search-standalone input):not(.sg-nav-search-input), html:not([data-theme="light"]) textarea:focus, html:not([data-theme="light"]) select:focus { background: #000000 !important; background-color: #000000 !important; border-color: rgba(26, 134, 255,.55) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(26, 134, 255,.20) !important; color: #ffffff !important; } /* Autofill jangan biru bawaan browser */ html:not([data-theme="light"]) input:-webkit-autofill, html:not([data-theme="light"]) input:-webkit-autofill:hover, html:not([data-theme="light"]) input:-webkit-autofill:focus, html:not([data-theme="light"]) textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #000000 inset !important; -webkit-text-fill-color: #ffffff !important; caret-color: #ffffff !important; } /* ════════════════════════════════════════════════════════════ PREMIUM FLOATING PRODUCT CARD Floating look dengan layered subtle blue shadow, border tipis, gradient bg, top highlight, hover lift. ════════════════════════════════════════════════════════════ */ .sg-product-card { padding: 0 !important; border-radius: 18px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; gap: 0 !important; height: 100% !important; min-height: 100% !important; text-decoration: none !important; position: relative; isolation: isolate; transition: transform .28s cubic-bezier(.22,.8,.22,1), box-shadow .28s ease, border-color .22s ease !important; } /* DARK — floating card, medium blue glow shadow */ html:not([data-theme="light"]) .sg-product-card { background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 38%), linear-gradient(180deg, rgba(11,18,34,.92) 0%, rgba(7,12,24,.96) 100%) !important; background-color: rgba(11,18,34,.92) !important; border: 1px solid rgba(26, 134, 255,.22) !important; box-shadow: 0 14px 32px -14px rgba(26, 134, 255,.40), 0 6px 16px -8px rgba(26, 134, 255,.25), 0 2px 8px -2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06) !important; } /* LIGHT — floating card, cool soft blue shadow */ html[data-theme="light"] .sg-product-card { background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important; background-color: #ffffff !important; border: 1px solid rgba(26, 134, 255,.14) !important; box-shadow: 0 12px 28px -16px rgba(26, 134, 255,.30), 0 4px 10px -4px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,1) !important; } /* Top highlight strip (cahaya halus) */ .sg-product-card::before { content: "" !important; position: absolute !important; top: 0; left: 0; right: 0; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent) !important; z-index: 2 !important; pointer-events: none !important; } html[data-theme="light"] .sg-product-card::before { background: linear-gradient(90deg, transparent, rgba(26, 134, 255,.20), transparent) !important; } /* Image container — slightly lighter bg, padding, rounded inner */ .sg-product-card .sg-product-thumb { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; aspect-ratio: 1 / 1 !important; padding: 12px !important; overflow: hidden !important; border-radius: 0 !important; flex-shrink: 0 !important; } html:not([data-theme="light"]) .sg-product-card .sg-product-thumb { background: radial-gradient(120% 80% at 50% 0%, rgba(26, 134, 255,.12), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important; } html[data-theme="light"] .sg-product-card .sg-product-thumb { background: radial-gradient(120% 80% at 50% 0%, rgba(26, 134, 255,.08), transparent 70%), linear-gradient(180deg, #ffffff, #eef4ff) !important; } .sg-product-card .sg-product-thumb img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center !important; border-radius: 14px !important; background: transparent !important; box-shadow: none !important; display: block !important; transition: transform .35s cubic-bezier(.22,.8,.22,1) !important; } .sg-product-card:hover .sg-product-thumb img { transform: scale(1.04) !important; } .sg-product-card .sg-product-thumb .tg-market-icon { width: 70% !important; height: 70% !important; border-radius: 14px !important; background: linear-gradient(135deg, #0f6ee6, #1a86ff) !important; color: #ffffff !important; font-size: 1.8rem !important; } /* Body — consistent padding, equal-height layout */ .sg-product-card .sg-product-body { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 14px !important; flex: 1 !important; min-width: 0 !important; width: 100% !important; justify-content: flex-start !important; } /* Hover: lift + scale halus + glow biru sedikit kuat */ .sg-product-card:hover { transform: translateY(-4px) scale(1.015) !important; } html:not([data-theme="light"]) .sg-product-card:hover { border-color: rgba(26, 134, 255,.50) !important; box-shadow: 0 22px 44px -14px rgba(26, 134, 255,.55), 0 10px 22px -8px rgba(26, 134, 255,.35), 0 4px 12px -4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10) !important; } html[data-theme="light"] .sg-product-card:hover { border-color: rgba(26, 134, 255,.40) !important; box-shadow: 0 20px 38px -14px rgba(26, 134, 255,.42), 0 8px 16px -6px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,1) !important; } .sg-product-card:active { transform: translateY(-1px) scale(1.005) !important; transition-duration: .12s !important; } @media (max-width: 600px) { .sg-product-card .sg-product-body { padding: 12px !important; gap: 5px !important; } .sg-product-card .sg-product-thumb { padding: 10px !important; } .sg-product-card .sg-product-thumb img { border-radius: 12px !important; } .sg-product-card { border-radius: 16px !important; } .sg-product-card:hover { transform: translateY(-2px) scale(1.01) !important; } } @media (prefers-reduced-motion: reduce) { .sg-product-card, .sg-product-card .sg-product-thumb img { transition: none !important; transform: none !important; } .sg-product-card:hover { transform: none !important; } } /* Light theme — teks biru accent → hitam (kecuali latar biru) */ html[data-theme="light"] .tg-nav .brand i, html[data-theme="light"] .sg-product-cat, html[data-theme="light"] .sg-product-meta strong, html[data-theme="light"] .sg-recent-list .tg-rx-price, html[data-theme="light"] .sg-promo-pill, html[data-theme="light"] .sg-promo-tile, html[data-theme="light"] .sg-promo-tile i, html[data-theme="light"] .sg-cat-card.sel .g-name, html[data-theme="light"] .tg-game-card.sel .g-name, html[data-theme="light"] .tg-item .i-price, html[data-theme="light"] .tg-item.sel .i-name, html[data-theme="light"] .tg-item.sel .i-price, html[data-theme="light"] .sg-tab:not(.is-active) i, html[data-theme="light"] .sg-tab:not(.is-active) em, html[data-theme="light"] .sg-hero-search-standalone > i, html[data-theme="light"] .tg-page-info, html[data-theme="light"] .tg-title-kicker, html[data-theme="light"] .tg-list-info, html[data-theme="light"] .form-text, html[data-theme="light"] .tg-card-title small, html[data-theme="light"] .tg-rx-badge.processing, html[data-theme="light"] .tg-save-id input:checked ~ .tg-save-text, html[data-theme="light"] a:not(.sg-btn-ghost):not(.sg-nav-cta-btn):not(.sg-section-pill):not(.sg-tabs-wrap .sg-tab.is-active):not(.sg-carousel-arrow) { color: #000000 !important; } html[data-theme="light"] .sg-hero, html[data-theme="light"] .sg-hero *, html[data-theme="light"] .tg-hero, html[data-theme="light"] .tg-hero *, html[data-theme="light"] .sg-tabs-wrap .sg-tab.is-active, html[data-theme="light"] .sg-tabs-wrap .sg-tab.is-active *, html[data-theme="light"] .sg-section-pill, html[data-theme="light"] .sg-section-pill *, html[data-theme="light"] .tg-step, html[data-theme="light"] .sg-card-title .tg-step, html[data-theme="light"] .sg-promo-tile-accent, html[data-theme="light"] .sg-promo-tile-accent *, html[data-theme="light"] .sg-nav-cta-btn, html[data-theme="light"] .sg-nav-cta-btn *, html[data-theme="light"] .sg-btn-ghost, html[data-theme="light"] .sg-btn-ghost * { color: #ffffff !important; } /* Footer — light theme */ html[data-theme="light"] .tg-footer, html[data-theme="light"] .sg-footer { background: #ffffff !important; border-top: 1px solid #e8ecef !important; color: #64748b !important; } html[data-theme="light"] .sg-footer h5, html[data-theme="light"] .tg-footer h5 { color: #000000 !important; } html[data-theme="light"] .sg-footer-brand .sg-brand-text strong, html[data-theme="light"] .sg-footer-brand .sg-brand-text > span { color: #000000 !important; } html[data-theme="light"] .sg-footer-brand p, html[data-theme="light"] .tg-footer p { color: #64748b !important; } html[data-theme="light"] .sg-footer-list a, html[data-theme="light"] .tg-footer a { color: #475569 !important; } html[data-theme="light"] .sg-footer-list a i { color: #000000 !important; } html[data-theme="light"] .sg-footer-list a:hover, html[data-theme="light"] .tg-footer a:hover { color: #000000 !important; } html[data-theme="light"] .sg-footer hr, html[data-theme="light"] .tg-footer hr { border-top-color: #e8ecef !important; } html[data-theme="light"] .sg-footer-bottom p, html[data-theme="light"] .sg-footer-disclaimer, html[data-theme="light"] .tg-footer-bottom p { color: #64748b !important; } html[data-theme="light"] .tg-footer-bottom a, html[data-theme="light"] .sg-footer-bottom a { color: #000000 !important; } html[data-theme="light"] .sg-footer-badges span { background: rgba(0, 0, 0, .06) !important; color: #000000 !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .sg-footer-badges span i { color: #000000 !important; } /* ════════════════════════════════════════════════════════════ FINAL MOBILE APP POLISH — native-like SHOP view ════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { html, body { overflow-x: hidden !important; } .tg-app { min-height: 100svh !important; } .tg-main { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 10px 14px calc(12px + var(--sg-bottom-nav-clearance, 64px)) !important; } .sg-home-hero, .sg-home-content { width: 100% !important; max-width: 100% !important; margin-inline: auto !important; } .sg-home-hero { padding: 6px 0 4px !important; gap: 12px !important; } .sg-home-hero .sg-hero-carousel { border-radius: 22px !important; box-shadow: 0 18px 44px -26px rgba(26, 134, 255, .55) !important; } .sg-home-hero .sg-promo-banner { padding: 4px 4px 2px !important; margin: 0 !important; text-align: left !important; } .sg-home-hero .sg-promo-banner-title { font-size: 1.34rem !important; line-height: 1.18 !important; letter-spacing: -.35px !important; margin-bottom: 8px !important; } .sg-home-hero .sg-promo-banner-desc { font-size: .86rem !important; line-height: 1.58 !important; max-width: none !important; } .sg-home-content { gap: 16px !important; padding-top: 8px !important; } .sg-tabs-wrap { margin: 0 !important; padding: 14px 14px 10px !important; border: 1px solid rgba(148, 197, 255, .18) !important; border-radius: 24px !important; background: rgba(13, 24, 40, .78) !important; box-shadow: 0 16px 40px -30px rgba(26, 134, 255, .58) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } html[data-theme="light"] .sg-tabs-wrap { background: rgba(255, 255, 255, .86) !important; border-color: #dbeafe !important; box-shadow: 0 16px 40px -30px rgba(15, 23, 42, .35) !important; } .sg-section-head { margin-bottom: 12px !important; } .sg-section-title { font-size: 1.12rem !important; line-height: 1.2 !important; letter-spacing: -.02em !important; } .sg-section-desc { font-size: .78rem !important; line-height: 1.5 !important; max-width: none !important; } .sg-tabs { margin-inline: -4px !important; padding: 2px 4px 4px !important; gap: 8px !important; scrollbar-width: none !important; } .sg-tabs::-webkit-scrollbar { display: none !important; } .sg-tab { min-height: 42px !important; padding: 10px 12px !important; border-radius: 15px !important; box-shadow: none !important; } .sg-tab em { display: none !important; } .sg-search-section { position: sticky !important; top: calc(58px + env(safe-area-inset-top, 0px)) !important; z-index: 30 !important; margin: 0 -2px !important; padding: 8px 0 !important; } .sg-hero-search-standalone { min-height: 52px !important; border-radius: 18px !important; padding: 6px 12px !important; box-shadow: 0 16px 34px -26px rgba(26, 134, 255, .65) !important; } .sg-hero-search-standalone input { font-size: .88rem !important; padding: 11px 2px !important; } .sg-catalog-sections { gap: 24px !important; margin-bottom: 34px !important; } .sg-product-grid, .sg-market-quick .tg-market-subgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } .sg-product-card, .sg-market-quick .sg-product-card { border-radius: 22px !important; min-height: 0 !important; box-shadow: 0 16px 34px -28px rgba(26, 134, 255, .65) !important; transform: none !important; } .sg-product-card:hover, .sg-market-quick .sg-product-card:hover { transform: none !important; } .sg-product-thumb, .sg-market-quick .sg-product-card .sg-product-thumb { aspect-ratio: 1 / .92 !important; border-radius: 18px 18px 0 0 !important; padding: 9px !important; } .sg-product-card .sg-product-thumb img, .sg-market-quick .sg-product-card .sg-product-thumb img { border-radius: 14px !important; object-fit: cover !important; transform: none !important; } .sg-product-body { padding: 10px 10px 12px !important; gap: 4px !important; } .sg-product-cat { font-size: .56rem !important; letter-spacing: .05em !important; } .sg-product-name { font-size: .78rem !important; line-height: 1.26 !important; min-height: 2.1em !important; } .sg-product-meta { margin-top: 4px !important; font-size: .64rem !important; line-height: 1.15 !important; } } @media (max-width: 380px) { .tg-main { padding-inline: 10px !important; } .sg-product-grid, .sg-market-quick .tg-market-subgrid { gap: 10px !important; } .sg-product-body { padding: 10px 10px 12px !important; } } /* ════════════════════════════════════════════════════════════ FINAL FIX — Input text visibility in LIGHT theme Ensures typed text is always visible regardless of cascade ════════════════════════════════════════════════════════════ */ html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select, html[data-theme="light"] .tg-input, html[data-theme="light"] .sg-hero-search input, html[data-theme="light"] .sg-hero-search-standalone input, html[data-theme="light"] .tg-hero-search input, html[data-theme="light"] .od-track-input, html[data-theme="light"] .od-empty-form input, html[data-theme="light"] .form-control, html[data-theme="light"] .form-select { color: #0a0b0d !important; -webkit-text-fill-color: #0a0b0d !important; caret-color: #1a86ff !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder, html[data-theme="light"] .tg-input::placeholder, html[data-theme="light"] .sg-hero-search input::placeholder, html[data-theme="light"] .sg-hero-search-standalone input::placeholder, html[data-theme="light"] .form-control::placeholder { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; opacity: 1 !important; } html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] select:focus, html[data-theme="light"] .tg-input:focus, html[data-theme="light"] .form-control:focus { color: #0a0b0d !important; -webkit-text-fill-color: #0a0b0d !important; } html[data-theme="light"] input:-webkit-autofill, html[data-theme="light"] input:-webkit-autofill:hover, html[data-theme="light"] input:-webkit-autofill:focus, html[data-theme="light"] textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; -webkit-text-fill-color: #0a0b0d !important; caret-color: #1a86ff !important; } /* Make sure no parent's "color: white !important" leak into inputs */ html[data-theme="light"] .tg-hero input, html[data-theme="light"] .sg-hero input, html[data-theme="light"] .sg-hero-carousel input { color: #0a0b0d !important; -webkit-text-fill-color: #0a0b0d !important; } /* Native mobile storefront tuning - appended last to keep the cascade local */ @media (max-width: 760px) { html, body { width: 100%; min-width: 0; } .tg-nav.sg-nav, .tg-nav { padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 8px !important; } .sg-nav-container { padding-left: max(12px, env(safe-area-inset-left, 0px)) !important; padding-right: max(12px, env(safe-area-inset-right, 0px)) !important; } .tg-main { padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(12px + var(--sg-bottom-nav-clearance, 64px)) max(12px, env(safe-area-inset-left, 0px)) !important; } html[data-theme="light"] .tg-main { background: linear-gradient(180deg, rgba(26, 134, 255,.08), rgba(26, 134, 255,0) 190px), #f5f8ff !important; } html:not([data-theme="light"]) .tg-main { background: linear-gradient(180deg, rgba(26, 134, 255,.46) 0, rgba(26, 134, 255,.20) 72px, rgba(0,0,0,0) 190px), #000000 !important; } .sg-home-hero { padding: 4px 0 2px !important; gap: 10px !important; } .sg-home-hero .sg-hero-carousel { border-radius: 24px !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 18px 42px -30px rgba(26, 134, 255,.72) !important; } html[data-theme="light"] .sg-home-hero .sg-hero-carousel { border-color: #dbeafe !important; box-shadow: 0 18px 42px -30px rgba(15,23,42,.36) !important; } .sg-home-hero .sg-promo-banner { padding: 8px 2px 4px !important; } .sg-home-hero .sg-promo-banner-title { font-size: 1.26rem !important; line-height: 1.15 !important; margin-bottom: 6px !important; } .sg-home-hero .sg-promo-banner-desc { font-size: .82rem !important; line-height: 1.5 !important; } .sg-home-content { gap: 14px !important; padding-top: 6px !important; } .sg-home-content .sg-section-desc { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .sg-tabs-wrap, .sg-home-content .sg-market-quick .sg-section, .sg-section-card { border-radius: 24px !important; border: 1px solid rgba(255,255,255,.10) !important; background: #050505 !important; box-shadow: 0 14px 34px -30px rgba(26, 134, 255,.75) !important; } html[data-theme="light"] .sg-tabs-wrap, html[data-theme="light"] .sg-home-content .sg-market-quick .sg-section, html[data-theme="light"] .sg-section-card { background: #ffffff !important; border-color: #dbeafe !important; box-shadow: 0 14px 34px -30px rgba(15,23,42,.32) !important; } .sg-tabs-wrap { padding: 13px 12px 10px !important; } .sg-tabs { gap: 7px !important; margin-inline: -2px !important; padding: 1px 2px 2px !important; scroll-padding-inline: 12px !important; } .sg-tab { min-height: 38px !important; padding: 8px 11px !important; border-radius: 999px !important; font-size: .76rem !important; } .sg-tab i { font-size: .9rem !important; } .sg-section-head { gap: 8px !important; margin-bottom: 11px !important; } .sg-section-title { font-size: 1.05rem !important; line-height: 1.16 !important; letter-spacing: -.03em !important; } .sg-section-pill { margin-bottom: 7px !important; padding: 5px 9px !important; border-radius: 999px !important; font-size: .62rem !important; letter-spacing: .04em !important; } .sg-search-section { top: calc(54px + env(safe-area-inset-top, 0px)) !important; margin: -2px -2px 0 !important; padding: 7px 0 !important; } .sg-search-section::before { content: ''; position: absolute; inset: 0 -14px; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.74) 70%, rgba(0,0,0,0)); pointer-events: none; } html[data-theme="light"] .sg-search-section::before { background: linear-gradient(180deg, rgba(245,248,255,.96), rgba(245,248,255,.78) 70%, rgba(245,248,255,0)); } .sg-hero-search-standalone { min-height: 48px !important; border-radius: 999px !important; padding: 6px 14px !important; box-shadow: 0 12px 28px -24px rgba(26, 134, 255,.85) !important; } .sg-hero-search-standalone input { font-size: .86rem !important; padding: 9px 2px !important; } .sg-catalog-sections { gap: 14px !important; margin-bottom: 28px !important; } .sg-home-content .sg-market-quick .sg-section { padding: 14px !important; } .sg-market-quick .sg-section .sg-section-head { margin-bottom: 12px !important; } .sg-product-grid, .sg-market-quick .tg-market-subgrid.sg-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } .sg-product-card, .sg-market-quick .sg-product-card { border-radius: 20px !important; border-color: rgba(255,255,255,.10) !important; background: #0b0b0b !important; box-shadow: none !important; overflow: hidden !important; } html[data-theme="light"] .sg-product-card, html[data-theme="light"] .sg-market-quick .sg-product-card { background: #ffffff !important; border-color: #e2e8f0 !important; } .sg-product-thumb, .sg-market-quick .sg-product-card .sg-product-thumb { aspect-ratio: 1 / .86 !important; padding: 10px !important; border-radius: 18px 18px 0 0 !important; background: linear-gradient(180deg, rgba(26, 134, 255,.18), rgba(255,255,255,.04)) !important; } html[data-theme="light"] .sg-product-thumb, html[data-theme="light"] .sg-market-quick .sg-product-card .sg-product-thumb { background: linear-gradient(180deg, #f8fbff, #eef4ff) !important; } .sg-product-card .sg-product-thumb img, .sg-market-quick .sg-product-card .sg-product-thumb img { object-fit: contain !important; border-radius: 14px !important; } .sg-product-body { padding: 10px 10px 12px !important; gap: 4px !important; } .sg-product-cat { font-size: .54rem !important; letter-spacing: .06em !important; line-height: 1.05 !important; } .sg-product-name { font-size: .8rem !important; line-height: 1.24 !important; min-height: 2.48em !important; } .sg-product-meta { align-self: flex-start; margin-top: 4px !important; padding: 4px 7px !important; border-radius: 999px !important; background: rgba(26, 134, 255,.12) !important; font-size: .62rem !important; line-height: 1 !important; } html:not([data-theme="light"]) .sg-product-meta { background: rgba(255,255,255,.08) !important; } .sg-product-meta::before { width: 5px !important; height: 5px !important; box-shadow: none !important; } .sg-benefits-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .sg-benefit-card { border-radius: 20px !important; padding: 14px !important; } } @media (max-width: 380px) { .tg-main { padding-left: max(10px, env(safe-area-inset-left, 0px)) !important; padding-right: max(10px, env(safe-area-inset-right, 0px)) !important; } .sg-home-content .sg-market-quick .sg-section { padding: 12px !important; } .sg-product-grid, .sg-market-quick .tg-market-subgrid.sg-product-grid { gap: 8px !important; } .sg-product-name { font-size: .77rem !important; } .sg-product-meta { font-size: .58rem !important; padding-inline: 6px !important; } }