/* ============================================================ FAZA SMM PANEL - TEMPLATE THEMES (FITUR 2026-08-05) 3 template tampilan, dipilih di Admin -> Tampilan: [1] Indigo Modern (default, gaya bawaan panel) [2] Emerald Fresh (hijau emerald, kartu membulat) [3] Sunset Bold (oranye/merah, sudut tegas) Diterapkan via atribut data-template pada . Warna custom (tombol & teks) dari Admin -> Tampilan menimpa variabel --primary / --text-primary. ============================================================ */ /* ---------- TEMPLATE 1: Indigo Modern (default) ---------- */ /* Tidak perlu override - ini gaya bawaan style.css */ /* ---------- TEMPLATE 2: Emerald Fresh ---------- */ html[data-template="2"] { --primary: #10b981; --primary-dark: #059669; --primary-light: #34d399; --primary-glow: rgba(16, 185, 129, 0.25); --primary-glow-strong: rgba(16, 185, 129, 0.4); --secondary: #0ea5e9; --accent: #2dd4bf; --bg-dark: #071410; --bg-card: #0d1f17; --bg-card-hover: #12291e; --bg-surface: #16301f; --bg-input: #0f241a; --border: #14532d; --border-light: #1c6b3b; --text-accent: #6ee7b7; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --shadow-glow: 0 0 30px var(--primary-glow); } html[data-template="2"].light { --bg-dark: #ecfdf5; --bg-card: #ffffff; --bg-card-hover: #f0fdf4; --bg-surface: #d1fae5; --bg-input: #ffffff; --border: #a7f3d0; --border-light: #6ee7b7; --text-primary: #052e16; --text-secondary: #14532d; --text-muted: #047857; --text-accent: #059669; --shadow-sm: 0 1px 3px rgba(6, 78, 59, .08); --shadow-md: 0 4px 20px rgba(6, 78, 59, .12); --shadow-lg: 0 8px 40px rgba(6, 78, 59, .15); --shadow-glow: 0 0 30px rgba(16, 185, 129, .18); } /* tabel */ html[data-template="2"] .table th { background: rgba(16, 185, 129, .10); color: var(--primary-light); border-bottom: 2px solid rgba(16, 185, 129, .35); } html[data-template="2"].light .table th { background: rgba(16, 185, 129, .08); color: var(--primary-dark); } html[data-template="2"] .table tr:hover td { background: rgba(16, 185, 129, .04); } /* tombol */ html[data-template="2"] .btn-primary, html[data-template="2"] .btn-success { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 4px 18px var(--primary-glow); } /* kartu & navbar */ html[data-template="2"] .balance-card { background: linear-gradient(135deg, var(--bg-card), var(--bg-surface)); border: 1px solid var(--border); } html[data-template="2"] .glass-card { background: rgba(13, 31, 23, .55); backdrop-filter: blur(8px); } html[data-template="2"].light .glass-card { background: rgba(255, 255, 255, .75); } html[data-template="2"] .navbar { background: rgba(7, 20, 16, .85); } html[data-template="2"].light .navbar { background: rgba(236, 253, 245, .85); } html[data-template="2"] .service-img { background: linear-gradient(135deg, #14532d, #065f46) !important; } html[data-template="2"].light .service-img { background: linear-gradient(135deg, #a7f3d0, #6ee7b7) !important; } /* ---------- TEMPLATE 3: Sunset Bold ---------- */ html[data-template="3"] { --primary: #f97316; --primary-dark: #ea580c; --primary-light: #fb923c; --primary-glow: rgba(249, 115, 22, 0.25); --primary-glow-strong: rgba(249, 115, 22, 0.4); --secondary: #e11d48; --accent: #fbbf24; --bg-dark: #170f0b; --bg-card: #211410; --bg-card-hover: #2b1a13; --bg-surface: #33200f; --bg-input: #241610; --border: #7c2d12; --border-light: #9a3412; --text-accent: #fdba74; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-glow: 0 0 30px var(--primary-glow); } html[data-template="3"].light { --bg-dark: #fff7ed; --bg-card: #ffffff; --bg-card-hover: #ffedd5; --bg-surface: #fed7aa; --bg-input: #ffffff; --border: #fed7aa; --border-light: #fdba74; --text-primary: #431407; --text-secondary: #7c2d12; --text-muted: #9a3412; --text-accent: #ea580c; --shadow-sm: 0 1px 3px rgba(124, 45, 18, .08); --shadow-md: 0 4px 20px rgba(124, 45, 18, .12); --shadow-lg: 0 8px 40px rgba(124, 45, 18, .15); --shadow-glow: 0 0 30px rgba(249, 115, 22, .18); } /* tabel */ html[data-template="3"] .table th { background: #33200f; color: #fdba74; text-transform: uppercase; letter-spacing: .8px; border-bottom: 2px solid #9a3412; } html[data-template="3"].light .table th { background: #ffedd5; color: #c2410c; } html[data-template="3"] .table tr:hover td { background: rgba(249, 115, 22, .05); } /* tombol */ html[data-template="3"] .btn-primary, html[data-template="3"] .btn-success { background: linear-gradient(135deg, #f97316, #e11d48); box-shadow: 0 4px 18px var(--primary-glow); font-weight: 600; } /* kartu & navbar */ html[data-template="3"] .balance-card { border: 1px solid var(--border); border-left: 4px solid var(--primary); } html[data-template="3"] .glass-card { border: 1px solid var(--border); } html[data-template="3"] .navbar { background: rgba(23, 15, 11, .9); } html[data-template="3"].light .navbar { background: rgba(255, 247, 237, .9); } html[data-template="3"] .service-img { background: linear-gradient(135deg, #7c2d12, #c2410c) !important; } html[data-template="3"].light .service-img { background: linear-gradient(135deg, #fed7aa, #fdba74) !important; }