/* assets/css/style.css */

/* -------------------------------------------------------------------------- */
/* 1. GLOBAL RESETS & DEFAULTS                                                */
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Basis untuk REM unit */
}

body {
    font-family: var(--body-font);
    color: var(--text-color);
    line-height: 1.7;
    background-color: var(--white-color);
    overflow-x: hidden; /* Mencegah scroll horizontal yang tidak diinginkan */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* Konten utama mengisi ruang yang tersedia, mendorong footer ke bawah */
    padding-top: 70px; /* Default padding atas untuk konten di bawah fixed header, sesuaikan dengan tinggi header Anda */
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
    display: block; /* Menghilangkan spasi bawah default pada gambar inline */
}

a {
    text-decoration: none;
    color: var(--primary-color); /* Link utama berwarna merah */
    transition: color var(--transition-speed-fast) ease, opacity var(--transition-speed-fast) ease;
}

a:hover {
    color: var(--secondary-color); /* Link hover berwarna merah muda */
    opacity: 0.85;
}

ul, ol {
    list-style-position: outside; /* Bullet/number di luar padding konten */
    padding-left: 1.5rem; /* Indentasi standar untuk list */
}


/* -------------------------------------------------------------------------- */
/* 2. CSS VARIABLES & UTILITY CLASSES                                         */
/* -------------------------------------------------------------------------- */
:root {
    --primary-color: #CC0000;   /* Merah Primer */
    --primary-color-rgb: 204, 0, 0;
    --secondary-color: #FF5252; /* Merah Sekunder/Aksen (lebih muda) */
    --secondary-color-rgb: 255, 82, 82;
    /* --accent-color: #FFC107;    Warna aksen jika diperlukan (kuning/gold bisa kontras baik dengan merah/hitam) */
    /* --accent-color-rgb: 255, 193, 7; */

    --dark-color: #1A1A1A;      /* Hitam/Abu-abu Sangat Gelap */
    --dark-color-rgb: 26, 26, 26;
    --light-color: #f4f4f4;     /* Abu-abu Sangat Muda untuk latar belakang section */
    --white-color: #ffffff;
    --text-color: #212121;      /* Warna teks paragraf umum (abu-abu gelap) */
    --text-color-light: #f8f9fa; /* Warna teks terang untuk latar gelap */


    --success-color: #28a745;   /* Hijau untuk notifikasi sukses */
    --danger-color: #CC0000;    /* Merah untuk notifikasi error (sama dengan primary, bisa dibedakan jika perlu) */
    --warning-color: #ffc107;   /* Kuning untuk peringatan */
    --border-color: #dddddd;    /* Warna border umum (abu-abu muda) */

    --heading-font: 'Montserrat', sans-serif;
    --body-font: 'Open Sans', sans-serif;

    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;

    --box-shadow-light: 0 5px 15px rgba(0, 0, 0, 0.07);
    --box-shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);
    --box-shadow-dark: 0 12px 35px rgba(0, 0, 0, 0.12);

    --transition-speed: 0.3s;
    --transition-speed-fast: 0.2s;
    --transition-speed-slow: 0.5s;

    --header-height-desktop: 70px; /* Perkiraan tinggi header di desktop */
    --header-height-scrolled: 60px; /* Tinggi header saat di-scroll */

    --container-width: 1200px;
    --container-padding: 15px;
}

/* Utility Classes */
.container {
    width: 90%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}
.container-fluid { width: 100%; padding-left: 0; padding-right: 0; } /* Biasanya untuk elemen full-width */

.py-1 { padding-top: 1rem; padding-bottom: 1rem; }
.py-2 { padding-top: 2rem; padding-bottom: 2rem; }
.py-3 { padding-top: 3rem; padding-bottom: 3rem; }
.py-4 { padding-top: 4rem; padding-bottom: 4rem; }
.py-5 { padding-top: 5rem; padding-bottom: 5rem; }
.py-6 { padding-top: 6rem; padding-bottom: 6rem; }

.pt-5 { padding-top: 5rem; }
.pb-5 { padding-bottom: 5rem; }

.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }

.mt-3 { margin-top: 1rem !important; } /* !important untuk override jika perlu */
.mt-4 { margin-top: 1.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.ms-2 { margin-left: 0.5rem !important; }


.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
/* .text-accent { color: var(--accent-color) !important; } */
.text-white { color: var(--white-color) !important; }
.text-dark { color: var(--dark-color) !important; }
.text-muted { color: #6c757d !important; } /* Abu-abu standar untuk muted text */
.lead { font-size: 1.15rem; font-weight: 400; line-height: 1.6; }
.fw-bold { font-weight: 700 !important; }
.fst-italic { font-style: italic !important; }

.img-fluid { max-width: 100%; height: auto; }
.rounded { border-radius: var(--border-radius) !important; }
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-circle { border-radius: 50% !important; }
.shadow { box-shadow: var(--box-shadow-light) !important; }
.shadow-lg { box-shadow: var(--box-shadow-medium) !important; }

.bg-light-gray { background-color: var(--light-color); }
.bg-dark { background-color: var(--dark-color); }
.bg-primary { background-color: var(--primary-color); }
.bg-white { background-color: var(--white-color); }


.position-relative { position: relative; }
.d-block { display: block !important; }
.w-100 { width: 100% !important; }
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Row and Column basic (jika tidak pakai framework grid eksternal) */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--container-padding) * -1);
    margin-right: calc(var(--container-padding) * -1);
}
.row > [class*="col-"] {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    width: 100%; /* Default untuk mobile, tumpuk */
}

/* Contoh kolom untuk desktop - sesuaikan breakpoint dan persentase jika perlu */
@media (min-width: 768px) { /* Tablet */
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .ms-md-3 { margin-left: 1rem !important; }
}
@media (min-width: 992px) { /* Desktop kecil */
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; } /* Untuk konten kebijakan privasi */
    .order-lg-1 { order: 1; }
    .order-lg-2 { order: 2; }
    .mt-lg-0 { margin-top: 0 !important; }
    .mb-lg-0 { margin-bottom: 0 !important; }
}
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }


