Childhood Counseling & Workshop Presentation Deck<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n brand: {\n navy: '#0f172a',\n slate: '#1e293b',\n teal: '#2b8a78',\n tealLight: '#e6f4f1',\n coral: '#e06d53',\n coralLight: '#fcefe9',\n gold: '#f59e0b',\n bg: '#f8fafc'\n }\n },\n fontFamily: {\n sans: ['\"Plus Jakarta Sans\"', 'sans-serif'],\n heading: ['Poppins', 'sans-serif']\n }\n }\n }\n }\n <\/script>\n\n <style>\n body {\n font-family: 'Plus Jakarta Sans', sans-serif;\n touch-action: pan-y;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .slide-stage {\n perspective: 1000px;\n }\n\n .slide-card {\n display: none;\n opacity: 0;\n transform: translateX(30px) scale(0.98);\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .slide-card.active {\n display: flex;\n opacity: 1;\n transform: translateX(0) scale(1);\n }\n\n .slide-card.exit-left {\n display: flex;\n opacity: 0;\n transform: translateX(-30px) scale(0.98);\n }\n\n \/* Custom scrollbars inside slides *\/\n .custom-scroll::-webkit-scrollbar {\n width: 6px;\n }\n .custom-scroll::-webkit-scrollbar-track {\n background: #f1f5f9;\n border-radius: 4px;\n }\n .custom-scroll::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 4px;\n }\n .custom-scroll::-webkit-scrollbar-thumb:hover {\n background: #94a3b8;\n }\n\n \/* Glassmorphism utility *\/\n .glass-panel {\n background: rgba(255, 255, 255, 0.85);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-950 text-slate-800 h-full w-full overflow-hidden flex flex-col justify-between\">\n\n \n <header class=\"w-full bg-slate-900\/90 border-b border-slate-800 px-4 py-3 text-white z-30 flex items-center justify-between shrink-0\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-lg bg-teal-600 flex items-center justify-center font-bold text-white shadow-md\">\n <i class=\"fa-solid fa-child-reaching text-sm\"><\/i>\n <\/div>\n <div>\n <h1 class=\"font-heading text-sm md:text-base font-bold text-slate-100 leading-tight\">Childhood Counseling Deck<\/h1>\n <p class=\"text-xs text-slate-400 hidden sm:block\">Panduan Interaktif Workshop Bimbingan & Konseling PAUD<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex items-center gap-2 md:gap-3\">\n \n <div class=\"bg-slate-800 border border-slate-700 text-teal-400 font-mono text-xs md:text-sm px-3 py-1.5 rounded-full flex items-center gap-2\">\n <i class=\"fa-solid fa-layer-group text-slate-400 text-xs\"><\/i>\n <span id=\"slideCounter\">1 \/ 14<\/span>\n <\/div>\n\n \n <button id=\"btnOverview\" title=\"Lihat Semua Slide\" class=\"p-2 w-9 h-9 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white transition flex items-center justify-center\">\n <i class=\"fa-solid fa-grip\"><\/i>\n <\/button>\n\n \n <button id=\"btnFullscreen\" title=\"Layar Penuh\" class=\"p-2 w-9 h-9 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white transition flex items-center justify-center\">\n <i class=\"fa-solid fa-expand\"><\/i>\n <\/button>\n <\/div>\n <\/header>\n\n \n <main class=\"relative flex-1 w-full max-w-7xl mx-auto p-2 sm:p-4 md:p-6 flex items-center justify-center overflow-hidden\">\n \n \n <div class=\"absolute top-0 left-0 right-0 h-1 bg-slate-800 z-20\">\n <div id=\"progressBar\" class=\"h-full bg-gradient-to-r from-teal-500 to-coral-500 w-0 transition-all duration-300\"><\/div>\n <\/div>\n\n \n <div id=\"slideStage\" class=\"relative w-full h-full bg-slate-900 rounded-2xl md:rounded-3xl border border-slate-800\/80 shadow-2xl overflow-hidden flex flex-col\">\n \n \n <div class=\"slide-card active w-full h-full flex-col justify-between p-6 md:p-12 bg-gradient-to-br from-slate-900 via-slate-900 to-teal-950 text-white relative overflow-hidden\" data-slide=\"1\">\n <div class=\"absolute -right-20 -top-20 w-80 h-80 bg-teal-500\/10 rounded-full blur-3xl pointer-events-none\"><\/div>\n <div class=\"absolute -left-20 -bottom-20 w-80 h-80 bg-orange-500\/10 rounded-full blur-3xl pointer-events-none\"><\/div>\n\n <div class=\"flex justify-between items-center z-10\">\n <span class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold bg-teal-500\/20 text-teal-300 border border-teal-500\/30\">\n <i class=\"fa-solid fa-graduation-cap\"><\/i> Modul Workshop & Presentasi\n <\/span>\n <span class=\"text-xs text-slate-400\">PAUD & AUD Counseling<\/span>\n <\/div>\n\n <div class=\"my-auto z-10 max-w-3xl\">\n <h1 class=\"font-heading text-3xl sm:text-5xl md:text-6xl font-extrabold text-white tracking-tight leading-tight mb-4\">\n Layanan Bimbingan & <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-emerald-300\">Konseling Anak<\/span> Usia Dini\n <\/h1>\n <p class=\"text-slate-300 text-sm sm:text-lg leading-relaxed mb-6\">\n Panduan praktis dan interaktif memahami konsep dasar perkembangan anak, strategi edutainment, serta <strong class=\"text-white\">4 Core Counseling Skills<\/strong> berlandaskan model terapi modern.\n <\/p>\n <div class=\"flex flex-wrap gap-3\">\n <div class=\"px-3 py-2 rounded-xl bg-slate-800\/80 border border-slate-700 text-slate-300 text-xs flex items-center gap-2\">\n <i class=\"fa-solid fa-brain text-teal-400\"><\/i> Teori Kognitif AUD\n <\/div>\n <div class=\"px-3 py-2 rounded-xl bg-slate-800\/80 border border-slate-700 text-slate-300 text-xs flex items-center gap-2\">\n <i class=\"fa-solid fa-comments text-coral-400\"><\/i> 4 Core Skills\n <\/div>\n <div class=\"px-3 py-2 rounded-xl bg-slate-800\/80 border border-slate-700 text-slate-300 text-xs flex items-center gap-2\">\n <i class=\"fa-solid fa-heart-pulse text-amber-400\"><\/i> Dr. David Hawkins 3-Zone\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"pt-4 border-t border-slate-800\/80 flex items-center justify-between text-xs text-slate-400 z-10\">\n <span>Gunakan panah ← → atau usap layar untuk berpindah slide<\/span>\n <span class=\"text-teal-400 font-medium\">Bimbingan & Konseling Berbasis Perkembangan<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col justify-center items-center p-6 md:p-12 bg-slate-900 text-white text-center relative overflow-hidden\" data-slide=\"2\">\n <div class=\"max-w-2xl z-10 my-auto\">\n <span class=\"inline-block px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-orange-500\/20 text-orange-400 border border-orange-500\/30 mb-4\">\n BAGIAN I\n <\/span>\n <h2 class=\"font-heading text-3xl sm:text-5xl font-bold mb-4\">Konsep Dasar & Pembelajaran PAUD<\/h2>\n <div class=\"w-16 h-1 bg-teal-500 mx-auto rounded-full mb-6\"><\/div>\n <p class=\"text-slate-300 text-base sm:text-lg leading-relaxed\">\n Memahami pentingnya layanan bimbingan konseling pada anak usia dini, regulasi emosi, adaptasi lingkungan, serta stimulasi kognitif melalui model pembelajaran yang menyenangkan.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"3\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Fondasi Layanan<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Peran BK Pada Anak Usia Dini<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 my-auto\">\n <div class=\"p-5 rounded-2xl bg-white border border-slate-200 shadow-sm hover:shadow-md transition\">\n <div class=\"w-10 h-10 rounded-xl bg-teal-100 text-teal-700 flex items-center justify-center font-bold mb-3\">\n <i class=\"fa-solid fa-heart\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-semibold text-lg text-slate-900 mb-2\">Regulasi Emosi Sehat<\/h3>\n <p class=\"text-slate-600 text-sm leading-relaxed\">\n Mengajarkan anak mengelola emosi positif (bernapas dalam, mengambil waktu tenang saat marah, mengungkapkan kata-kata) serta menghormati emosi orang lain.\n <\/p>\n <\/div>\n\n <div class=\"p-5 rounded-2xl bg-white border border-slate-200 shadow-sm hover:shadow-md transition\">\n <div class=\"w-10 h-10 rounded-xl bg-orange-100 text-orange-700 flex items-center justify-center font-bold mb-3\">\n <i class=\"fa-solid fa-users\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-semibold text-lg text-slate-900 mb-2\">Mengelola Konflik & Empati<\/h3>\n <p class=\"text-slate-600 text-sm leading-relaxed\">\n Membantu anak menyelesaikan masalah dengan adil, berbagi mainan, serta peka terhadap isyarat non-verbal (ekspresi wajah dan gestur tubuh).\n <\/p>\n <\/div>\n\n <div class=\"p-5 rounded-2xl bg-white border border-slate-200 shadow-sm hover:shadow-md transition\">\n <div class=\"w-10 h-10 rounded-xl bg-indigo-100 text-indigo-700 flex items-center justify-center font-bold mb-3\">\n <i class=\"fa-solid fa-compass\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-semibold text-lg text-slate-900 mb-2\">Adaptasi Lingkungan Baru<\/h3>\n <p class=\"text-slate-600 text-sm leading-relaxed\">\n Meringankan rasa cemas dan stres saat anak memasuki kelas\/sekolah baru melalui pengenalan lingkungan yang aman dan penuh dukungan.\n <\/p>\n <\/div>\n\n <div class=\"p-5 rounded-2xl bg-white border border-slate-200 shadow-sm hover:shadow-md transition\">\n <div class=\"w-10 h-10 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center font-bold mb-3\">\n <i class=\"fa-solid fa-sliders\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-semibold text-lg text-slate-900 mb-2\">Pendekatan Individual<\/h3>\n <p class=\"text-slate-600 text-sm leading-relaxed\">\n Mengidentifikasi gaya belajar unik setiap anak (visual, auditori, kinestetik) agar pemberian bimbingan berlangsung efektif dan relevan.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"4\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Teori Perkembangan<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">3 Pilar Kognitif Anak Usia Dini<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-5 my-auto\">\n \n <div class=\"bg-white rounded-2xl p-6 border border-slate-200 shadow-sm flex flex-col justify-between\">\n <div>\n <div class=\"w-12 h-12 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center text-xl font-bold mb-4\">\n <i class=\"fa-solid fa-brain\"><\/i>\n <\/div>\n <h3 class=\"font-heading text-lg font-bold text-slate-900 mb-2\">Jean Piaget<\/h3>\n <p class=\"text-xs font-semibold text-teal-600 mb-3 uppercase\">Proses Kognitif Bertahap<\/p>\n <ul class=\"text-xs text-slate-600 space-y-2 leading-relaxed\">\n <li class=\"flex items-start gap-2\">\n <span class=\"font-bold text-teal-600\">\u2022<\/span>\n <span><strong>Asimilasi:<\/strong> Penyatuan informasi baru ke struktur kognitif lama.<\/span>\n <\/li>\n <li class=\"flex items-start gap-2\">\n <span class=\"font-bold text-teal-600\">\u2022<\/span>\n <span><strong>Akomodasi:<\/strong> Penyusunan ulang struktur kognitif sesuai situasi baru.<\/span>\n <\/li>\n <li class=\"flex items-start gap-2\">\n <span class=\"font-bold text-teal-600\">\u2022<\/span>\n <span><strong>Equilibrasi:<\/strong> Keseimbangan kognitif yang stabil.<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl p-6 border border-slate-200 shadow-sm flex flex-col justify-between\">\n <div>\n <div class=\"w-12 h-12 rounded-xl bg-orange-50 text-orange-600 flex items-center justify-center text-xl font-bold mb-4\">\n <i class=\"fa-solid fa-magnifying-glass font-bold\"><\/i>\n <\/div>\n <h3 class=\"font-heading text-lg font-bold text-slate-900 mb-2\">Jerome Bruner<\/h3>\n <p class=\"text-xs font-semibold text-orange-600 mb-3 uppercase\">Discovery Learning<\/p>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Belajar Penemuan di mana anak memahami lingkungan melalui eksperimen, penemuan bebas, dan pengalaman praktis secara langsung tanpa tekanan.\n <\/p>\n <\/div>\n <div class=\"mt-4 p-3 bg-orange-50 rounded-xl text-xs text-orange-800 font-medium\">\n Menekankan eksplorasi bebas dan partisipasi aktif anak.\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl p-6 border border-slate-200 shadow-sm flex flex-col justify-between\">\n <div>\n <div class=\"w-12 h-12 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center text-xl font-bold mb-4\">\n <i class=\"fa-solid fa-sitemap\"><\/i>\n <\/div>\n <h3 class=\"font-heading text-lg font-bold text-slate-900 mb-2\">David Ausubel<\/h3>\n <p class=\"text-xs font-semibold text-indigo-600 mb-3 uppercase\">Advance Organizers<\/p>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Memberikan kerangka konseptual awal yang menghubungkan pengetahuan yang sudah dimiliki dengan informasi baru agar mudah disimpulkan.\n <\/p>\n <\/div>\n <div class=\"mt-4 p-3 bg-indigo-50 rounded-xl text-xs text-indigo-800 font-medium\">\n Membuat materi pembelajaran lebih bermakna dan terstruktur.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"5\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Metode Pembelajaran<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Strategi Kreatif Layanan Informasi<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 my-auto\">\n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 flex gap-4 items-start shadow-sm\">\n <div class=\"p-3 bg-teal-100 text-teal-700 rounded-xl text-lg font-bold shrink-0\">\n <i class=\"fa-solid fa-gamepad\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Bermain (Play-Based)<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Melalui permainan (seperti petak umpet, Cilukba, atau main peran), anak belajar berbagi hak milik, menyusun aturan bersama, dan mengembangkan daya cipta.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 flex gap-4 items-start shadow-sm\">\n <div class=\"p-3 bg-orange-100 text-orange-700 rounded-xl text-lg font-bold shrink-0\">\n <i class=\"fa-solid fa-face-laugh-beam\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Pendekatan Humor<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Humor mencairkan suasana kaku, meredakan ketegangan fisik\/otak neocortex, serta mendorong anak mengekspresikan gagasan tanpa takut dihakimi.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 flex gap-4 items-start shadow-sm\">\n <div class=\"p-3 bg-indigo-100 text-indigo-700 rounded-xl text-lg font-bold shrink-0\">\n <i class=\"fa-solid fa-book-open-reader\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Bercerita & Dongeng<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Menanamkan nilai moral & etika lewat buku bergambar, papan flanel, boneka tangan, mau pun dramatisasi karakter fabel\/cerita rakyat.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 flex gap-4 items-start shadow-sm\">\n <div class=\"p-3 bg-amber-100 text-amber-700 rounded-xl text-lg font-bold shrink-0\">\n <i class=\"fa-solid fa-people-group\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Pembelajaran Kooperatif<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Pembagian tugas kolaboratif dalam kelompok heterogen memfasilitasi kebiasaan berdiskusi, refleksi bersama, dan menghargai perbedaan.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col justify-center items-center p-6 md:p-12 bg-slate-900 text-white text-center relative overflow-hidden\" data-slide=\"6\">\n <div class=\"max-w-2xl z-10 my-auto\">\n <span class=\"inline-block px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-teal-500\/20 text-teal-400 border border-teal-500\/30 mb-4\">\n BAGIAN II\n <\/span>\n <h2 class=\"font-heading text-3xl sm:text-5xl font-bold mb-4\">4 Core Counseling Skills<\/h2>\n <div class=\"w-16 h-1 bg-orange-500 mx-auto rounded-full mb-6\"><\/div>\n <p class=\"text-slate-300 text-base sm:text-lg leading-relaxed\">\n Empat keterampilan inti yang wajib dikuasai oleh konselor\/pendidik PAUD untuk mengurai masalah anak, membangun empati, dan mengarahkan solusi.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"7\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Kerangka Keterampilan<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Ringkasan 4 Skill Utama<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 my-auto\">\n \n <div class=\"bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between border-t-4 border-t-teal-500\">\n <div>\n <div class=\"w-10 h-10 rounded-xl bg-teal-100 text-teal-700 flex items-center justify-center font-bold mb-3\">1<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Pedekate (Rapport)<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Formula <strong>CCT<\/strong> (Connect, Comfort, Trust) untuk menciptakan kehangatan dan rasa aman.\n <\/p>\n <\/div>\n <span class=\"text-[10px] font-bold text-teal-600 uppercase tracking-wide bg-teal-50 px-2 py-1 rounded\">Fondasi Hubungan<\/span>\n <\/div>\n\n \n <div class=\"bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between border-t-4 border-t-orange-500\">\n <div>\n <div class=\"w-10 h-10 rounded-xl bg-orange-100 text-orange-700 flex items-center justify-center font-bold mb-3\">2<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Mindful Listening<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Prinsip <strong>S.U.N<\/strong> (Sabar, Utuh, Netral) serta memisahkan Fakta vs Opini.\n <\/p>\n <\/div>\n <span class=\"text-[10px] font-bold text-orange-600 uppercase tracking-wide bg-orange-50 px-2 py-1 rounded\">Menangkap Isyarat<\/span>\n <\/div>\n\n \n <div class=\"bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between border-t-4 border-t-indigo-500\">\n <div>\n <div class=\"w-10 h-10 rounded-xl bg-indigo-100 text-indigo-700 flex items-center justify-center font-bold mb-3\">3<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Powerful Questions<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Mengarahkan pertanyaan sesuai 3 Zona (Healing, Meaning, Empowering).\n <\/p>\n <\/div>\n <span class=\"text-[10px] font-bold text-indigo-600 uppercase tracking-wide bg-indigo-50 px-2 py-1 rounded\">Eksplorasi Solusi<\/span>\n <\/div>\n\n \n <div class=\"bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between border-t-4 border-t-amber-500\">\n <div>\n <div class=\"w-10 h-10 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center font-bold mb-3\">4<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Speak Positive Vibes<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Validasi perasaan, reframing perspektif, serta memotivasi dengan afirmatif.\n <\/p>\n <\/div>\n <span class=\"text-[10px] font-bold text-amber-600 uppercase tracking-wide bg-amber-50 px-2 py-1 rounded\">Afirmasi & Aksi<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"8\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Skill #1<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Building Rapport: Formula CCT<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-5 my-auto\">\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm\">\n <div class=\"w-10 h-10 rounded-xl bg-teal-100 text-teal-700 font-bold flex items-center justify-center mb-3 text-base\">C<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-lg mb-2\">1. Connect<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Hadir secara utuh (presentness), menyapa nama anak secara hangat, menyejajarkan posisi tubuh (eye-level), serta menunjukkan penerimaan tanpa prasangka.\n <\/p>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm\">\n <div class=\"w-10 h-10 rounded-xl bg-orange-100 text-orange-700 font-bold flex items-center justify-center mb-3 text-base\">C<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-lg mb-2\">2. Comfort<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Menyesuaikan nada suara yang lembut (pacing), gestur terbuka, dan menciptakan rasa aman dari ancaman penghakiman atau teguran langsung.\n <\/p>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm\">\n <div class=\"w-10 h-10 rounded-xl bg-indigo-100 text-indigo-700 font-bold flex items-center justify-center mb-3 text-base\">T<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-lg mb-2\">3. Trust & Leading<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Setelah rasa percaya terbangun mendalam melalui kalibrasi emosi, konselor secara perlahan mengarahkan (leading) percakapan menuju topik konseling inti.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"9\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Skill #2<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Mindful Listening & Isyarat Emosi<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 my-auto\">\n \n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm\">\n <h3 class=\"font-heading font-bold text-teal-700 text-lg mb-3 flex items-center gap-2\">\n <i class=\"fa-solid fa-sun\"><\/i> Prinsip S.U.N\n <\/h3>\n <ul class=\"space-y-3 text-xs text-slate-600\">\n <li class=\"p-3 bg-slate-50 rounded-xl border border-slate-100\">\n <strong class=\"text-slate-900 font-semibold block text-sm\">S – Sabar<\/strong>\n Tidak terburu-buru memotong pembicaraan anak atau memberi solusi instan sebelum masalah terurai utuh.\n <\/li>\n <li class=\"p-3 bg-slate-50 rounded-xl border border-slate-100\">\n <strong class=\"text-slate-900 font-semibold block text-sm\">U – Utuh<\/strong>\n Mendengarkan dengan segenap perhatian (pikiran, mata, dan telinga) tanpa terdistraksi gawai atau hal lain.\n <\/li>\n <li class=\"p-3 bg-slate-50 rounded-xl border border-slate-100\">\n <strong class=\"text-slate-900 font-semibold block text-sm\">N – Netral<\/strong>\n Menunda penilaian (non-judgmental) dan tidak memberi label buruk pada emosi anak.\n <\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between\">\n <div>\n <h3 class=\"font-heading font-bold text-orange-700 text-lg mb-3 flex items-center gap-2\">\n <i class=\"fa-solid fa-eye\"><\/i> Look, Sound & Feel\n <\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-4\">\n Mengamati aspek non-verbal anak untuk menangkap pesan tersirat dan membedakan antara <strong class=\"text-slate-900\">Fakta Obyektif<\/strong> vs <strong class=\"text-slate-900\">Opini\/Asumsi<\/strong>:\n <\/p>\n <div class=\"space-y-2 text-xs text-slate-700\">\n <div class=\"flex items-center gap-2\"><i class=\"fa-solid fa-check text-teal-600\"><\/i> <strong>Look:<\/strong> Ekspresi wajah, tatapan mata, dan gestur fisik.<\/div>\n <div class=\"flex items-center gap-2\"><i class=\"fa-solid fa-check text-teal-600\"><\/i> <strong>Sound:<\/strong> Intonasi, kecepatan bicara, dan desah napas.<\/div>\n <div class=\"flex items-center gap-2\"><i class=\"fa-solid fa-check text-teal-600\"><\/i> <strong>Feel:<\/strong> Suasana emosi tersirat yang dirasakan konselor.<\/div>\n <\/div>\n <\/div>\n <div class=\"mt-4 p-3 bg-teal-50 rounded-xl text-xs text-teal-800 font-medium\">\n Tujuan: Membantu anak memisahkan kenyataan objektif dari rasa takut berlebih.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"10\">\n <div class=\"mb-4\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Skill #3 & Landasan Terapi<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">3 Zona Terapi (Dr. David Hawkins)<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 my-auto\">\n \n <div class=\"bg-white p-5 rounded-2xl border border-red-200 shadow-sm flex flex-col justify-between\">\n <div>\n <span class=\"px-2.5 py-1 rounded-full text-[10px] font-bold bg-red-100 text-red-700 uppercase mb-2 inline-block\">Zona Fear<\/span>\n <h3 class=\"font-heading font-bold text-slate-900 text-lg mb-1\">1. Healing Questions<\/h3>\n <p class=\"text-xs font-semibold text-red-600 mb-2\">Gali Akar & Validasi Luka Batin<\/p>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Menghadapi cemas, rasa bersalah, atau takut. Fokus pada merilis emosi terpendam.\n <\/p>\n <\/div>\n <div class=\"p-3 bg-slate-50 rounded-xl text-xs text-slate-700 font-mono italic\">\n “Bagaimana perasaanmu saat kejadian itu terjadi?”\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-5 rounded-2xl border border-amber-200 shadow-sm flex flex-col justify-between\">\n <div>\n <span class=\"px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 uppercase mb-2 inline-block\">Zona Learning<\/span>\n <h3 class=\"font-heading font-bold text-slate-900 text-lg mb-1\">2. Meaning Questions<\/h3>\n <p class=\"text-xs font-semibold text-amber-700 mb-2\">Penerimaan & Ambil Hikmah<\/p>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Mengeksplorasi sumber daya (resource) dan membedakan hal yang bisa diubah vs tidak.\n <\/p>\n <\/div>\n <div class=\"p-3 bg-slate-50 rounded-xl text-xs text-slate-700 font-mono italic\">\n “Apa yang bisa kamu pelajari dari kejadian ini?”\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-5 rounded-2xl border border-emerald-200 shadow-sm flex flex-col justify-between\">\n <div>\n <span class=\"px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800 uppercase mb-2 inline-block\">Zona Growth<\/span>\n <h3 class=\"font-heading font-bold text-slate-900 text-lg mb-1\">3. Empowering Questions<\/h3>\n <p class=\"text-xs font-semibold text-emerald-700 mb-2\">Orientasi Solusi & Komitmen<\/p>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Membimbing anak menyusun langkah nyata sederhana dan membangun komitmen aksi.\n <\/p>\n <\/div>\n <div class=\"p-3 bg-slate-50 rounded-xl text-xs text-slate-700 font-mono italic\">\n “Langkah kecil apa yang siap kamu lakukan besok?”\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"11\">\n <div class=\"mb-4\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Panduan Praktis Bertanya<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Contoh Model Pertanyaan Konseling<\/h2>\n <\/div>\n\n <div class=\"overflow-x-auto w-full my-auto\">\n <table class=\"w-full text-xs text-left text-slate-700 border-collapse bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-200\">\n <thead class=\"bg-slate-900 text-white font-heading text-xs\">\n <tr>\n <th class=\"p-3 sm:p-4 border-b border-slate-800\">Healing Question<\/th>\n <th class=\"p-3 sm:p-4 border-b border-slate-800\">Meaning Question<\/th>\n <th class=\"p-3 sm:p-4 border-b border-slate-800\">Empowering Question<\/th>\n <\/tr>\n <\/thead>\n <tbody class=\"divide-y divide-slate-100\">\n <tr class=\"hover:bg-slate-50\">\n <td class=\"p-3 sm:p-4\">Bisakah kamu ceritakan hal tidak nyaman yang dialami?<\/td>\n <td class=\"p-3 sm:p-4\">Apa yang sudah kamu lakukan saat menghadapi hal tersebut?<\/td>\n <td class=\"p-3 sm:p-4\">Kalau saya tidak salah menangkap, kamu merasa… benar begitu? (Clarifying)<\/td>\n <\/tr>\n <tr class=\"hover:bg-slate-50\">\n <td class=\"p-3 sm:p-4\">Bagaimana perasaanmu saat kejadian itu terjadi?<\/td>\n <td class=\"p-3 sm:p-4\">Bagaimana hasilnya? Mana yang bisa kamu ubah \/ tidak mungkin diubah?<\/td>\n <td class=\"p-3 sm:p-4\">Terima kasih sudah berbagi. Saya paham ini hal yang tidak mudah buatmu. (Validasi)<\/td>\n <\/tr>\n <tr class=\"hover:bg-slate-50\">\n <td class=\"p-3 sm:p-4\">Menurutmu, apa dampak dari kejadian ini bagi dirimu?<\/td>\n <td class=\"p-3 sm:p-4\">Jika bisa memilih, apa yang ingin kamu lakukan secara berbeda?<\/td>\n <td class=\"p-3 sm:p-4\">Siapa orang dewasa yang bisa bantumu saat rasa ini muncul lagi?<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"12\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Alur Pelaksanaan<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">4 Tahapan Sesi Konseling Anak<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 my-auto relative\">\n \n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 shadow-sm relative\">\n <div class=\"w-8 h-8 rounded-full bg-teal-600 text-white font-bold text-xs flex items-center justify-center mb-3\">01<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Membangun Kedekatan<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Menerapkan formula CCT (Connect, Comfort, Trust) melalui observing & pacing suasana emosi anak.\n <\/p>\n <\/div>\n\n \n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 shadow-sm relative\">\n <div class=\"w-8 h-8 rounded-full bg-orange-600 text-white font-bold text-xs flex items-center justify-center mb-3\">02<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Akar Masalah<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Mindful listening untuk memisahkan fakta vs opini, lalu mengajukan <em>Healing Questions<\/em>.\n <\/p>\n <\/div>\n\n \n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 shadow-sm relative\">\n <div class=\"w-8 h-8 rounded-full bg-indigo-600 text-white font-bold text-xs flex items-center justify-center mb-3\">03<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Berdamai dng Masalah<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Reframing cara pandang dan mengeksplorasi sumber daya internal\/eksternal lewat <em>Meaning Questions<\/em>.\n <\/p>\n <\/div>\n\n \n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 shadow-sm relative\">\n <div class=\"w-8 h-8 rounded-full bg-amber-600 text-white font-bold text-xs flex items-center justify-center mb-3\">04<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Komitmen Aksi<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Merumuskan langkah aksi sederhana melalui <em>Empowering Questions<\/em> & motivasi afirmatif.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"13\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Kesehatan Emosi Konselor<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Self-Care & Regulasi Diri Konselor<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-5 my-auto\">\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm text-center\">\n <div class=\"w-12 h-12 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center text-xl font-bold mx-auto mb-4\">\n <i class=\"fa-solid fa-wind\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-2\">Mindful Breathing (4-4-4)<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Olah napas teratur sebelum dan sesudah sesi untuk menjaga ketenangan pikiran, kesadaran netral, dan mencegah limpahan beban emosi anak.\n <\/p>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm text-center\">\n <div class=\"w-12 h-12 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center text-xl font-bold mx-auto mb-4\">\n <i class=\"fa-solid fa-sun\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-2\">Taking in Good<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Secara sadar meresapi momen-momen positif kecil setiap hari guna mengisi kembali energi emosional dan mencegah burnout pekerjaan.\n <\/p>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm text-center\">\n <div class=\"w-12 h-12 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center text-xl font-bold mx-auto mb-4\">\n <i class=\"fa-solid fa-star\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-2\">Creating Positive Peak<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Menciptakan titik terang positif di tengah hari yang berat melalui aktivitas sederhana, apresiasi diri, dan ritual bersyukur harian.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col justify-between p-6 md:p-12 bg-gradient-to-br from-slate-900 via-slate-900 to-slate-950 text-white relative overflow-hidden text-center\" data-slide=\"14\">\n <div class=\"my-auto z-10 max-w-2xl mx-auto\">\n <div class=\"w-16 h-16 rounded-full bg-teal-500\/20 text-teal-300 border border-teal-500\/40 flex items-center justify-center mx-auto mb-6 text-2xl\">\n <i class=\"fa-solid fa-heart\"><\/i>\n <\/div>\n <h2 class=\"font-heading text-3xl sm:text-5xl font-extrabold mb-4\">Terima Kasih!<\/h2>\n <blockquote class=\"text-slate-300 italic text-base sm:text-xl font-light mb-6 leading-relaxed\">\n “Mendengarkan dengan penuh empati dan rasa ingin tahu adalah awal dari proses pemulihan dan pertumbuhan anak.”\n <\/blockquote>\n <p class=\"text-xs sm:text-sm text-teal-400 font-semibold tracking-wider uppercase\">\n Program Bimbingan & Konseling Anak Usia Dini\n <\/p>\n <\/div>\n\n <div class=\"pt-4 border-t border-slate-800 text-xs text-slate-500 z-10 flex justify-between items-center\">\n <span>Workshop Childhood Counseling<\/span>\n <span>Akhir Presentasi<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/main>\n\n \n <footer class=\"w-full bg-slate-900\/90 border-t border-slate-800 px-4 py-3 text-white z-30 shrink-0\">\n <div class=\"max-w-7xl mx-auto flex items-center justify-between\">\n \n <button id=\"btnPrev\" class=\"px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 hover:text-white transition flex items-center gap-2 text-xs md:text-sm font-semibold disabled:opacity-40 disabled:cursor-not-allowed\">\n <i class=\"fa-solid fa-arrow-left\"><\/i>\n <span class=\"hidden sm:inline\">Sebelumnya<\/span>\n <\/button>\n\n \n <div id=\"slideDots\" class=\"flex items-center gap-1.5 overflow-x-auto max-w-[50vw] px-2 py-1 custom-scroll\">\n \n <\/div>\n\n \n <button id=\"btnNext\" class=\"px-4 py-2 rounded-xl bg-teal-600 hover:bg-teal-500 text-white transition flex items-center gap-2 text-xs md:text-sm font-semibold disabled:opacity-40 disabled:cursor-not-allowed\">\n <span class=\"hidden sm:inline\">Berikutnya<\/span>\n <i class=\"fa-solid fa-arrow-right\"><\/i>\n <\/button>\n <\/div>\n <\/footer>\n\n \n <div id=\"overviewModal\" class=\"fixed inset-0 bg-slate-950\/80 backdrop-blur-md z-50 opacity-0 pointer-events-none transition-all duration-300 flex flex-col p-4 md:p-8\">\n <div class=\"flex items-center justify-between mb-6 text-white max-w-7xl mx-auto w-full\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-grip text-teal-400 text-xl\"><\/i>\n <h2 class=\"font-heading text-lg md:text-xl font-bold\">Daftar Slide Presentasi<\/h2>\n <\/div>\n <button id=\"btnCloseOverview\" class=\"w-10 h-10 rounded-full bg-slate-800 text-slate-300 hover:text-white flex items-center justify-center transition\">\n <i class=\"fa-solid fa-xmark text-lg\"><\/i>\n <\/button>\n <\/div>\n\n <div id=\"overviewGrid\" class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4 max-w-7xl mx-auto w-full overflow-y-auto custom-scroll p-1\">\n \n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const slides = Array.from(document.querySelectorAll('.slide-card'));\n const totalSlides = slides.length;\n let currentSlideIndex = 0;\n\n const slideCounter = document.getElementById('slideCounter');\n const progressBar = document.getElementById('progressBar');\n const btnPrev = document.getElementById('btnPrev');\n const btnNext = document.getElementById('btnNext');\n const slideDots = document.getElementById('slideDots');\n const overviewModal = document.getElementById('overviewModal');\n const overviewGrid = document.getElementById('overviewGrid');\n const btnOverview = document.getElementById('btnOverview');\n const btnCloseOverview = document.getElementById('btnCloseOverview');\n const btnFullscreen = document.getElementById('btnFullscreen');\n const slideStage = document.getElementById('slideStage');\n\n \/\/ Render navigation dots\n slides.forEach((_, idx) => {\n const dot = document.createElement('button');\n dot.className = `w-2.5 h-2.5 rounded-full transition-all ${idx === 0 ? 'bg-teal-400 w-6' : 'bg-slate-700 hover:bg-slate-500'}`;\n dot.title = `Ke Slide ${idx + 1}`;\n dot.addEventListener('click', () => goToSlide(idx));\n slideDots.appendChild(dot);\n });\n\n \/\/ Render Overview Cards\n slides.forEach((slide, idx) => {\n const title = slide.querySelector('h1, h2, h3')?.innerText || `Slide ${idx + 1}`;\n const card = document.createElement('div');\n card.className = `p-3 rounded-xl bg-slate-800 border ${idx === 0 ? 'border-teal-500 bg-slate-800' : 'border-slate-700'} hover:border-teal-400 cursor-pointer transition flex flex-col justify-between h-28 text-left text-xs`;\n card.innerHTML = `\n <div class=\"flex items-center justify-between text-slate-400 font-mono text-[10px] mb-1\">\n <span>SLIDE ${idx + 1}<\/span>\n ${idx === currentSlideIndex ? '<i class=\"fa-solid fa-circle text-teal-400 text-[8px]\"><\/i>' : ''}\n <\/div>\n <div class=\"font-heading font-semibold text-slate-200 line-clamp-2\">${title}<\/div>\n `;\n card.addEventListener('click', () => {\n goToSlide(idx);\n closeOverview();\n });\n overviewGrid.appendChild(card);\n });\n\n \/\/ Update UI state\n function updateSlideView() {\n slides.forEach((slide, idx) => {\n slide.classList.remove('active', 'exit-left');\n if (idx === currentSlideIndex) {\n slide.classList.add('active');\n } else if (idx < currentSlideIndex) {\n slide.classList.add('exit-left');\n }\n });\n\n \/\/ Update counter & progress\n slideCounter.innerText = `${currentSlideIndex + 1} \/ ${totalSlides}`;\n const progressPercent = ((currentSlideIndex + 1) \/ totalSlides) * 100;\n progressBar.style.width = `${progressPercent}%`;\n\n \/\/ Update prev\/next buttons\n btnPrev.disabled = currentSlideIndex === 0;\n btnNext.disabled = currentSlideIndex === totalSlides - 1;\n\n \/\/ Update dots\n Array.from(slideDots.children).forEach((dot, idx) => {\n if (idx === currentSlideIndex) {\n dot.className = 'w-6 h-2.5 rounded-full bg-teal-400 transition-all';\n } else {\n dot.className = 'w-2.5 h-2.5 rounded-full bg-slate-700 hover:bg-slate-500 transition-all';\n }\n });\n\n \/\/ Update grid modal selections\n Array.from(overviewGrid.children).forEach((card, idx) => {\n if (idx === currentSlideIndex) {\n card.classList.add('border-teal-500', 'bg-slate-800');\n card.classList.remove('border-slate-700');\n } else {\n card.classList.remove('border-teal-500');\n card.classList.add('border-slate-700');\n }\n });\n }\n\n function goToSlide(index) {\n if (index < 0 || index >= totalSlides) return;\n currentSlideIndex = index;\n updateSlideView();\n }\n\n function nextSlide() {\n if (currentSlideIndex < totalSlides - 1) {\n currentSlideIndex++;\n updateSlideView();\n }\n }\n\n function prevSlide() {\n if (currentSlideIndex > 0) {\n currentSlideIndex--;\n updateSlideView();\n }\n }\n\n \/\/ Event listeners\n btnNext.addEventListener('click', nextSlide);\n btnPrev.addEventListener('click', prevSlide);\n\n \/\/ Keyboard navigation\n document.addEventListener('keydown', (e) => {\n if (overviewModal.classList.contains('opacity-100')) {\n if (e.key === 'Escape') closeOverview();\n return;\n }\n if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') {\n e.preventDefault();\n nextSlide();\n } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {\n e.preventDefault();\n prevSlide();\n } else if (e.key === 'Home') {\n goToSlide(0);\n } else if (e.key === 'End') {\n goToSlide(totalSlides - 1);\n }\n });\n\n \/\/ Touch Swipe Support for Mobile (Left\/Right)\n let touchStartX = 0;\n let touchEndX = 0;\n let touchStartY = 0;\n let touchEndY = 0;\n\n slideStage.addEventListener('touchstart', (e) => {\n touchStartX = e.changedTouches[0].screenX;\n touchStartY = e.changedTouches[0].screenY;\n }, { passive: true });\n\n slideStage.addEventListener('touchend', (e) => {\n touchEndX = e.changedTouches[0].screenX;\n touchEndY = e.changedTouches[0].screenY;\n handleSwipe();\n }, { passive: true });\n\n function handleSwipe() {\n const xDiff = touchEndX - touchStartX;\n const yDiff = touchEndY - touchStartY;\n\n \/\/ Ensure horizontal swipe is dominant\n if (Math.abs(xDiff) > Math.abs(yDiff) && Math.abs(xDiff) > 40) {\n if (xDiff < 0) {\n nextSlide(); \/\/ Swipe Left -> Next\n } else {\n prevSlide(); \/\/ Swipe Right -> Prev\n }\n }\n }\n\n \/\/ Overview Modal Controls\n function openOverview() {\n overviewModal.classList.remove('pointer-events-none', 'opacity-0');\n overviewModal.classList.add('opacity-100');\n }\n\n function closeOverview() {\n overviewModal.classList.add('pointer-events-none', 'opacity-0');\n overviewModal.classList.remove('opacity-100');\n }\n\n btnOverview.addEventListener('click', openOverview);\n btnCloseOverview.addEventListener('click', closeOverview);\n\n \/\/ Fullscreen API\n btnFullscreen.addEventListener('click', () => {\n if (!document.fullscreenElement) {\n document.documentElement.requestFullscreen().catch(err => {\n console.log(`Fullscreen error: ${err.message}`);\n });\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n }\n }\n });\n\n \/\/ Initial render\n updateSlideView();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Childhood Counseling & Workshop Presentation Deck Childhood Counseling Deck Panduan Interaktif Workshop Bimbingan & Konseling PAUD 1 \/ 14 Modul Workshop & Presentasi PAUD & AUD Counseling Layanan Bimbingan & Konseling Anak Usia Dini Panduan praktis dan interaktif memahami konsep dasar perkembangan anak, strategi edutainment, serta 4 Core Counseling Skills berlandaskan model terapi modern. Teori […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":1,"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":14,"date":"2026-09-03T14:28:47","date_gmt":"2026-09-03T14:28:47","guid":{"rendered":"https:\/\/yayasanatthoyyibah.com\/?page_id=14"},"modified":"2026-09-03T14:28:47","modified_gmt":"2026-09-03T14:28:47","slug":"14-2","status":"publish","type":"page","link":"https:\/\/yayasanatthoyyibah.com\/?page_id=14","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Childhood Counseling & Workshop Presentation Deck<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n brand: {\n navy: '#0f172a',\n slate: '#1e293b',\n teal: '#2b8a78',\n tealLight: '#e6f4f1',\n coral: '#e06d53',\n coralLight: '#fcefe9',\n gold: '#f59e0b',\n bg: '#f8fafc'\n }\n },\n fontFamily: {\n sans: ['\"Plus Jakarta Sans\"', 'sans-serif'],\n heading: ['Poppins', 'sans-serif']\n }\n }\n }\n }\n <\/script>\n\n <style>\n body {\n font-family: 'Plus Jakarta Sans', sans-serif;\n touch-action: pan-y;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .slide-stage {\n perspective: 1000px;\n }\n\n .slide-card {\n display: none;\n opacity: 0;\n transform: translateX(30px) scale(0.98);\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .slide-card.active {\n display: flex;\n opacity: 1;\n transform: translateX(0) scale(1);\n }\n\n .slide-card.exit-left {\n display: flex;\n opacity: 0;\n transform: translateX(-30px) scale(0.98);\n }\n\n \/* Custom scrollbars inside slides *\/\n .custom-scroll::-webkit-scrollbar {\n width: 6px;\n }\n .custom-scroll::-webkit-scrollbar-track {\n background: #f1f5f9;\n border-radius: 4px;\n }\n .custom-scroll::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 4px;\n }\n .custom-scroll::-webkit-scrollbar-thumb:hover {\n background: #94a3b8;\n }\n\n \/* Glassmorphism utility *\/\n .glass-panel {\n background: rgba(255, 255, 255, 0.85);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-950 text-slate-800 h-full w-full overflow-hidden flex flex-col justify-between\">\n\n \n <header class=\"w-full bg-slate-900\/90 border-b border-slate-800 px-4 py-3 text-white z-30 flex items-center justify-between shrink-0\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-lg bg-teal-600 flex items-center justify-center font-bold text-white shadow-md\">\n <i class=\"fa-solid fa-child-reaching text-sm\"><\/i>\n <\/div>\n <div>\n <h1 class=\"font-heading text-sm md:text-base font-bold text-slate-100 leading-tight\">Childhood Counseling Deck<\/h1>\n <p class=\"text-xs text-slate-400 hidden sm:block\">Panduan Interaktif Workshop Bimbingan & Konseling PAUD<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex items-center gap-2 md:gap-3\">\n \n <div class=\"bg-slate-800 border border-slate-700 text-teal-400 font-mono text-xs md:text-sm px-3 py-1.5 rounded-full flex items-center gap-2\">\n <i class=\"fa-solid fa-layer-group text-slate-400 text-xs\"><\/i>\n <span id=\"slideCounter\">1 \/ 14<\/span>\n <\/div>\n\n \n <button id=\"btnOverview\" title=\"Lihat Semua Slide\" class=\"p-2 w-9 h-9 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white transition flex items-center justify-center\">\n <i class=\"fa-solid fa-grip\"><\/i>\n <\/button>\n\n \n <button id=\"btnFullscreen\" title=\"Layar Penuh\" class=\"p-2 w-9 h-9 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white transition flex items-center justify-center\">\n <i class=\"fa-solid fa-expand\"><\/i>\n <\/button>\n <\/div>\n <\/header>\n\n \n <main class=\"relative flex-1 w-full max-w-7xl mx-auto p-2 sm:p-4 md:p-6 flex items-center justify-center overflow-hidden\">\n \n \n <div class=\"absolute top-0 left-0 right-0 h-1 bg-slate-800 z-20\">\n <div id=\"progressBar\" class=\"h-full bg-gradient-to-r from-teal-500 to-coral-500 w-0 transition-all duration-300\"><\/div>\n <\/div>\n\n \n <div id=\"slideStage\" class=\"relative w-full h-full bg-slate-900 rounded-2xl md:rounded-3xl border border-slate-800\/80 shadow-2xl overflow-hidden flex flex-col\">\n \n \n <div class=\"slide-card active w-full h-full flex-col justify-between p-6 md:p-12 bg-gradient-to-br from-slate-900 via-slate-900 to-teal-950 text-white relative overflow-hidden\" data-slide=\"1\">\n <div class=\"absolute -right-20 -top-20 w-80 h-80 bg-teal-500\/10 rounded-full blur-3xl pointer-events-none\"><\/div>\n <div class=\"absolute -left-20 -bottom-20 w-80 h-80 bg-orange-500\/10 rounded-full blur-3xl pointer-events-none\"><\/div>\n\n <div class=\"flex justify-between items-center z-10\">\n <span class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold bg-teal-500\/20 text-teal-300 border border-teal-500\/30\">\n <i class=\"fa-solid fa-graduation-cap\"><\/i> Modul Workshop & Presentasi\n <\/span>\n <span class=\"text-xs text-slate-400\">PAUD & AUD Counseling<\/span>\n <\/div>\n\n <div class=\"my-auto z-10 max-w-3xl\">\n <h1 class=\"font-heading text-3xl sm:text-5xl md:text-6xl font-extrabold text-white tracking-tight leading-tight mb-4\">\n Layanan Bimbingan & <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-emerald-300\">Konseling Anak<\/span> Usia Dini\n <\/h1>\n <p class=\"text-slate-300 text-sm sm:text-lg leading-relaxed mb-6\">\n Panduan praktis dan interaktif memahami konsep dasar perkembangan anak, strategi edutainment, serta <strong class=\"text-white\">4 Core Counseling Skills<\/strong> berlandaskan model terapi modern.\n <\/p>\n <div class=\"flex flex-wrap gap-3\">\n <div class=\"px-3 py-2 rounded-xl bg-slate-800\/80 border border-slate-700 text-slate-300 text-xs flex items-center gap-2\">\n <i class=\"fa-solid fa-brain text-teal-400\"><\/i> Teori Kognitif AUD\n <\/div>\n <div class=\"px-3 py-2 rounded-xl bg-slate-800\/80 border border-slate-700 text-slate-300 text-xs flex items-center gap-2\">\n <i class=\"fa-solid fa-comments text-coral-400\"><\/i> 4 Core Skills\n <\/div>\n <div class=\"px-3 py-2 rounded-xl bg-slate-800\/80 border border-slate-700 text-slate-300 text-xs flex items-center gap-2\">\n <i class=\"fa-solid fa-heart-pulse text-amber-400\"><\/i> Dr. David Hawkins 3-Zone\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"pt-4 border-t border-slate-800\/80 flex items-center justify-between text-xs text-slate-400 z-10\">\n <span>Gunakan panah ← → atau usap layar untuk berpindah slide<\/span>\n <span class=\"text-teal-400 font-medium\">Bimbingan & Konseling Berbasis Perkembangan<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col justify-center items-center p-6 md:p-12 bg-slate-900 text-white text-center relative overflow-hidden\" data-slide=\"2\">\n <div class=\"max-w-2xl z-10 my-auto\">\n <span class=\"inline-block px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-orange-500\/20 text-orange-400 border border-orange-500\/30 mb-4\">\n BAGIAN I\n <\/span>\n <h2 class=\"font-heading text-3xl sm:text-5xl font-bold mb-4\">Konsep Dasar & Pembelajaran PAUD<\/h2>\n <div class=\"w-16 h-1 bg-teal-500 mx-auto rounded-full mb-6\"><\/div>\n <p class=\"text-slate-300 text-base sm:text-lg leading-relaxed\">\n Memahami pentingnya layanan bimbingan konseling pada anak usia dini, regulasi emosi, adaptasi lingkungan, serta stimulasi kognitif melalui model pembelajaran yang menyenangkan.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"3\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Fondasi Layanan<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Peran BK Pada Anak Usia Dini<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 my-auto\">\n <div class=\"p-5 rounded-2xl bg-white border border-slate-200 shadow-sm hover:shadow-md transition\">\n <div class=\"w-10 h-10 rounded-xl bg-teal-100 text-teal-700 flex items-center justify-center font-bold mb-3\">\n <i class=\"fa-solid fa-heart\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-semibold text-lg text-slate-900 mb-2\">Regulasi Emosi Sehat<\/h3>\n <p class=\"text-slate-600 text-sm leading-relaxed\">\n Mengajarkan anak mengelola emosi positif (bernapas dalam, mengambil waktu tenang saat marah, mengungkapkan kata-kata) serta menghormati emosi orang lain.\n <\/p>\n <\/div>\n\n <div class=\"p-5 rounded-2xl bg-white border border-slate-200 shadow-sm hover:shadow-md transition\">\n <div class=\"w-10 h-10 rounded-xl bg-orange-100 text-orange-700 flex items-center justify-center font-bold mb-3\">\n <i class=\"fa-solid fa-users\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-semibold text-lg text-slate-900 mb-2\">Mengelola Konflik & Empati<\/h3>\n <p class=\"text-slate-600 text-sm leading-relaxed\">\n Membantu anak menyelesaikan masalah dengan adil, berbagi mainan, serta peka terhadap isyarat non-verbal (ekspresi wajah dan gestur tubuh).\n <\/p>\n <\/div>\n\n <div class=\"p-5 rounded-2xl bg-white border border-slate-200 shadow-sm hover:shadow-md transition\">\n <div class=\"w-10 h-10 rounded-xl bg-indigo-100 text-indigo-700 flex items-center justify-center font-bold mb-3\">\n <i class=\"fa-solid fa-compass\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-semibold text-lg text-slate-900 mb-2\">Adaptasi Lingkungan Baru<\/h3>\n <p class=\"text-slate-600 text-sm leading-relaxed\">\n Meringankan rasa cemas dan stres saat anak memasuki kelas\/sekolah baru melalui pengenalan lingkungan yang aman dan penuh dukungan.\n <\/p>\n <\/div>\n\n <div class=\"p-5 rounded-2xl bg-white border border-slate-200 shadow-sm hover:shadow-md transition\">\n <div class=\"w-10 h-10 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center font-bold mb-3\">\n <i class=\"fa-solid fa-sliders\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-semibold text-lg text-slate-900 mb-2\">Pendekatan Individual<\/h3>\n <p class=\"text-slate-600 text-sm leading-relaxed\">\n Mengidentifikasi gaya belajar unik setiap anak (visual, auditori, kinestetik) agar pemberian bimbingan berlangsung efektif dan relevan.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"4\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Teori Perkembangan<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">3 Pilar Kognitif Anak Usia Dini<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-5 my-auto\">\n \n <div class=\"bg-white rounded-2xl p-6 border border-slate-200 shadow-sm flex flex-col justify-between\">\n <div>\n <div class=\"w-12 h-12 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center text-xl font-bold mb-4\">\n <i class=\"fa-solid fa-brain\"><\/i>\n <\/div>\n <h3 class=\"font-heading text-lg font-bold text-slate-900 mb-2\">Jean Piaget<\/h3>\n <p class=\"text-xs font-semibold text-teal-600 mb-3 uppercase\">Proses Kognitif Bertahap<\/p>\n <ul class=\"text-xs text-slate-600 space-y-2 leading-relaxed\">\n <li class=\"flex items-start gap-2\">\n <span class=\"font-bold text-teal-600\">\u2022<\/span>\n <span><strong>Asimilasi:<\/strong> Penyatuan informasi baru ke struktur kognitif lama.<\/span>\n <\/li>\n <li class=\"flex items-start gap-2\">\n <span class=\"font-bold text-teal-600\">\u2022<\/span>\n <span><strong>Akomodasi:<\/strong> Penyusunan ulang struktur kognitif sesuai situasi baru.<\/span>\n <\/li>\n <li class=\"flex items-start gap-2\">\n <span class=\"font-bold text-teal-600\">\u2022<\/span>\n <span><strong>Equilibrasi:<\/strong> Keseimbangan kognitif yang stabil.<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl p-6 border border-slate-200 shadow-sm flex flex-col justify-between\">\n <div>\n <div class=\"w-12 h-12 rounded-xl bg-orange-50 text-orange-600 flex items-center justify-center text-xl font-bold mb-4\">\n <i class=\"fa-solid fa-magnifying-glass font-bold\"><\/i>\n <\/div>\n <h3 class=\"font-heading text-lg font-bold text-slate-900 mb-2\">Jerome Bruner<\/h3>\n <p class=\"text-xs font-semibold text-orange-600 mb-3 uppercase\">Discovery Learning<\/p>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Belajar Penemuan di mana anak memahami lingkungan melalui eksperimen, penemuan bebas, dan pengalaman praktis secara langsung tanpa tekanan.\n <\/p>\n <\/div>\n <div class=\"mt-4 p-3 bg-orange-50 rounded-xl text-xs text-orange-800 font-medium\">\n Menekankan eksplorasi bebas dan partisipasi aktif anak.\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl p-6 border border-slate-200 shadow-sm flex flex-col justify-between\">\n <div>\n <div class=\"w-12 h-12 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center text-xl font-bold mb-4\">\n <i class=\"fa-solid fa-sitemap\"><\/i>\n <\/div>\n <h3 class=\"font-heading text-lg font-bold text-slate-900 mb-2\">David Ausubel<\/h3>\n <p class=\"text-xs font-semibold text-indigo-600 mb-3 uppercase\">Advance Organizers<\/p>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Memberikan kerangka konseptual awal yang menghubungkan pengetahuan yang sudah dimiliki dengan informasi baru agar mudah disimpulkan.\n <\/p>\n <\/div>\n <div class=\"mt-4 p-3 bg-indigo-50 rounded-xl text-xs text-indigo-800 font-medium\">\n Membuat materi pembelajaran lebih bermakna dan terstruktur.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"5\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Metode Pembelajaran<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Strategi Kreatif Layanan Informasi<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 my-auto\">\n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 flex gap-4 items-start shadow-sm\">\n <div class=\"p-3 bg-teal-100 text-teal-700 rounded-xl text-lg font-bold shrink-0\">\n <i class=\"fa-solid fa-gamepad\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Bermain (Play-Based)<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Melalui permainan (seperti petak umpet, Cilukba, atau main peran), anak belajar berbagi hak milik, menyusun aturan bersama, dan mengembangkan daya cipta.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 flex gap-4 items-start shadow-sm\">\n <div class=\"p-3 bg-orange-100 text-orange-700 rounded-xl text-lg font-bold shrink-0\">\n <i class=\"fa-solid fa-face-laugh-beam\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Pendekatan Humor<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Humor mencairkan suasana kaku, meredakan ketegangan fisik\/otak neocortex, serta mendorong anak mengekspresikan gagasan tanpa takut dihakimi.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 flex gap-4 items-start shadow-sm\">\n <div class=\"p-3 bg-indigo-100 text-indigo-700 rounded-xl text-lg font-bold shrink-0\">\n <i class=\"fa-solid fa-book-open-reader\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Bercerita & Dongeng<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Menanamkan nilai moral & etika lewat buku bergambar, papan flanel, boneka tangan, mau pun dramatisasi karakter fabel\/cerita rakyat.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 flex gap-4 items-start shadow-sm\">\n <div class=\"p-3 bg-amber-100 text-amber-700 rounded-xl text-lg font-bold shrink-0\">\n <i class=\"fa-solid fa-people-group\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Pembelajaran Kooperatif<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Pembagian tugas kolaboratif dalam kelompok heterogen memfasilitasi kebiasaan berdiskusi, refleksi bersama, dan menghargai perbedaan.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col justify-center items-center p-6 md:p-12 bg-slate-900 text-white text-center relative overflow-hidden\" data-slide=\"6\">\n <div class=\"max-w-2xl z-10 my-auto\">\n <span class=\"inline-block px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-teal-500\/20 text-teal-400 border border-teal-500\/30 mb-4\">\n BAGIAN II\n <\/span>\n <h2 class=\"font-heading text-3xl sm:text-5xl font-bold mb-4\">4 Core Counseling Skills<\/h2>\n <div class=\"w-16 h-1 bg-orange-500 mx-auto rounded-full mb-6\"><\/div>\n <p class=\"text-slate-300 text-base sm:text-lg leading-relaxed\">\n Empat keterampilan inti yang wajib dikuasai oleh konselor\/pendidik PAUD untuk mengurai masalah anak, membangun empati, dan mengarahkan solusi.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"7\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Kerangka Keterampilan<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Ringkasan 4 Skill Utama<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 my-auto\">\n \n <div class=\"bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between border-t-4 border-t-teal-500\">\n <div>\n <div class=\"w-10 h-10 rounded-xl bg-teal-100 text-teal-700 flex items-center justify-center font-bold mb-3\">1<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Pedekate (Rapport)<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Formula <strong>CCT<\/strong> (Connect, Comfort, Trust) untuk menciptakan kehangatan dan rasa aman.\n <\/p>\n <\/div>\n <span class=\"text-[10px] font-bold text-teal-600 uppercase tracking-wide bg-teal-50 px-2 py-1 rounded\">Fondasi Hubungan<\/span>\n <\/div>\n\n \n <div class=\"bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between border-t-4 border-t-orange-500\">\n <div>\n <div class=\"w-10 h-10 rounded-xl bg-orange-100 text-orange-700 flex items-center justify-center font-bold mb-3\">2<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Mindful Listening<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Prinsip <strong>S.U.N<\/strong> (Sabar, Utuh, Netral) serta memisahkan Fakta vs Opini.\n <\/p>\n <\/div>\n <span class=\"text-[10px] font-bold text-orange-600 uppercase tracking-wide bg-orange-50 px-2 py-1 rounded\">Menangkap Isyarat<\/span>\n <\/div>\n\n \n <div class=\"bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between border-t-4 border-t-indigo-500\">\n <div>\n <div class=\"w-10 h-10 rounded-xl bg-indigo-100 text-indigo-700 flex items-center justify-center font-bold mb-3\">3<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Powerful Questions<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Mengarahkan pertanyaan sesuai 3 Zona (Healing, Meaning, Empowering).\n <\/p>\n <\/div>\n <span class=\"text-[10px] font-bold text-indigo-600 uppercase tracking-wide bg-indigo-50 px-2 py-1 rounded\">Eksplorasi Solusi<\/span>\n <\/div>\n\n \n <div class=\"bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between border-t-4 border-t-amber-500\">\n <div>\n <div class=\"w-10 h-10 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center font-bold mb-3\">4<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Speak Positive Vibes<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Validasi perasaan, reframing perspektif, serta memotivasi dengan afirmatif.\n <\/p>\n <\/div>\n <span class=\"text-[10px] font-bold text-amber-600 uppercase tracking-wide bg-amber-50 px-2 py-1 rounded\">Afirmasi & Aksi<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"8\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Skill #1<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Building Rapport: Formula CCT<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-5 my-auto\">\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm\">\n <div class=\"w-10 h-10 rounded-xl bg-teal-100 text-teal-700 font-bold flex items-center justify-center mb-3 text-base\">C<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-lg mb-2\">1. Connect<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Hadir secara utuh (presentness), menyapa nama anak secara hangat, menyejajarkan posisi tubuh (eye-level), serta menunjukkan penerimaan tanpa prasangka.\n <\/p>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm\">\n <div class=\"w-10 h-10 rounded-xl bg-orange-100 text-orange-700 font-bold flex items-center justify-center mb-3 text-base\">C<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-lg mb-2\">2. Comfort<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Menyesuaikan nada suara yang lembut (pacing), gestur terbuka, dan menciptakan rasa aman dari ancaman penghakiman atau teguran langsung.\n <\/p>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm\">\n <div class=\"w-10 h-10 rounded-xl bg-indigo-100 text-indigo-700 font-bold flex items-center justify-center mb-3 text-base\">T<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-lg mb-2\">3. Trust & Leading<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Setelah rasa percaya terbangun mendalam melalui kalibrasi emosi, konselor secara perlahan mengarahkan (leading) percakapan menuju topik konseling inti.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"9\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Skill #2<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Mindful Listening & Isyarat Emosi<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 my-auto\">\n \n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm\">\n <h3 class=\"font-heading font-bold text-teal-700 text-lg mb-3 flex items-center gap-2\">\n <i class=\"fa-solid fa-sun\"><\/i> Prinsip S.U.N\n <\/h3>\n <ul class=\"space-y-3 text-xs text-slate-600\">\n <li class=\"p-3 bg-slate-50 rounded-xl border border-slate-100\">\n <strong class=\"text-slate-900 font-semibold block text-sm\">S – Sabar<\/strong>\n Tidak terburu-buru memotong pembicaraan anak atau memberi solusi instan sebelum masalah terurai utuh.\n <\/li>\n <li class=\"p-3 bg-slate-50 rounded-xl border border-slate-100\">\n <strong class=\"text-slate-900 font-semibold block text-sm\">U – Utuh<\/strong>\n Mendengarkan dengan segenap perhatian (pikiran, mata, dan telinga) tanpa terdistraksi gawai atau hal lain.\n <\/li>\n <li class=\"p-3 bg-slate-50 rounded-xl border border-slate-100\">\n <strong class=\"text-slate-900 font-semibold block text-sm\">N – Netral<\/strong>\n Menunda penilaian (non-judgmental) dan tidak memberi label buruk pada emosi anak.\n <\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between\">\n <div>\n <h3 class=\"font-heading font-bold text-orange-700 text-lg mb-3 flex items-center gap-2\">\n <i class=\"fa-solid fa-eye\"><\/i> Look, Sound & Feel\n <\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-4\">\n Mengamati aspek non-verbal anak untuk menangkap pesan tersirat dan membedakan antara <strong class=\"text-slate-900\">Fakta Obyektif<\/strong> vs <strong class=\"text-slate-900\">Opini\/Asumsi<\/strong>:\n <\/p>\n <div class=\"space-y-2 text-xs text-slate-700\">\n <div class=\"flex items-center gap-2\"><i class=\"fa-solid fa-check text-teal-600\"><\/i> <strong>Look:<\/strong> Ekspresi wajah, tatapan mata, dan gestur fisik.<\/div>\n <div class=\"flex items-center gap-2\"><i class=\"fa-solid fa-check text-teal-600\"><\/i> <strong>Sound:<\/strong> Intonasi, kecepatan bicara, dan desah napas.<\/div>\n <div class=\"flex items-center gap-2\"><i class=\"fa-solid fa-check text-teal-600\"><\/i> <strong>Feel:<\/strong> Suasana emosi tersirat yang dirasakan konselor.<\/div>\n <\/div>\n <\/div>\n <div class=\"mt-4 p-3 bg-teal-50 rounded-xl text-xs text-teal-800 font-medium\">\n Tujuan: Membantu anak memisahkan kenyataan objektif dari rasa takut berlebih.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"10\">\n <div class=\"mb-4\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Skill #3 & Landasan Terapi<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">3 Zona Terapi (Dr. David Hawkins)<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 my-auto\">\n \n <div class=\"bg-white p-5 rounded-2xl border border-red-200 shadow-sm flex flex-col justify-between\">\n <div>\n <span class=\"px-2.5 py-1 rounded-full text-[10px] font-bold bg-red-100 text-red-700 uppercase mb-2 inline-block\">Zona Fear<\/span>\n <h3 class=\"font-heading font-bold text-slate-900 text-lg mb-1\">1. Healing Questions<\/h3>\n <p class=\"text-xs font-semibold text-red-600 mb-2\">Gali Akar & Validasi Luka Batin<\/p>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Menghadapi cemas, rasa bersalah, atau takut. Fokus pada merilis emosi terpendam.\n <\/p>\n <\/div>\n <div class=\"p-3 bg-slate-50 rounded-xl text-xs text-slate-700 font-mono italic\">\n “Bagaimana perasaanmu saat kejadian itu terjadi?”\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-5 rounded-2xl border border-amber-200 shadow-sm flex flex-col justify-between\">\n <div>\n <span class=\"px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 uppercase mb-2 inline-block\">Zona Learning<\/span>\n <h3 class=\"font-heading font-bold text-slate-900 text-lg mb-1\">2. Meaning Questions<\/h3>\n <p class=\"text-xs font-semibold text-amber-700 mb-2\">Penerimaan & Ambil Hikmah<\/p>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Mengeksplorasi sumber daya (resource) dan membedakan hal yang bisa diubah vs tidak.\n <\/p>\n <\/div>\n <div class=\"p-3 bg-slate-50 rounded-xl text-xs text-slate-700 font-mono italic\">\n “Apa yang bisa kamu pelajari dari kejadian ini?”\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-5 rounded-2xl border border-emerald-200 shadow-sm flex flex-col justify-between\">\n <div>\n <span class=\"px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800 uppercase mb-2 inline-block\">Zona Growth<\/span>\n <h3 class=\"font-heading font-bold text-slate-900 text-lg mb-1\">3. Empowering Questions<\/h3>\n <p class=\"text-xs font-semibold text-emerald-700 mb-2\">Orientasi Solusi & Komitmen<\/p>\n <p class=\"text-xs text-slate-600 leading-relaxed mb-3\">\n Membimbing anak menyusun langkah nyata sederhana dan membangun komitmen aksi.\n <\/p>\n <\/div>\n <div class=\"p-3 bg-slate-50 rounded-xl text-xs text-slate-700 font-mono italic\">\n “Langkah kecil apa yang siap kamu lakukan besok?”\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"11\">\n <div class=\"mb-4\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Panduan Praktis Bertanya<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Contoh Model Pertanyaan Konseling<\/h2>\n <\/div>\n\n <div class=\"overflow-x-auto w-full my-auto\">\n <table class=\"w-full text-xs text-left text-slate-700 border-collapse bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-200\">\n <thead class=\"bg-slate-900 text-white font-heading text-xs\">\n <tr>\n <th class=\"p-3 sm:p-4 border-b border-slate-800\">Healing Question<\/th>\n <th class=\"p-3 sm:p-4 border-b border-slate-800\">Meaning Question<\/th>\n <th class=\"p-3 sm:p-4 border-b border-slate-800\">Empowering Question<\/th>\n <\/tr>\n <\/thead>\n <tbody class=\"divide-y divide-slate-100\">\n <tr class=\"hover:bg-slate-50\">\n <td class=\"p-3 sm:p-4\">Bisakah kamu ceritakan hal tidak nyaman yang dialami?<\/td>\n <td class=\"p-3 sm:p-4\">Apa yang sudah kamu lakukan saat menghadapi hal tersebut?<\/td>\n <td class=\"p-3 sm:p-4\">Kalau saya tidak salah menangkap, kamu merasa… benar begitu? (Clarifying)<\/td>\n <\/tr>\n <tr class=\"hover:bg-slate-50\">\n <td class=\"p-3 sm:p-4\">Bagaimana perasaanmu saat kejadian itu terjadi?<\/td>\n <td class=\"p-3 sm:p-4\">Bagaimana hasilnya? Mana yang bisa kamu ubah \/ tidak mungkin diubah?<\/td>\n <td class=\"p-3 sm:p-4\">Terima kasih sudah berbagi. Saya paham ini hal yang tidak mudah buatmu. (Validasi)<\/td>\n <\/tr>\n <tr class=\"hover:bg-slate-50\">\n <td class=\"p-3 sm:p-4\">Menurutmu, apa dampak dari kejadian ini bagi dirimu?<\/td>\n <td class=\"p-3 sm:p-4\">Jika bisa memilih, apa yang ingin kamu lakukan secara berbeda?<\/td>\n <td class=\"p-3 sm:p-4\">Siapa orang dewasa yang bisa bantumu saat rasa ini muncul lagi?<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"12\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Alur Pelaksanaan<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">4 Tahapan Sesi Konseling Anak<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 my-auto relative\">\n \n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 shadow-sm relative\">\n <div class=\"w-8 h-8 rounded-full bg-teal-600 text-white font-bold text-xs flex items-center justify-center mb-3\">01<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Membangun Kedekatan<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Menerapkan formula CCT (Connect, Comfort, Trust) melalui observing & pacing suasana emosi anak.\n <\/p>\n <\/div>\n\n \n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 shadow-sm relative\">\n <div class=\"w-8 h-8 rounded-full bg-orange-600 text-white font-bold text-xs flex items-center justify-center mb-3\">02<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Akar Masalah<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Mindful listening untuk memisahkan fakta vs opini, lalu mengajukan <em>Healing Questions<\/em>.\n <\/p>\n <\/div>\n\n \n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 shadow-sm relative\">\n <div class=\"w-8 h-8 rounded-full bg-indigo-600 text-white font-bold text-xs flex items-center justify-center mb-3\">03<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Berdamai dng Masalah<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Reframing cara pandang dan mengeksplorasi sumber daya internal\/eksternal lewat <em>Meaning Questions<\/em>.\n <\/p>\n <\/div>\n\n \n <div class=\"p-5 bg-white rounded-2xl border border-slate-200 shadow-sm relative\">\n <div class=\"w-8 h-8 rounded-full bg-amber-600 text-white font-bold text-xs flex items-center justify-center mb-3\">04<\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-1\">Komitmen Aksi<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Merumuskan langkah aksi sederhana melalui <em>Empowering Questions<\/em> & motivasi afirmatif.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col p-6 sm:p-8 md:p-10 bg-slate-50 text-slate-800 overflow-y-auto custom-scroll\" data-slide=\"13\">\n <div class=\"mb-6\">\n <span class=\"text-xs font-bold tracking-widest text-teal-600 uppercase\">Kesehatan Emosi Konselor<\/span>\n <h2 class=\"font-heading text-2xl sm:text-3xl font-bold text-slate-900\">Self-Care & Regulasi Diri Konselor<\/h2>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-5 my-auto\">\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm text-center\">\n <div class=\"w-12 h-12 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center text-xl font-bold mx-auto mb-4\">\n <i class=\"fa-solid fa-wind\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-2\">Mindful Breathing (4-4-4)<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Olah napas teratur sebelum dan sesudah sesi untuk menjaga ketenangan pikiran, kesadaran netral, dan mencegah limpahan beban emosi anak.\n <\/p>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm text-center\">\n <div class=\"w-12 h-12 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center text-xl font-bold mx-auto mb-4\">\n <i class=\"fa-solid fa-sun\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-2\">Taking in Good<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Secara sadar meresapi momen-momen positif kecil setiap hari guna mengisi kembali energi emosional dan mencegah burnout pekerjaan.\n <\/p>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm text-center\">\n <div class=\"w-12 h-12 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center text-xl font-bold mx-auto mb-4\">\n <i class=\"fa-solid fa-star\"><\/i>\n <\/div>\n <h3 class=\"font-heading font-bold text-slate-900 text-base mb-2\">Creating Positive Peak<\/h3>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Menciptakan titik terang positif di tengah hari yang berat melalui aktivitas sederhana, apresiasi diri, dan ritual bersyukur harian.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"slide-card w-full h-full flex-col justify-between p-6 md:p-12 bg-gradient-to-br from-slate-900 via-slate-900 to-slate-950 text-white relative overflow-hidden text-center\" data-slide=\"14\">\n <div class=\"my-auto z-10 max-w-2xl mx-auto\">\n <div class=\"w-16 h-16 rounded-full bg-teal-500\/20 text-teal-300 border border-teal-500\/40 flex items-center justify-center mx-auto mb-6 text-2xl\">\n <i class=\"fa-solid fa-heart\"><\/i>\n <\/div>\n <h2 class=\"font-heading text-3xl sm:text-5xl font-extrabold mb-4\">Terima Kasih!<\/h2>\n <blockquote class=\"text-slate-300 italic text-base sm:text-xl font-light mb-6 leading-relaxed\">\n “Mendengarkan dengan penuh empati dan rasa ingin tahu adalah awal dari proses pemulihan dan pertumbuhan anak.”\n <\/blockquote>\n <p class=\"text-xs sm:text-sm text-teal-400 font-semibold tracking-wider uppercase\">\n Program Bimbingan & Konseling Anak Usia Dini\n <\/p>\n <\/div>\n\n <div class=\"pt-4 border-t border-slate-800 text-xs text-slate-500 z-10 flex justify-between items-center\">\n <span>Workshop Childhood Counseling<\/span>\n <span>Akhir Presentasi<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/main>\n\n \n <footer class=\"w-full bg-slate-900\/90 border-t border-slate-800 px-4 py-3 text-white z-30 shrink-0\">\n <div class=\"max-w-7xl mx-auto flex items-center justify-between\">\n \n <button id=\"btnPrev\" class=\"px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 hover:text-white transition flex items-center gap-2 text-xs md:text-sm font-semibold disabled:opacity-40 disabled:cursor-not-allowed\">\n <i class=\"fa-solid fa-arrow-left\"><\/i>\n <span class=\"hidden sm:inline\">Sebelumnya<\/span>\n <\/button>\n\n \n <div id=\"slideDots\" class=\"flex items-center gap-1.5 overflow-x-auto max-w-[50vw] px-2 py-1 custom-scroll\">\n \n <\/div>\n\n \n <button id=\"btnNext\" class=\"px-4 py-2 rounded-xl bg-teal-600 hover:bg-teal-500 text-white transition flex items-center gap-2 text-xs md:text-sm font-semibold disabled:opacity-40 disabled:cursor-not-allowed\">\n <span class=\"hidden sm:inline\">Berikutnya<\/span>\n <i class=\"fa-solid fa-arrow-right\"><\/i>\n <\/button>\n <\/div>\n <\/footer>\n\n \n <div id=\"overviewModal\" class=\"fixed inset-0 bg-slate-950\/80 backdrop-blur-md z-50 opacity-0 pointer-events-none transition-all duration-300 flex flex-col p-4 md:p-8\">\n <div class=\"flex items-center justify-between mb-6 text-white max-w-7xl mx-auto w-full\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-grip text-teal-400 text-xl\"><\/i>\n <h2 class=\"font-heading text-lg md:text-xl font-bold\">Daftar Slide Presentasi<\/h2>\n <\/div>\n <button id=\"btnCloseOverview\" class=\"w-10 h-10 rounded-full bg-slate-800 text-slate-300 hover:text-white flex items-center justify-center transition\">\n <i class=\"fa-solid fa-xmark text-lg\"><\/i>\n <\/button>\n <\/div>\n\n <div id=\"overviewGrid\" class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4 max-w-7xl mx-auto w-full overflow-y-auto custom-scroll p-1\">\n \n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const slides = Array.from(document.querySelectorAll('.slide-card'));\n const totalSlides = slides.length;\n let currentSlideIndex = 0;\n\n const slideCounter = document.getElementById('slideCounter');\n const progressBar = document.getElementById('progressBar');\n const btnPrev = document.getElementById('btnPrev');\n const btnNext = document.getElementById('btnNext');\n const slideDots = document.getElementById('slideDots');\n const overviewModal = document.getElementById('overviewModal');\n const overviewGrid = document.getElementById('overviewGrid');\n const btnOverview = document.getElementById('btnOverview');\n const btnCloseOverview = document.getElementById('btnCloseOverview');\n const btnFullscreen = document.getElementById('btnFullscreen');\n const slideStage = document.getElementById('slideStage');\n\n \/\/ Render navigation dots\n slides.forEach((_, idx) => {\n const dot = document.createElement('button');\n dot.className = `w-2.5 h-2.5 rounded-full transition-all ${idx === 0 ? 'bg-teal-400 w-6' : 'bg-slate-700 hover:bg-slate-500'}`;\n dot.title = `Ke Slide ${idx + 1}`;\n dot.addEventListener('click', () => goToSlide(idx));\n slideDots.appendChild(dot);\n });\n\n \/\/ Render Overview Cards\n slides.forEach((slide, idx) => {\n const title = slide.querySelector('h1, h2, h3')?.innerText || `Slide ${idx + 1}`;\n const card = document.createElement('div');\n card.className = `p-3 rounded-xl bg-slate-800 border ${idx === 0 ? 'border-teal-500 bg-slate-800' : 'border-slate-700'} hover:border-teal-400 cursor-pointer transition flex flex-col justify-between h-28 text-left text-xs`;\n card.innerHTML = `\n <div class=\"flex items-center justify-between text-slate-400 font-mono text-[10px] mb-1\">\n <span>SLIDE ${idx + 1}<\/span>\n ${idx === currentSlideIndex ? '<i class=\"fa-solid fa-circle text-teal-400 text-[8px]\"><\/i>' : ''}\n <\/div>\n <div class=\"font-heading font-semibold text-slate-200 line-clamp-2\">${title}<\/div>\n `;\n card.addEventListener('click', () => {\n goToSlide(idx);\n closeOverview();\n });\n overviewGrid.appendChild(card);\n });\n\n \/\/ Update UI state\n function updateSlideView() {\n slides.forEach((slide, idx) => {\n slide.classList.remove('active', 'exit-left');\n if (idx === currentSlideIndex) {\n slide.classList.add('active');\n } else if (idx < currentSlideIndex) {\n slide.classList.add('exit-left');\n }\n });\n\n \/\/ Update counter & progress\n slideCounter.innerText = `${currentSlideIndex + 1} \/ ${totalSlides}`;\n const progressPercent = ((currentSlideIndex + 1) \/ totalSlides) * 100;\n progressBar.style.width = `${progressPercent}%`;\n\n \/\/ Update prev\/next buttons\n btnPrev.disabled = currentSlideIndex === 0;\n btnNext.disabled = currentSlideIndex === totalSlides - 1;\n\n \/\/ Update dots\n Array.from(slideDots.children).forEach((dot, idx) => {\n if (idx === currentSlideIndex) {\n dot.className = 'w-6 h-2.5 rounded-full bg-teal-400 transition-all';\n } else {\n dot.className = 'w-2.5 h-2.5 rounded-full bg-slate-700 hover:bg-slate-500 transition-all';\n }\n });\n\n \/\/ Update grid modal selections\n Array.from(overviewGrid.children).forEach((card, idx) => {\n if (idx === currentSlideIndex) {\n card.classList.add('border-teal-500', 'bg-slate-800');\n card.classList.remove('border-slate-700');\n } else {\n card.classList.remove('border-teal-500');\n card.classList.add('border-slate-700');\n }\n });\n }\n\n function goToSlide(index) {\n if (index < 0 || index >= totalSlides) return;\n currentSlideIndex = index;\n updateSlideView();\n }\n\n function nextSlide() {\n if (currentSlideIndex < totalSlides - 1) {\n currentSlideIndex++;\n updateSlideView();\n }\n }\n\n function prevSlide() {\n if (currentSlideIndex > 0) {\n currentSlideIndex--;\n updateSlideView();\n }\n }\n\n \/\/ Event listeners\n btnNext.addEventListener('click', nextSlide);\n btnPrev.addEventListener('click', prevSlide);\n\n \/\/ Keyboard navigation\n document.addEventListener('keydown', (e) => {\n if (overviewModal.classList.contains('opacity-100')) {\n if (e.key === 'Escape') closeOverview();\n return;\n }\n if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') {\n e.preventDefault();\n nextSlide();\n } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {\n e.preventDefault();\n prevSlide();\n } else if (e.key === 'Home') {\n goToSlide(0);\n } else if (e.key === 'End') {\n goToSlide(totalSlides - 1);\n }\n });\n\n \/\/ Touch Swipe Support for Mobile (Left\/Right)\n let touchStartX = 0;\n let touchEndX = 0;\n let touchStartY = 0;\n let touchEndY = 0;\n\n slideStage.addEventListener('touchstart', (e) => {\n touchStartX = e.changedTouches[0].screenX;\n touchStartY = e.changedTouches[0].screenY;\n }, { passive: true });\n\n slideStage.addEventListener('touchend', (e) => {\n touchEndX = e.changedTouches[0].screenX;\n touchEndY = e.changedTouches[0].screenY;\n handleSwipe();\n }, { passive: true });\n\n function handleSwipe() {\n const xDiff = touchEndX - touchStartX;\n const yDiff = touchEndY - touchStartY;\n\n \/\/ Ensure horizontal swipe is dominant\n if (Math.abs(xDiff) > Math.abs(yDiff) && Math.abs(xDiff) > 40) {\n if (xDiff < 0) {\n nextSlide(); \/\/ Swipe Left -> Next\n } else {\n prevSlide(); \/\/ Swipe Right -> Prev\n }\n }\n }\n\n \/\/ Overview Modal Controls\n function openOverview() {\n overviewModal.classList.remove('pointer-events-none', 'opacity-0');\n overviewModal.classList.add('opacity-100');\n }\n\n function closeOverview() {\n overviewModal.classList.add('pointer-events-none', 'opacity-0');\n overviewModal.classList.remove('opacity-100');\n }\n\n btnOverview.addEventListener('click', openOverview);\n btnCloseOverview.addEventListener('click', closeOverview);\n\n \/\/ Fullscreen API\n btnFullscreen.addEventListener('click', () => {\n if (!document.fullscreenElement) {\n document.documentElement.requestFullscreen().catch(err => {\n console.log(`Fullscreen error: ${err.message}`);\n });\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n }\n }\n });\n\n \/\/ Initial render\n updateSlideView();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Childhood Counseling & Workshop Presentation Deck Childhood Counseling Deck Panduan Interaktif Workshop Bimbingan & Konseling PAUD 1 \/ 14 Modul Workshop & Presentasi PAUD & AUD Counseling Layanan Bimbingan & Konseling Anak Usia Dini Panduan praktis dan interaktif memahami konsep dasar perkembangan anak, strategi edutainment, serta 4 Core Counseling Skills berlandaskan model terapi modern. Teori […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":1,"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/yayasanatthoyyibah.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}