:root {
    /* Warna Utama */
    --navy-dark: #050c1a;
    --navy-light: #0a192f;
    --gold: #bf953f;
    --gold-light: #fcf6ba;
    --white: #ffffff;
    --slate: #8892b0;

    /* Definisi Font */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
    --font-accent: 'Great Vibes', cursive;

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        scroll-behavior: smooth;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        scroll-behavior: smooth;
        font-style: normal !important;
        /* Pindahkan ke sini saja */
    }

    body {
        font-family: var(--font-body);
        background-color: var(--navy-dark);
        color: var(--white);
        line-height: 1.6;
        overflow-x: hidden;
        /* MENGUNCI LAYAR HP AGAR TIDAK GOYANG */
        width: 100%;
    }

}

.script-font {

    font-family: var(--font-accent);

    color: var(--gold);

    font-size: 2rem;

    text-transform: none;

    /* Biar tidak huruf besar semua */

    letter-spacing: 0;

}



h1,
h2,
h3 {
    font-family: var(--font-heading);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--white);
}

/* Font Sambung (Manten & Irama) */
.script-font,
.logo span,
.preloader-logo {
    font-family: var(--font-accent) !important;
    text-transform: none !important;
    color: var(--gold);
    /* Efek Gradasi Emas */
    background: linear-gradient(45deg, var(--gold), var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    padding-right: 15px;
    /* Agar huruf N tidak kepotong */
}

a {

    text-decoration: none;

    color: inherit;

    transition: 0.3s;

}



ul {

    list-style: none;

}



.container {

    max-width: 1100px;

    margin: 0 auto;

    padding: 0 20px;

}



/* NAVBAR */

.navbar {
    background-color: rgba(10, 25, 47, 0.95);
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* GANTI sticky MENJADI fixed */
    position: fixed;
    top: 0;
    left: 0;
    /* Tambahkan ini */
    width: 100%;
    /* Tambahkan ini agar lebar penuh */

    z-index: 1000 !important;
    /* Tambahkan !important agar tidak ditimpa kode lain */
    border-bottom: 1px solid var(--navy-light);
    box-shadow: 0 10px 30px -10px rgba(2, 12, 27, 0.7);
}


.nav-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

}



.logo {

    font-size: 1.8rem;

    font-weight: 700;

    letter-spacing: 1px;

}



.logo span {

    background: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    font-weight: bold;

}



.nav-links {

    display: flex;

    gap: 30px;

    align-items: center;

}



.nav-links a {

    color: var(--white);

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.nav-links a:hover {

    color: var(--gold);

}



.btn-gold {

    background: linear-gradient(45deg, #a67c00, #ffdc73, #a67c00);

    background-size: 200% auto;

    color: #020c1b !important;

    font-weight: bold !important;

    border: none;

    transition: 0.5s;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    padding: 12px 30px;

    border-radius: 4px;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.btn-gold:hover {

    background-position: right center;

    transform: translateY(-3px) scale(1.05);

    filter: brightness(1.1);

}



.btn-nav {

    background: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728);

    color: #020c1b !important;

    font-weight: bold !important;

    text-transform: uppercase;

    padding: 10px 20px;

    border-radius: 5px;

    text-decoration: none;

}



.menu-toggle {

    display: none;

    color: var(--gold);

    font-size: 1.5rem;

    cursor: pointer;

}



/* HERO SECTION */
.hero {
    height: 100vh;
    background: url('cue-card.png') no-repeat center center/cover;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;

    /* Gunakan yang 80px saja agar konten turun di bawah navbar fixed */
    margin-top: 80px;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 25, 47, 0.7);
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
    padding: 20px;
    padding-top: 100px;
    will-change: transform;
}



.hero-content h2 {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    color: #fcf6ba;
    line-height: 1.1;
    margin-bottom: 10px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.hero-content h2 span {
    display: block;
    font-size: 1.4rem;
    margin-top: 15px;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-weight: 300;
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fcf6ba, #aa771c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(191, 149, 63, 0.5));
}

.hero-subtitle {
    font-family: var(--font-accent);
    color: var(--gold);
    font-size: 2.2rem;
    margin-bottom: -10px;
    display: block;
}

.hero-content p {
    font-size: 1.2rem;
    color: var(--slate);
    margin-bottom: 30px;
}

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

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    position: relative;
    color: var(--white);
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--gold);
    margin: 10px auto 0;
}



/* ABOUT */

.about-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;

    text-align: center;

}



.about-card {

    background: var(--navy-light);

    padding: 30px;

    border-radius: 8px;

    transition: transform 0.3s;

}



.about-card:hover {

    transform: translateY(-10px);

}



.about-card i {

    font-size: 2.5rem;

    color: var(--gold);

    margin-bottom: 20px;

}



/* SERVICES */
.services {
    position: relative;
    /* Wajib ada */
    z-index: 5;
    /* Di bawah navbar (1000) tapi di atas background */
}