/* -------------------------------------------------------------------------- */
/* 3. TYPOGRAPHY                                                              */
/* -------------------------------------------------------------------------- */
h1, .title-xl { font-family: var(--heading-font); font-size: 2.8rem; font-weight: 900; line-height: 1.2; margin-bottom: 1rem; color: var(--dark-color); }
h2, .title-lg { font-family: var(--heading-font); font-size: 2.2rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.75rem; color: var(--dark-color); }
h3, .title-md { font-family: var(--heading-font); font-size: 1.8rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.75rem; color: var(--dark-color); }
h4, .title-sm { font-family: var(--heading-font); font-size: 1.4rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.5rem; color: var(--dark-color); }
h5 { font-family: var(--heading-font); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--dark-color); }
h6 { font-family: var(--heading-font); font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--dark-color); }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }
hr {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin-top: 2rem;
    margin-bottom: 2rem;
}


/* -------------------------------------------------------------------------- */
/* 4. HEADER & NAVIGATION                                                     */
/* -------------------------------------------------------------------------- */
#main-header {
    background-color: var(--white-color);
    padding: 0.9rem 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    transition: background-color var(--transition-speed) ease,
                padding var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
    height: var(--header-height-desktop);
}
#main-header.scrolled {
    background-color: rgba(255,255,255,0.98);
    padding: 0.6rem 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    height: var(--header-height-scrolled);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.company-logo {
    height: 45px;
    transition: height var(--transition-speed) ease;
}
#main-header.scrolled .company-logo {
    height: 35px;
}
.navbar-brand span {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary-color); /* Teks logo berwarna merah */
}

.navbar-nav {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
.navbar-nav li {
    margin-left: 1.5rem; /* Spasi antar menu item dikurangi sedikit */
}
.navbar-nav li:first-child {
    margin-left: 0;
}
.navbar-nav a {
    text-decoration: none;
    color: var(--dark-color); /* Teks menu hitam/abu gelap */
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0.2rem;
    position: relative;
    white-space: nowrap;
}
.navbar-nav a:not(.btn)::after { /* Efek underline hanya untuk link teks, bukan tombol */
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--primary-color); /* Underline merah */
    transition: width var(--transition-speed-fast) ease;
}
.navbar-nav a:not(.btn):hover,
.navbar-nav a:not(.btn).active {
    color: var(--primary-color); /* Teks menu hover/active merah */
}
.navbar-nav a:not(.btn):hover::after,
.navbar-nav a:not(.btn).active::after {
    width: 100%;
}

/* Styling untuk tombol di navigasi */
.nav-download-btn,
.nav-contact-btn {
    padding: 0.5rem 1rem !important; /* Padding tombol nav disesuaikan */
    font-size: 0.9rem !important;
    margin-left: 1rem;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm); /* Radius tombol lebih kecil */
}
.nav-download-btn { /* Tombol Unduh Profil (outline merah) */
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.nav-download-btn:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.nav-contact-btn { /* Tombol Hubungi Kami (merah solid) */
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}
.nav-contact-btn:hover {
    background-color: #A00000; /* Merah lebih gelap untuk hover */
    border-color: #A00000;
    color: var(--white-color);
}

.navbar-toggler {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--dark-color); /* Ikon hamburger hitam */
    padding: 0.5rem;
    line-height: 1;
    z-index: 1001;
}

/* Styling Navigasi Mobile */
@media (max-width: 991.98px) {
    main { padding-top: var(--header-height-scrolled); }
    .navbar-toggler { display: block; }
    .navbar-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: var(--white-color);
        position: absolute;
        top: 100%;
        left: 0;
        box-shadow: 0 10px 10px rgba(0,0,0,0.05);
        padding: 0;
        border-top: 1px solid var(--border-color);
        max-height: calc(100vh - var(--header-height-scrolled));
        overflow-y: auto;
    }
    .navbar-nav.active-mobile { display: flex; }
    .navbar-nav li {
        margin-left: 0;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }
    .navbar-nav li:last-child { border-bottom: none; }
    .navbar-nav li a {
        padding: 1rem 1.5rem;
        display: block;
        width: 100%;
        text-align: left;
    }
    .navbar-nav a:not(.btn)::after { display: none; }
    .navbar-nav li a.active, .navbar-nav li a:hover {
        background-color: rgba(var(--primary-color-rgb), 0.05); /* Latar merah sangat muda */
        color: var(--primary-color);
    }
    .nav-download-btn,
    .nav-contact-btn {
        margin: 0.75rem 1.5rem;
        display: block;
        width: calc(100% - 3rem); /* Agar ada padding kiri kanan */
        text-align: center;
    }
}


/* -------------------------------------------------------------------------- */
/* 5. FOOTER                                                                  */
/* -------------------------------------------------------------------------- */
#main-footer {
    background-color: var(--dark-color); /* Footer hitam/abu gelap */
    color: var(--text-color-light); /* Teks putih/abu terang */
    padding: 3.5rem 0 1.5rem;
    font-size: 0.9rem;
    line-height: 1.8;
}
#main-footer .footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5rem; /* Spasi antar kolom */
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(var(--white-color-rgb, 255, 255, 255), 0.1); /* Border lebih halus */
}
.footer-column {
    flex: 1;
    min-width: 220px; /* Minimal lebar kolom sebelum wrap */
}
.footer-column h5 {
    color: var(--white-color);
    font-size: 1.05rem;
    font-family: var(--heading-font);
    font-weight: 600;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 0.5rem;
}
.footer-column h5::after { /* Garis bawah judul kolom footer */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: var(--primary-color); /* Garis bawah merah */
}
.footer-column p, .footer-column ul, .footer-column li {
    margin-bottom: 0.7rem; /* Sedikit penyesuaian margin */
    opacity: 0.9; /* Teks sedikit lebih lembut */
}
.footer-column ul {
    list-style: none;
    padding: 0;
}
.footer-column a {
    color: var(--text-color-light); /* Warna link default di footer */
    opacity: 0.8;
}
.footer-column a:hover {
    color: var(--secondary-color); /* Link hover merah muda */
    opacity: 1;
    text-decoration: underline;
}

/* Styling untuk ikon kontak di footer */
.footer-column .contact-info-footer p {
    display: flex; /* Agar ikon dan teks sejajar dengan baik */
    align-items: flex-start; /* Alignment vertikal ikon dan teks */
    margin-bottom: 0.8rem;
}
.footer-icon { /* Ini adalah span pembungkus ikon Font Awesome */
    display: inline-block;
    width: 20px; /* Lebar area untuk ikon */
    text-align: center; /* Ikon di tengah span */
    margin-right: 0.8rem; /* Spasi antara ikon dan teks */
    color: var(--secondary-color); /* Warna ikon merah muda agar menonjol */
    font-size: 1em; /* Ukuran ikon relatif terhadap teks paragraf */
    line-height: inherit; /* Mengikuti line-height paragraf */
    flex-shrink: 0; /* Mencegah ikon mengecil */
}
/* .footer-icon i { // Tidak perlu styling spesifik di sini jika sudah di .footer-icon } */


