/* 🎨 DESIGN SYSTEM PASARCIREBON — MEGA MENDUNG EDITION */

:root {
    /* ═══ 7 GRADASI BIRU MEGA MENDUNG ═══ */
    --mm-1: #1a1a4e;          /* Deep Indigo — untuk header, footer */
    --mm-1-rgb: 26, 26, 78;
    
    --mm-2: #1e3a5f;          /* Navy — untuk heading, CTA utama */
    --mm-2-rgb: 30, 58, 95;
    
    --mm-3: #2563eb;          /* Medium Blue — primary action */
    --mm-3-rgb: 37, 99, 235;
    
    --mm-4: #3b82f6;          /* Sky Blue — link, hover */
    --mm-4-rgb: 59, 130, 246;
    
    --mm-5: #60a5fa;          /* Light Blue — badge, icon */
    --mm-5-rgb: 96, 165, 250;
    
    --mm-6: #93c5fd;          /* Very Light — border, accent */
    --mm-6-rgb: 147, 197, 253;
    
    --mm-7: #dbeafe;          /* Pale Blue — background section */
    --mm-7-rgb: 219, 234, 254;
    
    /* ═══ ACCENT: MERAH MARUN ═══ */
    --mm-red: #8b1a1a;        /* Deep Maroon — accent kuat */
    --mm-red-rgb: 139, 26, 26;
    
    --mm-red-light: #dc2626;  /* Red — CTA secondary, sale badge */
    --mm-red-light-rgb: 220, 38, 38;
    
    --mm-gold: #d4a574;       /* Gold — premium, highlight */
    --mm-gold-rgb: 212, 165, 116;

    /* ═══ NEUTRAL ═══ */
    --bg-white: #ffffff;
    --bg-cream: #faf8f5;       /* Warm cream — seperti kain batik */
    --bg-light: #f1efe9;       /* Light warm — section alternate */
    --bg-gray: #f8fafc;        /* Cool gray — card background */
    
    --text-dark: #1a1a2e;      /* Hampir hitam — text utama */
    --text-body: #374151;      /* Dark gray — text body */
    --text-muted: #6b7280;     /* Medium gray — text secondary */
    --text-light: #9ca3af;     /* Light gray — text placeholder */
    
    --border-light: #e5e7eb;   /* Border ringan */
    --border-medium: #d1d5db;  /* Border sedang */
    
    /* ═══ SEMANTIC ═══ */
    --success: #059669;        /* Hijau — sukses, harga */
    --warning: #d97706;        /* Kuning — peringatan */
    --error: #dc2626;          /* Merah — error */
    --info: var(--mm-3);       /* Biru — info */
}

/* TYPOGRAPHY & BASE */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, sans-serif; font-weight: 400; line-height: 1.7; }
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif; }
h1 { font-weight: 800; letter-spacing: -0.02em; }
h2 { font-weight: 700; letter-spacing: -0.01em; }
h3 { font-weight: 700; }

