/* =========================================
   VARIABLES & THEME
   ========================================= */
:root {
    /* Colors */
    --color-bg: #0a0a0a;
    /* Black/Very Dark Grey */
    --color-bg-alt: #121212;
    /* Slightly lighter for cards/sections */
    --color-primary: #007bff;
    /* Tech Blue */
    --color-primary-dark: #0056b3;
    --color-accent: #FFD700;
    /* Construction Yellow */
    --color-text: #ffffff;
    --color-text-muted: #a0a0a0;
    --color-border: #333333;

    /* Typography */
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Roboto', sans-serif;

    /* Spacing */
    --container-width: 1200px;
    --header-height: 80px;
}

/* =========================================
   RESET & BASE STYLES
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   HEADER
   ========================================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    display: flex;
    align-items: center;
}

.container-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-img {
    height: 50px;
    width: auto;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-text);
    letter-spacing: 1px;
}

.logo-tagline {
    font-size: 0.8rem;
    color: var(--color-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.navbar .nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text);
    position: relative;
}

.nav-links a:not(.btn-nav):hover {
    color: var(--color-primary);
}

.nav-links a:not(.btn-nav)::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 0.3s;
}

.nav-links a:not(.btn-nav):hover::after {
    width: 100%;
}

.btn-nav {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent) !important;
    border-radius: 4px;
}

.btn-nav:hover {
    background: var(--color-accent);
    color: var(--color-bg) !important;
}

/* Hamburger Menu (Mobile) - Hidden on Desktop */
.hamburger {
    display: none;
    cursor: pointer;
}

/* =========================================
   HERO SECTION & ANIMATION
   ========================================= */
/* =========================================
   PHOTOREALISTIC CONSTRUCTION ANIMATION
   ========================================= */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: var(--header-height);
    background: #000;
}

.hero-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 10s ease-out;
    /* Slow zoom effect */
}

/* Layer Images */
.stage-1 {
    background-image: url('bg-stage1.png');
    z-index: 1;
}

.stage-2 {
    background-image: url('bg-stage2.png');
    z-index: 2;
    /* Initial State: Hidden (Clipped fully from bottom) */
    clip-path: inset(100% 0 0 0);
    animation: constructGrow 3s ease-in-out forwards;
    animation-delay: 1s;
}

.stage-3 {
    background-image: url('bg-stage3.png');
    z-index: 3;
    clip-path: inset(100% 0 0 0);
    animation: constructGrow 3s ease-in-out forwards;
    animation-delay: 4s;
}

.stage-4 {
    background-image: url('bg-stage4.png');
    z-index: 4;
    clip-path: inset(100% 0 0 0);
    animation: constructGrow 3s ease-in-out forwards;
    animation-delay: 7s;
}

/* The Growth Animation: Reveals the image from bottom up */
@keyframes constructGrow {
    0% {
        clip-path: inset(100% 0 0 0);
    }

    100% {
        clip-path: inset(0% 0 0 0);
    }
}

/* Tech Overlay adjustments */
.hero-overlay-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    /* Above images */
    background: radial-gradient(circle at center, rgba(10, 10, 10, 0.3) 0%, rgba(10, 10, 10, 0.8) 100%);
    pointer-events: none;
}

.tech-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 123, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 123, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-text {
    max-width: 700px;
}