/* Styling untuk ikon sosial media di footer */
.footer-social-icons {
    margin-top: 1.5rem; /* Spasi dari teks di atasnya */
}
.footer-social-icons a {
    display: inline-flex; /* Menggunakan flex untuk alignment ikon */
    align-items: center;
    justify-content: center;
    margin-right: 0.8rem;
    color: var(--text-color-light); /* Warna ikon default */
    font-size: 1.3rem; /* Ukuran ikon sosial media */
    width: 36px; /* Lebar area ikon */
    height: 36px; /* Tinggi area ikon */
    border: 1px solid rgba(var(--white-color-rgb), 0.2); /* Border halus */
    border-radius: 50%; /* Membuatnya bulat */
    opacity: 0.8;
    transition: color var(--transition-speed-fast) ease,
                background-color var(--transition-speed-fast) ease,
                border-color var(--transition-speed-fast) ease,
                transform var(--transition-speed-fast) ease,
                opacity var(--transition-speed-fast) ease;
}
.footer-social-icons a:hover {
    color: var(--white-color);
    background-color: var(--primary-color); /* Latar merah saat hover */
    border-color: var(--primary-color);
    transform: scale(1.1);
    opacity: 1;
    text-decoration: none; /* Hapus underline default dari a:hover */
}
.footer-social-icons a i { /* Styling spesifik untuk tag <i> di dalam link sosial */
    line-height: 1; /* Memastikan ikon di tengah secara vertikal */
}


.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    font-size: 0.85rem;
    opacity: 0.8;
}
.footer-bottom p { margin: 0; }
.footer-bottom span[style*="color: var(--primary-color)"] {
    color: var(--primary-color) !important;
}

/* -------------------------------------------------------------------------- */
/* WHATSAPP BUBBLE CHAT                                                       */
/* -------------------------------------------------------------------------- */
.whatsapp-bubble {
    position: fixed; /* Tetap di posisi yang sama saat scroll */
    bottom: 25px;    /* Jarak dari bawah layar */
    right: 25px;     /* Jarak dari kanan layar */
    width: 60px;     /* Lebar bubble */
    height: 60px;    /* Tinggi bubble */
    background-color: #28a745; /* Warna latar merah primer */
    color: var(--white-color); /* Warna ikon putih */
    border-radius: 50%; /* Membuatnya bulat sempurna */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem; /* Ukuran ikon WhatsApp di dalam bubble */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Shadow agar terlihat mengambang */
    z-index: 998; /* Di bawah tombol back-to-top jika ada, tapi di atas konten lain */
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-bubble:hover {
    background-color: var(--primary-color-darker); /* Merah lebih gelap saat hover */
    transform: scale(1.1) translateY(-3px); /* Efek sedikit membesar dan naik */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.whatsapp-bubble i {
    line-height: 1; /* Memastikan ikon di tengah secara vertikal */
}


/* -------------------------------------------------------------------------- */
/* 6. BUTTONS & FORMS                                                         */
/* -------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    font-family: var(--heading-font);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 2px solid transparent;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--border-radius);
    transition: all var(--transition-speed) ease-in-out;
    text-decoration: none;
    white-space: nowrap;
}
.btn-lg { padding: 0.9rem 2rem; font-size: 1.1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }

.btn-primary {
    background-color: var(--primary-color); /* Merah */
    color: var(--white-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: #A00000; /* Merah lebih gelap */
    border-color: #A00000;
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.25);
}

.btn-secondary { /* Tombol sekunder hitam/abu gelap */
    background-color: var(--dark-color);
    color: var(--white-color);
    border-color: var(--dark-color);
}
.btn-secondary:hover {
    background-color: #3c3c3c; /* Abu gelap lebih terang */
    border-color: #3c3c3c;
    color: var(--white-color);
    transform: translateY(-2px);
}

.btn-success {
    background-color: var(--success-color);
    color: var(--white-color);
    border-color: var(--success-color);
}
.btn-success:hover {
    background-color: #1f7a38;
    border-color: #1f7a38;
    color: var(--white-color);
}

.btn-outline-primary { /* Outline merah */
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.btn-outline-dark { /* Outline hitam/abu gelap */
    color: var(--dark-color);
    border-color: var(--dark-color);
}
.btn-outline-dark:hover {
    background-color: var(--dark-color);
    color: var(--white-color);
}

.btn-outline-light { /* Outline putih (untuk latar gelap) */
    color: var(--white-color);
    border-color: var(--white-color);
}
.btn-outline-light:hover {
    background-color: var(--white-color);
    color: var(--dark-color);
}

.btn-link {
    color: var(--primary-color); /* Link merah */
    text-decoration: none;
    font-weight: 600;
    background-color: transparent;
    border-color: transparent;
    padding: 0;
}
.btn-link:hover {
    color: var(--secondary-color); /* Hover merah muda */
    text-decoration: underline;
}
.btn-link .arrow {
    transition: transform var(--transition-speed-fast) ease;
    display: inline-block;
    margin-left: 0.3rem;
}
.btn-link:hover .arrow {
    transform: translateX(5px);
}

/* Form general styling */
.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--dark-color); /* Label hitam/abu gelap */
    font-size: 0.9rem;
}
.form-control {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-family: var(--body-font);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color); /* Teks input abu gelap */
    background-color: var(--white-color);
    background-clip: padding-box;
    border: 1px solid var(--border-color); /* Border abu muda */
    appearance: none;
    border-radius: var(--border-radius-sm); /* Radius lebih kecil untuk form */
    transition: border-color var(--transition-speed-fast) ease-in-out,
                box-shadow var(--transition-speed-fast) ease-in-out;
}
.form-control:focus {
    border-color: var(--primary-color); /* Border fokus merah */
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(var(--primary-color-rgb), 0.25); /* Shadow fokus merah muda */
}
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}
.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-left: 0;
}
.form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.2em;
    margin-right: 0.6em;
    border: 1px solid #adb5bd;
    border-radius: 0.25em;
    flex-shrink: 0;
}
.form-check-input[type="checkbox"] { border-radius: 0.25em; }
.form-check-input[type="radio"] { border-radius: 50%; }

