/*
Theme Name: ACMPG v3
Theme URI: https://instagram.com/anindityow
Author: Anindityo
Description: Tema minimalis modern untuk bengkel AC Mobil Pak Gik.
Version: 3.0
*/

/* Variabel Warna Kustom */
:root {
    --primary: #047857; /* Emerald Green */
    --primary-hover: #065f46;
    --bg-light: #F8FAFC;
    --text-dark: #0F172A;
    --highlight: #D1FAE5;
}

/* Typography & Body */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    scroll-behavior: smooth;
    overflow-x: hidden; 
}

/* Utility Classes Kustom */
.text-primary-custom { color: var(--primary) !important; }
.bg-primary-custom { background-color: var(--primary) !important; }
.bg-highlight { background-color: var(--highlight) !important; }

/* Navbar */
.navbar { 
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); 
    transition: all 0.3s ease;
}
.nav-link { 
    font-weight: 500; 
    color: var(--text-dark); 
    transition: color 0.3s ease; 
}
.nav-link:hover { color: var(--primary); }

/* Styling Logo Gambar di Navbar */
.navbar-logo {
    max-height: 45px; /* Tinggi maksimal logo di layar laptop/PC */
    width: auto;      /* Lebar menyesuaikan secara proporsional */
    object-fit: contain; /* Memastikan logo tidak terpotong */
    transition: transform 0.3s ease; /* Animasi halus saat disentuh */
}

.navbar-logo:hover {
    transform: scale(1.05); /* Membesar sedikit saat di-hover */
}

/* Responsif: Menyesuaikan ukuran di layar HP (Mobile) */
@media (max-width: 768.98px) {
    .navbar-logo {
        max-height: 35px; /* Logo akan sedikit mengecil di layar HP agar rapi */
    }
}

/* Buttons */
.btn-custom { 
    background-color: var(--primary); 
    color: white; 
    border-radius: 10px; 
    padding: 12px 28px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}
.btn-custom:hover { 
    background-color: var(--primary-hover); 
    color: white; 
    transform: translateY(-2px); 
    box-shadow: 0 8px 20px rgba(4, 120, 87, 0.2); 
}
.btn-outline-custom {
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: 10px;
    padding: 10px 28px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-outline-custom:hover { 
    background-color: var(--primary); 
    color: white; 
}

/* Hero Section */
.hero-section { padding: 60px 0 100px; }

/* Animasi Floating untuk Gambar Hero */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.hero-image { 
    border-radius: 24px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.08); 
    object-fit: cover; 
    height: 500px; 
    width: 100%; 
    animation: float 6s ease-in-out infinite; 
}

/* Service Cards */
.service-card {
    background: white;
    border-radius: 20px;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}
.icon-box {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--primary);
    background-color: var(--highlight);
    margin-bottom: 24px;
}

/* Interaksi Ikon saat Kartu di-hover */
.service-card .icon-box i {
    transition: transform 0.4s ease;
}
.service-card:hover .icon-box i {
    transform: scale(1.2) rotate(10deg);
}

/* --- Animasi Pulse untuk Tombol CTA --- */
@keyframes pulse-white {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.btn-pulse {
    animation: pulse-white 2s infinite;
    transition: all 0.3s ease;
}
.btn-pulse:hover {
    animation: none; 
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.3);
}

/* Global Sections */
section { padding: 100px 0; }

/* Footer */
footer { 
    background-color: white; 
    border-top: 1px solid #e2e8f0; 
}