{"id":13,"date":"2026-08-17T10:34:10","date_gmt":"2026-08-17T10:34:10","guid":{"rendered":"https:\/\/lab.rwb.my.id\/story\/?page_id=13"},"modified":"2026-08-19T14:17:50","modified_gmt":"2026-08-19T14:17:50","slug":"daftar-cerita","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/story\/daftar-cerita\/","title":{"rendered":"Daftar Cerita"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"13\" class=\"elementor elementor-13\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ab5529 e-con-full e-flex e-con e-parent\" data-id=\"1ab5529\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f326524 elementor-widget elementor-widget-html\" data-id=\"f326524\" 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-book-hero {\n    background-color: #FFF8E1;\n    font-family: 'Nunito', sans-serif;\n    padding: 80px 20px 60px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n\n  \/* Polka Dot Halftone Background *\/\n  .kt-book-hero::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-image: radial-gradient(circle, #1A1A1A 1.5px, transparent 1.5px);\n    background-size: 20px 20px;\n    opacity: 0.05;\n    pointer-events: none;\n  }\n\n  .kt-book-content {\n    position: relative;\n    z-index: 2;\n    max-width: 800px;\n    margin: 0 auto;\n  }\n\n  \/* === PENGATURAN ANIMASI FADE UP (INTERSECTION OBSERVER) === *\/\n  .kt-anim-item {\n    opacity: 0;\n    transform: translateY(40px);\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n    will-change: opacity, transform;\n  }\n  .kt-anim-item.kt-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  \/* Delay bertahap agar muncul satu per satu *\/\n  .kt-book-title-box { transition-delay: 0.1s; }\n  .kt-book-wrapper { transition-delay: 0.3s; }\n  .kt-book-desc { transition-delay: 0.5s; }\n\n  \/* Judul *\/\n  .kt-book-title-box {\n    margin-bottom: 40px;\n  }\n  .kt-book-sfx {\n    font-family: 'Bangers', cursive;\n    font-size: 18px;\n    color: #EF4444;\n    -webkit-text-stroke: 1px #1A1A1A;\n    paint-order: stroke fill;\n    letter-spacing: 0.05em;\n    display: inline-block;\n    transform: rotate(-3deg);\n    margin-bottom: 8px;\n  }\n  .kt-book-title {\n    font-family: 'Bangers', cursive;\n    font-size: clamp(2.5rem, 6vw, 4rem);\n    color: #1A1A1A;\n    letter-spacing: 0.03em;\n    margin: 0;\n    display: inline-block;\n    position: relative;\n  }\n  .kt-book-title::after {\n    content: '';\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 10px;\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\");\n    background-repeat: repeat-x;\n  }\n\n  \/* Wrapper Buku (UntukAnimasi Fade Up agar tidak bentrok dengan animasi 3D float) *\/\n  .kt-book-wrapper {\n    position: relative;\n    display: inline-block;\n  }\n\n  \/* BUKU TERBUKA (3D CSS) *\/\n  .kt-open-book {\n    width: 300px;\n    height: 200px;\n    margin: 0 auto;\n    position: relative;\n    transform-style: preserve-3d;\n    perspective: 1000px;\n    animation: ktBookFloat 4s ease-in-out infinite;\n  }\n  @keyframes ktBookFloat {\n    0%, 100% { transform: translateY(0) rotateX(10deg); }\n    50% { transform: translateY(-15px) rotateX(10deg); }\n  }\n\n  .kt-book-page-left, .kt-book-page-right {\n    position: absolute;\n    top: 0;\n    width: 50%;\n    height: 100%;\n    background: #FFFFFF;\n    border: 3px solid #1A1A1A;\n    box-sizing: border-box;\n    box-shadow: 5px 5px 0 #1A1A1A;\n    overflow: hidden;\n  }\n  .kt-book-page-left {\n    left: 0;\n    transform-origin: right center;\n    transform: rotateY(35deg);\n    border-radius: 10px 0 0 10px;\n  }\n  .kt-book-page-right {\n    right: 0;\n    transform-origin: left center;\n    transform: rotateY(-35deg);\n    border-radius: 0 10px 10px 0;\n  }\n\n  \/* Coretan Garis di Halaman Kiri *\/\n  .kt-book-lines {\n    padding: 30px 15px 15px 15px;\n    text-align: left;\n  }\n  .kt-book-line {\n    height: 2px;\n    background: #1A1A1A;\n    border-radius: 2px;\n    margin-bottom: 12px;\n    opacity: 0.8;\n  }\n  .kt-book-line:nth-child(1) { width: 90%; }\n  .kt-book-line:nth-child(2) { width: 80%; }\n  .kt-book-line:nth-child(3) { width: 95%; }\n  .kt-book-line:nth-child(4) { width: 70%; }\n\n  \/* Gambar di Halaman Kanan *\/\n  .kt-book-image-box {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    padding: 15px;\n  }\n  .kt-book-emoji {\n    font-size: 3.5rem;\n    animation: ktBounce 2s infinite;\n  }\n  @keyframes ktBounce {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-8px); }\n  }\n  .kt-book-caption {\n    font-size: 12px;\n    font-weight: 800;\n    color: #1A1A1A;\n    background: #FBBF24;\n    padding: 4px 10px;\n    border: 2px solid #1A1A1A;\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\n  }\n\n  \/* Bintang dekorasi di sekitar buku *\/\n  .kt-book-star {\n    position: absolute;\n    color: #EF4444;\n    font-size: 1.5rem;\n    animation: ktTwinkle 1.5s infinite;\n    z-index: 3;\n  }\n  .kt-bs-1 { top: 10px; left: -20px; animation-delay: 0s; }\n  .kt-bs-2 { bottom: 20px; right: -20px; animation-delay: 0.5s; color: #FBBF24; }\n  .kt-bs-3 { top: 50%; left: -30px; animation-delay: 1s; color: #FBBF24; }\n  .kt-bs-4 { top: 20%; right: -30px; animation-delay: 0.2s; }\n\n  @keyframes ktTwinkle {\n    0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }\n    50% { opacity: 1; transform: scale(1.2) rotate(15deg); }\n  }\n\n  \/* Deskripsi *\/\n  .kt-book-desc {\n    margin-top: 50px;\n    font-size: 16px;\n    font-weight: 700;\n    color: #57534E;\n  }\n\n  \/* RESPONSIVE HP *\/\n  @media (max-width: 480px) {\n    .kt-open-book {\n      width: 240px;\n      height: 160px;\n    }\n    .kt-book-line { margin-bottom: 8px; }\n    .kt-book-emoji { font-size: 2.5rem; }\n    \/* Sesuaikan posisi bintang agar tidak terlalu keluar di HP *\/\n    .kt-bs-1 { left: -10px; }\n    .kt-bs-2 { right: -10px; }\n    .kt-bs-3 { left: -15px; }\n    .kt-bs-4 { right: -15px; }\n  }\n\n  \/* HORMATI PREFERENSI REDUCED MOTION (AKSESIBILITAS) *\/\n  @media (prefers-reduced-motion: reduce) {\n    .kt-anim-item {\n      opacity: 1 !important;\n      transform: none !important;\n      transition: none !important;\n    }\n    .kt-open-book, .kt-book-emoji, .kt-book-star {\n      animation: none !important;\n    }\n  }\n<\/style>\n\n<div class=\"kt-book-hero\">\n  <div class=\"kt-book-content\">\n    \n    <!-- Elemen 1: Judul (Muncul pertama) -->\n    <div class=\"kt-book-title-box kt-anim-item\">\n      <div class=\"kt-book-sfx\">\ud83d\udcda PERPUSTAKAAN AJAIB \u2728<\/div>\n      <h1 class=\"kt-book-title\">RAK MAJALAH CERITA<\/h1>\n    <\/div>\n\n    <!-- Elemen 2: Buku (Muncul kedua) -->\n    <!-- Dibungkus div kt-book-wrapper agar animasi fade-up tidak bentrok dengan animasi float 3D -->\n    <div class=\"kt-book-wrapper kt-anim-item\">\n      <div class=\"kt-open-book\">\n        <!-- aria-hidden true karena sekadar dekorasi -->\n        <div class=\"kt-book-star kt-bs-1\" aria-hidden=\"true\">\u2b50<\/div>\n        <div class=\"kt-book-star kt-bs-2\" aria-hidden=\"true\">\u2728<\/div>\n        <div class=\"kt-book-star kt-bs-3\" aria-hidden=\"true\">\u2b50<\/div>\n        <div class=\"kt-book-star kt-bs-4\" aria-hidden=\"true\">\u2728<\/div>\n\n        <!-- Halaman Kiri (Coretan) -->\n        <div class=\"kt-book-page-left\">\n          <div class=\"kt-book-lines\">\n            <div class=\"kt-book-line\"><\/div>\n            <div class=\"kt-book-line\"><\/div>\n            <div class=\"kt-book-line\"><\/div>\n            <div class=\"kt-book-line\"><\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Halaman Kanan (Gambar) -->\n        <div class=\"kt-book-page-right\">\n          <div class=\"kt-book-image-box\">\n            <!-- role img dan aria-label untuk screen reader -->\n            <span class=\"kt-book-emoji\" role=\"img\" aria-label=\"Gambar Naga\">\ud83d\udc09<\/span>\n            <span class=\"kt-book-caption\">Baca Aku!<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Elemen 3: Deskripsi (Muncul ketiga) -->\n    <p class=\"kt-book-desc kt-anim-item\">Jelajah semua cerita seru di sini! Geser kartu di bawah ini ya \ud83d\udc47<\/p>\n\n  <\/div>\n<\/div>\n\n<!-- SCRIPT UNTUK INTERSECTION OBSERVER -->\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const animatedItems = document.querySelectorAll('.kt-anim-item');\n\n    const observer = new IntersectionObserver((entries, observer) => {\n      entries.forEach(entry => {\n        \/\/ Jika elemen masuk ke dalam viewport\n        if (entry.isIntersecting) {\n          entry.target.classList.add('kt-visible');\n          \/\/ Hentikan pengamatan agar animasi tidak berulang-ulang (lebih hemat performa)\n          observer.unobserve(entry.target);\n        }\n      });\n    }, {\n      \/\/ Animasi mulai saat 20% elemen terlihat di layar\n      threshold: 0.2 \n    });\n\n    \/\/ Mulai amati setiap item yang punya class kt-anim-item\n    animatedItems.forEach(item => {\n      observer.observe(item);\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8251649 e-con-full e-flex e-con e-parent\" data-id=\"8251649\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c0e3cf elementor-widget elementor-widget-shortcode\" data-id=\"2c0e3cf\" 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  \/* SECTION BACKGROUND KREM FULL WIDTH *\/\r\n  .kt-brutal-section {\r\n    background-color: #FFF8E1;\r\n    font-family: 'Nunito', sans-serif;\r\n    padding: 60px 0;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .kt-brutal-wrap {\r\n    max-width: 1100px;\r\n    margin: 0 auto;\r\n    padding: 0 20px;\r\n    position: relative;\r\n  }\r\n\r\n  \/* === PENGATURAN ANIMASI FADE UP (INTERSECTION OBSERVER) === *\/\r\n  .kt-anim-item {\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\r\n    will-change: opacity, transform;\r\n  }\r\n  .kt-anim-item.kt-visible {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n  \/* Delay bertahap agar muncul satu per satu *\/\r\n  .kt-brutal-head { transition-delay: 0.1s; }\r\n  .kt-brutal-toolbar { transition-delay: 0.3s; }\r\n  .kt-brutal-grid { transition-delay: 0.5s; }\r\n\r\n  \/* Kepala Halaman + Lakban + Garis Wavy *\/\r\n  .kt-brutal-head {\r\n    text-align: center;\r\n    margin-bottom: 50px;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n  .kt-title-box {\r\n    position: relative;\r\n    display: inline-block;\r\n    padding: 15px 40px 25px 40px;\r\n    background: transparent;\r\n  }\r\n  .kt-brutal-head h2 {\r\n    font-family: 'Bangers', cursive;\r\n    font-size: clamp(2rem, 5vw, 3rem);\r\n    color: #EF4444;\r\n    -webkit-text-stroke: 1.5px #1A1A1A;\r\n    paint-order: stroke fill;\r\n    margin: 0;\r\n    line-height: 1.1;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n  \r\n  .kt-wavy-underline {\r\n    position: absolute;\r\n    bottom: 5px;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 12px;\r\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\");\r\n    background-repeat: no-repeat;\r\n    background-size: 100% 100%;\r\n    z-index: 1;\r\n  }\r\n\r\n  .kt-tape {\r\n    position: absolute;\r\n    top: -15px;\r\n    left: 50%;\r\n    transform: translateX(-50%) rotate(-3deg);\r\n    width: 140px;\r\n    height: 35px;\r\n    background: rgba(251, 191, 36, 0.6);\r\n    border-left: 2px dashed rgba(255, 255, 255, 0.5);\r\n    border-right: 2px dashed rgba(255, 255, 255, 0.5);\r\n    box-shadow: 1px 2px 4px rgba(0,0,0,0.1);\r\n    z-index: 3;\r\n  }\r\n\r\n  .kt-brutal-head p {\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    color: #57534E;\r\n    margin: 20px 0 0 0;\r\n  }\r\n\r\n  .kt-float-ornament {\r\n    position: absolute;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    opacity: 0.8;\r\n  }\r\n  .kt-orn-1 { top: 40px; left: -10px; width: 70px; animation: ktFloat 4s ease-in-out infinite; }\r\n  .kt-orn-2 { bottom: 100px; right: -10px; width: 80px; animation: ktFloat 5s ease-in-out infinite reverse; }\r\n  \r\n  @keyframes ktFloat {\r\n    0%, 100% { transform: translateY(0) rotate(-5deg); }\r\n    50% { transform: translateY(-15px) rotate(5deg); }\r\n  }\r\n\r\n  .kt-brutal-toolbar {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 15px;\r\n    margin-bottom: 40px;\r\n    align-items: center;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n  .kt-search-input {\r\n    width: 100%;\r\n    max-width: 400px;\r\n    padding: 12px 20px;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    font-family: 'Nunito', sans-serif;\r\n    background: #FFFFFF;\r\n    border: 3px solid #1A1A1A;\r\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\r\n    box-shadow: 4px 4px 0 #1A1A1A;\r\n    outline: none;\r\n    transition: all 0.2s ease;\r\n  }\r\n  .kt-search-input:focus {\r\n    transform: translateY(-2px);\r\n    box-shadow: 6px 6px 0 #1A1A1A;\r\n  }\r\n  .kt-cat-filter {\r\n    display: flex;\r\n    gap: 10px;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n  }\r\n  .kt-cat-btn {\r\n    padding: 8px 16px;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    color: #1A1A1A;\r\n    background: #FFFFFF;\r\n    border: 2.5px solid #1A1A1A;\r\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\r\n    box-shadow: 3px 3px 0 #1A1A1A;\r\n    cursor: pointer;\r\n    text-transform: uppercase;\r\n    transition: all 0.15s ease;\r\n  }\r\n  .kt-cat-btn:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 5px 5px 0 #1A1A1A;\r\n  }\r\n  .kt-cat-btn.kt-active-cat {\r\n    background: #EF4444;\r\n    color: white;\r\n    transform: translateY(-2px);\r\n    box-shadow: 5px 5px 0 #1A1A1A;\r\n  }\r\n\r\n  .kt-brutal-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 30px;\r\n  }\r\n\r\n  .kt-brutal-card {\r\n    background: #FFFFFF;\r\n    border: 3.5px solid #1A1A1A;\r\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\r\n    box-shadow: 8px 8px 0 #1A1A1A;\r\n    overflow: hidden;\r\n    transition: all 0.2s ease;\r\n    display: flex;\r\n    flex-direction: column;\r\n    text-decoration: none;\r\n  }\r\n  .kt-brutal-card:hover {\r\n    transform: translateY(-5px) rotate(-1deg);\r\n    box-shadow: 12px 12px 0 #1A1A1A;\r\n  }\r\n\r\n  .kt-brutal-thumb {\r\n    position: relative;\r\n    aspect-ratio: 16\/10;\r\n    overflow: hidden;\r\n    border-bottom: 3.5px solid #1A1A1A;\r\n  }\r\n  .kt-brutal-thumb img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .kt-brutal-card:hover .kt-brutal-thumb img {\r\n    transform: scale(1.05);\r\n  }\r\n\r\n  .kt-brutal-badge {\r\n    position: absolute;\r\n    top: 12px;\r\n    left: 12px;\r\n    padding: 5px 12px;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    color: #1A1A1A;\r\n    background: #FBBF24;\r\n    border: 2px solid #1A1A1A;\r\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\r\n    box-shadow: 2px 2px 0 #1A1A1A;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .kt-brutal-content {\r\n    padding: 20px 25px;\r\n    flex-grow: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n  }\r\n  .kt-brutal-title {\r\n    font-family: 'Bangers', cursive;\r\n    font-size: 1.5rem;\r\n    color: #1A1A1A;\r\n    margin: 0 0 12px 0;\r\n    line-height: 1.1;\r\n  }\r\n  .kt-brutal-meta {\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    color: #57534E;\r\n    margin-bottom: 15px;\r\n  }\r\n  .kt-brutal-read {\r\n    display: inline-block;\r\n    text-align: center;\r\n    padding: 8px 16px;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    color: white;\r\n    background: #EF4444;\r\n    border: 2.5px solid #1A1A1A;\r\n    border-radius: 15px 255px 15px 225px \/ 225px 15px 255px 15px;\r\n    box-shadow: 3px 3px 0 #1A1A1A;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  \/* PAGINASI KUSTOM *\/\r\n  .kt-brutal-pagination {\r\n    margin-top: 50px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 10px;\r\n    flex-wrap: wrap;\r\n  }\r\n  .kt-page-btn {\r\n    min-width: 45px;\r\n    height: 45px;\r\n    padding: 0 15px;\r\n    font-family: 'Bangers', cursive;\r\n    font-size: 1.2rem;\r\n    color: #1A1A1A;\r\n    background: #FFFFFF;\r\n    border: 2.5px solid #1A1A1A;\r\n    border-radius: 15px 255px 15px 225px \/ 225px 15px 255px 15px;\r\n    box-shadow: 3px 3px 0 #1A1A1A;\r\n    cursor: pointer;\r\n    transition: all 0.15s ease;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  .kt-page-btn:hover:not(:disabled) {\r\n    transform: translateY(-3px);\r\n    box-shadow: 5px 5px 0 #1A1A1A;\r\n    background: #FBBF24;\r\n  }\r\n  .kt-page-btn.kt-active-page {\r\n    background: #EF4444;\r\n    color: white;\r\n    transform: translateY(-3px);\r\n    box-shadow: 5px 5px 0 #1A1A1A;\r\n  }\r\n  .kt-page-btn:disabled {\r\n    opacity: 0.4;\r\n    cursor: not-allowed;\r\n  }\r\n  .kt-page-dots {\r\n    color: #1A1A1A;\r\n    font-weight: 800;\r\n    font-size: 1.2rem;\r\n    padding: 0 5px;\r\n  }\r\n\r\n  .kt-no-posts {\r\n    text-align: center;\r\n    font-size: 1.5rem;\r\n    font-family: 'Bangers', cursive;\r\n    padding: 50px;\r\n    color: #1A1A1A;\r\n    background: #FFFFFF;\r\n    border: 3px solid #1A1A1A;\r\n    border-radius: 20px;\r\n    box-shadow: 5px 5px 0 #1A1A1A;\r\n    grid-column: 1 \/ -1;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .kt-brutal-grid {\r\n      display: flex;\r\n      overflow-x: auto;\r\n      gap: 20px;\r\n      padding: 10px 0 30px 0;\r\n      scroll-snap-type: x mandatory;\r\n      -webkit-overflow-scrolling: touch;\r\n    }\r\n    .kt-brutal-grid::-webkit-scrollbar { display: none; }\r\n    .kt-brutal-grid { -ms-overflow-style: none; scrollbar-width: none; }\r\n    \r\n    .kt-brutal-card {\r\n      flex: 0 0 85%;\r\n      scroll-snap-align: center;\r\n    }\r\n    .kt-brutal-card:hover {\r\n      transform: none;\r\n    }\r\n    .kt-float-ornament { display: none; }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .kt-anim-item {\r\n      opacity: 1 !important;\r\n      transform: none !important;\r\n      transition: none !important;\r\n    }\r\n    .kt-float-ornament, .kt-brutal-card:hover {\r\n      animation: none !important;\r\n      transform: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"kt-brutal-section\">\r\n  <div class=\"kt-brutal-wrap\">\r\n    \r\n    <svg class=\"kt-float-ornament kt-orn-1\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\r\n      <path d=\"M50 0 L60 40 L100 50 L60 60 L50 100 L40 60 L0 50 L40 40 Z\" fill=\"#FBBF24\" stroke=\"#1A1A1A\" stroke-width=\"3\"\/>\r\n    <\/svg>\r\n    <svg class=\"kt-float-ornament kt-orn-2\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\r\n      <path d=\"M20 20 H80 V60 H50 L30 80 V60 H20 Z\" fill=\"#EF4444\" stroke=\"#1A1A1A\" stroke-width=\"3\"\/>\r\n    <\/svg>\r\n\r\n    <div class=\"kt-brutal-head kt-anim-item\">\r\n      <div class=\"kt-title-box\">\r\n        <div class=\"kt-tape\"><\/div>\r\n        <h2>RAK MAJALAH CERITA<\/h2>\r\n        <div class=\"kt-wavy-underline\"><\/div>\r\n      <\/div>\r\n      <p>Pilih cerita favoritmu! Geser ke samping di HP ya \ud83d\udcd6<\/p>\r\n    <\/div>\r\n\r\n    <!-- TOOLBAR SEARCH & FILTER (PAKAI ID UNIK) -->\r\n    <div class=\"kt-brutal-toolbar kt-anim-item\">\r\n      <input type=\"text\" id=\"ktSearchInput_kt_1401\" class=\"kt-search-input\" placeholder=\"Cari judul cerita...\">\r\n      <div class=\"kt-cat-filter\" id=\"ktCatFilter_kt_1401\">\r\n        <button class=\"kt-cat-btn kt-active-cat\" data-cat=\"all\">Semua<\/button>\r\n        <button class=\"kt-cat-btn\" data-cat=\"cerita-malam\">Cerita Malam<\/button><button class=\"kt-cat-btn\" data-cat=\"fabel\">Fabel<\/button><button class=\"kt-cat-btn\" data-cat=\"komedi\">Komedi<\/button><button class=\"kt-cat-btn\" data-cat=\"lomba\">Lomba<\/button><button class=\"kt-cat-btn\" data-cat=\"petualangan\">Petualangan<\/button><button class=\"kt-cat-btn\" data-cat=\"sci-fi\">SCI - FI<\/button>      <\/div>\r\n    <\/div>\r\n\r\n    <!-- GRID KARTU (PAKAI ID UNIK) -->\r\n    <div class=\"kt-brutal-grid kt-anim-item\" id=\"ktGrid_kt_1401\">\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/21\/kakek-dano-dan-buku-cahaya-senja\/\" class=\"kt-brutal-card\" data-title=\"Kakek Dano dan Buku Cahaya Senja\" data-cat-slug=\"cerita-malam lomba\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/catatan-retro-768x434.jpeg\" alt=\"Kakek Dano dan Buku Cahaya Senja\">\r\n            <span class=\"kt-brutal-badge\">Cerita Malam<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">Kakek Dano dan Buku Cahaya Senja<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f ucil | \ud83d\udcc5 21 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/21\/kereta-senja-dan-lima-sahabat-penjaga-jembatan\/\" class=\"kt-brutal-card\" data-title=\"Kereta Senja dan Lima Sahabat Penjaga Jembatan\" data-cat-slug=\"cerita-malam\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/catatan-perjalanan-768x433.jpeg\" alt=\"Kereta Senja dan Lima Sahabat Penjaga Jembatan\">\r\n            <span class=\"kt-brutal-badge\">Cerita Malam<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">Kereta Senja dan Lima Sahabat Penjaga Jembatan<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f ucil | \ud83d\udcc5 21 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\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-brutal-card\" data-title=\"Raka dan Cahaya di Jalan Pulang\" data-cat-slug=\"cerita-malam\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/main-sepedah-768x430.jpeg\" alt=\"Raka dan Cahaya di Jalan Pulang\">\r\n            <span class=\"kt-brutal-badge\">Cerita Malam<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">Raka dan Cahaya di Jalan Pulang<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-29\/\" class=\"kt-brutal-card\" data-title=\"Kampung Ceria dan Penunggang Egrang\" data-cat-slug=\"petualangan\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/jadul-1-768x430.jpeg\" alt=\"Kampung Ceria dan Penunggang Egrang\">\r\n            <span class=\"kt-brutal-badge\">Petualangan<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">Kampung Ceria dan Penunggang Egrang<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-27\/\" class=\"kt-brutal-card\" data-title=\"TES 27\" data-cat-slug=\"sci-fi uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/jadul-1-768x430.jpeg\" alt=\"TES 27\">\r\n            <span class=\"kt-brutal-badge\">SCI - FI<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">TES 27<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-26\/\" class=\"kt-brutal-card\" data-title=\"TES 26\" data-cat-slug=\"sci-fi uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/catatan-perjalanan-768x433.jpeg\" alt=\"TES 26\">\r\n            <span class=\"kt-brutal-badge\">SCI - FI<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">TES 26<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-25\/\" class=\"kt-brutal-card\" data-title=\"TES 25\" data-cat-slug=\"sci-fi uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/400x250\/FFFFFF\/1A1A1A?text=CeritaBoom\" alt=\"TES 25\">\r\n            <span class=\"kt-brutal-badge\">SCI - FI<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">TES 25<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-24\/\" class=\"kt-brutal-card\" data-title=\"TES 24\" data-cat-slug=\"sci-fi uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/400x250\/FFFFFF\/1A1A1A?text=CeritaBoom\" alt=\"TES 24\">\r\n            <span class=\"kt-brutal-badge\">SCI - FI<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">TES 24<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-23\/\" class=\"kt-brutal-card\" data-title=\"TES 23\" data-cat-slug=\"fabel petualangan\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/400x250\/FFFFFF\/1A1A1A?text=CeritaBoom\" alt=\"TES 23\">\r\n            <span class=\"kt-brutal-badge\">Fabel<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">TES 23<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-22\/\" class=\"kt-brutal-card\" data-title=\"TES 22\" data-cat-slug=\"uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/400x250\/FFFFFF\/1A1A1A?text=CeritaBoom\" alt=\"TES 22\">\r\n            <span class=\"kt-brutal-badge\">Uncategorized<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">TES 22<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-20-2\/\" class=\"kt-brutal-card\" data-title=\"TES 21\" data-cat-slug=\"uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/400x250\/FFFFFF\/1A1A1A?text=CeritaBoom\" alt=\"TES 21\">\r\n            <span class=\"kt-brutal-badge\">Uncategorized<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">TES 21<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-20\/\" class=\"kt-brutal-card\" data-title=\"TES 20\" data-cat-slug=\"uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/400x250\/FFFFFF\/1A1A1A?text=CeritaBoom\" alt=\"TES 20\">\r\n            <span class=\"kt-brutal-badge\">Uncategorized<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">TES 20<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-19\/\" class=\"kt-brutal-card\" data-title=\"TES 19\" data-cat-slug=\"uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/400x250\/FFFFFF\/1A1A1A?text=CeritaBoom\" alt=\"TES 19\">\r\n            <span class=\"kt-brutal-badge\">Uncategorized<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">TES 19<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-18\/\" class=\"kt-brutal-card\" data-title=\"TES 18\" data-cat-slug=\"uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/400x250\/FFFFFF\/1A1A1A?text=CeritaBoom\" alt=\"TES 18\">\r\n            <span class=\"kt-brutal-badge\">Uncategorized<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">TES 18<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-4\/\" class=\"kt-brutal-card\" data-title=\"tes 4\" data-cat-slug=\"uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/400x250\/FFFFFF\/1A1A1A?text=CeritaBoom\" alt=\"tes 4\">\r\n            <span class=\"kt-brutal-badge\">Uncategorized<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">tes 4<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-3\/\" class=\"kt-brutal-card\" data-title=\"tes 3\" data-cat-slug=\"uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/400x250\/FFFFFF\/1A1A1A?text=CeritaBoom\" alt=\"tes 3\">\r\n            <span class=\"kt-brutal-badge\">Uncategorized<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">tes 3<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-2\/\" class=\"kt-brutal-card\" data-title=\"tes 2\" data-cat-slug=\"uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/400x250\/FFFFFF\/1A1A1A?text=CeritaBoom\" alt=\"tes 2\">\r\n            <span class=\"kt-brutal-badge\">Uncategorized<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">tes 2<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-1\/\" class=\"kt-brutal-card\" data-title=\"tes 1\" data-cat-slug=\"uncategorized\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/400x250\/FFFFFF\/1A1A1A?text=CeritaBoom\" alt=\"tes 1\">\r\n            <span class=\"kt-brutal-badge\">Uncategorized<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">tes 1<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 18 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/17\/robot-kecil-dari-mars\/\" class=\"kt-brutal-card\" data-title=\"Robot Kecil dari Mars\" data-cat-slug=\"lomba sci-fi\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/robot-kecil-mars-768x432.jpg\" alt=\"Robot Kecil dari Mars\">\r\n            <span class=\"kt-brutal-badge\">Lomba<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">Robot Kecil dari Mars<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 17 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/17\/kucing-oyen-jadi-chef\/\" class=\"kt-brutal-card\" data-title=\"Kucing Oyen Jadi Chef\" data-cat-slug=\"komedi lomba\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/Kucing-Oyen-Jadi-Chef-45kb-768x429.jpg\" alt=\"Kucing Oyen Jadi Chef\">\r\n            <span class=\"kt-brutal-badge\">Komedi<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">Kucing Oyen Jadi Chef<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 17 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/17\/bintang-yang-bisik-mimpi\/\" class=\"kt-brutal-card\" data-title=\"Bintang yang Bisik Mimpi\" data-cat-slug=\"cerita-malam lomba\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/Bintang-yang-Bisik-Mimpi-45kb-768x429.jpg\" alt=\"Bintang yang Bisik Mimpi\">\r\n            <span class=\"kt-brutal-badge\">Cerita Malam<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">Bintang yang Bisik Mimpi<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 17 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n              <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/17\/petualangan-ke-naga-island\/\" class=\"kt-brutal-card\" data-title=\"Petualangan ke Naga Island\" data-cat-slug=\"lomba petualangan\">\r\n          <div class=\"kt-brutal-thumb\">\r\n            <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/Petualangan-ke-Naga-Island-45kb-768x429.jpg\" alt=\"Petualangan ke Naga Island\">\r\n            <span class=\"kt-brutal-badge\">Lomba<\/span>\r\n          <\/div>\r\n          <div class=\"kt-brutal-content\">\r\n            <div>\r\n              <h3 class=\"kt-brutal-title\">Petualangan ke Naga Island<\/h3>\r\n              <div class=\"kt-brutal-meta\">\u270d\ufe0f Penjelajah Senja | \ud83d\udcc5 17 Aug 2026<\/div>\r\n            <\/div>\r\n            <span class=\"kt-brutal-read\">Baca Cerita \ud83d\udcd6<\/span>\r\n          <\/div>\r\n        <\/a>\r\n          <\/div>\r\n\r\n    <!-- PAGINASI KUSTOM (PAKAI ID UNIK) -->\r\n    <div class=\"kt-brutal-pagination\" id=\"ktPagination_kt_1401\">\r\n      <button class=\"kt-page-btn kt-prev-btn\" aria-label=\"Halaman Sebelumnya\">\u2039<\/button>\r\n      <div class=\"kt-page-numbers\" style=\"display: flex; gap: 10px; align-items: center;\"><\/div>\r\n      <button class=\"kt-page-btn kt-next-btn\" aria-label=\"Halaman Selanjutnya\">\u203a<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- SCRIPT DIBUNGKUS IIFE BIAR GAK BENTROK SAMA SCRIPT LAIN -->\r\n<script>\r\n(function() {\r\n  const uniqueId = 'kt_1401';\r\n  \r\n  \/\/ === INISIALISASI VARIABEL LOKAL ===\r\n  const grid = document.getElementById('ktGrid_' + uniqueId);\r\n  if (!grid) return; \/\/ Kalau grid gak ada, hentikan script\r\n\r\n  const allCards = Array.from(grid.querySelectorAll('.kt-brutal-card'));\r\n  const searchInput = document.getElementById('ktSearchInput_' + uniqueId);\r\n  const filterButtons = document.querySelectorAll('#ktCatFilter_' + uniqueId + ' .kt-cat-btn');\r\n  const paginationDiv = document.getElementById('ktPagination_' + uniqueId);\r\n  const pageNumbersDiv = paginationDiv.querySelector('.kt-page-numbers');\r\n  const prevBtn = paginationDiv.querySelector('.kt-prev-btn');\r\n  const nextBtn = paginationDiv.querySelector('.kt-next-btn');\r\n  \r\n  let currentPage = 1;\r\n  const itemsPerPage = 6;\r\n  let filteredCards = [...allCards];\r\n\r\n  \/\/ === FUNGSI FILTER & SEARCH ===\r\n  function applyFilters() {\r\n      const searchTerm = searchInput.value.toLowerCase();\r\n      const activeCatBtn = document.querySelector('#ktCatFilter_' + uniqueId + ' .kt-active-cat');\r\n      const activeCat = activeCatBtn ? activeCatBtn.dataset.cat : 'all';\r\n\r\n      filteredCards = allCards.filter(card => {\r\n          const title = card.dataset.title.toLowerCase();\r\n          const cardCatSlugs = card.dataset.catSlug ? card.dataset.catSlug.split(' ') : [];\r\n          \r\n          const matchSearch = title.includes(searchTerm);\r\n          \/\/ CEK APAKAH KATEGORI YG DIPILIH ADA DI DALAM ARRAY SLUG POST INI\r\n          const matchCat = (activeCat === 'all' || cardCatSlugs.includes(activeCat));\r\n          \r\n          return matchSearch && matchCat;\r\n      });\r\n\r\n      currentPage = 1;\r\n      renderPage();\r\n  }\r\n\r\n  \/\/ === FUNGSI RENDER HALAMAN ===\r\n  function renderPage() {\r\n      allCards.forEach(c => c.style.display = 'none');\r\n      \r\n      const totalPages = Math.ceil(filteredCards.length \/ itemsPerPage);\r\n      if (currentPage > totalPages && totalPages > 0) currentPage = totalPages;\r\n      if (currentPage < 1) currentPage = 1;\r\n\r\n      const start = (currentPage - 1) * itemsPerPage;\r\n      const end = start + itemsPerPage;\r\n      const pageCards = filteredCards.slice(start, end);\r\n\r\n      pageCards.forEach(card => card.style.display = 'flex');\r\n\r\n      updatePaginationUI(totalPages);\r\n  }\r\n\r\n  \/\/ === FUNGSI UI PAGINASI ===\r\n  function updatePaginationUI(totalPages) {\r\n      pageNumbersDiv.innerHTML = '';\r\n      \r\n      if (totalPages <= 1) {\r\n          paginationDiv.style.display = 'none';\r\n          return;\r\n      } else {\r\n          paginationDiv.style.display = 'flex';\r\n      }\r\n\r\n      let pagesToShow = [];\r\n      if (totalPages <= 3) {\r\n          for (let i = 1; i <= totalPages; i++) pagesToShow.push(i);\r\n      } else {\r\n          if (currentPage <= 2) {\r\n              pagesToShow = [1, 2, 3, '...'];\r\n          } else if (currentPage >= totalPages - 1) {\r\n              pagesToShow = ['...', totalPages - 2, totalPages - 1, totalPages];\r\n          } else {\r\n              pagesToShow = ['...', currentPage - 1, currentPage, currentPage + 1, '...'];\r\n          }\r\n      }\r\n\r\n      pagesToShow.forEach(page => {\r\n          if (page === '...') {\r\n              const span = document.createElement('span');\r\n              span.innerText = '...';\r\n              span.classList.add('kt-page-dots');\r\n              pageNumbersDiv.appendChild(span);\r\n          } else {\r\n              const btn = document.createElement('button');\r\n              btn.innerText = page;\r\n              btn.classList.add('kt-page-btn');\r\n              if (page === currentPage) btn.classList.add('kt-active-page');\r\n\r\n              btn.addEventListener('click', () => {\r\n                  currentPage = page;\r\n                  renderPage();\r\n                  grid.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n              });\r\n              pageNumbersDiv.appendChild(btn);\r\n          }\r\n      });\r\n\r\n      prevBtn.disabled = currentPage === 1;\r\n      nextBtn.disabled = currentPage === totalPages;\r\n  }\r\n\r\n  \/\/ === EVENT LISTENERS ===\r\n  searchInput.addEventListener('input', applyFilters);\r\n\r\n  filterButtons.forEach(btn => {\r\n      btn.addEventListener('click', function() {\r\n          filterButtons.forEach(b => b.classList.remove('kt-active-cat'));\r\n          this.classList.add('kt-active-cat');\r\n          applyFilters();\r\n      });\r\n  });\r\n\r\n  prevBtn.addEventListener('click', () => {\r\n      if (currentPage > 1) {\r\n          currentPage--;\r\n          renderPage();\r\n          grid.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n      }\r\n  });\r\n\r\n  nextBtn.addEventListener('click', () => {\r\n      const totalPages = Math.ceil(filteredCards.length \/ itemsPerPage);\r\n      if (currentPage < totalPages) {\r\n          currentPage++;\r\n          renderPage();\r\n          grid.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n      }\r\n  });\r\n\r\n  \/\/ Jalankan filter awal\r\n  applyFilters();\r\n\r\n  \/\/ === INTERSECTION OBSERVER UNTUK ANIMASI FADE UP ===\r\n  const animatedItems = document.querySelectorAll('.kt-anim-item');\r\n  const observer = new IntersectionObserver((entries, obs) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        entry.target.classList.add('kt-visible');\r\n        obs.unobserve(entry.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.15 });\r\n\r\n  animatedItems.forEach(item => {\r\n    observer.observe(item);\r\n  });\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-73e1b43 e-con-full e-flex e-con e-parent\" data-id=\"73e1b43\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a18856 elementor-widget elementor-widget-html\" data-id=\"0a18856\" 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&display=swap');\n\n    \/* Variabel CSS Biar Gampang Diubah *\/\n    :root {\n        --comic-border: 8px solid #000;\n        --comic-bg: #ffeb3b;\n    }\n\n    \/* Wrapper Utama Section Komik *\/\n    .comic-ide1-wrapper {\n        position: relative;\n        height: 80vh; \n        min-height: 500px;\n        background-color: var(--comic-bg); \n        display: flex;\n        justify-content: center;\n        align-items: center;\n        overflow: hidden;\n        border-top: var(--comic-border);\n        border-bottom: var(--comic-border);\n        font-family: 'Bangers', cursive;\n    }\n\n    \/* Efek Titik-titik Halftone di Background *\/\n    .comic-ide1-wrapper::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background-image: radial-gradient(#000 15%, transparent 16%), radial-gradient(#000 15%, transparent 16%);\n        background-size: 20px 20px;\n        background-position: 0 0, 10px 10px;\n        opacity: 0.1;\n        pointer-events: none; \n    }\n\n    \/* Teks THE END *\/\n    .the-end-text-ide1 {\n        font-size: 15vw; \n        color: #fff;\n        -webkit-text-stroke: 6px #000; \n        text-shadow: 10px 10px 0 rgba(0,0,0,0.2);\n        transform: rotate(-5deg) scale(0);\n        transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); \n        z-index: 1;\n        user-select: none;\n        pointer-events: none;\n        margin-bottom: 80px; \/* NAIKIN TEKS THE END DI DESKTOP *\/\n    }\n\n    .comic-ide1-wrapper.active .the-end-text-ide1 {\n        transform: rotate(-5deg) scale(1);\n    }\n\n    \/* Karakter Mascot Pengintip (Button) *\/\n    .mascot-wrapper-ide1 {\n        position: absolute;\n        bottom: -100px; \n        left: 50%;\n        transform: translateX(-50%);\n        z-index: 2;\n        cursor: pointer;\n        transition: bottom 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        background: transparent !important; \n        border: none !important; \n        padding: 0 !important;\n        color: #000 !important; \/* OVERRIDE WARNA MERAH ELEMENTOR *\/\n        font-family: 'Bangers', cursive;\n    }\n\n    \/* KILL SWITCH WARNA MERAH ELEMENTOR PAS HOVER *\/\n    .mascot-wrapper-ide1:hover,\n    .mascot-wrapper-ide1:focus,\n    .mascot-wrapper-ide1:active {\n        background: transparent !important;\n        color: #000 !important;\n        border: none !important;\n        box-shadow: none !important;\n    }\n\n    .mascot-wrapper-ide1.is-up {\n        bottom: -40px; \n    }\n\n    \/* Speech Bubble *\/\n    .speech-bubble-ide1 {\n        background: #fff;\n        border: 4px solid #000;\n        border-radius: 20px;\n        padding: 10px 20px;\n        font-family: 'Bangers', cursive;\n        font-size: 1.8rem;\n        position: absolute;\n        bottom: 170px; \/* NAIKIN BUBBLE BIAR GAK KEPOTONG KEPALA HERO *\/\n        white-space: nowrap;\n        opacity: 0;\n        transform: scale(0.5) translateY(20px);\n        transition: all 0.3s ease;\n        box-shadow: 6px 6px 0 rgba(0,0,0,0.3);\n        color: #000; \/* PASTIKAN TEKS BUBBLE ITEM *\/\n    }\n\n    .speech-bubble-ide1::after {\n        content: '';\n        position: absolute;\n        bottom: -24px;\n        left: 50%;\n        transform: translateX(-50%);\n        border-width: 24px 20px 0;\n        border-style: solid;\n        border-color: #000 transparent;\n        display: block;\n        width: 0;\n    }\n    .speech-bubble-ide1::before {\n        content: '';\n        position: absolute;\n        bottom: -18px;\n        left: 50%;\n        transform: translateX(-50%);\n        border-width: 18px 15px 0;\n        border-style: solid;\n        border-color: #fff transparent;\n        display: block;\n        width: 0;\n        z-index: 1;\n    }\n\n    .mascot-wrapper-ide1.is-up .speech-bubble-ide1 {\n        opacity: 1;\n        transform: scale(1) translateY(0);\n    }\n\n    .mascot-icon-ide1 {\n        font-size: 8rem;\n        filter: drop-shadow(5px 5px 0 rgba(0,0,0,0.3));\n        transition: transform 0.2s;\n    }\n    .mascot-wrapper-ide1:hover .mascot-icon-ide1,\n    .mascot-wrapper-ide1:focus-visible .mascot-icon-ide1 {\n        transform: scale(1.1);\n    }\n    .mascot-wrapper-ide1:focus-visible {\n        outline: 3px dashed #000;\n        outline-offset: 8px;\n    }\n\n    \/* Efek kilat pas di klik *\/\n    .flash-effect-ide1 {\n        position: fixed;\n        inset: 0;\n        background: #fff;\n        z-index: 99999; \n        opacity: 0;\n        pointer-events: none;\n    }\n    .flash-effect-ide1.flash {\n        animation: flashAnimIde1 0.3s ease-out;\n    }\n    @keyframes flashAnimIde1 {\n        0% { opacity: 0; }\n        50% { opacity: 1; }\n        100% { opacity: 0; }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .the-end-text-ide1,\n        .mascot-wrapper-ide1,\n        .speech-bubble-ide1,\n        .flash-effect-ide1.flash {\n            transition: none !important;\n            animation: none !important;\n        }\n    }\n\n    \/* RESPONSIVE HP - FIX VERTIKAL PANJANG & BUBBLE KEpotong *\/\n    @media (max-width: 768px) {\n        .comic-ide1-wrapper {\n            height: 70vh; \n            min-height: 450px; \/* Naikin dikit biar muat sama hero 6rem *\/\n        }\n        .the-end-text-ide1 {\n            font-size: 22vw;\n            -webkit-text-stroke: 4px #000;\n            margin-bottom: 120px; \/* NAIKIN TEKS THE END DI HP LAGI *\/\n        }\n        .mascot-icon-ide1 {\n            font-size: 6rem; \/* KEMBALIKAN UKURAN HERO DI HP JADI 6REM *\/\n        }\n        .speech-bubble-ide1 {\n            font-size: 1.2rem;\n            bottom: 140px; \/* NAIKIN BUBBLE DI HP LAGI *\/\n            white-space: normal;\n            width: 200px;\n            text-align: center;\n        }\n    }\n<\/style>\n\n<div class=\"comic-ide1-wrapper\" id=\"comicIde1Wrapper\">\n    <div class=\"the-end-text-ide1\" aria-hidden=\"true\">THE END?<\/div>\n    \n    <button class=\"mascot-wrapper-ide1\" id=\"mascotIde1\" aria-label=\"Klik mascot untuk kembali ke atas\">\n        <div class=\"speech-bubble-ide1\" id=\"bubbleTextIde1\">Klik aq dong...<\/div>\n        <div class=\"mascot-icon-ide1\" aria-hidden=\"true\">\ud83e\uddb8\u200d\u2642\ufe0f<\/div>\n    <\/button>\n<\/div>\n\n<div class=\"flash-effect-ide1\" id=\"flashEffectIde1\" aria-hidden=\"true\"><\/div>\n\n<script>\n    const footerIde1 = document.getElementById('comicIde1Wrapper');\n    const mascotWrapper = document.getElementById('mascotIde1');\n    const bubbleText = document.getElementById('bubbleTextIde1');\n    const flashIde1 = document.getElementById('flashEffectIde1');\n\n    const messages = [\n        \"Klik aq dong...\",\n        \"Ayo sob klik aq\",\n        \"......\ud83e\udd7a\" \n    ];\n\n    let currentState = 0;\n    let isAnimating = false;\n    let loopTimeout;\n    \n    const TIMING = {\n        showDuration: 3000,\n        hideDuration: 3000,\n        initialDelay: 3000\n    };\n\n    function runAnimationLoop() {\n        if (!isAnimating) return;\n\n        bubbleText.textContent = messages[currentState];\n        mascotWrapper.classList.add('is-up');\n\n        loopTimeout = setTimeout(() => {\n            mascotWrapper.classList.remove('is-up');\n            \n            loopTimeout = setTimeout(() => {\n                currentState = (currentState + 1) % messages.length;\n                runAnimationLoop();\n            }, TIMING.hideDuration);\n        }, TIMING.showDuration);\n    }\n\n    const observerIde1 = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                footerIde1.classList.add('active');\n                if (!isAnimating) {\n                    isAnimating = true;\n                    currentState = 0;\n                    loopTimeout = setTimeout(runAnimationLoop, TIMING.initialDelay); \n                }\n            } else {\n                footerIde1.classList.remove('active');\n                mascotWrapper.classList.remove('is-up');\n                isAnimating = false;\n                clearTimeout(loopTimeout);\n            }\n        });\n    }, { threshold: 0.3 });\n\n    observerIde1.observe(footerIde1);\n\n    function handleMascotClick() {\n        isAnimating = false;\n        clearTimeout(loopTimeout);\n        mascotWrapper.classList.remove('is-up');\n        \n        flashIde1.classList.add('flash'); \n        setTimeout(() => {\n            flashIde1.classList.remove('flash');\n        }, 300);\n\n        setTimeout(() => {\n            window.scrollTo({ top: 0, behavior: 'smooth' });\n        }, 100);\n\n        currentState = 0;\n    }\n\n    mascotWrapper.addEventListener('click', handleMascotClick);\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>\ud83d\udcda PERPUSTAKAAN AJAIB \u2728 RAK MAJALAH CERITA \u2b50 \u2728 \u2b50 \u2728 \ud83d\udc09 Baca Aku! Jelajah semua cerita seru di sini! Geser kartu di bawah ini ya \ud83d\udc47 THE END? Klik aq dong&#8230; \ud83e\uddb8\u200d\u2642\ufe0f<\/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-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/13","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=13"}],"version-history":[{"count":61,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":406,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/13\/revisions\/406"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}