/* =========================================
           LIGHT THEME OVERRIDES
        ========================================= */
        body {
            background-color: #fcfcfc !important;
            color: #111111 !important;
        }

        /* Glassmorphism -> Light Frost */
        .glass, .navbar.glass {
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 0, 0, 0.08) !important;
        }
        .navbar a { color: #111 !important; }

        /* Hero Text */
        .design-hero h1 { color: #111 !important; }
        .design-hero p { color: #555 !important; }
        .hero-badge { background: #fff !important; color: #111 !important; border: 1px solid #eaeaea !important; }
        .stat-item .stat-number { color: #111 !important; }
        .stat-item .stat-label { color: #777 !important; }

        /* TAG FILTERS */
        .portfolio-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            margin: 0 auto 40px auto;
            width: min(90%, 1100px);
        }
        .filter-btn {
            background: #ffffff !important;
            border: 1px solid #dcdcdc !important;
            color: #555 !important;
            padding: 10px 24px;
            border-radius: 30px;
            font-family: 'SF Pro Display', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .filter-btn:hover {
            background: #f1f1f1 !important;
            color: #111 !important;
            transform: translateY(-2px);
        }
        .filter-btn.active {
            background: #111111 !important;
            border-color: #111111 !important;
            color: #ffffff !important;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
        }

        /* Design Cards (Bento) */
        .design-card {
            background: #ffffff !important;
            border-radius: 20px !important;
            border: 1px solid #eaeaea !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
        }
        .design-overlay {
            background: linear-gradient(to top, rgba(255,255,255,1) 10%, rgba(255,255,255,0.7) 70%, transparent) !important;
        }
        .design-overlay h3 { color: #111 !important; }
        .design-overlay .design-tag { background: #111 !important; color: #fff !important; }
        
        /* PILL TAGS (Di Card Grid & Di Dalam Modal) */
.design-tag, #modalTag {
    background: #111111 !important;
    color: #ffffff !important;
    padding: 6px 18px !important;
    border-radius: 50px !important; /* Membuat bentuk pill */
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.1);
}
#modalTag {
    margin-bottom: 18px;
}

        /* Buttons & Load More */
        .btn-load { color: #111 !important; background: #fff !important; }
        .btn-load:hover { background: #f1f1f1 !important; }

        /* Capabilities Cards */
        .section-header-left h2, .section-header h2 { color: #111 !important; }
        .section-header-left span, .section-header span { color: #777 !important; }
        .section-header p { color: #555 !important; }
        .cap-card {
            background: #ffffff !important;
            border: 1px solid #eaeaea !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
        }
        .cap-card h3 { color: #111 !important; }
        .cap-card p { color: #555 !important; }
        .cap-icon { color: #111 !important; }

        /* Footer */
        .footer-line { background: #eaeaea !important; }
        .footer-bottom p, .back-top { color: #777 !important; }
        .back-top:hover { color: #111 !important; }

        /* Chat AI */
        .chat-toggle { background: #111 !important; color: #fff !important; }
        .chat-window { background: #fff !important; border: 1px solid #eaeaea !important; }
        .chat-header { border-bottom: 1px solid #eaeaea !important; }
        .chat-title h3 { color: #111 !important; }
        .chat-messages .bot { background: #f1f1f1 !important; color: #111 !important; }
        .chat-input { border-top: 1px solid #eaeaea !important; }
        .chat-input input { background: #f9f9f9 !important; color: #111 !important; border: 1px solid #eaeaea !important; }

        /* =========================================
           MOCKUP SHOWCASE MASONRY (LIGHT THEME)
        ========================================= */
        .mockup-showcase { padding: 100px 0; width: min(90%, 1100px); margin: 0 auto; }
        .mockup-masonry { column-count: 2; column-gap: 20px; margin-top: 50px; }
        .mockup-item {
            position: relative; border-radius: 20px; overflow: hidden;
            border: 1px solid #eaeaea; margin-bottom: 20px; break-inside: avoid;
            transform: translateZ(0); transition: border-color 0.4s ease, transform 0.4s ease;
        }
        .mockup-item img { width: 100%; height: auto; display: block; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
        .mockup-item:hover { border-color: #ccc; box-shadow: 0 15px 35px rgba(0,0,0,0.08); }
        .mockup-item:hover img { transform: scale(1.03); }
        
        .item-overlay {
            position: absolute; bottom: 0; left: 0; padding: 40px 30px 24px;
            background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0.8), transparent);
            width: 100%; opacity: 0; transform: translateY(15px); transition: all 0.4s ease;
        }
        .mockup-item:hover .item-overlay { opacity: 1; transform: translateY(0); }
        .item-overlay h3 { margin: 0; color: #111; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.5px; }

        @media (max-width: 992px) { .mockup-masonry { column-count: 2; } }
        @media (max-width: 650px) {
            .mockup-masonry { column-count: 1; }
            .item-overlay { opacity: 1; transform: translateY(0); }
        }

/* =========================================
           FULLSCREEN SPLIT-LAYOUT MODAL
        ========================================= */
        .project-modal {
            position: fixed; 
            inset: 0; 
            z-index: 9999; 
            display: none; 
            overflow-y: auto; 
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch; 
            background: #ffffff; 
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .project-modal.active { 
            display: block; 
            opacity: 1;
        }

        .modal-backdrop { display: none; }

        .modal-container {
            background: #ffffff;
            width: 100%;
            margin: 0 auto; 
            position: relative;
            min-height: 100vh; 
            animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes slideUpFade {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tombol Close Melayang (Sticky di pojok kanan) */
        .modal-close {
            position: fixed; 
            top: 30px; 
            right: 40px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 50%; 
            width: 54px; 
            height: 54px;
            display: flex; 
            align-items: center; 
            justify-content: center;
            cursor: pointer; 
            color: #111; 
            z-index: 100;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .modal-close:hover { 
            background: #111; 
            color: #fff; 
            transform: scale(1.05) rotate(90deg);
        }

        /* Cover Image Edge-to-Edge dengan Efek Gradasi & Blur */
        .modal-image-wrapper {
            position: relative;
            width: 100%; 
            background: #ffffff; /* Menyatu sempurna dengan konten di bawahnya */
        }
        
        .modal-image-wrapper img {
            width: 100%; 
            height: auto; 
            max-height: 75vh; 
            object-fit: cover; 
            display: block;
        }

        /* Efek Magis: Gradasi Putih + Blur secara perlahan dari transparan */
        .modal-image-wrapper::after {
            content: '';
            position: absolute;
            bottom: -1px; /* Mengatasi 1px celah garis (bug render) di beberapa browser */
            left: 0;
            width: 100%;
            height: 35%; /* Mengambil 35% area bawah gambar untuk ditransisikan */
            
            /* 1. Gradasi Warna Putih */
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 95%);
            
            /* 2. Efek Kaca Buram (Blur) */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            
            /* 3. Masking agar Blur-nya juga ikut bergradasi dari 0 ke full */
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 70%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 70%);
            
            pointer-events: none; /* Mencegah elemen ini menghalangi interaksi klik */
        }

        /* --- GRID DUA KOLOM UNTUK DESKTOP --- */
        .modal-layout-grid {
            display: grid;
            grid-template-columns: 380px 1fr; /* Kiri 380px, Kanan selebihnya */
            gap: 80px; /* Jarak antar kolom lebar */
            max-width: 1280px; /* Batas konten web profesional */
            margin: 0 auto;
            padding: 80px 40px 120px 40px;
        }

        /* Kolom Kiri: Menempel di layar saat discroll */
        .modal-sidebar {
            position: sticky;
            top: 60px; /* Jarak dari atap layar */
            align-self: start; /* Wajib agar sticky jalan di Grid */
        }

        /* Kolom Kanan: Bebas scroll ke bawah */
        .modal-main-content {
            width: 100%;
        }

        /* PILL TAGS */
        .design-tag, #modalTag {
            background: #111111 !important;
            color: #ffffff !important;
            padding: 8px 20px !important;
            border-radius: 50px !important; 
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            display: inline-block;
            border: 1px solid rgba(0,0,0,0.1);
        }
        #modalTag { margin-bottom: 24px; }

        /* Tipografi Elegan */
        #modalTitle {
            font-size: 3.2rem; 
            font-weight: 700; 
            color: #111;
            margin: 0 0 20px 0; 
            letter-spacing: -1.5px; 
            line-height: 1.1;
        }
        #modalDesc {
            font-size: 1.1rem; 
            line-height: 1.8; 
            color: #666; 
            margin: 0;
        }

        /* Styling Konten Builder (Kolom Kanan) */
        #modalSubGallery { display: flex; flex-direction: column; gap: 30px; }
        #modalSubGallery p { color: #333 !important; font-size: 1.15rem !important; line-height: 1.8 !important; margin: 0;}
        #modalSubGallery img { border: 1px solid #eaeaea !important; border-radius: 16px !important; width: 100%; height: auto; display: block; box-shadow: 0 20px 40px rgba(0,0,0,0.03);}
        #modalSubGallery a { 
            background: #111111 !important; color: #ffffff !important; 
            padding: 16px 36px !important; border-radius: 50px !important;
            display: inline-block; font-size: 0.95rem; font-weight: 600; text-decoration: none;
            transition: all 0.3s ease; align-self: flex-start;
        }
        #modalSubGallery a:hover { background: #333333 !important; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;}

        /* --- RESPONSIVE UNTUK TABLET & HP --- */
        @media (max-width: 1024px) {
            .modal-layout-grid {
                grid-template-columns: 1fr; /* Berubah jadi satu kolom menumpuk */
                gap: 40px;
                padding: 60px 30px 100px 30px;
            }
            .modal-sidebar {
                position: relative; /* Matikan efek sticky */
                top: 0;
                border-bottom: 1px solid #eaeaea;
                padding-bottom: 40px;
            }
            #modalTitle { font-size: 2.5rem; }
        }
        @media (max-width: 650px) {
            .modal-layout-grid { padding: 40px 20px 80px 20px; }
            .modal-close { top: 20px; right: 20px; width: 44px; height: 44px; }
            #modalTitle { font-size: 2rem; }
        }