/* =========================================================
   CORE DESIGN SYSTEM - HK EQUIPMENT GLOBAL
========================================================= */

/* 01. GLOBAL VARIABLES */
:root {
    --primary-color: #dc3545;
    --dark-bg: #1f2937;
    --light-bg: #f9fafb;
    --accent-color: #fca503;

    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;

    --shadow-soft: 0 10px 30px rgba(0,0,0,.08);
    --shadow-hover: 0 18px 45px rgba(0,0,0,.15);
}

/* 02. GLOBAL RESET & TYPOGRAPHY */
body {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    background-color: var(--light-bg);
    color: #212529;
    overflow-x: hidden; /* Mencegah scroll horizontal yang merusak tampilan HP */
}

/* Utilitas Jarak Section */
.section-padding {
    padding: 5rem 0;
}

.bg-dark-custom {
    background-color: var(--dark-bg);
}

.text-accent {
    color: var(--accent-color);
}

/* Efek Tulisan Berbayang */
.shadow-text {
    text-shadow: 2px 2px 6px rgba(0,0,0,.7);
}

/* 03. GLOBAL ANIMATION (SCROLL REVEAL) */
/* Komponen akan mulai transparan dan bergeser sedikit ke bawah */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Saat di-scroll dan terlihat oleh mata, kelas 'active' akan ditambahkan lewat JS */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 04. RESPONSIVE UTILITIES */
@media (max-width: 768px) {
    .section-padding {
        padding: 3.5rem 0;
    }
}