.form-check-input:checked {
    background-color: var(--primary-color); /* Checkbox tercentang merah */
    border-color: var(--primary-color);
}
.form-check-input:focus {
    border-color: var(--secondary-color); /* Fokus checkbox merah muda */
    box-shadow: 0 0 0 .2rem rgba(var(--secondary-color-rgb), 0.25);
}
.form-check-label {
    font-size: 0.9rem;
    color: var(--text-color);
    line-height: 1.5;
}
.form-check-label a { font-weight: 600; }
.text-danger { color: var(--danger-color) !important; } /* Tanda bintang wajib merah */

/* Validation styles (Bootstrap inspired) */
.needs-validation .form-control:invalid,
.was-validated .form-control:invalid {
    border-color: var(--danger-color); /* Border error merah */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23CC0000'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23CC0000' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}
.needs-validation .form-control:valid,
.was-validated .form-control:valid {
    border-color: var(--success-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4L1.1 2l2.2 2.93.02.02L6.4 1.1c.2-.2.5-.2.7 0L7.7 2c.4.4.2 1.1-.2 1.4L2.8 6.73c-.1.1-.4.1-.5 0z'/%3e%3c/svg%3e");
}
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--danger-color); /* Teks error merah */
}
.was-validated :invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-feedback {
    display: block;
}

/* Alert messages */
.alert {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
}
.alert ul { margin-top: 0.5rem; padding-left: 1.2rem; }
.alert ul li { font-size: 0.9rem; }

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}
.alert-danger {
    color: #721c24; /* Warna teks error disesuaikan agar kontras dengan latar merah muda */
    background-color: #f8d7da; /* Latar merah muda untuk error */
    border-color: #f5c6cb;
}
.alert-info {
    color: #052c65;
    background-color: #cfe2ff;
    border-color: #b6d4fe;
}
.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}


/* -------------------------------------------------------------------------- */
/* 7. COMMON SECTION STYLING                                                  */
/* -------------------------------------------------------------------------- */

.section-padding-condensed { padding-top: 3rem; padding-bottom: 3rem; }

.section-header {
    margin-bottom: 3rem;
}
.section-header .subtitle {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color); /* Subtitle merah */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}
.text-center .section-header .subtitle::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--secondary-color); /* Garis bawah subtitle merah muda */
    margin: 0.75rem auto 0;
}

/* Page Banner (untuk halaman selain Beranda) */
.page-banner {
    position: relative;
    padding: 7rem 0;
    background-size: cover;
    background-position: center center;
    color: var(--white-color);
    text-align: center;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #dd0000; /* Overlay hitam/abu gelap transparan lebih tebal */
    z-index: 1;
}
.banner-content {
    position: relative;
    z-index: 2;
}
.banner-content h1 {
    font-size: 2.8rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: var(--white-color);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.banner-content p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Efek hover umum untuk gambar/card */
.hover-effect {
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.hover-effect:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--box-shadow-medium);
}

/* List dengan style khusus */
.list-styled {
    list-style: none;
    padding-left: 0;
}
.list-styled li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.list-styled .bullet {
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--primary-color); /* Bullet merah */
    font-weight: bold;
    font-size: 1em;
}
.list-styled-feature li {
    padding-left: 1.8rem;
    position: relative;
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
}
.list-styled-feature .feature-bullet {
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--primary-color); /* Bullet fitur merah */
    font-weight: bold;
    font-size: 1.1em;
}
.process-list {
    list-style-type: decimal;
    padding-left: 1.8rem;
    font-size: 0.95rem;
}
.process-list li { margin-bottom: 0.5rem; }
.custom-list {
    padding-left: 1rem;
    font-size: 0.95rem;
}
.custom-list li { margin-bottom: 0.4rem; }
.page-dynamic-content p, .page-dynamic-content ul, .page-dynamic-content ol, .page-dynamic-content h3, .page-dynamic-content h4 {
    margin-bottom: 1rem; /* Spasi standar untuk elemen di dalam konten dinamis */
}
.page-dynamic-content h3 { color: var(--primary-color); font-size: 1.6rem; }
.page-dynamic-content h4 { color: var(--dark-color); font-size: 1.3rem; }
.page-dynamic-content ul { list-style: disc; }
.page-dynamic-content ol { list-style: decimal; }


/* -------------------------------------------------------------------------- */
/* 8. SPECIFIC COMPONENTS (Hero, Cards, Modals, Accordions, Timelines, etc.)  */
/* -------------------------------------------------------------------------- */

/* Hero Section (Beranda) */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    overflow: hidden;
    text-align: center;
    margin-top: calc(var(--header-height-desktop) * -1);
}
.hero-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: 1;
    animation: kenburnsEffect 25s ease-in-out infinite alternate;
}
@keyframes kenburnsEffect {
    0% { transform: scale(1) rotate(0.001deg); }
    100% { transform: scale(1.1) rotate(0.001deg); }
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 850px;
    padding: 0 var(--container-padding);
}
.hero-title {
    font-size: 3.2rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--white-color);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
}
.hero-subtitle, .hero-tagline, .hero-experience {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 400;
    color: rgba(255,255,255,0.95);
    line-height: 1.6;
}
.hero-experience { margin-bottom: 2rem; }
.hero-cta-buttons .hero-btn {
    margin: 0.5rem;
    min-width: 200px;
}

.scroll-down-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: var(--white-color);
    animation: bounceArrow 2.5s infinite ease-in-out;
}
.scroll-down-indicator svg { width: 30px; height: 30px; opacity: 0.8; }
@keyframes bounceArrow {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-12px) translateX(-50%); }
    60% { transform: translateY(-6px) translateX(-50%); }
}