.hero-subtitle {
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 3px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.text-highlight {
    color: var(--color-primary);
}

.text-outline {
    -webkit-text-stroke: 2px var(--color-text);
    color: transparent;
}

.hero-description {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 40px;
    max-width: 600px;
}

.hero-cta {
    display: flex;
    gap: 20px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 15px 35px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
}

.btn-primary:hover {
    background: transparent;
    color: var(--color-primary);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-outline:hover {
    background: #fff;
    color: var(--color-bg);
}

/* Animations */
.animate-fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s forwards;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   GENERIC SECTION
   ========================================= */
.section {
    padding: 80px 0;
}

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

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-accent);
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .header {
        padding: 0 20px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .nav-links {
        position: fixed;
        right: -100%;
        top: var(--header-height);
        flex-direction: column;
        background: rgba(10, 10, 10, 0.98);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 20px 0;
        gap: 20px;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        margin: 15px 0;
    }

    .hamburger {
        display: block;
        color: #fff;
        font-size: 1.5rem;
        z-index: 1001;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: white;
    transition: all 0.3s ease-in-out;
}

/* =========================================
   GRID UTILITIES
   ========================================= */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

.text-center {
    text-align: center;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mt-5 {
    margin-top: 3rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.w-100 {
    width: 100%;
}

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

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

.divider {
    height: 3px;
    width: 80px;
    background: var(--color-accent);
    margin-bottom: 40px;
}

/* =========================================
   ABOUT SECTION
   ========================================= */
.about-image-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.about-img {
    width: 100%;
    border-radius: 8px;
    filter: grayscale(20%);
    transition: filter 0.3s;
}

.about-img:hover {
    filter: grayscale(0%);
}

.experience-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--color-primary);
    padding: 20px;
    border-radius: 8px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.experience-badge .years {
    font-size: 2.5rem;
    font-weight: 900;
    font-family: var(--font-heading);
    line-height: 1;
}

.experience-badge .text {
    font-size: 0.8rem;
    text-transform: uppercase;
    text-align: center;
}

.section-subtitle {
    display: block;
    color: var(--color-primary);
    font-family: var(--font-heading);
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 700;
}

.section-desc {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    margin-bottom: 30px;
}

.features-list {
    margin-bottom: 30px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-weight: 500;
}

/* =========================================
   SERVICES SECTION
   ========================================= */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--color-bg-alt);
    padding: 40px 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s, border-color 0.3s;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

.service-icon {
    font-size: 2.5rem;
    color: var(--color-accent);
    margin-bottom: 25px;
}

.service-card h3 {
    font-family: var(--font-heading);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.service-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* =========================================
   PROJECTS SECTION
   ========================================= */
/* =========================================
   CLIENTS SECTION (CAROUSEL)
   ========================================= */
.client-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 40px 0;
    /* Mask/Fade Effect */
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.client-track {
    display: flex;
    align-items: center;
    width: max-content;
    /* Ensure horizontal layout */
    /* Move from Right to Left: 0 -> -50% */
    animation: scrollRightToLeft 20s linear infinite;
}

.client-item {
    width: 160px;
    /* Specific width */
    height: 100px;
    margin: 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Initial state for Wave Effect */
    opacity: 1;
    /* REMOVED grayscale for color */

    /* Animation for "Wave" - shrinking/growing independently? 
       User wants: "kecil kemudian besar menengah kemudian kanan mengecil lagi".
       This implies a spatial effect (fisheye) relative to container center.
       Pure CSS can't detect "center of container" easily for scrolling items without complex delay math.
       However, we can approximate it by animating scale based on time if we sync it, 
       OR just a continuous pulse.
       Let's stick to the "Pulse" animation on the items themselves which approximates the "alive" feel.
    */
    animation: scalePulse 4s ease-in-out infinite;
}

.client-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Stagger animations to create a wave-like look */
.client-item:nth-child(2n) {
    animation-delay: 1s;
}

.client-item:nth-child(3n) {
    animation-delay: 2s;
}

@keyframes scrollRightToLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scalePulse {

    0%,
    100% {
        transform: scale(0.8);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
        filter: grayscale(0%);
    }
}

/* Cleanup old project filtering styles if any remain */
.project-filter-container,
.projects-grid,
.btn-filter {
    display: none;
}

.project-info h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.project-info p {
    color: var(--color-accent);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.btn-link {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-link:hover {
    color: var(--color-primary);
}

/* =========================================
   CONTACT SECTION
   ========================================= */
.info-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.icon-box {
    width: 50px;
    height: 50px;
    background: rgba(0, 123, 255, 0.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
}

.info-item h5 {
    font-family: var(--font-heading);
    margin-bottom: 5px;
}

.info-item p {
    color: var(--color-text-muted);
}

.contact-form-wrapper {
    background: var(--color-bg-alt);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    color: #fff;
    border-radius: 4px;
    font-family: var(--font-body);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* =========================================
   FOOTER
   ========================================= */
.footer-section {
    background: #050505;
    padding-top: 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
}

.footer-brand p {
    color: var(--color-text-muted);
    max-width: 300px;
}

.footer-links h4,
.footer-social h4 {
    font-family: var(--font-heading);
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links ul li a {
    color: var(--color-text-muted);
    transition: color 0.3s;
}

.footer-links ul li a:hover {
    color: var(--color-primary);
    padding-left: 5px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s;
}

.social-icons a:hover {
    background: var(--color-primary);
}

.footer-bottom {
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* =========================================
   FLOATING WHATSAPP BUTTON (FIXED)
   ========================================= */
.float-wa {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: all 0.3s ease;
    text-decoration: none;
}

.float-wa:hover {
    transform: scale(1.1);
    background-color: #128c7e;
    color: #fff;
}

/* Pulse Animation */
@keyframes waPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.float-wa {
    animation: waPulse 2s infinite;
}

/* =========================================
   STORE LINKS WIDGET (BOTTOM LEFT)
   ========================================= */
.store-links-widget {
    position: fixed;
    bottom: 30px;
    left: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1000;
    font-family: var(--font-heading);
}

.store-label {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    font-size: 0.8rem;
    margin-bottom: 8px;
    border-radius: 4px;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.store-logos-img {
    width: 120px;
    height: auto;
    transition: transform 0.3s ease;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}

.store-links-widget:hover .store-logos-img {
    transform: scale(1.05);
}