.bg-dark {

    background: linear-gradient(180deg, #020c1b 0%, #0a192f 100%);

}

.service-item {
    background: rgba(10, 25, 47, 0.5);
    border: 1px solid rgba(191, 149, 63, 0.3);
    padding: 30px;
    text-align: center;
    height: auto !important;
    /* Biar kotak memanjang sesuai teks */
    transition: 0.3s;
}

.service-item:hover {

    border-color: var(--gold);

    transform: translateY(-10px);

    background: rgba(17, 34, 64, 0.6);

    box-shadow: 0 10px 30px rgba(191, 149, 63, 0.3);

    cursor: pointer;

}



.service-item i {

    font-size: 2rem;

    color: var(--gold);

    margin-bottom: 15px;

    display: block;

    animation: floating 3s ease-in-out infinite;

}



/* GALLERY */

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 15px;

}



.gallery-grid img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    border-radius: 8px;

    filter: grayscale(20%);

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    cursor: pointer;

    border: 1px solid rgba(191, 149, 63, 0.3);

    padding: 5px;

    background-color: var(--navy-light);

}



.gallery-grid img:hover {

    transform: scale(1.05);

    filter: grayscale(0%);

    box-shadow: 0 10px 25px rgba(191, 149, 63, 0.4);

    z-index: 10;

}



/* TESTIMONI */

.testimonial-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

}



.testimonial-item {

    background: rgba(17, 34, 64, 0.4);

    backdrop-filter: blur(5px);

    padding: 40px;

    border-radius: 15px;

    border: 1px solid rgba(206, 129, 15, 0.3);

    text-align: center;

    transition: 0.3s;

}



.testimonial-item:hover {

    transform: translateY(-5px);

    border-color: var(--gold);

}



.stars {

    color: var(--gold);

    margin-bottom: 15px;

    font-size: 1.2rem;

}



.testimonial-item p {

    font-style: italic;

    color: var(--white);

    margin-bottom: 20px;

}



.testimonial-item h4 {

    color: var(--gold);

    font-family: var(--font-body);

}



/* STYLING SECTION PAKET (Diletakkan di luar media query agar tampil di laptop) */

.packages-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

    margin-top: 50px;

}



.package-card {

    background: #0f223d;

    padding: 40px;

    border-radius: 15px;

    text-align: center;

    border: 1px solid rgba(191, 149, 63, 0.2);

    transition: all 0.3s ease;

    position: relative;

}



.package-card:hover {

    transform: translateY(-10px);

    border-color: #bf953f;

}



.package-card.featured {

    background: #162c4e;

    border: 2px solid #bf953f;

    transform: scale(1.05);

}



.package-card.featured:hover {

    transform: scale(1.05) translateY(-10px);

}



.package-card h3 {

    font-family: 'Playfair Display', serif;

    font-size: 1.8rem;

    color: #fff;

    margin-bottom: 15px;

}



.price {

    font-size: 1.1rem;

    color: #ccc;

    margin-bottom: 30px;

}



.price span {

    display: block;

    font-size: 2rem;

    color: #bf953f;

    font-weight: bold;

    margin-top: 5px;

}



.package-card ul {

    list-style: none;

    padding: 0;

    margin-bottom: 40px;

    text-align: left;

}



.package-card ul li {

    color: #ddd;

    margin-bottom: 15px;

    font-size: 0.95rem;

    display: flex;

    align-items: center;

}



.package-card ul li i {

    color: #bf953f;

    margin-right: 12px;

}



.badge {

    position: absolute;

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(45deg, #bf953f, #fcf6ba, #bf953f);

    color: #000;

    padding: 5px 20px;

    border-radius: 20px;

    font-weight: bold;

    font-size: 0.8rem;

    text-transform: uppercase;

}



.btn-outline {

    display: inline-block;

    padding: 12px 30px;

    border: 1px solid #bf953f;

    color: #bf953f;

    text-decoration: none;

    border-radius: 5px;

    transition: 0.3s;

}



.btn-outline:hover {

    background: #bf953f;

    color: #000;

}



/* FOOTER */

footer {

    background-color: var(--navy-dark);

    padding-top: 60px;

    border-top: 1px solid var(--navy-light);

}



.footer-content {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 40px;

    margin-bottom: 40px;

}



.footer-col h3 {

    font-size: 1.5rem;

    margin-bottom: 20px;

}



.footer-col p {

    margin-bottom: 10px;

    font-size: 0.95rem;

}



.footer-col i {

    color: var(--gold);

    margin-right: 10px;

    width: 20px;

}



.social-links a {

    display: inline-block;

    width: 40px;

    height: 40px;

    background: var(--navy-light);

    color: var(--gold);

    text-align: center;

    line-height: 40px;

    border-radius: 50%;

    margin-right: 10px;

    transition: 0.3s;

}



.footer-bottom {

    text-align: center;

    padding: 20px;

    background-color: #020c1b;

    border-top: 1px solid var(--navy-light);

    font-size: 0.8rem;

}



/* ANIMATIONS */

@keyframes floating {



    0%,

    100% {

        transform: translateY(0px);

    }



    50% {

        transform: translateY(-10px);

    }

}



@keyframes drift-slow {

    0% {

        transform: translateY(0) translateX(0);

        opacity: 0;

    }



    20% {

        opacity: 0.5;

    }



    80% {

        opacity: 0.5;

    }



    100% {

        transform: translateY(-90vh) translateX(30px);

        opacity: 0;

    }

}



/* RESPONSIVE */

@media (max-width: 768px) {

    .nav-links {

        display: none;

        flex-direction: column;

        width: 100%;

        background-color: #020c1b;

        position: absolute;

        top: 80px;

        left: 0;

        padding: 20px 0;

    }



    .nav-links.active {

        display: flex;

    }



    .menu-toggle {

        display: block;

    }



    .hero-content h2 {

        font-size: 2.2rem;

    }

}



@media (max-width: 480px) {

    .hero-content h2 {

        font-size: 1.8rem;

    }



    .package-card.featured {

        transform: scale(1);

    }



    .whatsapp-float span {

        display: none;

    }

}



/* VARIABEL WARNA */

/* ============================================================
1. GLOBAL VARIABLES & RESET
============================================================ 
*/
:root {
    --navy-dark: #050c1a;
    --navy-light: #0a192f;
    --gold: #bf953f;
    --gold-light: #fcf6ba;
    --white: #ffffff;
    --slate: #8892b0;
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
    --font-accent: 'Great Vibes', cursive;
}

/* PERBAIKAN GRADASI EMAS */
.text-gradient {
    /* Gunakan background-image, bukan color */
    background-image: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728) !important;

    /* Paksa teks jadi transparan agar gradasi di belakangnya muncul */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    /* Hapus warna solid yang mungkin mengganggu */
    color: transparent !important;

    display: inline-block;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-style: normal !important;
}

