1try{!function(){var a="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},e=(new a.Error).stack;e&&(a._sentryDebugIds=a._sentryDebugIds||{},a._sentryDebugIds[e]="2a1dd144-b4a9-4893-9ff7-4db025146029",a._sentryDebugIdIdentifier="sentry-dbid-2a1dd144-b4a9-4893-9ff7-4db025146029")}()}catch(a){}(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1802],{17861:function(a,e,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/halaman-interaktif",function(){return i(96379)}])},96379:function(a,e,i){"use strict";i.r(e),i.d(e,{__N_SSG:function(){return k},default:function(){return j}});var n=i(85893),t=i(20726),s=i.n(t),r=i(9008),o=i.n(r),l=i(67294),d=i(97107),b=i(22908),m=i(26230),p=i(3773);let c="https://kakak.ai/halaman-interaktif",h="https://kakak.ai/images/og/halaman-interaktif.v1.jpg",u=[{id:"sriwijaya",judul:"Sriwijaya membaca laut",topik:"Sejarah \xb7 untuk pelajar SMA",url:"https://files.kakakusercontent.com/generated-files/1898960d-75f7-454c-a6e5-06ebb92bdfb7_srivijaya-jejak-jalur-laut.html",poster:"/images/halaman-interaktif/peta-sriwijaya.webp",lebar:1200,tinggi:750,isi:"Peta Asia Tenggara dengan garis pantai nyata dan rute laut ke India, jalur pelayaran, linimasa, warisan, dan kuis."},{id:"borobudur",judul:"Borobudur: batu, jejak, dan makna",topik:"Wisata dan sejarah \xb7 untuk wisatawan",url:"https://files.kakakusercontent.com/generated-files/30e2893f-0865-40a3-bd93-f51cb0398ac4_sejarah-candi-borobudur-wisatawan.html",poster:"/images/halaman-interaktif/linimasa-borobudur.webp",lebar:1200,tinggi:675,isi:"Hero berfoto, linimasa yang digeser ke samping, galeri, peta letak, kartu video, dan kuis lima soal."},{id:"baku",judul:"Russell vs Verstappen, GP Azerbaijan 2026",topik:"Data olahraga \xb7 Formula 1",url:"https://files.kakakusercontent.com/generated-files/f814442b-0c2a-4162-9883-27e5dd2ea8bf_duel-russell-verstappen-baku-2026.html",poster:"/images/halaman-interaktif/tempo-baku.webp",lebar:1200,tinggi:675,isi:"Waktu lap demi lap, stint ban, pit stop, dan jejak kecepatan: grafik yang bisa disentuh, dari data balapan terbuka, bukan angka karangan."}],x=[{nama:"Linimasa",untuk:"Titik waktu yang digeser atau diklik, dengan keterangan tiap titik."},{nama:"Peta nyata",untuk:"Garis pantai dan rute laut yang dihitung dengan benar, titiknya bisa disentuh. Untuk negara, pulau, dan perairan di Indonesia, Asia Tenggara, atau dunia. Bukan peta jalan."},{nama:"Grafik",untuk:"Disorot, digeser, dibandingkan. Angkanya dari bahanmu, hasil pencarian, atau data balapan F1."},{nama:"Kuis",untuk:"Tiga sampai lima soal, dengan penjelasan setelah menjawab."},{nama:"Galeri foto",untuk:"Foto dicarikan dari web atau pakai lampiranmu, lengkap dengan kredit."},{nama:"Kalkulator",untuk:"Penggeser dan hitungan yang hasilnya berubah langsung."},{nama:"Kartu video",untuk:"Video YouTube pilihanmu tampil sebagai kartu bergambar. Menekannya membuka YouTube di tab baru."}],g=[{no:"01",judul:"Ceritakan topiknya",isi:"Sebutkan topik, siapa pembacanya, dan bahan yang kamu punya. Kamu hanya ditanya dua hal sekali saja: pakai gambar atau tidak, dan kalau mau, kartu video YouTube. Warna, huruf, dan susunan adalah urusan kakak.ai."},{no:"02",judul:"Halaman dirancang dan terbit",isi:"kakak.ai menyusun ceritanya, mencari gambar, menggambar peta dan grafik, lalu menerbitkan satu halaman yang langsung terbuka di panel. Tiap topik mendapat rancangan sendiri, bukan template yang diisi."},{no:"03",judul:"Revisi lewat chat, bagikan tautannya",isi:'"Ganti judulnya", "tambah kuis", "warnanya biru". Hanya bagian itu yang diubah. Tautannya bisa dibagikan ke siapa saja, tanpa perlu akun.'}],f=[{q:"Apa bedanya dengan Infografis Editable dan Presentasi Editable?",a:"Keduanya menghasilkan <strong>kanvas tetap</strong> yang teksnya bisa kamu edit sendiri di panel. Halaman Interaktif kebalikannya: satu halaman web panjang yang dibaca dengan menggulir, dengan gerak dan sentuhan (peta, linimasa, kuis). Ia <strong>tidak punya editor</strong>; untuk mengubahnya kamu minta lewat chat."},{q:"Bisakah video YouTube diputar di dalam halaman?",a:"Tidak. Halaman berjalan terisolasi demi keamanan, sehingga pemutar YouTube tidak bisa tersemat. Sebagai gantinya video tampil sebagai <strong>kartu bergambar</strong>; menekannya membuka YouTube di tab baru. Kartu itu hanya dibuat kalau kamu mau."},{q:"Peta seperti apa yang dihasilkan?",a:"Peta dengan <strong>garis pantai nyata</strong> dan rute laut yang tidak menembus daratan, untuk Indonesia, Asia Tenggara, atau dunia. Kota, candi, atau tempat lain ditandai sebagai titik yang bisa disentuh. Tingkatnya negara, pulau, dan perairan: <strong>tidak ada provinsi, jalan, atau denah sekitar</strong>. Untuk lokasi yang persis, halaman memasang tautan ke OpenStreetMap atau Google Maps."},{q:"Dari mana foto-fotonya?",a:"Dicarikan dari web, atau kamu lampirkan sendiri. Lisensi foto dari web <strong>tidak diperiksa otomatis</strong>: kreditnya dicantumkan di halaman, tetapi periksa ketentuan pemakaiannya sebelum dipakai di tempat lain, terutama untuk keperluan komersial."},{q:"Data apa yang bisa dipakai?",a:"Saat ini sumber data khusus hanya untuk <strong>balapan Formula 1</strong>: hasil, klasemen, kalender, waktu lap, dan telemetri dari sumber data terbuka OpenF1 dan Jolpica-
1F1, dengan sumber yang dicantumkan di halaman. Topik lain memakai bahan yang kamu berikan atau hasil pencarian. Angka tidak dikarang: kalau datanya tidak cukup, halamannya dibuat lebih kecil."},{q:"Berapa biayanya?",a:"Membuat halaman memakai kredit chat seperti biasa, sesuai model yang kamu pilih, tanpa biaya tambahan untuk menerbitkannya. Pengecualiannya data balapan F1: <strong>150 kredit PRO</strong> untuk tiap dataset baru (angka ini bisa berubah), dan biayanya disebutkan sebelum data diambil. Permintaan identik yang masih segar, pengambilan yang gagal, dan halaman tanpa data tidak dikenai biaya. Gambar buatan AI memakai kredit PRO dan hanya dibuat kalau kamu memintanya."},{q:"Siapa yang bisa membuka halamannya?",a:"Siapa pun yang punya tautannya, <strong>tanpa perlu akun</strong>. Karena itu jangan memuat data pribadi atau rahasia di dalamnya. Halamannya berjalan di domain terpisah dari kakak.ai dan tidak bisa mengakses akunmu."},{q:"Bisakah diubah setelah jadi?",a:'Bisa, lewat chat: "ganti judulnya", "tambah kuis di bagian tiga", "warnanya biru". Hanya bagian yang kamu minta yang diubah, bukan seluruh halaman dibuat ulang. Tiap perubahan menghasilkan <strong>tautan baru</strong>; tautan lama tetap utuh.'},{q:"Perlu bisa desain atau coding?",a:"Tidak. Kamu menyebutkan topiknya; susunan, warna, huruf, dan interaksinya dirancang untukmu. Kalau ingin tampilan yang berbeda sama sekali, minta saja dan halamannya ditulis ulang dari awal."},{q:"Bisa dibuka di HP?",a:"Bisa. Setiap halaman dirancang dari layar HP dulu, baru dilebarkan untuk laptop."}];var k=!0;function j(){let[a,e]=(0,l.useState)(0),[i,t]=(0,l.useState)(null),r=(0,l.useRef)(null);(0,l.useEffect)(()=>{var a;if(!i)return;let e=a=>{"Escape"===a.key&&t(null)};document.addEventListener("keydown",e);let n=document.body.style.overflow;return document.body.style.overflow="hidden",null===(a=r.current)||void 0===a||a.focus(),()=>{document.removeEventListener("keydown",e),document.body.style.overflow=n}},[i]);let k=[...(0,p.P)({pageUrl:c,pageName:"Halaman Interaktif",pageDescription:"Ubah satu topik jadi halaman web panjang yang hidup: peta, linimasa, grafik, galeri, dan kuis yang bisa disentuh, dirancang otomatis dan bisa dibagikan lewat tautan.",ogImageUrl:h}),{"@type":"FAQPage",mainEntity:f.map(a=>
1({"@type":"Question",name:a.q,acceptedAnswer:{"@type":"Answer",text:a.a.replace(/<[^>]+>/g,"")}}))}],j=u[0];return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(o(),{children:[(0,n.jsx)("title",{className:"jsx-2a3bd6f336855bee",children:"Halaman Interaktif: Satu Topik Jadi Halaman Web yang Hidup | kakak.ai"}),(0,n.jsx)("meta",{name:"description",content:"Ubah satu topik jadi halaman web panjang yang hidup: peta, linimasa, grafik, dan kuis yang bisa disentuh. Dibagikan lewat tautan, tanpa coding.",className:"jsx-2a3bd6f336855bee"}),(0,n.jsx)("link",{rel:"canonical",href:c,className:"jsx-2a3bd6f336855bee"}),(0,n.jsx)("link",{rel:"alternate",hrefLang:"id",href:c,className:"jsx-2a3bd6f336855bee"}),(0,n.jsx)("link",{rel:"alternate",hrefLang:"x-default",href:c,className:"jsx-2a3bd6f336855bee"}),(0,n.jsx)("meta",{property:"og:type",content:"website",className:"jsx-2a3bd6f336855bee"},"og-type"),(0,n.jsx)("meta",{property:"og:site_name",content:"kakak.ai",className:"jsx-2a3bd6f336855bee"},"og-site-name"),(0,n.jsx)("meta",{property:"og:title",content:"Halaman Interaktif: Satu Topik Jadi Halaman Web yang Hidup",className:"jsx-2a3bd6f336855bee"},"og-title"),(0,n.jsx)("meta",{property:"og:description",content:"Peta, linimasa, grafik, dan kuis yang bisa disentuh, dirancang otomatis dari satu topik. Bisa dibagikan lewat tautan.",className:"jsx-2a3bd6f336855bee"},"og-description"),(0,n.jsx)("meta",{property:"og:url",content:c,className:"jsx-2a3bd6f336855bee"},"og-url"),(0,n.jsx)("meta",{property:"og:image",content:h,className:"jsx-2a3bd6f336855bee"},"og-image"),(0,n.jsx)("meta",{property:"og:image:secure_url",content:h,className:"jsx-2a3bd6f336855bee"}),(0,n.jsx)("meta",{property:"og:image:width",content:"1200",className:"jsx-2a3bd6f336855bee"}),(0,n.jsx)("meta",{property:"og:image:height",content:"630",className:"jsx-2a3bd6f336855bee"}),(0,n.jsx)("meta",{property:"og:locale",content:"id_ID",className:"jsx-2a3bd6f336855bee"}),(0,n.jsx)("meta",{name:"twitter:card",content:"summary_large_image",className:"jsx-2a3bd6f336855bee"},"twitter-card"),(0,n.jsx)("meta",{name:"twitter:title",content:"Halaman Interaktif: Satu Topik Jadi Halaman Web yang Hidup",className:"jsx-2a3bd6f336855bee"},"twitter-title"),(0,n.jsx)("meta",{name:"twitter:description",content:"Peta, linimasa, grafik, dan kuis yang bisa disentuh, dirancang otomatis dari satu topik. Bisa dibagikan lewat tautan.",className:"jsx-2a3bd6f336855bee"},"twitter-description"),(0,n.jsx)("meta",{name:"twitter:image",content:h,className:"jsx-2a3bd6f336855bee"},"twitter-image"),(0,n.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify({"@context":"https://schema.org","@graph":k})},className:"jsx-2a3bd6f336855bee"})]}),(0,n.jsx)(s(),{id:"2a3bd6f336855bee",children:".hi-page{background:#F8FAF8;color:#1C1C2E;overflow-x:clip}.hi-wrap{max-width:1180px;margin:0 auto;padding:0 24px}.hi-page section{border-top:1px solid#E4E7E1}.hi-page section:first-of-type{border-top:0}.hi-eyebrow{font-family:var(--font-mono,ui-monospace),monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6B7570}@-webkit-keyframes hi-rise{from{-webkit-transform:translatey(14px);transform:translatey(14px)}to{-webkit-transform:none;transform:none}}@-moz-keyframes hi-rise{from{-moz-transform:translatey(14px);transform:translatey(14px)}to{-moz-transform:none;transform:none}}@-o-keyframes hi-rise{from{-o-transform:translatey(14px);transform:translatey(14px)}to{-o-transform:none;transform:none}}@keyframes hi-rise{from{-webkit-transform:translatey(14px);-moz-transform:translatey(14px);-o-transform:translatey(14px);transform:translatey(14px)}to{-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none}}.hi-rise{-webkit-animation:hi-rise.5s cubic-bezier(.2,.7,.3,1)both;-moz-animation:hi-rise.5s cubic-bezier(.2,.7,.3,1)both;-o-animation:hi-rise.5s cubic-bezier(.2,.7,.3,1)both;animation:hi-rise.5s cubic-bezier(.2,.7,.3,1)both}@media(prefers-reduced-motion:reduce){.hi-rise{-webkit-animation:none;-moz-animation:none;-o-animation:none;animation:none}}.hi-hero{padding:96px 0 72px}.hi-h1{font-family:var(--font-display,inherit);font-weight:800;font-size:max(44px,min(7.2vw,104px));font-size:clamp(44px,7.2vw,104px);line-height:.96;letter-spacing:-.035em;margin:20px 0 0;max-width:16ch}.hi-h1 em{font-style:normal;color:#25BA8C}.hi-lede{margin:28px 0 0;font-size:max(17px,min(1.5vw,21px));font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:#4A544E;max-width:58ch}.hi-actions{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;margin-top:36px}.hi-cta{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;height:46px;padding:0 26px;-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;background:#2DD4A0;color:#0A3D2D;font-weight:700;font-size:15px;text-decoration:none;-webkit-transition:background.15s ease-out;-moz-transition:background.15s ease-out;-o-transition:background.15s ease-out;transition:background.15s ease-out}.hi-cta:hover{background:#25BA8C}.hi-ghost{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;height:46px;padding:0 22px;-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;border:1px solid#C9D2CC;color:#1C1C2E;font-weight:600;font-size:15px;text-decoration:none;-webkit-transition:border-color.15s ease-out;-moz-transition:border-color.15s ease-out;-o-transition:border-color.15s ease-out;transition:border-color.15s ease-out}.hi-ghost:hover{border-color:#1C1C2E}.hi-plate{margin-top:56px;border:1px solid#E4E7E1;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;overflow:hidden;background:#fff}.hi-plate-btn{display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;text-align:left}.hi-plate-btn img{display:block;width:100%;height:auto}@media(max-width:700px){.hi-plate-btn img{aspect-ratio:4/5;-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top}}.hi-plate-note{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:6px 14px;padding:12px 16px;margin:0;background:#fff;border-top:1px solid#E4E7E1;font-size:13px;color:#6B7570}.hi-plate-note strong{color:#1C1C2E;font-weight:600}.hi-claim{padding:84px 0}.hi-claim p{font-family:var(--font-display,inherit);font-weight:700;font-size:max(26px,min(3.6vw,46px));font-size:clamp(26px,3.6vw,46px);line-height:1.18;letter-spacing:-.02em;max-width:24ch;margin:0}.hi-claim .hi-sub{font-family:inherit;font-weight:400;font-size:17px;line-height:1.65;color:#4A544E;max-width:62ch;margin-top:24px;letter-spacing:0}.hi-sec{padding:84px 0}.hi-sec-h{font-family:var(--font-display,inherit);font-weight:800;font-size:max(30px,min(4vw,54px));font-size:clamp(30px,4vw,54px);line-height:1.05;letter-spacing:-.03em;margin:12px 0 0}.hi-sec-p{margin:18px 0 0;font-size:17px;line-height:1.6;color:#4A544E;max-width:60ch}.hi-grid{margin-top:52px;display:grid;gap:40px 32px;grid-template-columns:repeat(2,1fr)}.hi-card{display:block;text-decoration:none;color:inherit;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;text-align:left;width:100%;cursor:pointer}.hi-shot{border:1px solid#E4E7E1;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;overflow:hidden;background:#fff;-webkit-transition:border-color.2s ease-out;-moz-transition:border-color.2s ease-out;-o-transition:border-color.2s ease-out;transition:border-color.2s ease-out}.hi-card:hover .hi-shot{border-color:#9BA5A0}.hi-shot img{display:block;width:100%;height:auto}.hi-card h3{font-size:18px;font-weight:700;margin:18px 0 0;letter-spacing:-.01em}.hi-meta{margin-top:6px;font-size:13px;color:#6B7570}.hi-card p{margin:10px 0 0;font-size:15px;line-height:1.55;color:#4A544E}.hi-tall{grid-column:span 2;display:grid;grid-template-columns:320px 1fr;gap:40px;-webkit-box-align:start;-webkit-align-items:start;-moz-box-align:start;-ms-flex-align:start;align-items:start}.hi-tall h3{margin-top:0}.hi-tall .hi-shot{max-width:320px}.hi-list{margin-top:44px;border-top:1px solid#E4E7E1}.hi-row{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid#E4E7E1;-webkit-box-align:baseline;-webkit-align-items:baseline;-moz-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.hi-row dt{font-family:var(--font-display,inherit);font-size:20px;font-weight:700;letter-spacing:-.01em}.hi-row dd{margin:0;font-size:16px;line-height:1.55;color:#4A544E;max-width:62ch}.hi-steps{margin-top:48px;display:grid;gap:0}.hi-step{display:grid;grid-template-columns:92px 1fr;gap:28px;padding:32px 0;border-top:1px solid#E4E7E1}.hi-step:last-child{border-bottom:1px solid#E4E7E1}.hi-step-no{font-family:var(--font-mono,ui-monospace),monospace;font-size:13px;color:#9BA5A0;padding-top:4px}.hi-step h3{font-family:var(--font-display,inherit);font-size:max(20px,min(2.2vw,28px));font-size:clamp(20px,2.2vw,28px);font-weight:700;margin:0;letter-spacing:-.02em}.hi-step p{margin:10px 0 0;font-size:16px;line-height:1.62;color:#4A544E;max-width:62ch}.hi-faq{margin-top:44px;border-top:1px solid#E4E7E1}.hi-q{border-bottom:1px solid#E4E7E1}.hi-q button{width:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;gap:20px;-webkit-box-align:baseline;-webkit-align-items:baseline;-moz-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:justify;
1-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;background:none;border:0;padding:24px 0;text-align:left;cursor:pointer;font-family:inherit;font-size:18px;font-weight:600;color:#1C1C2E;letter-spacing:-.01em}.hi-q-mark{font-family:var(--font-mono,ui-monospace),monospace;font-size:20px;color:#9BA5A0;-webkit-box-flex:0;-webkit-flex:none;-moz-box-flex:0;-ms-flex:none;flex:none;line-height:1}.hi-a{padding:0 0 26px;font-size:16px;line-height:1.68;color:#4A544E;max-width:68ch}.hi-a strong{color:#1C1C2E}.hi-modal{position:fixed;inset:0;z-index:3000;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:24px;background:rgba(12,16,14,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-animation:hi-fade.18s ease-out;-moz-animation:hi-fade.18s ease-out;-o-animation:hi-fade.18s ease-out;animation:hi-fade.18s ease-out}@-webkit-keyframes hi-fade{from{opacity:0}to{opacity:1}}@-moz-keyframes hi-fade{from{opacity:0}to{opacity:1}}@-o-keyframes hi-fade{from{opacity:0}to{opacity:1}}@keyframes hi-fade{from{opacity:0}to{opacity:1}}.hi-modal-kotak{width:min(1180px,100%);max-height:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#fff;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;overflow:hidden;-webkit-box-shadow:0 30px 80px rgba(0,0,0,.35);-moz-box-shadow:0 30px 80px rgba(0,0,0,.35);box-shadow:0 30px 80px rgba(0,0,0,.35)}.hi-modal-bar{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;gap:16px;padding:12px 14px 12px 18px;border-bottom:1px solid#E4E7E1}.hi-modal-judul{-webkit-box-flex:1;-webkit-flex:1;-moz-box-flex:1;-ms-flex:1;flex:1;min-width:0;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:2px}.hi-modal-judul strong{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}.hi-modal-judul span{font-size:12px;color:#6B7570}.hi-modal-tab{font-size:13px;font-weight:600;color:#1C1C2E;text-decoration:none;border:1px solid#C9D2CC;-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;padding:7px 14px;white-space:nowrap;-webkit-transition:border-color.15s ease-out;-moz-transition:border-color.15s ease-out;-o-transition:border-color.15s ease-out;transition:border-color.15s ease-out}.hi-modal-tab:hover{border-color:#1C1C2E}.hi-modal-tutup{width:34px;height:34px;-webkit-box-flex:0;-webkit-flex:none;-moz-box-flex:0;-ms-flex:none;flex:none;-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;cursor:pointer;border:1px solid#C9D2CC;background:#fff;color:#1C1C2E;font-size:14px;line-height:1;-webkit-transition:background.15s ease-out;-moz-transition:background.15s ease-out;-o-transition:background.15s ease-out;transition:background.15s ease-out}.hi-modal-tutup:hover{background:#F1F4F1}.hi-modal-panggung{position:relative;width:100%;background:#fff;height:min(82vh,860px)}.hi-modal-panggung iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}@media(max-width:700px){.hi-modal{padding:10px}.hi-modal-tab{display:none}.hi-modal-panggung{height:84vh}}.hi-end{padding:96px 0 108px}.hi-end h2{font-family:var(--font-display,inherit);font-weight:800;font-size:max(32px,min(5vw,68px));font-size:clamp(32px,5vw,68px);line-height:1.02;letter-spacing:-.035em;margin:0;max-width:18ch}@media(max-width:860px){.hi-hero{padding:64px 0 52px}.hi-grid{grid-template-columns:1fr}.hi-tall{grid-column:auto;grid-template-columns:1fr;gap:20px}.hi-step{grid-template-columns:56px 1fr;gap:16px}.hi-row{grid-template-columns:1fr;gap:6px}.hi-claim,.hi-sec{padding:60px 0}}"}),(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-page",children:[(0,n.jsx)(d.Z,{sections:[{href:"#contoh",label:"Contoh"},{href:"#isinya",label:"Isinya"},{href:"#caranya",label:"Cara Kerja"},{href:"#faq",label:"FAQ"},{href:"/pricing",label:"Harga"}],ctaHref:"/register?utm_source=halamaninteraktif_lp&utm_medium=nav_cta",ctaHrefMobile:"/register?utm_source=halamaninteraktif_lp&utm_medium=mobile_cta",ctaLabel:"Mulai Gratis",theme:"light"}),(0,n.jsxs)("main",{className:"jsx-2a3bd6f336855bee",children:[(0,n.jsx)("section",{className:"jsx-2a3bd6f336855bee hi-hero",children:(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-wrap",children:[(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee hi-eyebrow hi-rise",children:"Halaman Interaktif"}),(0,n.jsxs)("h1",{className:"jsx-2a3bd6f336855bee hi-h1 hi-rise",children:["Satu topik jadi halaman yang ",(0,n.jsx)("em",{className:"jsx-2a3bd6f336855bee",children:"hidup"}),"."]}),(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee hi-lede hi-rise",children:"Tulis topiknya. kakak.ai merancang halaman web panjang yang digulir seperti website: bagian-bagian bercerita, peta, linimasa, grafik, dan kuis yang bisa disentuh. Terbit sebagai tautan yang bisa dibagikan. Tanpa template, tanpa coding."}),(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-actions hi-rise",children:[(0,n.jsx)("a",{href:"/register?utm_source=halamaninteraktif_lp&utm_medium=hero_cta",className:"jsx-2a3bd6f336855bee hi-cta",children:"Mulai Gratis"}),(0,n.jsx)("a",{href:"#contoh",className:"jsx-2a3bd6f336855bee hi-ghost",children:"Lihat contohnya"})]}),(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-plate",children:[(0,n.jsx)("button",{type:"button",onClick:()=>t(j),"aria-label":"Buka halaman contoh: ".concat(j.judul),className:"jsx-2a3bd6f336855bee hi-plate-btn",children:(0,n.jsxs)("picture",{className:"jsx-2a3bd6f336855bee",children:[(0,n.jsx)("source",{media:"(max-width: 700px)",srcSet:"/images/halaman-interaktif/peta-sriwijaya-hp.webp",className:"jsx-2a3bd6f336855bee"}),(0,n.jsx)("img",{src:j.poster,alt:'Bagian peta dari halaman "'.concat(j.judul,'": Asia Tenggara de
1ngan rute laut dari Palembang ke India'),width:j.lebar,height:j.tinggi,className:"jsx-2a3bd6f336855bee"})]})}),(0,n.jsxs)("p",{className:"jsx-2a3bd6f336855bee hi-plate-note",children:[(0,n.jsxs)("span",{className:"jsx-2a3bd6f336855bee",children:[(0,n.jsx)("strong",{className:"jsx-2a3bd6f336855bee",children:"Ini bukan mockup."})," Bagian dari halaman sungguhan â",j.judul,"â, dibuat dari satu percakapan."]}),(0,n.jsx)("span",{className:"jsx-2a3bd6f336855bee",children:"Klik untuk membukanya utuh: peta, linimasa, dan kuisnya."})]})]})]})}),(0,n.jsx)("section",{className:"jsx-2a3bd6f336855bee hi-claim",children:(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-wrap",children:[(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee",children:"Dirancang dari nol, bukan template yang diisi."}),(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee hi-sub",children:"Susunan, warna, huruf, dan jenis interaksinya mengikuti topiknya. Sejarah bisa hangat dan berlapis, data olahraga bisa tegas dan cepat. Tiga contoh di bawah dibuat dari topik yang berbeda dan tampil sama sekali berbeda. Yang tetap hanya dua: nyaman dibaca di layar HP, dan bisa dibuka siapa pun lewat tautan."})]})}),(0,n.jsx)("section",{id:"contoh","aria-labelledby":"hi-contoh-h",className:"jsx-2a3bd6f336855bee hi-sec",children:(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-wrap",children:[(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee hi-eyebrow",children:"Contoh"}),(0,n.jsx)("h2",{id:"hi-contoh-h",className:"jsx-2a3bd6f336855bee hi-sec-h",children:"Tiga topik, tiga rancangan."}),(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee hi-sec-p",children:"Ketiganya dibuat dengan fitur ini, bukan didesain tangan. Klik salah satu untuk membukanya utuh tanpa meninggalkan halaman ini."}),(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-grid",children:[[u[1],u[2]].map(a=>(0,n.jsxs)("button",{type:"button",onClick:()=>t(a),"aria-label":"Buka halaman contoh: ".concat(a.judul),className:"jsx-2a3bd6f336855bee hi-card",children:[(0,n.jsx)("div",{className:"jsx-2a3bd6f336855bee hi-shot",children:(0,n.jsx)("img",{src:a.poster,alt:"Bagian dari halaman contoh: ".concat(a.judul),loading:"lazy",width:a.lebar,height:a.tinggi,className:"jsx-2a3bd6f336855bee"})}),(0,n.jsx)("h3",{className:"jsx-2a3bd6f336855bee",children:a.judul}),(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee hi-meta",children:a.topik}),(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee",children:a.isi})]},a.id)),(0,n.jsxs)("button",{type:"button",onClick:()=>t(u[0]),"aria-label":"Buka halaman contoh: ".concat(u[0].judul),className:"jsx-2a3bd6f336855bee hi-card hi-tall",children:[(0,n.jsx)("div",{className:"jsx-2a3bd6f336855bee hi-shot",children:(0,n.jsx)("img",{src:"/images/halaman-interaktif/peta-sriwijaya-hp.webp",alt:'Halaman "'.concat(u[0].judul,'" di layar HP: bagian peta dengan legenda dan catatan tentang batas peta'),loading:"lazy",width:600,height:1298,className:"jsx-2a3bd6f336855bee"})}),(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee",children:[(0,n.jsx)("h3",{className:"jsx-2a3bd6f336855bee",children:"Dirancang untuk layar HP dulu"}),(0,n.jsxs)("p",{className:"jsx-2a3bd6f336855bee hi-meta",children:[u[0].judul," \xb7 ",u[0].topik]}),(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee",children:u[0].isi}),(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee",children:"Pembacamu hampir pasti membukanya di telepon, jadi setiap halaman dirancang mulai dari lebar 390 piksel, baru dilebarkan untuk laptop. Perhatikan catatan di bawah peta: halaman ini jujur soal apa yang ditunjukkan petanya."})]})]})]})]})}),(0,n.jsx)("section",{id:"isinya","aria-labelledby":"hi-isi-h",className:"jsx-2a3bd6f336855bee hi-sec",children:(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-wrap",children:[(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee hi-eyebrow",children:"Isinya"}),(0,n.jsx)("h2",{id:"hi-isi-h",className:"jsx-2a3bd6f336855bee hi-sec-h",children:"Yang bisa ada di dalam satu halaman."}),(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee hi-sec-p",children:"kakak.ai memilih yang menjelaskan topikmu, jadi tidak setiap halaman memuat semuanya. Yang di bawah ini batas yang jujur dari tiap bagian."}),(0,n.jsx)("dl",{className:"jsx-2a3bd6f336855bee hi-list",children:x.map(a=>(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-row",children:[(0,n.jsx)("dt",{className:"jsx-2a3bd6f336855bee",children:a.nama}),(0,n.jsx)("dd",{className:"jsx-2a3bd6f336855bee",children:a.untuk})]},a.nama))})]})}),(0,n.jsx)("section",{id:"data",className:"jsx-2a3bd6f336855bee hi-claim",children:(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-wrap",children:[(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee",children:"Untuk balapan F1, angkanya dari data, bukan karangan."}),(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee hi-sub",children:"Hasil, klasemen, kalender, waktu lap, dan telemetri diambil dari sumber data terbuka (OpenF1 dan Jolpica-
1F1), lalu digambar jadi grafik. Datanya tidak pernah diketik ulang oleh AI, jadi tidak ada angka yang salah ketik, dan sumbernya dicantumkan di halaman. Pengambilan data memakai kredit PRO; halaman tanpa data tidak."})]})}),(0,n.jsx)("section",{id:"caranya","aria-labelledby":"hi-cara-h",className:"jsx-2a3bd6f336855bee hi-sec",children:(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-wrap",children:[(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee hi-eyebrow",children:"Cara kerja"}),(0,n.jsx)("h2",{id:"hi-cara-h",className:"jsx-2a3bd6f336855bee hi-sec-h",children:"Tiga langkah, satu percakapan."}),(0,n.jsx)("div",{className:"jsx-2a3bd6f336855bee hi-steps",children:g.map(a=>(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-step",children:[(0,n.jsx)("span",{className:"jsx-2a3bd6f336855bee hi-step-no",children:a.no}),(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee",children:[(0,n.jsx)("h3",{className:"jsx-2a3bd6f336855bee",children:a.judul}),(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee",children:a.isi})]})]},a.no))})]})}),(0,n.jsx)(m.Z,{path:["Beranda","Agen Kreatif","Halaman Interaktif"],steps:[{title:"Di beranda, cari grup Agen Kreatif",body:"Kartunya bernama Halaman Interaktif; di gambar ini disorot hijau.",image:"https://cdn.kakak.ai/pub/cari-menu/beranda-halaman-interaktif.webp",width:1e3,height:396,alt:"Beranda kakak.ai: grup Agen Kreatif dengan kartu Halaman Interaktif disorot"},{title:"Klik kartunya, lalu tekan Mulai",body:"Ceritakan topiknya; halaman interaktif terbuka di panel dan bisa dibagikan lewat tautan."}],note:"Urutan grup di beranda mengikuti profilmu. Kalau grupnya tidak langsung terlihat, gulir ke bawah."}),(0,n.jsx)("section",{id:"faq","aria-labelledby":"hi-faq-h",className:"jsx-2a3bd6f336855bee hi-sec",children:(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-wrap",children:[(0,n.jsx)("p",{className:"jsx-2a3bd6f336855bee hi-eyebrow",children:"Pertanyaan"}),(0,n.jsx)("h2",{id:"hi-faq-h",className:"jsx-2a3bd6f336855bee hi-sec-h",children:"Yang sering ditanyakan."}),(0,n.jsx)("div",{className:"jsx-2a3bd6f336855bee hi-faq",children:f.map((i,t)=>{let s=a===t;return(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-q",children:[(0,n.jsxs)("button",{onClick:()=>e(s?null:t),"aria-expanded":s,"aria-controls":"hi-a-".concat(t),className:"jsx-2a3bd6f336855bee",children:[(0,n.jsx)("span",{className:"jsx-2a3bd6f336855bee",children:i.q}),(0,n.jsx)("span",{"aria-hidden":"true",className:"jsx-2a3bd6f336855bee hi-q-mark",children:s?"â":"+"})]}),s&&(0,n.jsx)("div",{id:"hi-a-".concat(t),dangerouslySetInnerHTML:{__html:i.a},className:"jsx-2a3bd6f336855bee hi-a"})]},i.q)})})]})}),(0,n.jsx)("section",{className:"jsx-2a3bd6f336855bee hi-end",children:(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-wrap",children:[(0,n.jsx)("h2",{className:"jsx-2a3bd6f336855bee",children:"Topikmu layak lebih dari satu dokumen."}),(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-actions",children:[(0,n.jsx)("a",{href:"/register?utm_source=halamaninteraktif_lp&utm_medium=final_cta",className:"jsx-2a3bd6f336855bee hi-cta",children:"Buat Halaman Interaktif Pertamamu"}),(0,n.jsx)("a",{href:"/pricing",className:"jsx-2a3bd6f336855bee hi-ghost",children:"Lihat Harga"})]})]})})]}),i&&(0,n.jsx)("div",{role:"dialog","aria-modal":"true","aria-label":"Halaman contoh: ".concat(i.judul),onClick:()=>t(null),className:"jsx-2a3bd6f336855bee hi-modal",children:(0,n.jsxs)("div",{onClick:a=>a.stopPropagation(),className:"jsx-2a3bd6f336855bee hi-modal-kotak",children:[(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-modal-bar",children:[(0,n.jsxs)("div",{className:"jsx-2a3bd6f336855bee hi-modal-judul",children:[(0,n.jsx)("strong",{className:"jsx-2a3bd6f336855bee",children:i.judul}),(0,n.jsx)("span",{className:"jsx-2a3bd6f336855bee",children:i.topik})]}),(0,n.jsx)("a",{href:i.url,target:"_blank",rel:"noopener noreferrer",className:"jsx-2a3bd6f336855bee hi-modal-tab",children:"Buka di tab baru"}),(0,n.jsx)("button",{ref:r,type:"button",onClick:()=>t(null),"aria-label":"Tutup contoh",className:"jsx-2a3bd6f336855bee hi-modal-tutup",children:"â"})]}),(0,n.jsx)("div",{className:"jsx-2a3bd6f336855bee hi-modal-panggung",children:(0,n.jsx)("iframe",{src:i.url,title:i.judul,sandbox:"allow-scripts allow-popups allow-popups-to-escape-sandbox",referrerPolicy:"no-referrer",className:"jsx-2a3bd6f336855bee"})})]})}),(0,n.jsx)(b.ZP,{})]})]})}}},function(a){a.O(0,[3246,9358,726,3773,1569,7172,4578,9451,1091,9396,1557,924,842,4382,1406,2417,7943,2586,2297,5976,1448,1561,7701,2170,7673,8163,2888,9922,179],function(){return a(a.s=17861)}),_N_E=a.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.