{"id":33,"date":"2026-06-28T14:25:34","date_gmt":"2026-06-28T14:25:34","guid":{"rendered":"https:\/\/forjakarta.com\/artikel\/?p=33"},"modified":"2026-07-05T07:51:27","modified_gmt":"2026-07-05T07:51:27","slug":"museum-fatahillah","status":"publish","type":"post","link":"https:\/\/forjakarta.com\/artikel\/museum-fatahillah\/","title":{"rendered":"museum-fatahillah"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n Kelapa Gading & Summarecon \u00b7 Jakarta Study Club<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <style>\r\n \/* === SHARED TOKENS === *\/\r\n :root {\r\n --clr-primary: #a82e2e;\r\n --clr-accent: #d4af37;\r\n --clr-bg: #1e1e1e;\r\n --clr-bg-alt: #262626;\r\n --clr-card-bg: #2e2e2e;\r\n --clr-text: #fdfbf7;\r\n --clr-text-muted: rgba(253, 251, 247, 0.65);\r\n --clr-text-dim: rgba(253, 251, 247, 0.45);\r\n --ff-display: \"Playfair Display\", Georgia, serif;\r\n --ff-body: \"DM Sans\", system-ui, sans-serif;\r\n --ff-mono: \"JetBrains Mono\", ui-monospace, monospace;\r\n --radius-md: 14px;\r\n --container: 1180px;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: var(--clr-bg);\r\n color: var(--clr-text);\r\n font-family: var(--ff-body);\r\n font-size: 16px;\r\n line-height: 1.6;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n a {\r\n color: var(--clr-accent);\r\n text-decoration: none;\r\n }\r\n\r\n a:hover {\r\n color: var(--clr-text);\r\n }\r\n\r\n .container {\r\n max-width: var(--container);\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n }\r\n\r\n \/* === NAVBAR === *\/\r\n .navbar {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n background: rgba(30, 30, 30, 0.85);\r\n backdrop-filter: blur(18px) saturate(140%);\r\n -webkit-backdrop-filter: blur(18px) saturate(140%);\r\n border-bottom: 1px solid rgba(212, 175, 55, 0.12);\r\n }\r\n\r\n .nav-inner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 68px;\r\n }\r\n\r\n .nav-logo {\r\n font-family: var(--ff-display);\r\n font-weight: 500;\r\n font-size: 1.15rem;\r\n color: var(--clr-text);\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .nav-logo em {\r\n font-style: italic;\r\n color: var(--clr-accent);\r\n font-weight: 400;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 32px;\r\n }\r\n\r\n .nav-links a {\r\n color: var(--clr-text-muted);\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n transition: color 0.25s ease;\r\n }\r\n\r\n .nav-links a:hover {\r\n color: var(--clr-text);\r\n }\r\n\r\n .nav-cta {\r\n padding: 9px 18px;\r\n border-radius: 100px;\r\n background: var(--clr-primary);\r\n color: var(--clr-text);\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n transition: background 0.3s ease;\r\n }\r\n\r\n .nav-cta:hover {\r\n background: #c43838;\r\n color: var(--clr-text);\r\n }\r\n\r\n @media (max-width: 760px) {\r\n .nav-links {\r\n display: none;\r\n }\r\n }\r\n\r\n \/* === ARTICLE A: EDITORIAL CLASSIC === *\/\r\n .breadcrumb {\r\n padding-top: 32px;\r\n font-family: var(--ff-mono);\r\n font-size: 0.72rem;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n color: var(--clr-text-dim);\r\n }\r\n\r\n .breadcrumb a {\r\n color: var(--clr-text-dim);\r\n }\r\n\r\n .breadcrumb a:hover {\r\n color: var(--clr-accent);\r\n }\r\n\r\n .breadcrumb .sep {\r\n margin: 0 8px;\r\n opacity: 0.5;\r\n }\r\n\r\n .article-hero {\r\n padding: 32px 0 48px;\r\n max-width: 880px;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n\r\n .article-category {\r\n display: inline-block;\r\n font-family: var(--ff-mono);\r\n font-size: 0.72rem;\r\n font-weight: 500;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--clr-accent);\r\n padding: 6px 14px;\r\n border-radius: 100px;\r\n border: 1px solid rgba(212, 175, 55, 0.3);\r\n background: rgba(212, 175, 55, 0.08);\r\n margin-bottom: 28px;\r\n }\r\n\r\n .article-title {\r\n font-family: var(--ff-display);\r\n font-weight: 500;\r\n font-size: clamp(2rem, 4.5vw, 3.6rem);\r\n line-height: 1.08;\r\n letter-spacing: -0.015em;\r\n margin: 0 0 20px;\r\n }\r\n\r\n .article-title em {\r\n font-style: italic;\r\n color: var(--clr-accent);\r\n font-weight: 400;\r\n }\r\n\r\n .article-subtitle {\r\n font-size: 1.1rem;\r\n line-height: 1.55;\r\n color: var(--clr-text-muted);\r\n max-width: 680px;\r\n margin: 0 auto 36px;\r\n }\r\n\r\n .article-meta {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 14px;\r\n flex-wrap: wrap;\r\n font-size: 0.88rem;\r\n color: var(--clr-text-muted);\r\n }\r\n\r\n .article-meta .author {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .article-meta .author-avatar {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n background: linear-gradient(\r\n 135deg,\r\n var(--clr-primary),\r\n var(--clr-accent)\r\n );\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--ff-display);\r\n font-size: 0.85rem;\r\n color: #fff;\r\n font-weight: 500;\r\n }\r\n\r\n .article-meta .author strong {\r\n color: var(--clr-text);\r\n font-weight: 500;\r\n }\r\n\r\n .article-meta .dot {\r\n width: 4px;\r\n height: 4px;\r\n border-radius: 50%;\r\n background: var(--clr-text-dim);\r\n }\r\n\r\n .hero-image {\r\n margin: 48px 0 56px;\r\n border-radius: 18px;\r\n overflow: hidden;\r\n aspect-ratio: 16 \/ 8;\r\n background: #111;\r\n background-image: url(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/f\/f4\/Museum_Fatahilah_%28Museum_Sejarah_Jakarta%29.jpg\");\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n }\r\n\r\n .hero-image::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 180deg,\r\n transparent 70%,\r\n rgba(0, 0, 0, 0.5)\r\n );\r\n }\r\n\r\n .hero-caption {\r\n text-align: center;\r\n font-family: var(--ff-body);\r\n font-style: italic;\r\n font-size: 0.85rem;\r\n color: var(--clr-text-muted);\r\n margin: -36px auto 56px;\r\n max-width: 720px;\r\n padding: 0 20px;\r\n }\r\n\r\n .article-body {\r\n max-width: 720px;\r\n margin: 0 auto;\r\n padding-bottom: 80px;\r\n position: relative;\r\n }\r\n\r\n .article-body p {\r\n font-size: 1.05rem;\r\n line-height: 1.85;\r\n margin: 0 0 24px;\r\n color: rgba(253, 251, 247, 0.88);\r\n }\r\n\r\n .article-body p.lead {\r\n font-size: 1.2rem;\r\n line-height: 1.7;\r\n color: var(--clr-text);\r\n margin-bottom: 32px;\r\n }\r\n\r\n .article-body p.lead::first-letter {\r\n font-family: var(--ff-display);\r\n font-size: 4.6rem;\r\n font-weight: 500;\r\n float: left;\r\n line-height: 0.9;\r\n margin: 6px 12px 0 0;\r\n color: var(--clr-accent);\r\n }\r\n\r\n .article-body h2 {\r\n font-family: var(--ff-display);\r\n font-weight: 500;\r\n font-size: clamp(1.5rem, 2.4vw, 2rem);\r\n line-height: 1.2;\r\n letter-spacing: -0.01em;\r\n margin: 48px 0 16px;\r\n color: var(--clr-text);\r\n }\r\n\r\n .article-body h2 em {\r\n font-style: italic;\r\n color: var(--clr-accent);\r\n }\r\n\r\n .article-body blockquote {\r\n margin: 40px -40px;\r\n padding: 28px 40px;\r\n border-left: 3px solid var(--clr-accent);\r\n background: rgba(212, 175, 55, 0.05);\r\n border-radius: 0 8px 8px 0;\r\n font-family: var(--ff-display);\r\n font-style: italic;\r\n font-size: 1.4rem;\r\n line-height: 1.5;\r\n color: var(--clr-text);\r\n }\r\n\r\n .article-body blockquote::before {\r\n content: '\"';\r\n font-size: 3rem;\r\n line-height: 0;\r\n color: var(--clr-accent);\r\n opacity: 0.4;\r\n vertical-align: -0.4em;\r\n margin-right: 6px;\r\n }\r\n\r\n .article-body figure {\r\n margin: 40px 0;\r\n }\r\n\r\n .article-body figure img {\r\n width: 100%;\r\n border-radius: 12px;\r\n }\r\n\r\n .article-body figcaption {\r\n margin-top: 12px;\r\n font-size: 0.85rem;\r\n font-style: italic;\r\n color: var(--clr-text-muted);\r\n text-align: center;\r\n }\r\n\r\n .article-tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n padding: 32px 0;\r\n border-top: 1px solid rgba(212, 175, 55, 0.12);\r\n border-bottom: 1px solid rgba(212, 175, 55, 0.12);\r\n margin-top: 48px;\r\n }\r\n\r\n .article-tags a {\r\n font-family: var(--ff-mono);\r\n font-size: 0.72rem;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n padding: 6px 14px;\r\n border-radius: 100px;\r\n border: 1px solid rgba(212, 175, 55, 0.2);\r\n color: var(--clr-text-muted);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .article-tags a:hover {\r\n background: rgba(212, 175, 55, 0.1);\r\n border-color: var(--clr-accent);\r\n color: var(--clr-accent);\r\n }\r\n\r\n \/* Sticky share buttons *\/\r\n .share-bar {\r\n position: sticky;\r\n top: 100px;\r\n float: left;\r\n margin-left: -90px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .share-bar {\r\n display: none;\r\n }\r\n }\r\n\r\n .share-btn {\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50%;\r\n border: 1px solid rgba(212, 175, 55, 0.2);\r\n background: rgba(255, 255, 255, 0.02);\r\n color: var(--clr-text-muted);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 1rem;\r\n }\r\n\r\n .share-btn:hover {\r\n background: rgba(212, 175, 55, 0.1);\r\n border-color: var(--clr-accent);\r\n color: var(--clr-accent);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* Author bio *\/\r\n .author-bio {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 18px;\r\n padding: 28px;\r\n margin-top: 40px;\r\n border-radius: var(--radius-md);\r\n background: var(--clr-card-bg);\r\n border: 1px solid rgba(212, 175, 55, 0.1);\r\n }\r\n\r\n .author-bio .avatar {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n background: linear-gradient(\r\n 135deg,\r\n var(--clr-primary),\r\n var(--clr-accent)\r\n );\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--ff-display);\r\n color: #fff;\r\n font-size: 1.4rem;\r\n font-weight: 500;\r\n flex-shrink: 0;\r\n }\r\n\r\n .author-bio h4 {\r\n margin: 0 0 4px;\r\n font-family: var(--ff-display);\r\n font-weight: 500;\r\n font-size: 1.05rem;\r\n }\r\n\r\n .author-bio .role {\r\n font-family: var(--ff-mono);\r\n font-size: 0.72rem;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: var(--clr-accent);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .author-bio p {\r\n margin: 0;\r\n font-size: 0.9rem;\r\n color: var(--clr-text-muted);\r\n line-height: 1.5;\r\n }\r\n\r\n \/* Related *\/\r\n .related-section {\r\n padding: 80px 0;\r\n background: var(--clr-bg-alt);\r\n border-top: 1px solid rgba(212, 175, 55, 0.08);\r\n }\r\n\r\n .related-heading {\r\n font-family: var(--ff-mono);\r\n font-size: 0.72rem;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--clr-accent);\r\n text-align: center;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .related-title {\r\n font-family: var(--ff-display);\r\n font-weight: 500;\r\n font-size: clamp(1.6rem, 3vw, 2.4rem);\r\n text-align: center;\r\n margin: 0 0 48px;\r\n }\r\n\r\n .related-title em {\r\n font-style: italic;\r\n color: var(--clr-accent);\r\n }\r\n\r\n .related-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 28px;\r\n }\r\n\r\n @media (max-width: 880px) {\r\n .related-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n .related-card {\r\n background: var(--clr-card-bg);\r\n border-radius: var(--radius-md);\r\n overflow: hidden;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n transition:\r\n transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),\r\n box-shadow 0.35s ease;\r\n cursor: pointer;\r\n }\r\n\r\n .related-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .related-card .img {\r\n aspect-ratio: 16 \/ 9;\r\n background-size: cover;\r\n background-position: center;\r\n }\r\n\r\n .related-card .body {\r\n padding: 20px 22px;\r\n }\r\n\r\n .related-card .cat {\r\n font-family: var(--ff-mono);\r\n font-size: 0.68rem;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n color: var(--clr-accent);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .related-card h3 {\r\n font-family: var(--ff-display);\r\n font-weight: 500;\r\n font-size: 1.1rem;\r\n line-height: 1.3;\r\n margin: 0;\r\n color: var(--clr-text);\r\n }\r\n\r\n .slider-container {\r\n display: flex;\r\n overflow-x: auto;\r\n gap: 20px;\r\n scroll-behavior: smooth; \/* Pergerakan mulus *\/\r\n scroll-snap-type: x mandatory; \r\n -ms-overflow-style: none;\r\n scrollbar-width: none;\r\n}\r\n\r\n.slider-container::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.slider-container .related-card {\r\n flex: 0 0 calc(33.333% - 14px); \r\n min-width: 280px; \r\n scroll-snap-align: center; \/* Fokus di tengah saat berhenti *\/\r\n}\r\n\r\n\/* Posisi Kontrol di Bawah *\/\r\n.slider-controls-bottom {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 20px;\r\n margin-top: 30px; \/* Jarak antara card dan tombol *\/\r\n}\r\n\r\n\/* Desain Tombol Geser *\/\r\n.slider-btn {\r\n background-color: transparent;\r\n color: #D4AF37;\r\n border: 1px solid #D4AF37;\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.slider-btn:hover {\r\n background-color: #D4AF37;\r\n color: #1E1E1E;\r\n}\r\n\r\n\/* Desain Titik Penanda (Dots) *\/\r\n.slider-indicators {\r\n display: flex;\r\n gap: 10px;\r\n}\r\n\r\n.dot {\r\n width: 10px;\r\n height: 10px;\r\n background-color: #444; \/* Warna redup saat tidak aktif *\/\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease, transform 0.3s ease;\r\n}\r\n\r\n.dot.active {\r\n background-color: #D4AF37; \/* Warna emas saat aktif *\/\r\n transform: scale(1.3); \/* Sedikit membesar *\/\r\n}\r\n \/* === FOOTER === *\/\r\n .footer {\r\n background: #131313;\r\n padding: 56px 0 32px;\r\n border-top: 1px solid rgba(212, 175, 55, 0.08);\r\n }\r\n\r\n .footer-grid {\r\n display: grid;\r\n grid-template-columns: 1.5fr 1fr 1fr 1fr;\r\n gap: 40px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n @media (max-width: 760px) {\r\n .footer-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 32px;\r\n }\r\n }\r\n\r\n .footer-brand h3 {\r\n font-family: var(--ff-display);\r\n font-weight: 500;\r\n font-size: 1.2rem;\r\n margin: 0 0 8px;\r\n }\r\n\r\n .footer-brand h3 em {\r\n font-style: italic;\r\n color: var(--clr-accent);\r\n font-weight: 400;\r\n }\r\n\r\n .footer-brand p {\r\n font-size: 0.88rem;\r\n color: var(--clr-text-muted);\r\n line-height: 1.6;\r\n max-width: 320px;\r\n margin: 0;\r\n }\r\n\r\n .footer-col h4 {\r\n font-family: var(--ff-mono);\r\n font-size: 0.72rem;\r\n letter-spacing: 0.16em;\r\n text-transform: uppercase;\r\n color: var(--clr-text-dim);\r\n margin: 0 0 16px;\r\n }\r\n\r\n .footer-col a {\r\n display: block;\r\n color: var(--clr-text-muted);\r\n font-size: 0.9rem;\r\n margin-bottom: 10px;\r\n transition: color 0.25s ease;\r\n }\r\n\r\n .footer-col a:hover {\r\n color: var(--clr-accent);\r\n }\r\n\r\n .footer-bottom {\r\n padding-top: 24px;\r\n border-top: 1px solid rgba(212, 175, 55, 0.08);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n font-family: var(--ff-mono);\r\n font-size: 0.72rem;\r\n letter-spacing: 0.1em;\r\n color: var(--clr-text-dim);\r\n }\r\n\r\n \/* layout reference badge *\/\r\n .ref-badge {\r\n position: fixed;\r\n top: 86px;\r\n right: 20px;\r\n z-index: 200;\r\n padding: 8px 14px;\r\n border-radius: 100px;\r\n background: var(--clr-accent);\r\n color: #1a1a1a;\r\n font-family: var(--ff-mono);\r\n font-size: 0.68rem;\r\n font-weight: 600;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n box-shadow: 0 6px 20px -6px rgba(212, 175, 55, 0.5);\r\n }\r\n <\/style>\r\n <\/head>\r\n\r\n <body>\r\n <!-- ============ NAVBAR ============ -->\r\n <!-- ============ NAVBAR ============ -->\r\n <nav class=\"navbar\">\r\n <div class=\"container nav-inner\">\r\n <a href=\"https:\/\/forjakarta.com\/\" class=\"nav-logo\"\r\n ><em>Artikel<\/em><\/a\r\n >\r\n <!-- <div class=\"nav-links\">\r\n <a href=\"\/#visi\">Visi<\/a>\r\n <a href=\"\/#focus\">Program<\/a>\r\n <a href=\"\/#articles\">Artikel<\/a>\r\n <a href=\"\/#org\">Tim<\/a>\r\n <a href=\"\/#faq\">FAQ<\/a>\r\n <\/div> -->\r\n <a href=\"https:\/\/forjakarta.com\/#kontak\" class=\"nav-cta\"\r\n >Kolaborasi<\/a\r\n >\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- <span class=\"ref-badge\">Layout A \u00b7 Editorial Classic<\/span> -->\r\n\r\n <!-- ============ ARTICLE ============ -->\r\n <main>\r\n <div class=\"container\">\r\n <div class=\"breadcrumb\">\r\n <a href=\"https:\/\/forjakarta.com\/\">Beranda<\/a>\r\n <span class=\"sep\">\/<\/span>\r\n <span>Artikel<\/span>\r\n <span class=\"sep\">\/<\/span>\r\n <span>Museum Fatahillah<\/span>\r\n <\/div>\r\n\r\n <article class=\"article-hero\">\r\n <span class=\"article-category\">Heritage \u00b7 Kota Tua<\/span>\r\n <h1 class=\"article-title\">\r\n Museum Fatahillah: Saksi Bisu <em>Sejarah Batavia<\/em>\r\n <\/h1>\r\n <p class=\"article-subtitle\">\r\n Dari balai kota VOC yang megah hingga ruang pamer ingatan kota \u2014 bagaimana satu gedung di tepi Taman Fatahillah merekam empat abad pergantian kekuasaan di Jakarta.\r\n <\/p>\r\n <div class=\"article-meta\">\r\n <div class=\"author\">\r\n <div class=\"author-avatar\">HA<\/div>\r\n <div>Ditulis oleh <strong>Tim Redaksi JSC<\/strong><\/div>\r\n <\/div>\r\n <span class=\"dot\"><\/span>\r\n <span>26 April 2026<\/span>\r\n <span class=\"dot\"><\/span>\r\n <span>7 menit baca<\/span>\r\n <\/div>\r\n <\/article>\r\n\r\n <div\r\n class=\"hero-image\"\r\n role=\"img\"\r\n aria-label=\"Stadhuis Batavia di Taman Fatahillah\"\r\n ><\/div>\r\n <p class=\"hero-caption\">\r\n Stadhuis Batavia, dibangun 1707\u20131710, kini berdiri sebagai Museum Fatahillah di sisi selatan Taman Fatahillah.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"container\">\r\n <article class=\"article-body\">\r\n\r\n <p class=\"lead\">\r\n Selatan Taman Fatahillah, di antara deru sepeda ontel wisata dan jepretan kamera turis, berdiri sebuah gedung tua bercat krem dengan kubah kecil di puncaknya. Bangunan ini tidak pernah benar-benar berhenti bekerja sejak abad ke-18 \u2014 ia hanya berganti peran. Pernah menjadi balai kota, kantor administrasi VOC, kantor gubernur, bahkan markas militer, sebelum akhirnya menetap sebagai Museum Fatahillah, yang secara resmi bernama Museum Sejarah Jakarta.\r\n <\/p>\r\n\r\n <p>\r\n Nama \"Fatahillah\" sendiri bukan nama arsitek atau gubernur jenderal yang membangunnya, melainkan nama seorang panglima abad ke-16 yang tidak pernah menginjakkan kaki di gedung ini. Di situlah letak ironi pertama dari museum ini: sebuah bangunan kolonial yang dirancang untuk merepresentasikan kekuasaan Belanda, kini dinamai dari peristiwa yang justru mengakhiri kekuasaan asing sebelumnya \u2014 penaklukan pelabuhan Sunda Kelapa dari tangan Portugis pada 22 Juni 1527, tanggal yang hingga kini diperingati sebagai hari jadi Kota Jakarta.\r\n <\/p>\r\n\r\n <h2>Dari Balai Kota Sederhana ke <em>Istana Mini Amsterdam<\/em><\/h2>\r\n <p>\r\n Sejarah bangunan ini jauh lebih panjang daripada usia museumnya. Balai kota pertama di lokasi ini selesai dibangun pada 1627, hanya tujuh tahun setelah VOC mendirikan Batavia di atas puing Jayakarta yang telah ditaklukkan Fatahillah hampir satu abad sebelumnya. Bangunan itu diperluas pada 1649, namun gedung yang kita kenal hari ini adalah hasil renovasi total yang dimulai pada 1707 dan baru rampung tiga tahun kemudian, diresmikan oleh Gubernur Jenderal Abraham van Riebeeck.\r\n <\/p>\r\n <p>\r\n Yang menarik, perancangnya tidak sekadar meniru gaya kolonial generik. Stadhuis Batavia \u2014 nama resminya saat itu \u2014 dirancang dengan mengacu pada Paleis op de Dam, istana balai kota di jantung Amsterdam, lengkap dengan kubah (cupola) yang menjadi mahkota bangunan serta proporsi khas balai kota Belanda abad ke-17. Di dalamnya terdapat 37 ruangan dengan balok kayu raksasa yang menopang struktur \u2014 sebuah pernyataan arsitektural bahwa Batavia bukan sekadar pos dagang rempah, melainkan replika kekuasaan metropolitan di belahan dunia yang lain.\r\n <\/p>\r\n\r\n <h2>Lorong Bawah Tanah dan Bayang <em>Pangeran Diponegoro<\/em><\/h2>\r\n\r\n \r\n <p>\r\n Di balik kemegahan porticonya, gedung ini menyimpan sisi paling kelam dari sejarah Batavia. Di bawah teras depan terdapat deretan sel tahanan yang berfungsi sebagai penjara bawah tanah hingga tahun 1846. Hukuman mati bagi para terpidana bahkan pernah dilaksanakan secara terbuka di alun-alun di depan gedung ini \u2014 yang pada masa itu bernama Stadhuisplein, kini dikenal sebagai Taman Fatahillah.\r\n <\/p>\r\n\r\n <p>\r\n Salah satu tahanan paling terkenal yang pernah meringkuk di sel-sel itu adalah Pangeran Diponegoro. Setelah ditangkap secara licik pada 1830, sang pangeran sempat ditahan sejenak di gedung ini sebelum akhirnya diasingkan ke Manado, Sulawesi Utara. Sel-sel sempit itu menjadi pengingat bahwa kemegahan arsitektur kolonial selalu berdiri berdampingan dengan kekerasan yang menopangnya.\r\n <\/p>\r\n\r\n <blockquote>\r\n Gedung ini tidak pernah netral. Ia adalah panggung kekuasaan \u2014 dan panggung itu, oleh sejarah, kini dibalik untuk menjadi ruang ingatan bersama.\r\n <\/blockquote>\r\n\r\n <h2>Dari Kantor Gubernur ke <em>Markas Militer<\/em><\/h2>\r\n\r\n <p>\r\n Fungsi Stadhuis sebagai pusat pemerintahan kota berakhir pada 1913, ketika Batavia berkembang ke arah selatan dan kantor-kantor administrasi pindah mengikuti pertumbuhan kota. Setelah Indonesia merdeka, gedung ini sempat menjadi kantor Gubernur Jawa Barat hingga 1961, sebelum beralih fungsi lagi sebagai markas Komando Distrik Militer (KODIM) 0503 Jakarta Barat.\r\n <\/p>\r\n\r\n <p>\r\n Titik balik baru datang pada 1970, ketika Gubernur Ali Sadikin menetapkan Taman Fatahillah sebagai kawasan cagar budaya \u2014 langkah awal dari upaya panjang menyelamatkan Kota Tua dari ancaman pembongkaran yang saat itu mengintai banyak gedung tua Jakarta. Empat tahun berselang, tepatnya 30 Maret 1974, gedung ini resmi dibuka untuk publik sebagai Museum Sejarah Jakarta: pusat pengumpulan, konservasi, dan penelitian warisan budaya kota.\r\n <\/p>\r\n\r\n <figure>\r\n <img decoding=\"async\"\r\n src=\"https:\/\/commons.wikimedia.org\/wiki\/Special:FilePath\/Batavia%20Fatahillah%20Square%2C%20Kota%20Tua%20Jakarta%2001.jpg\"\r\n alt=\"Museum Fatahillah di Taman Fatahillah, Kota Tua Jakarta\"\r\n \/>\r\n <figcaption>\r\n Taman Fatahillah, dahulu bernama Stadhuisplein \u2014 alun-alun yang menjadi panggung pemerintahan, pengadilan, sekaligus eksekusi di masa Batavia.\r\n <\/figcaption>\r\n <\/figure>\r\n\r\n <a\r\n href=\"https:\/\/studyinca.ac.id\/museum-fatahillah\/\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n style=\"\r\n display: inline-block;\r\n padding: 10px 24px;\r\n background-color: transparent;\r\n border: 2px solid #d4af37;\r\n color: #d4af37;\r\n text-decoration: none;\r\n font-weight: bold;\r\n border-radius: 4px;\r\n font-size: 15px;\r\n \"\r\n >\r\n Lihat Referensi Lengkap \u2197\r\n <\/a>\r\n\r\n <div class=\"article-tags\">\r\n <a href=\"#\">#Museum Fatahillah<\/a>\r\n <a href=\"#\">#Kota Tua<\/a>\r\n <a href=\"#\">#Sejarah Batavia<\/a>\r\n <a href=\"#\">#Jakarta Barat<\/a>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <!-- Related Articles -->\r\n <section class=\"related-section\">\r\n <div class=\"container\">\r\n <div class=\"related-heading\">Baca Juga<\/div>\r\n \r\n <!-- Judul dibiarkan sendiri di atas -->\r\n <h2 class=\"related-title\">Artikel <em>Terkait<\/em><\/h2>\r\n\r\n <!-- Slider Container -->\r\n <div class=\"related-grid slider-container\" id=\"relatedSlider\">\r\n\r\n <!-- Card 4 -->\r\n <a class=\"related-card\" href=\"https:\/\/forjakarta.com\/artikel\/enam-kuliner\/\" target=\"_blank\">\r\n <div class=\"img\" style=\"background-image: url(https:\/\/yoexplore.co.id\/wp-content\/uploads\/2018\/10\/kuliner-murah-di-jakarta-pusat-yoexplore-mytrip123-810x460.jpeg);\"><\/div>\r\n <div class=\"body\">\r\n <div class=\"cat\">Heritage \u00b7 Kuliner Jakarta<\/div>\r\n <h3>Dapur Kota: Jejak Sejarah di Balik Enam Kuliner Legendaris Jakarta<\/h3>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Card 3 -->\r\n <a class=\"related-card\" href=\"https:\/\/forjakarta.com\/artikel\/museum-fatahillah\/\" target=\"_blank\">\r\n <div class=\"img\" style=\"background-image: url(https:\/\/ashleyhotelgroup.com\/wp-content\/uploads\/2025\/06\/shutterstock_1798596856.webp);\"><\/div>\r\n <div class=\"body\">\r\n <div class=\"cat\">Ruang Terbuka Hijau \u00b7 Menteng<\/div>\r\n <h3>Taman Suropati: Oase Kolonial di Jantung Menteng<\/h3>\r\n <\/div>\r\n <\/a>\r\n \r\n <!-- Card 1 -->\r\n <a class=\"related-card\" href=\"https:\/\/forjakarta.com\/artikel\/kelapa-gading\/\" target=\"_blank\">\r\n <div class=\"img\" style=\"background-image: url(https:\/\/customer-assets.emergentagent.com\/job_jakarta-timeline-hub\/artifacts\/g1uxkugt_kelapa-gading-area.jpg);\"><\/div>\r\n <div class=\"body\">\r\n <div class=\"cat\">Heritage \u00b7 Ekologi Jakarta utara<\/div>\r\n <h3>Kelapa Gading: Cerita Pohon di Balik Gemerlap Summarecon<\/h3>\r\n <\/div>\r\n <\/a>\r\n \r\n <!-- Card 2 -->\r\n <a class=\"related-card\" href=\"https:\/\/forjakarta.com\/artikel\/jalan-sudirman\/\" target=\"_blank\">\r\n <div class=\"img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1555899434-94d1368aa7af?w=800&q=80');\"><\/div>\r\n <div class=\"body\">\r\n <div class=\"cat\">Ekonomi Urban \u00b7 Sudirman<\/div>\r\n <h3>Jalan Jenderal Sudirman: Nadi Ekonomi Jakarta Modern<\/h3>\r\n <\/div>\r\n <\/a>\r\n \r\n \r\n\r\n \r\n\r\n <!-- Jika Anda punya card 4, letakkan di sini -->\r\n\r\n <\/div>\r\n\r\n <!-- Tombol & Penanda di Bawah Slider -->\r\n <div class=\"slider-controls-bottom\">\r\n <button id=\"slideLeft\" class=\"slider-btn\" aria-label=\"Geser Kiri\">\u276e<\/button>\r\n \r\n <!-- Titik Penanda (Otomatis dibuat oleh JavaScript) -->\r\n <div class=\"slider-indicators\" id=\"sliderDots\"><\/div>\r\n \r\n <button id=\"slideRight\" class=\"slider-btn\" aria-label=\"Geser Kanan\">\u276f<\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n <\/main>\r\n\r\n <!-- ============ FOOTER ============ -->\r\n <footer class=\"footer\">\r\n <div class=\"container\">\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-brand\">\r\n <h3>Jakarta <em>Study Club<\/em><\/h3>\r\n <p>\r\n Platform riset & advokasi urban Jakarta. Menghubungkan akademisi,\r\n praktisi, dan komunitas demi kota yang berakar sejarah dan menatap\r\n masa depan.\r\n <\/p>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Jelajahi<\/h4>\r\n <a href=\"https:\/\/forjakarta.com\/#visi\">Visi & Misi<\/a>\r\n <a href=\"https:\/\/forjakarta.com\/#focus\">Program<\/a>\r\n <a href=\"https:\/\/forjakarta.com\/#articles\">Artikel<\/a>\r\n <a href=\"https:\/\/forjakarta.com\/#org\">Tim<\/a>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Hubungi<\/h4>\r\n <a href=\"https:\/\/forjakarta.com\/#kontak\">Kolaborasi<\/a>\r\n <a href=\"https:\/\/forjakarta.com\/#kontak\">Riset Bersama<\/a>\r\n <a href=\"mailto:forjakarta.com\"\r\n >Email: <em>forjakarta.com<\/em><\/a\r\n >\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Sosial<\/h4>\r\n <a href=\"#\">Instagram<\/a>\r\n <a href=\"#\">LinkedIn<\/a>\r\n <!-- <a href=\"#\">Twitter \/ X<\/a>\r\n <a href=\"#\">YouTube<\/a> -->\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <span\r\n >\u00a9 2025 JAKARTA STUDY CLUB \u00b7 YAYASAN JAKARTA FOUR KHATULISTIWA<\/span\r\n >\r\n <span>HAK CIPTA DILINDUNGI<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n const slider = document.getElementById('relatedSlider');\r\n const slideLeftBtn = document.getElementById('slideLeft');\r\n const slideRightBtn = document.getElementById('slideRight');\r\n\r\n \/\/ Menghitung seberapa jauh slider harus bergeser saat diklik\r\n \/\/ Diatur agar bergeser sejauh ukuran satu card ditambah jarak (gap)\r\n const scrollAmount = 300; \r\n\r\n slideLeftBtn.addEventListener('click', function() {\r\n slider.scrollBy({\r\n left: -scrollAmount,\r\n behavior: 'smooth'\r\n });\r\n });\r\n\r\n slideRightBtn.addEventListener('click', function() {\r\n slider.scrollBy({\r\n left: scrollAmount,\r\n behavior: 'smooth'\r\n });\r\n });\r\n });\r\n<\/script>\r\n <\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kelapa Gading & Summarecon \u00b7 Jakarta Study Club Artikel Kolaborasi Beranda \/ Artikel \/ Museum Fatahillah Heritage \u00b7 Kota Tua Museum Fatahillah: Saksi Bisu Sejarah Batavia Dari balai kota VOC yang megah hingga ruang pamer ingatan kota \u2014 bagaimana satu gedung di tepi Taman Fatahillah merekam empat abad pergantian kekuasaan di Jakarta. HA Ditulis oleh […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-33","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/forjakarta.com\/artikel\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/forjakarta.com\/artikel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/forjakarta.com\/artikel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/forjakarta.com\/artikel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/forjakarta.com\/artikel\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":12,"href":"https:\/\/forjakarta.com\/artikel\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/forjakarta.com\/artikel\/wp-json\/wp\/v2\/posts\/33\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/forjakarta.com\/artikel\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/forjakarta.com\/artikel\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/forjakarta.com\/artikel\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}