Perpustakaan Sekolah<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide@0.263.0\/dist\/umd\/lucide.min.js\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n html, body { height: 100%; margin: 0; }\n .font-display { font-family: 'Playfair Display', Georgia, serif; }\n .font-body { font-family: 'DM Sans', sans-serif; }\n\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes scaleIn {\n from { opacity: 0; transform: scale(0.9); }\n to { opacity: 1; transform: scale(1); }\n }\n .anim-fade-up { animation: fadeUp 0.7s ease forwards; opacity: 0; }\n .anim-scale-in { animation: scaleIn 0.6s ease forwards; opacity: 0; }\n .delay-1 { animation-delay: 0.1s; }\n .delay-2 { animation-delay: 0.25s; }\n .delay-3 { animation-delay: 0.4s; }\n .delay-4 { animation-delay: 0.55s; }\n .delay-5 { animation-delay: 0.7s; }\n\n .hero-pattern {\n background-image: \n radial-gradient(circle at 20% 50%, rgba(120, 80, 40, 0.08) 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, rgba(180, 140, 80, 0.06) 0%, transparent 40%),\n radial-gradient(circle at 60% 80%, rgba(100, 60, 30, 0.05) 0%, transparent 45%);\n }\n\n .book-spine {\n width: 12px;\n border-radius: 2px;\n display: inline-block;\n }\n\n .card-hover {\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n .card-hover:hover {\n transform: translateY(-6px);\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n }\n\n .nav-link {\n position: relative;\n transition: color 0.3s ease;\n }\n .nav-link::after {\n content: '';\n position: absolute;\n bottom: -4px;\n left: 0;\n width: 0;\n height: 2px;\n transition: width 0.3s ease;\n }\n .nav-link:hover::after {\n width: 100%;\n }\n\n .login-modal-overlay {\n transition: opacity 0.3s ease;\n }\n .login-modal-box {\n transition: transform 0.3s ease, opacity 0.3s ease;\n }\n\n .social-icon {\n transition: transform 0.3s ease, background-color 0.3s ease;\n }\n .social-icon:hover {\n transform: translateY(-3px) scale(1.1);\n }\n\n .grain-overlay {\n position: fixed;\n top: 0; left: 0; width: 100%; height: 100%;\n pointer-events: none;\n opacity: 0.03;\n z-index: 0;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'\/%3E%3C\/svg%3E\");\n }\n\n .mobile-menu {\n transform: translateX(100%);\n transition: transform 0.3s ease;\n }\n .mobile-menu.open {\n transform: translateX(0);\n }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body data-rsssl=1 class=\"h-full font-body\" style=\"background-color: #FAF6F0; color: #2C1810;\">\n <div id=\"app\" class=\"h-full w-full overflow-auto relative\">\n <div class=\"grain-overlay\"><\/div>\n <nav id=\"navbar\" class=\"sticky top-0 z-50 backdrop-blur-md border-b\" style=\"background-color: rgba(250,246,240,0.92); border-color: #E8DDD0;\">\n <div class=\"max-w-6xl mx-auto px-6 py-4 flex items-center justify-between\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-lg flex items-center justify-center\" style=\"background-color: #6B3A2A;\"><i data-lucide=\"book-open\" style=\"width:20px;height:20px;color:#FAF6F0;\"><\/i>\n <\/div>\n <div>\n <div id=\"nav-school\" class=\"text-xs font-medium tracking-wider uppercase\" style=\"color: #9C7B5C;\">\n SMA Negeri 1\n <\/div>\n <div id=\"nav-library\" class=\"font-display font-bold text-lg leading-tight\" style=\"color: #2C1810;\">\n Perpustakaan\n <\/div>\n <\/div>\n <\/div>\n <div class=\"hidden md:flex items-center gap-8\"><a href=\"#beranda\" class=\"nav-link font-medium text-sm\" style=\"color: #6B3A2A;\" onclick=\"scrollToSection(event,'hero')\"> <span class=\"nav-link-after-color\">Beranda<\/span> <\/a> <a href=\"#berita\" class=\"nav-link font-medium text-sm\" style=\"color: #5C4A3A;\" onclick=\"scrollToSection(event,'news')\">Berita<\/a> <a href=\"#sosmed\" class=\"nav-link font-medium text-sm\" style=\"color: #5C4A3A;\" onclick=\"scrollToSection(event,'social')\">Media Sosial<\/a> <a href=\"https:\/\/perpustakaan.smanegeri1setu.sch.id\/index.php?p=member\" target=\"_blank\"><button id=\"loginBtn\" class=\"px-5 py-2.5 rounded-lg font-semibold text-sm transition-all hover:shadow-lg\" style=\"background-color: #6B3A2A; color: #FAF6F0;\"> <span class=\"flex items-center gap-2\"><i data-lucide=\"log-in\" style=\"width:16px;height:16px;\"><\/i> Login Anggota<\/span> <\/button><\/a>\n <\/div><button class=\"md:hidden\" onclick=\"toggleMobile()\" aria-label=\"Menu\"> <i data-lucide=\"menu\" style=\"width:24px;height:24px;color:#2C1810;\"><\/i> <\/button>\n <\/div>\n <\/nav>\n <div id=\"mobileMenu\" class=\"mobile-menu fixed top-0 right-0 z-[60] h-full w-72 shadow-2xl p-6 flex flex-col gap-6\" style=\"background-color: #FAF6F0;\"><button onclick=\"toggleMobile()\" class=\"self-end\" aria-label=\"Tutup menu\"><i data-lucide=\"x\" style=\"width:24px;height:24px;color:#2C1810;\"><\/i><\/button> <a href=\"#beranda\" class=\"font-semibold text-lg\" style=\"color: #6B3A2A;\" onclick=\"scrollToSection(event,'hero');toggleMobile();\">Beranda<\/a> <a href=\"#berita\" class=\"font-semibold text-lg\" style=\"color: #5C4A3A;\" onclick=\"scrollToSection(event,'news');toggleMobile();\">Berita<\/a> <a href=\"#sosmed\" class=\"font-semibold text-lg\" style=\"color: #5C4A3A;\" onclick=\"scrollToSection(event,'social');toggleMobile();\">Media Sosial<\/a> <button onclick=\"openLogin();toggleMobile();\" class=\"px-5 py-3 rounded-lg font-semibold text-sm\" style=\"background-color: #6B3A2A; color: #FAF6F0;\">Login Anggota<\/button>\n <\/div>\n <section id=\"hero\" class=\"hero-pattern relative overflow-hidden\">\n <div class=\"max-w-6xl mx-auto px-6 py-20 md:py-28 flex flex-col md:flex-row items-center gap-12\">\n <div class=\"flex-1 z-10\">\n <div class=\"anim-fade-up delay-1\"><span class=\"inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-6\" style=\"background-color: #E8DDD0; color: #6B3A2A;\">\ud83d\udcda Selamat Datang<\/span>\n <\/div>\n <h1 id=\"heroTitle\" class=\"font-display font-800 text-4xl md:text-5xl lg:text-6xl leading-tight mb-6 anim-fade-up delay-2\" style=\"color: #2C1810;\">Perpustakaan<br><span style=\"color: #6B3A2A;\">SMA Negeri 1<\/span><\/h1>\n <p id=\"heroTagline\" class=\"text-lg md:text-xl leading-relaxed mb-8 anim-fade-up delay-3 max-w-lg\" style=\"color: #7A6352;\">Jendela ilmu yang membuka cakrawala pengetahuan. Temukan ribuan koleksi buku dan sumber belajar di sini.<\/p>\n <div class=\"flex flex-wrap gap-4 anim-fade-up delay-4\"><button onclick=\"scrollToSection(event,'news')\" class=\"px-7 py-3.5 rounded-xl font-semibold transition-all hover:shadow-lg hover:-translate-y-0.5\" style=\"background-color: #6B3A2A; color: #FAF6F0;\"> Jelajahi Sekarang <\/button> <button onclick=\"openLogin()\" class=\"px-7 py-3.5 rounded-xl font-semibold border-2 transition-all hover:-translate-y-0.5\" style=\"border-color: #6B3A2A; color: #6B3A2A; background: transparent;\"> Login Anggota <\/button>\n <\/div>\n <\/div>\n <div class=\"flex-1 flex justify-center anim-scale-in delay-3\">\n <div class=\"relative w-64 h-72 md:w-80 md:h-80\">\n <div class=\"absolute inset-0 rounded-3xl rotate-3 shadow-xl\" style=\"background: linear-gradient(135deg, #6B3A2A 0%, #8B5E3C 100%);\"><\/div>\n <div class=\"absolute inset-0 rounded-3xl -rotate-2 shadow-lg\" style=\"background: linear-gradient(135deg, #D4A574 0%, #C4956A 100%);\"><\/div>\n <div class=\"absolute inset-0 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 text-center\" style=\"background: linear-gradient(145deg, #FAF6F0 0%, #F0E6D8 100%);\">\n <div class=\"flex gap-1.5 mb-6\">\n <div class=\"book-spine h-16\" style=\"background:#6B3A2A;\"><\/div>\n <div class=\"book-spine h-20\" style=\"background:#D4A574;\"><\/div>\n <div class=\"book-spine h-14\" style=\"background:#9C7B5C;\"><\/div>\n <div class=\"book-spine h-18\" style=\"background:#8B5E3C;\"><\/div>\n <div class=\"book-spine h-16\" style=\"background:#6B3A2A;\"><\/div>\n <div class=\"book-spine h-12\" style=\"background:#D4A574;\"><\/div>\n <\/div>\n <div class=\"font-display font-bold text-3xl\" style=\"color: #6B3A2A;\">\n 1.200+\n <\/div>\n <div class=\"text-sm font-medium mt-1\" style=\"color: #9C7B5C;\">\n Koleksi Buku\n <\/div>\n <div class=\"flex gap-4 mt-4 text-center\">\n <div>\n <div class=\"font-bold text-lg\" style=\"color:#2C1810;\">\n 350\n <\/div>\n <div class=\"text-xs\" style=\"color:#9C7B5C;\">\n Anggota\n <\/div>\n <\/div>\n <div style=\"width:1px;background:#E8DDD0;\"><\/div>\n <div>\n <div class=\"font-bold text-lg\" style=\"color:#2C1810;\">\n 50+\n <\/div>\n <div class=\"text-xs\" style=\"color:#9C7B5C;\">\n Kategori\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"relative z-10 -mt-6 px-6\">\n <div class=\"max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4\"><a href=\"https:\/\/perpustakaan.smanegeri1setu.sch.id\/index.php?p=member\" target=\"_blank\"><button onclick=\"openLogin()\" class=\"card-hover rounded-2xl p-5 text-center shadow-md anim-fade-up delay-2\" style=\"background-color: #FFFFFF;\">\n <div class=\"w-12 h-12 rounded-xl mx-auto mb-3 flex items-center justify-center\" style=\"background-color: #F0E6D8;\"><i data-lucide=\"user-check\" style=\"width:22px;height:22px;color:#6B3A2A;\"><\/i>\n <\/div>\n <div class=\"font-semibold text-sm\" style=\"color:#2C1810;\">\n Login Anggota\n <\/div><\/button><\/a> <button onclick=\"scrollToSection(event,'hero')\" class=\"card-hover rounded-2xl p-5 text-center shadow-md anim-fade-up delay-3\" style=\"background-color: #FFFFFF;\">\n <div class=\"w-12 h-12 rounded-xl mx-auto mb-3 flex items-center justify-center\" style=\"background-color: #F0E6D8;\"><i data-lucide=\"home\" style=\"width:22px;height:22px;color:#6B3A2A;\"><\/i>\n <\/div>\n <div class=\"font-semibold text-sm\" style=\"color:#2C1810;\">\n Beranda\n <\/div><\/button> <button onclick=\"scrollToSection(event,'news')\" class=\"card-hover rounded-2xl p-5 text-center shadow-md anim-fade-up delay-4\" style=\"background-color: #FFFFFF;\">\n <div class=\"w-12 h-12 rounded-xl mx-auto mb-3 flex items-center justify-center\" style=\"background-color: #F0E6D8;\"><i data-lucide=\"newspaper\" style=\"width:22px;height:22px;color:#6B3A2A;\"><\/i>\n <\/div>\n <div class=\"font-semibold text-sm\" style=\"color:#2C1810;\">\n Berita\n <\/div><\/button> <button onclick=\"scrollToSection(event,'social')\" class=\"card-hover rounded-2xl p-5 text-center shadow-md anim-fade-up delay-5\" style=\"background-color: #FFFFFF;\">\n <div class=\"w-12 h-12 rounded-xl mx-auto mb-3 flex items-center justify-center\" style=\"background-color: #F0E6D8;\"><i data-lucide=\"share-2\" style=\"width:22px;height:22px;color:#6B3A2A;\"><\/i>\n <\/div>\n <div class=\"font-semibold text-sm\" style=\"color:#2C1810;\">\n Media Sosial\n <\/div><\/button>\n <\/div>\n <\/section>\n <section id=\"news\" class=\"max-w-6xl mx-auto px-6 py-20\">\n <div class=\"text-center mb-12\"><span class=\"inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-4\" style=\"background-color: #E8DDD0; color: #6B3A2A;\">\ud83d\udcf0 Informasi Terbaru<\/span>\n <h2 class=\"font-display font-bold text-3xl md:text-4xl\" style=\"color: #2C1810;\">Berita Perpustakaan<\/h2>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-6\">\n <article class=\"card-hover rounded-2xl overflow-hidden shadow-md\" style=\"background-color: #FFFFFF;\">\n <div class=\"h-44 flex items-center justify-center\" style=\"background: linear-gradient(135deg, #6B3A2A, #8B5E3C);\"><i data-lucide=\"book-marked\" style=\"width:48px;height:48px;color:#FAF6F0;opacity:0.7;\"><\/i>\n <\/div>\n <div class=\"p-6\">\n <div class=\"text-xs font-medium mb-2\" style=\"color: #9C7B5C;\">\n 12 Januari 2025\n <\/div>\n <h3 id=\"news1Title\" class=\"font-display font-bold text-lg mb-2\" style=\"color: #2C1810;\">Koleksi Buku Baru Semester Genap<\/h3>\n <p class=\"text-sm leading-relaxed mb-4\" style=\"color: #7A6352;\">Perpustakaan menambah 150 judul buku baru untuk mendukung kegiatan belajar mengajar semester genap.<\/p><button class=\"text-sm font-semibold flex items-center gap-1\" style=\"color: #6B3A2A;\">Selengkapnya <i data-lucide=\"arrow-right\" style=\"width:14px;height:14px;\"><\/i><\/button>\n <\/div>\n <\/article>\n <article class=\"card-hover rounded-2xl overflow-hidden shadow-md\" style=\"background-color: #FFFFFF;\">\n <div class=\"h-44 flex items-center justify-center\" style=\"background: linear-gradient(135deg, #D4A574, #C4956A);\"><i data-lucide=\"trophy\" style=\"width:48px;height:48px;color:#FAF6F0;opacity:0.7;\"><\/i>\n <\/div>\n <div class=\"p-6\">\n <div class=\"text-xs font-medium mb-2\" style=\"color: #9C7B5C;\">\n 5 Januari 2025\n <\/div>\n <h3 id=\"news2Title\" class=\"font-display font-bold text-lg mb-2\" style=\"color: #2C1810;\">Lomba Resensi Buku Nasional<\/h3>\n <p class=\"text-sm leading-relaxed mb-4\" style=\"color: #7A6352;\">Siswa kami meraih juara 2 dalam lomba resensi buku tingkat nasional. Selamat!<\/p><button class=\"text-sm font-semibold flex items-center gap-1\" style=\"color: #6B3A2A;\">Selengkapnya <i data-lucide=\"arrow-right\" style=\"width:14px;height:14px;\"><\/i><\/button>\n <\/div>\n <\/article>\n <article class=\"card-hover rounded-2xl overflow-hidden shadow-md\" style=\"background-color: #FFFFFF;\">\n <div class=\"h-44 flex items-center justify-center\" style=\"background: linear-gradient(135deg, #9C7B5C, #7A6352);\"><i data-lucide=\"clock\" style=\"width:48px;height:48px;color:#FAF6F0;opacity:0.7;\"><\/i>\n <\/div>\n <div class=\"p-6\">\n <div class=\"text-xs font-medium mb-2\" style=\"color: #9C7B5C;\">\n 1 Januari 2025\n <\/div>\n <h3 id=\"news3Title\" class=\"font-display font-bold text-lg mb-2\" style=\"color: #2C1810;\">Jam Operasional Baru 2025<\/h3>\n <p class=\"text-sm leading-relaxed mb-4\" style=\"color: #7A6352;\">Mulai Januari 2025, perpustakaan buka setiap hari Senin\u2013Jumat pukul 07.00\u201316.00 WIB.<\/p><button class=\"text-sm font-semibold flex items-center gap-1\" style=\"color: #6B3A2A;\">Selengkapnya <i data-lucide=\"arrow-right\" style=\"width:14px;height:14px;\"><\/i><\/button>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n <section id=\"social\" class=\"py-20\" style=\"background-color: #2C1810;\">\n <div class=\"max-w-4xl mx-auto px-6 text-center\"><span class=\"inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-4\" style=\"background-color: rgba(212,165,116,0.2); color: #D4A574;\">\ud83c\udf10 Terhubung<\/span>\n <h2 class=\"font-display font-bold text-3xl md:text-4xl mb-4\" style=\"color: #FAF6F0;\">Media Sosial Perpustakaan<\/h2>\n <p class=\"mb-10 max-w-md mx-auto\" style=\"color: #9C7B5C;\">Ikuti kami untuk informasi terbaru seputar kegiatan dan koleksi perpustakaan.<\/p>\n <div class=\"flex flex-wrap justify-center gap-5\"><a href=\"#\" class=\"social-icon flex items-center gap-3 px-6 py-4 rounded-2xl\" style=\"background-color: rgba(250,246,240,0.08); border: 1px solid rgba(250,246,240,0.1);\" aria-label=\"Instagram\">\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#D4A574\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\" \/><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\" \/><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\" \/>\n <\/svg><span class=\"font-semibold text-sm\" style=\"color: #FAF6F0;\">Instagram<\/span> <\/a> <a href=\"#\" class=\"social-icon flex items-center gap-3 px-6 py-4 rounded-2xl\" style=\"background-color: rgba(250,246,240,0.08); border: 1px solid rgba(250,246,240,0.1);\" aria-label=\"Facebook\">\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#D4A574\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\" \/>\n <\/svg><span class=\"font-semibold text-sm\" style=\"color: #FAF6F0;\">Facebook<\/span> <\/a> <a href=\"#\" class=\"social-icon flex items-center gap-3 px-6 py-4 rounded-2xl\" style=\"background-color: rgba(250,246,240,0.08); border: 1px solid rgba(250,246,240,0.1);\" aria-label=\"YouTube\">\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#D4A574\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19.1c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z\" \/><polygon points=\"9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02\" \/>\n <\/svg><span class=\"font-semibold text-sm\" style=\"color: #FAF6F0;\">YouTube<\/span> <\/a> <a href=\"#\" class=\"social-icon flex items-center gap-3 px-6 py-4 rounded-2xl\" style=\"background-color: rgba(250,246,240,0.08); border: 1px solid rgba(250,246,240,0.1);\" aria-label=\"TikTok\">\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#D4A574\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5\" \/>\n <\/svg><span class=\"font-semibold text-sm\" style=\"color: #FAF6F0;\">TikTok<\/span> <\/a>\n <\/div>\n <\/div>\n <\/section>\n <footer class=\"border-t px-6 py-8\" style=\"background-color: #FAF6F0; border-color: #E8DDD0;\">\n <div class=\"max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-sm\" style=\"color: #9C7B5C;\">\n <div class=\"flex items-center gap-2\"><i data-lucide=\"book-open\" style=\"width:16px;height:16px;color:#6B3A2A;\"><\/i> <span id=\"footerText\" class=\"font-medium\">\u00a9 2025 Perpustakaan SMA Negeri 1<\/span>\n <\/div>\n <div>\n Dibuat dengan \u2764\ufe0f untuk pendidikan\n <\/div>\n <\/div>\n <\/footer>\n <div id=\"loginModal\" class=\"login-modal-overlay fixed inset-0 z-[70] flex items-center justify-center p-6 hidden\" style=\"background-color: rgba(44,24,16,0.6); backdrop-filter: blur(4px);\">\n <div class=\"login-modal-box w-full max-w-sm rounded-2xl shadow-2xl p-8 relative\" style=\"background-color: #FAF6F0;\"><button onclick=\"closeLogin()\" class=\"absolute top-4 right-4\" aria-label=\"Tutup\"><i data-lucide=\"x\" style=\"width:20px;height:20px;color:#9C7B5C;\"><\/i><\/button>\n <div class=\"text-center mb-6\">\n <div class=\"w-14 h-14 rounded-2xl mx-auto mb-4 flex items-center justify-center\" style=\"background-color: #6B3A2A;\"><i data-lucide=\"user\" style=\"width:28px;height:28px;color:#FAF6F0;\"><\/i>\n <\/div>\n <h3 class=\"font-display font-bold text-2xl\" style=\"color: #2C1810;\">Login Anggota<\/h3>\n <p class=\"text-sm mt-1\" style=\"color: #9C7B5C;\">Masuk ke akun perpustakaan Anda<\/p>\n <\/div>\n <form onsubmit=\"handleLogin(event)\">\n <div class=\"mb-4\"><label for=\"memberId\" class=\"block text-sm font-medium mb-1.5\" style=\"color: #5C4A3A;\">Nomor Anggota<\/label> <input type=\"text\" id=\"memberId\" placeholder=\"Masukkan nomor anggota\" class=\"w-full px-4 py-3 rounded-xl border text-sm outline-none focus:ring-2\" style=\"border-color: #E8DDD0; background: #FFFFFF; color: #2C1810; --tw-ring-color: #6B3A2A;\" required>\n <\/div>\n <div class=\"mb-6\"><label for=\"memberName\" class=\"block text-sm font-medium mb-1.5\" style=\"color: #5C4A3A;\">Nama Lengkap<\/label> <input type=\"text\" id=\"memberName\" placeholder=\"Masukkan nama lengkap\" class=\"w-full px-4 py-3 rounded-xl border text-sm outline-none focus:ring-2\" style=\"border-color: #E8DDD0; background: #FFFFFF; color: #2C1810; --tw-ring-color: #6B3A2A;\" required>\n <\/div><button type=\"submit\" class=\"w-full py-3.5 rounded-xl font-semibold text-sm transition-all hover:shadow-lg\" style=\"background-color: #6B3A2A; color: #FAF6F0;\"> Masuk <\/button>\n <div id=\"loginMsg\" class=\"mt-4 text-center text-sm hidden rounded-xl py-3 px-4\"><\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <script>\n \/\/ Config & defaults\n const defaultConfig = {\n background_color: '#FAF6F0',\n surface_color: '#FFFFFF',\n text_color: '#2C1810',\n primary_action: '#6B3A2A',\n secondary_action: '#D4A574',\n font_family: 'Playfair Display',\n font_size: 16,\n school_name: 'SMA Negeri 1',\n library_name: 'Perpustakaan',\n hero_tagline: 'Jendela ilmu yang membuka cakrawala pengetahuan. Temukan ribuan koleksi buku dan sumber belajar di sini.',\n news_1_title: 'Koleksi Buku Baru Semester Genap',\n news_2_title: 'Lomba Resensi Buku Nasional',\n news_3_title: 'Jam Operasional Baru 2025'\n };\n\n function applyConfig(config) {\n const c = { ...defaultConfig, ...config };\n const bg = c.background_color;\n const surface = c.surface_color;\n const text = c.text_color;\n const primary = c.primary_action;\n const secondary = c.secondary_action;\n const font = c.font_family || defaultConfig.font_family;\n const baseSize = c.font_size || defaultConfig.font_size;\n const bodyStack = `'DM Sans', sans-serif`;\n const displayStack = `'${font}', Georgia, serif`;\n\n document.body.style.backgroundColor = bg;\n document.body.style.color = text;\n\n \/\/ Navbar\n const nav = document.getElementById('navbar');\n nav.style.backgroundColor = bg + 'EA';\n nav.style.borderColor = secondary + '40';\n document.getElementById('nav-school').textContent = c.school_name;\n document.getElementById('nav-school').style.color = secondary;\n document.getElementById('nav-library').textContent = c.library_name;\n document.getElementById('nav-library').style.color = text;\n document.getElementById('nav-library').style.fontFamily = displayStack;\n\n \/\/ Login button\n const loginBtn = document.getElementById('loginBtn');\n if (loginBtn) { loginBtn.style.backgroundColor = primary; loginBtn.style.color = bg; }\n\n \/\/ Hero\n document.getElementById('heroTitle').innerHTML = `${c.library_name}<br><span style=\"color:${primary}\">${c.school_name}<\/span>`;\n document.getElementById('heroTitle').style.fontFamily = displayStack;\n document.getElementById('heroTitle').style.fontSize = `${baseSize * 3}px`;\n document.getElementById('heroTagline').textContent = c.hero_tagline;\n document.getElementById('heroTagline').style.fontSize = `${baseSize}px`;\n\n \/\/ News\n document.getElementById('news1Title').textContent = c.news_1_title;\n document.getElementById('news2Title').textContent = c.news_2_title;\n document.getElementById('news3Title').textContent = c.news_3_title;\n document.querySelectorAll('#news h3').forEach(el => el.style.fontFamily = displayStack);\n\n \/\/ Cards surface color\n document.querySelectorAll('.card-hover').forEach(el => { el.style.backgroundColor = surface; });\n\n \/\/ Footer\n document.getElementById('footerText').textContent = `\u00a9 2025 ${c.library_name} ${c.school_name}`;\n\n \/\/ Font sizes\n document.body.style.fontFamily = bodyStack;\n document.body.style.fontSize = `${baseSize}px`;\n\n \/\/ Section headings\n document.querySelectorAll('.font-display').forEach(el => el.style.fontFamily = displayStack);\n\n \/\/ Primary action buttons\n document.querySelectorAll('[style*=\"background-color: #6B3A2A\"]').forEach(el => {\n el.style.backgroundColor = primary;\n el.style.color = bg;\n });\n\n \/\/ Social section\n const socialSection = document.getElementById('social');\n socialSection.style.backgroundColor = text;\n\n \/\/ Login modal styling\n const modal = document.querySelector('.login-modal-box');\n if (modal) modal.style.backgroundColor = bg;\n }\n\n \/\/ SDK init\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => applyConfig(config),\n mapToCapabilities: (config) => {\n const c = { ...defaultConfig, ...config };\n const mkColor = (key) => ({\n get: () => c[key] || defaultConfig[key],\n set: (v) => { c[key] = v; window.elementSdk.setConfig({ [key]: v }); }\n });\n return {\n recolorables: [\n mkColor('background_color'),\n mkColor('surface_color'),\n mkColor('text_color'),\n mkColor('primary_action'),\n mkColor('secondary_action')\n ],\n borderables: [],\n fontEditable: {\n get: () => c.font_family || defaultConfig.font_family,\n set: (v) => { c.font_family = v; window.elementSdk.setConfig({ font_family: v }); }\n },\n fontSizeable: {\n get: () => c.font_size || defaultConfig.font_size,\n set: (v) => { c.font_size = v; window.elementSdk.setConfig({ font_size: v }); }\n }\n };\n },\n mapToEditPanelValues: (config) => {\n const c = { ...defaultConfig, ...config };\n return new Map([\n ['school_name', c.school_name],\n ['library_name', c.library_name],\n ['hero_tagline', c.hero_tagline],\n ['news_1_title', c.news_1_title],\n ['news_2_title', c.news_2_title],\n ['news_3_title', c.news_3_title]\n ]);\n }\n });\n }\n\n \/\/ Functions\n function scrollToSection(e, id) {\n e.preventDefault();\n document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });\n }\n\n function toggleMobile() {\n document.getElementById('mobileMenu').classList.toggle('open');\n }\n\n function openLogin() {\n const m = document.getElementById('loginModal');\n m.classList.remove('hidden');\n document.getElementById('loginMsg').classList.add('hidden');\n }\n\n function closeLogin() {\n document.getElementById('loginModal').classList.add('hidden');\n }\n\n function handleLogin(e) {\n e.preventDefault();\n const msg = document.getElementById('loginMsg');\n msg.classList.remove('hidden');\n msg.style.backgroundColor = '#E8F5E9';\n msg.style.color = '#2E7D32';\n msg.textContent = '\u2713 Login berhasil! Selamat datang di perpustakaan.';\n setTimeout(() => closeLogin(), 2000);\n }\n\n \/\/ Close modal on overlay click\n document.getElementById('loginModal').addEventListener('click', function(e) {\n if (e.target === this) closeLogin();\n });\n\n lucide.createIcons();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9ea11acff381600b',t:'MTc3NTgxNzMyNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n\n\n\n<h2>Kegiatan Literasi<\/h2>\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-576","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Perpustakaan - SMA Negeri 1 Setu<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/smanegeri1setu.sch.id\/?page_id=576\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Perpustakaan - SMA Negeri 1 Setu\" \/>\n<meta property=\"og:url\" content=\"https:\/\/smanegeri1setu.sch.id\/?page_id=576\" \/>\n<meta property=\"og:site_name\" content=\"SMA Negeri 1 Setu\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-10T10:52:55+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/?page_id=576\",\"url\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/?page_id=576\",\"name\":\"Perpustakaan - SMA Negeri 1 Setu\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/#website\"},\"datePublished\":\"2023-03-08T00:24:44+00:00\",\"dateModified\":\"2026-04-10T10:52:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/?page_id=576#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/smanegeri1setu.sch.id\\\/?page_id=576\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/?page_id=576#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Perpustakaan\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/#website\",\"url\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/\",\"name\":\"SMA Negeri 1 Setu\",\"description\":\"Satu Setu Maju\",\"publisher\":{\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/#organization\",\"name\":\"SMA Negeri 1 Setu\",\"url\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/smanlo.png\",\"contentUrl\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/smanlo.png\",\"width\":1080,\"height\":1080,\"caption\":\"SMA Negeri 1 Setu\"},\"image\":{\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Perpustakaan - SMA Negeri 1 Setu","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/smanegeri1setu.sch.id\/?page_id=576","og_locale":"id_ID","og_type":"article","og_title":"Perpustakaan - SMA Negeri 1 Setu","og_url":"https:\/\/smanegeri1setu.sch.id\/?page_id=576","og_site_name":"SMA Negeri 1 Setu","article_modified_time":"2026-04-10T10:52:55+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/smanegeri1setu.sch.id\/?page_id=576","url":"https:\/\/smanegeri1setu.sch.id\/?page_id=576","name":"Perpustakaan - SMA Negeri 1 Setu","isPartOf":{"@id":"https:\/\/smanegeri1setu.sch.id\/#website"},"datePublished":"2023-03-08T00:24:44+00:00","dateModified":"2026-04-10T10:52:55+00:00","breadcrumb":{"@id":"https:\/\/smanegeri1setu.sch.id\/?page_id=576#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/smanegeri1setu.sch.id\/?page_id=576"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/smanegeri1setu.sch.id\/?page_id=576#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/smanegeri1setu.sch.id\/"},{"@type":"ListItem","position":2,"name":"Perpustakaan"}]},{"@type":"WebSite","@id":"https:\/\/smanegeri1setu.sch.id\/#website","url":"https:\/\/smanegeri1setu.sch.id\/","name":"SMA Negeri 1 Setu","description":"Satu Setu Maju","publisher":{"@id":"https:\/\/smanegeri1setu.sch.id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/smanegeri1setu.sch.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/smanegeri1setu.sch.id\/#organization","name":"SMA Negeri 1 Setu","url":"https:\/\/smanegeri1setu.sch.id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/smanegeri1setu.sch.id\/#\/schema\/logo\/image\/","url":"https:\/\/smanegeri1setu.sch.id\/wp-content\/uploads\/2022\/10\/smanlo.png","contentUrl":"https:\/\/smanegeri1setu.sch.id\/wp-content\/uploads\/2022\/10\/smanlo.png","width":1080,"height":1080,"caption":"SMA Negeri 1 Setu"},"image":{"@id":"https:\/\/smanegeri1setu.sch.id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=576"}],"version-history":[{"count":14,"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/576\/revisions"}],"predecessor-version":[{"id":1449,"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/576\/revisions\/1449"}],"wp:attachment":[{"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":576,"date":"2023-03-08T00:24:44","date_gmt":"2023-03-08T00:24:44","guid":{"rendered":"https:\/\/smanegeri1setu.sch.id\/?page_id=576"},"modified":"2026-04-10T10:52:55","modified_gmt":"2026-04-10T10:52:55","slug":"perpusstakaan","status":"publish","type":"page","link":"https:\/\/smanegeri1setu.sch.id\/?page_id=576","title":{"rendered":"Perpustakaan"},"content":{"rendered":"\n\n\n\n\n \n \n \n Perpustakaan Sekolah<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide@0.263.0\/dist\/umd\/lucide.min.js\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n html, body { height: 100%; margin: 0; }\n .font-display { font-family: 'Playfair Display', Georgia, serif; }\n .font-body { font-family: 'DM Sans', sans-serif; }\n\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes scaleIn {\n from { opacity: 0; transform: scale(0.9); }\n to { opacity: 1; transform: scale(1); }\n }\n .anim-fade-up { animation: fadeUp 0.7s ease forwards; opacity: 0; }\n .anim-scale-in { animation: scaleIn 0.6s ease forwards; opacity: 0; }\n .delay-1 { animation-delay: 0.1s; }\n .delay-2 { animation-delay: 0.25s; }\n .delay-3 { animation-delay: 0.4s; }\n .delay-4 { animation-delay: 0.55s; }\n .delay-5 { animation-delay: 0.7s; }\n\n .hero-pattern {\n background-image: \n radial-gradient(circle at 20% 50%, rgba(120, 80, 40, 0.08) 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, rgba(180, 140, 80, 0.06) 0%, transparent 40%),\n radial-gradient(circle at 60% 80%, rgba(100, 60, 30, 0.05) 0%, transparent 45%);\n }\n\n .book-spine {\n width: 12px;\n border-radius: 2px;\n display: inline-block;\n }\n\n .card-hover {\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n .card-hover:hover {\n transform: translateY(-6px);\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n }\n\n .nav-link {\n position: relative;\n transition: color 0.3s ease;\n }\n .nav-link::after {\n content: '';\n position: absolute;\n bottom: -4px;\n left: 0;\n width: 0;\n height: 2px;\n transition: width 0.3s ease;\n }\n .nav-link:hover::after {\n width: 100%;\n }\n\n .login-modal-overlay {\n transition: opacity 0.3s ease;\n }\n .login-modal-box {\n transition: transform 0.3s ease, opacity 0.3s ease;\n }\n\n .social-icon {\n transition: transform 0.3s ease, background-color 0.3s ease;\n }\n .social-icon:hover {\n transform: translateY(-3px) scale(1.1);\n }\n\n .grain-overlay {\n position: fixed;\n top: 0; left: 0; width: 100%; height: 100%;\n pointer-events: none;\n opacity: 0.03;\n z-index: 0;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'\/%3E%3C\/svg%3E\");\n }\n\n .mobile-menu {\n transform: translateX(100%);\n transition: transform 0.3s ease;\n }\n .mobile-menu.open {\n transform: translateX(0);\n }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body data-rsssl=1 class=\"h-full font-body\" style=\"background-color: #FAF6F0; color: #2C1810;\">\n <div id=\"app\" class=\"h-full w-full overflow-auto relative\">\n <div class=\"grain-overlay\"><\/div>\n <nav id=\"navbar\" class=\"sticky top-0 z-50 backdrop-blur-md border-b\" style=\"background-color: rgba(250,246,240,0.92); border-color: #E8DDD0;\">\n <div class=\"max-w-6xl mx-auto px-6 py-4 flex items-center justify-between\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-lg flex items-center justify-center\" style=\"background-color: #6B3A2A;\"><i data-lucide=\"book-open\" style=\"width:20px;height:20px;color:#FAF6F0;\"><\/i>\n <\/div>\n <div>\n <div id=\"nav-school\" class=\"text-xs font-medium tracking-wider uppercase\" style=\"color: #9C7B5C;\">\n SMA Negeri 1\n <\/div>\n <div id=\"nav-library\" class=\"font-display font-bold text-lg leading-tight\" style=\"color: #2C1810;\">\n Perpustakaan\n <\/div>\n <\/div>\n <\/div>\n <div class=\"hidden md:flex items-center gap-8\"><a href=\"#beranda\" class=\"nav-link font-medium text-sm\" style=\"color: #6B3A2A;\" onclick=\"scrollToSection(event,'hero')\"> <span class=\"nav-link-after-color\">Beranda<\/span> <\/a> <a href=\"#berita\" class=\"nav-link font-medium text-sm\" style=\"color: #5C4A3A;\" onclick=\"scrollToSection(event,'news')\">Berita<\/a> <a href=\"#sosmed\" class=\"nav-link font-medium text-sm\" style=\"color: #5C4A3A;\" onclick=\"scrollToSection(event,'social')\">Media Sosial<\/a> <a href=\"https:\/\/perpustakaan.smanegeri1setu.sch.id\/index.php?p=member\" target=\"_blank\"><button id=\"loginBtn\" class=\"px-5 py-2.5 rounded-lg font-semibold text-sm transition-all hover:shadow-lg\" style=\"background-color: #6B3A2A; color: #FAF6F0;\"> <span class=\"flex items-center gap-2\"><i data-lucide=\"log-in\" style=\"width:16px;height:16px;\"><\/i> Login Anggota<\/span> <\/button><\/a>\n <\/div><button class=\"md:hidden\" onclick=\"toggleMobile()\" aria-label=\"Menu\"> <i data-lucide=\"menu\" style=\"width:24px;height:24px;color:#2C1810;\"><\/i> <\/button>\n <\/div>\n <\/nav>\n <div id=\"mobileMenu\" class=\"mobile-menu fixed top-0 right-0 z-[60] h-full w-72 shadow-2xl p-6 flex flex-col gap-6\" style=\"background-color: #FAF6F0;\"><button onclick=\"toggleMobile()\" class=\"self-end\" aria-label=\"Tutup menu\"><i data-lucide=\"x\" style=\"width:24px;height:24px;color:#2C1810;\"><\/i><\/button> <a href=\"#beranda\" class=\"font-semibold text-lg\" style=\"color: #6B3A2A;\" onclick=\"scrollToSection(event,'hero');toggleMobile();\">Beranda<\/a> <a href=\"#berita\" class=\"font-semibold text-lg\" style=\"color: #5C4A3A;\" onclick=\"scrollToSection(event,'news');toggleMobile();\">Berita<\/a> <a href=\"#sosmed\" class=\"font-semibold text-lg\" style=\"color: #5C4A3A;\" onclick=\"scrollToSection(event,'social');toggleMobile();\">Media Sosial<\/a> <button onclick=\"openLogin();toggleMobile();\" class=\"px-5 py-3 rounded-lg font-semibold text-sm\" style=\"background-color: #6B3A2A; color: #FAF6F0;\">Login Anggota<\/button>\n <\/div>\n <section id=\"hero\" class=\"hero-pattern relative overflow-hidden\">\n <div class=\"max-w-6xl mx-auto px-6 py-20 md:py-28 flex flex-col md:flex-row items-center gap-12\">\n <div class=\"flex-1 z-10\">\n <div class=\"anim-fade-up delay-1\"><span class=\"inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-6\" style=\"background-color: #E8DDD0; color: #6B3A2A;\">\ud83d\udcda Selamat Datang<\/span>\n <\/div>\n <h1 id=\"heroTitle\" class=\"font-display font-800 text-4xl md:text-5xl lg:text-6xl leading-tight mb-6 anim-fade-up delay-2\" style=\"color: #2C1810;\">Perpustakaan<br><span style=\"color: #6B3A2A;\">SMA Negeri 1<\/span><\/h1>\n <p id=\"heroTagline\" class=\"text-lg md:text-xl leading-relaxed mb-8 anim-fade-up delay-3 max-w-lg\" style=\"color: #7A6352;\">Jendela ilmu yang membuka cakrawala pengetahuan. Temukan ribuan koleksi buku dan sumber belajar di sini.<\/p>\n <div class=\"flex flex-wrap gap-4 anim-fade-up delay-4\"><button onclick=\"scrollToSection(event,'news')\" class=\"px-7 py-3.5 rounded-xl font-semibold transition-all hover:shadow-lg hover:-translate-y-0.5\" style=\"background-color: #6B3A2A; color: #FAF6F0;\"> Jelajahi Sekarang <\/button> <button onclick=\"openLogin()\" class=\"px-7 py-3.5 rounded-xl font-semibold border-2 transition-all hover:-translate-y-0.5\" style=\"border-color: #6B3A2A; color: #6B3A2A; background: transparent;\"> Login Anggota <\/button>\n <\/div>\n <\/div>\n <div class=\"flex-1 flex justify-center anim-scale-in delay-3\">\n <div class=\"relative w-64 h-72 md:w-80 md:h-80\">\n <div class=\"absolute inset-0 rounded-3xl rotate-3 shadow-xl\" style=\"background: linear-gradient(135deg, #6B3A2A 0%, #8B5E3C 100%);\"><\/div>\n <div class=\"absolute inset-0 rounded-3xl -rotate-2 shadow-lg\" style=\"background: linear-gradient(135deg, #D4A574 0%, #C4956A 100%);\"><\/div>\n <div class=\"absolute inset-0 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 text-center\" style=\"background: linear-gradient(145deg, #FAF6F0 0%, #F0E6D8 100%);\">\n <div class=\"flex gap-1.5 mb-6\">\n <div class=\"book-spine h-16\" style=\"background:#6B3A2A;\"><\/div>\n <div class=\"book-spine h-20\" style=\"background:#D4A574;\"><\/div>\n <div class=\"book-spine h-14\" style=\"background:#9C7B5C;\"><\/div>\n <div class=\"book-spine h-18\" style=\"background:#8B5E3C;\"><\/div>\n <div class=\"book-spine h-16\" style=\"background:#6B3A2A;\"><\/div>\n <div class=\"book-spine h-12\" style=\"background:#D4A574;\"><\/div>\n <\/div>\n <div class=\"font-display font-bold text-3xl\" style=\"color: #6B3A2A;\">\n 1.200+\n <\/div>\n <div class=\"text-sm font-medium mt-1\" style=\"color: #9C7B5C;\">\n Koleksi Buku\n <\/div>\n <div class=\"flex gap-4 mt-4 text-center\">\n <div>\n <div class=\"font-bold text-lg\" style=\"color:#2C1810;\">\n 350\n <\/div>\n <div class=\"text-xs\" style=\"color:#9C7B5C;\">\n Anggota\n <\/div>\n <\/div>\n <div style=\"width:1px;background:#E8DDD0;\"><\/div>\n <div>\n <div class=\"font-bold text-lg\" style=\"color:#2C1810;\">\n 50+\n <\/div>\n <div class=\"text-xs\" style=\"color:#9C7B5C;\">\n Kategori\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"relative z-10 -mt-6 px-6\">\n <div class=\"max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4\"><a href=\"https:\/\/perpustakaan.smanegeri1setu.sch.id\/index.php?p=member\" target=\"_blank\"><button onclick=\"openLogin()\" class=\"card-hover rounded-2xl p-5 text-center shadow-md anim-fade-up delay-2\" style=\"background-color: #FFFFFF;\">\n <div class=\"w-12 h-12 rounded-xl mx-auto mb-3 flex items-center justify-center\" style=\"background-color: #F0E6D8;\"><i data-lucide=\"user-check\" style=\"width:22px;height:22px;color:#6B3A2A;\"><\/i>\n <\/div>\n <div class=\"font-semibold text-sm\" style=\"color:#2C1810;\">\n Login Anggota\n <\/div><\/button><\/a> <button onclick=\"scrollToSection(event,'hero')\" class=\"card-hover rounded-2xl p-5 text-center shadow-md anim-fade-up delay-3\" style=\"background-color: #FFFFFF;\">\n <div class=\"w-12 h-12 rounded-xl mx-auto mb-3 flex items-center justify-center\" style=\"background-color: #F0E6D8;\"><i data-lucide=\"home\" style=\"width:22px;height:22px;color:#6B3A2A;\"><\/i>\n <\/div>\n <div class=\"font-semibold text-sm\" style=\"color:#2C1810;\">\n Beranda\n <\/div><\/button> <button onclick=\"scrollToSection(event,'news')\" class=\"card-hover rounded-2xl p-5 text-center shadow-md anim-fade-up delay-4\" style=\"background-color: #FFFFFF;\">\n <div class=\"w-12 h-12 rounded-xl mx-auto mb-3 flex items-center justify-center\" style=\"background-color: #F0E6D8;\"><i data-lucide=\"newspaper\" style=\"width:22px;height:22px;color:#6B3A2A;\"><\/i>\n <\/div>\n <div class=\"font-semibold text-sm\" style=\"color:#2C1810;\">\n Berita\n <\/div><\/button> <button onclick=\"scrollToSection(event,'social')\" class=\"card-hover rounded-2xl p-5 text-center shadow-md anim-fade-up delay-5\" style=\"background-color: #FFFFFF;\">\n <div class=\"w-12 h-12 rounded-xl mx-auto mb-3 flex items-center justify-center\" style=\"background-color: #F0E6D8;\"><i data-lucide=\"share-2\" style=\"width:22px;height:22px;color:#6B3A2A;\"><\/i>\n <\/div>\n <div class=\"font-semibold text-sm\" style=\"color:#2C1810;\">\n Media Sosial\n <\/div><\/button>\n <\/div>\n <\/section>\n <section id=\"news\" class=\"max-w-6xl mx-auto px-6 py-20\">\n <div class=\"text-center mb-12\"><span class=\"inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-4\" style=\"background-color: #E8DDD0; color: #6B3A2A;\">\ud83d\udcf0 Informasi Terbaru<\/span>\n <h2 class=\"font-display font-bold text-3xl md:text-4xl\" style=\"color: #2C1810;\">Berita Perpustakaan<\/h2>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-6\">\n <article class=\"card-hover rounded-2xl overflow-hidden shadow-md\" style=\"background-color: #FFFFFF;\">\n <div class=\"h-44 flex items-center justify-center\" style=\"background: linear-gradient(135deg, #6B3A2A, #8B5E3C);\"><i data-lucide=\"book-marked\" style=\"width:48px;height:48px;color:#FAF6F0;opacity:0.7;\"><\/i>\n <\/div>\n <div class=\"p-6\">\n <div class=\"text-xs font-medium mb-2\" style=\"color: #9C7B5C;\">\n 12 Januari 2025\n <\/div>\n <h3 id=\"news1Title\" class=\"font-display font-bold text-lg mb-2\" style=\"color: #2C1810;\">Koleksi Buku Baru Semester Genap<\/h3>\n <p class=\"text-sm leading-relaxed mb-4\" style=\"color: #7A6352;\">Perpustakaan menambah 150 judul buku baru untuk mendukung kegiatan belajar mengajar semester genap.<\/p><button class=\"text-sm font-semibold flex items-center gap-1\" style=\"color: #6B3A2A;\">Selengkapnya <i data-lucide=\"arrow-right\" style=\"width:14px;height:14px;\"><\/i><\/button>\n <\/div>\n <\/article>\n <article class=\"card-hover rounded-2xl overflow-hidden shadow-md\" style=\"background-color: #FFFFFF;\">\n <div class=\"h-44 flex items-center justify-center\" style=\"background: linear-gradient(135deg, #D4A574, #C4956A);\"><i data-lucide=\"trophy\" style=\"width:48px;height:48px;color:#FAF6F0;opacity:0.7;\"><\/i>\n <\/div>\n <div class=\"p-6\">\n <div class=\"text-xs font-medium mb-2\" style=\"color: #9C7B5C;\">\n 5 Januari 2025\n <\/div>\n <h3 id=\"news2Title\" class=\"font-display font-bold text-lg mb-2\" style=\"color: #2C1810;\">Lomba Resensi Buku Nasional<\/h3>\n <p class=\"text-sm leading-relaxed mb-4\" style=\"color: #7A6352;\">Siswa kami meraih juara 2 dalam lomba resensi buku tingkat nasional. Selamat!<\/p><button class=\"text-sm font-semibold flex items-center gap-1\" style=\"color: #6B3A2A;\">Selengkapnya <i data-lucide=\"arrow-right\" style=\"width:14px;height:14px;\"><\/i><\/button>\n <\/div>\n <\/article>\n <article class=\"card-hover rounded-2xl overflow-hidden shadow-md\" style=\"background-color: #FFFFFF;\">\n <div class=\"h-44 flex items-center justify-center\" style=\"background: linear-gradient(135deg, #9C7B5C, #7A6352);\"><i data-lucide=\"clock\" style=\"width:48px;height:48px;color:#FAF6F0;opacity:0.7;\"><\/i>\n <\/div>\n <div class=\"p-6\">\n <div class=\"text-xs font-medium mb-2\" style=\"color: #9C7B5C;\">\n 1 Januari 2025\n <\/div>\n <h3 id=\"news3Title\" class=\"font-display font-bold text-lg mb-2\" style=\"color: #2C1810;\">Jam Operasional Baru 2025<\/h3>\n <p class=\"text-sm leading-relaxed mb-4\" style=\"color: #7A6352;\">Mulai Januari 2025, perpustakaan buka setiap hari Senin\u2013Jumat pukul 07.00\u201316.00 WIB.<\/p><button class=\"text-sm font-semibold flex items-center gap-1\" style=\"color: #6B3A2A;\">Selengkapnya <i data-lucide=\"arrow-right\" style=\"width:14px;height:14px;\"><\/i><\/button>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n <section id=\"social\" class=\"py-20\" style=\"background-color: #2C1810;\">\n <div class=\"max-w-4xl mx-auto px-6 text-center\"><span class=\"inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-4\" style=\"background-color: rgba(212,165,116,0.2); color: #D4A574;\">\ud83c\udf10 Terhubung<\/span>\n <h2 class=\"font-display font-bold text-3xl md:text-4xl mb-4\" style=\"color: #FAF6F0;\">Media Sosial Perpustakaan<\/h2>\n <p class=\"mb-10 max-w-md mx-auto\" style=\"color: #9C7B5C;\">Ikuti kami untuk informasi terbaru seputar kegiatan dan koleksi perpustakaan.<\/p>\n <div class=\"flex flex-wrap justify-center gap-5\"><a href=\"#\" class=\"social-icon flex items-center gap-3 px-6 py-4 rounded-2xl\" style=\"background-color: rgba(250,246,240,0.08); border: 1px solid rgba(250,246,240,0.1);\" aria-label=\"Instagram\">\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#D4A574\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\" \/><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\" \/><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\" \/>\n <\/svg><span class=\"font-semibold text-sm\" style=\"color: #FAF6F0;\">Instagram<\/span> <\/a> <a href=\"#\" class=\"social-icon flex items-center gap-3 px-6 py-4 rounded-2xl\" style=\"background-color: rgba(250,246,240,0.08); border: 1px solid rgba(250,246,240,0.1);\" aria-label=\"Facebook\">\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#D4A574\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\" \/>\n <\/svg><span class=\"font-semibold text-sm\" style=\"color: #FAF6F0;\">Facebook<\/span> <\/a> <a href=\"#\" class=\"social-icon flex items-center gap-3 px-6 py-4 rounded-2xl\" style=\"background-color: rgba(250,246,240,0.08); border: 1px solid rgba(250,246,240,0.1);\" aria-label=\"YouTube\">\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#D4A574\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19.1c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z\" \/><polygon points=\"9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02\" \/>\n <\/svg><span class=\"font-semibold text-sm\" style=\"color: #FAF6F0;\">YouTube<\/span> <\/a> <a href=\"#\" class=\"social-icon flex items-center gap-3 px-6 py-4 rounded-2xl\" style=\"background-color: rgba(250,246,240,0.08); border: 1px solid rgba(250,246,240,0.1);\" aria-label=\"TikTok\">\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#D4A574\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5\" \/>\n <\/svg><span class=\"font-semibold text-sm\" style=\"color: #FAF6F0;\">TikTok<\/span> <\/a>\n <\/div>\n <\/div>\n <\/section>\n <footer class=\"border-t px-6 py-8\" style=\"background-color: #FAF6F0; border-color: #E8DDD0;\">\n <div class=\"max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-sm\" style=\"color: #9C7B5C;\">\n <div class=\"flex items-center gap-2\"><i data-lucide=\"book-open\" style=\"width:16px;height:16px;color:#6B3A2A;\"><\/i> <span id=\"footerText\" class=\"font-medium\">\u00a9 2025 Perpustakaan SMA Negeri 1<\/span>\n <\/div>\n <div>\n Dibuat dengan \u2764\ufe0f untuk pendidikan\n <\/div>\n <\/div>\n <\/footer>\n <div id=\"loginModal\" class=\"login-modal-overlay fixed inset-0 z-[70] flex items-center justify-center p-6 hidden\" style=\"background-color: rgba(44,24,16,0.6); backdrop-filter: blur(4px);\">\n <div class=\"login-modal-box w-full max-w-sm rounded-2xl shadow-2xl p-8 relative\" style=\"background-color: #FAF6F0;\"><button onclick=\"closeLogin()\" class=\"absolute top-4 right-4\" aria-label=\"Tutup\"><i data-lucide=\"x\" style=\"width:20px;height:20px;color:#9C7B5C;\"><\/i><\/button>\n <div class=\"text-center mb-6\">\n <div class=\"w-14 h-14 rounded-2xl mx-auto mb-4 flex items-center justify-center\" style=\"background-color: #6B3A2A;\"><i data-lucide=\"user\" style=\"width:28px;height:28px;color:#FAF6F0;\"><\/i>\n <\/div>\n <h3 class=\"font-display font-bold text-2xl\" style=\"color: #2C1810;\">Login Anggota<\/h3>\n <p class=\"text-sm mt-1\" style=\"color: #9C7B5C;\">Masuk ke akun perpustakaan Anda<\/p>\n <\/div>\n <form onsubmit=\"handleLogin(event)\">\n <div class=\"mb-4\"><label for=\"memberId\" class=\"block text-sm font-medium mb-1.5\" style=\"color: #5C4A3A;\">Nomor Anggota<\/label> <input type=\"text\" id=\"memberId\" placeholder=\"Masukkan nomor anggota\" class=\"w-full px-4 py-3 rounded-xl border text-sm outline-none focus:ring-2\" style=\"border-color: #E8DDD0; background: #FFFFFF; color: #2C1810; --tw-ring-color: #6B3A2A;\" required>\n <\/div>\n <div class=\"mb-6\"><label for=\"memberName\" class=\"block text-sm font-medium mb-1.5\" style=\"color: #5C4A3A;\">Nama Lengkap<\/label> <input type=\"text\" id=\"memberName\" placeholder=\"Masukkan nama lengkap\" class=\"w-full px-4 py-3 rounded-xl border text-sm outline-none focus:ring-2\" style=\"border-color: #E8DDD0; background: #FFFFFF; color: #2C1810; --tw-ring-color: #6B3A2A;\" required>\n <\/div><button type=\"submit\" class=\"w-full py-3.5 rounded-xl font-semibold text-sm transition-all hover:shadow-lg\" style=\"background-color: #6B3A2A; color: #FAF6F0;\"> Masuk <\/button>\n <div id=\"loginMsg\" class=\"mt-4 text-center text-sm hidden rounded-xl py-3 px-4\"><\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <script>\n \/\/ Config & defaults\n const defaultConfig = {\n background_color: '#FAF6F0',\n surface_color: '#FFFFFF',\n text_color: '#2C1810',\n primary_action: '#6B3A2A',\n secondary_action: '#D4A574',\n font_family: 'Playfair Display',\n font_size: 16,\n school_name: 'SMA Negeri 1',\n library_name: 'Perpustakaan',\n hero_tagline: 'Jendela ilmu yang membuka cakrawala pengetahuan. Temukan ribuan koleksi buku dan sumber belajar di sini.',\n news_1_title: 'Koleksi Buku Baru Semester Genap',\n news_2_title: 'Lomba Resensi Buku Nasional',\n news_3_title: 'Jam Operasional Baru 2025'\n };\n\n function applyConfig(config) {\n const c = { ...defaultConfig, ...config };\n const bg = c.background_color;\n const surface = c.surface_color;\n const text = c.text_color;\n const primary = c.primary_action;\n const secondary = c.secondary_action;\n const font = c.font_family || defaultConfig.font_family;\n const baseSize = c.font_size || defaultConfig.font_size;\n const bodyStack = `'DM Sans', sans-serif`;\n const displayStack = `'${font}', Georgia, serif`;\n\n document.body.style.backgroundColor = bg;\n document.body.style.color = text;\n\n \/\/ Navbar\n const nav = document.getElementById('navbar');\n nav.style.backgroundColor = bg + 'EA';\n nav.style.borderColor = secondary + '40';\n document.getElementById('nav-school').textContent = c.school_name;\n document.getElementById('nav-school').style.color = secondary;\n document.getElementById('nav-library').textContent = c.library_name;\n document.getElementById('nav-library').style.color = text;\n document.getElementById('nav-library').style.fontFamily = displayStack;\n\n \/\/ Login button\n const loginBtn = document.getElementById('loginBtn');\n if (loginBtn) { loginBtn.style.backgroundColor = primary; loginBtn.style.color = bg; }\n\n \/\/ Hero\n document.getElementById('heroTitle').innerHTML = `${c.library_name}<br><span style=\"color:${primary}\">${c.school_name}<\/span>`;\n document.getElementById('heroTitle').style.fontFamily = displayStack;\n document.getElementById('heroTitle').style.fontSize = `${baseSize * 3}px`;\n document.getElementById('heroTagline').textContent = c.hero_tagline;\n document.getElementById('heroTagline').style.fontSize = `${baseSize}px`;\n\n \/\/ News\n document.getElementById('news1Title').textContent = c.news_1_title;\n document.getElementById('news2Title').textContent = c.news_2_title;\n document.getElementById('news3Title').textContent = c.news_3_title;\n document.querySelectorAll('#news h3').forEach(el => el.style.fontFamily = displayStack);\n\n \/\/ Cards surface color\n document.querySelectorAll('.card-hover').forEach(el => { el.style.backgroundColor = surface; });\n\n \/\/ Footer\n document.getElementById('footerText').textContent = `\u00a9 2025 ${c.library_name} ${c.school_name}`;\n\n \/\/ Font sizes\n document.body.style.fontFamily = bodyStack;\n document.body.style.fontSize = `${baseSize}px`;\n\n \/\/ Section headings\n document.querySelectorAll('.font-display').forEach(el => el.style.fontFamily = displayStack);\n\n \/\/ Primary action buttons\n document.querySelectorAll('[style*=\"background-color: #6B3A2A\"]').forEach(el => {\n el.style.backgroundColor = primary;\n el.style.color = bg;\n });\n\n \/\/ Social section\n const socialSection = document.getElementById('social');\n socialSection.style.backgroundColor = text;\n\n \/\/ Login modal styling\n const modal = document.querySelector('.login-modal-box');\n if (modal) modal.style.backgroundColor = bg;\n }\n\n \/\/ SDK init\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => applyConfig(config),\n mapToCapabilities: (config) => {\n const c = { ...defaultConfig, ...config };\n const mkColor = (key) => ({\n get: () => c[key] || defaultConfig[key],\n set: (v) => { c[key] = v; window.elementSdk.setConfig({ [key]: v }); }\n });\n return {\n recolorables: [\n mkColor('background_color'),\n mkColor('surface_color'),\n mkColor('text_color'),\n mkColor('primary_action'),\n mkColor('secondary_action')\n ],\n borderables: [],\n fontEditable: {\n get: () => c.font_family || defaultConfig.font_family,\n set: (v) => { c.font_family = v; window.elementSdk.setConfig({ font_family: v }); }\n },\n fontSizeable: {\n get: () => c.font_size || defaultConfig.font_size,\n set: (v) => { c.font_size = v; window.elementSdk.setConfig({ font_size: v }); }\n }\n };\n },\n mapToEditPanelValues: (config) => {\n const c = { ...defaultConfig, ...config };\n return new Map([\n ['school_name', c.school_name],\n ['library_name', c.library_name],\n ['hero_tagline', c.hero_tagline],\n ['news_1_title', c.news_1_title],\n ['news_2_title', c.news_2_title],\n ['news_3_title', c.news_3_title]\n ]);\n }\n });\n }\n\n \/\/ Functions\n function scrollToSection(e, id) {\n e.preventDefault();\n document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });\n }\n\n function toggleMobile() {\n document.getElementById('mobileMenu').classList.toggle('open');\n }\n\n function openLogin() {\n const m = document.getElementById('loginModal');\n m.classList.remove('hidden');\n document.getElementById('loginMsg').classList.add('hidden');\n }\n\n function closeLogin() {\n document.getElementById('loginModal').classList.add('hidden');\n }\n\n function handleLogin(e) {\n e.preventDefault();\n const msg = document.getElementById('loginMsg');\n msg.classList.remove('hidden');\n msg.style.backgroundColor = '#E8F5E9';\n msg.style.color = '#2E7D32';\n msg.textContent = '\u2713 Login berhasil! Selamat datang di perpustakaan.';\n setTimeout(() => closeLogin(), 2000);\n }\n\n \/\/ Close modal on overlay click\n document.getElementById('loginModal').addEventListener('click', function(e) {\n if (e.target === this) closeLogin();\n });\n\n lucide.createIcons();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9ea11acff381600b',t:'MTc3NTgxNzMyNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n\n\n\n<h2>Kegiatan Literasi<\/h2>\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-576","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Perpustakaan - SMA Negeri 1 Setu<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/smanegeri1setu.sch.id\/?page_id=576\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Perpustakaan - SMA Negeri 1 Setu\" \/>\n<meta property=\"og:url\" content=\"https:\/\/smanegeri1setu.sch.id\/?page_id=576\" \/>\n<meta property=\"og:site_name\" content=\"SMA Negeri 1 Setu\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-10T10:52:55+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/?page_id=576\",\"url\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/?page_id=576\",\"name\":\"Perpustakaan - SMA Negeri 1 Setu\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/#website\"},\"datePublished\":\"2023-03-08T00:24:44+00:00\",\"dateModified\":\"2026-04-10T10:52:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/?page_id=576#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/smanegeri1setu.sch.id\\\/?page_id=576\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/?page_id=576#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Perpustakaan\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/#website\",\"url\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/\",\"name\":\"SMA Negeri 1 Setu\",\"description\":\"Satu Setu Maju\",\"publisher\":{\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/#organization\",\"name\":\"SMA Negeri 1 Setu\",\"url\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/smanlo.png\",\"contentUrl\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/smanlo.png\",\"width\":1080,\"height\":1080,\"caption\":\"SMA Negeri 1 Setu\"},\"image\":{\"@id\":\"https:\\\/\\\/smanegeri1setu.sch.id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Perpustakaan - SMA Negeri 1 Setu","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/smanegeri1setu.sch.id\/?page_id=576","og_locale":"id_ID","og_type":"article","og_title":"Perpustakaan - SMA Negeri 1 Setu","og_url":"https:\/\/smanegeri1setu.sch.id\/?page_id=576","og_site_name":"SMA Negeri 1 Setu","article_modified_time":"2026-04-10T10:52:55+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/smanegeri1setu.sch.id\/?page_id=576","url":"https:\/\/smanegeri1setu.sch.id\/?page_id=576","name":"Perpustakaan - SMA Negeri 1 Setu","isPartOf":{"@id":"https:\/\/smanegeri1setu.sch.id\/#website"},"datePublished":"2023-03-08T00:24:44+00:00","dateModified":"2026-04-10T10:52:55+00:00","breadcrumb":{"@id":"https:\/\/smanegeri1setu.sch.id\/?page_id=576#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/smanegeri1setu.sch.id\/?page_id=576"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/smanegeri1setu.sch.id\/?page_id=576#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/smanegeri1setu.sch.id\/"},{"@type":"ListItem","position":2,"name":"Perpustakaan"}]},{"@type":"WebSite","@id":"https:\/\/smanegeri1setu.sch.id\/#website","url":"https:\/\/smanegeri1setu.sch.id\/","name":"SMA Negeri 1 Setu","description":"Satu Setu Maju","publisher":{"@id":"https:\/\/smanegeri1setu.sch.id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/smanegeri1setu.sch.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/smanegeri1setu.sch.id\/#organization","name":"SMA Negeri 1 Setu","url":"https:\/\/smanegeri1setu.sch.id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/smanegeri1setu.sch.id\/#\/schema\/logo\/image\/","url":"https:\/\/smanegeri1setu.sch.id\/wp-content\/uploads\/2022\/10\/smanlo.png","contentUrl":"https:\/\/smanegeri1setu.sch.id\/wp-content\/uploads\/2022\/10\/smanlo.png","width":1080,"height":1080,"caption":"SMA Negeri 1 Setu"},"image":{"@id":"https:\/\/smanegeri1setu.sch.id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=576"}],"version-history":[{"count":14,"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/576\/revisions"}],"predecessor-version":[{"id":1449,"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/576\/revisions\/1449"}],"wp:attachment":[{"href":"https:\/\/smanegeri1setu.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}