@import url('https://fonts.googleapis.com/css2?family=Inter:wght=300;400;500;600;700;800;900&display=swap');
        
        :root {
            --nyc-navy: #0c2340;
            --nyc-blue: #3b82f6;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #fcfdfe;
        }

        #map {
            width: 100%;
            height: 580px;
            border-radius: 0;
            border: 1px solid #e2e8f0;
            box-shadow: 0 35px 60px -15px rgba(12, 35, 64, 0.12);
            z-index: 10;
            max-width: 100%;
        }

        @media (max-width: 768px) {
            #map {
                height: 615px;
                border-radius: 0;
            }
        }

        /* AdSense Placeholder Styles */
        .adsense-box {
            background-image: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #ffffff 10px, #ffffff 20px);
            border: 2px dashed #cbd5e1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            font-size: 0.7rem;
            position: relative;
        }

        .adsense-box::after {
            content: "SECURE ADVERTISING NODE";
            position: absolute;
            bottom: 8px;
            font-size: 0.5rem;
            opacity: 0.4;
        }

        /* Custom 5G Marker Style */
        .marker-pin {
            width: 28px;
            height: 28px;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 8px;
            font-weight: 900;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            border: 2px solid white;
        }

        .marker-pin.nyc-kiosk {
            background-color: #00a8ff; /* Vibrant Blue from Image 2 */
            color: white;
            border-color: white;
        }

        .marker-pin.smart-pole {
            background-color: white;
            color: #0c2340; /* Navy */
            border-color: #0c2340;
            flex-direction: column;
            gap: 0px;
            padding: 2px;
        }
        
        .custom-5g-marker:hover .marker-pin {
            transform: scale(1.2) translateY(-4px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
        }

        .filter-btn.active {
            background-color: var(--nyc-navy);
            color: white;
            border-color: var(--nyc-navy);
            transform: translateY(-2px);
            box-shadow: 0 12px 20px -5px rgba(12, 35, 64, 0.3);
        }

        /* Custom Cluster Styles - Updated for higher contrast */
        .nyc-detailed-popup .leaflet-popup-content-wrapper {
            background-color: white;
            border-radius: 0;
            padding: 0;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .nyc-detailed-popup .leaflet-popup-content {
            margin: 0;
            width: auto !important;
        }

        .nyc-detailed-popup .leaflet-popup-tip {
            background-color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .marker-cluster-small { background-color: rgba(14, 165, 233, 0.4); }
        .marker-cluster-small div { background-color: rgba(14, 165, 233, 0.85); color: white; font-weight: 900; }
        .marker-cluster-medium { background-color: rgba(2, 132, 199, 0.4); }
        .marker-cluster-medium div { background-color: rgba(2, 132, 199, 0.9); color: white; font-weight: 900; }
        .marker-cluster-large { background-color: rgba(12, 35, 64, 0.4); }
        .marker-cluster-large div { background-color: rgba(12, 35, 64, 0.9); color: white; font-weight: 900; }

        /* Loading Indicator */
        #map-loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            background: white;
            padding: 1.5rem 2.5rem;
            border-radius: 0;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 1rem;
            border: 1px solid #f1f5f9;
        }

        html { scroll-behavior: smooth; }
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: #f8fafc; }
        ::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

        -webkit-user-select: none;  /* Safari */
        -moz-user-select: none;     /* Firefox */
        -ms-user-select: none;      /* IE 10+ dan Edge */
        user-select: none;          /* Standar standar (Chrome, Opera) */