/**
 * Custom Industrial Styling
 * Brand: Seo Pipa Jakarta
 * Standard: High Contrast, Core Web Vitals & Zero Layout Shift
 */

:root {
    --color-slate-900: #0F172A;
    --color-blue-900: #1E3A8A;
    --color-sky-600: #0284C7;
    --color-orange-600: #EA580C;
    --color-green-600: #16A34A;
    --color-green-700: #15803D;
    --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: #1E293B;
    background-color: #F8FAFC;
    overflow-x: hidden;
}

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

/* Accessibility Focus Ring (WCAG 2.1 AA Compliant) */
:focus-visible {
    outline: 2px solid var(--color-sky-600) !important;
    outline-offset: 3px !important;
}

/* Tombol CTA WhatsApp Min Height Target Sentuhan Mobile (48px) */
.btn-wa-touch {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Scroll Reveal Animation */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children delay */
[data-reveal]:nth-child(2) { transition-delay: 0.08s; }
[data-reveal]:nth-child(3) { transition-delay: 0.16s; }
[data-reveal]:nth-child(4) { transition-delay: 0.24s; }

/* Scrollbar hide for mobile horizontal scroll */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Kerapian cetak dokumen penawaran harga */
@media print {
    header, footer, aside, .no-print {
        display: none !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}