/* Feature Item (Digunakan di Beranda > Mengapa Memilih Kami, Layanan > Alasan Mempercayakan) */
.feature-item, .icon-feature-box {
    margin-bottom: 2rem;
    padding: 1.8rem;
    text-align: center;
    background-color: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-light);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-top-color var(--transition-speed) ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-top: 3px solid transparent;
}
.feature-item:hover, .icon-feature-box:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-medium);
    border-top-color: var(--primary-color); /* Aksen merah saat hover */
}
.feature-icon-container, .icon-feature-box .icon-bg {
    width: 70px; /* Dikecilkan sedikit */
    height: 70px;
    margin: 0 auto 1.5rem auto;
    background-color: rgba(var(--primary-color-rgb), 0.08); /* Latar ikon merah sangat muda */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
    flex-shrink: 0;
}
.feature-icon, .icon-feature-box .icon-bg img {
    width: 35px; /* Dikecilkan sedikit */
    height: 35px;
    /* Filter untuk ikon SVG agar berwarna merah (jika ikonnya monokrom hitam) */
    /* filter: invert(15%) sepia(100%) saturate(5000%) hue-rotate(350deg) brightness(90%) contrast(110%); */
}
.feature-item:hover .feature-icon-container,
.icon-feature-box:hover .icon-bg {
    background-color: var(--primary-color); /* Latar ikon merah solid saat hover */
    transform: scale(1.05) rotate(5deg);
}
.feature-item:hover .feature-icon,
.icon-feature-box:hover .icon-bg img {
    filter: brightness(0) invert(1); /* Ikon jadi putih */
}
.feature-title, .icon-feature-box h4 {
    font-size: 1.2rem; /* Dikecilkan sedikit */
    font-family: var(--heading-font);
    color: var(--dark-color); /* Judul fitur hitam/abu gelap */
    margin-bottom: 0.75rem;
}
.feature-item p, .icon-feature-box p {
    font-size: 0.9rem;
    flex-grow: 1;
    color: var(--text-color);
}


/* Service Card (Beranda > Layanan Unggulan Teaser, Layanan > Detail Layanan) */
.service-card, .project-card {
    background-color: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-light);
    overflow: hidden;
    transition: transform var(--transition-speed-slow) ease, box-shadow var(--transition-speed-slow) ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.service-card:hover, .project-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--box-shadow-medium);
}
.service-card-image img, .project-card .card-img-top {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-bottom: 3px solid var(--primary-color); /* Border bawah gambar merah */
}
.service-card-content, .project-card .card-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.service-title, .project-card .card-title {
    font-size: 1.4rem;
    font-family: var(--heading-font);
    color: var(--dark-color);
    margin-bottom: 0.75rem;
}
.service-card-content p, .project-card .card-text {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    flex-grow: 1;
    color: var(--text-color);
}
.service-card-content .btn-link, .project-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* Testimonial Item (Beranda) */
.testimonial-item { margin-bottom: 2rem; text-align: center; }
.testimonial-bubble {
    background-color: var(--light-color);
    padding: 1.8rem;
    border-radius: var(--border-radius-lg);
    position: relative;
    margin-bottom: 1.5rem;
    box-shadow: var(--box-shadow-light);
    border-left: 5px solid var(--primary-color);
}
.testimonial-bubble::after {
    content: ''; position: absolute; bottom: -10px; left: 30px;
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid var(--light-color);
}
.testimonial-bubble p { font-style: italic; font-size: 0.95rem; line-height: 1.6; color: var(--text-color); }
.testimonial-author { display: flex; align-items: center; justify-content: center; }
.author-img {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
    margin-right: 1rem; border: 3px solid var(--white-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.testimonial-author p { line-height: 1.3; text-align: left; margin-bottom: 0; }
.testimonial-author strong { display: block; color: var(--dark-color); font-size: 1rem; }
.testimonial-author small { font-size: 0.85rem; color: var(--text-color); }

/* Partner Logos (Beranda, Tentang Kami, Layanan) */
.partner-logos-container, .partner-logos-slider {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 2.5rem;
}
.partner-logo {
    max-height: 55px;
    max-width: 140px;
}
.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}
.partner-section-title { font-weight: 600; color: var(--text-color); }

/* CTA Banner (Beranda, Layanan) */
#cta-banner {
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: var(--white-color);
}
.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--primary-color-rgb), 0.8); /* Overlay merah transparan lebih tebal */
    z-index: 1;
}
#cta-banner .container { position: relative; z-index: 2; }
.cta-title { color: var(--white-color); font-weight: 900; }
.cta-subtitle { color: rgba(255,255,255,0.9); max-width: 700px; margin-left: auto; margin-right: auto;}
.cta-btn { margin-top: 0.5rem; margin-bottom: 0.5rem; }
/* Tombol di CTA banner (jika ingin spesifik) */
#cta-banner .btn-light { /* Tombol putih di atas overlay merah */
    background-color: var(--white-color);
    color: var(--primary-color); /* Teks merah */
    border-color: var(--white-color);
}
#cta-banner .btn-light:hover {
    background-color: var(--light-color); /* Latar abu muda saat hover */
    color: var(--primary-color);
    border-color: var(--light-color);
}
#cta-banner .btn-outline-light { /* Tombol outline putih */
    /* Sudah diatur global */
}


/* Vision-Mission Card (Tentang Kami) */
.vision-mission-card {
    background-color: var(--white-color);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-medium);
    height: 100%;
    text-align: center;
    border-top: 4px solid var(--primary-color); /* Aksen atas merah */
}
.vision-mission-card .icon-box {
    width: 70px; height: 70px;
    background-color: rgba(var(--primary-color-rgb), 0.1); /* Latar ikon merah muda */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem auto;
}
.vm-icon { width: 35px; height: 35px; }
.vm-title { font-size: 1.8rem; color: var(--primary-color); margin-bottom: 1rem; } /* Judul V/M merah */

/* Value Item (Tentang Kami) */
.value-item { margin-bottom: 2rem; text-align: center; }
.value-icon-bg {
    width: 90px; height: 90px;
    margin: 0 auto 1.5rem auto;
    background-color: var(--white-color);
    border: 2px solid var(--light-color);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-speed) ease;
}
.value-icon { width: 45px; height: 45px; }
.value-item:hover .value-icon-bg {
    border-color: var(--primary-color); /* Border ikon merah saat hover */
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.2);
}
.value-title { font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--dark-color); } /* Judul nilai hitam/abu gelap */

/* Award Card (Tentang Kami) */
.award-card {
    background-color: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-light);
    overflow: hidden;
    text-align: center;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.award-card:hover { transform: translateY(-8px); box-shadow: var(--box-shadow-medium); }
.award-image {
    width: 100%;
    height: 280px;
    object-fit: contain;
    padding: 1.5rem;
    background-color: #fdfdfd;
    flex-shrink: 0;
}
.award-caption {
    padding: 1rem 1.5rem;
    background-color: var(--light-color); /* Latar caption abu muda */
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}
.award-caption h5 { font-size: 1rem; color: var(--dark-color); margin: 0; font-weight: 600; }

