/* ==========================================================================
   SEBRAND SYSTEM - CUSTOM MODERN STYLESHEET
   Supports: Bootstrap 5.3 Dark/Light CSS Variables & Responsive Layout
   ========================================================================== */

:root {
    --sb-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --sb-card-radius: 12px;
    --sb-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    
    --sb-glass-bg: rgba(255, 255, 255, 0.85);
    --sb-glass-border: rgba(0, 0, 0, 0.08);
    --sb-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] {
    --sb-glass-bg: rgba(33, 37, 41, 0.85);
    --sb-glass-border: rgba(255, 255, 255, 0.1);
    --sb-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body {
    font-family: var(--sb-font-family);
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
}

/* Memastikan Row Flexbox Tidak Wrap Secara Tidak Sengaja pada Layout Utama */
.row {
    --bs-gutter-x: 1.5rem;
}

.card {
    border-radius: var(--sb-card-radius);
    box-shadow: var(--sb-card-shadow);
    transition: var(--sb-transition);
}

.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Glassmorphism Effect */
.glass-card {
    background: var(--sb-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--sb-glass-border);
}

/* Custom Badges & E-CRM Tiers */
.badge-tier {
    padding: 0.4em 0.8em;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 6px;
    text-transform: uppercase;
}

.badge-tier-vip { background: linear-gradient(135deg, #7928CA, #FF0080); color: #fff; }
.badge-tier-gold { background: linear-gradient(135deg, #FFB703, #FB8500); color: #000; }
.badge-tier-silver { background: linear-gradient(135deg, #8E9EAB, #EEF2F3); color: #222; }
.badge-tier-bronze { background: linear-gradient(135deg, #3A3D40, #181719); color: #fff; }

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 0.5);
}