/* ================= RESET ================= */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* FIX: Semua media jangan melebihi screen */
img, video, iframe {
  max-width: 100%;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* ================= COLOR SYSTEM ================= */
:root {
    --primary: #0B3F54;
    --secondary: #4FA3B8;
    --accent: #25a7da;
    --soft-bg: #EAF3F6;
    --text-dark: #0B3F54;
    --text-muted: #355E6B;
    --shadow-light: rgba(11,63,84,0.08);
    --shadow-medium: rgba(11,63,84,0.15);
    --shadow-heavy: rgba(11,63,84,0.25);
}

/* ================= ANIMATION KEYFRAMES ================= */
@keyframes fadeSlideLeft {
    from { opacity: 0; transform: translateX(-60px);}
    to { opacity: 1; transform: translateX(0);}
}

@keyframes fadeSlideRight {
    from { opacity: 0; transform: translateX(60px);}
    to { opacity: 1; transform: translateX(0);}
}

@keyframes float {
    0%, 100% { transform: translateY(0);}
    50% { transform: translateY(-18px);}
}

/* Animate on scroll */
.animate-on-scroll { opacity: 0; transform: translateY(60px); transition: all 0.8s ease; }
.animate-on-scroll.show { opacity: 1; transform: translateY(0);}
.fade-up { opacity: 0; transform: translateY(30px); transition: 0.6s ease; }
.fade-up.show { opacity: 1; transform: translateY(0);}