body {
    font-family: var(--font-body);
    background-color: var(--navy-dark);
    color: var(--white);
    overflow-x: hidden;
}

/* ============================================================
   PRELOADER - TETAP GOLD + FONT SAMBUNG (FIXED N)
   ============================================================ */
#preloader {
    position: fixed;
    inset: 0;
    background: #050c1a;
    /* Background Navy Gelap */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    transition: opacity 0.8s ease, visibility 0.8s;
}

#preloader.loader-finish {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    /* Ini kunci agar bagian bawah bisa diklik */
    display: none !important;
    /* Benar-benar menghilangkan elemen dari layout */
}

.preloader-content {
    text-align: center;
    overflow: visible;
    /* Penting agar lekukan huruf tidak terpotong */
}

.preloader-logo {
    font-family: var(--font-accent);
    /* Pakai Great Vibes */
    font-size: 5rem;
    /* Ukuran besar supaya elegan */

    /* WARNA GOLD TETAP ADA (GRADASI) */
    background: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    margin-bottom: 20px;
    padding-right: 30px;
    /* SOLUSI: Ruang extra agar huruf 'N' tidak terpotong */
    padding-left: 10px;
    letter-spacing: 0;
    text-transform: none;
    display: block;
}

.preloader-logo span,
.logo span,
.script-font {
    font-family: var(--font-accent);
    padding-right: 15px;
    /* Memberi ruang agar ujung huruf N tidak terpotong */
    display: inline-block;
    /* Wajib ada agar padding terbaca */
}

.preloader-bar {
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #bf953f, transparent);
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(191, 149, 63, 0.5);
    animation: luxuryBar 2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes luxuryBar {
    to {
        width: 280px;
    }
}

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




/* ============================================================
3. NAVIGATION & HERO (Sesuai Desain Anda)
============================================================ 
*/
.navbar {
    background-color: rgba(5, 12, 26, 0.95);
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(191, 149, 63, 0.3);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--white);
}

.logo span {
    color: var(--gold);
    font-family: var(--font-accent);
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: var(--white);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: 0.3s;
}

.nav-links a:hover {
    color: var(--gold);
}

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('cue-card.png') no-repeat center center/cover;
    background-attachment: fixed;
    position: relative;
    margin-top: -80px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 12, 26, 0.7);
    z-index: 1;
}

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

.hero-content h2 {
    font-size: 4.5rem;
    font-family: var(--font-heading);
    color: var(--gold-light);
    line-height: 1.1;
}

/* ============================================================
4. TOMBOL PANAH (BACK TO TOP)
============================================================ 
*/
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, var(--gold), var(--gold-light));
    color: var(--navy-dark);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

#backToTop:hover {
    transform: translateY(-5px);
}

/* ============================================================
5. RESPONSIVE
============================================================ 
*/
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .hero-content h2 {
        font-size: 2.5rem;
    }

    .preloader-logo {
        font-size: 2.5rem;
    }

    .preloader-logo span {
        font-size: 3rem;
    }
}



/* HERO SECTION */

.hero {

    height: 100vh;

    background: url('cue-card.png') no-repeat center center/cover;

    background-attachment: fixed;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    margin-top: -80px;

    overflow: hidden;

}



.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(10, 25, 47, 0.7);

    z-index: 1;

}



.hero-content {

    position: relative;

    z-index: 3;

    max-width: 900px;

}



.hero-content h2 {

    font-size: 4rem;

    color: #fcf6ba;

}



.hero-content h2 span {

    display: block;

    font-size: 1.4rem;

    letter-spacing: 8px;

    text-transform: uppercase;

    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



/* SECTION PAKET (INI YANG TADI HILANG DI LAPTOP) */

.packages-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

    margin-top: 50px;

}



.package-card {

    background: #0f223d;

    padding: 40px;

    border-radius: 15px;

    text-align: center;

    border: 1px solid rgba(191, 149, 63, 0.2);

    transition: 0.3s;

    position: relative;

}



