Buletin DIKSI – Hero Section<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #9DCAEB 0%, #AFD5F0 100%);\n min-height: 100vh;\n padding: 20px;\n }\n\n .hero-container {\n background: linear-gradient(to bottom, #e8f0f8, #f8fafc);\n border-radius: 30px;\n max-width: 1200px;\n width: 100%;\n margin: 0 auto 40px;\n padding: 60px 40px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n display: flex;\n align-items: center;\n gap: 60px;\n animation: fadeInUp 0.8s ease;\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .magazine-container {\n flex: 1;\n position: relative;\n animation: float 3s ease-in-out infinite;\n }\n\n @keyframes float {\n 0%, 100% {\n transform: translateY(0) rotate(-2deg);\n }\n 50% {\n transform: translateY(-20px) rotate(-2deg);\n }\n }\n\n .magazine-img {\n width: 100%;\n max-width: 400px;\n height: auto;\n border-radius: 15px;\n box-shadow: \n -20px 20px 40px rgba(0, 0, 0, 0.2),\n 0 0 0 1px rgba(255, 255, 255, 0.5);\n transition: transform 0.3s ease;\n }\n\n .magazine-img:hover {\n transform: scale(1.05) rotate(0deg);\n }\n\n .content-container {\n flex: 1;\n animation: slideInRight 0.8s ease 0.2s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 0;\n transform: translateX(30px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n .badge {\n display: inline-block;\n background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);\n color: white;\n padding: 8px 20px;\n border-radius: 25px;\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 20px;\n box-shadow: 0 4px 15px rgba(253, 160, 133, 0.4);\n }\n\n .title {\n font-size: 48px;\n font-weight: 800;\n color: #2d3748;\n margin-bottom: 10px;\n line-height: 1.2;\n }\n\n .title-highlight {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .edition {\n font-size: 24px;\n color: #718096;\n margin-bottom: 20px;\n font-weight: 500;\n }\n\n .subtitle {\n font-size: 28px;\n color: #2d3748;\n font-weight: 700;\n margin-bottom: 30px;\n line-height: 1.4;\n }\n\n .button-group {\n display: flex;\n gap: 15px;\n flex-wrap: wrap;\n }\n\n .btn {\n padding: 16px 32px;\n border-radius: 12px;\n font-size: 16px;\n font-weight: 600;\n border: none;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n }\n\n .btn-primary {\n background: linear-gradient(135deg, #4c6ef5 0%, #364fc7 100%);\n color: white;\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(76, 110, 245, 0.4);\n }\n\n .btn-secondary {\n background: white;\n color: #4c6ef5;\n border: 2px solid #4c6ef5;\n }\n\n .btn-secondary:hover {\n background: #4c6ef5;\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(76, 110, 245, 0.3);\n }\n\n .icon {\n width: 20px;\n height: 20px;\n }\n\n \/* Archive Section *\/\n .archive-section {\n background: white;\n border-radius: 30px;\n max-width: 1200px;\n width: 100%;\n margin: 0 auto 40px;\n padding: 50px 40px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n animation: fadeInUp 0.8s ease 0.3s both;\n }\n\n .section-title {\n font-family: 'Montserrat', sans-serif;\n font-size: 32px;\n font-weight: 700;\n color: #2d3748;\n text-align: center;\n margin-bottom: 40px;\n }\n\n .archive-carousel {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 15px;\n }\n\n .archive-track {\n display: flex;\n gap: 25px;\n max-width: 964px;\n overflow-x: auto;\n scroll-behavior: smooth;\n scroll-snap-type: x mandatory;\n padding: 10px 4px 18px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n\n .archive-track::-webkit-scrollbar {\n display: none;\n }\n\n .archive-item {\n flex: 0 0 auto;\n width: 220px;\n scroll-snap-align: start;\n text-align: center;\n transition: transform 0.3s ease;\n }\n\n .archive-item:hover {\n transform: translateY(-5px);\n }\n\n .archive-arrow {\n flex-shrink: 0;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: none;\n background: white;\n color: #4c6ef5;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);\n transition: all 0.3s ease;\n }\n\n .archive-arrow svg {\n width: 22px;\n height: 22px;\n }\n\n .archive-arrow:hover:not(:disabled) {\n background: linear-gradient(135deg, #4c6ef5 0%, #364fc7 100%);\n color: white;\n transform: scale(1.08);\n box-shadow: 0 8px 24px rgba(76, 110, 245, 0.35);\n }\n\n .archive-arrow:disabled {\n opacity: 0.25;\n cursor: not-allowed;\n }\n\n .archive-link {\n text-decoration: none;\n display: block;\n }\n\n .archive-thumbnail {\n width: 100%;\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n margin-bottom: 15px;\n transition: all 0.3s ease;\n }\n\n .archive-thumbnail:hover {\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);\n transform: scale(1.02);\n }\n\n .archive-label {\n font-family: 'Montserrat', sans-serif;\n font-size: 18px;\n font-weight: 600;\n color: #2d3748;\n }\n\n \/* Baca Buletin Section *\/\n .baca-section {\n background: white;\n border-radius: 30px;\n max-width: 1200px;\n width: 100%;\n margin: 0 auto 40px;\n padding: 50px 40px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n animation: fadeInUp 0.8s ease 0.4s both;\n }\n\n .flipbook-container {\n position: relative;\n padding-top: 0;\n width: 100%;\n max-width: 900px;\n height: 500px;\n margin: 0 auto;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n }\n\n .flipbook-container iframe {\n position: absolute;\n border: none;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n }\n\n \/* Stats Counter *\/\n .stats-section {\n max-width: 1200px;\n width: 100%;\n margin: 0 auto;\n text-align: center;\n padding: 20px;\n }\n\n #histats_counter {\n display: inline-block;\n }\n\n @media (max-width: 968px) {\n .hero-container {\n flex-direction: column;\n text-align: center;\n padding: 40px 30px;\n gap: 40px;\n }\n\n .magazine-img {\n max-width: 300px;\n }\n\n .title {\n font-size: 36px;\n }\n\n .subtitle {\n font-size: 22px;\n }\n\n .button-group {\n justify-content: center;\n }\n\n .section-title {\n font-size: 28px;\n }\n\n .archive-section, .baca-section {\n padding: 40px 25px;\n }\n\n .archive-track {\n max-width: 630px;\n }\n\n .archive-item {\n width: 190px;\n }\n\n .archive-arrow {\n width: 42px;\n height: 42px;\n }\n\n .archive-arrow svg {\n width: 18px;\n height: 18px;\n }\n\n .flipbook-container {\n height: 400px;\n }\n }\n\n @media (max-width: 480px) {\n .title {\n font-size: 28px;\n }\n\n .subtitle {\n font-size: 18px;\n }\n\n .btn {\n padding: 14px 24px;\n font-size: 14px;\n }\n\n .section-title {\n font-size: 24px;\n }\n\n .archive-carousel {\n gap: 8px;\n }\n\n .archive-track {\n max-width: 304px;\n gap: 15px;\n }\n\n .archive-item {\n width: 140px;\n }\n\n .archive-label {\n font-size: 15px;\n }\n\n .archive-arrow {\n width: 34px;\n height: 34px;\n }\n\n .archive-arrow svg {\n width: 15px;\n height: 15px;\n }\n\n .flipbook-container {\n height: 350px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"hero-container\">\n <div class=\"magazine-container\">\n <img decoding=\"async\" src=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-content\/uploads\/sites\/12\/2026\/07\/DIKSI-Edisi-3_001.png\" \n alt=\"Buletin DIKSI Cover\" \n class=\"magazine-img\">\n <\/div>\n \n <div class=\"content-container\">\n <span class=\"badge\">Edisi Terbaru<\/span>\n \n <h1 class=\"title\">\n BULETIN<br>\n <span class=\"title-highlight\">DIKSI<\/span>\n <\/h1>\n \n <p class=\"edition\">Edisi 3, Juni 2026<\/p>\n <p class=\"edition\">Penerbit : BBGTK DIY<\/p>\n <p class=\"edition\">ISSN : 3124-064X <\/p>\n \n <h2 class=\"subtitle\">\n Dinamika Ilmu, Kreasi,<br>\n dan Kompetensi\n <\/h2>\n \n <div class=\"button-group\">\n <a href=\"#baca-buletin\" class=\"btn btn-primary\">\n <svg class=\"icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\"\/>\n <\/svg>\n Baca Sekarang\n <\/a>\n \n <a href=\"https:\/\/drive.google.com\/uc?export=download&id=1NWP76XcckpL38tVDvWidak2osRaju0RW\" \n class=\"btn btn-secondary\"\n download=\"Buletin-DIKSI-Edisi-II-2025.pdf\">\n <svg class=\"icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\/>\n <\/svg>\n Unduh PDF\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"archive-section\">\n <h3 class=\"section-title\">Arsip Buletin DIKSI<\/h3>\n \n <div class=\"archive-carousel\">\n <button type=\"button\" class=\"archive-arrow\" id=\"archivePrev\" aria-label=\"Sebelumnya\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n <\/svg>\n <\/button>\n\n <div class=\"archive-track\" id=\"archiveTrack\">\n <div class=\"archive-item\">\n <a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/edisi-1\/\" class=\"archive-link\" >\n <img decoding=\"async\" src=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-content\/uploads\/sites\/12\/2025\/08\/Buletin-DIKSI-Edisi-I-2025-BBGTK-DIY_rev5_001.png\" \n alt=\"Buletin DIKSI Edisi I\" \n class=\"archive-thumbnail\">\n <p class=\"archive-label\">Edisi I<\/p>\n <\/a>\n <\/div>\n \n <div class=\"archive-item\">\n <a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/edisi-2\/\" class=\"archive-link\" >\n <img decoding=\"async\" src=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-content\/uploads\/sites\/12\/2025\/12\/BULETIN-DIKSI-EDISI-IIHD_001-Copy.png\" \n alt=\"Buletin DIKSI Edisi II\" \n class=\"archive-thumbnail\">\n <p class=\"archive-label\">Edisi II<\/p>\n <\/a>\n <\/div>\n\n <div class=\"archive-item\">\n <a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/edisi-3\/\" class=\"archive-link\" >\n <img decoding=\"async\" src=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-content\/uploads\/sites\/12\/2026\/07\/DIKSI-Edisi-3_001.png\" \n alt=\"Buletin DIKSI Edisi 3\" \n class=\"archive-thumbnail\">\n <p class=\"archive-label\">Edisi 3<\/p>\n <\/a>\n <\/div>\n <\/div>\n\n <button type=\"button\" class=\"archive-arrow\" id=\"archiveNext\" aria-label=\"Berikutnya\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"baca-section\" id=\"baca-buletin\">\n <h3 class=\"section-title\">Baca Buletin DIKSI<\/h3>\n \n <div class=\"flipbook-container\">\n <iframe src=\"https:\/\/online.fliphtml5.com\/ryhxj\/sdkb\/\" \n seamless=\"seamless\" \n scrolling=\"no\" \n frameborder=\"0\" \n allowtransparency=\"true\" \n allowfullscreen=\"true\">\n <\/iframe>\n <\/div>\n <\/div>\n\n \n <div class=\"stats-section\">\n <div id=\"histats_counter\"><\/div>\n <\/div>\n\n \n <script type=\"text\/javascript\">\n var _Hasync= _Hasync|| [];\n _Hasync.push(['Histats.start', '1,4968384,4,330,112,62,00011110']);\n _Hasync.push(['Histats.fasi', '1']);\n _Hasync.push(['Histats.track_hits', '']);\n _Hasync.push(['Histats.framed_page', '']);\n (function() {\n var hs = document.createElement('script'); \n hs.type = 'text\/javascript'; \n hs.async = true;\n hs.src = ('\/\/s10.histats.com\/js15_as.js');\n (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);\n })();\n <\/script>\n <noscript>\n <a href=\"\/\" target=\"_blank\">\n <img decoding=\"async\" src=\"\/\/sstatic1.histats.com\/0.gif?4968384&101\" alt=\"web stats\" border=\"0\">\n <\/a>\n <\/noscript>\n\n \n <script>\n document.querySelector('a[href=\"#baca-buletin\"]').addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.querySelector('#baca-buletin');\n if (target) {\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n <\/script>\n\n \n <script>\n (function() {\n var track = document.getElementById('archiveTrack');\n var btnPrev = document.getElementById('archivePrev');\n var btnNext = document.getElementById('archiveNext');\n if (!track || !btnPrev || !btnNext) return;\n\n function updateArrows() {\n var maxScroll = track.scrollWidth - track.clientWidth;\n var hasOverflow = maxScroll > 2;\n\n btnPrev.style.display = hasOverflow ? 'flex' : 'none';\n btnNext.style.display = hasOverflow ? 'flex' : 'none';\n\n btnPrev.disabled = track.scrollLeft <= 2;\n btnNext.disabled = track.scrollLeft >= maxScroll - 2;\n }\n\n btnPrev.addEventListener('click', function() {\n track.scrollBy({ left: -track.clientWidth, behavior: 'smooth' });\n });\n\n btnNext.addEventListener('click', function() {\n track.scrollBy({ left: track.clientWidth, behavior: 'smooth' });\n });\n\n track.addEventListener('scroll', updateArrows);\n window.addEventListener('resize', updateArrows);\n updateArrows();\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Buletin DIKSI – Hero Section Edisi Terbaru BULETIN DIKSI Edisi 3, Juni 2026 Penerbit : BBGTK DIY ISSN : 3124-064X Dinamika Ilmu, Kreasi, dan Kompetensi Baca Sekarang Unduh PDF Arsip Buletin DIKSI Edisi I Edisi II Edisi 3 Baca Buletin DIKSI<\/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-72","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/pages\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":5,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/pages\/72\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/pages\/72\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/media?parent=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":72,"date":"2026-07-13T04:29:07","date_gmt":"2026-07-13T04:29:07","guid":{"rendered":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/?page_id=72"},"modified":"2026-07-17T02:58:53","modified_gmt":"2026-07-17T02:58:53","slug":"depan-diksi-juli-rev-2026","status":"publish","type":"page","link":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/","title":{"rendered":"depan diksi juli rev 2026"},"content":{"rendered":"\n\n\n\n \n \n Buletin DIKSI – Hero Section<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #9DCAEB 0%, #AFD5F0 100%);\n min-height: 100vh;\n padding: 20px;\n }\n\n .hero-container {\n background: linear-gradient(to bottom, #e8f0f8, #f8fafc);\n border-radius: 30px;\n max-width: 1200px;\n width: 100%;\n margin: 0 auto 40px;\n padding: 60px 40px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n display: flex;\n align-items: center;\n gap: 60px;\n animation: fadeInUp 0.8s ease;\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .magazine-container {\n flex: 1;\n position: relative;\n animation: float 3s ease-in-out infinite;\n }\n\n @keyframes float {\n 0%, 100% {\n transform: translateY(0) rotate(-2deg);\n }\n 50% {\n transform: translateY(-20px) rotate(-2deg);\n }\n }\n\n .magazine-img {\n width: 100%;\n max-width: 400px;\n height: auto;\n border-radius: 15px;\n box-shadow: \n -20px 20px 40px rgba(0, 0, 0, 0.2),\n 0 0 0 1px rgba(255, 255, 255, 0.5);\n transition: transform 0.3s ease;\n }\n\n .magazine-img:hover {\n transform: scale(1.05) rotate(0deg);\n }\n\n .content-container {\n flex: 1;\n animation: slideInRight 0.8s ease 0.2s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 0;\n transform: translateX(30px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n .badge {\n display: inline-block;\n background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);\n color: white;\n padding: 8px 20px;\n border-radius: 25px;\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 20px;\n box-shadow: 0 4px 15px rgba(253, 160, 133, 0.4);\n }\n\n .title {\n font-size: 48px;\n font-weight: 800;\n color: #2d3748;\n margin-bottom: 10px;\n line-height: 1.2;\n }\n\n .title-highlight {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .edition {\n font-size: 24px;\n color: #718096;\n margin-bottom: 20px;\n font-weight: 500;\n }\n\n .subtitle {\n font-size: 28px;\n color: #2d3748;\n font-weight: 700;\n margin-bottom: 30px;\n line-height: 1.4;\n }\n\n .button-group {\n display: flex;\n gap: 15px;\n flex-wrap: wrap;\n }\n\n .btn {\n padding: 16px 32px;\n border-radius: 12px;\n font-size: 16px;\n font-weight: 600;\n border: none;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n }\n\n .btn-primary {\n background: linear-gradient(135deg, #4c6ef5 0%, #364fc7 100%);\n color: white;\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(76, 110, 245, 0.4);\n }\n\n .btn-secondary {\n background: white;\n color: #4c6ef5;\n border: 2px solid #4c6ef5;\n }\n\n .btn-secondary:hover {\n background: #4c6ef5;\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(76, 110, 245, 0.3);\n }\n\n .icon {\n width: 20px;\n height: 20px;\n }\n\n \/* Archive Section *\/\n .archive-section {\n background: white;\n border-radius: 30px;\n max-width: 1200px;\n width: 100%;\n margin: 0 auto 40px;\n padding: 50px 40px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n animation: fadeInUp 0.8s ease 0.3s both;\n }\n\n .section-title {\n font-family: 'Montserrat', sans-serif;\n font-size: 32px;\n font-weight: 700;\n color: #2d3748;\n text-align: center;\n margin-bottom: 40px;\n }\n\n .archive-carousel {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 15px;\n }\n\n .archive-track {\n display: flex;\n gap: 25px;\n max-width: 964px;\n overflow-x: auto;\n scroll-behavior: smooth;\n scroll-snap-type: x mandatory;\n padding: 10px 4px 18px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n\n .archive-track::-webkit-scrollbar {\n display: none;\n }\n\n .archive-item {\n flex: 0 0 auto;\n width: 220px;\n scroll-snap-align: start;\n text-align: center;\n transition: transform 0.3s ease;\n }\n\n .archive-item:hover {\n transform: translateY(-5px);\n }\n\n .archive-arrow {\n flex-shrink: 0;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: none;\n background: white;\n color: #4c6ef5;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);\n transition: all 0.3s ease;\n }\n\n .archive-arrow svg {\n width: 22px;\n height: 22px;\n }\n\n .archive-arrow:hover:not(:disabled) {\n background: linear-gradient(135deg, #4c6ef5 0%, #364fc7 100%);\n color: white;\n transform: scale(1.08);\n box-shadow: 0 8px 24px rgba(76, 110, 245, 0.35);\n }\n\n .archive-arrow:disabled {\n opacity: 0.25;\n cursor: not-allowed;\n }\n\n .archive-link {\n text-decoration: none;\n display: block;\n }\n\n .archive-thumbnail {\n width: 100%;\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n margin-bottom: 15px;\n transition: all 0.3s ease;\n }\n\n .archive-thumbnail:hover {\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);\n transform: scale(1.02);\n }\n\n .archive-label {\n font-family: 'Montserrat', sans-serif;\n font-size: 18px;\n font-weight: 600;\n color: #2d3748;\n }\n\n \/* Baca Buletin Section *\/\n .baca-section {\n background: white;\n border-radius: 30px;\n max-width: 1200px;\n width: 100%;\n margin: 0 auto 40px;\n padding: 50px 40px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n animation: fadeInUp 0.8s ease 0.4s both;\n }\n\n .flipbook-container {\n position: relative;\n padding-top: 0;\n width: 100%;\n max-width: 900px;\n height: 500px;\n margin: 0 auto;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n }\n\n .flipbook-container iframe {\n position: absolute;\n border: none;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n }\n\n \/* Stats Counter *\/\n .stats-section {\n max-width: 1200px;\n width: 100%;\n margin: 0 auto;\n text-align: center;\n padding: 20px;\n }\n\n #histats_counter {\n display: inline-block;\n }\n\n @media (max-width: 968px) {\n .hero-container {\n flex-direction: column;\n text-align: center;\n padding: 40px 30px;\n gap: 40px;\n }\n\n .magazine-img {\n max-width: 300px;\n }\n\n .title {\n font-size: 36px;\n }\n\n .subtitle {\n font-size: 22px;\n }\n\n .button-group {\n justify-content: center;\n }\n\n .section-title {\n font-size: 28px;\n }\n\n .archive-section, .baca-section {\n padding: 40px 25px;\n }\n\n .archive-track {\n max-width: 630px;\n }\n\n .archive-item {\n width: 190px;\n }\n\n .archive-arrow {\n width: 42px;\n height: 42px;\n }\n\n .archive-arrow svg {\n width: 18px;\n height: 18px;\n }\n\n .flipbook-container {\n height: 400px;\n }\n }\n\n @media (max-width: 480px) {\n .title {\n font-size: 28px;\n }\n\n .subtitle {\n font-size: 18px;\n }\n\n .btn {\n padding: 14px 24px;\n font-size: 14px;\n }\n\n .section-title {\n font-size: 24px;\n }\n\n .archive-carousel {\n gap: 8px;\n }\n\n .archive-track {\n max-width: 304px;\n gap: 15px;\n }\n\n .archive-item {\n width: 140px;\n }\n\n .archive-label {\n font-size: 15px;\n }\n\n .archive-arrow {\n width: 34px;\n height: 34px;\n }\n\n .archive-arrow svg {\n width: 15px;\n height: 15px;\n }\n\n .flipbook-container {\n height: 350px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"hero-container\">\n <div class=\"magazine-container\">\n <img decoding=\"async\" src=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-content\/uploads\/sites\/12\/2026\/07\/DIKSI-Edisi-3_001.png\" \n alt=\"Buletin DIKSI Cover\" \n class=\"magazine-img\">\n <\/div>\n \n <div class=\"content-container\">\n <span class=\"badge\">Edisi Terbaru<\/span>\n \n <h1 class=\"title\">\n BULETIN<br>\n <span class=\"title-highlight\">DIKSI<\/span>\n <\/h1>\n \n <p class=\"edition\">Edisi 3, Juni 2026<\/p>\n <p class=\"edition\">Penerbit : BBGTK DIY<\/p>\n <p class=\"edition\">ISSN : 3124-064X <\/p>\n \n <h2 class=\"subtitle\">\n Dinamika Ilmu, Kreasi,<br>\n dan Kompetensi\n <\/h2>\n \n <div class=\"button-group\">\n <a href=\"#baca-buletin\" class=\"btn btn-primary\">\n <svg class=\"icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\"\/>\n <\/svg>\n Baca Sekarang\n <\/a>\n \n <a href=\"https:\/\/drive.google.com\/uc?export=download&id=1NWP76XcckpL38tVDvWidak2osRaju0RW\" \n class=\"btn btn-secondary\"\n download=\"Buletin-DIKSI-Edisi-II-2025.pdf\">\n <svg class=\"icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\/>\n <\/svg>\n Unduh PDF\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"archive-section\">\n <h3 class=\"section-title\">Arsip Buletin DIKSI<\/h3>\n \n <div class=\"archive-carousel\">\n <button type=\"button\" class=\"archive-arrow\" id=\"archivePrev\" aria-label=\"Sebelumnya\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n <\/svg>\n <\/button>\n\n <div class=\"archive-track\" id=\"archiveTrack\">\n <div class=\"archive-item\">\n <a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/edisi-1\/\" class=\"archive-link\" >\n <img decoding=\"async\" src=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-content\/uploads\/sites\/12\/2025\/08\/Buletin-DIKSI-Edisi-I-2025-BBGTK-DIY_rev5_001.png\" \n alt=\"Buletin DIKSI Edisi I\" \n class=\"archive-thumbnail\">\n <p class=\"archive-label\">Edisi I<\/p>\n <\/a>\n <\/div>\n \n <div class=\"archive-item\">\n <a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/edisi-2\/\" class=\"archive-link\" >\n <img decoding=\"async\" src=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-content\/uploads\/sites\/12\/2025\/12\/BULETIN-DIKSI-EDISI-IIHD_001-Copy.png\" \n alt=\"Buletin DIKSI Edisi II\" \n class=\"archive-thumbnail\">\n <p class=\"archive-label\">Edisi II<\/p>\n <\/a>\n <\/div>\n\n <div class=\"archive-item\">\n <a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/edisi-3\/\" class=\"archive-link\" >\n <img decoding=\"async\" src=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-content\/uploads\/sites\/12\/2026\/07\/DIKSI-Edisi-3_001.png\" \n alt=\"Buletin DIKSI Edisi 3\" \n class=\"archive-thumbnail\">\n <p class=\"archive-label\">Edisi 3<\/p>\n <\/a>\n <\/div>\n <\/div>\n\n <button type=\"button\" class=\"archive-arrow\" id=\"archiveNext\" aria-label=\"Berikutnya\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"baca-section\" id=\"baca-buletin\">\n <h3 class=\"section-title\">Baca Buletin DIKSI<\/h3>\n \n <div class=\"flipbook-container\">\n <iframe src=\"https:\/\/online.fliphtml5.com\/ryhxj\/sdkb\/\" \n seamless=\"seamless\" \n scrolling=\"no\" \n frameborder=\"0\" \n allowtransparency=\"true\" \n allowfullscreen=\"true\">\n <\/iframe>\n <\/div>\n <\/div>\n\n \n <div class=\"stats-section\">\n <div id=\"histats_counter\"><\/div>\n <\/div>\n\n \n <script type=\"text\/javascript\">\n var _Hasync= _Hasync|| [];\n _Hasync.push(['Histats.start', '1,4968384,4,330,112,62,00011110']);\n _Hasync.push(['Histats.fasi', '1']);\n _Hasync.push(['Histats.track_hits', '']);\n _Hasync.push(['Histats.framed_page', '']);\n (function() {\n var hs = document.createElement('script'); \n hs.type = 'text\/javascript'; \n hs.async = true;\n hs.src = ('\/\/s10.histats.com\/js15_as.js');\n (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);\n })();\n <\/script>\n <noscript>\n <a href=\"\/\" target=\"_blank\">\n <img decoding=\"async\" src=\"\/\/sstatic1.histats.com\/0.gif?4968384&101\" alt=\"web stats\" border=\"0\">\n <\/a>\n <\/noscript>\n\n \n <script>\n document.querySelector('a[href=\"#baca-buletin\"]').addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.querySelector('#baca-buletin');\n if (target) {\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n <\/script>\n\n \n <script>\n (function() {\n var track = document.getElementById('archiveTrack');\n var btnPrev = document.getElementById('archivePrev');\n var btnNext = document.getElementById('archiveNext');\n if (!track || !btnPrev || !btnNext) return;\n\n function updateArrows() {\n var maxScroll = track.scrollWidth - track.clientWidth;\n var hasOverflow = maxScroll > 2;\n\n btnPrev.style.display = hasOverflow ? 'flex' : 'none';\n btnNext.style.display = hasOverflow ? 'flex' : 'none';\n\n btnPrev.disabled = track.scrollLeft <= 2;\n btnNext.disabled = track.scrollLeft >= maxScroll - 2;\n }\n\n btnPrev.addEventListener('click', function() {\n track.scrollBy({ left: -track.clientWidth, behavior: 'smooth' });\n });\n\n btnNext.addEventListener('click', function() {\n track.scrollBy({ left: track.clientWidth, behavior: 'smooth' });\n });\n\n track.addEventListener('scroll', updateArrows);\n window.addEventListener('resize', updateArrows);\n updateArrows();\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Buletin DIKSI – Hero Section Edisi Terbaru BULETIN DIKSI Edisi 3, Juni 2026 Penerbit : BBGTK DIY ISSN : 3124-064X Dinamika Ilmu, Kreasi, dan Kompetensi Baca Sekarang Unduh PDF Arsip Buletin DIKSI Edisi I Edisi II Edisi 3 Baca Buletin DIKSI<\/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-72","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/pages\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":5,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/pages\/72\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/pages\/72\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/diksi\/wp-json\/wp\/v2\/media?parent=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}