/* Samtigis Global Theme Customizer - Auto-generated */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700;800&display=swap');

:root,
html:root,
body {
    --primary: #7c4dff;
    --primary-glow: rgba(124, 77, 255, 0.4);
    --secondary: #448aff;
    --bg-dark: #0a0b1e;
    --surface: rgba(255, 255, 255, 0.05);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.1);
    --text-white: #ffffff;
    --text-main: #e0e0e0;
    --text-muted: #9e9e9e;
    --text-gray: #94a3b8;
    --card-bg: rgba(30, 41, 59, 0.7);
    --accent: #ffca28;
    --success: #10b981;
    --error: #ef4444;
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    --bg-image: radial-gradient(circle at 10% 20%, rgba(124, 77, 255, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(68, 138, 255, 0.1) 0%, transparent 40%),
        radial-gradient(circle at top left, #1e1b4b, #0f172a);
}

[data-theme="light"],
body.light-mode {
    --primary: #6200ea;
    --primary-glow: rgba(98, 0, 234, 0.25);
    --secondary: #2962ff;
    --bg-dark: #f1f5f9;
    --surface: #ffffff;
    --border: #cbd5e1;
    --text-white: #1e293b;
    --text-main: #334155;
    --card-bg: rgba(255, 255, 255, 0.85);
}

* {
    font-family: var(--font-body, 'Inter', sans-serif);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
    font-family: var(--font-heading, 'Outfit', sans-serif);
}

/* Component Theme Locks - Menjamin seluruh elemen tombol & badge mengikuti tema */
.btn-buy,
.btn-primary,
.btn-submit-premium {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    box-shadow: 0 4px 15px var(--primary-glow) !important;
}

.btn-buy:hover,
.btn-primary:hover,
.btn-submit-premium:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px var(--primary-glow) !important;
}

.category-badge,
.version-badge,
.article-badge {
    background: var(--surface) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border) !important;
}

.product-price,
.price-tag {
    color: var(--success, #10b981) !important;
}