.package-card.featured {

    background: #162c4e;

    border: 2px solid #bf953f;

    transform: scale(1.05);

}



.price span {

    display: block;

    font-size: 2rem;

    color: #bf953f;

    font-weight: bold;

}



.package-card ul {

    text-align: left;

    margin: 30px 0;

}



.package-card ul li {

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    color: #ddd;

}



.package-card ul li i {

    color: #bf953f;

    margin-right: 12px;

}



.btn-outline {

    display: inline-block;

    padding: 12px 30px;

    border: 1px solid #bf953f;

    color: #bf953f;

    border-radius: 5px;

}



.badge {

    position: absolute;

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

    background: var(--gold);

    padding: 5px 20px;

    border-radius: 20px;

    color: #000;

    font-weight: bold;

}



/* FLOATING BUTTONS (WA & TOP) */

.btn-top {

    position: fixed;

    bottom: 20px;

    right: 20px;

    background: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728);

    color: #020c1b;

    padding: 15px;

    border-radius: 50%;

    z-index: 1000;

    border: none;

    cursor: pointer;

}



.whatsapp-float {

    position: fixed;

    bottom: 20px;

    left: 20px;

    background-color: #25d366;

    color: #FFF !important;

    padding: 12px 20px;

    border-radius: 50px;

    display: flex;

    align-items: center;

    gap: 10px;

    z-index: 1000;

    animation: whatsapp-pulse 2s infinite;

}



@keyframes whatsapp-pulse {

    0% {

        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);

    }



    70% {

        box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);

    }



    100% {

        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);

    }

}



/* GOLD DUST PARTICLES */

.gold-dust {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: 2;

    pointer-events: none;

}



.particle {

    position: absolute;

    width: 3px;

    height: 3px;

    background: #fcf6ba;

    border-radius: 50%;

    opacity: 0;

    animation: drift-slow 20s infinite ease-in-out;

}



@keyframes drift-slow {

    0% {

        transform: translateY(0) translateX(0);

        opacity: 0;

    }



    50% {

        opacity: 0.5;

    }



    100% {

        transform: translateY(-90vh) translateX(30px);

        opacity: 0;

    }

}



/* Masukkan posisi particle nth-child(1) sampai (10) di sini sesuai kode awal kamu */

.particle:nth-child(1) {

    left: 15%;

    top: 95%;

    animation-delay: 0s;

}



.particle:nth-child(2) {

    left: 35%;

    top: 85%;

    animation-delay: 4s;

}



.particle:nth-child(3) {

    left: 55%;

    top: 90%;

    animation-delay: 8s;

}



.particle:nth-child(4) {

    left: 75%;

    top: 80%;

    animation-delay: 2s;

}



.particle:nth-child(5) {

    left: 90%;

    top: 95%;

    animation-delay: 12s;

}



/* RESPONSIVE */

@media (max-width: 768px) {

    .nav-links {

        display: none;

    }



    .hero-content h2 {

        font-size: 2.2rem;

    }

}