/* CTA Sederhana (di akhir halaman Tentang Kami, Layanan) */
.cta-simple { background-color: var(--white-color); }
.cta-simple .title-lg { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--dark-color); }
#about-cta.bg-dark .title-lg, #about-cta.bg-dark .lead { color: var(--white-color) !important; } /* Pastikan teks putih di CTA gelap */
#about-cta.bg-dark .text-white-75 { color: rgba(255,255,255,0.75) !important; }


/* Process Timeline (Layanan) */
.process-timeline { position: relative; max-width: 850px; margin: 0 auto; }
.process-timeline::after {
    content: ''; position: absolute; width: 4px;
    background-color: rgba(var(--primary-color-rgb), 0.2); /* Garis timeline merah muda */
    top: 0; bottom: 0; left: 50%; margin-left: -2px;
}
.timeline-item {
    padding: 15px 40px; position: relative;
    background-color: inherit; width: 50%; margin-bottom: 25px;
}
.timeline-item.alt { left: 50%; }
.timeline-item .timeline-icon {
    position: absolute; width: 45px; height: 45px; right: -22px;
    background-color: var(--white-color); border: 3px solid var(--primary-color); /* Border ikon merah */
    top: 20px; border-radius: 50%; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem; color: var(--primary-color); /* Teks ikon merah */
    box-shadow: 0 0 0 4px var(--white-color);
}
.timeline-item.alt .timeline-icon { left: -22px; }
.timeline-content {
    padding: 20px 25px; background-color: var(--white-color);
    position: relative; border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-light);
    border-left: 4px solid var(--secondary-color); /* Aksen kiri merah muda */
}
.timeline-item.alt .timeline-content { border-left: none; border-right: 4px solid var(--secondary-color); }
.timeline-content h5 { font-size: 1.2rem; color: var(--primary-color); margin-bottom: 0.5rem; } /* Judul langkah merah */

/* Portfolio Filter Buttons */
#portfolio-filter .filter-title { color: var(--dark-color); font-weight: 600; }
#filter-buttons .filter-btn {
    margin: 0.4rem 0.3rem;
    border-radius: 25px;
    padding: 0.6rem 1.3rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition-speed-fast) ease;
    border-width: 2px;
}
#filter-buttons .filter-btn.active,
#filter-buttons .filter-btn:hover {
    background-color: var(--primary-color); /* Tombol filter aktif/hover merah */
    color: var(--white-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}
#filter-buttons .filter-btn:not(.active) {
    border-color: var(--primary-color); /* Tombol filter non-aktif outline merah */
    color: var(--primary-color);
    background-color: var(--white-color);
}
#filter-buttons .filter-btn:not(.active):hover {
     background-color: rgba(var(--primary-color-rgb), 0.05); /* Latar merah sangat muda saat hover */
}

/* Portfolio Item Card (Galeri) */
.portfolio-item {
    margin-bottom: 2rem;
    transition: opacity var(--transition-speed-slow) ease, transform var(--transition-speed-slow) ease;
}
.portfolio-item.hide-item-filter {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    /* display: none; // JS akan menangani display jika perlu */
}
.project-card-gallery {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow-light);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    display: block;
}
.project-card-gallery:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--box-shadow-medium);
}
.project-image-wrapper { position: relative; overflow: hidden; }
.project-gallery-image {
    display: block; width: 100%; height: 260px;
    object-fit: cover;
    transition: transform var(--transition-speed-slow) ease;
}
.project-card-gallery:hover .project-gallery-image { transform: scale(1.12); }
.project-overlay-gallery {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(var(--dark-color-rgb), 0.95) 0%, rgba(var(--dark-color-rgb), 0.2) 70%, transparent 100%); /* Overlay hitam/abu gelap */
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.5rem; color: var(--white-color);
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}
.project-card-gallery:hover .project-overlay-gallery { opacity: 1; }
.project-overlay-content .view-icon {
    position: absolute; top: 20px; right: 20px; font-size: 1.6rem;
    color: var(--white-color); opacity: 0.8;
    transform: scale(0); transition: transform var(--transition-speed) ease 0.1s;
}
.project-card-gallery:hover .view-icon { transform: scale(1); }
.project-title-gallery {
    font-size: 1.3rem; font-weight: 700; color: var(--white-color);
    margin-bottom: 0.25rem; transform: translateY(20px); opacity: 0;
    transition: transform var(--transition-speed) ease 0.1s, opacity var(--transition-speed) ease 0.1s;
}
.project-category-gallery {
    font-size: 0.8rem; color: rgba(255,255,255,0.85);
    text-transform: uppercase; letter-spacing: 0.5px;
    transform: translateY(20px); opacity: 0;
    transition: transform var(--transition-speed) ease 0.2s, opacity var(--transition-speed) ease 0.2s;
}
.project-card-gallery:hover .project-title-gallery,
.project-card-gallery:hover .project-category-gallery {
    transform: translateY(0); opacity: 1;
}

/* Project Modal (Bootstrap-dependent, jika pakai) */
.project-modal .modal-content { border-radius: var(--border-radius); border: none; }
.project-modal .modal-header {
    background-color: var(--primary-color); /* Header modal merah */
    color: var(--white-color);
    border-bottom: none;
    padding: 1rem 1.5rem;
}
.project-modal .modal-header .modal-title { font-size: 1.5rem; font-weight: 600; }
.project-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.modal-project-image {
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--border-radius-sm);
    margin-left: auto; margin-right: auto;
}
.project-detail-subtitle {
    font-weight: 700; color: var(--primary-color); /* Subjudul detail merah */
    margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 1.15rem;
    border-bottom: 2px solid var(--light-color); padding-bottom: 0.3rem;
}
.project-modal .modal-footer { border-top: 1px solid var(--border-color); }

