/* ============================================================ * BUKU JARINGAN — STYLESHEET * Tema: Buku tua meja kayu gelap + emas (d4af37) + kertas krem * CSS ini dipakai oleh semua halaman (index.php, portal.php, dll). * ============================================================ */ /* ----- RESET & BASE ----- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #241e1b; background-image: radial-gradient(circle at 50% 50%, #3a302a 0%, #15110f 100%), repeating-linear-gradient( 45deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 2px, transparent 2px, transparent 4px ); min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; } /* ----- LINK GLOBAL ----- */ a { text-decoration: none; } /* ===== TAMBAHAN: FAVICON DATA URI (inline SVG buku) ===== */ /* Diletakkan di via PHP untuk menghindari double request. */ /* ===== HALAMAN ERROR 404 ===== */ .error-page { text-align: center; padding: 60px 20px; } .error-page .book-icon { font-size: 80px; margin-bottom: 20px; filter: drop-shadow(0 0 20px rgba(212,175,55,0.5)); } .error-page h1 { font-family: "Georgia", serif; font-size: 48px; color: #d4af37; margin-bottom: 12px; letter-spacing: 4px; } .error-page p { color: rgba(255,255,255,0.6); font-size: 16px; margin-bottom: 24px; } .error-page a { display: inline-block; padding: 12px 28px; background: linear-gradient(135deg, #1b2838, #0a111a); border: 1px dashed rgba(212,175,55,0.7); border-radius: 10px; color: #d4af37; font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 15px; transition: all .2s ease; } .error-page a:hover { background: #d4af37; border-style: solid; color: #0a111a; } /* ============================================================ * 📱 RESPONSIVE — MOBILE BREAKPOINT * Di layar < 700px, buku diskalakan supaya muat di layar. * Bookmark tetap bisa di-tap (min 44px touch target). * ============================================================ */ @media (max-width: 700px) { body { padding: 10px; align-items: flex-start; padding-top: 10px; } /* Buku diskalakan agar muat di layar HP */ .book-scene, .stage { transform: scale(0.55); transform-origin: top center; margin-bottom: -120px; /* Kompensasi skala */ } /* Bookmark di HP: naikkan touch target */ .bookmark { min-height: 44px; font-size: 14px; padding: 0 20px 0 70px; } .bookmark:hover { transform: translateX(15px); } /* Tombol Google di HP */ .google-btn { padding: 12px 20px; font-size: 14px; } /* Logout di HP */ .logout { bottom: 10px; right: 10px; font-size: 10px; letter-spacing: 2px; } } @media (max-width: 400px) { .book-scene, .stage { transform: scale(0.4); } } /* ============================================================ * ♿ AKSESIBILITAS — FOCUS STATE * Outline emas untuk navigasi keyboard. * ============================================================ */ .bookmark:focus-visible, .google-btn:focus-visible, .logout:focus-visible, .index-list a:focus-visible { outline: 3px solid #d4af37; outline-offset: 3px; border-radius: 4px; } /* ============================================================ * 🎬 REDUCED MOTION * Hormati preferensi pengguna yang tidak ingin animasi. * ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .book-scene, .stage { transform: none !important; } } /* ============================================================ * 🖼️ TOOLTIP BOOKMARK (hover preview URL) * ============================================================ */ .bookmark-wrapper { position: absolute; z-index: 25; } .bookmark-wrapper .bm-url { position: absolute; bottom: 110%; left: 0; background: #1b2838; color: #d4af37; font-family: "Courier New", Courier, monospace; font-size: 11px; padding: 6px 12px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; border: 1px solid rgba(212,175,55,0.4); box-shadow: 0 4px 12px rgba(0,0,0,0.5); } .bookmark-wrapper:hover .bm-url, .bookmark-wrapper:focus-within .bm-url { opacity: 1; transform: translateY(0); } /* ============================================================ * 🔍 SEARCH / FILTER (digunakan oleh portal.php) * ============================================================ */ .bm-search { width: 100%; padding: 8px 14px; background: rgba(246,239,218,0.12); border: 1px solid rgba(212,175,55,0.3); border-radius: 8px; color: #3a352c; font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 14px; margin-bottom: 14px; outline: none; transition: border-color .2s ease; } .bm-search:focus { border-color: #d4af37; } .bm-search::placeholder { color: #8a7a5b; } /* Kategori header */ .bm-category-header { font-family: "Georgia", serif; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #b8963c; margin-top: 16px; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(212,175,55,0.2); } .bm-category-header:first-child { margin-top: 0; } /* Loading spinner untuk tombol Google */ .google-btn .spinner { width: 18px; height: 18px; border: 2px solid rgba(212,175,55,0.3); border-top-color: #d4af37; border-radius: 50%; animation: spin .6s linear infinite; display: none; } .google-btn.loading .spinner { display: block; } .google-btn.loading .btn-text { opacity: 0.6; } @keyframes spin { to { transform: rotate(360deg); } }