@keyframes pulse-green {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes shine {
    100% { transform: translateX(100%); }
}

/* Background pattern mega mendung yang sangat subtle */
.bg-mega-mendung {
    background-color: var(--bg-cream);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMTAwJyB2aWV3Qm94PScwIDAgMjAwIDEwMCc+CjxwYXRoIGQ9J00wIDgwIEMyMCA2MCA0MCA0MCA2MCA1MCBDODAgNjAgMTAwIDgwIDEyMCA3MCBDMTQwIDYwIDE2MCA0MCAxODAgNTAgQzIwMCA2MCAyMDAgODAgMjAwIDgwJyBmaWxsPSdub25lJyBzdHJva2U9JyMyNTYzZWInIHN0cm9rZS13aWR0aD0nMC41JyBvcGFjaXR5PScwLjA2Jy8+CjxwYXRoIGQ9J00wIDg1IEMyNSA2NSA0NSA0NSA2NSA1NSBDODUgNjUgMTA1IDg1IDEyNSA3NSBDMTQ1IDY1IDE2NSA0NSAxODUgNTUgQzIwNSA2NSAyMDUgODUgMjA1IDg1JyBmaWxsPSdub25lJyBzdHJva2U9JyMxZTNhNWYnIHN0cm9rZS13aWR0aD0nMC41JyBvcGFjaXR5PScwLjA0Jy8+Cjwvc3ZnPg==");
    background-repeat: repeat;
}

/* Pola SVG Transparan (Putih) untuk Hero & Footer */
.bg-pattern-white {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMDAnIGhlaWdodD0nMTUwJyB2aWV3Qm94PScwIDAgMzAwIDE1MCc+CjxwYXRoIGQ9J00wIDEyMCBDMzAgOTAgNjAgNjAgOTAgNzUgQzEyMCA5MCAxNTAgMTIwIDE4MCAxMDUgQzIxMCA5MCAyNDAgNjAgMjcwIDc1IEMzMDAgOTAgMzAwIDEyMCAzMDAgMTIwJyBmaWxsPSdub25lJyBzdHJva2U9JyNmZmZmZmYnIHN0cm9rZS13aWR0aD0nMS41JyBvcGFjaXR5PScwLjgnLz4KPHBhdGggZD0nTTAgMTMwIEMzNSAxMDAgNjUgNzAgOTUgODUgQzEyNSAxMDAgMTU1IDEzMCAxODUgMTE1IEMyMTUgMTAwIDI0NSA3MCAyNzUgODUgQzMwNSAxMDAgMzA1IDEzMCAzMDUgMTMwJyBmaWxsPSdub25lJyBzdHJva2U9JyNmZmZmZmYnIHN0cm9rZS13aWR0aD0nMScgb3BhY2l0eT0nMC41Jy8+CjxwYXRoIGQ9J00wIDE0MCBDNDAgMTEwIDcwIDgwIDEwMCA5NSBDMTMwIDExMCAxNjAgMTQwIDE5MCAxMjUgQzIyMCAxMTAgMjUwIDgwIDI4MCA5NSBDMzEwIDExMCAzMTAgMTQwIDMxMCAxNDAnIGZpbGw9J25vbmUnIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScwLjYnIG9wYWNpdHk9JzAuMycvPgo8L3N2Zz4=");
    background-repeat: repeat;
}

/* Border/dekorasi mega mendung */
.border-mega-mendung {
    position: relative;
}
.border-mega-mendung::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        var(--mm-1) 0%, 
        var(--mm-2) 15%, 
        var(--mm-3) 30%, 
        var(--mm-4) 45%, 
        var(--mm-5) 60%, 
        var(--mm-6) 75%, 
        var(--mm-7) 90%, 
        var(--mm-6) 100%
    );
}

/* Section dengan gradasi mega mendung */
.section-mega-mendung {
    background: linear-gradient(135deg, 
        var(--mm-1) 0%, 
        var(--mm-2) 25%, 
        var(--mm-3) 50%, 
        var(--mm-4) 75%, 
        var(--mm-5) 100%
    );
    color: white;
}

