{"id":4,"date":"2026-08-17T10:25:39","date_gmt":"2026-08-17T10:25:39","guid":{"rendered":"https:\/\/lab.rwb.my.id\/story\/?page_id=4"},"modified":"2026-08-21T14:49:23","modified_gmt":"2026-08-21T14:49:23","slug":"beranda","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/story\/","title":{"rendered":"Beranda"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4\" class=\"elementor elementor-4\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7d8423f e-con-full e-flex e-con e-parent\" data-id=\"7d8423f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7592708 elementor-widget elementor-widget-shortcode\" data-id=\"7592708\" 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<!-- KARTUN HERO BANNER -->\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Bangers&family=Nunito:wght@400;600;700;800&display=swap');\r\n\r\n  .kt-hero {\r\n    position: relative;\r\n    padding: 100px 20px 60px;\r\n    background: #FFF8E1;\r\n    font-family: 'Nunito', sans-serif;\r\n    overflow: hidden;\r\n    min-height: 520px;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n\r\n  \/* --- Halftone --- *\/\r\n  .kt-hero-halftone {\r\n    position: absolute; inset: 0;\r\n    background-image: radial-gradient(circle, #1A1A1A 1px, transparent 1px);\r\n    background-size: 14px 14px;\r\n    opacity: 0.02;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* --- Animations --- *\/\r\n  @keyframes ktBounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-6px) rotate(-2deg); } 75% { transform: translateY(-3px) rotate(1deg); } }\r\n  @keyframes ktPop { 0% { transform: scale(1); } 50% { transform: scale(1.12) rotate(3deg); } 100% { transform: scale(1); } }\r\n  @keyframes ktWiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }\r\n  @keyframes ktFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }\r\n  @keyframes ktFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\r\n  @keyframes ktSlideLeft { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }\r\n  @keyframes ktZoomIn { from { opacity: 0; transform: scale(0.8) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }\r\n\r\n  .kt-hero-bounce { animation: ktBounce 2s ease-in-out infinite; }\r\n  .kt-hero-pop { animation: ktPop 2.5s ease-in-out infinite; }\r\n  .kt-hero-wiggle { animation: ktWiggle 1.5s ease-in-out infinite; }\r\n  .kt-hero-float { animation: ktFloat 3s ease-in-out infinite; }\r\n  .kt-hero-float2 { animation: ktFloat 3.5s ease-in-out 1s infinite; }\r\n  .kt-hero-fade1 { animation: ktFadeUp 0.7s ease-out 0.2s both; }\r\n  .kt-hero-fade2 { animation: ktFadeUp 0.7s ease-out 0.4s both; }\r\n  .kt-hero-fade3 { animation: ktFadeUp 0.7s ease-out 0.6s both; }\r\n  .kt-hero-fade4 { animation: ktFadeUp 0.7s ease-out 0.8s both; }\r\n  .kt-hero-slide { animation: ktSlideLeft 0.7s ease-out 0.6s both; }\r\n  .kt-hero-zoom { animation: ktZoomIn 0.8s ease-out 0.5s both; }\r\n\r\n  \/* --- Layout --- *\/\r\n  .kt-hero-inner {\r\n    max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;\r\n    gap: 40px; align-items: center; position: relative; z-index: 2;\r\n  }\r\n\r\n  \/* --- Left: Text --- *\/\r\n  .kt-hero-text { position: relative; }\r\n  .kt-hero-sfx-top {\r\n    font-family: 'Bangers', cursive; font-size: clamp(32px, 6vw, 52px); color: #FBBF24;\r\n    -webkit-text-stroke: 2px #1A1A1A; paint-order: stroke fill; letter-spacing: 0.04em; margin-bottom: 4px;\r\n  }\r\n  .kt-hero-title {\r\n    font-family: 'Bangers', cursive; font-size: clamp(36px, 7vw, 64px); color: #1A1A1A;\r\n    letter-spacing: 0.03em; line-height: 1.1; margin-bottom: 16px;\r\n  }\r\n  .kt-hero-title em { font-style: normal; color: #EF4444; -webkit-text-stroke: 1.5px #1A1A1A; paint-order: stroke fill; }\r\n  .kt-hero-desc { font-size: 15px; font-weight: 600; color: #57534E; line-height: 1.7; margin-bottom: 24px; max-width: 420px; }\r\n\r\n  \/* --- CTA Buttons --- *\/\r\n  .kt-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }\r\n  .kt-btn-primary, .kt-btn-secondary {\r\n    display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-size: 14px;\r\n    font-weight: 800; font-family: 'Nunito', sans-serif; border: 3px solid #1A1A1A; box-shadow: 4px 4px 0 #1A1A1A;\r\n    text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.15s ease;\r\n  }\r\n  .kt-btn-primary { color: white; background: #EF4444; border-radius: 15px 255px 15px 225px \/ 225px 15px 255px 15px; }\r\n  .kt-btn-secondary { color: #1A1A1A; background: #FBBF24; border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px; }\r\n  .kt-btn-primary:hover, .kt-btn-secondary:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 #1A1A1A; }\r\n  .kt-btn-primary:active, .kt-btn-secondary:active { transform: translateY(0); box-shadow: 1px 1px 0 #1A1A1A; }\r\n\r\n  \/* --- Stats --- *\/\r\n  .kt-hero-stats { display: flex; gap: 20px; flex-wrap: wrap; }\r\n  .kt-stat { display: flex; align-items: center; gap: 8px; }\r\n  .kt-stat-icon {\r\n    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px;\r\n    background: white; border: 2.5px solid #1A1A1A; border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px; box-shadow: 2px 2px 0 #1A1A1A;\r\n  }\r\n  .kt-stat-num { font-family: 'Bangers', cursive; font-size: 18px; color: #1A1A1A; letter-spacing: 0.02em; }\r\n  .kt-stat-label { font-size: 10px; font-weight: 700; color: #A8A29E; text-transform: uppercase; letter-spacing: 0.05em; }\r\n\r\n  \/* --- Right: Comic Panel --- *\/\r\n  .kt-hero-visual { position: relative; }\r\n  .kt-hero-panel {\r\n    position: relative; background: white; border: 3.5px solid #1A1A1A; border-radius: 20px;\r\n    box-shadow: 8px 8px 0 #1A1A1A; overflow: hidden;\r\n  }\r\n  \r\n  \/* === STYLE CAROUSEL RINGAN === *\/\r\n  .kt-hero-carousel { position: relative; width: 100%; max-height: 420px; overflow: hidden; }\r\n  .kt-hero-carousel-track { display: flex; transition: transform 0.5s ease-in-out; }\r\n  .kt-hero-carousel-slide { min-width: 100%; height: 100%; }\r\n  .kt-hero-carousel-slide img {\r\n    width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block;\r\n  }\r\n  .kt-hero-carousel-dots {\r\n    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);\r\n    display: flex; gap: 8px; z-index: 4;\r\n  }\r\n  .kt-hero-dot {\r\n    width: 10px; height: 10px; background: rgba(255,255,255,0.6);\r\n    border: 1.5px solid #1A1A1A; border-radius: 50%; cursor: pointer; transition: background 0.3s;\r\n  }\r\n  .kt-hero-dot.active { background: #EF4444; }\r\n\r\n  \/* Speech bubble on image *\/\r\n  .kt-hero-speech {\r\n    position: absolute; bottom: 16px; left: 16px; background: white; border: 3px solid #1A1A1A;\r\n    border-radius: 18px; padding: 10px 16px; box-shadow: 3px 3px 0 #1A1A1A; max-width: 220px; z-index: 5;\r\n  }\r\n  .kt-hero-speech::after {\r\n    content: ''; position: absolute; bottom: -10px; left: 20px; width: 0; height: 0;\r\n    border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #1A1A1A;\r\n  }\r\n  .kt-hero-speech::before {\r\n    content: ''; position: absolute; bottom: -6px; left: 23px; width: 0; height: 0;\r\n    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid white; z-index: 1;\r\n  }\r\n\r\n  \/* --- Floating Tags --- *\/\r\n  .kt-hero-tag {\r\n    position: absolute; display: flex; align-items: center; gap: 5px; padding: 6px 14px; font-size: 11px;\r\n    font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #1A1A1A;\r\n    border: 2.5px solid #1A1A1A; border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px; box-shadow: 2px 2px 0 #1A1A1A; z-index: 5;\r\n  }\r\n\r\n  \/* --- POPUP MODAL KARTUN --- *\/\r\n  .kt-modal-overlay {\r\n    display: none; position: fixed; inset: 0; background: rgba(26, 26, 26, 0.6); z-index: 9999;\r\n    align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px);\r\n  }\r\n  .kt-modal-overlay.kt-show { display: flex; animation: ktFadeUp 0.3s ease-out; }\r\n  .kt-modal-box {\r\n    background: #FFF8E1; border: 3.5px solid #1A1A1A; border-radius: 20px 255px 20px 225px \/ 225px 20px 255px 20px;\r\n    box-shadow: 8px 8px 0 #1A1A1A; max-width: 450px; width: 100%; padding: 32px; position: relative;\r\n    text-align: center; animation: ktZoomIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);\r\n  }\r\n  .kt-modal-close {\r\n    position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; background: #EF4444; color: white;\r\n    border: 2.5px solid #1A1A1A; border-radius: 50%; font-size: 16px; font-weight: 800; cursor: pointer;\r\n    box-shadow: 2px 2px 0 #1A1A1A; transition: transform 0.2s; display: flex; align-items: center; justify-content: center;\r\n  }\r\n  .kt-modal-close:hover { transform: rotate(90deg) scale(1.1); }\r\n  .kt-modal-icon {\r\n    width: 60px; height: 60px; background: #FBBF24; border: 3px solid #1A1A1A; border-radius: 50%;\r\n    display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 16px;\r\n    box-shadow: 3px 3px 0 #1A1A1A; animation: ktBounce 2s infinite;\r\n  }\r\n  .kt-modal-title { font-family: 'Bangers', cursive; font-size: 28px; color: #1A1A1A; letter-spacing: 0.03em; margin-bottom: 12px; }\r\n  .kt-modal-text { font-size: 14px; font-weight: 600; color: #57534E; line-height: 1.6; margin-bottom: 20px; text-align: left; }\r\n\r\n  \/* --- Responsive --- *\/\r\n  @media (max-width: 860px) {\r\n    .kt-hero { padding: 90px 20px 40px; min-height: auto; }\r\n    .kt-hero-inner { grid-template-columns: 1fr; gap: 32px; }\r\n    .kt-hero-text { text-align: center; }\r\n    .kt-hero-desc { margin-left: auto; margin-right: auto; }\r\n    .kt-hero-btns { justify-content: center; }\r\n    .kt-hero-stats { justify-content: center; }\r\n    .kt-hero-visual { max-width: 440px; margin: 0 auto; }\r\n  }\r\n  @media (max-width: 540px) {\r\n    .kt-hero { padding: 80px 16px 32px; }\r\n    .kt-hero-carousel-slide img, .kt-hero-carousel { max-height: 300px; }\r\n    .kt-hero-btns { flex-direction: column; align-items: stretch; }\r\n    .kt-btn-primary, .kt-btn-secondary { justify-content: center; }\r\n    .kt-hero-stats { gap: 12px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"kt-hero\" id=\"ktHeroSection\">\r\n  <div class=\"kt-hero-halftone\"><\/div>\r\n\r\n  <svg class=\"kt-hero-pop\" style=\"position:absolute; top:40px; right:8%; z-index:1; opacity:0.9;\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\">\r\n    <polygon points=\"35,0 41,24 65,12 48,30 70,35 48,40 65,58 41,46 35,70 29,46 5,58 22,40 0,35 22,30 5,12 29,24\" fill=\"#FBBF24\" stroke=\"#1A1A1A\" stroke-width=\"2.5\" stroke-linejoin=\"round\"\/>\r\n    <text x=\"35\" y=\"39\" text-anchor=\"middle\" font-family=\"Bangers\" font-size=\"12\" fill=\"#1A1A1A\" stroke=\"none\" style=\"paint-order:normal;\">BOOM!<\/text>\r\n  <\/svg>\r\n\r\n  <svg class=\"kt-hero-float\" style=\"position:absolute; top:120px; left:5%; z-index:1; opacity:0.4;\" width=\"36\" height=\"36\" viewBox=\"0 0 50 50\">\r\n    <polygon points=\"25,0 29,17 50,17 33,27 38,46 25,34 12,46 17,27 0,17 21,17\" fill=\"#EF4444\" stroke=\"#1A1A1A\" stroke-width=\"2\" stroke-linejoin=\"round\"\/>\r\n  <\/svg>\r\n\r\n  <svg class=\"kt-hero-float2\" style=\"position:absolute; bottom:60px; right:5%; z-index:1; opacity:0.1;\" width=\"80\" height=\"40\" viewBox=\"0 0 100 50\" fill=\"none\">\r\n    <path d=\"M25 40 Q10 40, 10 30 Q10 18, 25 18 Q28 6, 42 6 Q52 0, 62 6 Q78 2, 82 18 Q96 18, 96 30 Q96 40, 82 40 Z\" fill=\"#1A1A1A\"\/>\r\n  <\/svg>\r\n\r\n  <svg style=\"position:absolute; bottom:0; left:0; width:100%; height:20px; z-index:3;\" viewBox=\"0 0 1200 20\" preserveAspectRatio=\"none\">\r\n    <path d=\"M0 20 L30 0 L60 20 L90 0 L120 20 L150 0 L180 20 L210 0 L240 20 L270 0 L300 20 L330 0 L360 20 L390 0 L420 20 L450 0 L480 20 L510 0 L540 20 L570 0 L600 20 L630 0 L660 20 L690 0 L720 20 L750 0 L780 20 L810 0 L840 20 L870 0 L900 20 L930 0 L960 20 L990 0 L1020 20 L1050 0 L1080 20 L1110 0 L1140 20 L1170 0 L1200 20 Z\" fill=\"white\"\/>\r\n  <\/svg>\r\n\r\n  <div class=\"kt-hero-inner\">\r\n    <div class=\"kt-hero-text\">\r\n      <div class=\"kt-hero-fade1\">\r\n        <span class=\"kt-hero-sfx-top\">WAZZUP!<\/span>\r\n      <\/div>\r\n      <h1 class=\"kt-hero-title kt-hero-fade2\">\r\n        Cerita Seru<br>Buat <em>Anak<\/em> \ud83c\udf89\r\n      <\/h1>\r\n      <p class=\"kt-hero-desc kt-hero-fade3\">\r\n        Dongeng, petualangan, dan dunia fantasi \u2014 semua ada di sini! Baca atau dengerin, bebas kamu milih. \u2728\r\n      <\/p>\r\n      <div class=\"kt-hero-btns kt-hero-fade4\">\r\n        <button class=\"kt-btn-primary\" onclick=\"ktOpenModal()\">\r\n          \ud83d\udcda Mulai Baca\r\n        <\/button>\r\n        <button class=\"kt-btn-secondary\" id=\"ktAudioBtn\" onclick=\"ktToggleAudio()\">\r\n          \ud83d\udd0a Dengerin Cerita\r\n        <\/button>\r\n      <\/div>\r\n      <div class=\"kt-hero-stats kt-hero-fade4\">\r\n        <div class=\"kt-stat\">\r\n          <div class=\"kt-stat-icon\">\ud83d\udcd6<\/div>\r\n          <div>\r\n            <div class=\"kt-stat-num\">22+<\/div>\r\n            <div class=\"kt-stat-label\">Cerita<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"kt-stat\">\r\n          <div class=\"kt-stat-icon\">\u270d\ufe0f<\/div>\r\n          <div>\r\n            <div class=\"kt-stat-num\">2<\/div>\r\n            <div class=\"kt-stat-label\">Penulis<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"kt-stat\">\r\n          <div class=\"kt-stat-icon\">\u2764\ufe0f<\/div>\r\n          <div>\r\n            <div class=\"kt-stat-num\">225<\/div>\r\n            <div class=\"kt-stat-label\">Pembaca<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"kt-hero-visual kt-hero-zoom\">\r\n      <div class=\"kt-hero-tag kt-hero-float\" style=\"top:-12px; right:-8px; background:#86EFAC; z-index:4;\">\r\n        \ud83e\uddd2 3-12 tahun\r\n      <\/div>\r\n      <div class=\"kt-hero-tag kt-hero-bounce\" style=\"top:50%; left:-12px; background:#FDE68A; z-index:4; transform: translateY(-50%);\">\r\n        \u2b50 BARU!\r\n      <\/div>\r\n      \r\n      <div class=\"kt-hero-panel\">\r\n        <div class=\"kt-hero-carousel\">\r\n          <div class=\"kt-hero-carousel-track\" id=\"ktHeroCarouselTrack\">\r\n            <div class=\"kt-hero-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/catatan-retro-1024x578.jpeg\" alt=\"Cerita Terbaru\"><\/div><div class=\"kt-hero-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/catatan-perjalanan-1024x577.jpeg\" alt=\"Cerita Terbaru\"><\/div><div class=\"kt-hero-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/main-sepedah.jpeg\" alt=\"Cerita Terbaru\"><\/div><div class=\"kt-hero-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/jadul-1.jpeg\" alt=\"Cerita Terbaru\"><\/div><div class=\"kt-hero-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/catatan-retro-1024x578.jpeg\" alt=\"Cerita Terbaru\"><\/div>          <\/div>\r\n          \r\n          <!-- Navigation Dots -->\r\n                    <div class=\"kt-hero-carousel-dots\">\r\n                          <span class=\"kt-hero-dot active\" onclick=\"ktHeroSlideTo(0)\"><\/span>\r\n                          <span class=\"kt-hero-dot \" onclick=\"ktHeroSlideTo(1)\"><\/span>\r\n                          <span class=\"kt-hero-dot \" onclick=\"ktHeroSlideTo(2)\"><\/span>\r\n                          <span class=\"kt-hero-dot \" onclick=\"ktHeroSlideTo(3)\"><\/span>\r\n                      <\/div>\r\n                  <\/div>\r\n\r\n        <div class=\"kt-hero-speech kt-hero-wiggle\">\r\n          <span style=\"font-size:13px; font-weight:800; color:#1A1A1A;\">Ayo baca cerita bareng! \ud83d\udcd6\u2728<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<div class=\"kt-modal-overlay\" id=\"ktStoryModal\" onclick=\"ktCloseModal(event)\">\r\n  <div class=\"kt-modal-box\" onclick=\"event.stopPropagation()\">\r\n    <button class=\"kt-modal-close\" onclick=\"ktCloseModal(event)\">\u2715<\/button>\r\n    <div class=\"kt-modal-icon\">\ud83d\udcd6<\/div>\r\n    <h2 class=\"kt-modal-title\">Halo, Petualang!<\/h2>\r\n    <p class=\"kt-modal-text\">\r\n      Selamat datang di CeritaBoom! \ud83c\udf89 <br><br>\r\n      Di dunia ini, kamu bisa menjelajah hutan ajaib, terbang ke luar angkasa, atau nongkrong bareng monster yang lucu. Ada ratusan cerita seru yang menunggu buat dibaca atau didengerin suaranya.<br><br>\r\n      Siap-siap buat buka halaman ini ya, petualangan terhebat dimulai dari satu lembar buku! \ud83d\ude80\u2728\r\n    <\/p>\r\n    <button class=\"kt-btn-primary\" style=\"width: 100%; justify-content: center;\" onclick=\"ktCloseModal(event)\">\r\n      Gas Baca Cerita! \ud83d\udcda\r\n    <\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<audio id=\"ktStoryAudio\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/Dongeg-Kelinci-Lala1.mp3\" preload=\"none\"><\/audio>\r\n\r\n<script>\r\n  \/\/ === SCRIPT MODAL & AUDIO ===\r\n  function ktOpenModal() {\r\n    document.getElementById('ktStoryModal').classList.add('kt-show');\r\n  }\r\n\r\n  function ktCloseModal(event) {\r\n    if (event.target.classList.contains('kt-modal-overlay') || event.target.classList.contains('kt-modal-close') || event.target.closest('.kt-modal-close') || event.target.classList.contains('kt-btn-primary')) {\r\n      document.getElementById('ktStoryModal').classList.remove('kt-show');\r\n    }\r\n  }\r\n\r\n  function ktToggleAudio() {\r\n    var audio = document.getElementById('ktStoryAudio');\r\n    var btn = document.getElementById('ktAudioBtn');\r\n    \r\n    if (audio.paused) {\r\n      audio.play();\r\n      btn.innerHTML = '\u23f8\ufe0f Jeda Cerita';\r\n    } else {\r\n      audio.pause();\r\n      btn.innerHTML = '\ud83d\udd0a Dengerin Cerita';\r\n    }\r\n  }\r\n\r\n  \/\/ === SCRIPT CAROUSEL INFINITE & PAUSE ON SCROLL ===\r\n  let ktHeroCurrentSlide = 0;\r\n  const ktHeroTotalSlides = 4;\r\n  let ktHeroAutoPlay;\r\n  const ktHeroTrack = document.getElementById('ktHeroCarouselTrack');\r\n\r\n  function ktUpdateHeroCarousel() {\r\n    if (!ktHeroTrack) return;\r\n    ktHeroTrack.style.transition = 'transform 0.5s ease-in-out';\r\n    ktHeroTrack.style.transform = `translateX(-${ktHeroCurrentSlide * 100}%)`;\r\n    \r\n    \/\/ Update dots biar yang aktif nempel di index sebenarnya\r\n    document.querySelectorAll('.kt-hero-dot').forEach((dot, index) => {\r\n      dot.classList.toggle('active', index === (ktHeroCurrentSlide % ktHeroTotalSlides));\r\n    });\r\n  }\r\n\r\n  \/\/ Deteksi kalau animasi gesernya selesai\r\n  ktHeroTrack.addEventListener('transitionend', function() {\r\n    \/\/ Kalau udah nyampe ke slide duplikat (index ke-totalSlides)\r\n    if (ktHeroCurrentSlide === ktHeroTotalSlides) {\r\n      \/\/ Matikan animasi sekilas\r\n      ktHeroTrack.style.transition = 'none';\r\n      \/\/ Reset posisi ke slide 0 (asli) tanpa animasi\r\n      ktHeroCurrentSlide = 0;\r\n      ktHeroTrack.style.transform = `translateX(0%)`;\r\n      \/\/ Kasih jeda dikit biar browser nge-render, terus nyalain animasi lagi\r\n      setTimeout(() => {\r\n        ktHeroTrack.style.transition = 'transform 0.5s ease-in-out';\r\n      }, 20);\r\n    }\r\n  });\r\n\r\n  function ktHeroNextSlide() {\r\n    ktHeroCurrentSlide++;\r\n    ktUpdateHeroCarousel();\r\n  }\r\n\r\n  function ktHeroSlideTo(index) {\r\n    ktHeroCurrentSlide = index;\r\n    ktUpdateHeroCarousel();\r\n    \/\/ Reset timer kalau diklik manual biar gak langsung loncat\r\n    clearInterval(ktHeroAutoPlay);\r\n    ktHeroStartAutoplay();\r\n  }\r\n\r\n  function ktHeroStartAutoplay() {\r\n    if (ktHeroTotalSlides > 1) {\r\n      ktHeroAutoPlay = setInterval(ktHeroNextSlide, 4000); \/\/ 4 detik\r\n    }\r\n  }\r\n\r\n  function ktHeroStopAutoplay() {\r\n    clearInterval(ktHeroAutoPlay);\r\n  }\r\n\r\n  \/\/ Intersection Observer: Pause Autoplay kalau user scroll ke bawah\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    const heroSection = document.getElementById('ktHeroSection');\r\n    if (!heroSection || ktHeroTotalSlides <= 1) return;\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          \/\/ Kalau Hero kelihatan di layar, mulai autoplay\r\n          ktHeroStartAutoplay();\r\n        } else {\r\n          \/\/ Kalau Hero udah ke-scroll ke atas\/bawah, stop autoplay\r\n          ktHeroStopAutoplay();\r\n        }\r\n      });\r\n    }, { threshold: 0.2 }); \/\/ 20% bagian Hero harus kelihatan baru muter\r\n\r\n    observer.observe(heroSection);\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<div class=\"elementor-element elementor-element-d5bc257 e-con-full e-flex e-con e-parent\" data-id=\"d5bc257\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53fee3e elementor-widget elementor-widget-shortcode\" data-id=\"53fee3e\" 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&display=swap');\r\n\r\n  .kt-featured {\r\n    position: relative;\r\n    padding: 60px 20px 80px;\r\n    background: #FFF8E1; \r\n    font-family: 'Nunito', sans-serif;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .kt-featured-halftone {\r\n    position: absolute; inset: 0;\r\n    background-image: radial-gradient(circle, #1A1A1A 1px, transparent 1px);\r\n    background-size: 14px 14px;\r\n    opacity: 0.03;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .kt-featured-header {\r\n    max-width: 1100px;\r\n    margin: 0 auto 40px;\r\n    text-align: center;\r\n    position: relative;\r\n  }\r\n  .kt-featured-sfx {\r\n    font-family: 'Bangers', cursive;\r\n    font-size: 28px;\r\n    color: #EF4444;\r\n    -webkit-text-stroke: 1px #1A1A1A;\r\n    paint-order: stroke fill;\r\n    letter-spacing: 0.05em;\r\n    display: inline-block;\r\n    transform: rotate(-3deg);\r\n    margin-bottom: 8px;\r\n  }\r\n  .kt-featured-title {\r\n    font-family: 'Bangers', cursive;\r\n    font-size: clamp(32px, 5vw, 44px);\r\n    color: #1A1A1A;\r\n    letter-spacing: 0.03em;\r\n    margin: 0;\r\n    display: inline-block;\r\n    position: relative;\r\n  }\r\n  .kt-featured-title::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: -4px;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 8px;\r\n    background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='100' height='10' viewBox='0 0 100 10'%3E%3Cpath d='M0 5 Q 25 10 50 5 T 100 5' stroke='%23FBBF24' stroke-width='4' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\r\n    background-repeat: repeat-x;\r\n  }\r\n\r\n  .kt-featured-grid {\r\n    max-width: 1100px;\r\n    margin: 0 auto;\r\n    display: grid;\r\n    grid-template-columns: 1.2fr 1fr;\r\n    grid-template-rows: auto auto;\r\n    gap: 14px;\r\n  }\r\n\r\n  .kt-small-cards-wrap { display: contents; }\r\n  .kt-swipe-hint { display: none; }\r\n  .kt-small-cards-scroll { display: contents; }\r\n\r\n  .kt-fcard {\r\n    background: #FFFFFF; \r\n    border: 3px solid #1A1A1A;\r\n    border-radius: 16px;\r\n    box-shadow: 4px 4px 0 #1A1A1A;\r\n    overflow: hidden;\r\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n    cursor: pointer;\r\n    text-decoration: none;\r\n    display: block;\r\n    position: relative;\r\n  }\r\n  .kt-fcard:hover {\r\n    transform: translateY(-4px) rotate(-0.3deg);\r\n    box-shadow: 7px 7px 0 #1A1A1A;\r\n  }\r\n  .kt-fcard:hover .kt-fcard-img {\r\n    transform: scale(1.05);\r\n  }\r\n  .kt-fcard-img {\r\n    transition: transform 0.4s ease;\r\n  }\r\n\r\n  .kt-fcard-visual {\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-bottom: 3px solid #1A1A1A;\r\n  }\r\n  .kt-fcard-visual img {\r\n    width: 100%;\r\n    display: block;\r\n    object-fit: cover;\r\n  }\r\n\r\n  .kt-audio-btn {\r\n    position: absolute;\r\n    top: 12px;\r\n    right: 12px;\r\n    width: 36px;\r\n    height: 36px;\r\n    background: #FBBF24;\r\n    border: 2.5px solid #1A1A1A;\r\n    border-radius: 50%;\r\n    box-shadow: 2px 2px 0 #1A1A1A;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 14px;\r\n    cursor: pointer;\r\n    z-index: 5;\r\n    transition: transform 0.2s ease;\r\n  }\r\n  .kt-audio-btn:hover {\r\n    transform: scale(1.1) rotate(5deg);\r\n    background: #EF4444;\r\n    color: white;\r\n  }\r\n\r\n  .kt-fcard-ribbon {\r\n    position: absolute;\r\n    top: 12px;\r\n    left: -4px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n    padding: 4px 12px 4px 10px;\r\n    font-size: 9px;\r\n    font-weight: 800;\r\n    color: white;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    z-index: 2;\r\n  }\r\n  .kt-fcard-ribbon::after {\r\n    content: '';\r\n    position: absolute;\r\n    right: -8px;\r\n    top: 0;\r\n    width: 0;\r\n    height: 0;\r\n    border-left: 8px solid transparent;\r\n    border-bottom: 14px solid transparent;\r\n  }\r\n\r\n  .kt-fcard-body { padding: 16px; }\r\n\r\n  .kt-fcard-tags {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    margin-bottom: 8px;\r\n    flex-wrap: wrap;\r\n  }\r\n  .kt-fcard-genre {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 3px;\r\n    padding: 2px 9px;\r\n    font-size: 9px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #1A1A1A;\r\n    border: 2px solid #1A1A1A;\r\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\r\n  }\r\n  .kt-fcard-age {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 3px;\r\n    padding: 2px 8px;\r\n    font-size: 9px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: white;\r\n    background: #1A1A1A;\r\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\r\n  }\r\n\r\n  .kt-fcard-title {\r\n    font-family: 'Bangers', cursive;\r\n    font-size: 18px;\r\n    color: #1A1A1A;\r\n    letter-spacing: 0.02em;\r\n    line-height: 1.2;\r\n    margin-bottom: 6px;\r\n  }\r\n\r\n  .kt-fcard-excerpt {\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    color: #57534E;\r\n    line-height: 1.55;\r\n    margin-bottom: 12px;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 2;\r\n    -webkit-box-orient: vertical;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .kt-fcard-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    flex-wrap: wrap;\r\n  }\r\n  .kt-fcard-author {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n  }\r\n  .kt-fcard-avatar {\r\n    width: 22px;\r\n    height: 22px;\r\n    border-radius: 50%;\r\n    border: 2px solid #1A1A1A;\r\n    overflow: hidden;\r\n    flex-shrink: 0;\r\n  }\r\n  .kt-fcard-avatar img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n  }\r\n  .kt-fcard-name {\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    color: #1A1A1A;\r\n  }\r\n  .kt-fcard-dot {\r\n    width: 3px;\r\n    height: 3px;\r\n    border-radius: 50%;\r\n    background: #A8A29E;\r\n    flex-shrink: 0;\r\n  }\r\n  .kt-fcard-time {\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    color: #A8A29E;\r\n  }\r\n\r\n  .kt-fcard-big .kt-fcard-title { font-size: 22px; }\r\n  .kt-fcard-big .kt-fcard-excerpt { -webkit-line-clamp: 3; }\r\n\r\n  .kt-fcard-small {\r\n    display: grid;\r\n    grid-template-columns: 120px 1fr;\r\n  }\r\n  .kt-fcard-small .kt-fcard-visual {\r\n    border-bottom: none;\r\n    border-right: 3px solid #1A1A1A;\r\n  }\r\n  .kt-fcard-small .kt-fcard-visual img {\r\n    height: 100%;\r\n    min-height: 110px;\r\n  }\r\n\r\n  .kt-fade-up {\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);\r\n  }\r\n  .kt-fade-up.kt-visible {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n  .kt-delay-1 { transition-delay: 0.1s; }\r\n  .kt-delay-2 { transition-delay: 0.25s; }\r\n  .kt-delay-3 { transition-delay: 0.4s; }\r\n  .kt-delay-4 { transition-delay: 0.55s; }\r\n\r\n  @media (max-width: 860px) {\r\n    .kt-featured-grid {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 14px;\r\n    }\r\n    .kt-fcard-small.kt-fade-up {\r\n      opacity: 1 !important;\r\n      transform: none !important;\r\n      transition: none !important;\r\n    }\r\n    .kt-swipe-hint {\r\n      display: flex !important;\r\n      align-items: center;\r\n      gap: 6px;\r\n      font-size: 12px;\r\n      font-weight: 800;\r\n      color: #57534E;\r\n      margin-left: 5px;\r\n      margin-bottom: 2px;\r\n    }\r\n    .kt-swipe-hint span {\r\n      animation: ktSwipeAnim 1.5s infinite;\r\n      display: inline-block;\r\n    }\r\n    @keyframes ktSwipeAnim {\r\n      0%, 100% { transform: translateX(0); }\r\n      50% { transform: translateX(8px); }\r\n    }\r\n    .kt-small-cards-wrap { display: block; }\r\n    .kt-small-cards-scroll {\r\n      display: flex;\r\n      overflow-x: auto;\r\n      gap: 14px;\r\n      padding: 5px 0 20px 0;\r\n      scroll-snap-type: x mandatory;\r\n      -webkit-overflow-scrolling: touch;\r\n    }\r\n    .kt-small-cards-scroll::-webkit-scrollbar { display: none; }\r\n    .kt-small-cards-scroll { -ms-overflow-style: none; scrollbar-width: none; }\r\n    .kt-fcard-small {\r\n      flex: 0 0 85%;\r\n      scroll-snap-align: center;\r\n      grid-template-columns: 100px 1fr;\r\n    }\r\n    .kt-fcard-small[style*=\"grid-column: span 2\"] {\r\n      grid-column: span 1 !important;\r\n    }\r\n  }\r\n  @media (max-width: 540px) {\r\n    .kt-fcard-small { grid-template-columns: 80px 1fr; }\r\n    .kt-fcard-small .kt-fcard-visual img { min-height: 90px; }\r\n    .kt-fcard-body { padding: 12px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"kt-featured\" id=\"ktFeaturedSection\">\r\n  <div class=\"kt-featured-halftone\"><\/div>\r\n\r\n  <div class=\"kt-featured-header kt-fade-up\">\r\n    <div class=\"kt-featured-sfx\">\ud83d\udca5 BARU KELUAR! \ud83d\udca5<\/div>\r\n    <h2 class=\"kt-featured-title\">Baru Saja Tayang!<\/h2>\r\n  <\/div>\r\n\r\n      <div class=\"kt-featured-grid\">\r\n      \r\n      <!-- === BIG CARD (Post Pertama) === -->\r\n            <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/21\/kakek-dano-dan-buku-cahaya-senja\/\" class=\"kt-fcard kt-fcard-big kt-fade-up kt-delay-1\" style=\"grid-row: span 2;\">\r\n        <div class=\"kt-fcard-visual\">\r\n          <img decoding=\"async\" class=\"kt-fcard-img\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/catatan-retro-1024x578.jpeg\" alt=\"Kakek Dano dan Buku Cahaya Senja\" style=\"height:240px;\">\r\n          <div class=\"kt-fcard-ribbon\" style=\"background:#EF4444;\">\u2b50 NEW UPDATE!<\/div>\r\n        <\/div>\r\n        \r\n        <!-- AUDIO BUTTON KONDISIONAL -->\r\n        \r\n        <div class=\"kt-fcard-body\">\r\n          <div class=\"kt-fcard-tags\">\r\n            <span class=\"kt-fcard-genre\" style=\"background:#86EFAC;\">\ud83e\uddb8 Cerita Malam<\/span>\r\n            <span class=\"kt-fcard-age\">\ud83e\uddd2 6-9 thn<\/span>\r\n          <\/div>\r\n          <h3 class=\"kt-fcard-title\">Kakek Dano dan Buku Cahaya Senja<\/h3>\r\n          <p class=\"kt-fcard-excerpt\">Di sebuah kota kecil yang damai, terdapat sebuah rumah kayu tua yang atapnya menjulang tinggi. Di dalam rumah itu, hiduplah...<\/p>\r\n          <div class=\"kt-fcard-meta\">\r\n            <div class=\"kt-fcard-author\">\r\n              <div class=\"kt-fcard-avatar\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/cropped-robot-kecil-mars-40x40.jpg\" alt=\"ucil\"><\/div>\r\n              <span class=\"kt-fcard-name\">ucil<\/span>\r\n            <\/div>\r\n            <div class=\"kt-fcard-dot\"><\/div>\r\n            <span class=\"kt-fcard-time\">\u23f1 5 min baca<\/span>\r\n                      <\/div>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <!-- === WRAPPER SMALL CARDS (Post 2, 3, 4) === -->\r\n      <div class=\"kt-small-cards-wrap\">\r\n        <div class=\"kt-swipe-hint\">Geser cerita lainnya <span>\ud83d\udc49<\/span><\/div>\r\n        \r\n        <div class=\"kt-small-cards-scroll\">\r\n                      <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/21\/kereta-senja-dan-lima-sahabat-penjaga-jembatan\/\" class=\"kt-fcard kt-fcard-small kt-fade-up kt-delay-2\" >\r\n              <div class=\"kt-fcard-visual\">\r\n                <img decoding=\"async\" class=\"kt-fcard-img\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/catatan-perjalanan-300x169.jpeg\" alt=\"Kereta Senja dan Lima Sahabat Penjaga Jembatan\">\r\n              <\/div>\r\n              \r\n              <!-- AUDIO BUTTON KONDISIONAL -->\r\n              \r\n              <div class=\"kt-fcard-body\">\r\n                <div class=\"kt-fcard-tags\">\r\n                  <span class=\"kt-fcard-genre\" style=\"background:#C7D2FE;\">\ud83d\ude34 Cerita Malam<\/span>\r\n                  <span class=\"kt-fcard-age\">\ud83e\uddd2 3-6 thn<\/span>\r\n                <\/div>\r\n                <h3 class=\"kt-fcard-title\">Kereta Senja dan Lima Sahabat Penjaga Jembatan<\/h3>\r\n                <p class=\"kt-fcard-excerpt\">Tik-tak&#8230; tik-tak&#8230; tik-tak&#8230; Bunyi roda kereta api beradu dengan rel terdengar menenangkan,...<\/p>\r\n                <div class=\"kt-fcard-meta\">\r\n                  <div class=\"kt-fcard-author\">\r\n                    <div class=\"kt-fcard-avatar\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/cropped-robot-kecil-mars-40x40.jpg\" alt=\"\"><\/div>\r\n                    <span class=\"kt-fcard-name\">ucil<\/span>\r\n                  <\/div>\r\n                  <div class=\"kt-fcard-dot\"><\/div>\r\n                  <span class=\"kt-fcard-time\">\u23f1 3 min<\/span>\r\n                                  <\/div>\r\n              <\/div>\r\n            <\/a>\r\n                      <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/raka-dan-cahaya-di-jalan-pulang\/\" class=\"kt-fcard kt-fcard-small kt-fade-up kt-delay-3\" >\r\n              <div class=\"kt-fcard-visual\">\r\n                <img decoding=\"async\" class=\"kt-fcard-img\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/main-sepedah-300x168.jpeg\" alt=\"Raka dan Cahaya di Jalan Pulang\">\r\n              <\/div>\r\n              \r\n              <!-- AUDIO BUTTON KONDISIONAL -->\r\n              \r\n              <div class=\"kt-fcard-body\">\r\n                <div class=\"kt-fcard-tags\">\r\n                  <span class=\"kt-fcard-genre\" style=\"background:#C7D2FE;\">\ud83d\ude34 Cerita Malam<\/span>\r\n                  <span class=\"kt-fcard-age\">\ud83e\uddd2 3-6 thn<\/span>\r\n                <\/div>\r\n                <h3 class=\"kt-fcard-title\">Raka dan Cahaya di Jalan Pulang<\/h3>\r\n                <p class=\"kt-fcard-excerpt\">Di sebuah desa kecil yang dikelilingi sawah hijau dan pegunungan, tinggallah seorang...<\/p>\r\n                <div class=\"kt-fcard-meta\">\r\n                  <div class=\"kt-fcard-author\">\r\n                    <div class=\"kt-fcard-avatar\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/LOGO-RWB-DOODLE-40x40.jpeg\" alt=\"\"><\/div>\r\n                    <span class=\"kt-fcard-name\">Penjelajah Senja<\/span>\r\n                  <\/div>\r\n                  <div class=\"kt-fcard-dot\"><\/div>\r\n                  <span class=\"kt-fcard-time\">\u23f1 3 min<\/span>\r\n                                  <\/div>\r\n              <\/div>\r\n            <\/a>\r\n                      <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-29\/\" class=\"kt-fcard kt-fcard-small kt-fade-up kt-delay-4\" style=\"grid-column: span 2;\">\r\n              <div class=\"kt-fcard-visual\">\r\n                <img decoding=\"async\" class=\"kt-fcard-img\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/jadul-1-300x168.jpeg\" alt=\"Kampung Ceria dan Penunggang Egrang\">\r\n              <\/div>\r\n              \r\n              <!-- AUDIO BUTTON KONDISIONAL -->\r\n              \r\n              <div class=\"kt-fcard-body\">\r\n                <div class=\"kt-fcard-tags\">\r\n                  <span class=\"kt-fcard-genre\" style=\"background:#C7D2FE;\">\ud83d\ude34 Petualangan<\/span>\r\n                  <span class=\"kt-fcard-age\">\ud83e\uddd2 3-6 thn<\/span>\r\n                <\/div>\r\n                <h3 class=\"kt-fcard-title\">Kampung Ceria dan Penunggang Egrang<\/h3>\r\n                <p class=\"kt-fcard-excerpt\">Di sebuah lembah hijau yang dikelilingi oleh gunung-gunung tinggi, terdapat sebuah desa...<\/p>\r\n                <div class=\"kt-fcard-meta\">\r\n                  <div class=\"kt-fcard-author\">\r\n                    <div class=\"kt-fcard-avatar\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/LOGO-RWB-DOODLE-40x40.jpeg\" alt=\"\"><\/div>\r\n                    <span class=\"kt-fcard-name\">Penjelajah Senja<\/span>\r\n                  <\/div>\r\n                  <div class=\"kt-fcard-dot\"><\/div>\r\n                  <span class=\"kt-fcard-time\">\u23f1 3 min<\/span>\r\n                                  <\/div>\r\n              <\/div>\r\n            <\/a>\r\n                  <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- HIDDEN AUDIO ELEMENTS -->\r\n        \r\n    \r\n  \r\n<\/section>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", function() {\r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('kt-visible');\r\n        }\r\n      });\r\n    }, { threshold: 0.15 });\r\n\r\n    document.querySelectorAll('.kt-fade-up').forEach(el => {\r\n      observer.observe(el);\r\n    });\r\n  });\r\n\r\n  function ktCardAudio(event, audioId) {\r\n    event.preventDefault(); \r\n    event.stopPropagation(); \r\n    \r\n    const audio = document.getElementById(audioId);\r\n    if (!audio) return;\r\n    const btn = event.currentTarget;\r\n    \r\n    document.querySelectorAll('audio').forEach(a => {\r\n      if (a.id !== audioId && !a.paused) {\r\n        a.pause();\r\n        document.querySelectorAll('.kt-audio-btn').forEach(b => {\r\n          if (b !== btn) {\r\n            b.innerHTML = '\ud83d\udd0a';\r\n            b.style.background = '#FBBF24';\r\n            b.style.color = '#1A1A1A';\r\n          }\r\n        });\r\n      }\r\n    });\r\n\r\n    if (audio.paused) {\r\n      audio.play();\r\n      btn.innerHTML = '\u23f8\ufe0f';\r\n      btn.style.background = '#22C55E';\r\n      btn.style.color = 'white';\r\n    } else {\r\n      audio.pause();\r\n      btn.innerHTML = '\ud83d\udd0a';\r\n      btn.style.background = '#FBBF24';\r\n      btn.style.color = '#1A1A1A';\r\n    }\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<div class=\"elementor-element elementor-element-e0d5b1e e-con-full e-flex e-con e-parent\" data-id=\"e0d5b1e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1c164e3 elementor-widget elementor-widget-html\" data-id=\"1c164e3\" 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&display=swap');\n\n  \/* SECTION LANGIT MALAM *\/\n  .cb-magic-section {\n    font-family: 'Nunito', sans-serif;\n    background: radial-gradient(circle at bottom, #1e1b4b 0%, #0f172a 100%);\n    padding: 80px 20px;\n    position: relative;\n    overflow: hidden;\n    min-height: 600px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n\n  \/* EFEK BINTANG DI LANGIT *\/\n  .cb-stars-bg {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    background-image: \n      radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),\n      radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),\n      radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),\n      radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),\n      radial-gradient(2px 2px at 130px 80px, #eee, rgba(0,0,0,0)),\n      radial-gradient(2px 2px at 160px 120px, #fff, rgba(0,0,0,0));\n    background-repeat: repeat;\n    background-size: 200px 200px;\n    animation: twinkle 4s infinite ease-in-out;\n    opacity: 0.6;\n  }\n\n  @keyframes twinkle {\n    0%, 100% { opacity: 0.4; }\n    50% { opacity: 0.8; }\n  }\n\n  \/* JUDUL UTAMA *\/\n  .cb-magic-title {\n    font-family: 'Bangers', cursive;\n    font-size: clamp(2.2rem, 6vw, 3.8rem);\n    color: #FDE047;\n    text-shadow: 0 0 10px rgba(253, 224, 71, 0.6), 3px 3px 0 #000;\n    margin-bottom: 60px;\n    text-align: center;\n    position: relative;\n    z-index: 2;\n    letter-spacing: 2px;\n    opacity: 0;\n    transform: translateY(-30px);\n    transition: all 0.8s ease;\n  }\n  \n  \/* Saat section aktif (di-scroll), judul muncul *\/\n  .cb-magic-section.is-active .cb-magic-title {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  \/* WRAPPER IKON *\/\n  .cb-lantern-list {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 60px;\n    position: relative;\n    z-index: 2;\n    width: 100%;\n    max-width: 1000px;\n  }\n\n  \/* KONTAINER IKON & TEKS *\/\n  .cb-lantern-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 220px;\n    cursor: pointer;\n    position: relative;\n    \n    \/* State awal sebelum IntersectionObserver aktif *\/\n    opacity: 0;\n    transform: translateY(60px);\n    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28);\n  }\n\n  \/* Saat section aktif, item muncul dengan jeda (stagger) *\/\n  .cb-magic-section.is-active .cb-lantern-item {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  .cb-magic-section.is-active .cb-lantern-item:nth-child(1) { transition-delay: 0.2s; }\n  .cb-magic-section.is-active .cb-lantern-item:nth-child(2) { transition-delay: 0.4s; }\n  .cb-magic-section.is-active .cb-lantern-item:nth-child(3) { transition-delay: 0.6s; }\n\n  \/* EMOJI IKON *\/\n  .cb-emoji {\n    font-size: 70px;\n    display: inline-block;\n    transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);\n    animation: floatOrb 4s ease-in-out infinite;\n    margin-bottom: 20px;\n    line-height: 1;\n  }\n\n  \/* SET WARNA CAHAYA (DROP-SHADOW MENGIKUTI BENTUK EMOJI) *\/\n  .cb-lantern-item[data-color=\"star\"] .cb-emoji {\n    filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.6));\n  }\n  .cb-lantern-item[data-color=\"moon\"] .cb-emoji {\n    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.6));\n    animation-delay: 1s;\n  }\n  .cb-lantern-item[data-color=\"cloud\"] .cb-emoji {\n    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));\n    animation-delay: 2s;\n  }\n\n  \/* ANIMASI MELAYANG *\/\n  @keyframes floatOrb {\n    0%, 100% { transform: translateY(0px); }\n    50% { transform: translateY(-15px); }\n  }\n\n  \/* SAAT EMOJI DI KLIK \/ HOVER (GLOW MENYALA TERANG) *\/\n  .cb-lantern-item:hover .cb-emoji,\n  .cb-lantern-item.is-glowing .cb-emoji {\n    transform: scale(1.2);\n    animation-play-state: paused;\n  }\n  .cb-lantern-item[data-color=\"star\"]:hover .cb-emoji,\n  .cb-lantern-item[data-color=\"star\"].is-glowing .cb-emoji {\n    filter: drop-shadow(0 0 30px rgba(56, 189, 248, 1));\n  }\n  .cb-lantern-item[data-color=\"moon\"]:hover .cb-emoji,\n  .cb-lantern-item[data-color=\"moon\"].is-glowing .cb-emoji {\n    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 1));\n  }\n  .cb-lantern-item[data-color=\"cloud\"]:hover .cb-emoji,\n  .cb-lantern-item[data-color=\"cloud\"].is-glowing .cb-emoji {\n    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1));\n  }\n\n  \/* TEKS SINGKAT *\/\n  .cb-star-title {\n    font-family: 'Bangers', cursive;\n    font-size: 1.4rem;\n    color: #fff;\n    text-shadow: 2px 2px 0 #000;\n    margin-bottom: 10px;\n    text-align: center;\n  }\n\n  \/* DESKRIPSI *\/\n  .cb-star-desc {\n    font-size: 14px;\n    font-weight: 600;\n    color: #E2E8F0;\n    text-align: center;\n    line-height: 1.5;\n    background: rgba(255, 255, 255, 0.1);\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    border-radius: 15px;\n    backdrop-filter: blur(5px);\n    width: 250px;\n    opacity: 0;\n    max-height: 0;\n    overflow: hidden;\n    transition: all 0.5s ease;\n    padding: 0 15px;\n    \n    \/* DESKTOP: Absolute agar tidak mendorong konten *\/\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%) translateY(-10px);\n    pointer-events: none;\n  }\n\n  .cb-lantern-item:hover .cb-star-desc,\n  .cb-lantern-item.is-glowing .cb-star-desc {\n    opacity: 1;\n    max-height: 200px;\n    padding: 15px;\n    transform: translateX(-50%) translateY(20px);\n    pointer-events: auto;\n  }\n\n  \/* RESPONSIVE - LAYAR HP *\/\n  @media (max-width: 768px) {\n    .cb-lantern-list {\n      flex-direction: column;\n      gap: 30px;\n      align-items: center;\n    }\n    .cb-lantern-item {\n      width: 100%;\n      max-width: 280px;\n    }\n    .cb-emoji {\n      font-size: 50px;\n      margin-bottom: 15px;\n    }\n    \/* Di HP, deskripsi biar menekan konten ke bawah *\/\n    .cb-star-desc {\n      position: relative;\n      top: 0;\n      left: 0;\n      transform: translateY(20px);\n      width: 100%;\n    }\n    .cb-lantern-item.is-glowing .cb-star-desc,\n    .cb-lantern-item:hover .cb-star-desc {\n      transform: translateY(0);\n      margin-bottom: 20px;\n    }\n  }\n<\/style>\n\n<section class=\"cb-magic-section\" id=\"cbMagicSection\">\n  <div class=\"cb-stars-bg\"><\/div>\n  \n  <h2 class=\"cb-magic-title\">KENAPA BACA DI CERITABOOM?<\/h2>\n  \n  <div class=\"cb-lantern-list\">\n    \n    <!-- ITEM 1: BINTANG -->\n    <div class=\"cb-lantern-item\" data-color=\"star\" tabindex=\"0\" role=\"button\" aria-label=\"Mataku gak bisa terpejam nih\">\n      <span class=\"cb-emoji\">\ud83d\udcab<\/span>\n      <div class=\"cb-star-title\">Mataku gak bisa terpejam nih...<\/div>\n      <div class=\"cb-star-desc\">Susah tidur pas malam hari? Jadwal cerita pengantar tidur bikin anak rewel kalau gak diceritain.<\/div>\n    <\/div>\n\n    <!-- ITEM 2: BULAN SABIT -->\n    <div class=\"cb-lantern-item\" data-color=\"moon\" tabindex=\"0\" role=\"button\" aria-label=\"Wuhu Nyaman banget matanya\">\n      <span class=\"cb-emoji\">\ud83c\udf19<\/span>\n      <div class=\"cb-star-title\">Wuhu! Nyaman banget matanya!<\/div>\n      <div class=\"cb-star-desc\">Nyalain Mode Gelap biar mata gak silau, dengerin Musik Ambient yang bikin santai. Tinggal klik tombol di pojok layar!<\/div>\n    <\/div>\n\n    <!-- ITEM 3: AWAN -->\n    <div class=\"cb-lantern-item\" data-color=\"cloud\" tabindex=\"0\" role=\"button\" aria-label=\"Zzz mimpi indah\">\n      <span class=\"cb-emoji\">\u2601\ufe0f<\/span>\n      <div class=\"cb-star-title\">Zzz... mimpi indah...<\/div>\n      <div class=\"cb-star-desc\">Langsung lelap ke alam bawah sadar! Anak tertidur pulas dengan mimpi yang seru dan penuh warna.<\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    const section = document.getElementById('cbMagicSection');\n    const items = document.querySelectorAll('.cb-lantern-item');\n\n    \/\/ 1. INTERSECTION OBSERVER (Memicu animasi muncul saat di-scroll)\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 mengobservasi setelah aktif\n        }\n      });\n    }, { threshold: 0.2 }); \/\/ Aktif saat 20% section terlihat\n\n    observer.observe(section);\n\n    \/\/ 2. LOGIKA HOVER & TAP\n    items.forEach(item => {\n      \/\/ Desktop (Hover)\n      item.addEventListener('mouseenter', function() {\n        if (window.matchMedia('(hover: hover)').matches) {\n          items.forEach(i => i.classList.remove('is-glowing'));\n          this.classList.add('is-glowing');\n        }\n      });\n\n      item.addEventListener('mouseleave', function() {\n        if (window.matchMedia('(hover: hover)').matches) {\n          this.classList.remove('is-glowing');\n        }\n      });\n\n      \/\/ HP & Keyboard (Klik)\n      item.addEventListener('click', function(e) {\n        e.stopPropagation();\n        if (this.classList.contains('is-glowing')) {\n          this.classList.remove('is-glowing');\n        } else {\n          items.forEach(i => i.classList.remove('is-glowing'));\n          this.classList.add('is-glowing');\n        }\n      });\n\n      \/\/ Keyboard (Enter\/Space)\n      item.addEventListener('keydown', function(e) {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          this.click();\n        }\n      });\n    });\n\n    \/\/ 3. KLIK AREA KOSONG UNTUK TUTUP (Mobile Friendly)\n    document.addEventListener('click', function(e) {\n      if (!e.target.closest('.cb-lantern-item')) {\n        items.forEach(i => i.classList.remove('is-glowing'));\n      }\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-64274ab e-con-full e-flex e-con e-parent\" data-id=\"64274ab\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-44a5068 elementor-widget elementor-widget-html\" data-id=\"44a5068\" 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&display=swap');\n\n  .kt-arcade-section {\n    background-color: #FFF8E1;\n    font-family: 'Nunito', sans-serif;\n    padding: 60px 0;\n    position: relative;\n    overflow: hidden;\n  }\n  .kt-arcade-wrap {\n    max-width: 800px;\n    margin: 0 auto;\n    padding: 0 20px;\n  }\n\n  \/* Kepala Section *\/\n  .kt-arcade-head {\n    text-align: center;\n    margin-bottom: 40px;\n    position: relative;\n    z-index: 2;\n  }\n  .kt-arcade-title-box {\n    position: relative;\n    display: inline-block;\n    padding: 10px 30px 20px 30px;\n  }\n  .kt-arcade-head h2 {\n    font-family: 'Bangers', cursive;\n    font-size: clamp(2rem, 5vw, 3rem);\n    color: #EF4444;\n    -webkit-text-stroke: 1.5px #1A1A1A;\n    paint-order: stroke fill;\n    margin: 0;\n    line-height: 1.1;\n  }\n  .kt-arcade-wavy {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 12px;\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='15' viewBox='0 0 200 15'%3E%3Cpath d='M0 10 Q 25 2 50 10 T 100 10 T 150 10 T 200 10' stroke='%23FBBF24' stroke-width='4' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\n    background-repeat: no-repeat;\n    background-size: 100% 100%;\n  }\n  .kt-arcade-head p {\n    font-size: 14px;\n    font-weight: 600;\n    color: #57534E;\n    margin: 15px 0 0 0;\n  }\n\n  \/* MESIN ARCADE *\/\n  .kt-arcade-machine {\n    background: #FFFFFF;\n    border: 4px solid #1A1A1A;\n    border-radius: 30px 30px 15px 15px;\n    box-shadow: 12px 12px 0 #1A1A1A;\n    overflow: hidden;\n    position: relative;\n    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n\n  \/* Bintang Atas (Marquee) *\/\n  .kt-arcade-marquee {\n    background: #EF4444;\n    color: #FFF;\n    text-align: center;\n    padding: 10px;\n    font-family: 'Bangers', cursive;\n    font-size: 1.2rem;\n    letter-spacing: 0.1em;\n    border-bottom: 4px solid #1A1A1A;\n    text-shadow: 2px 2px 0 #1A1A1A;\n  }\n\n  \/* Layar TV *\/\n  .kt-arcade-screen {\n    background: #1A1A1A;\n    min-height: 220px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 30px;\n    position: relative;\n    border-bottom: 4px solid #1A1A1A;\n  }\n  \/* Garis CRT (Layar Jadul) *\/\n  .kt-arcade-screen::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px);\n    pointer-events: none;\n  }\n\n  .kt-screen-emoji {\n    font-size: 4.5rem;\n    display: block;\n    margin-bottom: 15px;\n    filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));\n    transition: transform 0.3s ease;\n  }\n  .kt-screen-emoji.kt-bounce {\n    animation: ktArcadeBounce 0.4s ease;\n  }\n  @keyframes ktArcadeBounce {\n    0%, 100% { transform: scale(1); }\n    50% { transform: scale(1.2) rotate(-5deg); }\n  }\n\n  .kt-screen-title {\n    font-family: 'Bangers', cursive;\n    font-size: 1.8rem;\n    color: #FBBF24;\n    text-shadow: 2px 2px 0 #000;\n    margin: 0;\n    text-align: center;\n  }\n  .kt-screen-hint {\n    margin-top: 10px;\n    font-size: 12px;\n    color: #FFF;\n    opacity: 0.6;\n    letter-spacing: 0.1em;\n  }\n\n  \/* Panel Tombol *\/\n  .kt-arcade-controls {\n    background: #FBBF24;\n    padding: 30px 20px;\n    display: flex;\n    justify-content: center;\n    gap: 20px;\n    flex-wrap: wrap;\n  }\n\n  \/* Tombol Arcade Bulat *\/\n  .kt-arcade-btn {\n    width: 70px;\n    height: 70px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: var(--btn-color);\n    border: 3px solid #1A1A1A;\n    border-radius: 50%;\n    box-shadow: 0 6px 0 #1A1A1A;\n    text-decoration: none;\n    transition: all 0.1s ease;\n    cursor: pointer;\n    position: relative;\n  }\n  .kt-arcade-btn span {\n    font-size: 1.8rem;\n    line-height: 1;\n  }\n  .kt-arcade-btn small {\n    font-size: 8px;\n    font-weight: 800;\n    color: #1A1A1A;\n    margin-top: 2px;\n    text-transform: uppercase;\n  }\n  \/* Efek Klik\/Hover *\/\n  .kt-arcade-btn:hover {\n    transform: translateY(4px);\n    box-shadow: 0 2px 0 #1A1A1A;\n  }\n  .kt-arcade-btn:active {\n    transform: translateY(6px);\n    box-shadow: 0 0px 0 #1A1A1A;\n  }\n\n  \/* Slot Coin Bawah *\/\n  .kt-arcade-coin {\n    background: #1A1A1A;\n    color: #FBBF24;\n    text-align: center;\n    padding: 8px;\n    font-size: 10px;\n    font-weight: 800;\n    letter-spacing: 0.2em;\n  }\n\n  \/* === ANIMASI FADE UP (INTERSECTION OBSERVER) === *\/\n  .fade-up {\n    opacity: 0;\n    transform: translateY(40px);\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n  }\n  .fade-up.is-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  \n  \/* RESPONSIVE HP *\/\n  @media (max-width: 480px) {\n    .kt-arcade-controls {\n      gap: 15px;\n      padding: 20px 10px;\n    }\n    .kt-arcade-btn {\n      width: 55px;\n      height: 55px;\n    }\n    .kt-arcade-btn span {\n      font-size: 1.4rem;\n    }\n    .kt-arcade-screen {\n      min-height: 180px;\n    }\n  }\n<\/style>\n\n<div class=\"kt-arcade-section\">\n  <div class=\"kt-arcade-wrap\">\n    \n    <div class=\"kt-arcade-head fade-up\">\n      <div class=\"kt-arcade-title-box\">\n        <h2>\ud83c\udfae JELAJAH & BERMAIN<\/h2>\n        <div class=\"kt-arcade-wavy\"><\/div>\n      <\/div>\n      <p>Arahkan kursor ke tombol buat lihat preview, klik buat main! \ud83d\udd79\ufe0f<\/p>\n    <\/div>\n\n    <!-- MESIN ARCADE -->\n    <div class=\"kt-arcade-machine fade-up\">\n      \n      <!-- Marquee Atas -->\n      <div class=\"kt-arcade-marquee\">\u2605 GAME ROOM CERITABOOM \u2605<\/div>\n\n      <!-- Layar -->\n      <div class=\"kt-arcade-screen\">\n        <span class=\"kt-screen-emoji\" id=\"ktScreenEmoji\">\ud83d\udd79\ufe0f<\/span>\n        <h3 class=\"kt-screen-title\" id=\"ktScreenTitle\">Pilih Permainan!<\/h3>\n        <div class=\"kt-screen-hint\">- INSERT COIN -<\/div>\n      <\/div>\n\n      <!-- Panel Tombol -->\n      <div class=\"kt-arcade-controls\">\n        \n        <a href=\"https:\/\/lab.rwb.my.id\/story\/kuis-seru\/\" class=\"kt-arcade-btn\" style=\"--btn-color: #A7F3D0;\" \n           onmouseover=\"changeScreen('\ud83e\udde0', 'Kuis Seru')\" onmouseout=\"resetScreen()\">\n          <span>\ud83e\udde0<\/span>\n          <small>Kuis<\/small>\n        <\/a>\n\n        <a href=\"https:\/\/lab.rwb.my.id\/story\/kejutan-hari-ini\/\" class=\"kt-arcade-btn\" style=\"--btn-color: #FBCFE8;\" \n           onmouseover=\"changeScreen('\ud83e\ude84', 'Kejutan Hari Ini')\" onmouseout=\"resetScreen()\">\n          <span>\ud83e\ude84<\/span>\n          <small>Kejutan<\/small>\n        <\/a>\n\n        <a href=\"https:\/\/lab.rwb.my.id\/story\/tebak-siapa\/\" class=\"kt-arcade-btn\" style=\"--btn-color: #FBBF24;\" \n           onmouseover=\"changeScreen('\ud83d\udc09', 'Tebak Siapa?')\" onmouseout=\"resetScreen()\">\n          <span>\ud83d\udc09<\/span>\n          <small>Tebak<\/small>\n        <\/a>\n\n        <a href=\"https:\/\/lab.rwb.my.id\/story\/pilih-ceritamu\/\" class=\"kt-arcade-btn\" style=\"--btn-color: #93C5FD;\" \n           onmouseover=\"changeScreen('\ud83c\udfb2', 'Pilih Ceritamu')\" onmouseout=\"resetScreen()\">\n          <span>\ud83c\udfb2<\/span>\n          <small>Pilih<\/small>\n        <\/a>\n\n        <a href=\"https:\/\/lab.rwb.my.id\/story\/cerita-lucu\/\" class=\"kt-arcade-btn\" style=\"--btn-color: #FCA5A5;\" \n           onmouseover=\"changeScreen('\ud83d\ude02', 'Cerita Lucu')\" onmouseout=\"resetScreen()\">\n          <span>\ud83d\ude02<\/span>\n          <small>Lucu<\/small>\n        <\/a>\n\n      <\/div>\n\n      <!-- Slot Coin Bawah -->\n      <div class=\"kt-arcade-coin\">CERITABOOM ARCADE SYSTEM \ud83e\ude99<\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<!-- JS INTERSECTION OBSERVER & ARCADE LOGIC -->\n<script>\n  \/\/ 1. Animasi Muncul Pas di Scroll\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    const fadeElements = document.querySelectorAll('.fade-up');\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add('is-visible');\n          observer.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.15 });\n    fadeElements.forEach(el => observer.observe(el));\n  });\n\n  \/\/ 2. Logika Layar Arcade\n  function changeScreen(emoji, title) {\n    const emojiEl = document.getElementById('ktScreenEmoji');\n    const titleEl = document.getElementById('ktScreenTitle');\n    \n    emojiEl.innerText = emoji;\n    titleEl.innerText = title;\n    \n    \/\/ Kasih efek bounce tiap ganti\n    emojiEl.classList.remove('kt-bounce');\n    void emojiEl.offsetWidth; \/\/ Trigger reflow\n    emojiEl.classList.add('kt-bounce');\n  }\n\n  function resetScreen() {\n    const emojiEl = document.getElementById('ktScreenEmoji');\n    const titleEl = document.getElementById('ktScreenTitle');\n    \n    emojiEl.innerText = '\ud83d\udd79\ufe0f';\n    titleEl.innerText = 'Pilih Permainan!';\n    emojiEl.classList.remove('kt-bounce');\n    void emojiEl.offsetWidth;\n    emojiEl.classList.add('kt-bounce');\n  }\n<\/script>\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>KENAPA BACA DI CERITABOOM? \ud83d\udcab Mataku gak bisa terpejam nih&#8230; Susah tidur pas malam hari? Jadwal cerita pengantar tidur bikin anak rewel kalau gak diceritain. \ud83c\udf19 Wuhu! Nyaman banget matanya! Nyalain Mode Gelap biar mata gak silau, dengerin Musik Ambient yang bikin santai. Tinggal klik tombol di pojok layar! \u2601\ufe0f Zzz&#8230; mimpi indah&#8230; Langsung lelap [&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-4","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/4","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=4"}],"version-history":[{"count":163,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/4\/revisions"}],"predecessor-version":[{"id":539,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/4\/revisions\/539"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/media?parent=4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}