@media (max-width: 480px) {

    .whatsapp-float span {

        display: none;

    }



    .hero-content h2 {

        font-size: 1.8rem;

    }



    .package-card.featured {

        transform: scale(1);

    }


    /* --- STYLING PRELOADER (Global) --- */
    /* PRELOADER LUXURY */
    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: radial-gradient(circle at center, var(--navy-light) 0%, var(--navy-dark) 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100000;
        /* Di atas segalanya */
        transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .preloader-content {
        text-align: center;
        position: relative;
    }

    .preloader-logo {
        font-family: var(--font-heading);
        font-size: 3rem;
        color: var(--white);
        letter-spacing: 5px;
        text-transform: uppercase;
        margin-bottom: 20px;
        opacity: 0;
        transform: translateY(30px);
        animation: luxuryFadeIn 1s forwards;
    }

    .preloader-logo span {
        color: var(--gold);
        font-family: var(--font-accent);
        text-transform: capitalize;
        letter-spacing: 0;
        font-size: 3.5rem;
    }

    .preloader-bar {
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--gold), transparent);
        margin: 0 auto;
        box-shadow: 0 0 15px var(--gold);
        animation: luxuryBar 2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    }

    /* Hilang dengan efek smooth */
    .loader-finish {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: scale(1.1);
        /* Efek zoom out saat hilang */
    }

    /* --- ANIMASI PRELOADER MEWAH --- */

    @keyframes luxuryFadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    @keyframes luxuryBar {
        from {
            width: 0;
        }

        to {
            width: 250px;
            /* Lebih lebar lebih elegan */
        }
    }

    /* Terapkan ke elemennya seperti ini */
    .preloader-logo {
        animation: luxuryFadeIn 1s ease-out forwards;
    }

    .preloader-bar {
        animation: luxuryBar 2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    }

    /* NAVBAR */
    .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        padding: 25px 0;
        z-index: 1000;
        transition: all 0.4s ease-in-out;
        background: transparent;
        /* Awalnya transparan */
    }

    .navbar.nav-scrolled {
        padding: 15px 0;
        background: rgba(5, 12, 26, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(191, 149, 63, 0.3);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .logo {
        font-family: var(--font-heading);
        color: var(--white);
        font-size: 1.8rem;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .logo span {
        color: var(--gold);
        font-family: var(--font-accent);
        text-transform: capitalize;
    }

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

    .nav-links a {
        color: var(--white);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .nav-links a:hover {
        color: var(--gold);
    }



    /* Animasi Muncul */

    @keyframes fadeInUp {

        to {

            opacity: 1;

            transform: translateY(0);

        }

    }



    /* Animasi Garis Bawah */

    @keyframes loadBar {

        to {

            width: 100%;

        }

    }



    /* Class untuk menghilangkan preloader (dipicu JS) */

    .loader-finish {

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

    }

    .script-font {

        font-family: var(--font-accent);

        color: var(--gold);

        font-size: 2rem;

        text-transform: none;

        /* Biar tidak huruf besar semua */

        letter-spacing: 0;

    }



    h1 {
        font-family: var(--font-heading);
        font-size: 4rem;
        /* Sangat besar */
        text-transform: uppercase;
        letter-spacing: 5px;
    }


    a {

        text-decoration: none;

        color: inherit;

        transition: 0.3s;

    }



    ul {

        list-style: none;

    }



    .container {

        max-width: 1100px;

        margin: 0 auto;

        padding: 0 20px;

    }



    /* NAVBAR */

    .navbar {

        background-color: rgba(10, 25, 47, 0.95);

        height: 80px;

        display: flex;

        justify-content: center;

        align-items: center;

        position: sticky;

        top: 0;

        z-index: 1000;

        border-bottom: 1px solid var(--navy-light);

        box-shadow: 0 10px 30px -10px rgba(2, 12, 27, 0.7);

    }



    .nav-container {

        display: flex;

        justify-content: space-between;

        align-items: center;

        width: 100%;

    }



    .logo {

        font-size: 1.8rem;

        font-weight: 700;

        letter-spacing: 1px;

    }



    .logo span {

        background: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728);

        -webkit-background-clip: text;

        background-clip: text;

        -webkit-text-fill-color: transparent;

        font-weight: bold;

    }



    .nav-links {

        display: flex;

        gap: 30px;

        align-items: center;

    }



    .nav-links a {

        color: var(--white);

        font-size: 0.9rem;

        text-transform: uppercase;

        letter-spacing: 1px;

    }



    .nav-links a:hover {

        color: var(--gold);

    }



    .btn-gold {

        background: linear-gradient(45deg, #a67c00, #ffdc73, #a67c00);

        background-size: 200% auto;

        color: #020c1b !important;

        font-weight: bold !important;

        border: none;

        transition: 0.5s;

        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

        padding: 12px 30px;

        border-radius: 4px;

        text-transform: uppercase;

        letter-spacing: 1px;

    }



    .btn-gold:hover {

        background-position: right center;

        transform: translateY(-3px) scale(1.05);

        filter: brightness(1.1);

    }



    .btn-nav {

        background: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728);

        color: #020c1b !important;

        font-weight: bold !important;

        text-transform: uppercase;

        padding: 10px 20px;

        border-radius: 5px;

        text-decoration: none;

    }



    .menu-toggle {

        display: none;

        color: var(--gold);

        font-size: 1.5rem;

        cursor: pointer;

    }



    /* HERO SECTION */

    .hero {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--white);
        position: relative;
        overflow: hidden;
        background: url('Foto-Irama.jpg') no-repeat center center/cover;
    }



    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom,
                rgba(5, 12, 26, 0.7),
                rgba(5, 12, 26, 0.4),
                rgba(5, 12, 26, 0.8));
        z-index: 1;
    }



    .hero-content {
        position: relative;
        z-index: 2;
        padding: 0 20px;
    }



    .hero-content h2 {

        font-family: var(--font-heading);

        /* Font mewah baru */

        font-size: 4.5rem;

        /* Sedikit lebih besar karena font ini ramping */

        color: #fcf6ba;

        line-height: 1.1;

        margin-bottom: 10px;

        text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

        /* Pastikan tidak ada properti animasi yang terhapus di sini */

    }





    .hero-content h2 span {

        display: block;

        font-size: 1.4rem;

        margin-top: 15px;

        letter-spacing: 8px;

        text-transform: uppercase;

        font-weight: 300;

        background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fcf6ba, #aa771c);

        -webkit-background-clip: text;

        background-clip: text;

        -webkit-text-fill-color: transparent;

        filter: drop-shadow(0 0 5px rgba(191, 149, 63, 0.5));

    }



    /* Tambahkan ini di bawah .hero-content h2 span untuk aksen romantis */

    .hero-subtitle {
        font-family: var(--font-accent);
        font-size: 2rem;
        color: var(--gold);
        margin-bottom: 10px;
        display: block;
    }



    .hero-content p {

        font-size: 1.2rem;

        color: var(--slate);

        margin-bottom: 30px;

    }



    /* SECTION UTILS */

    .section {

        padding: 80px 0;

    }



    .section-title {

        text-align: center;

        font-size: 2.5rem;

        margin-bottom: 60px;

        position: relative;

        color: var(--white);

    }



    .section-title::after {

        content: '';

        display: block;

        width: 60px;

        height: 3px;

        background: var(--gold);

        margin: 10px auto 0;

    }



    /* ABOUT */

    .about-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

        gap: 30px;

        text-align: center;

    }



    .about-card {

        background: var(--navy-light);

        padding: 30px;

        border-radius: 8px;

        transition: transform 0.3s;

    }



    .about-card:hover {

        transform: translateY(-10px);

    }



    .about-card i {

        font-size: 2.5rem;

        color: var(--gold);

        margin-bottom: 20px;

    }

    .bg-dark {

        background: linear-gradient(180deg, #020c1b 0%, #0a192f 100%);

    }



    /* --- SERVICES GRID (Satu Kode untuk Semua Layar) --- */
    .services-grid {
        display: grid !important;
        /* Default Laptop: 3 Kolom Sejajar */
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 25px;
        padding: 20px 0;
        width: 100%;
    }

    /* --- TABLET (Lebar layar di bawah 992px) --- */
    @media (max-width: 992px) {
        .services-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            /* Jadi 2 kolom */
        }
    }

    /* --- HANDPHONE (Lebar layar di bawah 768px) --- */
    @media (max-width: 768px) {
        .services-grid {
            grid-template-columns: 1fr !important;
            /* Paksa 1 kolom penuh agar tidak terpotong */
            gap: 15px;
        }

        .service-item {
            width: 100% !important;
            /* Memastikan kotak memenuhi lebar layar HP */
            margin: 0 auto;
        }
    }

    /* --- OUR CREW GRID (Sejajar dengan Services) --- */
    .crew-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        /* Laptop 3 kolom */
        gap: 30px;
        width: 100%;
        margin-top: 40px;
    }

    /* Style Nama Crew (Font Mewah & Tidak Alay) */
    .crew-card h3 {
        font-family: var(--font-heading) !important;
        letter-spacing: 5px !important;
        /* Jarak huruf lebar membuat kesan mahal */
        text-transform: uppercase;
        font-size: 1.2rem;
        color: var(--white);
        margin-top: 15px;
    }

    .crew-card p {
        font-family: var(--font-body);
        font-size: 0.8rem;
        letter-spacing: 2px;
        color: var(--gold);
        opacity: 0.9;
    }

    /* --- RESPONSIVE CREW (Tablet & HP) --- */
    @media (max-width: 992px) {
        .crew-grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    @media (max-width: 768px) {
        .crew-grid {
            grid-template-columns: 1fr !important;
            padding: 0 15px;
        }
    }

    .service-item {

        background: rgba(17, 34, 64, 0.4);

        backdrop-filter: blur(5px);

        border: 1px solid rgba(206, 129, 15, 0.2);

        padding: 30px;

        border-radius: 8px;

        text-align: left;

        transition: all 0.3s ease;

    }



    .service-item:hover {

        border-color: var(--gold);

        transform: translateY(-10px);

        background: rgba(17, 34, 64, 0.6);

        box-shadow: 0 10px 30px rgba(191, 149, 63, 0.3);

        cursor: pointer;

    }



    .service-item i {

        font-size: 2rem;

        color: var(--gold);

        margin-bottom: 15px;

        display: block;

        animation: floating 3s ease-in-out infinite;

    }



    /* GALLERY */

    .gallery-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

        gap: 15px;

    }



    .gallery-grid img {

        width: 100%;

        height: 250px;

        object-fit: cover;

        border-radius: 8px;

        filter: grayscale(20%);

        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

        cursor: pointer;

        border: 1px solid rgba(191, 149, 63, 0.3);

        padding: 5px;

        background-color: var(--navy-light);

    }



    .gallery-grid img:hover {

        transform: scale(1.05);

        filter: grayscale(0%);

        box-shadow: 0 10px 25px rgba(191, 149, 63, 0.4);

        z-index: 10;

    }



    /* TESTIMONI */

    .testimonial-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

        gap: 30px;

    }



    .testimonial-item {

        background: rgba(17, 34, 64, 0.4);

        backdrop-filter: blur(5px);

        padding: 40px;

        border-radius: 15px;

        border: 1px solid rgba(206, 129, 15, 0.3);

        text-align: center;

        transition: 0.3s;

    }



    .testimonial-item:hover {

        transform: translateY(-5px);

        border-color: var(--gold);

    }



    .stars {

        color: var(--gold);

        margin-bottom: 15px;

        font-size: 1.2rem;

    }



    .testimonial-item p {

        font-style: italic;

        color: var(--white);

        margin-bottom: 20px;

    }



    .testimonial-item h4 {

        color: var(--gold);

        font-family: var(--font-body);

    }



    /* STYLING SECTION PAKET (Diletakkan di luar media query agar tampil di laptop) */

    .packages-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

        gap: 30px;

        margin-top: 50px;

    }



    .package-card {

        background: #0f223d;

        padding: 40px;

        border-radius: 15px;

        text-align: center;

        border: 1px solid rgba(191, 149, 63, 0.2);

        transition: all 0.3s ease;

        position: relative;

    }



    .package-card:hover {

        transform: translateY(-10px);

        border-color: #bf953f;

    }



    .package-card.featured {

        background: #162c4e;

        border: 2px solid #bf953f;

        transform: scale(1.05);

    }



    .package-card.featured:hover {

        transform: scale(1.05) translateY(-10px);

    }



    .package-card h3 {

        font-family: 'Playfair Display', serif;

        font-size: 1.8rem;

        color: #fff;

        margin-bottom: 15px;

    }



    .price {

        font-size: 1.1rem;

        color: #ccc;

        margin-bottom: 30px;

    }



    .price span {

        display: block;

        font-size: 2rem;

        color: #bf953f;

        font-weight: bold;

        margin-top: 5px;

    }



    .package-card ul {

        list-style: none;

        padding: 0;

        margin-bottom: 40px;

        text-align: left;

    }



    .package-card ul li {

        color: #ddd;

        margin-bottom: 15px;

        font-size: 0.95rem;

        display: flex;

        align-items: center;

    }



    .package-card ul li i {

        color: #bf953f;

        margin-right: 12px;

    }



    .badge {

        position: absolute;

        top: -15px;

        left: 50%;

        transform: translateX(-50%);

        background: linear-gradient(45deg, #bf953f, #fcf6ba, #bf953f);

        color: #000;

        padding: 5px 20px;

        border-radius: 20px;

        font-weight: bold;

        font-size: 0.8rem;

        text-transform: uppercase;

    }



    .btn-outline {

        display: inline-block;

        padding: 12px 30px;

        border: 1px solid #bf953f;

        color: #bf953f;

        text-decoration: none;

        border-radius: 5px;

        transition: 0.3s;

    }



    .btn-outline:hover {

        background: #bf953f;

        color: #000;

    }



    /* FOOTER */

    footer {

        background-color: var(--navy-dark);

        padding-top: 60px;

        border-top: 1px solid var(--navy-light);

    }



    .footer-content {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

        gap: 40px;

        margin-bottom: 40px;

    }



    .footer-col h3 {

        font-size: 1.5rem;

        margin-bottom: 20px;

    }



    .footer-col p {

        margin-bottom: 10px;

        font-size: 0.95rem;

    }



    .footer-col i {

        color: var(--gold);

        margin-right: 10px;

        width: 20px;

    }



    .social-links a {

        display: inline-block;

        width: 40px;

        height: 40px;

        background: var(--navy-light);

        color: var(--gold);

        text-align: center;

        line-height: 40px;

        border-radius: 50%;

        margin-right: 10px;

        transition: 0.3s;

    }



    .footer-bottom {

        text-align: center;

        padding: 20px;

        background-color: #020c1b;

        border-top: 1px solid var(--navy-light);

        font-size: 0.8rem;

    }



    /* ANIMATIONS */

    @keyframes floating {



        0%,

        100% {

            transform: translateY(0px);

        }



        50% {

            transform: translateY(-10px);

        }

    }



    @keyframes drift-slow {

        0% {

            transform: translateY(0) translateX(0);

            opacity: 0;

        }



        20% {

            opacity: 0.5;

        }



        80% {

            opacity: 0.5;

        }



        100% {

            transform: translateY(-90vh) translateX(30px);

            opacity: 0;

        }

    }



    /* RESPONSIVE */

    @media (max-width: 768px) {

        .nav-links {

            display: none;

            flex-direction: column;

            width: 100%;

            background-color: #020c1b;

            position: absolute;

            top: 80px;

            left: 0;

            padding: 20px 0;

        }



        .nav-links.active {

            display: flex;

        }



        .menu-toggle {

            display: block;

        }



        .hero-content h2 {

            font-size: 2.2rem;

        }

    }



    @media (max-width: 480px) {

        .hero-content h2 {

            font-size: 1.8rem;

        }



        .package-card.featured {

            transform: scale(1);

        }



        .whatsapp-float span {

            display: none;

        }

    }



    /* VARIABEL WARNA */

    :root {

        --navy-dark: #020c1b;

        --navy-primary: #0a192f;

        --navy-light: #112240;

        --gold: #ce810f;

        --gold-hover: #b59020;

        --white: #e6f1ff;

        --slate: #8892b0;

        --font-heading: 'Playfair Display', serif;

        --font-body: 'Lato', sans-serif;

    }



    * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

        scroll-behavior: smooth;

        font-style: normal !important;

    }



    body {

        font-family: var(--font-body);

        background-color: var(--navy-primary);

        color: var(--slate);

        line-height: 1.6;

    }



    h1,

    h2,

    h3 {

        font-family: var(--font-heading);

        color: var(--white);

        margin-bottom: 1rem;

    }



    a {

        text-decoration: none;

        color: inherit;

        transition: 0.3s;

    }



    ul {

        list-style: none;

    }



    .container {

        max-width: 1100px;

        margin: 0 auto;

        padding: 0 20px;

    }



    /* NAVBAR */

    .navbar {
        background-color: rgba(10, 25, 47, 0.95);
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 1000;
        border-bottom: 1px solid var(--navy-light);
        box-shadow: 0 10px 30px -10px rgba(2, 12, 27, 0.7);
    }

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

    .logo {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .logo span {
        background: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
    }

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

    .nav-links a {
        color: var(--white);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .nav-links a:hover {
        color: var(--gold);
    }
}

.logo span {
    font-size: 1.8rem;
    background: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- PERBAIKAN AKHIR: FONT IRAMA & MANTEN --- */

/* Ini untuk semua teks yang ingin pakai font sambung */
.script-font,
.preloader-logo,
.logo span {
    font-family: 'Great Vibes', cursive !important;
    text-transform: none !important;
    padding-right: 20px !important;
    /* Anti potong huruf N */
}

/* Khusus Logo di Navbar agar ukurannya manis */
.logo span {
    font-size: 2.5rem !important;
    vertical-align: middle;
}

/* --- MENGEMBALIKAN UKURAN FONT LAYANAN --- */

/* Mengatur Judul Layanan (FOTOGRAFI, KATERING, dll) */
.service-card h3 {
    font-family: var(--font-heading) !important;
    /* Kembali ke font serif yang elegan */
    font-size: 1.2rem !important;
    /* Ukuran lebih kecil agar proporsional */
    letter-spacing: 2px !important;
    margin-bottom: 10px !important;
    text-transform: uppercase;
}

/* Mengatur Deskripsi Layanan di bawah judul */
.service-card p {
    font-family: var(--font-body) !important;
    /* Montserrat */
    font-size: 0.85rem !important;
    /* Ukuran standar deskripsi */
    line-height: 1.6 !important;
    color: var(--slate);
    /* Warna abu-abu agar tidak terlalu mencolok */
}

/* Mengatur Ikon agar tidak terlalu besar */
.service-card i,
.service-card .icon {
    font-size: 1.5rem !important;
    margin-bottom: 15px !important;
    color: var(--gold);
}

/* --- 1. PEMBERSIHAN AREA (ANTI-NABRAK) --- */
.crew-section,
#services {
    padding: 100px 0 !important;
    /* Jarak lega antar section */
    display: block !important;
    overflow: visible !important;
}

/* --- 2. KUNCI KONTAINER TENGAH --- */
.container {
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
}

/* --- 3. PENGATURAN GRID LAPTOP (3 KOLOM SEJAJAR) --- */
@media (min-width: 993px) {

    .services-grid,
    .crew-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 50px 30px !important;
        /* Jarak vertikal 50px, horizontal 30px */
        margin-top: 60px !important;
    }
}