/* Contact Info Block (Kontak) */
.contact-info-block {}
.contact-item {
    display: flex; align-items: flex-start;
    margin-bottom: 1.8rem; padding: 1.2rem;
    background-color: var(--white-color); /* Latar putih untuk kontras */
    border-radius: var(--border-radius);
    transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease, border-left-color var(--transition-speed) ease;
    border-left: 4px solid transparent;
    box-shadow: var(--box-shadow-light); /* Shadow ringan default */
}
.contact-item:hover {
    box-shadow: var(--box-shadow-medium);
    transform: translateX(5px);
    border-left-color: var(--primary-color); /* Border kiri merah saat hover */
}
.contact-icon {
    flex-shrink: 0; width: 50px; height: 50px; margin-right: 1.2rem;
    background-color: rgba(var(--primary-color-rgb), 0.1); /* Latar ikon merah muda */
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.contact-icon img { width: 24px; height: 24px; opacity: 0.9; }
.contact-text h5 { font-size: 1.1rem; color: var(--primary-color); margin-bottom: 0.3rem; } /* Judul kontak merah */
.contact-text p { margin-bottom: 0.25rem; font-size: 0.95rem; color: var(--text-color); }
.contact-text p a { color: var(--text-color); text-decoration: none; }
.contact-text p a:hover { color: var(--primary-color); text-decoration: underline; }

/* Accordion (Kontak > FAQ - Bootstrap-dependent) */
.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-bottom: 1rem;
    overflow: hidden;
    background-color: var(--white-color);
}
.accordion-item:first-of-type { border-top-left-radius: var(--border-radius-sm); border-top-right-radius: var(--border-radius-sm); }
.accordion-item:last-of-type { border-bottom-left-radius: var(--border-radius-sm); border-bottom-right-radius: var(--border-radius-sm); margin-bottom: 0; }

.accordion-header { }
.accordion-button {
    font-weight: 600; font-size: 1.05rem;
    color: var(--dark-color);
    background-color: var(--white-color);
    border: none;
    box-shadow: none !important;
    padding: 1.2rem 1.5rem;
    text-align: left;
    width: 100%;
    position: relative;
    transition: background-color var(--transition-speed-fast) ease, color var(--transition-speed-fast) ease;
}
.accordion-button:not(.collapsed) {
    color: var(--primary-color); /* Teks tombol aktif merah */
    background-color: rgba(var(--primary-color-rgb), 0.05); /* Latar merah sangat muda */
}
/* Styling ikon panah accordion Bootstrap (jika menggunakan Bootstrap) */
.accordion-button::after {
    flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-left: auto; content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231A1A1A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /* Ikon panah hitam */
    background-repeat: no-repeat; background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23CC0000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /* Ikon panah merah saat aktif */
    transform: rotate(-180deg);
}
.accordion-button:focus {
    z-index: 3; border-color: transparent; outline: 0; box-shadow: none;
}
.accordion-body {
    padding: 1.5rem;
    background-color: var(--white-color);
    border-top: 1px solid var(--border-color);
    font-size: 0.95rem;
    color: var(--text-color);
}

/* Peta Lokasi (Kontak) */
#location-map iframe {
    filter: grayscale(30%) contrast(1); /* Sedikit desaturasi pada peta */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}


/* -------------------------------------------------------------------------- */
/* 9. ANIMATIONS (Animate On Scroll, Hover Effects, etc.)                     */
/* -------------------------------------------------------------------------- */
.animate-on-scroll {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.7s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.animate-on-scroll.is-visible { opacity: 1; }

.animate-on-scroll.fade-in-up { transform: translateY(50px); }
.animate-on-scroll.fade-in-up.is-visible { transform: translateY(0); }

.animate-on-scroll.fade-in-left { transform: translateX(-50px); }
.animate-on-scroll.fade-in-left.is-visible { transform: translateX(0); }

.animate-on-scroll.fade-in-right { transform: translateX(50px); }
.animate-on-scroll.fade-in-right.is-visible { transform: translateX(0); }

.animate-on-scroll.scale-up { transform: scale(0.9); }
.animate-on-scroll.scale-up.is-visible { transform: scale(1); }

.animate-on-scroll.fade-in { }


/* -------------------------------------------------------------------------- */
/* 10. BACK TO TOP BUTTON                                                     */
/* -------------------------------------------------------------------------- */
#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 999;
    border: none;
    outline: none;
    background-color: var(--primary-color); /* Tombol back to top merah */
    color: var(--white-color);
    cursor: pointer;
    padding: 10px 13px;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    opacity: 0;
    transition: opacity var(--transition-speed) ease,
                visibility var(--transition-speed) ease,
                transform var(--transition-speed) ease,
                background-color var(--transition-speed) ease;
    visibility: hidden;
    transform: translateY(30px) scale(0.9);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
#backToTopBtn.show {
    display: block;
    opacity: 0.85;
    visibility: visible;
    transform: translateY(0) scale(1);
}
#backToTopBtn:hover {
    opacity: 1;
    background-color: var(--secondary-color); /* Hover merah muda */
    transform: scale(1.1);
}


/* -------------------------------------------------------------------------- */
/* 11. RESPONSIVE MEDIA QUERIES                                               */
/* -------------------------------------------------------------------------- */

/* Tablet (max-width: 991.98px) - Navigasi mobile sudah dihandle di atas */
@media (max-width: 991.98px) {
    html { font-size: 15px; }
    .container { width: 92%; }

    main { padding-top: var(--header-height-scrolled); }

    h1, .title-xl { font-size: 2.5rem; }
    h2, .title-lg { font-size: 2rem; }
    h3, .title-md { font-size: 1.6rem; }

    .py-6 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .py-5 { padding-top: 3.5rem; padding-bottom: 3.5rem; }

    .hero-section { margin-top: calc(var(--header-height-scrolled) * -1); }
    .hero-title { font-size: 2.6rem; }
    .hero-subtitle, .hero-tagline, .hero-experience { font-size: 1.15rem; }

    .section-header { margin-bottom: 2rem; }

    .order-lg-1, .order-lg-2 { order: initial; }

    .process-timeline::after { left: 30px; margin-left: -2px; }
    .timeline-item, .timeline-item.alt {
        width: 100%;
        padding-left: 80px;
        padding-right: 15px;
        left: 0 !important;
    }
    .timeline-item .timeline-icon, .timeline-item.alt .timeline-icon {
        left: 10px;
    }
}

