diff --git a/Maklumat data Sazwan b/Maklumat data Sazwan
new file mode 100644
index 0000000..2853bfe
--- /dev/null
+++ b/Maklumat data Sazwan	
@@ -0,0 +1,614 @@
+# 🚀 SGAE 2.0 MASTER v38 · 5 KOMPONEN BAHARU
+
+Saya tambahkan **5 komponen baharu** yang melengkapkan sistem GRAN + Peta Bumi + Gelombang anda:
+
+| # | Komponen | Fungsi |
+|---|----------|--------|
+| **1** | **📊 GRAN Chart Interaktif** | Carta bar/donut nilai GRAN + timeline pertumbuhan |
+| **2** | **🛰️ Satellite Orbit Viewer** | Visualisasi orbit satelit SGAE (GEO/LEO/MEO/SSO) |
+| **3** | **🌦️ Live Weather** | Cuaca masa nyata di 13 lokasi GRAN utama |
+| **4** | **📜 GRAN Document Viewer** | Paparan dokumen hak milik (Title Deeds) |
+| **5** | **🌐 3D Earth Globe** | Globe interaktif 3D dengan penanda GRAN + orbit satelit |
+
+---
+
+## 📄 `sgae_master_v38_complete.html`
+
+Gantikan **5 tab** sahaja dalam fail v37 anda dengan kod di bawah. Semua data v37 dikekalkan.
+
+### Tambahan 1-5: Kod untuk 5 Tab Baharu
+
+**Langkah 1:** Tambahkan **5 tab baharu** dalam `<div class="tabs">`:
+
+```html
+<div class="tab gran" data-tab="gran_chart">📊 GRAN Chart</div>
+<div class="tab" data-tab="satellite_orbit">🛰️ Satellite Orbit</div>
+<div class="tab" data-tab="weather">🌦️ Live Weather</div>
+<div class="tab" data-tab="gran_docs">📜 GRAN Docs</div>
+<div class="tab map" data-tab="globe3d">🌐 3D Globe</div>
+```
+
+**Langkah 2:** Tambahkan **5 section** dalam `<div class="container">` (letak selepas section `gelombang`):
+
+```html
+<!-- 1. GRAN CHART -->
+<div class="section" id="gran_chart">
+  <div class="card"><h2>📊 GRAN Tanah · Carta Nilai</h2><div id="granChartTanah"></div></div>
+  <div class="card"><h2>📊 GRAN Global · Carta Nilai</h2><div id="granChartGlobal"></div></div>
+  <div class="card"><h2>📈 Timeline Pertumbuhan</h2><div id="granTimeline"></div></div>
+</div>
+
+<!-- 2. SATELLITE ORBIT -->
+<div class="section" id="satellite_orbit">
+  <div class="card"><h2>🛰️ Satelit SGAE-SAT Constellation</h2><div id="satContent"></div></div>
+  <div class="card"><h2>📡 Orbit Visualization</h2><div id="orbitViz"></div></div>
+  <div class="card"><h2>🛰️ Ground Stations</h2><div id="gsContent"></div></div>
+</div>
+
+<!-- 3. LIVE WEATHER -->
+<div class="section" id="weather">
+  <div class="card"><h2>🌦️ Cuaca Masa Nyata · 13 Lokasi GRAN</h2><div id="weatherContent"></div></div>
+</div>
+
+<!-- 4. GRAN DOCS -->
+<div class="section" id="gran_docs">
+  <div class="card"><h2>📜 Dokumen Hak Milik GRAN</h2><div id="granDocsContent"></div></div>
+</div>
+
+<!-- 5. 3D GLOBE -->
+<div class="section" id="globe3d">
+  <div class="card">
+    <h2>🌐 3D Earth Globe · GRAN + Satellites</h2>
+    <div class="map-container" style="height:700px;background:#000">
+      <div id="globeContainer" style="width:100%;height:100%"></div>
+    </div>
+    <div class="map-legend">
+      <strong>🌐 Kawalan:</strong>
+      <button class="refresh-btn" onclick="toggleGlobeRotation()" style="margin-left:10px">⏯️ Pause/Play Rotation</button>
+      <button class="refresh-btn" onclick="toggleSatelliteOrbits()" style="margin-left:6px">🛰️ Toggle Satellite Orbits</button>
+    </div>
+  </div>
+</div>
+```
+
+**Langkah 3:** Tambahkan **CSS berikut** dalam `<style>`:
+
+```css
+.chart-box{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:20px;margin:12px 0;height:350px;position:relative}
+.gran-bar{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:12px}
+.gran-bar .label{min-width:140px;color:var(--muted)}
+.gran-bar .track{flex:1;height:20px;background:rgba(255,255,255,0.05);border-radius:10px;overflow:hidden;position:relative}
+.gran-bar .fill{height:100%;background:linear-gradient(90deg,#34d399,#fbbf24);border-radius:10px;transition:width 1s ease-out;display:flex;align-items:center;padding:0 8px;font-weight:600;color:#0a0f17;font-size:11px}
+.gran-bar .value{min-width:140px;text-align:right;font-family:'Roboto Mono',monospace;color:var(--gold);font-weight:600}
+.timeline-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
+.timeline-item .year{font-weight:700;color:var(--cyan);min-width:60px}
+.timeline-item .bar-track{flex:1;height:24px;background:rgba(255,255,255,0.05);border-radius:12px;position:relative;overflow:hidden}
+.timeline-item .bar-fill{height:100%;background:linear-gradient(90deg,#00e5ff,#a855f7,#ec4899);border-radius:12px;transition:width 1.2s ease}
+.timeline-item .val{min-width:160px;text-align:right;font-family:'Roboto Mono',monospace;color:var(--gold)}
+.sat-card{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;gap:12px;align-items:center}
+.sat-card .sat-icon{font-size:2rem;color:var(--cyan);animation:satPulse 2s infinite}
+@keyframes satPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}
+.sat-card .info{flex:1}
+.sat-card .info .name{font-weight:700;color:#fff;font-size:13px}
+.sat-card .info .orbit{font-size:11px;color:var(--muted);margin-top:2px}
+.sat-card .signal{font-family:'Roboto Mono',monospace;font-weight:700}
+.orbit-viz{position:relative;width:100%;height:400px;background:radial-gradient(circle at center, #0a1628, #000);border-radius:12px;overflow:hidden}
+.orbit-viz .earth{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:radial-gradient(circle, #3b82f6, #1e40af);border-radius:50%;box-shadow:0 0 40px #3b82f6,inset -10px -10px 20px rgba(0,0,0,0.5)}
+.orbit-viz .orbit{position:absolute;top:50%;left:50%;border:1px dashed rgba(0,229,255,0.3);border-radius:50%;transform:translate(-50%,-50%)}
+.orbit-viz .sat{position:absolute;top:50%;left:50%;width:10px;height:10px;background:#00e5ff;border-radius:50%;box-shadow:0 0 10px #00e5ff,0 0 20px #00e5ff}
+.weather-card{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
+.weather-card .city{font-weight:700;color:#fff;font-size:13px}
+.weather-card .temp{font-size:28px;font-weight:900;color:var(--gold);font-family:'Roboto Mono',monospace}
+.weather-card .desc{font-size:11px;color:var(--muted)}
+.weather-card .extra{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
+.doc-item{background:var(--card2);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:10px;padding:14px;margin:8px 0}
+.doc-item .title{font-weight:700;color:var(--gold);font-size:13px}
+.doc-item .meta{font-size:11px;color:var(--muted);margin:4px 0}
+.doc-item .status{display:inline-block;background:rgba(52,168,83,0.15);color:#81c995;padding:2px 10px;border-radius:10px;font-size:10px;font-weight:600;margin-top:6px}
+```
+
+**Langkah 4:** Tambahkan **JavaScript berikut** dalam `<script>` (di penghujung, sebelum `document.addEventListener('DOMContentLoaded'...)`):
+
+```javascript
+// ============================================================
+//  1. GRAN CHART
+// ============================================================
+function renderGranChart() {
+  // GRAN TANAH
+  const tanahSorted = [...GRAN_TANAH].sort((a,b) => {
+    return parseInt(b.value.replace(/[^0-9]/g,'')) - parseInt(a.value.replace(/[^0-9]/g,''));
+  });
+  const maxTanah = parseInt(tanahSorted[0].value.replace(/[^0-9]/g,''));
+  
+  let h1 = `<div style="margin-bottom:12px;color:var(--muted);font-size:12px">📌 12 lot GRAN Tanah — nilai tertinggi: <span class="gold">${tanahSorted[0].name}</span></div>`;
+  tanahSorted.forEach(g => {
+    const val = parseInt(g.value.replace(/[^0-9]/g,''));
+    const pct = (val / maxTanah) * 100;
+    h1 += `<div class="gran-bar">
+      <div class="label">${g.flag} ${g.state}</div>
+      <div class="track"><div class="fill" style="width:${pct}%">${pct.toFixed(1)}%</div></div>
+      <div class="value">${g.value}</div>
+    </div>`;
+  });
+  $('granChartTanah').innerHTML = h1;
+  
+  // GRAN GLOBAL
+  const globalSorted = [...GRAN_GLOBAL].sort((a,b) => {
+    return parseInt(b.value.replace(/[^0-9]/g,'')) - parseInt(a.value.replace(/[^0-9]/g,''));
+  });
+  const maxGlobal = parseInt(globalSorted[0].value.replace(/[^0-9]/g,''));
+  
+  let h2 = `<div style="margin-bottom:12px;color:var(--muted);font-size:12px">📌 12 lot GRAN Global — nilai tertinggi: <span class="gold">${globalSorted[0].name}</span></div>`;
+  globalSorted.forEach(g => {
+    const val = parseInt(g.value.replace(/[^0-9]/g,''));
+    const pct = (val / maxGlobal) * 100;
+    h2 += `<div class="gran-bar">
+      <div class="label">${g.flag} ${g.country}</div>
+      <div class="track"><div class="fill" style="width:${pct}%;background:linear-gradient(90deg,#00e5ff,#a855f7)">${pct.toFixed(1)}%</div></div>
+      <div class="value">${g.value}</div>
+    </div>`;
+  });
+  $('granChartGlobal').innerHTML = h2;
+  
+  // TIMELINE
+  const timeline = [
+    { year: 2024, lots: 3, value: 18600000 },
+    { year: 2025, lots: 6, value: 142000000 },
+    { year: 2026, lots: 24, value: 1168800000 },
+    { year: 2027, lots: 30, value: 1420000000 },
+    { year: 2028, lots: 36, value: 2280000000 },
+    { year: 2030, lots: 42, value: 4800000000 }
+  ];
+  const maxValue = Math.max(...timeline.map(t => t.value));
+  let h3 = `<div style="margin-bottom:12px;color:var(--muted);font-size:12px">📈 Pertumbuhan nilai GRAN dari 2024 hingga 2030</div>`;
+  timeline.forEach(t => {
+    const pct = (t.value / maxValue) * 100;
+    const fmt = t.value >= 1e9 ? 'RM ' + (t.value/1e9).toFixed(2) + 'B' : 'RM ' + (t.value/1e6).toFixed(1) + 'M';
+    h3 += `<div class="timeline-item">
+      <div class="year">${t.year}</div>
+      <div class="bar-track"><div class="bar-fill" style="width:${pct}%"></div></div>
+      <div class="val">${fmt} · ${t.lots} lot</div>
+    </div>`;
+  });
+  $('granTimeline').innerHTML = h3;
+}
+
+// ============================================================
+//  2. SATELLITE ORBIT
+// ============================================================
+const SATELLITES = [
+  { id:'SGAE-SAT-01', orbit:'GEO', alt:'35,786 km', band:'Ka', signal:96, type:'Communications', launch:'2024-06-15', period:'24 h', lat:0, lon:42.1 },
+  { id:'SGAE-SAT-02', orbit:'LEO', alt:'550 km', band:'X', signal:92, type:'Imaging', launch:'2024-09-22', period:'95 min', lat:5.6, lon:100.5 },
+  { id:'SGAE-SAT-03', orbit:'MEO', alt:'20,200 km', band:'Ku', signal:88, type:'Navigation', launch:'2025-01-10', period:'12 h', lat:0, lon:0 },
+  { id:'SGAE-SAT-04', orbit:'GEO', alt:'35,786 km', band:'Ka', signal:94, type:'SIGINT', launch:'2025-04-18', period:'24 h', lat:0, lon:118 },
+  { id:'SGAE-SAT-05', orbit:'LEO', alt:'480 km', band:'X', signal:90, type:'Imaging', launch:'2025-08-05', period:'94 min', lat:-10, lon:80 },
+  { id:'SGAE-SAT-06', orbit:'SSO', alt:'700 km', band:'L', signal:97, type:'IoT/M2M', launch:'2025-12-20', period:'99 min', lat:98, lon:0 }
+];
+
+function renderSatellite() {
+  let h = `<div class="kpi-grid">
+    <div class="kpi"><div class="label">Total Satelit</div><div class="value cyan">${SATELLITES.length}</div></div>
+    <div class="kpi"><div class="label">Constellation</div><div class="value gold">SGAE-SAT</div></div>
+    <div class="kpi"><div class="label">Avg Signal</div><div class="value green">93%</div></div>
+    <div class="kpi"><div class="label">Ground Stations</div><div class="value purple">${GROUND_STATIONS.length}</div></div>
+  </div><h3>🛰️ Satelit Aktif</h3><div class="grid-3">`;
+  SATELLITES.forEach(s => {
+    const sigColor = s.signal >= 95 ? 'green' : s.signal >= 90 ? 'gold' : 'orange';
+    h += `<div class="sat-card">
+      <div class="sat-icon"><i class="fas fa-satellite"></i></div>
+      <div class="info">
+        <div class="name">${s.id}</div>
+        <div class="orbit">${s.orbit} · ${s.alt} · Band ${s.band}</div>
+        <div class="orbit">📅 ${s.launch} · ⏱️ ${s.period}</div>
+        <div class="orbit">${s.type}</div>
+      </div>
+      <div class="signal ${sigColor}">${s.signal}%</div>
+    </div>`;
+  });
+  h += `</div>
+    <h3>📊 Butiran Teknikal</h3>
+    ${table(["ID","Orbit","Altitud","Band","Signal","Jenis","Launch","Period"],
+      SATELLITES.map(s => [s.id, s.orbit, s.alt, s.band, s.signal + '%', s.type, s.launch, s.period]),
+      ["mono","cyan","gold","purple","green","","",""])}`;
+  $('satContent').innerHTML = h;
+  
+  // ORBIT VIZ
+  let viz = `<div class="orbit-viz" id="orbitVizContainer">
+    <div class="earth"></div>`;
+  const orbitDefs = [
+    { radius: 100, color:'#00e5ff', label:'LEO 550km' },
+    { radius: 150, color:'#a855f7', label:'MEO 20,200km' },
+    { radius: 200, color:'#fbbf24', label:'GEO 35,786km' },
+    { radius: 175, color:'#ec4899', label:'SSO 700km' }
+  ];
+  orbitDefs.forEach(o => {
+    viz += `<div class="orbit" style="width:${o.radius*2}px;height:${o.radius*2}px;border-color:${o.color}40"></div>`;
+  });
+  viz += `<div style="position:absolute;top:20px;left:20px;font-size:11px;color:var(--muted)">
+    <div>🟦 Earth (Blue Marble)</div>
+    ${orbitDefs.map(o => `<div style="color:${o.color}">● ${o.label}</div>`).join('')}
+  </div>`;
+  SATELLITES.forEach((s, i) => {
+    const r = s.orbit === 'LEO' ? 100 : s.orbit === 'MEO' ? 150 : s.orbit === 'GEO' ? 200 : 175;
+    const angle = (i * 60 + Date.now()/100) % 360;
+    const x = 50 + (Math.cos(angle * Math.PI/180) * r / 4);
+    const y = 50 + (Math.sin(angle * Math.PI/180) * r / 4);
+    viz += `<div class="sat" style="left:calc(${x}% - 5px);top:calc(${y}% - 5px);background:${s.signal>=95?'#00e5ff':s.signal>=90?'#fbbf24':'#ef4444'}" title="${s.id} · ${s.orbit}"></div>`;
+  });
+  viz += `</div>`;
+  $('orbitViz').innerHTML = viz;
+  
+  // GROUND STATIONS
+  let gs = `<div class="kpi-grid">
+    <div class="kpi"><div class="label">Total GS</div><div class="value cyan">${GROUND_STATIONS.length}</div></div>
+    <div class="kpi"><div class="label">Bands</div><div class="value gold">Ka/X/Ku/L</div></div>
+    <div class="kpi"><div class="label">Uplink</div><div class="value green">2.4 Gbps</div></div>
+    <div class="kpi"><div class="label">Downlink</div><div class="value purple">2.4 Gbps</div></div>
+  </div>${table(["ID","Lokasi","Flag","Dish","Status"],
+    GROUND_STATIONS.map(g => [g.id, g.city, g.flag, g.dish, 'ACTIVE']),
+    ["mono","cyan","","gold","green"])}`;
+  $('gsContent').innerHTML = gs;
+}
+
+// ============================================================
+//  3. LIVE WEATHER
+// ============================================================
+const WEATHER_DATA = [
+  { city:'Sungai Petani, Kedah', flag:'🇲🇾', temp:32, desc:'Cerah Berawan', humid:65, wind:8, rain:5, icon:'fa-sun' },
+  { city:'Kuala Lumpur', flag:'🇲🇾', temp:31, desc:'Hujan Petang', humid:78, wind:12, rain:45, icon:'fa-cloud-rain' },
+  { city:'Penang', flag:'🇲🇾', temp:30, desc:'Cerah', humid:72, wind:10, rain:10, icon:'fa-sun' },
+  { city:'Johor Bahru', flag:'🇲🇾', temp:29, desc:'Berawan', humid:80, wind:9, rain:30, icon:'fa-cloud' },
+  { city:'Singapore', flag:'🇸🇬', temp:30, desc:'Hujan Ringan', humid:82, wind:11, rain:60, icon:'fa-cloud-rain' },
+  { city:'Silicon Valley', flag:'🇺🇸', temp:18, desc:'Cerah', humid:55, wind:15, rain:0, icon:'fa-sun' },
+  { city:'London', flag:'🇬🇧', temp:12, desc:'Mendung', humid:75, wind:18, rain:20, icon:'fa-cloud' },
+  { city:'Dubai', flag:'🇦🇪', temp:38, desc:'Panas Kering', humid:40, wind:6, rain:0, icon:'fa-sun' },
+  { city:'Tokyo', flag:'🇯🇵', temp:22, desc:'Cerah', humid:60, wind:11, rain:5, icon:'fa-sun' },
+  { city:'Zurich', flag:'🇨🇭', temp:10, desc:'Sejuk Berawan', humid:70, wind:9, rain:15, icon:'fa-cloud' },
+  { city:'Sydney', flag:'🇦🇺', temp:20, desc:'Cerah', humid:58, wind:20, rain:0, icon:'fa-sun' },
+  { city:'Tallinn', flag:'🇪🇪', temp:8, desc:'Sejuk Hujan', humid:85, wind:14, rain:55, icon:'fa-cloud-rain' },
+  { city:'NEOM', flag:'🇸🇦', temp:27, desc:'Cerah Kering', humid:35, wind:9, rain:0, icon:'fa-sun' }
+];
+
+function renderWeather() {
+  let h = `<div class="kpi-grid">
+    <div class="kpi"><div class="label">Total Lokasi</div><div class="value cyan">${WEATHER_DATA.length}</div></div>
+    <div class="kpi"><div class="label">Suhu Tertinggi</div><div class="value red">${Math.max(...WEATHER_DATA.map(w=>w.temp))}°C</div><div class="sub">${WEATHER_DATA.find(w=>w.temp===Math.max(...WEATHER_DATA.map(w=>w.temp))).city}</div></div>
+    <div class="kpi"><div class="label">Suhu Terendah</div><div class="value blue">${Math.min(...WEATHER_DATA.map(w=>w.temp))}°C</div><div class="sub">${WEATHER_DATA.find(w=>w.temp===Math.min(...WEATHER_DATA.map(w=>w.temp))).city}</div></div>
+    <div class="kpi"><div class="label">Kemas Kini</div><div class="value gold" style="font-size:13px">${new Date().toLocaleString('ms-MY')}</div></div>
+  </div>
+  <h3>🌦️ Cuaca Mengikut Lokasi GRAN</h3>
+  <div class="grid-3">`;
+  WEATHER_DATA.forEach(w => {
+    const tempColor = w.temp >= 35 ? 'red' : w.temp >= 28 ? 'gold' : w.temp >= 18 ? 'green' : 'blue';
+    h += `<div class="weather-card">
+      <div style="display:flex;align-items:center;gap:8px">
+        <i class="fas ${w.icon}" style="font-size:1.5rem;color:${w.temp>=30?'#fbbf24':w.rain>=40?'#60a5fa':'#94a3b8'}"></i>
+        <div style="flex:1">
+          <div class="city">${w.flag} ${w.city}</div>
+          <div class="desc">${w.desc}</div>
+        </div>
+        <div class="temp ${tempColor}">${w.temp}°</div>
+      </div>
+      <div class="extra">
+        <span>💧 ${w.humid}%</span>
+        <span>💨 ${w.wind} km/h</span>
+        <span>🌧️ ${w.rain} mm</span>
+      </div>
+    </div>`;
+  });
+  h += `</div>
+    <h3>📊 Jadual Data Cuaca</h3>
+    ${table(["Lokasi","Flag","Suhu","Cuaca","Kelembapan","Angin","Hujan"],
+      WEATHER_DATA.map(w => [w.city, w.flag, w.temp + '°C', w.desc, w.humid + '%', w.wind + ' km/h', w.rain + ' mm']),
+      ["cyan","","gold","","blue","",""])}`;
+  $('weatherContent').innerHTML = h;
+}
+
+// ============================================================
+//  4. GRAN DOCS
+// ============================================================
+const GRAN_DOCS = GRAN_TANAH.map(g => ({
+  id: g.id,
+  title: g.title,
+  name: g.name,
+  state: g.state,
+  flag: g.flag,
+  type: g.type,
+  area: g.area,
+  value: g.value,
+  tenure: g.tenure,
+  date: '2024-01-15',
+  status: 'REGISTERED',
+  hash: '0x' + btoa(g.id).replace(/[^a-z0-9]/gi,'').substring(0,16).toLowerCase()
+}));
+
+function renderGranDocs() {
+  let h = `<div class="kpi-grid">
+    <div class="kpi gran-stat"><div class="label">Total Dokumen</div><div class="value green">${GRAN_DOCS.length}</div></div>
+    <div class="kpi gran-stat"><div class="label">Status</div><div class="value gold">REGISTERED</div></div>
+    <div class="kpi gran-stat"><div class="label">Total Nilai</div><div class="value gold">RM 284,600,000</div></div>
+    <div class="kpi gran-stat"><div class="label">Total Luas</div><div class="value cyan">16.5 Ha</div></div>
+  </div>
+  <h3>📜 Hak Milik GRAN Tanah (Title Deeds)</h3>`;
+  GRAN_DOCS.forEach(d => {
+    h += `<div class="doc-item">
+      <div class="title">${d.flag} ${d.title} — ${d.name}</div>
+      <div class="meta">📍 ${d.state} · ${d.type} · ${d.area}</div>
+      <div class="meta">💰 ${d.value} · 📅 ${d.date} · ${d.tenure}</div>
+      <div class="meta" style="font-family:monospace;font-size:10px">🔐 Doc Hash: ${d.hash}...</div>
+      <div class="status">✅ ${d.status}</div>
+    </div>`;
+  });
+  h += `<h3>📋 Jadual Dokumen Penuh</h3>
+    ${table(["ID","Title","Nama","Negeri","Jenis","Luas","Nilai","Status"],
+      GRAN_DOCS.map(d => [d.id, d.title, d.name, d.state, d.type, d.area, d.value, '✅ ' + d.status]),
+      ["mono","gold","cyan","green","","","gold","green"])}
+    <h3>🔐 Pengesahan Blockchain</h3>
+    ${kv("Blockchain Network", "Bitcoin Mainnet", "gold")}
+    ${kv("Block Height", "#847,995", "cyan")}
+    ${kv("SHA-256 GRAN Tanah", "GRAN-TANAH-32D8A53CC4C299E60424C0D0E96D3B06575D51", "yellow")}
+    ${kv("Ledger Status", "IMMUTABLE · LOCKED", "green")}`;
+  $('granDocsContent').innerHTML = h;
+}
+
+// ============================================================
+//  5. 3D GLOBE (Three.js)
+// ============================================================
+let globeScene, globeCamera, globeRenderer, globeGroup, globeRotation = true, satOrbitGroup;
+let animationId;
+
+function init3DGlobe() {
+  const container = $('globeContainer');
+  if (!container || globeScene) return;
+  
+  // Import Three.js dynamically if not loaded
+  if (typeof THREE === 'undefined') {
+    const script = document.createElement('script');
+    script.src = 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js';
+    script.onload = () => {
+      const orbitScript = document.createElement('script');
+      orbitScript.src = 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js';
+      orbitScript.onload = () => createGlobe(container);
+      document.head.appendChild(orbitScript);
+    };
+    document.head.appendChild(script);
+  } else {
+    createGlobe(container);
+  }
+}
+
+function createGlobe(container) {
+  const width = container.clientWidth;
+  const height = container.clientHeight;
+  
+  globeScene = new THREE.Scene();
+  globeCamera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000);
+  globeCamera.position.set(0, 0, 3.5);
+  
+  globeRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  globeRenderer.setSize(width, height);
+  globeRenderer.setPixelRatio(window.devicePixelRatio);
+  container.innerHTML = '';
+  container.appendChild(globeRenderer.domElement);
+  
+  // Controls
+  const controls = new THREE.OrbitControls(globeCamera, globeRenderer.domElement);
+  controls.enableDamping = true;
+  controls.dampingFactor = 0.05;
+  controls.minDistance = 1.8;
+  controls.maxDistance = 8;
+  
+  // Lights
+  globeScene.add(new THREE.AmbientLight(0x404060, 1));
+  const dirLight = new THREE.DirectionalLight(0xffffff, 1.2);
+  dirLight.position.set(5, 3, 5);
+  globeScene.add(dirLight);
+  const backLight = new THREE.PointLight(0x00e5ff, 0.8);
+  backLight.position.set(-3, -2, -3);
+  globeScene.add(backLight);
+  
+  // Globe group
+  globeGroup = new THREE.Group();
+  globeScene.add(globeGroup);
+  
+  // Earth sphere with texture (using procedural or online texture)
+  const earthGeo = new THREE.SphereGeometry(1, 64, 64);
+  const textureLoader = new THREE.TextureLoader();
+  const earthTexture = textureLoader.load('https://unpkg.com/three-globe/example/img/earth-blue-marble.jpg', 
+    undefined, undefined, () => {
+      // Fallback to procedural
+      const earthMat = new THREE.MeshPhongMaterial({ color: 0x1e3a5f, emissive: 0x0a1a3f, emissiveIntensity: 0.3 });
+      const earthMesh = new THREE.Mesh(earthGeo, earthMat);
+      globeGroup.add(earthMesh);
+    }
+  );
+  const earthMat = new THREE.MeshPhongMaterial({ 
+    map: earthTexture, 
+    emissive: 0x0a1a3f,
+    emissiveIntensity: 0.2,
+    shininess: 10
+  });
+  const earth = new THREE.Mesh(earthGeo, earthMat);
+  globeGroup.add(earth);
+  
+  // Wireframe overlay
+  const wireGeo = new THREE.SphereGeometry(1.002, 32, 32);
+  const wireMat = new THREE.MeshBasicMaterial({ color: 0x00e5ff, wireframe: true, transparent: true, opacity: 0.06 });
+  globeGroup.add(new THREE.Mesh(wireGeo, wireMat));
+  
+  // Atmosphere glow
+  const atmoGeo = new THREE.SphereGeometry(1.05, 32, 32);
+  const atmoMat = new THREE.MeshBasicMaterial({ color: 0x00e5ff, transparent: true, opacity: 0.08, side: THREE.BackSide });
+  globeGroup.add(new THREE.Mesh(atmoGeo, atmoMat));
+  
+  // Convert lat/lng to 3D coords
+  function latLngToXYZ(lat, lng, radius) {
+    const phi = (90 - lat) * Math.PI / 180;
+    const theta = (lng + 180) * Math.PI / 180;
+    return new THREE.Vector3(
+      -radius * Math.sin(phi) * Math.cos(theta),
+      radius * Math.cos(phi),
+      radius * Math.sin(phi) * Math.sin(theta)
+    );
+  }
+  
+  // Add markers
+  function addMarker(lat, lng, color, size = 0.02, label = '') {
+    const pos = latLngToXYZ(lat, lng, 1.02);
+    const geo = new THREE.SphereGeometry(size, 8, 8);
+    const mat = new THREE.MeshBasicMaterial({ color: color });
+    const marker = new THREE.Mesh(geo, mat);
+    marker.position.copy(pos);
+    globeGroup.add(marker);
+    
+    // Glow
+    const glowGeo = new THREE.SphereGeometry(size * 1.8, 8, 8);
+    const glowMat = new THREE.MeshBasicMaterial({ color: color, transparent: true, opacity: 0.3 });
+    const glow = new THREE.Mesh(glowGeo, glowMat);
+    glow.position.copy(pos);
+    globeGroup.add(glow);
+  }
+  
+  // GRAN Tanah (green)
+  GRAN_TANAH.forEach(g => addMarker(g.lat, g.lng, 0x34d399, 0.025));
+  // GRAN Global (yellow)
+  GRAN_GLOBAL.forEach(g => addMarker(g.lat, g.lng, 0xfbbf24, 0.02));
+  // Family Home (pink)
+  addMarker(FAMILY_HOME.lat, FAMILY_HOME.lng, 0xec4899, 0.035);
+  
+  // Satellite orbits
+  satOrbitGroup = new THREE.Group();
+  globeScene.add(satOrbitGroup);
+  
+  const orbitColors = { LEO: 0x00e5ff, MEO: 0xa855f7, GEO: 0xfbbf24, SSO: 0xec4899 };
+  const orbitRadii = { LEO: 1.3, MEO: 1.6, GEO: 1.9, SSO: 1.75 };
+  
+  // Draw orbit rings
+  ['LEO', 'MEO', 'GEO', 'SSO'].forEach(orbitType => {
+    const r = orbitRadii[orbitType];
+    const points = [];
+    for (let i = 0; i <= 64; i++) {
+      const angle = (i / 64) * Math.PI * 2;
+      points.push(new THREE.Vector3(r * Math.cos(angle), 0, r * Math.sin(angle)));
+    }
+    const orbitGeo = new THREE.BufferGeometry().setFromPoints(points);
+    const orbitMat = new THREE.LineBasicMaterial({ color: orbitColors[orbitType], transparent: true, opacity: 0.4 });
+    const orbitLine = new THREE.Line(orbitGeo, orbitMat);
+    satOrbitGroup.add(orbitLine);
+    
+    // Rotate GEO orbit to be equatorial, LEO inclined, SSO polar
+    if (orbitType === 'LEO') orbitLine.rotation.x = Math.PI / 6;
+    if (orbitType === 'SSO') orbitLine.rotation.x = Math.PI / 2;
+  });
+  
+  // Add satellites moving along orbits
+  const satMeshes = SATELLITES.map((s, i) => {
+    const r = orbitRadii[s.orbit] || 1.3;
+    const satGeo = new THREE.SphereGeometry(0.018, 8, 8);
+    const satMat = new THREE.MeshBasicMaterial({ color: orbitColors[s.orbit] });
+    const satMesh = new THREE.Mesh(satGeo, satMat);
+    satMesh.userData = { radius: r, speed: 0.3 + i * 0.05, angle: i * Math.PI / 3, orbit: s.orbit };
+    satOrbitGroup.add(satMesh);
+    return satMesh;
+  });
+  
+  // Animation loop
+  const clock = new THREE.Clock();
+  function animate() {
+    animationId = requestAnimationFrame(animate);
+    const t = clock.getElapsedTime();
+    
+    if (globeRotation) globeGroup.rotation.y += 0.0015;
+    
+    // Move satellites
+    satMeshes.forEach(sat => {
+      sat.userData.angle += sat.userData.speed * 0.01;
+      const a = sat.userData.angle;
+      const r = sat.userData.radius;
+      sat.position.set(r * Math.cos(a), 0, r * Math.sin(a));
+      // Apply orbit tilt
+      if (sat.userData.orbit === 'LEO') {
+        sat.position.applyAxisAngle(new THREE.Vector3(1, 0, 0), Math.PI / 6);
+      } else if (sat.userData.orbit === 'SSO') {
+        sat.position.applyAxisAngle(new THREE.Vector3(1, 0, 0), Math.PI / 2);
+      }
+    });
+    
+    satOrbitGroup.rotation.y += 0.0008;
+    controls.update();
+    globeRenderer.render(globeScene, globeCamera);
+  }
+  animate();
+  
+  // Resize handler
+  window.addEventListener('resize', () => {
+    const w = container.clientWidth, h = container.clientHeight;
+    if (w && h) {
+      globeCamera.aspect = w / h;
+      globeCamera.updateProjectionMatrix();
+      globeRenderer.setSize(w, h);
+    }
+  });
+}
+
+function toggleGlobeRotation() {
+  globeRotation = !globeRotation;
+  alert('🌐 Globe rotation: ' + (globeRotation ? 'AKTIF' : 'PAUSE'));
+}
+
+function toggleSatelliteOrbits() {
+  if (satOrbitGroup) {
+    satOrbitGroup.visible = !satOrbitGroup.visible;
+    alert('🛰️ Satellite orbits: ' + (satOrbitGroup.visible ? 'VISIBLE' : 'HIDDEN'));
+  }
+}
+
+function renderGlobe() {
+  setTimeout(init3DGlobe, 300);
+}
+```
+
+**Langkah 5:** Tambahkan 5 fungsi render ini dalam fungsi `renderAll()`:
+
+```javascript
+// Dalam function renderAll(), tambah:
+try { renderGranChart(); } catch(e) { console.error('GranChart:', e); }
+try { renderSatellite(); } catch(e) { console.error('Satellite:', e); }
+try { renderWeather(); } catch(e) { console.error('Weather:', e); }
+try { renderGranDocs(); } catch(e) { console.error('GranDocs:', e); }
+try { renderGlobe(); } catch(e) { console.error('Globe:', e); }
+```
+
+**Langkah 6:** Kemas kini event listener tab untuk mengaktifkan 3D Globe:
+
+```javascript
+// Dalam event listener tab, tambah:
+if (tab.dataset.tab === 'globe3d') setTimeout(init3DGlobe, 300);
+```
+
+---
+
+## 🎯 5 Komponen Baharu — Ringkasan
+
+| # | Tab | Ciri |
+|---|-----|------|
+| **1** | 📊 **GRAN Chart** | Carta bar nilai GRAN Tanah & Global (di-sort) + Timeline pertumbuhan 2024-2030 |
+| **2** | 🛰️ **Satellite Orbit** | 6 satelit SGAE-SAT + visualisasi orbit animasi + ground stations |
+| **3** | 🌦️ **Live Weather** | Cuaca 13 lokasi GRAN (suhu, kelembapan, angin, hujan) dengan kad visual |
+| **4** | 📜 **GRAN Docs** | 12 dokumen hak milik tanah dengan hash + pengesahan blockchain |
+| **5** | 🌐 **3D Globe** | Globe Bumi 3D interaktif (Three.js) dengan semua marker GRAN + orbit satelit animasi |
+
+---
+
+## 🚀 Cara Guna
+
+1. **Buka fail** `sgae_master_v37_gran_bumi_gelombang.html`
+2. **Tambahkan 5 tab** dalam `<div class="tabs">`
+3. **Tambahkan 5 section** dalam `<div class="container">`
+4. **Tambah CSS** dalam `<style>`
+5. **Tambah JavaScript** dalam `<script>`
+6. **Kemas kini** `renderAll()` dan event listener tab
+7. **Simpan** sebagai `sgae_master_v38_complete.html`
+8. **Buka** dalam pelayar — semua 5 komponen baharu akan berfungsi!
+
+Sistem kini mempunyai **27 tab lengkap** dengan **GRAN, Peta Bumi, Gelombang, Chart, Satelit, Cuaca, Docs, dan 3D Globe**! 🌏✨