/* Section dengan pattern overlay */
.section-mega-mendung-pattern {
    background: linear-gradient(135deg, 
        var(--mm-1) 0%, 
        var(--mm-2) 100%
    );
    position: relative;
    overflow: hidden;
}
.section-mega-mendung-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMDAnIGhlaWdodD0nMTUwJyB2aWV3Qm94PScwIDAgMzAwIDE1MCc+CjxwYXRoIGQ9J00wIDEyMCBDMzAgOTAgNjAgNjAgOTAgNzUgQzEyMCA5MCAxNTAgMTIwIDE4MCAxMDUgQzIxMCA5MCAyNDAgNjAgMjcwIDc1IEMzMDAgOTAgMzAwIDEyMCAzMDAgMTIwJyBmaWxsPSdub25lJyBzdHJva2U9JyNmZmZmZmYnIHN0cm9rZS13aWR0aD0nMS41JyBvcGFjaXR5PScwLjgnLz4KPHBhdGggZD0nTTAgMTMwIEMzNSAxMDAgNjUgNzAgOTUgODUgQzEyNSAxMDAgMTU1IDEzMCAxODUgMTE1IEMyMTUgMTAwIDI0NSA3MCAyNzUgODUgQzMwNSAxMDAgMzA1IDEzMCAzMDUgMTMwJyBmaWxsPSdub25lJyBzdHJva2U9JyNmZmZmZmYnIHN0cm9rZS13aWR0aD0nMScgb3BhY2l0eT0nMC41Jy8+CjxwYXRoIGQ9J00wIDE0MCBDNDAgMTEwIDcwIDgwIDEwMCA5NSBDMTMwIDExMCAxNjAgMTQwIDE5MCAxMjUgQzIyMCAxMTAgMjUwIDgwIDI4MCA5NSBDMzEwIDExMCAzMTAgMTQwIDMxMCAxNDAnIGZpbGw9J25vbmUnIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScwLjYnIG9wYWNpdHk9JzAuMycvPgo8L3N2Zz4=");
    background-repeat: repeat;
    pointer-events: none;
}

/* Navbar */
.navbar {
    background: var(--bg-white);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, 
        var(--mm-1), var(--mm-2), var(--mm-3), 
        var(--mm-4), var(--mm-5), var(--mm-6), var(--mm-7)
    ) 1;
}

.navbar-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mm-1);
    letter-spacing: -0.02em;
}
.navbar-logo span {
    color: var(--mm-3);
}
.navbar-logo .accent {
    color: var(--mm-red);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--mm-2), var(--mm-3));
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--mm-1), var(--mm-2));
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, #FFB75E 0%, #ED8F03 100%);
    color: #fff;
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(237, 143, 3, 0.3);
    border: 1px solid rgba(255,255,255,0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.btn-secondary:hover {
    background: linear-gradient(135deg, #ED8F03 0%, #D47A02 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(237, 143, 3, 0.4);
}

.btn-whatsapp {
    background: #25D366;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
}

.btn-outline {
    background: transparent;
    color: var(--mm-3);
    border: 2px solid var(--mm-3);
    padding: 10px 24px;
    border-radius: 10px;
}
.btn-outline:hover {
    background: var(--mm-3);
    color: white;
}

/* Cards */
.product-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}
.product-card:hover {
    border-color: var(--mm-5);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px);
}
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mm-1), var(--mm-3), var(--mm-5), var(--mm-7));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.product-card:hover::before {
    opacity: 1;
}

.category-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.category-card:hover {
    border-color: var(--mm-4);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
    background: linear-gradient(135deg, var(--mm-7) 0%, var(--bg-white) 100%);
}
.category-card .icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    display: block;
}
.category-card .name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* Badges */
.badge-verified {
    background: var(--mm-3);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-premium {
    background: linear-gradient(135deg, var(--mm-gold), #f59e0b);
    color: var(--mm-1);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}
.badge-sale {
    background: var(--mm-red-light);
    color: white;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
}
.badge-new {
    background: var(--mm-5);
    color: var(--mm-1);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Animations */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.12);
}

@keyframes mega-mendung-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animated-gradient {
    background-size: 200% 200%;
    animation: mega-mendung-shift 8s ease infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
.float {
    animation: float 3s ease-in-out infinite;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.btn-whatsapp {
    animation: pulse-green 2s infinite;
}

/* UI/UX Polishing: Sticky Mobile Bottom Button */
@media (max-width: 768px) {
    .sticky-mobile-bottom {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        padding: 16px;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 30%, #fff 100%);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
        border-radius: 0;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        transform: translateY(0);
        margin: 0 !important;
    }
    
    .sticky-mobile-bottom .btn-whatsapp {
        width: 100%;
        border-radius: 50px;
        padding: 14px 24px;
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    }
    
    /* Spacer at bottom of pages with sticky buttons so content doesn't get hidden */
    .pb-safe-bottom {
        padding-bottom: 90px !important;
    }
}