/* Mobile (max-width: 767.98px) */
@media (max-width: 767.98px) {
    html { font-size: 14px; }
    .container { width: 95%; }

    h1, .title-xl { font-size: 2rem; }
    h2, .title-lg { font-size: 1.8rem; }
    h3, .title-md { font-size: 1.5rem; }
    h4, .title-sm { font-size: 1.2rem; }

    .py-6 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .py-5 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

    .hero-section { min-height: 550px; }
    .hero-title { font-size: 2.2rem; }
    .hero-cta-buttons { display: flex; flex-direction: column; align-items: center;}
    .hero-cta-buttons .hero-btn { width: 80%; margin-bottom: 1rem; min-width: auto; }

    .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1.8rem;
    }
    .row > [class*="col-"]:last-child { margin-bottom: 0; }

    .feature-item, .icon-feature-box { padding: 1.2rem; }
    .vision-mission-card { padding: 2rem 1.5rem; }
    .award-image { height: 240px; }
    .timeline-content { padding: 15px 20px; }
    .contact-item { flex-direction: column; align-items: center; text-align: center; }
    .contact-icon { margin-right: 0; margin-bottom: 0.75rem; }
    #contactForm .row > .col-md-6 { margin-bottom: 1rem; }
    .modal-project-image { max-height: 60vh; }
    .partner-logos-container { gap: 1.5rem; }
    .partner-logo { max-height: 45px; max-width: 110px; }

    #main-footer .footer-content { flex-direction: column; text-align: center; gap: 1.5rem; }
    #main-footer .footer-column h5::after { left: 50%; transform: translateX(-50%); }
    #main-footer .footer-social-icons { text-align: center; }
}

/* Mobile Kecil (max-width: 575.98px) */
@media (max-width: 575.98px) {
    .hero-title { font-size: 1.8rem; }
    .banner-content h1 { font-size: 2.2rem; }
    .banner-content p { font-size: 1rem; }

    #filter-buttons .filter-btn {
        display: block;
        width: 100%;
        margin-left: 0; margin-right: 0;
    }
    #filter-buttons .filter-btn + .filter-btn { margin-top: 0.5rem; }

    #backToTopBtn { bottom: 20px; right: 20px; padding: 8px 11px; font-size: 1rem; }
}
/* assets/css/style.css */

/* Pastikan variabel warna ini sudah terdefinisi di :root dalam style.css Anda */
/*
:root {
    --primary-color: #CC0000;
    --secondary-color: #FF5252;
    --dark-color: #1A1A1A;
    --light-color: #f4f4f4;
    --white-color: #ffffff;
    --text-color: #212121;
    --border-color: #dddddd;
    --border-radius-sm: 4px;
    --box-shadow-light: 0 5px 15px rgba(0, 0, 0, 0.07);
    --box-shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s;
}
*/

/* Styling untuk Section Daftar Klien di daftar-klien.php */
#clients-list-section .section-header .subtitle {
    color: var(--primary-color); /* Subtitle "Mitra Berharga" berwarna merah */
}

#clients-list-section .section-header .title-md {
    color: var(--dark-color); /* Judul "Klien yang Telah Mempercayai Kami" berwarna hitam/abu gelap */
}

.client-logos-grid {
    /* Menggunakan class .row dari utility, jadi tidak perlu style khusus di sini,
       kecuali jika ingin override atau penyesuaian gap.
       Contoh: gap: 1.5rem; (jika .row tidak menggunakan flex-gap) */
}

.client-logo-item {
    display: flex;
    justify-content: center; /* Logo di tengah kolom */
    align-items: center;
    margin-bottom: 2rem; /* Spasi antar baris item klien */
}

.client-logo-wrapper {
    padding: 20px; /* Padding lebih besar di sekitar logo/nama */
    border: 1px solid var(--border-color); /* Border abu-abu muda */
    border-radius: var(--border-radius-sm); /* Radius border kecil */
    background-color: var(--white-color); /* Latar belakang putih */
    height: 130px; /* Tinggi tetap untuk konsistensi, bisa disesuaikan */
    width: 100%;   /* Lebar penuh sesuai kolomnya (misal col-lg-2) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
    overflow: hidden; /* Mencegah konten keluar jika terlalu besar */
}

.client-logo-wrapper:hover {
    box-shadow: var(--box-shadow-medium); /* Shadow saat hover */
    transform: translateY(-5px); /* Efek sedikit terangkat */
    border-color: var(--primary-color); /* Border merah saat hover */
}

.client-logo-img {
    max-height: 70px; /* Tinggi maksimal logo klien */
    max-width: 90%;   /* Lebar maksimal logo, agar tidak terlalu mepet */
    object-fit: contain; /* Agar logo tidak terdistorsi dan tetap utuh */
    margin-bottom: 10px; /* Spasi jika ada nama klien di bawah logo */
    transition: transform 0.3s ease;
}

.client-logo-wrapper:hover .client-logo-img {
    transform: scale(1.05); /* Sedikit zoom pada logo saat wrapper dihover */
}

.client-name-only { /* Jika hanya menampilkan nama klien (tanpa logo) */
    font-weight: 600;
    color: var(--dark-color); /* Nama klien hitam/abu gelap */
    font-size: 0.95em;
    padding: 10px 5px; /* Padding agar tidak terlalu mepet */
}
.client-name-only a {
    color: var(--dark-color);
    text-decoration: none;
}
.client-name-only a:hover {
    color: var(--primary-color); /* Link nama klien hover merah */
    text-decoration: underline;
}

.client-name-tooltip { /* Styling untuk nama klien di bawah logo */
    font-size: 0.85em;
    color: var(--text-color); /* Teks nama klien abu-abu gelap */
    margin-top: 8px;
    margin-bottom: 0;
    line-height: 1.3;
    font-weight: 500;
    /* Untuk tooltip yang muncul saat hover, perlu JS atau CSS :hover kompleks pada parent */
}

/* Styling untuk CTA di halaman klien */
#clients-cta {
    /* Menggunakan class .cta-simple dan .bg-light-gray dari utility */
}
#clients-cta .title-lg {
    color: var(--dark-color); /* Judul CTA hitam/abu gelap */
}
#clients-cta .btn-primary {
    /* Menggunakan style .btn-primary global (tombol merah) */
}

/* Penyesuaian untuk Page Banner di daftar-klien.php jika diperlukan */
/* Misalnya, jika ingin overlay banner klien berbeda */
/*
#daftar-klien-page .page-banner .banner-overlay {
    background-color: rgba(var(--primary-color-rgb), 0.7); // Contoh overlay merah transparan
}
*/

/* Responsivitas untuk daftar klien */
@media (max-width: 767.98px) {
    .client-logo-wrapper {
        height: 110px; /* Tinggi wrapper sedikit dikurangi di mobile */
        padding: 15px;
    }
    .client-logo-img {
        max-height: 60px; /* Logo lebih kecil di mobile */
    }
    .client-name-tooltip {
        font-size: 0.8em;
    }
}

@media (max-width: 575.98px) {
    .client-logo-wrapper {
        height: 100px; /* Tinggi wrapper lebih kecil lagi */
    }
    .client-logo-img {
        max-height: 50px;
    }
}