{"id":17,"date":"2026-08-17T10:35:05","date_gmt":"2026-08-17T10:35:05","guid":{"rendered":"https:\/\/lab.rwb.my.id\/story\/?page_id=17"},"modified":"2026-08-21T17:16:32","modified_gmt":"2026-08-21T17:16:32","slug":"karakter","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/story\/karakter\/","title":{"rendered":"Karakter"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"17\" class=\"elementor elementor-17\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5edc683 e-con-full e-flex e-con e-parent\" data-id=\"5edc683\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-94f0aeb elementor-widget elementor-widget-shortcode\" data-id=\"94f0aeb\" 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 WRITER HERO -->\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-writer-hero {\r\n    position: relative;\r\n    padding: 100px 20px 80px;\r\n    background: #FFF8E1;\r\n    font-family: 'Nunito', sans-serif;\r\n    overflow: hidden;\r\n    min-height: 760px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n  }\r\n\r\n  .kt-writer-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 {\r\n    0%, 100% { transform: translateY(0) rotate(0deg); }\r\n    25% { transform: translateY(-6px) rotate(-2deg); }\r\n    75% { transform: translateY(-3px) rotate(1deg); }\r\n  }\r\n  @keyframes ktFloat {\r\n    0%, 100% { transform: translateY(0); }\r\n    50% { transform: translateY(-12px); }\r\n  }\r\n  @keyframes ktFloat2 {\r\n    0%, 100% { transform: translateY(0) rotate(-2deg); }\r\n    50% { transform: translateY(-8px) rotate(1deg); }\r\n  }\r\n  @keyframes ktWiggle {\r\n    0%, 100% { transform: rotate(0deg); }\r\n    25% { transform: rotate(-3deg); }\r\n    75% { transform: rotate(3deg); }\r\n  }\r\n  @keyframes ktFadeUp {\r\n    from { opacity: 0; transform: translateY(30px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n  @keyframes ktZoomIn {\r\n    from { opacity: 0; transform: scale(0.8) rotate(-5deg); }\r\n    to { opacity: 1; transform: scale(1) rotate(0deg); }\r\n  }\r\n\r\n  .kt-reveal { opacity: 0; }\r\n  .kt-reveal.kt-visible { animation: ktFadeUp 0.7s ease-out both; }\r\n  .kt-reveal-1.kt-visible { animation-delay: 0.1s; }\r\n  .kt-reveal-2.kt-visible { animation-delay: 0.2s; }\r\n  .kt-reveal-3.kt-visible { animation-delay: 0.3s; }\r\n  .kt-reveal-4.kt-visible { animation-delay: 0.4s; }\r\n  .kt-reveal-5.kt-visible { animation-delay: 0.5s; }\r\n  .kt-reveal-zoom.kt-visible { animation: ktZoomIn 0.8s ease-out 0.4s both; }\r\n\r\n  .kt-writer-bounce { animation: ktBounce 2.5s ease-in-out infinite; }\r\n  .kt-writer-float { animation: ktFloat 3.5s ease-in-out infinite; }\r\n  .kt-writer-float2 { animation: ktFloat2 4s ease-in-out 1s infinite; }\r\n  .kt-writer-wiggle { animation: ktWiggle 2s ease-in-out infinite; }\r\n\r\n  \/* --- Layout --- *\/\r\n  .kt-writer-inner {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 60px;\r\n    align-items: center;\r\n    position: relative;\r\n    z-index: 5;\r\n  }\r\n\r\n  .kt-writer-content { max-width: 620px; }\r\n\r\n  .kt-writer-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 10px 20px;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #1A1A1A;\r\n    background: #FBBF24;\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    margin-bottom: 24px;\r\n  }\r\n\r\n  .kt-writer-title {\r\n    font-family: 'Bangers', cursive;\r\n    font-size: clamp(40px, 6.5vw, 68px);\r\n    color: #1A1A1A;\r\n    letter-spacing: 0.03em;\r\n    line-height: 1.05;\r\n    margin-bottom: 20px;\r\n  }\r\n  .kt-writer-title em {\r\n    font-style: normal;\r\n    color: #EF4444;\r\n    -webkit-text-stroke: 1.5px #1A1A1A;\r\n    paint-order: stroke fill;\r\n  }\r\n\r\n  .kt-writer-desc {\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    color: #57534E;\r\n    line-height: 1.7;\r\n    margin-bottom: 35px;\r\n    max-width: 500px;\r\n  }\r\n\r\n  .kt-writer-mini-info {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n  }\r\n  .kt-writer-avatar-group {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  .kt-writer-avatar {\r\n    width: 48px;\r\n    height: 48px;\r\n    object-fit: cover;\r\n    margin-left: -12px;\r\n    border: 3px solid #FFF8E1;\r\n    border-radius: 50%;\r\n    background: #FBBF24;\r\n    box-shadow: 2px 2px 0 #1A1A1A;\r\n    transition: transform 0.2s ease;\r\n  }\r\n  .kt-writer-avatar:first-child { margin-left: 0; }\r\n  .kt-writer-avatar:hover {\r\n    transform: translateY(-5px) scale(1.1);\r\n    z-index: 10;\r\n  }\r\n\r\n  .kt-writer-mini-info strong {\r\n    display: block;\r\n    font-family: 'Bangers', cursive;\r\n    font-size: 20px;\r\n    color: #1A1A1A;\r\n    letter-spacing: 0.02em;\r\n  }\r\n  .kt-writer-mini-info small {\r\n    display: block;\r\n    margin-top: 2px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    color: #A8A29E;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.04em;\r\n  }\r\n\r\n  .kt-writer-visual {\r\n    position: relative;\r\n    min-height: 500px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .kt-writer-book {\r\n    position: relative;\r\n    z-index: 4;\r\n    display: flex;\r\n    width: 100%;\r\n    max-width: 560px;\r\n    height: 420px;\r\n    background: white;\r\n    border: 3.5px solid #1A1A1A;\r\n    border-radius: 20px;\r\n    box-shadow: 8px 8px 0 #1A1A1A;\r\n    overflow: hidden;\r\n  }\r\n  \r\n  .kt-writer-book-page {\r\n    position: relative;\r\n    flex: 1;\r\n    padding: 45px 35px;\r\n    overflow: hidden;\r\n  }\r\n  .kt-writer-book-left {\r\n    background: #FFF8E1;\r\n    border-right: 3.5px solid #1A1A1A;\r\n  }\r\n  .kt-writer-book-right {\r\n    background: #DBEAFE; \r\n  }\r\n\r\n  .kt-writer-book-label {\r\n    display: inline-block;\r\n    padding: 6px 14px;\r\n    background: #FBBF24;\r\n    color: #1A1A1A;\r\n    border: 2px solid #1A1A1A;\r\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    box-shadow: 2px 2px 0 #1A1A1A;\r\n  }\r\n  .kt-writer-book-left h2 {\r\n    margin: 25px 0 15px;\r\n    font-family: 'Bangers', cursive;\r\n    font-size: clamp(28px, 3.5vw, 40px);\r\n    line-height: 1.1;\r\n    color: #1A1A1A;\r\n  }\r\n  .kt-writer-book-left p {\r\n    color: #57534E;\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    line-height: 1.6;\r\n  }\r\n  .kt-writer-book-line {\r\n    width: 80px;\r\n    height: 4px;\r\n    margin: 25px 0 12px;\r\n    border-radius: 5px;\r\n    background: #EF4444;\r\n    border: 1.5px solid #1A1A1A;\r\n  }\r\n  .kt-writer-book-left small {\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    color: #1A1A1A;\r\n  }\r\n\r\n  .kt-writer-character {\r\n    position: absolute;\r\n    z-index: 3;\r\n  }\r\n  .kt-writer-dragon {\r\n    left: 25%;\r\n    top: 25%;\r\n    font-size: 120px;\r\n    animation: ktFloat 3s ease-in-out infinite;\r\n  }\r\n  .kt-writer-bunny {\r\n    right: 15%;\r\n    bottom: 25%;\r\n    font-size: 75px;\r\n    animation: ktFloat 4s 1s ease-in-out infinite;\r\n  }\r\n  .kt-writer-cloud-small {\r\n    position: absolute;\r\n    top: 15%;\r\n    right: 10%;\r\n    font-size: 50px;\r\n    opacity: 0.8;\r\n  }\r\n  .kt-writer-ground {\r\n    position: absolute;\r\n    bottom: 20px;\r\n    left: 10%;\r\n    right: 10%;\r\n    text-align: center;\r\n    font-size: 28px;\r\n  }\r\n\r\n  .kt-writer-tag {\r\n    position: absolute;\r\n    z-index: 10;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 12px 18px;\r\n    background: white;\r\n    border: 2.5px solid #1A1A1A;\r\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\r\n    box-shadow: 4px 4px 0 #1A1A1A;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    color: #1A1A1A;\r\n  }\r\n  .kt-writer-story-card {\r\n    top: -20px;\r\n    right: -15px;\r\n    background: #86EFAC;\r\n    transform: rotate(4deg);\r\n  }\r\n  .kt-writer-story-card span {\r\n    font-family: 'Bangers', cursive;\r\n    font-size: 16px;\r\n  }\r\n\r\n  .kt-writer-author-card {\r\n    bottom: -20px;\r\n    left: -15px;\r\n    background: #FBBF24;\r\n    transform: rotate(-4deg);\r\n  }\r\n  .kt-writer-author-avatar {\r\n    width: 40px;\r\n    height: 40px;\r\n    overflow: hidden;\r\n    border: 2px solid #1A1A1A;\r\n    border-radius: 50%;\r\n    background: white;\r\n    box-shadow: 2px 2px 0 #1A1A1A;\r\n  }\r\n  .kt-writer-author-avatar img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n  }\r\n  .kt-writer-author-card small {\r\n    display: block;\r\n    font-size: 9px;\r\n    color: #57534E;\r\n    margin-bottom: 2px;\r\n  }\r\n  .kt-writer-author-card strong {\r\n    display: block;\r\n    font-size: 13px;\r\n    color: #1A1A1A;\r\n  }\r\n\r\n  \/* --- REVISI 1: Bottom Message --- *\/\r\n  .kt-writer-bottom {\r\n    position: relative; \r\n    margin-top: 50px; \r\n    max-width: 1200px;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n    padding: 0 20px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 15px;\r\n    z-index: 5;\r\n    background: transparent;\r\n    border: none; \/* Garis hitam hilang *\/\r\n  }\r\n  .kt-writer-bottom p {\r\n    margin: 0;\r\n    font-family: 'Bangers', cursive;\r\n    font-size: 18px;\r\n    color: #1A1A1A;\r\n    letter-spacing: 0.03em;\r\n    text-align: center;\r\n  }\r\n\r\n  \/* --- Responsive --- *\/\r\n  @media (max-width: 950px) {\r\n    .kt-writer-hero { padding: 90px 20px 90px; min-height: auto; }\r\n    .kt-writer-inner { grid-template-columns: 1fr; text-align: center; gap: 50px; }\r\n    .kt-writer-content { max-width: 100%; margin: 0 auto; }\r\n    .kt-writer-desc { margin-left: auto; margin-right: auto; }\r\n    .kt-writer-mini-info { justify-content: center; }\r\n    .kt-writer-visual { min-height: 480px; }\r\n    .kt-writer-bottom { margin-top: 60px; }\r\n  }\r\n  \r\n  \/* REVISI 2: Optimasi layar HP *\/\r\n  @media (max-width: 600px) {\r\n    .kt-writer-hero { padding: 80px 16px 80px; }\r\n    .kt-writer-book { height: 360px; }\r\n    .kt-writer-book-page { padding: 30px 20px; }\r\n    \r\n    \/* Kecilkan judul dan rapatkan jarak agar tidak terpotong *\/\r\n    .kt-writer-book-left h2 {\r\n      font-size: 26px; \r\n      margin: 15px 0 10px;\r\n    }\r\n    .kt-writer-book-left p {\r\n      font-size: 12px;\r\n      margin-bottom: 0;\r\n    }\r\n    .kt-writer-book-line {\r\n      margin: 15px 0 8px;\r\n    }\r\n    \r\n    .kt-writer-dragon { font-size: 85px; }\r\n    .kt-writer-bunny { font-size: 55px; }\r\n    .kt-writer-tag { transform: scale(0.85) rotate(4deg); }\r\n    .kt-writer-author-card { transform: scale(0.85) rotate(-4deg); }\r\n    .kt-writer-bottom p { font-size: 14px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"kt-writer-hero\">\r\n  <div class=\"kt-writer-hero-halftone\"><\/div>\r\n\r\n  <!-- REVISI 3: SVG Bintang dipindah ke KIRI ATAS (left:5%) -->\r\n  <svg class=\"kt-writer-bounce\" style=\"position:absolute; top:50px; left:5%; 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=\"14\" fill=\"#1A1A1A\" stroke=\"none\">WRITE!<\/text>\r\n  <\/svg>\r\n\r\n  <div class=\"kt-writer-inner\">\r\n    <div class=\"kt-writer-content\">\r\n      <div class=\"kt-reveal kt-reveal-1\">\r\n        <span class=\"kt-writer-badge\">\u270d\ufe0f DUNIA PARA PENULIS<\/span>\r\n      <\/div>\r\n      \r\n      <h1 class=\"kt-writer-title kt-reveal kt-reveal-2\">\r\n        Di Sini, <em>Imajinasi<\/em> Jadi Cerita! \ud83d\ude80\r\n      <\/h1>\r\n      \r\n      <p class=\"kt-writer-desc kt-reveal kt-reveal-3\">\r\n        Tempat para penulis menuangkan ide, menciptakan karakter, dan menghadirkan cerita anak penuh warna untuk dinikmati bersama. \u2728\r\n      <\/p>\r\n      \r\n      <div class=\"kt-writer-mini-info kt-reveal kt-reveal-4\">\r\n        <div class=\"kt-writer-avatar-group\">\r\n          <img decoding=\"async\" class=\"kt-writer-avatar kt-writer-wiggle\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/LOGO-RWB-DOODLE-100x100.jpeg\" alt=\"Penjelajah Senja\"><img decoding=\"async\" class=\"kt-writer-avatar kt-writer-wiggle\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/cropped-robot-kecil-mars-100x100.jpg\" alt=\"ucil\">        <\/div>\r\n        <div>\r\n          <strong>2+ Penulis Aktif<\/strong>\r\n          <small>Dari ide kecil menjadi dunia besar.<\/small>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"kt-writer-visual kt-reveal kt-reveal-zoom\">\r\n      \r\n      <div class=\"kt-writer-tag kt-writer-story-card kt-writer-float\">\r\n        <span>\ud83d\udcda<\/span>\r\n        <div>\r\n          <div style=\"font-size: 10px; font-weight: 800; text-transform: uppercase; color: #57534E;\">Karya Terbaru<\/div>\r\n          <span style=\"font-size: 13px;\">2 cerita minggu ini!<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n            <div class=\"kt-writer-tag kt-writer-author-card kt-writer-float2\">\r\n        <div class=\"kt-writer-author-avatar\">\r\n          <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/LOGO-RWB-DOODLE-100x100.jpeg\" alt=\"Penjelajah Senja\">\r\n        <\/div>\r\n        <div>\r\n          <small>Penulis Aktif:<\/small>\r\n          <strong>Penjelajah Senja<\/strong>\r\n        <\/div>\r\n        <span>\u2764\ufe0f<\/span>\r\n      <\/div>\r\n      \r\n      <div class=\"kt-writer-book\">\r\n        <div class=\"kt-writer-book-page kt-writer-book-left\">\r\n          <span class=\"kt-writer-book-label\">CERITA HARI INI<\/span>\r\n          <h2>Petualangan di Negeri Awan<\/h2>\r\n          <p>Sebuah cerita kecil dari imajinasi seorang penulis yang siap membuatmu terbang!<\/p>\r\n          <div class=\"kt-writer-book-line\"><\/div>\r\n          <small>\u270d\ufe0f Oleh Penjelajah Senja<\/small>\r\n        <\/div>\r\n        \r\n        <div class=\"kt-writer-book-page kt-writer-book-right\">\r\n          <div class=\"kt-writer-character kt-writer-dragon\">\ud83d\udc09<\/div>\r\n          <div class=\"kt-writer-character kt-writer-bunny\">\ud83d\udc30<\/div>\r\n          <div class=\"kt-writer-cloud-small\">\u2601\ufe0f<\/div>\r\n          <div class=\"kt-writer-ground\">\ud83c\udf3f \ud83c\udf38 \ud83c\udf3f<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"kt-writer-bottom kt-reveal kt-reveal-5\">\r\n    <span>\u2601\ufe0f<\/span>\r\n    <p>Setiap cerita punya penulis. Setiap penulis punya imajinasi.<\/p>\r\n    <span>\u2601\ufe0f<\/span>\r\n  <\/div>\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-reveal').forEach(el => {\r\n      observer.observe(el);\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-24f23c6 e-con-full e-flex e-con e-parent\" data-id=\"24f23c6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ec14783 elementor-widget elementor-widget-shortcode\" data-id=\"ec14783\" 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-author-section { background-color: #FFF8E1; font-family: 'Nunito', sans-serif; padding: 60px 0; position: relative; }\r\n  .kt-author-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }\r\n  .kt-author-head { text-align: center; margin-bottom: 50px; position: relative; z-index: 2; }\r\n  .kt-author-title-box { position: relative; display: inline-block; padding: 15px 40px 25px 40px; }\r\n  .kt-author-head h2 { font-family: 'Bangers', cursive; font-size: clamp(1.8rem, 4.5vw, 2.8rem); color: #EF4444; -webkit-text-stroke: 1.5px #1A1A1A; paint-order: stroke fill; margin: 0; line-height: 1.1; position: relative; z-index: 2; }\r\n  .kt-author-wavy { position: absolute; bottom: 5px; left: 0; width: 100%; height: 12px; 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\"); background-repeat: no-repeat; background-size: 100% 100%; z-index: 1; }\r\n  .kt-author-tape { position: absolute; top: -15px; left: 50%; transform: translateX(-50%) rotate(3deg); width: 140px; height: 35px; background: rgba(167, 243, 208, 0.6); border-left: 2px dashed rgba(255, 255, 255, 0.5); border-right: 2px dashed rgba(255, 255, 255, 0.5); box-shadow: 1px 2px 4px rgba(0,0,0,0.1); z-index: 3; }\r\n  .kt-author-head p { font-size: 14px; font-weight: 600; color: #57534E; margin: 20px 0 0 0; }\r\n\r\n  .kt-empty-state { text-align: center; padding: 40px 20px; background: #FFF; border: 3.5px dashed #1A1A1A; border-radius: 20px; box-shadow: 6px 6px 0 #1A1A1A; max-width: 500px; margin: 0 auto; }\r\n  .kt-empty-state h3 { font-family: 'Bangers', cursive; font-size: 1.8rem; color: #1A1A1A; margin: 0 0 10px 0; }\r\n\r\n  .kt-author-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 40px; }\r\n  \r\n  .kt-author-card { background: #FBBF24; border: 3.5px solid #1A1A1A; border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px; box-shadow: 8px 8px 0 #1A1A1A; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; text-decoration: none; position: relative; cursor: pointer; }\r\n  .kt-author-card:hover { transform: translateY(-8px) rotate(-2deg); box-shadow: 12px 12px 0 #1A1A1A; }\r\n  .kt-author-avatar-wrap { position: relative; padding: 30px 20px 20px 20px; display: flex; justify-content: center; border-bottom: 3.5px solid #1A1A1A; }\r\n  .kt-author-avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid #1A1A1A; box-shadow: 4px 4px 0 #1A1A1A; object-fit: cover; background: #FFF; }\r\n  .kt-author-bubble { position: absolute; top: 15px; right: 15px; background: #1A1A1A; color: #FFF; padding: 6px 12px; font-size: 11px; font-weight: 800; border-radius: 20px 255px 20px 225px \/ 225px 20px 255px 20px; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; z-index: 10; pointer-events: none; }\r\n  .kt-author-card:hover .kt-author-bubble { opacity: 1; transform: translateY(0); }\r\n  .kt-author-content { background: #FFFFFF; padding: 20px 10px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; word-wrap: break-word; }\r\n  .kt-author-name { font-family: 'Bangers', cursive; font-size: 1.3rem; color: #1A1A1A; margin: 0 0 8px 0; line-height: 1.1; }\r\n  .kt-author-role { font-size: 11px; font-weight: 800; color: #FFF; background: #EF4444; border: 2px solid #1A1A1A; box-shadow: 2px 2px 0 #1A1A1A; padding: 4px 10px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px; border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px; }\r\n  .kt-author-count { font-size: 12px; font-weight: 700; color: #57534E; }\r\n\r\n  \/* STYLE ARSIP JAGOAN (KARTU PUDAR) *\/\r\n  .kt-archive-section { margin-top: 80px; padding-top: 40px; border-top: 4px dashed #1A1A1A; }\r\n  .kt-archive-card { background: #E5E7EB; }\r\n  .kt-archive-card .kt-author-avatar { filter: grayscale(100%); transition: filter 0.4s ease; }\r\n  .kt-archive-card:hover .kt-author-avatar { filter: grayscale(0%); }\r\n  .kt-archive-card .kt-author-role { background: #6B7280; }\r\n  .kt-archive-card:hover { background: #FBBF24; }\r\n\r\n  \/* MODAL POPUP (TANPA BACKDROP-FILTER) *\/\r\n  .kt-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(26, 26, 26, 0.75); z-index: 9999; align-items: center; justify-content: center; padding: 20px; }\r\n  .kt-modal-overlay.kt-show { display: flex; }\r\n  .kt-modal-box { background: #FFF8E1; border: 3.5px solid #1A1A1A; border-radius: 20px 255px 20px 225px \/ 225px 20px 255px 20px; box-shadow: 8px 8px 0 #1A1A1A; max-width: 450px; width: 100%; padding: 32px; position: relative; text-align: center; max-height: 90vh; overflow-y: auto; }\r\n  .kt-modal-box::-webkit-scrollbar { width: 10px; border-radius: 10px; }\r\n  .kt-modal-box::-webkit-scrollbar-track { background: #FFF8E1; border-left: 2px solid #1A1A1A; }\r\n  .kt-modal-box::-webkit-scrollbar-thumb { background: #1A1A1A; border-radius: 10px; }\r\n  .kt-modal-box { scrollbar-width: thin; scrollbar-color: #1A1A1A #FFF8E1; }\r\n\r\n  .kt-modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; background: #EF4444; color: white; border: 2.5px solid #1A1A1A; border-radius: 50%; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 2px 2px 0 #1A1A1A; display: flex; align-items: center; justify-content: center; line-height: 0; z-index: 99; }\r\n  .kt-modal-avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid #1A1A1A; box-shadow: 4px 4px 0 #1A1A1A; object-fit: cover; background: #FFF; margin: 0 auto 15px auto; display: block; }\r\n  .kt-modal-name { font-family: 'Bangers', cursive; font-size: 2rem; color: #1A1A1A; margin: 0 0 5px 0; }\r\n  .kt-modal-bio { font-size: 14px; font-weight: 600; color: #57534E; margin-bottom: 25px; padding: 0 10px; }\r\n  .kt-modal-story-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; text-align: left; }\r\n  .kt-modal-story { display: flex; align-items: center; gap: 15px; text-decoration: none; background: #FFF; border: 2.5px solid #1A1A1A; border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px; box-shadow: 3px 3px 0 #1A1A1A; padding: 10px; }\r\n  .kt-modal-story img { width: 60px; height: 60px; object-fit: cover; border-radius: 50%; border: 2px solid #1A1A1A; }\r\n  .kt-modal-story h4 { font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 800; color: #1A1A1A; margin: 0; line-height: 1.2; }\r\n  .kt-modal-all-btn { display: inline-block; background: #EF4444; color: white; border: 2.5px solid #1A1A1A; border-radius: 15px 255px 15px 225px \/ 225px 15px 255px 15px; box-shadow: 4px 4px 0 #1A1A1A; padding: 12px 25px; text-decoration: none; font-weight: 800; font-size: 14px; text-transform: uppercase; transition: transform 0.2s; }\r\n  .kt-modal-all-btn:hover { transform: translateY(-2px); }\r\n\r\n  \/* PAGINATION *\/\r\n  .kt-author-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 30px; flex-wrap: wrap; }\r\n  .kt-author-pagination .page-numbers {\r\n    display: flex; align-items: center; justify-content: center;\r\n    min-width: 45px; height: 45px; padding: 0 12px;\r\n    font-family: 'Bangers', cursive; font-size: 1.3rem;\r\n    color: #1A1A1A; background: #FFFFFF;\r\n    border: 2.5px solid #1A1A1A; border-radius: 15px 255px 15px 225px \/ 225px 15px 255px 15px;\r\n    box-shadow: 3px 3px 0 #1A1A1A; text-decoration: none; transition: all 0.15s ease;\r\n  }\r\n  .kt-author-pagination .page-numbers:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #1A1A1A; background: #FBBF24; }\r\n  .kt-author-pagination .page-numbers.current { background: #EF4444; color: #FFFFFF; pointer-events: none; }\r\n\r\n  \/* ANIMATION *\/\r\n  .kt-author-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }\r\n  .kt-author-reveal.kt-author-visible { opacity: 1; transform: translateY(0); }\r\n  .kt-author-grid.kt-author-reveal .kt-author-card:nth-child(1) { transition-delay: 0.1s; }\r\n  .kt-author-grid.kt-author-reveal .kt-author-card:nth-child(2) { transition-delay: 0.2s; }\r\n  .kt-author-grid.kt-author-reveal .kt-author-card:nth-child(3) { transition-delay: 0.3s; }\r\n  .kt-author-grid.kt-author-reveal .kt-author-card:nth-child(4) { transition-delay: 0.4s; }\r\n  .kt-author-grid.kt-author-reveal .kt-author-card:nth-child(5) { transition-delay: 0.5s; }\r\n\r\n  @media (max-width: 768px) {\r\n    .kt-author-grid { display: flex; overflow-x: auto; gap: 20px; padding: 20px 0 30px 0; scroll-snap-type: x mandatory; }\r\n    .kt-author-grid::-webkit-scrollbar { display: none; }\r\n    .kt-author-grid { -ms-overflow-style: none; scrollbar-width: none; }\r\n    .kt-author-card { flex: 0 0 80%; scroll-snap-align: center; }\r\n    .kt-author-grid.kt-author-reveal .kt-author-card { transition-delay: 0s !important; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"kt-author-section\">\r\n  <div class=\"kt-author-wrap\">\r\n    \r\n    <!-- SECTION 1: PENULIS AKTIF MUSIM INI -->\r\n    <div class=\"kt-author-head kt-author-reveal\">\r\n      <div class=\"kt-author-title-box\">\r\n        <div class=\"kt-author-tape\"><\/div>\r\n        <h2>PENULIS SEASON 2026-2027<\/h2>\r\n        <div class=\"kt-author-wavy\"><\/div>\r\n      <\/div>\r\n      <p>Kenalan sama para penulis cerita seru musim ini! \ud83d\udc4b<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"kt-author-grid kt-author-reveal\">\r\n              <div class=\"kt-author-card\" onclick=\"ktOpenModal('1')\">\r\n          <div class=\"kt-author-avatar-wrap\">\r\n            <div class=\"kt-author-bubble\">Klik aku! \ud83d\udc4b<\/div>\r\n            <img alt='Penjelajah Senja' src='https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/LOGO-RWB-DOODLE-100x100.jpeg' srcset='https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/LOGO-RWB-DOODLE-200x200.jpeg 2x' class='avatar avatar-100 photo kt-author-avatar' height='100' width='100' \/>          <\/div>\r\n          <div class=\"kt-author-content\">\r\n            <h3 class=\"kt-author-name\">Penjelajah Senja<\/h3>\r\n            <span class=\"kt-author-role\">Penulis Aktif<\/span>\r\n            <p class=\"kt-author-count\">20 Cerita Ditulis \u270d\ufe0f<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- HIDDEN DATA UNTUK MODAL -->\r\n        <div id=\"kt-data-1\" style=\"display:none;\">\r\n          <div class=\"kt-modal-avatar-wrap\"><img alt='Penjelajah Senja' src='https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/LOGO-RWB-DOODLE-100x100.jpeg' srcset='https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/LOGO-RWB-DOODLE-200x200.jpeg 2x' class='avatar avatar-100 photo kt-modal-avatar' height='100' width='100' \/><\/div>\r\n          <div class=\"kt-modal-name\">Penjelajah Senja<\/div>\r\n          <div class=\"kt-modal-bio\">aq seorang kapiten\r\nmempunyai pedang panjang\r\nkalau berjalan prok prok prok...<\/div>\r\n          <div class=\"kt-modal-story-list\">\r\n            <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/raka-dan-cahaya-di-jalan-pulang\/\" class=\"kt-modal-story\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/main-sepedah-150x150.jpeg\" alt=\"Raka dan Cahaya di Jalan Pulang\"><h4>Raka dan Cahaya di Jalan Pulang<\/h4><\/a><a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-29\/\" class=\"kt-modal-story\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/jadul-1-150x150.jpeg\" alt=\"Kampung Ceria dan Penunggang Egrang\"><h4>Kampung Ceria dan Penunggang Egrang<\/h4><\/a><a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/18\/tes-27\/\" class=\"kt-modal-story\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/jadul-1-150x150.jpeg\" alt=\"TES 27\"><h4>TES 27<\/h4><\/a>          <\/div>\r\n          <a href=\"https:\/\/lab.rwb.my.id\/story\/halaman-penulis\/?penulis_id=1\" class=\"kt-modal-all-btn\">Lihat Semua Cerita \ud83d\ude80<\/a>\r\n        <\/div>\r\n\r\n              <div class=\"kt-author-card\" onclick=\"ktOpenModal('11')\">\r\n          <div class=\"kt-author-avatar-wrap\">\r\n            <div class=\"kt-author-bubble\">Klik aku! \ud83d\udc4b<\/div>\r\n            <img alt='ucil' src='https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/cropped-robot-kecil-mars-100x100.jpg' srcset='https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/cropped-robot-kecil-mars-200x200.jpg 2x' class='avatar avatar-100 photo kt-author-avatar' height='100' width='100' \/>          <\/div>\r\n          <div class=\"kt-author-content\">\r\n            <h3 class=\"kt-author-name\">ucil<\/h3>\r\n            <span class=\"kt-author-role\">Penulis Aktif<\/span>\r\n            <p class=\"kt-author-count\">2 Cerita Ditulis \u270d\ufe0f<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- HIDDEN DATA UNTUK MODAL -->\r\n        <div id=\"kt-data-11\" style=\"display:none;\">\r\n          <div class=\"kt-modal-avatar-wrap\"><img alt='ucil' src='https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/cropped-robot-kecil-mars-100x100.jpg' srcset='https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/cropped-robot-kecil-mars-200x200.jpg 2x' class='avatar avatar-100 photo kt-modal-avatar' height='100' width='100' \/><\/div>\r\n          <div class=\"kt-modal-name\">ucil<\/div>\r\n          <div class=\"kt-modal-bio\">aq seorang koki kapiten,\r\nmempunyai sendok panjang,\r\nkalau berjalan nyam nyam nyam<\/div>\r\n          <div class=\"kt-modal-story-list\">\r\n            <a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/21\/kakek-dano-dan-buku-cahaya-senja\/\" class=\"kt-modal-story\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/catatan-retro-150x150.jpeg\" alt=\"Kakek Dano dan Buku Cahaya Senja\"><h4>Kakek Dano dan Buku Cahaya Senja<\/h4><\/a><a href=\"https:\/\/lab.rwb.my.id\/story\/2026\/08\/21\/kereta-senja-dan-lima-sahabat-penjaga-jembatan\/\" class=\"kt-modal-story\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/catatan-perjalanan-150x150.jpeg\" alt=\"Kereta Senja dan Lima Sahabat Penjaga Jembatan\"><h4>Kereta Senja dan Lima Sahabat Penjaga Jembatan<\/h4><\/a>          <\/div>\r\n          <a href=\"https:\/\/lab.rwb.my.id\/story\/halaman-penulis\/?penulis_id=11\" class=\"kt-modal-all-btn\">Lihat Semua Cerita \ud83d\ude80<\/a>\r\n        <\/div>\r\n\r\n          <\/div>\r\n\r\n    <!-- PAGINATION AKTIF -->\r\n    \r\n    <!-- SECTION 2: ARSIP JAGOAN (HANYA MUNCUL KALO ADA PENULIS ARSIP) -->\r\n    \r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- MODAL ELEMENT (CUMA BUAT SECTION ATAS) -->\r\n<div class=\"kt-modal-overlay\" id=\"ktAuthorModal\" 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 id=\"ktModalContent\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  function ktOpenModal(authorId) {\r\n    var dataDiv = document.getElementById('kt-data-' + authorId);\r\n    var modalContent = document.getElementById('ktModalContent');\r\n    if(dataDiv && modalContent) {\r\n      modalContent.innerHTML = dataDiv.innerHTML;\r\n      document.getElementById('ktAuthorModal').classList.add('kt-show');\r\n      document.body.style.overflow = 'hidden';\r\n    }\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')) {\r\n      document.getElementById('ktAuthorModal').classList.remove('kt-show');\r\n      document.body.style.overflow = 'auto';\r\n    }\r\n  }\r\n\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-author-visible');\r\n          observer.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, { threshold: 0.15 });\r\n\r\n    document.querySelectorAll('.kt-author-reveal').forEach(el => {\r\n      observer.observe(el);\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-d6ad984 e-con-full e-flex e-con e-parent\" data-id=\"d6ad984\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-203d99a elementor-widget elementor-widget-shortcode\" data-id=\"203d99a\" 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 BEHIND STORY -->\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-bs {\r\n    position: relative;\r\n    padding: 100px 20px;\r\n    background: #FFF8E1;\r\n    font-family: 'Nunito', sans-serif;\r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* --- Halftone --- *\/\r\n  .kt-bs-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 ktBsFloat {\r\n    0%, 100% { transform: translateY(0); }\r\n    50% { transform: translateY(-12px); }\r\n  }\r\n  @keyframes ktBsBounce {\r\n    0%, 100% { transform: translateY(0) rotate(0deg); }\r\n    25% { transform: translateY(-4px) rotate(-3deg); }\r\n    75% { transform: translateY(-2px) rotate(2deg); }\r\n  }\r\n  @keyframes ktBsFadeUp {\r\n    from { opacity: 0; transform: translateY(30px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n  @keyframes ktBsZoomIn {\r\n    from { opacity: 0; transform: scale(0.8) rotate(-5deg); }\r\n    to { opacity: 1; transform: scale(1) rotate(0deg); }\r\n  }\r\n\r\n  .kt-bs-reveal { opacity: 0; }\r\n  .kt-bs-reveal.kt-bs-visible { animation: ktBsFadeUp 0.7s ease-out both; }\r\n  .kt-bs-reveal-1.kt-bs-visible { animation-delay: 0.1s; }\r\n  .kt-bs-reveal-2.kt-bs-visible { animation-delay: 0.2s; }\r\n  .kt-bs-reveal-3.kt-bs-visible { animation-delay: 0.3s; }\r\n  .kt-bs-reveal-4.kt-bs-visible { animation-delay: 0.4s; }\r\n  .kt-bs-reveal-5.kt-bs-visible { animation-delay: 0.5s; }\r\n  .kt-bs-reveal-zoom.kt-bs-visible { animation: ktBsZoomIn 0.8s ease-out 0.4s both; }\r\n\r\n  .kt-bs-bounce { animation: ktBsBounce 2.5s ease-in-out infinite; }\r\n  .kt-bs-float { animation: ktBsFloat 3s ease-in-out infinite; }\r\n  .kt-bs-float2 { animation: ktBsFloat 4s 1s ease-in-out infinite; }\r\n\r\n  \/* --- Layout --- *\/\r\n  .kt-bs-inner {\r\n    max-width: 1100px;\r\n    margin: 0 auto;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n\r\n  \/* --- Header --- *\/\r\n  .kt-bs-header {\r\n    text-align: center;\r\n    margin-bottom: 60px;\r\n  }\r\n  .kt-bs-badge {\r\n    display: inline-block;\r\n    padding: 10px 24px;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: #1A1A1A;\r\n    background: #FBBF24;\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    margin-bottom: 16px;\r\n  }\r\n  .kt-bs-title {\r\n    font-family: 'Bangers', cursive;\r\n    font-size: clamp(38px, 6vw, 64px);\r\n    color: #1A1A1A;\r\n    letter-spacing: 0.03em;\r\n    line-height: 1.1;\r\n    margin-bottom: 12px;\r\n  }\r\n  .kt-bs-title em {\r\n    font-style: normal;\r\n    color: #EF4444;\r\n    -webkit-text-stroke: 1.5px #1A1A1A;\r\n    paint-order: stroke fill;\r\n  }\r\n  .kt-bs-desc {\r\n    max-width: 600px;\r\n    margin: 0 auto;\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    color: #57534E;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  \/* --- Story Stage --- *\/\r\n  .kt-bs-stage {\r\n    position: relative;\r\n    background: #86EFAC; \/* Hijau rumput komik *\/\r\n    border: 4px solid #1A1A1A;\r\n    border-radius: 24px;\r\n    box-shadow: 10px 10px 0 #1A1A1A;\r\n    padding: 80px 40px;\r\n    overflow: visible;\r\n  }\r\n\r\n  \/* --- Author Card --- *\/\r\n  .kt-bs-author {\r\n    position: absolute;\r\n    top: -30px;\r\n    right: 30px;\r\n    z-index: 15;\r\n    width: 280px;\r\n    padding: 16px;\r\n    background: #FFF8E1;\r\n    border: 3px solid #1A1A1A;\r\n    border-radius: 15px 255px 15px 225px \/ 225px 15px 255px 15px;\r\n    box-shadow: 6px 6px 0 #1A1A1A;\r\n    transform: rotate(3deg);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n  .kt-bs-author-avatar {\r\n    width: 50px;\r\n    height: 50px;\r\n    border: 2.5px solid #1A1A1A;\r\n    border-radius: 50%;\r\n    background: #FBBF24;\r\n    overflow: hidden;\r\n    flex-shrink: 0;\r\n  }\r\n  .kt-bs-author-avatar img {\r\n    width: 100%; height: 100%; object-fit: cover;\r\n  }\r\n  .kt-bs-author-info strong {\r\n    display: block;\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;\r\n  }\r\n  .kt-bs-author-info span {\r\n    display: block;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    color: #57534E;\r\n    text-transform: uppercase;\r\n    margin-top: 2px;\r\n  }\r\n  .kt-bs-author-quote {\r\n    margin-top: 12px;\r\n    padding-top: 10px;\r\n    border-top: 2px dashed #1A1A1A;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    font-style: italic;\r\n    color: #1A1A1A;\r\n    line-height: 1.4;\r\n  }\r\n\r\n  \/* --- Storybook --- *\/\r\n  .kt-bs-book {\r\n    position: relative;\r\n    z-index: 5;\r\n    display: flex;\r\n    max-width: 700px;\r\n    margin: 0 auto;\r\n    min-height: 400px;\r\n    background: white;\r\n    border: 3.5px solid #1A1A1A;\r\n    border-radius: 20px;\r\n    box-shadow: 8px 8px 0 #1A1A1A;\r\n    overflow: hidden;\r\n    transform: rotate(-1deg);\r\n  }\r\n  .kt-bs-page {\r\n    position: relative;\r\n    flex: 1;\r\n    padding: 40px 30px;\r\n    overflow: hidden;\r\n  }\r\n  .kt-bs-page-left {\r\n    background: #FFF8E1;\r\n    border-right: 3.5px solid #1A1A1A;\r\n  }\r\n  .kt-bs-page-right {\r\n    background: #DBEAFE; \/* Biru langit *\/\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .kt-bs-cat {\r\n    display: inline-block;\r\n    padding: 6px 14px;\r\n    background: #EF4444;\r\n    color: white;\r\n    border: 2px solid #1A1A1A;\r\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    box-shadow: 2px 2px 0 #1A1A1A;\r\n  }\r\n  .kt-bs-book-title {\r\n    margin: 20px 0 12px;\r\n    font-family: 'Bangers', cursive;\r\n    font-size: clamp(28px, 3.5vw, 40px);\r\n    line-height: 1.1;\r\n    color: #1A1A1A;\r\n    letter-spacing: 0.02em;\r\n  }\r\n  .kt-bs-book-desc {\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    color: #57534E;\r\n    line-height: 1.6;\r\n    margin-bottom: 20px;\r\n  }\r\n  .kt-bs-tags {\r\n    display: flex;\r\n    gap: 8px;\r\n    flex-wrap: wrap;\r\n  }\r\n  .kt-bs-tags span {\r\n    padding: 5px 12px;\r\n    background: #FBBF24;\r\n    border: 1.5px solid #1A1A1A;\r\n    border-radius: 6px;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    color: #1A1A1A;\r\n  }\r\n\r\n  \/* Book Art *\/\r\n  .kt-bs-dragon {\r\n    font-size: 120px;\r\n    filter: drop-shadow(4px 4px 0 #1A1A1A);\r\n    animation: ktBsFloat 3s ease-in-out infinite;\r\n  }\r\n  .kt-bs-ground {\r\n    position: absolute;\r\n    bottom: 20px;\r\n    left: 10%;\r\n    right: 10%;\r\n    text-align: center;\r\n    font-size: 28px;\r\n  }\r\n\r\n  \/* --- Hotspots --- *\/\r\n  .kt-bs-hotspot {\r\n    position: absolute;\r\n    z-index: 20;\r\n    width: 56px;\r\n    height: 56px;\r\n    border: 3px solid #1A1A1A;\r\n    border-radius: 50%;\r\n    background: #FBBF24;\r\n    color: #1A1A1A;\r\n    font-size: 24px;\r\n    display: grid;\r\n    place-items: center;\r\n    cursor: pointer;\r\n    box-shadow: 4px 4px 0 #1A1A1A;\r\n    transition: all 0.15s ease;\r\n  }\r\n  .kt-bs-hotspot:hover {\r\n    transform: translateY(-3px) scale(1.05);\r\n    box-shadow: 6px 6px 0 #1A1A1A;\r\n  }\r\n  .kt-bs-hotspot:active {\r\n    transform: translateY(0) scale(1);\r\n    box-shadow: 1px 1px 0 #1A1A1A;\r\n  }\r\n  .kt-bs-hotspot-1 { top: 20px; left: 20px; animation: ktBsBounce 2.5s infinite; }\r\n  .kt-bs-hotspot-2 { bottom: 20px; left: 20px; animation: ktBsBounce 2.8s 0.2s infinite; }\r\n  .kt-bs-hotspot-3 { top: 20px; right: 20px; background: #EF4444; color: white; animation: ktBsBounce 2.2s 0.4s infinite; }\r\n  .kt-bs-hotspot-4 { bottom: 20px; right: 20px; background: #86EFAC; animation: ktBsBounce 3s 0.1s infinite; }\r\n\r\n  \/* --- Story Recipe --- *\/\r\n  .kt-bs-recipe {\r\n    margin-top: 60px;\r\n    padding: 40px;\r\n    background: white;\r\n    border: 3.5px solid #1A1A1A;\r\n    border-radius: 20px;\r\n    box-shadow: 8px 8px 0 #1A1A1A;\r\n  }\r\n  .kt-bs-recipe-title {\r\n    text-align: center;\r\n    margin-bottom: 32px;\r\n  }\r\n  .kt-bs-recipe-title span {\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    color: #EF4444;\r\n    letter-spacing: 1px;\r\n    text-transform: uppercase;\r\n  }\r\n  .kt-bs-recipe-title h2 {\r\n    font-family: 'Bangers', cursive;\r\n    font-size: 32px;\r\n    color: #1A1A1A;\r\n    margin-top: 8px;\r\n    letter-spacing: 0.03em;\r\n  }\r\n  .kt-bs-recipe-flow {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n    flex-wrap: wrap;\r\n  }\r\n  .kt-bs-recipe-item {\r\n    text-align: center;\r\n    min-width: 100px;\r\n  }\r\n  .kt-bs-recipe-icon {\r\n    width: 64px;\r\n    height: 64px;\r\n    display: grid;\r\n    place-items: center;\r\n    margin: 0 auto 10px;\r\n    background: #FFF8E1;\r\n    border: 2.5px solid #1A1A1A;\r\n    border-radius: 12px;\r\n    box-shadow: 4px 4px 0 #1A1A1A;\r\n    font-size: 28px;\r\n  }\r\n  .kt-bs-recipe-item strong {\r\n    display: block;\r\n    font-family: 'Bangers', cursive;\r\n    font-size: 16px;\r\n    color: #1A1A1A;\r\n    letter-spacing: 0.02em;\r\n  }\r\n  .kt-bs-recipe-item small {\r\n    display: block;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    color: #57534E;\r\n    text-transform: uppercase;\r\n    margin-top: 2px;\r\n  }\r\n  .kt-bs-recipe-sign {\r\n    font-family: 'Bangers', cursive;\r\n    font-size: 32px;\r\n    color: #EF4444;\r\n    -webkit-text-stroke: 1px #1A1A1A;\r\n    paint-order: stroke fill;\r\n  }\r\n\r\n  \/* --- Modal Popup --- *\/\r\n  .kt-bs-modal-overlay {\r\n    display: none;\r\n    position: fixed;\r\n    inset: 0;\r\n    background: rgba(26, 26, 26, 0.6);\r\n    z-index: 9999;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 20px;\r\n    backdrop-filter: blur(4px);\r\n  }\r\n  .kt-bs-modal-overlay.kt-show {\r\n    display: flex;\r\n    animation: ktBsFadeUp 0.3s ease-out;\r\n  }\r\n  .kt-bs-modal-box {\r\n    background: #FFF8E1;\r\n    border: 3.5px solid #1A1A1A;\r\n    border-radius: 20px 255px 20px 225px \/ 225px 20px 255px 20px;\r\n    box-shadow: 8px 8px 0 #1A1A1A;\r\n    max-width: 450px;\r\n    width: 100%;\r\n    padding: 32px;\r\n    position: relative;\r\n    text-align: center;\r\n    animation: ktBsZoomIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);\r\n  }\r\n  .kt-bs-modal-close {\r\n    position: absolute;\r\n    top: 12px;\r\n    right: 12px;\r\n    width: 32px;\r\n    height: 32px;\r\n    background: #EF4444;\r\n    color: white;\r\n    border: 2.5px solid #1A1A1A;\r\n    border-radius: 50%;\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n    cursor: pointer;\r\n    box-shadow: 2px 2px 0 #1A1A1A;\r\n    transition: transform 0.2s;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  .kt-bs-modal-close:hover {\r\n    transform: rotate(90deg) scale(1.1);\r\n  }\r\n  .kt-bs-modal-icon {\r\n    width: 60px;\r\n    height: 60px;\r\n    background: #FBBF24;\r\n    border: 3px solid #1A1A1A;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 30px;\r\n    margin: 0 auto 16px;\r\n    box-shadow: 3px 3px 0 #1A1A1A;\r\n  }\r\n  .kt-bs-modal-title {\r\n    font-family: 'Bangers', cursive;\r\n    font-size: 28px;\r\n    color: #1A1A1A;\r\n    letter-spacing: 0.03em;\r\n    margin-bottom: 12px;\r\n  }\r\n  .kt-bs-modal-text {\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    color: #57534E;\r\n    line-height: 1.6;\r\n    margin-bottom: 20px;\r\n    text-align: left;\r\n  }\r\n\r\n  \/* --- Responsive --- *\/\r\n  @media (max-width: 860px) {\r\n    .kt-bs-stage { padding: 60px 20px; }\r\n    .kt-bs-book { flex-direction: column; min-height: auto; }\r\n    .kt-bs-page-left { border-right: none; border-bottom: 3.5px solid #1A1A1A; }\r\n    .kt-bs-author { position: relative; top: auto; right: auto; margin: -40px auto 30px; transform: rotate(0); width: 90%; }\r\n    .kt-bs-hotspot { width: 48px; height: 48px; font-size: 20px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"kt-bs\">\r\n  <div class=\"kt-bs-halftone\"><\/div>\r\n\r\n  <div class=\"kt-bs-inner\">\r\n    <!-- HEADER -->\r\n    <div class=\"kt-bs-header kt-bs-reveal kt-bs-reveal-1\">\r\n      <span class=\"kt-bs-badge\">\u2728 INTIP DUNIA DONGENG<\/span>\r\n      <h2 class=\"kt-bs-title\">Di Balik Sebuah <em>Cerita<\/em><\/h2>\r\n      <p class=\"kt-bs-desc\">\r\n        Pernah penasaran dari mana sebuah cerita dimulai? Yuk, intip bagaimana sebuah ide kecil berubah menjadi dunia penuh imajinasi!\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- STAGE -->\r\n    <div class=\"kt-bs-stage kt-bs-reveal kt-bs-reveal-2\">\r\n      \r\n      <!-- AUTHOR CARD (DINAMIS) -->\r\n      <div class=\"kt-bs-author kt-bs-bounce\">\r\n        <div class=\"kt-bs-author-avatar\">\r\n          <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/story\/wp-content\/uploads\/sites\/21\/2026\/08\/LOGO-RWB-DOODLE-120x120.jpeg\" alt=\"Penjelajah Senja\">\r\n        <\/div>\r\n        <div class=\"kt-bs-author-info\">\r\n          <strong>Penjelajah Senja<\/strong>\r\n          <span>Penulis Cerita Anak<\/span>\r\n          <div class=\"kt-bs-author-quote\">\"Aku menulis untuk membuat anak-anak berani bermimpi.\"<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- STORYBOOK -->\r\n      <div class=\"kt-bs-book\">\r\n        <div class=\"kt-bs-page kt-bs-page-left\">\r\n          <span class=\"kt-bs-cat\">\ud83d\udc09 Petualangan<\/span>\r\n          <h3 class=\"kt-bs-book-title\">Naga yang<br>Takut Terbang<\/h3>\r\n          <p class=\"kt-bs-book-desc\">\r\n            Kisah tentang Bubu, seekor naga kecil yang belajar bahwa keberanian tidak berarti tidak takut.\r\n          <\/p>\r\n          <div class=\"kt-bs-tags\">\r\n            <span>7\u201310 thn<\/span>\r\n            <span>Persahabatan<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"kt-bs-page kt-bs-page-right\">\r\n          <div class=\"kt-bs-dragon\">\ud83d\udc09<\/div>\r\n          <div class=\"kt-bs-ground\">\ud83c\udf3f \ud83c\udf38 \ud83c\udf3f<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- HOTSPOTS -->\r\n      <button class=\"kt-bs-hotspot kt-bs-hotspot-1\" onclick=\"ktBsShowModal('idea')\" aria-label=\"Lihat ide cerita\">\ud83d\udca1<\/button>\r\n      <button class=\"kt-bs-hotspot kt-bs-hotspot-2\" onclick=\"ktBsShowModal('writing')\" aria-label=\"Lihat proses menulis\">\u270f\ufe0f<\/button>\r\n      <button class=\"kt-bs-hotspot kt-bs-hotspot-3\" onclick=\"ktBsShowModal('character')\" aria-label=\"Lihat karakter cerita\">\ud83d\udc32<\/button>\r\n      <button class=\"kt-bs-hotspot kt-bs-hotspot-4\" onclick=\"ktBsShowModal('world')\" aria-label=\"Lihat dunia cerita\">\ud83c\udfa8<\/button>\r\n    <\/div>\r\n\r\n    <!-- RECIPE -->\r\n    <div class=\"kt-bs-recipe kt-bs-reveal kt-bs-reveal-3\">\r\n      <div class=\"kt-bs-recipe-title\">\r\n        <span>\ud83e\uddea RAHASIA DI BALIKNYA<\/span>\r\n        <h2>Cerita Ini Dibuat Dari...<\/h2>\r\n      <\/div>\r\n      <div class=\"kt-bs-recipe-flow\">\r\n        <div class=\"kt-bs-recipe-item\">\r\n          <div class=\"kt-bs-recipe-icon\">\ud83d\udca1<\/div>\r\n          <strong>1 Ide<\/strong>\r\n          <small>Gagasan kecil<\/small>\r\n        <\/div>\r\n        <div class=\"kt-bs-recipe-sign\">\uff0b<\/div>\r\n        \r\n        <div class=\"kt-bs-recipe-item\">\r\n          <div class=\"kt-bs-recipe-icon\">\u270d\ufe0f<\/div>\r\n          <strong>1 Penulis<\/strong>\r\n          <small>Si pencipta<\/small>\r\n        <\/div>\r\n        <div class=\"kt-bs-recipe-sign\">\uff0b<\/div>\r\n        \r\n        <div class=\"kt-bs-recipe-item\">\r\n          <div class=\"kt-bs-recipe-icon\">\ud83d\udc09<\/div>\r\n          <strong>3 Karakter<\/strong>\r\n          <small>Tokoh penuh warna<\/small>\r\n        <\/div>\r\n        <div class=\"kt-bs-recipe-sign\">\uff0b<\/div>\r\n        \r\n        <div class=\"kt-bs-recipe-item\">\r\n          <div class=\"kt-bs-recipe-icon\">\ud83c\udf08<\/div>\r\n          <strong>1 Dunia<\/strong>\r\n          <small>Tempat berimajinasi<\/small>\r\n        <\/div>\r\n        <div class=\"kt-bs-recipe-sign\">\uff1d<\/div>\r\n        \r\n        <div class=\"kt-bs-recipe-item\">\r\n          <div class=\"kt-bs-recipe-icon\" style=\"background: #FBBF24;\">\ud83d\udcd6<\/div>\r\n          <strong>Sebuah Cerita<\/strong>\r\n          <small>Dan keajaiban!<\/small>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- MODAL POPUP -->\r\n  <div class=\"kt-bs-modal-overlay\" id=\"ktBsStoryModal\" onclick=\"ktBsCloseModal(event)\">\r\n    <div class=\"kt-bs-modal-box\" onclick=\"event.stopPropagation()\">\r\n      <button class=\"kt-bs-modal-close\" onclick=\"ktBsCloseModal(event)\">\u2715<\/button>\r\n      <div class=\"kt-bs-modal-icon\" id=\"ktBsModalIcon\">\ud83d\udca1<\/div>\r\n      <h3 class=\"kt-bs-modal-title\" id=\"ktBsModalTitle\">Ide Cerita<\/h3>\r\n      <p class=\"kt-bs-modal-text\" id=\"ktBsModalText\">Setiap cerita berawal dari sebuah ide kecil.<\/p>\r\n      <button class=\"kt-btn-primary\" style=\"display: inline-flex; padding: 12px 24px; border: 3px solid #1A1A1A; box-shadow: 4px 4px 0 #1A1A1A; background: #EF4444; color: white; font-weight: 800; text-transform: uppercase; border-radius: 15px 255px 15px 225px \/ 225px 15px 255px 15px;\" onclick=\"ktBsCloseModal(event)\">\r\n        Gas Lanjut! \ud83d\ude80\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n  const ktBsStoryInfo = {\r\n    idea: { icon: \"\ud83d\udca1\", title: \"Dari Mana Idenya?\", text: \"Penulis mendapatkan ide cerita ini dari sebuah pertanyaan sederhana: bagaimana jika ada naga kecil yang memiliki sayap, tetapi takut menggunakannya? Dari situlah petualangan Bubu dimulai.\" },\r\n    writing: { icon: \"\u270f\ufe0f\", title: \"Proses Menulis\", text: \"Cerita dimulai dari coretan kecil, kemudian berkembang menjadi karakter, konflik, petualangan, dan akhirnya menjadi cerita yang siap dibaca oleh anak-anak.\" },\r\n    character: { icon: \"\ud83d\udc09\", title: \"Kenalan dengan Bubu\", text: \"Bubu adalah naga kecil yang sebenarnya sangat penasaran. Sayangnya, dia takut terbang. Sepanjang cerita, Bubu belajar bahwa keberanian bukan berarti tidak merasa takut.\" },\r\n    world: { icon: \"\ud83c\udf08\", title: \"Dunia Cerita\", text: \"Dunia Bubu dibuat penuh warna, hutan hijau, awan lembut, dan tempat-tempat ajaib agar pembaca bisa merasa seperti ikut masuk ke dalam dunia dongeng.\" }\r\n  };\r\n\r\n  function ktBsShowModal(type) {\r\n    const data = ktBsStoryInfo[type];\r\n    document.getElementById('ktBsModalIcon').textContent = data.icon;\r\n    document.getElementById('ktBsModalTitle').textContent = data.title;\r\n    document.getElementById('ktBsModalText').textContent = data.text;\r\n    document.getElementById('ktBsStoryModal').classList.add('kt-show');\r\n  }\r\n\r\n  function ktBsCloseModal(event) {\r\n    if (event.target.classList.contains('kt-bs-modal-overlay') || event.target.classList.contains('kt-bs-modal-close') || event.target.closest('.kt-bs-modal-close') || event.target.classList.contains('kt-btn-primary')) {\r\n      document.getElementById('ktBsStoryModal').classList.remove('kt-show');\r\n    }\r\n  }\r\n\r\n  \/\/ Intersection Observer\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-bs-visible');\r\n        }\r\n      });\r\n    }, { threshold: 0.15 });\r\n\r\n    document.querySelectorAll('.kt-bs-reveal').forEach(el => {\r\n      observer.observe(el);\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","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-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/17","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=17"}],"version-history":[{"count":13,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":438,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/17\/revisions\/438"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/media?parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}