/* =========================================
   1. GLOBAL VARIABLES & RESET
   ========================================= */
:root {
    /* --- PALETTE --- */
    --nusa-sunny-yellow: #F4C430;
    --nusa-coral-red:  #E64A3B;
    --nusa-mint-green: #178961;
    --nusa-digital-blue: #2A6FF2;
    
    --nusa-soft-black: #1C1E21;        /* Background Utama */
    --nusa-text-white: #F4F4F4;        /* Teks Putih */
    --nusa-text-grey: #B7B7B7;
    
    /* Gradient Utama */
    --nusa-gradient-border: linear-gradient(to right, 
        var(--nusa-sunny-yellow), 
        var(--nusa-coral-red), 
        var(--nusa-mint-green), 
        var(--nusa-digital-blue)
    );
}

body {
    background-color: var(--nusa-soft-black);
    color: var(--nusa-text-white);
    font-family: 'Inter', sans-serif;
    margin: 0; padding: 0;
}

/* =========================================
   2. NAVBAR STYLES (LIGHT THEME)
   ========================================= */
.navbar-nusa {
    padding: 25px 0;
    transition: all 0.4s ease;
    background-color: transparent; /* Awal transparan */
    border-bottom: 1px solid transparent;
}

/* Keadaan saat discroll (Background Putih) */
.navbar-nusa.scrolled {
    background-color: rgba(255, 255, 255, 0.95); /* Putih + Blur */
    backdrop-filter: blur(10px);
    padding: 15px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Shadow halus */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.navbar-brand img { height: 38px; transition: 0.3s; }

/* Menu Links (Teks Hitam) */
.nav-link-nusa {
    color: var(--nusa-soft-black) !important; /* Warna Hitam */
    margin: 0 15px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.nav-link-nusa:hover, 
.nav-link-nusa.active { 
    color: var(--nusa-coral-red) !important; /* Hover tetap warna coral/gold */
}

/* --- TOMBOL RAINBOW LIGHT THEME --- */
.btn-nusa-rainbow {
    display: inline-block; 
    text-decoration: none !important;
    font-weight: 600;
    
    /* Teks jadi Hitam */
    color: var(--nusa-soft-black); 
    
    padding: 10px 30px;
    border-radius: 50px;
    
    /* TEKNIK BORDER GRADIENT */
    border: 2px solid transparent;
    
    /* Layer 1: Background PUTIH (#FFFFFF) agar isi tombol putih */
    /* Layer 2: Gradient Pelangi */
    background-image: linear-gradient(#FFFFFF, #FFFFFF), 
                      var(--nusa-gradient-border);
    
    background-origin: border-box;
    background-clip: padding-box, border-box;
    
    transition: all 0.3s ease;
}

/* Hover Effect */
.btn-nusa-rainbow:hover {
    color: var(--nusa-digital-blue); /* Opsional: Ubah warna teks saat hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Shadow lebih halus */
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .navbar-collapse {
        /* Menu Mobile jadi Putih */
        background-color: #FFFFFF; 
        padding: 20px;
        border-radius: 16px;
        margin-top: 15px;
        border: 1px solid rgba(0,0,0,0.05);
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    }
    
    .nav-link-nusa {
        margin: 10px 0;
    }

    .btn-nusa-rainbow {
        display: block;
        text-align: center;
        margin-top: 20px;
    }
}

/* =========================================
   3. SECTION PROFILE (LIGHT THEME - FINAL)
   ========================================= */

.section-nusa-profile {
    padding: 100px 0;
    background-color: #FFFFFF;
    /* Pattern titik-titik halus background */
    background-image: radial-gradient(#D1D5DB 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    overflow: hidden;
    position: relative;
}

/* --- Typography --- */
.nusa-profile-title {
    font-size: 3rem;
    font-weight: 800;
    color: #1C1E21;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.text-gradient-purple {
    background: linear-gradient(to right, #667EEA, #764BA2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nusa-headline-big {
    font-size: 2.8rem;
    font-weight: 800;
    color: #1C1E21;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.text-gradient-gold {
    background: linear-gradient(to right, #F59E0B, #EA580C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.profile-subtitle {
    color: #4A4A4A;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

/* --- Buttons (Rainbow Outline Style) --- */
.btn-nusa-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-weight: 600;
    color: #1C1E21;
    text-decoration: none;
    border-radius: 12px;
    background-color: #fff;
    
    /* Trik Border Gradient */
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), 
                      linear-gradient(to right, #E64A3B, #F4C430, #178961, #2A6FF2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.btn-nusa-outline:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    color: #2A6FF2; /* Berubah biru saat hover */
}

.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* --- Images --- */
.nusa-responsive-img {
    width: 100%;
    height: auto;
    max-width: 500px; /* Batasi lebar gambar agar rapi */
    display: block;
    margin: 0 auto;
}

/* --- ANIMASI KHUSUS SECTION INI --- */

/* 1. Definisi Keyframe Floating (Naik Turun) */
@keyframes floatingProfile {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.animate-float {
    animation: floatingProfile 3s ease-in-out infinite;
}

/* 2. Definisi Scroll Reveal (Muncul saat scroll) */
.reveal {
    opacity: 0;
    transform: translateY(50px); /* Posisi awal agak di bawah */
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0); /* Kembali ke posisi normal */
}

/* 3. Delay Helper (Agar muncul berurutan) */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* Responsive Mobile */
@media (max-width: 991px) {
    .section-nusa-profile { padding: 60px 0; }
    .nusa-profile-title, .nusa-headline-big { font-size: 2.2rem; text-align: center; }
    .profile-subtitle { text-align: center; }
    .text-start, .text-lg-end, .text-lg-start { text-align: center !important; }
    .d-flex.gap-3 { justify-content: center; }
    .nusa-responsive-img { margin-top: 30px; margin-bottom: 30px; max-width: 300px; }
}

/* =========================================
   4. CTA SECTION STYLES (LIGHT MODE)
   ========================================= */
.section-cta {
    /* Background diatur via Inline Style di Blade agar konsisten */
    padding: 60px 0 120px 0;
    overflow: hidden; /* Mencegah scrollbar muncul saat animasi */
}

.cta-link-wrapper {
    display: block;
    text-decoration: none;
    position: relative;
    border-radius: 40px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cta-full-banner {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 40px; /* Radius besar sesuai gambar */
    
    /* Shadow lebih soft untuk background putih */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); 
    transition: box-shadow 0.4s ease;
}

/* Efek Interaktif saat di-hover */
.cta-link-wrapper:hover {
    transform: translateY(-5px) scale(1.01); /* Sedikit naik & membesar */
}

.cta-link-wrapper:hover .cta-full-banner {
    /* Shadow berwarna kekuningan/orange tipis agar glowing */
    box-shadow: 0 30px 60px rgba(255, 193, 7, 0.25);
}

/* --- ANIMASI ZOOM IN SAAT SCROLL --- */
.animate-zoom {
    opacity: 0;
    transform: scale(0.92) translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.animate-zoom.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Penyesuaian untuk Mobile (HP) */
@media (max-width: 768px) {
    .section-cta {
        padding: 40px 0 80px 0;
    }
    .cta-full-banner {
        border-radius: 20px;
    }
    .cta-link-wrapper {
        border-radius: 20px;
    }
}

/* =========================================
   5. FOOTER STYLES
   ========================================= */

.site-footer {
    background-color: #000000; /* Hitam Pekat */
    padding-top: 80px;
    padding-bottom: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 10;
    font-family: 'Inter', sans-serif;
}

/* --- Logo Styling --- */
.footer-logo img {
    height: 50px;
    width: auto;
    margin-bottom: 1.5rem;
    transition: transform 0.3s;
}

.footer-logo:hover img {
    transform: scale(1.05);
}

/* --- Headings --- */
.footer-heading {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Links List --- */
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 0.8rem;
}

.footer-link {
    color: #B0B0B0; /* Abu-abu muda */
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-link:hover {
    color: var(--nusa-neon); /* Mengambil warna hijau neon global */
    padding-left: 8px; /* Efek geser kanan */
    text-shadow: 0 0 8px rgba(203, 255, 59, 0.4);
}

/* --- Address & Text --- */
.footer-address {
    color: #B0B0B0;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* --- Social Icons --- */
.footer-social-gap {
    display: flex;
    gap: 12px;
}

.social-btn {
    width: 42px;
    height: 42px;
    background-color: #1A1A1A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.social-btn:hover {
    background-color: var(--nusa-neon);
    color: #000;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(203, 255, 59, 0.3);
    border-color: var(--nusa-neon);
}

/* --- Copyright --- */
.footer-copyright {
    border-top: 1px solid #1A1A1A;
    margin-top: 60px;
    padding-top: 30px;
    color: #666;
    font-size: 0.9rem;
    text-align: center;
}

.footer-copyright strong {
    color: white;
}

/* =========================================
   6. ARTICLES SECTION STYLES (UPDATED WITH ANIMATION)
   ========================================= */

.section-articles {
    /* Background Putih dengan pola Dot */
    background: url('../assets/img/hero-bg.png') repeat center top;
    background-color: #FFFFFF;
    background-size: auto;
    padding: 20px 0 100px 0;
    overflow: hidden; /* Mencegah scrollbar horizontal saat animasi */
}

/* Typography Header */
.article-section-title {
    font-size: 3rem;
    font-weight: 800;
    color: #151515;
    margin-bottom: 1rem;
}

.article-section-title .c-orange { color: #FF8C00; }
.article-section-title .c-blue { color: var(--nusa-digital-blue); }

.article-section-subtitle {
    color: #555555;
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
}

/* --- CARD STYLING --- */
.article-card {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
}

/* Wrapper Gambar & Border Warna */
.article-img-wrapper {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.2rem;
    aspect-ratio: 16/10; 
    background-color: #f0f0f0;
    
    /* Setup Border Atas */
    border-top-width: 5px; 
    border-top-style: solid;
    border-top-color: var(--nusa-digital-blue); 
}

/* Gambar */
.article-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-card:hover .article-img {
    transform: scale(1.08); 
}

/* --- LOGIKA WARNA BORDER (4 Warna) --- */
.border-top-red    { border-top-color: var(--nusa-coral-red) !important; }
.border-top-yellow { border-top-color: var(--nusa-sunny-yellow) !important; }
.border-top-green  { border-top-color: var(--nusa-mint-green) !important; }
.border-top-blue   { border-top-color: var(--nusa-digital-blue) !important; }

/* Content Body */
.article-body {
    padding-right: 10px;
}

/* Tanggal */
.article-date {
    font-size: 0.85rem;
    color: #888888;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Judul Artikel */
.article-title {
    margin-bottom: 0.8rem;
    line-height: 1.35;
    overflow: hidden;
}

.article-title a {
    font-size: 1.0rem;
    font-weight: 800;
    color: var(--nusa-digital-blue); 
    text-decoration: none;
    
    /* LOGIKA PEMBATASAN BARIS */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Maksimal 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Titik-titik (...) */
    
    transition: color 0.3s ease;
}

.article-title a:hover {
    color: #151515; 
}

/* Deskripsi Singkat */
.article-excerpt {
    font-size: 0.95rem;
    color: #4A4A4A; 
    line-height: 1.6;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tombol Baca Selengkapnya */
.article-link-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #151515;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.icon-arrow {
    width: 28px; 
    height: 28px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.article-link-btn:hover {
    color: var(--nusa-digital-blue);
}

.article-link-btn:hover .icon-arrow {
    transform: translateX(5px);
}

/* Responsive */
@media (max-width: 991px) {
    .article-section-title { font-size: 2.2rem; }
    .article-img-wrapper { aspect-ratio: 16/9; }
}

.animate-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-up.show {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   7. CLIENTS SECTION STYLES (LIGHT THEME)
   ========================================= */

.section-clients {
    /* Background Putih dengan pola Dot */
    background: url('../img/bg-hero.png') repeat center top; /* Pastikan path ini benar */
    background-color: #FFFFFF;
    background-size: auto;
    padding: 20px 0 80px 0;
}

/* --- ANIMASI KHUSUS SECTION INI --- */

/* 1. Keyframes Muncul (Entrance Animation) */
@keyframes clientEntry {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Delay Helper (Agar muncul berurutan) */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }


/* Typography Judul - RAINBOW GRADIENT */
.client-section-title {
    font-size: 3rem;
    font-weight: 800;
    color: #151515; /* Hitam Pekat */
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
    display: inline-block; /* Penting agar gradient tidak pecah */
}

/* Subtitle */
.client-section-subtitle {
    color: #666666; /* Abu-abu gelap */
    font-size: 1.1rem;
    margin-bottom: 3.5rem;
    line-height: 1.6;
}

/* Logo Wrapper - Kotak Putih */
.client-logo-wrapper {
    background-color: #FFFFFF;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #EAEAEA; 
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    
    /* Inisialisasi animasi reveal */
    opacity: 0;
    transform: translateY(50px);
}

/* Saat elemen aktif (terlihat di layar) */
.client-logo-wrapper.active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s cubic-bezier(0.5, 0, 0, 1); /* Durasi lebih lama untuk wrapper */
}

/* Gambar Logo */
.client-logo-img {
    max-width: 85%;
    max-height: 55px;
    object-fit: contain;
    filter: grayscale(100%); 
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Hover Effect pada Wrapper */
.client-logo-wrapper:hover {
    border-color: var(--nusa-sunny-yellow); 
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* Hover Effect pada Logo */
.client-logo-wrapper:hover .client-logo-img {
    filter: grayscale(0%); /* Kembali ke warna asli (Full Color) */
    opacity: 1;
    transform: scale(1.05);
}

/* Tombol View More (Outline Rainbow) */
.btn-client-view-more {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    padding: 12px 35px;
    border-radius: 50px; /* Bentuk Pill/Lonjong */
    margin-top: 20px;
    transition: all 0.4s ease;
    
    border: 2px solid transparent;
    background-image: linear-gradient(#FFFFFF, #FFFFFF), var(--nusa-gradient-border);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    
    color: #151515; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.btn-client-view-more:hover {
    color: var(--nusa-digital-blue); 
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .section-clients { padding: 50px 0; }
    .client-logo-wrapper { height: 90px; padding: 10px; }
    .client-section-title { font-size: 1.8rem; }
}

/* =========================================
   8. DOWNLOAD APP SECTION STYLES (LIGHT MODE & ANIMATED)
   ========================================= */
.section-download {
    background-color: #FFFFFF;
    padding-top: 80px;
    padding-bottom: 80px;
    /* Background image dihandle di Blade inline-style */
}

/* Layout Mockup HP */
.mockup-wrapper {
    height: 100%;
    display: flex;
    align-items: center; 
    justify-content: center;
}

.mockup-img {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15));
    transition: transform 0.5s ease;
}

/* Efek hover sedikit pada HP */
.mockup-wrapper:hover .mockup-img {
    transform: translateY(-10px) rotate(-2deg);
}

/* Kolom Kanan */
.content-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    padding-left: 20px;
}

.download-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--nusa-soft-black); 
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* --- RAINBOW TEXT GRADIENT --- */
.text-gradient {
    background-image: linear-gradient(to right, 
        var(--nusa-digital-blue), 
        var(--nusa-mint-green), 
        var(--nusa-sunny-yellow), 
        var(--nusa-coral-red)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */
    display: inline-block;
}

.download-desc {
    color: #666666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* Store Buttons */
.store-btn-wrapper {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.store-btn-img {
    height: 50px; 
    width: auto;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    border: 1px solid rgba(0,0,0,0.05);
}

.store-btn-link:hover .store-btn-img {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .section-download { padding-top: 60px; padding-bottom: 60px; }
    .content-wrapper { 
        padding-left: 0; 
        margin-top: 40px; 
        text-align: left; 
    }
    .download-title { font-size: 2.2rem; }
    .store-btn-wrapper { justify-content: flex-start; }
    .mockup-img { max-width: 300px; margin: 0 auto; }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px); /* Turun 50px saat hidden */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0); /* Kembali ke posisi asal */
}

/* =========================================
   9. HERO & CATEGORIES STYLES (LIGHT THEME - FIXED RATIO)
   ========================================= */

/* --- DEFINISI ANIMASI (KEYFRAMES) --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animasi Floating yang diperhalus agar tidak bentrok dengan Entrance */
@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes running-loop {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 15px)); }
}

.hero-wrapper {
    min-height: 100vh;
    padding-top: 120px;
    padding-bottom: 40px;
    position: relative;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--nusa-soft-black);
    
    /* --- BACKGROUND --- */
    background-image: url('../assets/img/hero-bg.png'); 
    background-color: #FFFFFF; 
    background-size: auto; 
    background-repeat: repeat; 
    background-position: top center;
}

/* Typography Hero */
.hero-title {
    font-size: 3.5rem;
    line-height: 1.15;
    letter-spacing: -1px;
    color: var(--nusa-soft-black);
    
    /* SET ANIMASI LOAD + FLOATING */
    opacity: 0; /* Hidden sebelum animasi mulai */
    
    /* Urutan: NamaAnimasi Durasi Easing Delay Fill-Mode */
    animation: 
        fadeInUp 0.8s ease-out 0.2s forwards, 
        floating 3s ease-in-out infinite 1.2s; 
}

.hero-subtitle {
    font-size: 1.1rem;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
    color: #555555;
    
    /* SET ANIMASI LOAD */
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

/* Text Gradient Helpers */
.text-gradient-warm {
    background: linear-gradient(to right, var(--nusa-sunny-yellow), var(--nusa-coral-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.text-gradient-cool {
    background: linear-gradient(to right, var(--nusa-mint-green), var(--nusa-digital-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* --- Category Slider --- */
.category-slider {
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);

    /* ANIMASI LOAD SLIDER */
    opacity: 0;
    animation: fadeInScale 1s ease-out 0.8s forwards;
}

.category-track {
    display: flex;
    width: max-content;
    animation: running-loop 50s linear infinite; 
    gap: 30px; 
}

.category-track:hover {
    animation-play-state: paused;
}

/* ITEM WRAPPER */
.category-item {
    width: 418px; 
    max-width: 85vw; 
    flex-shrink: 0;
}

/* --- CARD STYLE (RATIO 418x418) --- */
.card-nusa {
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5; 
    border-radius: 10px !important; 
    aspect-ratio: 8 / 7; 
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    /* Transisi untuk Hover Effect */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.card-nusa:hover {
    border-color: var(--nusa-digital-blue);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* IMAGE WRAPPER (RATIO 418x215) */
.card-nusa-img-wrapper {
    width: 100%;
    aspect-ratio: 418 / 215; 
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #F0F0F0;
    flex-shrink: 0; 
}

.card-nusa-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0 !important;
}

.card-nusa:hover .card-nusa-img {
    transform: scale(1.12);
}

/* CARD BODY */
.card-body {
    padding: 0px 24px; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
    flex: 1;                 
}

/* --- UPDATED: JUDUL MAKSIMAL 1 BARIS --- */
.card-title {
    font-size: 1.35rem; 
    line-height: 1.3;
    color: var(--nusa-soft-black);
    font-weight: 700;
    margin-bottom: 12px;
    
    /* Properti Line Clamp */
    display: -webkit-box;
    -webkit-line-clamp: 1;      /* Batas 1 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;    /* Titik-titik (...) */
}

/* --- UPDATED: DESKRIPSI MAKSIMAL 3 BARIS --- */
.card-text {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.6;

    /* Properti Line Clamp */
    display: -webkit-box;
    -webkit-line-clamp: 3;      /* Batas 3 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;    /* Titik-titik (...) */
}

/* Quote Footer */
.hero-quote {
    font-size: 1.5rem;
    font-weight: 600; 
    line-height: 1.6;
    color: var(--nusa-soft-black);
}

.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Mobile */
@media (max-width: 991px) {
    .hero-title { font-size: 2.5rem; }
    .hero-wrapper { padding-top: 120px; }
    .category-item { width: 320px; } 
    .card-title { font-size: 1.2rem; }
    .card-body { padding: 20px; }
}

/* =========================================
   10. HOW TO PURCHASE SECTION STYLES (LIGHT MODE)
   ========================================= */
.section-purchase {
    /* Background di-handle oleh inline style PHP, 
       jadi kita hanya atur padding di sini */
    padding-top: 10px;
    padding-bottom: 10px;
}

/* JUDUL UTAMA (How To Purchase) */
.purchase-title-main {
    font-size: 2.5rem;
    font-weight: 800;
    /* PERBAIKAN: Gunakan nusa-soft-black agar hitam */
    color: var(--nusa-soft-black) !important; 
    margin-bottom: 4rem;
    line-height: 1.2;
}

/* CLASS TEKS PELANGI (Untuk "Digital Products") */
.text-gradient {
    /* Menggunakan urutan warna dari Root */
    background-image: linear-gradient(to right, 
        var(--nusa-digital-blue), 
        var(--nusa-mint-green), 
        var(--nusa-sunny-yellow), 
        var(--nusa-coral-red)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* --- STEP CARD (KOTAK PUTIH) --- */
.step-card {
    background-color: #FFFFFF;
    border: 1px solid #F0F0F0; /* Border abu sangat tipis */
    border-radius: 16px;
    padding: 30px 20px;
    height: 100%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Shadow halus */
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* --- IMAGE WRAPPER (KOTAK BACKGROUND MERAH MUDA) --- */
.step-img-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px auto;
    
    /* Background Merah Muda (Transparansi dari Coral Red) */
    background-color: rgba(230, 74, 59, 0.12); 
    border-radius: 12px;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-img {
    max-width: 40px; 
    max-height: 40px;
    object-fit: contain;
}

/* --- TYPOGRAPHY LANGKAH --- */

/* Tulisan "Step 1" */
.step-badge {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--nusa-coral-red); /* Merah/Oranye */
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Judul Langkah ("Select Your Product") */
.step-title {
    /* PERBAIKAN: Pakai nusa-soft-black agar hitam */
    color: var(--nusa-soft-black) !important;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* Deskripsi Langkah */
.step-desc {
    /* Manual set warna abu agak gelap, karena nusa-text-grey (#B7B7B7) terlalu terang di putih */
    color: #666666; 
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .purchase-title-main { font-size: 2rem; margin-bottom: 3rem; }
    .step-card { padding: 25px 15px; }
}

/* =========================================
   11. PRODUCTS SECTION STYLES (FULL UPDATED)
   ========================================= */
.section-products {
    padding-top: 20px;
    padding-bottom: 20px;
}

.products-title-main {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--nusa-soft-black);
    margin-bottom: 3rem;
}

/* --- CARD PRODUCT --- */
.card-product {
    background-color: #FFFFFF;
    border: 1px solid #EAEAEA;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    
    /* Height 100% agar kartu seragam tingginya dalam grid */
    height: 100%; 
    min-height: 100%;
    
    width: 100%;
    display: flex;
    flex-direction: column;
    
    /* Shadow halus */
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* --- IMAGE WRAPPER (RATIO 393x215) --- */
.product-img-wrapper {
    width: 100%;
    aspect-ratio: 393 / 215; 
    position: relative;
    overflow: hidden;
    background-color: #F9F9F9;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card-product:hover .product-img {
    transform: scale(1.08);
}

/* --- CONTENT BODY --- */
.product-body {
    padding: 24px;
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.product-title {
    color: var(--nusa-soft-black);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
    
    /* --- EDIT: MAKSIMAL 1 BARIS --- */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-desc {
    color: #666666;
    font-size: 0.95rem;
    line-height: 1.6;
    
    /* Margin bottom 0, biar jarak ke kategori konsisten */
    margin-bottom: 0; 
    
    /* --- EDIT: MAKSIMAL 3 BARIS --- */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- CATEGORY & BUTTON WRAPPER --- */
.product-category-wrapper {
    margin-top: 20px; /* Jarak fix dari deskripsi ke kategori */
    padding-top: 20px;
    border-top: 1px dashed #EEEEEE;
    
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* Container Kategori (Kiri) */
.category-left {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.category-label {
    display: block;
    font-size: 0.75rem;
    color: #999999;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #FFF8E1;
    color: var(--nusa-sunny-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.category-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--nusa-digital-blue);
    white-space: nowrap;
}

/* --- TOMBOL LIHAT (Compact Version) --- */
.btn-view-compact {
    background-color: var(--nusa-coral-red);
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    white-space: nowrap;
}

.btn-view-compact:hover {
    background-color: #C9302C;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(230, 74, 59, 0.3);
}

/* TOMBOL "PRODUK LAINNYA" */
.btn-more-products {
    background-color: var(--nusa-sunny-yellow);
    color: var(--nusa-soft-black);
    font-weight: 700;
    padding: 14px 45px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    margin-top: 50px;
    transition: all 0.3s ease;
}

.btn-more-products:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(244, 196, 48, 0.3);
    color: var(--nusa-soft-black);
}

@media (max-width: 991px) {
    .card-product {
        aspect-ratio: auto; 
        height: auto;
    }
    .product-img-wrapper {
        aspect-ratio: 393 / 215;
    }
}

/* ANIMASI SCROLL */
.scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   12. PROFILE SECTION STYLES
   ========================================= */
.section-nusa-profile {
    background-color: var(--nusa-bg-dark);
    color: var(--nusa-text-white);
    padding-top: 10px !important;
    padding-bottom: 10px;
}

.nusa-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.nusa-headline-big {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 1.5rem;
}

.nusa-desc {
    font-size: 1.05rem;
    color: var(--nusa-text-grey);
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Custom Action Button (Specific to Profile) */
.btn-nusa-action {
    background-color: var(--nusa-neon);
    color: #181818;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-nusa-action:hover {
    background-color: #FFFFFF;
    color: #000;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

/* Modal Styling */
.video-modal-content {
    background-color: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nusa-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .section-nusa-profile {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .nusa-headline-big {
        font-size: 1.8rem;
    }
    .btn-nusa-action {
        width: 100%;
    }
}

/* =========================================
   13. PROFILE DETAIL (ACCORDION) STYLES
   ========================================= */
.section-profile {
    padding: 20px 0;
    background-color: var(--nusa-bg-dark);
    text-align: center;
}

.profile-subtitle {
    color: #4A4A4A; /* Abu-abu gelap agar terbaca di bg putih */
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

.profile-headline {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 40px;
}

/* Logic Accordion Read More */
.profile-description-wrapper {
    max-width: 850px;
    margin: 0 auto;
    color: var(--nusa-text-white);
    font-size: 1.1rem;
    line-height: 1.8;
}

.profile-content-collapsed {
    max-height: 120px; /* Tinggi awal saat tertutup */
    overflow: hidden;
    position: relative;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efek Blur/Fade di bagian bawah saat tertutup */
.profile-content-collapsed:not(.profile-content-expanded)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(transparent, var(--nusa-bg-dark));
    pointer-events: none;
}

.profile-content-expanded {
    max-height: 2000px; /* Nilai besar agar teks semua keluar */
}

/* Button Disabled Style */
.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
    filter: grayscale(1);
}

@media (max-width: 768px) {
    .profile-headline {
        font-size: 1.8rem;
    }
    .profile-content-collapsed {
        max-height: 150px;
    }
}

/* =========================================
   14. SERVICES SECTION STYLES (LIGHT THEME)
   ========================================= */

.section-services {
    /* Menggunakan background image dari folder img/bg-hero.png 
    background: url('../img/bg-hero.png') repeat center top;
    background-color: #FFFFFF; /* Fallback warna putih */
    background-size: auto; /* Membiarkan pola dot berulang natural */
    padding: 80px 0 100px 0;
}

/* Typography Judul Utama */
.service-title-main {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, #667EEA, #764BA2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Helper Class warna untuk Judul (Sesuai Referensi) */
.service-title-main .c-coral { color: var(--nusa-coral-red); }
.service-title-main .c-yellow { color: var(--nusa-sunny-yellow); }
.service-title-main .c-blue { color: var(--nusa-digital-blue); }

.service-subtitle {
    color: #4A4A4A; /* Abu-abu gelap agar terbaca di bg putih */
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

/* Service Card Styling - Light Theme */
.card-service {
    background-color: #FFFFFF;
    border: 1px solid #F0F0F0; /* Border sangat tipis */
    border-radius: 6px; /* Radius lebih kecil sesuai referensi */
    padding: 20px 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content */
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); /* Bayangan halus */
}

.card-service:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: #eee;
    animation: floating 0.8s ease-in-out infinite;
}

/* Icon Wrapper - Kotak Kuning Soft */
.service-icon-wrapper {
    height: 90px; 
    width: 90px;
    margin: 0 auto 25px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Warna Background Kuning Pucat/Cream */
    background-color: #FFF6D1; 
    border-radius: 16px; /* Rounded Box */
}

.service-icon-img {
    max-height: 50%;
    max-width: 50%;
    object-fit: contain;
    fill: var(--nusa-sunny-yellow);
}


/* Card Title */
.service-card-title {
    color: #151515; /* Hitam pekat */
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 15px;
    text-transform: capitalize;
    
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Description */
.service-card-desc {
    color: #666666; /* Abu-abu text */
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1;
    
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Button Detil - Merah/Coral */
.btn-service-detail {
    background-color: var(--nusa-coral-red);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.9rem;
    width: 100%;
    padding: 12px;
    border-radius: 3px; /* Radius tombol kotak tumpul */
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
}

.btn-service-detail:hover {
    background-color: #cc3a2b; /* Merah lebih gelap saat hover */
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(230, 74, 59, 0.3);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .section-services { padding: 60px 0; }
    .service-title-main { font-size: 2.2rem; }
    .card-service { padding: 30px 20px; }
}

/* =========================================
   15. SERVICES PAGE LIST STYLES
   ========================================= */
.services-page-section {
    background-color: var(--nusa-bg-dark);
    padding: 80px 0;
}

/* Divider Neon di bawah judul */
.nusa-divider {
    width: 80px;
    height: 4px;
    background-color: var(--nusa-neon);
    border-radius: 2px;
}

/* Lingkaran Icon Service */
.service-icon-circle {
    width: 70px;
    height: 70px;
    background-color: rgba(203, 255, 59, 0.1); /* Neon dengan transparansi */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Efek interaktif saat card di-hover */
.card-nusa:hover .service-icon-circle {
    background-color: var(--nusa-neon);
}

.card-nusa:hover .service-icon-circle i {
    color: #000 !important; /* Icon jadi hitam saat bg jadi neon */
}

/* Letter Spacing untuk sub-judul */
.ls-2 {
    letter-spacing: 2px;
}

@media (max-width: 768px) {
    .services-page-section {
        padding: 50px 0;
    }
    .display-5 {
        font-size: 2.2rem;
    }
}

/* =========================================
   16. TESTIMONIALS SECTION STYLES (LIGHT MODE)
   ========================================= */
.section-testimonials {
    /* Background diatur via Inline Style di Blade */
    padding-top: 80px;
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
}

.testimonial-title-main {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--nusa-digital-blue, #0d6efd); /* Biru sesuai gambar */
    text-align: center;
    margin-bottom: 3rem;
}

/* Slider Layout */
.testimonial-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.testimonial-slider {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px 10px; /* Padding untuk shadow agar tidak terpotong */
    
    /* Hide Scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
    
    /* Agar slider berada di tengah jika item sedikit */
    justify-content: flex-start; 
}

@media (min-width: 992px) {
    /* Jika item sedikit, pusatkan slider di desktop */
    .testimonial-slider {
         /* Hapus ini jika ingin selalu rata kiri */
         /* justify-content: center; */
    }
}

.testimonial-slider::-webkit-scrollbar {
    display: none;
}

/* --- CARD STYLING (LIGHT THEME) --- */
.card-testimonial {
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 40px 30px;
    min-width: 350px;
    max-width: 350px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    
    /* Border halus & Shadow */
    border: 1px solid #F0F0F0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.card-testimonial:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border-color: #E0E0E0;
}

/* Elements Inside Card */
.stars-wrapper {
    margin-bottom: 20px;
    display: flex;
    gap: 5px;
    font-size: 1.2rem;
    color: #FFC107; /* Kuning Bintang */
}

.testimoni-text {
    color: #555555; /* Abu gelap */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: normal;
}

/* Profile Image Wrapper (Circle with Gradient Border effect) */
.profile-img-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px auto; /* Tengah secara horizontal */
    
    /* BENTUK LINGKARAN */
    border-radius: 50%;
    
    /* KETEBALAN OUTLINE RAINBOW (Diatur lewat padding) */
    padding: 3px; 
    
    /* WARNA RAINBOW (Gradient) */
    background: linear-gradient(
        45deg, 
        #FF0000, #FF7300, #FFFB00, #48FF00, 
        #00FFD5, #002BFF, #7A00FF, #FF00C8
    );
    
    /* Agar gambar di tengah wrapper */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Opsional: Animasi putar warna dikit biar hidup */
    background-size: 200% 200%;
    animation: rainbowMove 4s ease infinite;
}

.user-profile-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    
    /* WARNA PEMISAH (Gap Putih antara foto dan rainbow) */
    /* Ubah jadi 0px jika ingin foto langsung nempel ke rainbow */
    border: 3px solid #FFFFFF; 
    
    background-color: #fff; /* Fallback jika gambar transparan */
}

.user-name {
    color: var(--nusa-coral-red, #E64A3B); /* Merah/Orange sesuai gambar */
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.user-role {
    color: #888888;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Navigation Arrows (Blue Style) */
.nav-btn {
    background: transparent;
    border: 2px solid var(--nusa-digital-blue, #0d6efd);
    color: var(--nusa-digital-blue, #0d6efd);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
    flex-shrink: 0;
}

.nav-btn:hover {
    background-color: var(--nusa-digital-blue, #0d6efd);
    color: #FFFFFF;
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
    transform: scale(1.1);
}

/* --- ANIMASI SCROLL (FADE UP) --- */
.animate-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes rainbowMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (max-width: 991px) {
    .testimonial-title-main { font-size: 2rem; }
    .card-testimonial { min-width: 300px; max-width: 300px; padding: 30px 20px; }
    /* Sembunyikan tombol nav di mobile, user bisa swipe */
    .nav-btn { display: none; } 
}

/* =========================================
   17. AUTH PAGES STYLES (Login & Register)
   ========================================= */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--nusa-bg-dark);
    padding-top: 100px; /* Agar tidak tertutup navbar fixed */
    padding-bottom: 50px;
}

.auth-card {
    background-color: var(--nusa-bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    color: white !important;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.auth-card .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: center;
    font-weight: 800;
    font-size: 1.5rem;
    padding: 25px;
    color: var(--nusa-neon);
}

.auth-card .form-control {
    background-color: #252525 !important;
    border: 1px solid #444 !important;
    color: white !important;
    padding: 12px;
    border-radius: 10px;
}

.auth-card .form-control:focus {
    border-color: var(--nusa-neon) !important;
    box-shadow: 0 0 10px rgba(203, 255, 59, 0.2);
}

.auth-card .btn-primary {
    background-color: var(--nusa-neon) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
}

.auth-card .btn-link {
    color: var(--nusa-neon) !important;
    text-decoration: none;
    font-size: 0.9rem;
}

/* =========================================
   18. PRODUCTS PAGE - INDEX & LISTING
   ========================================= */

/* --- 1. WRAPPER UTAMA (INDEX) --- */
.page-products-wrapper {
    background-color: #ffffff;
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    color: var(--nusa-soft-black);
    min-height: 100vh;
    padding-top: 140px;
    padding-bottom: 80px;
}

/* --- 2. FILTER BUTTONS --- */
.filter-btn {
    background-color: #f3f4f6;
    border: 1px solid transparent;
    color: #6b7280;
    padding: 10px 28px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    margin: 5px;
    text-decoration: none !important; 
    display: inline-block;
}

.filter-btn:hover {
    background-color: #e5e7eb;
    color: var(--nusa-digital-blue);
    transform: translateY(-2px);
}

.filter-btn.active {
    background-color: var(--nusa-digital-blue);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(42, 111, 242, 0.3);
}

/* --- 3. PRODUCT CARD (INDEX STYLE) --- */
.related-card {
    background-color: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.related-card:hover {
    transform: translateY(-10px);
    border-color: #bfdbfe;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.related-img-wrapper {
    width: 100%;
    height: 220px;
    background-color: #f9fafb; 
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #f3f4f6;
}

.related-img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center;
    transition: transform 0.5s ease;
}

.related-card:hover .related-img {
    transform: scale(1.1);
}

.related-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.related-cat {
    color: var(--nusa-digital-blue);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    display: block;
}

.related-title {
    margin-bottom: 10px;
    line-height: 1.3;
}

.related-title a {
    color: var(--nusa-soft-black) !important;
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none !important;
    transition: 0.3s;
}

.related-title a:hover {
    color: var(--nusa-digital-blue) !important;
}

.related-desc {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-footer {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tag-icon {
    color: #9ca3af !important; 
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.tag-icon i {
    color: var(--nusa-digital-blue);
}

.price-text {
    color: var(--nusa-soft-black) !important;
    font-weight: 800;
    font-size: 1.1rem;
}

/* --- 4. RAINBOW OUTLINE PAGINATION --- */
.pagination-visual .pagination {
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

/* Style Umum Item (Inactive) */
.pagination-visual .page-item .page-link {
    background-color: #fff;
    color: #9ca3af; /* Abu-abu */
    border: 2px solid #e5e7eb; /* Border Abu Biasa */
    border-radius: 50px !important;
    font-weight: 600;
    padding: 8px 18px;
    margin: 0;
    transition: all 0.3s ease;
}

.pagination-visual .page-item .page-link:hover {
    border-color: var(--nusa-digital-blue);
    color: var(--nusa-digital-blue);
    transform: translateY(-2px);
}

/* --- STYLE ACTIVE (RAINBOW BORDER, WHITE BG, BLACK TEXT) --- */
.pagination-visual .page-item.active .page-link {
    /* Text Hitam */
    color: var(--nusa-soft-black) !important; 
    font-weight: 800;
    
    /* Background Putih */
    background-color: #fff !important;
    
    /* Trik Border Gradient (Double Background) */
    border: 2px solid transparent; /* Border asli transparan agar gradient terlihat */
    background-image: 
        linear-gradient(#fff, #fff), /* Layer Atas: Putih */
        var(--nusa-gradient-border); /* Layer Bawah: Rainbow */
    
    /* Mengatur agar layer putih di dalam (padding-box) & rainbow di luar (border-box) */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Shadow halus */
    transform: scale(1.05); /* Sedikit lebih besar */
}

/* Disable State */
.pagination-visual .page-item.disabled .page-link {
    background: #f3f4f6;
    color: #d1d5db;
    border-color: transparent;
    cursor: not-allowed;
}


/* =========================================
   19. PRODUCTS PAGE - DETAIL VIEW
   ========================================= */

/* --- 1. DETAIL WRAPPER --- */
.product-detail-wrapper {
    background-color: #ffffff;
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    color: var(--nusa-soft-black);
    min-height: 100vh;
    padding-top: 140px;
    padding-bottom: 80px;
}

/* --- 2. IMAGE FRAME --- */
.image-frame-style {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    width: 100%;
    display: block;
}

.detail-main-img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* --- 3. TYPOGRAPHY & BOXES --- */
.detail-title {
    color: var(--nusa-soft-black);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

.detail-category-label {
    color: var(--nusa-digital-blue);
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.detail-action-box {
    margin-top: 40px;
    margin-bottom: 60px;
}

.price-box-detail {
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 25px;
    text-align: center;
    border-radius: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.price-label { color: #6b7280; font-size: 1rem; margin-bottom: 5px; }
.price-value { color: var(--nusa-soft-black); font-size: 2rem; font-weight: 800; }

/* --- 4. ACTION BUTTONS --- */
/* Tombol Primary (Gradient) */
.btn-action-primary {
    background: linear-gradient(135deg, var(--nusa-digital-blue), #1e5bbd) !important;
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    box-shadow: 0 4px 15px rgba(42, 111, 242, 0.3);
}

.btn-action-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(42, 111, 242, 0.4);
    color: #ffffff !important;
}

/* Tombol Secondary (Outline) */
.btn-action-secondary {
    background-color: #ffffff !important;
    border: 2px solid var(--nusa-digital-blue);
    color: var(--nusa-digital-blue) !important;
    font-weight: 700;
    text-transform: uppercase;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
    transition: all 0.3s;
}

.btn-action-secondary:hover {
    background-color: var(--nusa-digital-blue) !important;
    color: #ffffff !important;
}

/* =========================================
   20. PAGINATION CUSTOM (RAINBOW OUTLINE)
   ========================================= */

/* Container untuk merapikan posisi di tengah */
.pagination-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    margin-bottom: 40px;
}

/* Reset Style List Bootstrap */
.pagination-visual .pagination {
    display: flex;
    gap: 12px; /* Jarak antar tombol */
    align-items: center;
    margin: 0;
    padding: 0;
}

/* --- STYLE DASAR TOMBOL (ANGKA 1, 2, 3...) --- */
/* Target .page-link di dalam .pagination-visual */
.pagination-visual .page-item .page-link {
    /* 1. Warna & Text */
    background-color: #fff;       /* Dalamnya Putih */
    color: var(--nusa-soft-black); /* Teks Hitam */
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none !important;
    
    /* 2. Ukuran & Bentuk (Bulat Sempurna) */
    width: 45px;
    height: 45px;
    border-radius: 50% !important;
    padding: 0 !important; /* Reset padding bootstrap */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 3. TEKNIK RAINBOW BORDER */
    border: 2px solid transparent; /* Border transparan agar gradient muncul */
    background-image: 
        linear-gradient(#fff, #fff), /* Layer Atas: Putih */
        var(--nusa-gradient-border); /* Layer Bawah: Gradient Pelangi */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    
    /* 4. Shadow Halus */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* --- STYLE TOMBOL PREV & NEXT (BENTUK KAPSUL/LONJONG) --- */
/* Target elemen pertama dan terakhir */
.pagination-visual .page-item:first-child .page-link, 
.pagination-visual .page-item:last-child .page-link {
    border-radius: 50px !important; /* Membuat Lonjong */
    width: auto !important; /* Lebar otomatis mengikuti teks */
    padding: 0 25px !important; /* Padding Kanan Kiri */
}

/* --- HOVER EFFECT --- */
.pagination-visual .page-item .page-link:hover {
    transform: translateY(-3px); /* Naik sedikit */
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    color: var(--nusa-digital-blue); /* Teks berubah biru saat hover */
}

/* --- ACTIVE STATE (NOMOR HALAMAN SAAT INI) --- */
/* Opsional: Jika Active mau Full Color Gradient */
.pagination-visual .page-item.active .page-link {
    background: var(--nusa-digital-blue) !important; /* Full Gradient Background */
    color: #fff !important; /* Teks Putih */
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    background-clip: border-box; /* Reset clip agar full color */
}

/* --- DISABLED STATE (TIDAK BISA DIKLIK) --- */
.pagination-visual .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f3f4f6; /* Abu muda */
    background-image: none; /* Hapus pelangi */
    border: 1px solid #e5e7eb;
    color: #9ca3af;
}

/* Fix Icon Size (Panah Bootstrap) */
.pagination-visual svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* =========================================
   21. CLIENT PAGE STYLES (SECTION 1 - LIGHT THEME)
   ========================================= */

.client-hero-section {
    background-color: #ffffff;
    /* Pola Dotted Halus agar konsisten dengan section lain */
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 100px 0;
    font-family: 'Inter', sans-serif;
}

/* Gambar Hero (Kiri) */
.client-hero-img-wrapper {
    position: relative;
    width: 100%;
    border-radius: 24px; /* Lebih rounded agar modern */
    overflow: hidden;
}

.client-hero-img {
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: cover;
    display: block;
}

/* Konten Teks (Kanan) */
.client-hero-content {
    padding-left: 30px;
}

.client-title-large {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--nusa-soft-black); /* Menggunakan root */
    letter-spacing: -2px;
}

/* Highlight warna biru digital untuk "Client Portal" */
.client-title-large .highlight {
    color: var(--nusa-digital-blue);
}

.client-desc {
    color: #555555;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 45px;
    max-width: 550px;
}

/* Tombol-tombol */
.client-btn-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Tombol Utama (Blue Primary) */
.btn-client-primary {
    background-color: var(--nusa-digital-blue);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1rem;
    padding: 16px 32px;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 15px -3px rgba(42, 111, 242, 0.3);
}

.btn-client-primary:hover {
    background-color: #1a56cc;
    transform: translateY(-3px);
    box-shadow: 0 20px 25px -5px rgba(42, 111, 242, 0.4);
    color: #fff;
}

/* Tombol Kedua (Dark/Soft Black) */
.btn-client-secondary {
    background-color: var(--nusa-soft-black);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 1rem;
    padding: 16px 32px;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-client-secondary:hover {
    background-color: #000000;
    transform: translateY(-3px);
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .client-hero-section { padding: 80px 0; text-align: center; }
    .client-hero-content { padding-left: 0; margin-top: 50px; }
    .client-title-large { font-size: 2.8rem; }
    .client-btn-group { justify-content: center; flex-direction: column; }
    .btn-client-primary, .btn-client-secondary { width: 100%; justify-content: center; }
}

/* =========================================
   22. CLIENT FEATURES (SECTION 2 - LIGHT THEME)
   ========================================= */

.client-features-section {
    background-color: #ffffff; /* Sama dengan hero agar menyatu */
    padding-bottom: 80px;
    padding-top: 20px;
    /* Pola Dotted (opsional, jika ingin meneruskan dari hero) */
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 30px 30px;
}

/* Card Style - Clean White */
.client-feature-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 35px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.client-feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--nusa-digital-blue);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Icon Box (Modern Soft Background) */
.client-icon-box {
    width: 60px;
    height: 60px;
    background-color: #f8fafc; /* Abu sangat muda */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border: 1px solid #edf2f7;
    transition: all 0.3s ease;
}

.client-feature-card:hover .client-icon-box {
    background-color: var(--nusa-digital-blue);
}

.client-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Saat di-hover, icon berubah jadi putih */
.client-feature-card:hover .client-icon-img {
    filter: brightness(0) invert(1);
}

/* Typography */
.client-feature-title {
    color: var(--nusa-soft-black);
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Mengganti Neon menjadi Brand Blue */
.client-brand-text {
    color: var(--nusa-digital-blue);
}

.client-feature-desc {
    color: #64748b; /* Abu-abu slate yang nyaman dibaca */
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Responsive adjustment */
@media (max-width: 991px) {
    .client-features-section {
        padding-bottom: 60px;
    }
    .client-feature-card {
        padding: 25px;
    }
}

/* =========================================
   23. CLIENT STATS (SECTION 3 - LIGHT THEME)
   ========================================= */

.client-stats-section {
    padding: 20px 0px;
    /*
    background-color: #ffffff; 
    padding: 100px 0;
    position: relative;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;*/
}

.stat-item {
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
}

.stat-value-wrapper {
    /* Menggunakan Biru Digital sebagai warna utama angka */
    color: var(--nusa-digital-blue); 
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    letter-spacing: -2px;
}

.stat-number {
    font-family: 'Inter', sans-serif;
}

.stat-symbol {
    margin-left: 2px;
    font-size: 2.5rem;
    color: var(--nusa-sunny-yellow); /* Simbol + atau % menggunakan aksen kuning */
}

.stat-label {
    color: #64748b; /* Abu-abu slate yang elegan */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Garis pemisah antar item (hanya untuk layar besar) */
@media (min-width: 768px) {
    .stat-item:not(:last-child) {
        border-right: 1px solid #f1f5f9;
    }
}

/* Penyesuaian Responsif */
@media (max-width: 767px) {
    .client-stats-section {
        padding: 60px 0;
    }
    
    .stat-item {
        margin-bottom: 40px;
    }

    .stat-value-wrapper {
        font-size: 3rem;
    }
    
    .stat-symbol {
        font-size: 2rem;
    }
}

/* =========================================
   24. CLIENT SERVICES (SECTION 5 - UPDATED)
   ========================================= */

.client-services-section {
    padding: 100px 0;
    /* Background dot pattern sesuai referensi */
    background-image: url('../assets/img/hero-bg.png'); 
    background-color: #ffffff; 
    background-repeat: repeat; 
    background-size: auto; 
    background-position: top center;
}

.services-main-title {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: var(--nusa-soft-black);
}

.services-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 750px;
    margin: 0 auto 60px auto;
}

/* --- REUSE CARD NUSA STYLE --- */
.client-services-section .card-nusa {
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5; 
    border-radius: 10px !important; 
    aspect-ratio: 8 / 9; /* Rasio kotak yang sama dengan hero */
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.client-services-section .card-nusa:hover {
    border-color: var(--nusa-digital-blue);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* Image Wrapper (Fixed Ratio 418x215) */
.client-services-section .card-nusa-img-wrapper {
    width: 100%;
    aspect-ratio: 418 / 215; 
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #F0F0F0;
    flex-shrink: 0; 
}

.client-services-section .card-nusa-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.client-services-section .card-nusa:hover .card-nusa-img {
    transform: scale(1.12);
}

/* Card Body */
.client-services-section .card-body {
    padding: 0px 24px; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
    flex: 1;                 
}

.client-services-section .card-title {
    font-size: 1.3rem; 
    color: var(--nusa-soft-black);
    font-weight: 700;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.client-services-section .card-nusa:hover .card-title {
    color: var(--nusa-digital-blue);
}

.client-services-section .card-text {
    font-size: 0.9rem;
    color: #666666;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .services-main-title { font-size: 2.2rem; }
    .client-services-section { padding: 60px 0; }
}

/* =========================================
   25. DASHBOARD PREVIEW (SECTION 6 - LIGHT THEME)
   ========================================= */

.dashboard-preview-section {
    background-color: #ffffff;
    padding: 100px 0;
    /* Pola Dotted Konsisten */
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 30px 30px;
}

.dashboard-title {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--nusa-soft-black);
    letter-spacing: -2px;
}

/* Highlight warna biru untuk teks utama */
.dashboard-title .text-highlight {
    color: var(--nusa-digital-blue);
}

.dashboard-desc {
    font-size: 1.1rem;
    max-width: 600px;
    line-height: 1.7;
    color: #64748b; /* Warna slate grey */
}

/* Feature Checklist Style */
.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
}

/* Icon check dengan latar belakang biru soft */
.feature-icon-bg {
    width: 24px; /* Ukuran icon box sedikit lebih proporsional */
    height: 24px;
    background-color: #eff6ff; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon {
    width: 14px;
    height: 14px;
    /* Memberikan warna biru pada icon SVG/Image jika perlu */
    filter: invert(34%) sepia(85%) saturate(2641%) hue-rotate(212deg) brightness(97%) contrast(92%);
}

.feature-text {
    color: var(--nusa-soft-black);
    font-weight: 600;
    font-size: 0.9rem; /* Sedikit dikecilkan agar pas di 2 kolom */
    line-height: 1.2;
}

/* Image Styling */
.dashboard-img-wrapper img {
    border: 1px solid #f1f5f9;
}

/* Responsive */
@media (max-width: 991px) {
    .dashboard-title {
        font-size: 2.8rem;
        text-align: center;
    }
    .dashboard-desc {
        text-align: center;
        margin: 0 auto 40px auto;
    }
    .dashboard-preview-section {
        padding: 80px 0;
    }
}

@media (max-width: 767px) {
    .feature-text {
        font-size: 0.85rem;
    }
}

/* =========================================
   26. SERVICE DETAIL PAGE (LIGHT VERSION)
   ========================================= */

.service-detail-page {/*
    background-color: #ffffff;  Background Putih
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px); */
    background-size: 32px 32px;
    color: var(--nusa-soft-black); /* Teks Gelap */
}

/* --- SECTION 1: HERO DETAIL --- */
.service-hero-detail {
    padding: 160px 0 80px 0; /* Padding atas lebih besar agar tidak tertutup navbar */
}

.service-hero-img-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;/*
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); */
}

.service-hero-img-wrapper img {
    width: 100%;
    height: auto;        /* PENTING: Ubah dari 480px ke auto agar tinggi menyesuaikan gambar */
    max-height: 550px;   /* Opsional: Membatasi tinggi maksimal agar tidak terlalu raksasa di layar lebar */
    object-fit: contain; /* PENTING: Ubah dari cover ke contain agar gambar "muat" utuh dalam wadah */
    display: block;
    transition: transform 0.5s ease;
}

.service-hero-img-wrapper:hover img {
    transform: scale(1.03);
}

/* Typography Hero */
.hero-title-detail {
    color: var(--nusa-soft-black);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
}

/* Quote Style (Modern Left Border) */
.quote-wrapper-detail {
    border-left: 5px solid var(--nusa-digital-blue); /* Garis Biru */
    padding-left: 25px;
    margin-bottom: 30px;
    background: linear-gradient(90deg, #f9fafb 0%, transparent 100%); /* Background gradient tipis */
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0 10px 10px 0;
}

.quote-text-detail {
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 0;
    color: #374151; /* Abu gelap */
    font-weight: 600;
    font-style: italic;
}

.hero-desc-detail {
    color: #6b7280; /* Abu medium */
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 40px;
}

/* --- SECTION 2: FEATURE CARDS (White Card) --- */
.feature-card-detail {
    background-color: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.feature-card-detail:hover {
    transform: translateY(-10px);
    border-color: #bfdbfe; /* Border biru muda */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Container Icon */
.feature-icon-box {
    /* Hapus width/height fixed container agar tidak membatasi gambar */
    width: auto;
    height: auto;
    
    margin: 0 auto 30px auto; /* Margin bawah sedikit ditambah */
    display: flex;
    align-items: center;
    justify-content: center;

    /* --- PERUBAHAN DI SINI --- */
    background-color: transparent; /* Menghilangkan warna abu-abu */
    border-radius: 0;            /* Menghilangkan bentuk lingkaran */
    padding: 0;                  /* Menghapus jarak dalam, agar icon bisa besar */
}

/* Gambar Icon */
.feature-icon-box img {
    /* --- PERBESAR UKURAN ICON --- */
    width: 120px;  /* Sebelumnya kecil, sekarang diperbesar (bisa diatur 100px - 130px) */
    height: 120px; /* Pastikan tinggi sama agar rasio terjaga */
    
    object-fit: contain;
    
    /* Efek bayangan pada icon agar terlihat timbul/3D */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); 
    transition: transform 0.3s ease;
}

/* Efek saat card di-hover (opsional: icon sedikit membesar) */
.feature-card-detail:hover .feature-icon-box img {
    transform: scale(1.1); 
}

.feature-title-detail {
    color: var(--nusa-digital-blue); /* Judul Biru */
    font-weight: 700;
    font-size: 1.35rem;
    margin-bottom: 15px;
    line-height: 1.4;
}

.feature-desc-detail {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- SECTION 3: SERVICE PACKAGES (STEPS) --- */
.service-steps-detail {
    
}

.step-icon-wrapper-detail {
    position: relative;
    margin-bottom: 25px;
    display: inline-block;
}

/* Garis Penghubung Antar Step (Desktop Only) */
@media (min-width: 992px) {
    .step-icon-wrapper-detail::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 100%;
        width: 100%; /* Panjang garis ke kanan */
        height: 2px;
        background-color: #e5e7eb;
        z-index: 0;
        transform: translateY(-50%);
    }
    
    /* Hilangkan garis pada item terakhir */
    .col-nusa-5:last-child .step-icon-wrapper-detail::after {
        display: none;
    }
}

.step-icon-box {
    width: 100px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 50%; /* Lingkaran */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 2px solid #e5e7eb;
    position: relative;
    z-index: 1; /* Di atas garis */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.step-icon-box:hover {
    border-color: var(--nusa-digital-blue);
    transform: scale(1.1);
    box-shadow: 0 10px 15px rgba(42, 111, 242, 0.2);
}

.step-icon-box img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    /* Normalnya icon berwarna asli / gelap */
    transition: filter 0.3s;
}

/* Label Step (Angka Kecil) */
.step-label {
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #9ca3af; /* Abu-abu */
    font-weight: 700;
    margin-top: 15px;
    display: block;
}

.step-title-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--nusa-soft-black); /* Judul Hitam */
    max-width: 200px;
    margin: 5px auto 0 auto;
    line-height: 1.3;
}

/* Custom Grid 5 Kolom */
@media (min-width: 992px) {
    .col-nusa-5 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* --- BUTTONS --- */
.btn-neon-action {
    background: linear-gradient(135deg, var(--nusa-digital-blue), #1e5bbd);
    color: #fff;
    border: none;
    font-weight: 600;
    border-radius: 50px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-neon-action:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(42, 111, 242, 0.3);
}

.btn-outline-custom {
    background: transparent;
    color: var(--nusa-digital-blue);
    border: 2px solid var(--nusa-digital-blue);
    font-weight: 600;
    border-radius: 50px;
}

.btn-outline-custom:hover {
    background: var(--nusa-digital-blue);
    color: #fff;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .service-hero-img-wrapper img { height: 350px; }
    .hero-title-detail { font-size: 2.5rem; }
    .step-icon-wrapper-detail::after { display: none; } /* Hapus garis di mobile */
    .col-nusa-5 { width: 50%; margin-bottom: 30px; } /* Jadi 2 kolom di tablet */
}

@media (max-width: 576px) {
    .col-nusa-5 { width: 100%; } /* Jadi 1 kolom di HP */
    .hero-title-detail { font-size: 2rem; }
}

/* =========================================
   27. ABOUT PAGE - HERO SECTION (LIGHT VERSION)
   ========================================= */

.about-hero-section {
    background-color: #ffffff; /* Background Putih */
    
    /* Membuat Pola Dotted (Titik-titik) Halus */
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 32px 32px; /* Jarak antar titik */
    
    padding-top: 180px; /* Jarak atas lebih lega */
    padding-bottom: 20px;
    position: relative;
    min-height: 80vh; /* Tampilan lebih tinggi dan lega */
    display: flex;
    align-items: center;
    color: var(--nusa-soft-black); /* Text jadi gelap */
}

/* Judul Besar */
.about-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--nusa-soft-black); /* Warna hitam soft */
    line-height: 1.2;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

/* Efek Gradient Text (Hijau ke Biru seperti referensi) */
.about-hero-title .text-gradient {
    background: linear-gradient(90deg, var(--nusa-mint-green) 0%, var(--nusa-digital-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Deskripsi Teks */
.about-hero-desc {
    color: #4b5563; /* Abu-abu tua agar kontras di background putih */
    font-size: 1.15rem;
    line-height: 1.8;
    margin: 0 auto 50px auto;
    max-width: 800px;
    font-weight: 400;
}

/* Tombol Get Started (Style Outline / Modern) */
.btn-about-hero {
    background-color: transparent;
    color: var(--nusa-soft-black);
    font-weight: 600;
    font-size: 1rem;
    padding: 14px 45px;
    border-radius: 50px; /* Rounded pill shape */
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border: 2px solid #e5e7eb; /* Border abu tipis */
}

.btn-about-hero:hover {
    border-color: var(--nusa-digital-blue);
    background-color: #ffffff;
    color: var(--nusa-digital-blue);
    box-shadow: 0 4px 15px rgba(42, 111, 242, 0.15);
    transform: translateY(-2px);
}

/* Responsif */
@media (max-width: 991px) {
    .about-hero-section {
        padding-top: 140px;
        min-height: auto;
        text-align: center;
    }
    
    .about-hero-title {
        font-size: 2.5rem;
    }
    
    .about-hero-desc {
        font-size: 1rem;
        padding: 0 20px;
    }
}

/* =========================================
   28. ABOUT PAGE - WHY CHOOSE US SECTION (LIGHT VERSION)
   ========================================= */

.section-why-choose {
    background-color: #ffffff; /* Background Putih */
    
    /* Pola Dotted (Titik-titik) Halus - Sama seperti Hero Section */
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    
    padding-top: 80px;
    padding-bottom: 120px;
}

/* 1. Header Section */
.why-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--nusa-soft-black); /* Warna Hitam Soft */
    margin-bottom: 60px;
    letter-spacing: -1px;
}

/* Highlight Text (Warna Oranye sesuai referensi) */
.why-title .text-highlight {
    color: #fd7e14; /* Warna Oranye Cerah */
    position: relative;
    display: inline-block;
}

/* 2. Card Style (White Box) */
.why-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    height: 100%;
    
    /* Border halus & Shadow lembut */
    border: 1px solid #f3f4f6; 
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
    
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.why-card:hover {
    transform: translateY(-10px); /* Efek naik saat hover */
    box-shadow: 0 20px 60px -15px rgba(0,0,0,0.1); /* Shadow makin nyata */
    border-color: #e5e7eb;
}

/* 3. Icon Wrapper */
.why-icon-wrapper {
    margin-bottom: 30px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-icon-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Drop shadow pada icon agar terlihat 3D dan melayang */
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.1));
    transition: transform 0.5s ease;
}

/* Efek Hover pada Icon (Zoom In & Sedikit Miring) */
.why-card:hover .why-icon-wrapper img {
    transform: scale(1.1) rotate(5deg);
}

/* 4. Typography Content */
.why-card-title {
    color: var(--nusa-digital-blue); /* Judul Biru sesuai referensi */
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
}

.why-card-desc {
    color: #6b7280; /* Abu-abu medium agar enak dibaca di background putih */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
    font-weight: 400;
}

/* 5. Responsif Mobile */
@media (max-width: 768px) {
    .why-title {
        font-size: 2.2rem;
    }
    .why-card {
        padding: 30px 20px;
        box-shadow: 0 5px 20px -5px rgba(0,0,0,0.05); /* Shadow lebih ringan di HP */
    }
}

/* =========================================
   29. ABOUT PAGE - TEAM SECTION (LIGHT VERSION)
   ========================================= */

.section-team {/*
    background-color: var(--nusa-bg-dark);*/
    padding-top: 80px;
    padding-bottom: 100px;
}

.team-section-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--nusa-soft-black);
    margin-bottom: 60px;
}

/* Menggunakan class gradient yang sama dengan Hero Section */
.team-section-title .text-gradient {
    background: linear-gradient(90deg, var(--nusa-mint-green) 0%, var(--nusa-digital-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* --- TEAM CARD (White Box Style) --- */
.team-card {
    background: #ffffff;
    border: 1px solid #f3f4f6; /* Border sangat tipis */
    border-radius: 20px;       /* Sudut membulat */
    padding: 35px 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02); /* Shadow awal sangat halus */
    position: relative;
    overflow: hidden;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* Shadow lebih nyata saat hover */
}

/* --- PHOTO STYLING (Gradient Ring) --- */
.team-img-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 25px auto;
    border-radius: 50%;
    
    /* Membuat ring gradient */
    background: linear-gradient(135deg, var(--nusa-mint-green), var(--nusa-digital-blue));
    padding: 3px; /* Ketebalan ring gradient */
}

.team-img-box {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
    border: 3px solid #ffffff; /* Memberi jarak putih antara foto dan ring gradient */
}

.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Hover Effect pada Foto */
.team-card:hover .team-img {
    transform: scale(1.1); /* Zoom in halus */
}

/* --- TEXT INFO --- */
.team-name {
    color: var(--nusa-soft-black);
    font-weight: 700;
    font-size: 1.35rem;
    margin-bottom: 5px;
}

.team-position {
    color: var(--nusa-digital-blue); /* Jabatan berwarna biru */
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* =========================================
   30. ABOUT PAGE - VISION & MISSION (LIGHT VERSION)
   ========================================= */

.section-vis-mis {
    background-color: #ffffff; /* Background Putih */
    
    /* Pola Dotted (Titik-titik) Halus - Konsisten dengan section lain */
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    
    padding-top: 20px;
    padding-bottom: 70px;
}

/* Judul Utama */
.vm-main-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--nusa-soft-black);
    letter-spacing: -1px;
    margin-bottom: 30px;
}

/* Class gradient text (Sama seperti Hero Section) */
.vm-main-title .text-gradient {
    background: linear-gradient(90deg, var(--nusa-mint-green) 0%, var(--nusa-digital-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* --- VISION BOX (Modern Quote Style) --- */
.vision-box {
    max-width: 900px;
    margin: 0 auto 100px auto;
    padding: 60px 40px;
    position: relative;/* 
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); Background Biru Muda Halus */
    border-radius: 20px;/* --- 
    border: 1px solid #bae6fd;--- */
    text-align: center;
}

/* Ikon Petik Besar di background */
.vision-box::before {
    content: '“';
    font-family: serif;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8rem;
    line-height: 1;
    color: rgba(42, 111, 242, 0.1); /* Biru transparan */
    pointer-events: none;
}

.vision-text {
    font-size: 2.0rem;
    color: #0c4a6e; /* Biru Gelap agar kontras di bg muda */
    line-height: 1.6;
    font-style: italic;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

/* --- MISSION CARD (White Card) --- */
.vm-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    border: 1px solid #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Shadow halus */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.vm-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #bfdbfe; /* Border biru muda saat hover */
}

/* 1. Icon Wrapper */
.vm-icon-box {
    height: 100px; /* Ukuran sedikit diperkecil agar proporsional */
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vm-icon-box img {
    max-height: 100%;
    width: auto;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    transition: transform 0.5s ease;
}

/* 2. Animasi Hover Icon (Zoom & Tilt) */
/* Lebih elegan untuk light mode daripada spin 360 */
.vm-card:hover .vm-icon-box img {
    transform: scale(1.15) rotate(3deg);
}

/* 3. Tipografi Card */
.vm-card-title {
    color: var(--nusa-digital-blue); /* Judul Biru */
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    min-height: 50px; /* Agar card rata jika judul panjang */
    display: flex;
    align-items: center;
    justify-content: center;
}

.vm-card-desc {
    color: #64748b; /* Abu-abu Slate */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Penyesuaian Responsif */
@media (max-width: 768px) {
    .vm-main-title { font-size: 2.2rem; }
    .vision-text { font-size: 1.2rem; padding: 0 10px; }
    .vision-box { padding: 40px 20px; }
    .vm-icon-box { height: 90px; }
    .vm-card-title { min-height: auto; margin-bottom: 10px; }
}

/* =========================================
   31. BLOGS & ARTICLES PAGE STYLES (LIGHT THEME)
   ========================================= */

.section-blog-header {
    background-color: #ffffff;
    /* Pola Dotted Konsisten */
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    padding-top: 140px; 
    padding-bottom: 50px;
    text-align: center;
}

.blog-main-title {
    font-size: 4rem;
    font-weight: 800;
    color: var(--nusa-soft-black);
    letter-spacing: -2px;
}

/* Gradient Text untuk aksen "Articles" */
.text-gradient-blog {
    background: linear-gradient(to right, var(--nusa-coral-red), var(--nusa-digital-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-blog-list {
    background-color: #ffffff;
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    padding-bottom: 120px;
}

/* Card Styling - Clean White */
.blog-card {
    background-color: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 24px;
    padding: 25px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    position: relative;
}

.blog-card:hover {
    transform: translateY(-12px);
    border-color: var(--nusa-digital-blue);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Image Wrapper */
.blog-img-wrapper {
    width: 100%;
    height: 220px;
    background-color: #f8fafc;
    border-radius: 16px;
    margin-bottom: 25px;
    overflow: hidden;
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card:hover .blog-img {
    transform: scale(1.1);
}

/* Typography */
.blog-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--nusa-soft-black);
    line-height: 1.3;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-date {
    color: var(--nusa-digital-blue); /* Aksen Biru */
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-excerpt {
    color: #64748b; /* Slate Grey */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Author Info */
.blog-author-box {
    border-top: 1px solid #f1f5f9;
    padding-top: 15px;
}

.author-label {
    font-size: 0.8rem;
    color: #94a3b8;
    display: block;
    margin-bottom: 2px;
}

.author-name {
    color: var(--nusa-coral-red); /* Aksen Merah */
    font-weight: 700;
    font-size: 1rem;
}

/* Pagination Customization */
.pagination .page-link {
    color: var(--nusa-digital-blue);
    border-radius: 8px;
    margin: 0 3px;
}

.pagination .page-item.active .page-link {
    background-color: var(--nusa-digital-blue);
    border-color: var(--nusa-digital-blue);
}

@media (max-width: 768px) {
    .blog-main-title { font-size: 2.8rem; }
    .blog-card { padding: 20px; }
}

/* =========================================
   32. BLOG DETAIL PAGE STYLES (LIGHT THEME)
   ========================================= */

.blog-detail-wrapper {
    background-color: #ffffff;
    /* Pola Dotted Konsisten */
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    padding-top: 140px; 
    padding-bottom: 100px;
}

/* --- Kolom Utama --- */
.blog-main-img-wrapper {
    width: 100%;
    margin-bottom: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-radius: 20px;
    overflow: hidden;
}

.blog-main-img {
    width: 100%;
    object-fit: cover;
    max-height: 550px;
    display: block;
}

.blog-detail-title {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--nusa-soft-black);
    line-height: 1.2;
    margin-bottom: 30px;
    letter-spacing: -2px;
}

.blog-detail-meta {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f1f5f9;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #64748b;
    font-weight: 600;
}

.meta-icon-circle {
    width: 45px;
    height: 45px;
    background-color: #f1f5f9; /* Abu-abu sangat muda */
    color: var(--nusa-digital-blue); /* Ikon berwarna Biru */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

/* Variasi warna ikon untuk meta */
.meta-item:nth-child(2) .meta-icon-circle {
    color: var(--nusa-coral-red); /* Ikon kedua berwarna Merah Coral */
}

.blog-content-body {
    color: #334155; /* Teks gelap yang nyaman dibaca */
    font-size: 1.15rem;
    line-height: 1.9;
}

.blog-overview-text {
    font-size: 1.25rem;
    color: var(--nusa-soft-black);
    border-left: 5px solid var(--nusa-sunny-yellow);
    padding-left: 20px;
    margin-bottom: 40px;
    font-weight: 600;
}

/* --- Sidebar Berita Terbaru --- */
.blog-sidebar {
    background-color: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 24px;
    padding: 35px;
    position: sticky;
    top: 120px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.sidebar-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--nusa-soft-black);
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.recent-post-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    align-items: center;
}

.recent-post-item:hover {
    transform: translateX(8px);
}

.recent-thumb-wrapper {
    width: 85px;
    height: 85px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 12px;
}

.recent-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #f1f5f9;
}

.recent-post-title {
    color: var(--nusa-soft-black);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.recent-post-item:hover .recent-post-title {
    color: var(--nusa-digital-blue);
}

.recent-post-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.recent-post-date i {
    color: var(--nusa-coral-red);
}

@media (max-width: 991px) {
    .blog-detail-title { font-size: 2.2rem; }
    .blog-sidebar { margin-top: 60px; position: static; }
}

/* =========================================
   33. CONTACT PAGE STYLES (LIGHT THEME)
   ========================================= */

.contact-page-wrapper {
    background-color: #ffffff;
    /* Pola Dotted Konsisten */
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    padding-top: 140px; 
    padding-bottom: 120px;
}

/* Header Page */
.contact-header-title {
    font-size: 4rem;
    font-weight: 800;
    color: var(--nusa-soft-black);
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: -2px;
}

.contact-header-desc {
    color: #64748b; /* Slate Grey */
    text-align: center;
    max-width: 750px;
    margin: 0 auto 80px;
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Left Column Info */
.contact-info-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--nusa-soft-black);
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -1.5px;
}

.contact-info-desc {
    color: #64748b;
    margin-bottom: 50px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.contact-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
    margin-bottom: 60px;
}

.info-label {
    color: var(--nusa-digital-blue); /* Menggunakan Biru Digital agar lebih korporat */
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    display: block;
}

.info-value {
    color: var(--nusa-soft-black);
    font-size: 1.05rem;
    font-weight: 600;
    word-break: break-word;
}

/* Social Media Circles (Modern Style) */
.social-list-contact {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.social-circle {
    width: 45px;
    height: 45px;
    background-color: #f1f5f9;
    color: var(--nusa-soft-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-circle:hover {
    transform: translateY(-5px);
    background-color: var(--nusa-digital-blue);
    color: #FFFFFF;
    box-shadow: 0 10px 15px -3px rgba(42, 111, 242, 0.3);
}

/* Right Column Form (Clean White Design) */
.contact-form-card {
    background-color: #ffffff;
    border-radius: 30px;
    padding: 50px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08) !important;
}

.contact-form-card .form-label {
    color: var(--nusa-soft-black);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.contact-form-card .form-control {
    background-color: #f8fafc; /* Background input sangat cerah */
    border: 1.5px solid #edf2f7;
    border-radius: 12px;
    color: var(--nusa-soft-black);
    padding: 15px 20px;
    transition: all 0.3s ease;
}

.contact-form-card .form-control:focus {
    background-color: #ffffff;
    border-color: var(--nusa-digital-blue);
    box-shadow: 0 0 0 4px rgba(42, 111, 242, 0.1);
}

.btn-send-contact {
    background-color: var(--nusa-soft-black);
    color: #FFFFFF;
    font-weight: 700;
    padding: 18px;
    border-radius: 15px;
    border: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.btn-send-contact:hover {
    background-color: var(--nusa-digital-blue);
    transform: translateY(-3px);
    box-shadow: 0 15px 25px -5px rgba(42, 111, 242, 0.3);
}

@media (max-width: 991px) {
    .contact-header-title { font-size: 2.8rem; }
    .contact-header-desc { margin-bottom: 60px; }
    .contact-info-title { font-size: 2.4rem; }
    .contact-detail-grid { grid-template-columns: 1fr; gap: 30px; }
    .contact-form-card { padding: 30px; }
}

/* =========================================
   34. ADMIN LOGIN PAGE STYLES
   ========================================= */

/* Wrapper utama agar layar terbagi dua & full height */
.admin-login-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background-color: var(--nusa-bg-dark);
    overflow-x: hidden;
}

/* Bagian Kiri (Gambar Banner) */
.login-left-banner {
    display: none; /* Hidden di HP */
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay gelap di atas gambar banner agar elegan */
.login-left-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}

/* Bagian Kanan (Area Form) */
.login-right-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background-color: #fff; /* Paksa background gelap */
    position: relative;
    z-index: 1;
}

/* Card Login Transparan (Override Bootstrap Card Putih) */
.login-card-transparent {
    width: 100%;
    max-width: 400px;
    background: transparent !important; /* Hapus background putih default */
    border: none !important;
    box-shadow: none !important;
}

/* Logo Admin */
.login-logo-img {
    max-height: 50px;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Teks Judul */
.login-title {
    color: var(--nusa-coral-red);
    font-weight: 800;
    text-align: center;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.login-subtitle {
    color: #888;
    text-align: center;
    font-size: 0.9rem;
    margin-bottom: 35px;
}

/* Input Form Custom */
.login-input-field {
    background-color: #ffffff !important;
    color: #fff !important;
    padding: 14px 15px;
    border-radius: 10px;
    font-size: 1rem;
}

.login-input-field:focus {
    background-color: #ececec !important;
    border-color: var(--nusa-coral-red) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(246, 198, 38, 0.2) !important;
    outline: none;
}

/* Checkbox Label */
.form-check-label {
    color: #aaa;
    font-size: 0.9rem;
}

/* Tombol Login */
.btn-login-admin {
    background-color: var(--nusa-coral-red);
    color: #ffffff;
    font-weight: 800;
    padding: 14px;
    border-radius: 10px;
    border: none;
    width: 100%;
    text-transform: uppercase;
    transition: all 0.3s ease;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.btn-login-admin:hover {
    background-color: var(--nusa-digital-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

/* Link Lupa Password */
.login-forgot-link {
    color: var(--nusa-neon);
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

.login-forgot-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* Footer Copyright */
.login-footer {
    text-align: center;
    color: #444;
    font-size: 0.8rem;
    margin-top: 50px;
}

/* Tampilan Desktop (Layar Besar) */
@media (min-width: 992px) {
    .login-left-banner {
        display: block;
        flex: 1.4; /* Gambar mengambil porsi lebih besar (sekitar 58%) */
    }
    .login-right-form {
        flex: 1; /* Form mengambil sisa (sekitar 42%) */
    }
}

/* =========================================
   35. HOME - SERVICES SECTION 2 (LIGHT VERSION)
   ========================================= */

.section-page-services {/* 
    background-color: #0f0f0f; */
    background-size: 30px 30px;
    padding: 100px 0;
    position: relative;
}

/* Judul Utama Gradient */
.service-title-main {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

/* Warna Spesifik "What We Do" */
.text-cyan { color: #48cae4; }
.text-purple { color: #9d4edd; }

.service-subtitle {
    color: #a0a0a0;
    font-size: 1.1rem;
    max-width: 850px;
    margin: 0 auto 20px auto;
    line-height: 1.6;
}

/* Service Card (White Style) */
.card-service {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 40px 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
}

.card-service:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Icon Wrapper (Tanpa Background) */
.service-icon-wrapper {
    width: auto;    /* Hapus ukuran fix 80px */
    height: auto;   /* Hapus ukuran fix 80px */
    
    background-color: transparent; /* Ubah dari #fff9e6 menjadi transparent */
    border-radius: 0;              /* Hapus border radius 50% */
    
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px; /* Sedikit tambah jarak ke bawah */
}

/* Icon Image (Lebih Besar) */
.service-icon-img {
    /* Atur ukuran icon langsung di sini */
    width: 110px;  /* Diperbesar (sebelumnya max-width 50% dari 80px = 40px) */
    height: 110px;
    
    object-fit: contain;
    
    /* Reset properti max yang lama */
    max-width: none; 
    max-height: none;
    
    /* Tambahan: Drop shadow agar icon lebih menonjol di background putih */
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.1));
    transition: transform 0.3s ease;
}

/* Efek Hover (Opsional: Icon membesar sedikit saat card di-hover) */
.card-service:hover .service-icon-img {
    transform: scale(1.1);
}

/* Button Detil (Blue Outline) */
.btn-service-detail-outline {
    border: 1.5px solid #2a6ff2;
    color: #2a6ff2;
    background: transparent;
    padding: 8px 0;
    width: 100%;
    border-radius: 50px; /* Pill shape */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-service-detail-outline:hover {
    background-color: #2a6ff2;
    color: #ffffff;
}

/* Responsivitas */
@media (max-width: 991px) {
    .service-title-main { font-size: 2.5rem; }
}