/* --- 4. STYLE KARTU CREW (HD & MEWAH) --- */
.crew-card {
    background: rgba(17, 34, 64, 0.5) !important;
    border: 1px solid rgba(191, 149, 63, 0.2) !important;
    padding: 40px 20px !important;
    border-radius: 20px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.crew-card:hover {
    transform: translateY(-10px) !important;
    border-color: var(--gold) !important;
    background: rgba(17, 34, 64, 0.8) !important;
}

/* Pengaturan Foto agar Tidak Nabrak Teks */
.crew-img {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-bottom: 25px !important;
    /* Jarak ke nama */
    border: 3px solid var(--gold) !important;
}

/* Font Nama (Elegant & Spacing Mewah) */
.crew-card h3 {
    font-family: var(--font-heading) !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    font-size: 1.2rem !important;
    color: var(--white) !important;
    margin-bottom: 10px !important;
}

.crew-card p {
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    letter-spacing: 2px !important;
    color: var(--gold) !important;
    margin: 0 !important;
}

/* --- 5. RESPONSIVE TABLET & HP --- */
@media (max-width: 992px) {

    .services-grid,
    .crew-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        /* Tablet 2 Kolom */
    }
}

@media (max-width: 768px) {

    .services-grid,
    .crew-grid {
        grid-template-columns: 1fr !important;
        /* HP 1 Kolom */
        gap: 30px !important;
    }

    .crew-card {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    /* --- OPTIMASI FOTO CREW AGAR TERLIHAT HD & MEWAH --- */

    .crew-img {
        width: 160px !important;
        height: 160px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        margin-bottom: 25px !important;

        /* 1. MENGUNCI KETAJAMAN (HD MODE) */
        image-rendering: -webkit-optimize-contrast !important;
        /* Rahasia foto tajam di Chrome/Safari */
        image-rendering: crisp-edges !important;

        /* 2. PENYEMPURNAAN WARNA */
        filter: brightness(1.05) contrast(1.1) saturate(1.1);
        /* Membuat warna foto lebih 'keluar' */

        /* 3. BINGKAI EMAS MEWAH */
        border: 3px solid var(--gold) !important;
        outline: 5px solid rgba(191, 149, 63, 0.1);
        /* Outline halus di luar border */

        /* 4. EFEK CAHAYA (GLOW) */
        box-shadow: 0 0 20px rgba(191, 149, 63, 0.4),
            inset 0 0 15px rgba(0, 0, 0, 0.2);

        transition: all 0.5s ease !important;
    }

    /* Efek saat Kursor Menempel */
    .crew-card:hover .crew-img {
        transform: scale(1.05) rotate(2deg);
        /* Sedikit membesar dan miring agar dinamis */
        filter: brightness(1.1) contrast(1.15) saturate(1.2);
        border-color: var(--gold-light) !important;
        box-shadow: 0 0 30px rgba(191, 149, 63, 0.6);
    }

    /* --- PERBAIKAN CARD AGAR TIDAK NABRAK (HD LAYOUT) --- */
    .crew-card {
        background: linear-gradient(145deg, rgba(10, 25, 47, 0.8), rgba(5, 12, 26, 0.9)) !important;
        backdrop-filter: blur(15px);
        /* Efek kaca transparan */
        border-radius: 25px !important;
        padding: 45px 25px !important;
        border: 1px solid rgba(191, 149, 63, 0.2) !important;
        box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
    }

}