{"id":19,"date":"2026-08-17T10:35:30","date_gmt":"2026-08-17T10:35:30","guid":{"rendered":"https:\/\/lab.rwb.my.id\/story\/?page_id=19"},"modified":"2026-08-23T13:18:34","modified_gmt":"2026-08-23T13:18:34","slug":"tentang","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/story\/tentang\/","title":{"rendered":"Tentang"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"19\" class=\"elementor elementor-19\">\n\t\t\t\t<div class=\"elementor-element elementor-element-29a8d16 e-con-full e-flex e-con e-parent\" data-id=\"29a8d16\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-288a8e8 elementor-widget elementor-widget-html\" data-id=\"288a8e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- KARTUN HERO HALAMAN TENTANG -->\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Bangers&family=Nunito:wght@400;600;700;800&display=swap');\n\n  .kt-about-hero {\n    font-family: 'Nunito', sans-serif;\n    position: relative;\n    padding: 100px 20px 80px;\n    background: #FFF8E1; \/* Warna Krem *\/\n    overflow: hidden;\n    border-bottom: 3.5px solid #1A1A1A;\n  }\n\n  \/* Pola Halftone *\/\n  .kt-about-hero-halftone {\n    position: absolute; inset: 0;\n    background-image: radial-gradient(circle, #1A1A1A 1px, transparent 1px);\n    background-size: 14px 14px;\n    opacity: 0.02; pointer-events: none;\n  }\n\n  \/* === INTERSECTION OBSERVER STATES === *\/\n  .kt-about-fade1, .kt-about-fade2, .kt-about-fade3, .kt-about-fade4, .kt-about-img-anim {\n    opacity: 0;\n    transform: translateY(40px);\n    transition: opacity 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28), transform 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28);\n  }\n  .kt-about-img-anim { transform: translateY(60px) scale(0.95); }\n  .kt-about-fade2 { transition-delay: 0.15s; }\n  .kt-about-fade3 { transition-delay: 0.3s; }\n  .kt-about-fade4 { transition-delay: 0.45s; }\n  .kt-about-img-anim { transition-delay: 0.2s; }\n\n  \/* SAAT AKTIF *\/\n  .kt-about-hero.is-active .kt-about-fade1,\n  .kt-about-hero.is-active .kt-about-fade2,\n  .kt-about-hero.is-active .kt-about-fade3,\n  .kt-about-hero.is-active .kt-about-fade4 { opacity: 1; transform: translateY(0); }\n  .kt-about-hero.is-active .kt-about-img-anim { opacity: 1; transform: translateY(0) scale(1); }\n\n  \/* === LAYOUT === *\/\n  .kt-about-inner {\n    max-width: 1100px; margin: 0 auto;\n    display: grid; grid-template-columns: 1fr 1fr;\n    gap: 50px; align-items: center; position: relative; z-index: 2;\n  }\n\n  \/* === KIRI: TEKS === *\/\n  .kt-about-text { position: relative; text-align: left; }\n  \n  .kt-about-sfx {\n    font-family: 'Bangers', cursive;\n    font-size: clamp(34px, 4vw, 32px);\n    color: #EF4444;\n    -webkit-text-stroke: 2px #1A1A1A;\n    paint-order: stroke fill;\n    letter-spacing: 0.04em; margin-bottom: 8px;\n    display: inline-block;\n  }\n  .kt-about-label {\n    font-family: 'Bangers', cursive;\n    font-size: 14px; color: #EF4444;\n    letter-spacing: 0.06em; margin-bottom: 6px;\n    display: inline-block; padding-bottom: 4px;\n    border-bottom: 2px solid #EF4444;\n  }\n  .kt-about-title {\n    font-family: 'Bangers', cursive;\n    font-size: clamp(30px, 5vw, 48px);\n    color: #1A1A1A; letter-spacing: 0.03em;\n    line-height: 1.1; margin-bottom: 16px;\n  }\n  .kt-about-p {\n    font-size: 14px; font-weight: 600;\n    color: #57534E; line-height: 1.7; margin-bottom: 12px;\n  }\n\n  \/* Speech bubble *\/\n  .kt-about-speech {\n    position: relative; background: white;\n    border: 2.5px solid #1A1A1A; border-radius: 14px;\n    padding: 12px 16px; margin-top: 18px;\n    font-size: 13px; font-weight: 700;\n    color: #1A1A1A; line-height: 1.5;\n    box-shadow: 4px 4px 0 #1A1A1A;\n  }\n  .kt-about-speech::after {\n    content: ''; position: absolute;\n    top: -10px; left: 24px;\n    border-left: 8px solid transparent;\n    border-right: 8px solid transparent;\n    border-bottom: 10px solid #1A1A1A;\n  }\n  .kt-about-speech::before {\n    content: ''; position: absolute;\n    top: -7px; left: 27px;\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-bottom: 7px solid white; z-index: 1;\n  }\n\n  \/* === KANAN: GAMBAR === *\/\n  .kt-about-visual {\n    position: relative;\n    display: flex; justify-content: center;\n  }\n  .kt-about-img-wrap {\n    position: relative;\n    max-width: 450px;\n  }\n  section.kt-about-hero .kt-about-img {\n    width: 100%; \n    border: 3.5px solid #1A1A1A;\n    border-radius: 20px;\n    box-shadow: 8px 8px 0 #1A1A1A;\n    display: block;\n  }\n  .kt-about-img-deco1 {\n    position: absolute; top: -12px; right: -12px;\n    width: 60px; height: 60px;\n    border: 2.5px solid #1A1A1A; border-radius: 12px;\n    background: #FBBF24; z-index: 2;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 28px; box-shadow: 3px 3px 0 #1A1A1A;\n  }\n  .kt-about-img-deco2 {\n    position: absolute; bottom: -8px; left: -8px;\n    width: 40px; height: 40px;\n    border: 2px solid #1A1A1A; border-radius: 50%;\n    background: #EF4444; z-index: 2;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 18px; box-shadow: 2px 2px 0 #1A1A1A;\n  }\n\n  \/* === RESPONSIVE === *\/\n  @media (max-width: 860px) {\n    .kt-about-inner { grid-template-columns: 1fr; gap: 40px; }\n    .kt-about-text { text-align: center; }\n    .kt-about-sfx, .kt-about-label { display: inline-block; }\n  }\n  @media (max-width: 540px) {\n    .kt-about-hero { padding: 80px 16px 40px; }\n    .kt-about-img-deco1 { width: 44px; height: 44px; font-size: 20px; top: -8px; right: -8px; }\n    .kt-about-img-deco2 { width: 32px; height: 32px; font-size: 14px; }\n  }\n<\/style>\n\n<section class=\"kt-about-hero\" id=\"ktAboutHero\">\n  <div class=\"kt-about-hero-halftone\"><\/div>\n  \n  <!-- Hiasan Bintang Melayang -->\n  <svg style=\"position:absolute; top:50px; left:8%; opacity:0.1; pointer-events:none; animation: ktAboutFloat 3s ease-in-out infinite;\" width=\"32\" height=\"32\" viewBox=\"0 0 50 50\">\n    <polygon points=\"25,0 29,17 50,17 33,27 38,46 25,34 12,46 17,27 0,17 21,17\" fill=\"#FBBF24\" stroke=\"#1A1A1A\" stroke-width=\"2\" stroke-linejoin=\"round\"\/>\n    <style>@keyframes ktAboutFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(5deg); } }<\/style>\n  <\/svg>\n\n  <div class=\"kt-about-inner\">\n    \n    <!-- KIRI: TEKS -->\n    <div class=\"kt-about-text\">\n      <div class=\"kt-about-fade1\">\n        <span class=\"kt-about-sfx\">KENALAN YUK!<\/span>\n      <\/div>\n      \n      <div class=\"kt-about-fade2\">\n        <span class=\"kt-about-label\">CERITA KITA<\/span>\n        <h1 class=\"kt-about-title\">Dari Orang Tua,<br>Untuk Anak-Anak \ud83e\udde1<\/h1>\n      <\/div>\n      \n      <div class=\"kt-about-fade3\">\n        <p class=\"kt-about-p\">CeritaBoom lahir dari keresahan orang tua yang susah cari konten bacaan yang <strong>aman, edukatif, dan seru<\/strong> buat anak-anak. Di era digital, banyak konten yang sebenarnya belum pantas dilihat si kecil.<\/p>\n        <p class=\"kt-about-p\">Kami percaya bahwa <strong>cerita adalah jendela dunia<\/strong>. Lewat dongeng, petualangan, dan fantasi \u2014 anak belajar nilai, membangun imajinasi, dan yang paling penting: <strong>merasa bahagia<\/strong>.<\/p>\n      <\/div>\n      \n      <div class=\"kt-about-fade4\">\n        <div class=\"kt-about-speech\">\n          \ud83d\udcac \"Setiap anak berhak punya cerita yang bikin mereka merasa spesial.\" \u2014 Tim CeritaBoom\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- KANAN: GAMBAR -->\n    <div class=\"kt-about-visual kt-about-img-anim\">\n      <div class=\"kt-about-img-wrap\">\n        <!-- Ganti link gambar ini dengan gambar tim asli kamu nanti -->\n        <img decoding=\"async\" class=\"kt-about-img\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/Bintang-yang-Bisik-Mimpi-45kb.jpg\" alt=\"Tim CeritaBoom\">\n        <div class=\"kt-about-img-deco1\">\ud83d\udcd6<\/div>\n        <div class=\"kt-about-img-deco2\">\ud83d\udd4a\ufe0f<\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  \/\/ === INTERSECTION OBSERVER HERO TENTANG ===\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    const section = document.getElementById('ktAboutHero');\n    if (!section) return;\n\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add('is-active');\n          observer.unobserve(entry.target); \/\/ Berhenti observe setelah aktif\n        }\n      });\n    }, { threshold: 0.2 }); \/\/ Aktif saat 20% terlihat\n\n    observer.observe(section);\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b6ec398 e-con-full e-flex e-con e-parent\" data-id=\"b6ec398\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-08cfcb7 elementor-widget elementor-widget-html\" data-id=\"08cfcb7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Bangers&family=Nunito:wght@400;600;700;800;900&display=swap');\n\n  .kt-vimi-section {\n    font-family: 'Nunito', sans-serif;\n    background: #FFF8E1;\n    padding: 120px 20px 100px;\n    position: relative;\n    overflow: hidden;\n    border-bottom: 6px solid #1A1A1A;\n  }\n\n  \/* === 1. MARQUEE TEKS JALAN === *\/\n  .kt-vimi-marquee {\n    position: absolute;\n    top: 40px;\n    left: 0;\n    width: 100%;\n    overflow: hidden;\n    z-index: 1;\n    transform: rotate(-3deg);\n  }\n  .kt-vimi-marquee-track {\n    display: flex;\n    white-space: nowrap;\n    animation: ktMarquee 15s linear infinite;\n    animation-play-state: paused; \/* <--- TAMBAHIN INI BIAR BERHENTI *\/\n  }\n  \/* Dan tambahkan ini biar nyala lagi pas di-scroll *\/\n  .kt-vimi-section.is-active .kt-vimi-marquee-track {\n    animation-play-state: running;\n  }\n  .kt-vimi-marquee span {\n    font-family: 'Bangers', cursive;\n    font-size: 80px;\n    color: transparent;\n    -webkit-text-stroke: 2px #1A1A1A;\n    margin-right: 30px;\n    letter-spacing: 0.05em;\n  }\n  @keyframes ktMarquee {\n    from { transform: translateX(0); }\n    to { transform: translateX(-50%); }\n  }\n\n  \/* === 2. JUDUL PISAH KIRI KANAN (DESKTOP) === *\/\n  .kt-vimi-header {\n    max-width: 1000px;\n    margin: 80px auto 60px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n    z-index: 3;\n    padding: 0 20px;\n  }\n  .kt-vimi-title-bg {\n    font-family: 'Bangers', cursive;\n    font-size: clamp(50px, 8vw, 90px);\n    color: transparent;\n    -webkit-text-stroke: 2.5px #1A1A1A;\n    line-height: 0.8;\n    transform: rotate(-3deg);\n    opacity: 0;\n    transition: all 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28);\n  }\n  .kt-vimi-section.is-active .kt-vimi-title-bg {\n    opacity: 1;\n    transform: rotate(-3deg) scale(1);\n  }\n  \n  .kt-vimi-subtitle {\n    font-family: 'Bangers', cursive;\n    font-size: clamp(24px, 4vw, 36px);\n    background: #1A1A1A;\n    color: #FFF8E1;\n    padding: 10px 25px;\n    display: inline-block;\n    border: 3px solid #1A1A1A;\n    box-shadow: 6px 6px 0 #EF4444;\n    transform: rotate(3deg);\n    position: relative;\n    z-index: 2;\n    opacity: 0;\n    transition: all 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.2s;\n  }\n  .kt-vimi-section.is-active .kt-vimi-subtitle {\n    opacity: 1;\n    transform: rotate(3deg);\n  }\n\n  \/* === 3. LAYOUT ZIG-ZAG === *\/\n  .kt-vimi-list {\n    max-width: 1000px;\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    gap: 40px;\n    position: relative;\n    z-index: 4;\n  }\n\n  .kt-vimi-card {\n    background: white;\n    border: 4px solid #1A1A1A;\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\n    box-shadow: 10px 10px 0 #1A1A1A;\n    padding: 30px 40px;\n    display: flex;\n    align-items: center;\n    gap: 25px;\n    transition: all 0.3s ease;\n    width: 80%;\n    opacity: 0;\n  }\n\n  \/* Animasi Masuk Berbeda-beda *\/\n  .kt-vimi-card[data-anim=\"left\"] {\n    transform: translateX(-100px) rotate(-2deg);\n    margin-right: auto;\n    border-top-left-radius: 15px;\n    border-bottom-left-radius: 15px;\n  }\n  .kt-vimi-card[data-anim=\"right\"] {\n    transform: translateX(100px) rotate(2deg);\n    margin-left: auto;\n    border-top-right-radius: 15px;\n    border-bottom-right-radius: 15px;\n  }\n  \n  .kt-vimi-section.is-active .kt-vimi-card {\n    opacity: 1;\n    transform: translateX(0) rotate(var(--rot, 0deg));\n    transition: all 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28);\n  }\n  .kt-vimi-section.is-active .kt-vimi-card[data-anim=\"left\"] { transform: translateX(0) rotate(-2deg); transition-delay: 0.4s; }\n  .kt-vimi-section.is-active .kt-vimi-card[data-anim=\"right\"] { transform: translateX(0) rotate(2deg); transition-delay: 0.6s; }\n\n  \/* Efek Hover Ledakan *\/\n  .kt-vimi-card:hover {\n    transform: translateY(-8px) scale(1.03) rotate(0deg) !important;\n    box-shadow: 15px 15px 0 #1A1A1A;\n  }\n  .kt-vimi-card[data-color=\"yellow\"]:hover { box-shadow: 15px 15px 0 #FBBF24; }\n  .kt-vimi-card[data-color=\"red\"]:hover { box-shadow: 15px 15px 0 #EF4444; }\n  .kt-vimi-card[data-color=\"green\"]:hover { box-shadow: 15px 15px 0 #86EFAC; }\n\n  .kt-vimi-card[data-anim=\"left\"] { border-left: 8px solid #FBBF24; }\n  .kt-vimi-card[data-anim=\"right\"] { border-right: 8px solid #EF4444; }\n\n  .kt-vimi-num {\n    font-family: 'Bangers', cursive;\n    font-size: 40px;\n    color: #1A1A1A;\n    -webkit-text-stroke: 1px #1A1A1A;\n    background: #FBBF24;\n    width: 60px;\n    height: 60px;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 3px solid #1A1A1A;\n    border-radius: 50%;\n    box-shadow: 3px 3px 0 #1A1A1A;\n  }\n  .kt-vimi-card[data-anim=\"right\"] .kt-vimi-num { background: #EF4444; color: white; }\n\n  .kt-vimi-content h3 {\n    font-family: 'Bangers', cursive;\n    font-size: 24px;\n    color: #1A1A1A;\n    margin-bottom: 5px;\n    letter-spacing: 0.02em;\n  }\n  .kt-vimi-content p {\n    font-size: 14px;\n    font-weight: 600;\n    color: #57534E;\n    line-height: 1.6;\n    margin: 0;\n  }\n\n  .kt-vimi-sticker {\n    position: absolute;\n    font-family: 'Bangers', cursive;\n    font-size: 18px;\n    background: #86EFAC;\n    padding: 5px 15px;\n    border: 2.5px solid #1A1A1A;\n    border-radius: 50%;\n    box-shadow: 3px 3px 0 #1A1A1A;\n    z-index: 5;\n    transform: rotate(15deg);\n    top: -15px;\n    right: -20px;\n    opacity: 0;\n    transition: all 0.5s ease 1s;\n  }\n  .kt-vimi-section.is-active .kt-vimi-sticker {\n    opacity: 1;\n    transform: rotate(15deg) scale(1);\n  }\n\n  \/* === RESPONSIVE - LAYAR HP (FULL WIDTH MELEBAR) === *\/\n  @media (max-width: 768px) {\n    .kt-vimi-marquee span { font-size: 50px; }\n    \n    \/* JUDUL TUMPUK ATAS-BAWAH DI HP *\/\n    .kt-vimi-header {\n      justify-content: center;\n      flex-direction: column;\n      gap: 20px;\n    }\n    .kt-vimi-title-bg {\n      display: block; \n      font-size: 52px; \n      text-align: center;\n      margin-bottom: 10px;\n    }\n    \n    \/* Balikin ke 1 kolom numpuk ke bawah *\/\n    .kt-vimi-list {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .kt-vimi-card {\n      width: 100%;\n      margin: 0 !important;\n      border-radius: 20px; \n      padding: 20px 25px;\n      flex-direction: row; \/* SEMUA KARTU JADI HORIZONTAL (melebar) *\/\n      justify-content: flex-start;\n      text-align: left;\n      align-items: center;\n      gap: 15px;\n      transform: rotate(0deg) !important; \/* Matikan miring *\/\n    }\n    \n    .kt-vimi-section.is-active .kt-vimi-card[data-anim=\"left\"], \n    .kt-vimi-section.is-active .kt-vimi-card[data-anim=\"right\"] { \n      transform: translateY(0) rotate(0deg) !important; \n    }\n\n    .kt-vimi-card:hover { transform: translateY(-5px) scale(1) !important; }\n    \n    .kt-vimi-num { \n      width: 50px; height: 50px; font-size: 28px; \n      margin-bottom: 0; \n      flex-shrink: 0; \/* Biar angkanya gak kepotong *\/\n    }\n    \n    .kt-vimi-content {\n      flex: 1; \/* Biar teks ngambil sisa ruang kosong *\/\n    }\n    \n    .kt-vimi-content h3 { font-size: 20px; margin-bottom: 2px; }\n    .kt-vimi-content p { font-size: 12px; }\n    \n    .kt-vimi-sticker { right: 10px; top: -10px; }\n  }\n<\/style>\n\n<section class=\"kt-vimi-section\" id=\"ktVimiSection\">\n  <!-- MARQUEE GILA -->\n  <div class=\"kt-vimi-marquee\">\n    <div class=\"kt-vimi-marquee-track\">\n      <span>VISI! \u2022 MISI! \u2022 VISI! \u2022 MISI! \u2022 VISI! \u2022 MISI! \u2022<\/span>\n      <span>VISI! \u2022 MISI! \u2022 VISI! \u2022 MISI! \u2022 VISI! \u2022 MISI! \u2022<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- JUDUL PISAH KIRI KANAN -->\n  <div class=\"kt-vimi-header\">\n    <div class=\"kt-vimi-title-bg\">TUJUAN KITA<\/div>\n    <div class=\"kt-vimi-subtitle\">VISI & MISI CERIA \ud83c\udf88<\/div>\n  <\/div>\n\n  <!-- KARTU ZIG-ZAG -->\n  <div class=\"kt-vimi-list\">\n    \n    <!-- MISI 1 (KIRI) -->\n    <div class=\"kt-vimi-card\" data-anim=\"left\" data-color=\"yellow\">\n      <div class=\"kt-vimi-sticker\">AMAN! \ud83d\udee1\ufe0f<\/div>\n      <div class=\"kt-vimi-num\">01<\/div>\n      <div class=\"kt-vimi-content\">\n        <h3>Aman & Ramah Anak \ud83c\udf1f<\/h3>\n        <p>Cerita di CeritaBoom dipilih khusus supaya aman dan menyenangkan. Bebas dari hal yang seram, jadi Mama dan Papa gak perlu khawatir!<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- MISI 2 (KANAN) -->\n    <div class=\"kt-vimi-card\" data-anim=\"right\" data-color=\"red\">\n      <div class=\"kt-vimi-num\">02<\/div>\n      <div class=\"kt-vimi-content\">\n        <h3>Bikin Mata Berkilau \u2728<\/h3>\n        <p>Bukan cuma baca teks biasa! Kami bikin imajinasi anak-anak meledak penuh warna lewat gambar yang ceria dan suara narasi yang seru banget!<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- MISI 3 (KIRI) -->\n    <div class=\"kt-vimi-card\" data-anim=\"left\" data-color=\"green\">\n      <div class=\"kt-vimi-sticker\">SERU! \ud83e\udd29<\/div>\n      <div class=\"kt-vimi-num\">03<\/div>\n      <div class=\"kt-vimi-content\">\n        <h3>Penjaga Tidur Nyenyak \ud83d\ude34<\/h3>\n        <p>Misi kami adalah mengusir mimpi buruk! Cerita ini diracik khusus biar anak-anak tersenyum bahagia, lalu langsung pulas lelap bermimpi indah.<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  \/\/ === INTERSECTION OBSERVER (MATI SAAT KELUAR LAYAR) ===\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    const section = document.getElementById('ktVimiSection');\n    if (!section) return;\n\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        \/\/ Kalau masuk ke layar (kelihatan)\n        if (entry.isIntersecting) {\n          entry.target.classList.add('is-active');\n        } \n        \/\/ Kalau keluar dari layar (scroll ke section lain)\n        else {\n          entry.target.classList.remove('is-active');\n        }\n      });\n    }, { threshold: 0.15 });\n\n    observer.observe(section);\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2ecbc0b e-con-full e-flex e-con e-parent\" data-id=\"2ecbc0b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d26f6b1 elementor-widget elementor-widget-shortcode\" data-id=\"d26f6b1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Bangers&family=Nunito:wght@400;600;700;800;900&display=swap');\r\n\r\n  .kt-team-section {\r\n    font-family: 'Nunito', sans-serif;\r\n    background: #FFF8E1; \/* UDAH KREM SOB *\/\r\n    padding: 100px 20px 80px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-bottom: 6px solid #1A1A1A;\r\n  }\r\n\r\n  \/* Pola Titik-titik (Halftone) *\/\r\n  .kt-team-halftone {\r\n    position: absolute; inset: 0;\r\n    background-image: radial-gradient(circle, #1A1A1A 1.5px, transparent 1.5px);\r\n    background-size: 18px 18px;\r\n    opacity: 0.03;\r\n    pointer-events: none;\r\n    z-index: 0;\r\n  }\r\n\r\n  \/* === INTERSECTION OBSERVER === *\/\r\n  .kt-team-fade1, .kt-team-fade2, .kt-team-card-anim {\r\n    opacity: 0;\r\n    transform: translateY(50px) scale(0.95);\r\n    transition: opacity 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28), transform 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28);\r\n  }\r\n  .kt-team-fade2 { transition-delay: 0.15s; }\r\n  .kt-team-card-anim:nth-child(1) { transition-delay: 0.3s; }\r\n  .kt-team-card-anim:nth-child(2) { transition-delay: 0.4s; }\r\n  .kt-team-card-anim:nth-child(3) { transition-delay: 0.5s; }\r\n  .kt-team-card-anim:nth-child(4) { transition-delay: 0.6s; }\r\n  .kt-team-card-anim:nth-child(5) { transition-delay: 0.7s; }\r\n\r\n  .kt-team-section.is-active .kt-team-fade1,\r\n  .kt-team-section.is-active .kt-team-fade2 { opacity: 1; transform: translateY(0) scale(1); }\r\n  .kt-team-section.is-active .kt-team-card-anim { opacity: 1; transform: translateY(0) scale(1); }\r\n\r\n  \/* === JUDUL === *\/\r\n  .kt-team-header {\r\n    max-width: 1000px; margin: 0 auto 50px;\r\n    text-align: center; position: relative; z-index: 2;\r\n  }\r\n  .kt-team-sfx {\r\n    font-family: 'Bangers', cursive; font-size: clamp(24px, 4vw, 32px);\r\n    color: white; background: #EF4444;\r\n    -webkit-text-stroke: 2px #1A1A1A; paint-order: stroke fill;\r\n    padding: 5px 20px; border: 3px solid #1A1A1A;\r\n    border-radius: 15px 255px 15px 225px \/ 225px 15px 255px 15px;\r\n    box-shadow: 4px 4px 0 #1A1A1A; transform: rotate(-3deg);\r\n    display: inline-block; margin-bottom: 16px;\r\n  }\r\n  .kt-team-title {\r\n    font-family: 'Bangers', cursive; font-size: clamp(32px, 6vw, 52px);\r\n    color: #1A1A1A; letter-spacing: 0.03em; line-height: 1.1;\r\n  }\r\n  .kt-team-subtitle {\r\n    font-size: 14px; font-weight: 600; color: #57534E; margin-top: 8px;\r\n  }\r\n\r\n  \/* === GRID KARTU (DESKTOP) === *\/\r\n  .kt-team-grid {\r\n    max-width: 1200px; margin: 0 auto;\r\n    display: grid; grid-template-columns: repeat(5, 1fr); \/* 5 KARTU DI DESKTOP *\/\r\n    gap: 20px; position: relative; z-index: 2;\r\n  }\r\n\r\n  .kt-team-card {\r\n    background: #FFF8E1; border: 3.5px solid #1A1A1A;\r\n    border-radius: 20px 255px 20px 225px \/ 225px 20px 255px 20px;\r\n    box-shadow: 8px 8px 0 #1A1A1A; overflow: hidden;\r\n    text-align: center; transition: all 0.3s ease;\r\n    display: flex; flex-direction: column;\r\n  }\r\n  .kt-team-card:hover {\r\n    transform: translateY(-8px) rotate(-1deg);\r\n    box-shadow: 12px 12px 0 #1A1A1A;\r\n  }\r\n\r\n  \/* Bagian Avatar *\/\r\n  .kt-team-avatar-wrap {\r\n    background: #FBBF24; border-bottom: 3.5px solid #1A1A1A;\r\n    padding: 25px 15px; position: relative;\r\n    display: flex; justify-content: center; align-items: center;\r\n  }\r\n  \/* Ganti warna background avatar tiap kartu biar rame *\/\r\n  .kt-team-card:nth-child(2) .kt-team-avatar-wrap { background: #86EFAC; }\r\n  .kt-team-card:nth-child(3) .kt-team-avatar-wrap { background: #FBCFE8; }\r\n  .kt-team-card:nth-child(4) .kt-team-avatar-wrap { background: #C4B5FD; }\r\n  .kt-team-card:nth-child(5) .kt-team-avatar-wrap { background: #FCA5A5; } \/* Warna ke-5 *\/\r\n\r\n  .kt-team-avatar {\r\n    width: 90px; height: 90px; border-radius: 50%;\r\n    border: 4px solid #1A1A1A; box-shadow: 4px 4px 0 rgba(0,0,0,0.2);\r\n    object-fit: cover; background: white;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .kt-team-card:hover .kt-team-avatar {\r\n    transform: scale(1.1) rotate(-5deg);\r\n  }\r\n\r\n  \/* Stiker Jumlah Cerita *\/\r\n  .kt-team-stories {\r\n    position: absolute; bottom: -15px; right: -10px;\r\n    font-family: 'Bangers', cursive; font-size: 13px;\r\n    background: #1A1A1A; color: #FBBF24;\r\n    padding: 4px 10px; border: 2.5px solid #1A1A1A;\r\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\r\n    box-shadow: 3px 3px 0 #FFF8E1;\r\n    display: flex; align-items: center; gap: 4px;\r\n  }\r\n\r\n  \/* Bagian Teks *\/\r\n  .kt-team-body {\r\n    padding: 25px 12px 20px;\r\n    display: flex; flex-direction: column; flex-grow: 1;\r\n  }\r\n  .kt-team-name {\r\n    font-family: 'Bangers', cursive; font-size: 20px;\r\n    color: #1A1A1A; letter-spacing: 0.03em; margin-bottom: 4px;\r\n  }\r\n  .kt-team-role {\r\n    font-size: 10px; font-weight: 800; text-transform: uppercase;\r\n    color: #EF4444; margin-bottom: 10px; letter-spacing: 0.05em;\r\n  }\r\n  .kt-team-desc {\r\n    font-size: 11px; font-weight: 600; color: #57534E;\r\n    line-height: 1.5; margin-bottom: 15px;\r\n  }\r\n  .kt-team-sosmed {\r\n    margin-top: auto; display: flex; justify-content: center; gap: 10px;\r\n  }\r\n  .kt-team-sosmed a {\r\n    width: 30px; height: 30px; background: white; border: 2px solid #1A1A1A;\r\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n    font-size: 14px; color: #1A1A1A; text-decoration: none;\r\n    box-shadow: 2px 2px 0 #1A1A1A; transition: all 0.2s;\r\n  }\r\n  .kt-team-sosmed a:hover { background: #1A1A1A; color: white; transform: translateY(-2px); }\r\n\r\n  \/* === RESPONSIVE (SWIPE PEEK DI HP) === *\/\r\n  @media (max-width: 1024px) {\r\n    .kt-team-grid { \r\n      display: flex; \/* Ubah jadi flex biar bisa swipe *\/\r\n      overflow-x: auto; \r\n      gap: 20px; \r\n      padding: 20px 10px 30px 10px; \r\n      scroll-snap-type: x mandatory; \r\n      -webkit-overflow-scrolling: touch;\r\n    }\r\n    .kt-team-grid::-webkit-scrollbar { display: none; }\r\n    .kt-team-grid { -ms-overflow-style: none; scrollbar-width: none; }\r\n    \r\n    .kt-team-card { \r\n      flex: 0 0 80%; \/* Kartu ngambil 80% layar, sisa 20% buat peek kartu selanjutnya *\/\r\n      scroll-snap-align: center; \r\n    }\r\n    .kt-team-card:hover { \r\n      transform: translateY(-5px) rotate(0deg); \/* Matikan rotate di HP *\/ \r\n    }\r\n  }\r\n  @media (max-width: 480px) {\r\n    .kt-team-card { flex: 0 0 85%; } \/* Sedikit lebih lebar di HP kecil *\/\r\n  }\r\n<\/style>\r\n\r\n<section class=\"kt-team-section\" id=\"ktTeamSection\">\r\n  <div class=\"kt-team-halftone\"><\/div>\r\n  \r\n  <div class=\"kt-team-header\">\r\n    <div class=\"kt-team-fade1\">\r\n      <span class=\"kt-team-sfx\">SANG KREATOR!<\/span>\r\n    <\/div>\r\n    <h2 class=\"kt-team-title kt-team-fade2\">\u270d\ufe0f Pasukan Penulis CeritaBoom<\/h2>\r\n    <p class=\"kt-team-subtitle kt-team-fade2\">Mereka adalah para pahlawan di balik dongeng seru yang menemani tidurmu! \ud83c\udf19\u2728<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"kt-team-grid\">\r\n          <!-- KARTU PENULIS -->\r\n      <div class=\"kt-team-card kt-team-card-anim\">\r\n        <div class=\"kt-team-avatar-wrap\">\r\n          <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/LOGO-RWB-DOODLE-200x200.jpeg\" alt=\"Penjelajah Senja\" class=\"kt-team-avatar\">\r\n          <div class=\"kt-team-stories\">\ud83d\udcda 20 Cerita<\/div>\r\n        <\/div>\r\n        <div class=\"kt-team-body\">\r\n          <h3 class=\"kt-team-name\">Penjelajah Senja<\/h3>\r\n          <div class=\"kt-team-role\">Penulis & Pencerita<\/div>\r\n          <p class=\"kt-team-desc\">aq seorang kapiten mempunyai pedang panjang kalau berjalan prok prok prok...<\/p>\r\n          \r\n                    <div class=\"kt-team-sosmed\">\r\n            <a href=\"https:\/\/dev.rwb.my.id\/all-templates\/\" target=\"_blank\" title=\"Kunjungi Profil\">\ud83d\udd17<\/a>\r\n          <\/div>\r\n                  <\/div>\r\n      <\/div>\r\n          <!-- KARTU PENULIS -->\r\n      <div class=\"kt-team-card kt-team-card-anim\">\r\n        <div class=\"kt-team-avatar-wrap\">\r\n          <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/cropped-robot-kecil-mars-200x200.jpg\" alt=\"ucil\" class=\"kt-team-avatar\">\r\n          <div class=\"kt-team-stories\">\ud83d\udcda 2 Cerita<\/div>\r\n        <\/div>\r\n        <div class=\"kt-team-body\">\r\n          <h3 class=\"kt-team-name\">ucil<\/h3>\r\n          <div class=\"kt-team-role\">Penulis & Pencerita<\/div>\r\n          <p class=\"kt-team-desc\">aq seorang koki kapiten, mempunyai sendok panjang, kalau berjalan nyam nyam nyam<\/p>\r\n          \r\n                    <div class=\"kt-team-sosmed\">\r\n            <a href=\"https:\/\/demo.rwb.my.id\/\" target=\"_blank\" title=\"Kunjungi Profil\">\ud83d\udd17<\/a>\r\n          <\/div>\r\n                  <\/div>\r\n      <\/div>\r\n      <\/div>\r\n<\/section>\r\n\r\n<script>\r\n  \/\/ === INTERSECTION OBSERVER ===\r\n  document.addEventListener(\"DOMContentLoaded\", function() {\r\n    const section = document.getElementById('ktTeamSection');\r\n    if (!section) return;\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('is-active');\r\n          observer.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, { threshold: 0.15 });\r\n\r\n    observer.observe(section);\r\n  });\r\n<\/script>\r\n\r\n<\/div>\n\t\t\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>KENALAN YUK! CERITA KITA Dari Orang Tua,Untuk Anak-Anak \ud83e\udde1 CeritaBoom lahir dari keresahan orang tua yang susah cari konten bacaan yang aman, edukatif, dan seru buat anak-anak. Di era digital, banyak konten yang sebenarnya belum pantas dilihat si kecil. Kami percaya bahwa cerita adalah jendela dunia. Lewat dongeng, petualangan, dan fantasi \u2014 anak belajar nilai, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":61,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":615,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/19\/revisions\/615"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/media?parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}