:root { --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; background: var(--bg-main); color: var(--text-main); overflow: hidden; height: 100vh; height: 100dvh; transition: background 0.5s ease, color 0.5s ease; } body.light-theme { --bg-main: #fdf4ff; --bg-gradient: radial-gradient(circle at 10% 15%, rgba(244, 114, 182, 0.16) 0%, transparent 45%), radial-gradient(circle at 90% 20%, rgba(168, 85, 247, 0.14) 0%, transparent 45%), radial-gradient(circle at 50% 100%, rgba(236, 72, 153, 0.08) 0%, transparent 50%), #fdf5ff; --bg-card: rgba(255, 255, 255, 0.72); --bg-panel: rgba(255, 255, 255, 0.8); --border-color: rgba(217, 70, 239, 0.18); --text-main: #3b0764; --text-muted: #86678f; --input-bg: rgba(250, 245, 255, 0.85); --accent-gradient: linear-gradient(135deg, #f472b6, #d946ef, #a855f7); --accent-solid: #d946ef; --accent-rgb: 217, 70, 239; --orb1-rgb: 244, 114, 182; --orb2-rgb: 168, 85, 247; --shadow: 0 20px 40px -15px rgba(168, 85, 247, 0.15), 0 10px 15px -5px rgba(217, 70, 239, 0.06); --glow: 0 0 20px rgba(217, 70, 239, 0.22), 0 0 35px rgba(244, 114, 182, 0.15); } body.dark-theme { --bg-main: #020617; --bg-gradient: radial-gradient(circle at 8% 12%, rgba(16, 185, 129, 0.16) 0%, transparent 42%), radial-gradient(circle at 92% 18%, rgba(59, 130, 246, 0.16) 0%, transparent 42%), radial-gradient(circle at 50% 100%, rgba(244, 63, 94, 0.10) 0%, transparent 48%), #020617; --bg-card: rgba(17, 24, 39, 0.7); --bg-panel: rgba(15, 23, 42, 0.8); --border-color: rgba(94, 234, 212, 0.12); --text-main: #f0fdfa; --text-muted: #94a3b8; --input-bg: rgba(30, 41, 59, 0.55); --accent-gradient: linear-gradient(135deg, #34d399, #22d3ee, #3b82f6); --accent-solid: #22d3ee; --accent-rgb: 34, 211, 238; --orb1-rgb: 16, 185, 129; --orb2-rgb: 59, 130, 246; --shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6), 0 0 1px 1px rgba(255, 255, 255, 0.05) inset; --glow: 0 0 25px rgba(34, 211, 238, 0.3), 0 0 45px rgba(16, 185, 129, 0.15); } body { background: var(--bg-gradient); background-attachment: fixed; } .screen { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; flex-direction: column; justify-content: center; align-items: center; } .screen.active { display: flex; animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } #login-screen, #google-complete-screen, #admin-login-screen, #verify-screen, #admin-screen, #class-members-screen { background: var(--bg-gradient); padding: 16px; z-index: 999; overflow-y: auto; } .login-card { background: var(--bg-panel); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 30px 24px; border-radius: 28px; border: 1px solid var(--border-color); box-shadow: var(--shadow); width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; text-align: center; position: relative; overflow: hidden; margin: auto; } .login-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent-gradient); } .login-card h2 { color: var(--text-main); font-size: 26px; font-weight: 800; letter-spacing: -0.5px; } .auth-mode-toggle { display: flex; background: var(--input-bg); border-radius: 12px; padding: 4px; margin-bottom: 4px; } .auth-mode-btn { flex: 1; padding: 8px; border: none; background: transparent; font-size: 12px; font-weight: 700; color: var(--text-muted); cursor: pointer; border-radius: 10px; transition: var(--transition); } .auth-mode-btn.active { background: var(--bg-card); color: var(--text-main); box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .login-card input, .login-card select { width: 100%; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 14px; font-size: 14px; outline: none; background: var(--input-bg); color: var(--text-main); transition: var(--transition); font-weight: 500; font-family: inherit; } .login-card input:focus, .login-card select:focus { border-color: var(--accent-solid); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15); } .login-card select option { background: var(--bg-panel); color: var(--text-main); } .register-only-field { display: none; flex-direction: column; gap: 12px; } .register-only-field.show { display: flex; } .btn-login { width: 100%; padding: 13px; border: none; border-radius: 14px; background: var(--accent-gradient); color: white; font-weight: 700; cursor: pointer; font-size: 15px; box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.3); transition: var(--transition); margin-top: 4px; } .btn-login:hover { opacity: 0.95; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(var(--accent-rgb), 0.4); } .login-error { color: #ef4444; font-size: 13px; font-weight: 600; margin-top: 2px; display: none; } /* Judul brand kecil di atas Menu Utama */ .app-brand-title { width: 100%; text-align: center; font-size: 18px; font-weight: 800; color: var(--text-main); letter-spacing: -0.3px; margin-bottom: -4px; } /* Footer aplikasi (dipakai di Halaman Login & Menu Utama) */ .app-footer { width: 100%; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); opacity: 0.7; margin-top: 0; letter-spacing: 0.2px; } .social-media-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 14px; } .social-media-row::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 1px; background: var(--border-color); } .kurnia-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 50%; background: var(--bg-panel); color: var(--text-muted); transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease; text-decoration: none; } .kurnia-icon svg { width: 16px; height: 16px; } .kurnia-icon:hover { transform: translateY(-2px); } .kurnia-icon.ig:hover { color: #00a6b2; border-color: rgba(0, 166, 178, 0.6); } .kurnia-icon.tt:hover { color: #a100d6; border-color: rgba(161, 0, 214, 0.6); } .kurnia-icon.web:hover { color: var(--accent-solid); border-color: rgba(var(--accent-rgb), 0.6); } .kurnia-icon.wa:hover { color: #00a85a; border-color: rgba(0, 168, 90, 0.6); } .kurnia-icon:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; } #menu-screen { background: var(--bg-gradient); overflow-y: auto; overflow-x: hidden; padding: 20px; justify-content: flex-start; align-items: center; } .menu-content-wrapper { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 880px; position: relative; margin: auto; } .menu-top-actions { width: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-height: 32px; } .landing-hero-card { width: 100%; background: var(--bg-panel); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-color); border-radius: 24px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); } .landing-hero-info { display: flex; flex-direction: column; gap: 4px; text-align: left; } .landing-hero-greeting { font-size: 12px; font-weight: 700; color: var(--text-muted); } .landing-hero-username { font-size: 20px; font-weight: 800; color: var(--text-main); } .landing-hero-motivation { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 2px; } .landing-hero-subtitle { font-size: 12px; font-weight: 600; color: var(--text-muted); display: flex; gap: 8px; align-items: center; margin-top: 2px; flex-wrap: wrap; } .badge-role { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-solid); padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 3px; } .badge-role:hover { background: rgba(var(--accent-rgb), 0.25); } .landing-hero-actions { display: flex; gap: 10px; align-items: center; } .menu-section-title { width: 100%; text-align: left; font-size: 14px; font-weight: 800; color: var(--text-main); letter-spacing: 0.5px; margin-top: 4px; } .grid-jilid { display: grid; gap: 16px; width: 100%; margin: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); } /* ========================================================== HALAMAN UTAMA (MENU) - TEMA GLASSMORPHISM FUTURISTIK Semua gaya visual KHUSUS Halaman Utama dikumpulkan di sini (terpisah dari style dasar di atas) supaya mudah ditemukan dan diubah tanpa memengaruhi tampilan halaman lain. ========================================================== */ /* Latar: beberapa "orb" cahaya blur lembut di belakang konten, memberi kesan modern/futuristik tanpa mengganggu keterbacaan. isolation:isolate saja (bukan position) agar tidak merusak position:absolute bawaan dari class .screen. */ #menu-screen { isolation: isolate; } #menu-screen::before, #menu-screen::after { content: ""; position: fixed; width: 460px; height: 460px; border-radius: 50%; filter: blur(90px); z-index: -1; pointer-events: none; opacity: 0.32; } #menu-screen::before { top: -160px; left: -120px; background: radial-gradient(circle, rgba(var(--orb1-rgb), 0.9), transparent 70%); } #menu-screen::after { bottom: -180px; right: -140px; background: radial-gradient(circle, rgba(var(--orb2-rgb), 0.9), transparent 70%); } /* Judul brand: teks gradient tipis, terasa lebih premium */ .app-brand-title { font-size: 20px; font-weight: 800; letter-spacing: 0.4px; background: linear-gradient(135deg, var(--text-main) 40%, var(--accent-solid) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Kartu sapaan utama: glass card + garis tepi gradient tipis */ .landing-hero-card { position: relative; border-radius: 26px; box-shadow: var(--shadow), 0 20px 45px -22px rgba(var(--accent-rgb),0.35); } .landing-hero-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(var(--orb1-rgb),0.55), rgba(255,255,255,0) 45%, rgba(var(--orb2-rgb),0.4)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .landing-hero-username { background: linear-gradient(135deg, var(--text-main) 25%, var(--accent-solid)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Judul seksi (mis. "TARTILI 1-6"): tanda strip aksen + tracking rapi */ .menu-section-title { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 1.6px; color: var(--text-muted); text-transform: uppercase; } .menu-section-title::before { content: ""; width: 18px; height: 3px; border-radius: 3px; background: var(--accent-gradient); flex-shrink: 0; } /* Cover Jilid: lihat penyesuaian border & shadow langsung di deklarasi asli .btn-cover / .btn-cover:hover di bawah, supaya urutan cascade CSS tetap benar (tidak tertimpa aturan lain). */ /* Panel Pintasan khusus Menu Utama: selaraskan dengan gaya glass */ #menu-screen .shortcut-panel { background: var(--bg-panel); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 18px; box-shadow: var(--shadow); } /* Footer copyright follows the social links below the divider. */ .app-footer { position: relative; } #bookmarks-screen { z-index: 10000; overflow: hidden; } .bookmarks-content-wrapper { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: 480px; height: calc(var(--app-h, 100vh) * 0.8); max-height: 600px; justify-content: flex-start; padding: 0; } .bookmarks-header { flex: 0 0 auto; } .bookmarks-list { width: 100%; min-height: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border: 0; border-radius: 0 0 24px 24px; background: transparent; box-shadow: none; scrollbar-width: thin; } #teacher-admin-screen { z-index: 10000; } .teacher-admin-modal { max-width: 480px; } .teacher-admin-content { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 10px; overflow-y: auto; padding: 16px; } .teacher-class-code { padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--input-bg); } .teacher-class-code-label { color: var(--text-muted); font-size: 11px; } .teacher-class-code-value { margin-top: 2px; color: var(--accent-solid); font-size: 16px; font-weight: 800; } .teacher-members-button { width: 100%; flex: 0 0 auto; padding: 10px; border: 0; border-radius: 10px; background: var(--accent-gradient); color: white; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .teacher-pending-label { margin: 2px 0 0; color: var(--text-muted); font-size: 12px; } .teacher-pending-students { display: flex; min-height: 100px; flex-direction: column; gap: 8px; overflow-y: auto; padding: 4px; text-align: left; } .bookmark-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 14px; cursor: pointer; transition: var(--transition); } .bookmark-item:hover { border-color: var(--accent-solid); background: var(--bg-card); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.12); } .bookmark-item-content { display: flex; align-items: center; gap: 12px; width: 100%; } .bookmark-item-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.12); color: var(--accent-solid); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .bookmark-item-info { display: flex; flex-direction: column; gap: 2px; width: 100%; } .bookmark-item-title { font-size: 13px; font-weight: 700; color: var(--text-main); } .bookmark-item-subtitle { font-size: 11px; font-weight: 600; color: var(--text-muted); } .bookmark-item-delete { background: rgba(239, 68, 68, 0.1); border: none; color: #ef4444; cursor: pointer; width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: var(--transition); flex-shrink: 0; } .bookmark-item-delete:hover { background: #ef4444; color: white; transform: scale(1.08); } #toastNotification { position: fixed; bottom: 35px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--bg-panel); backdrop-filter: blur(16px); color: var(--text-main); padding: 12px 24px; border-radius: 40px; font-size: 13px; font-weight: 700; box-shadow: 0 15px 35px rgba(0,0,0,0.2); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 9999; pointer-events: none; border: 1px solid var(--border-color); } /* 1. Pembungkus Utama Kartu */ .landing-hero-card, .header-card { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 16px !important; box-sizing: border-box !important; width: 100% !important; } /* 2. Pembungkus Tombol */ .landing-hero-actions { display: flex !important; align-items: center !important; gap: 4px !important; /* Jarak dirapatkan agar 6 tombol muat */ flex-wrap: wrap !important; justify-content: flex-end !important; max-width: 60% !important; } /* 3. Rapikan tombol di landing-hero-actions, TAPI JANGAN paksa tombol Admin (.btn-admin) & Guru (.btn-teacher-panel) untuk tampil. Visibilitas keduanya wajib dikendalikan oleh setupDashboardAccess() di JavaScript, bukan oleh CSS ini. */ .landing-hero-actions button:not(.btn-admin):not(.btn-teacher-panel):not(.btn-riwayat) { display: inline-flex !important; /* Memastikan tombol lain tidak tersembunyi */ margin: 0 !important; flex-shrink: 0 !important; } .landing-hero-actions .btn-admin, .landing-hero-actions .btn-teacher-panel { margin: 0 !important; flex-shrink: 0 !important; } .landing-hero-actions .btn-teacher-panel { order: 1; } .btn-back-admin { background-color: #374151 !important; color: #ffffff !important; border: 1px solid #4b5563 !important; padding: 10px 24px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; } /* Styling tombol kembali agar ramping dan estetik */ .btn-back-compact { width: auto; min-width: 140px; height: 40px; padding: 8px 20px; align-self: center; background: var(--input-bg); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: var(--text-main); font-weight: 700; font-size: 13px; margin-top: 16px; cursor: pointer; transition: all 0.2s ease; } .btn-back-compact:hover { opacity: 0.85; transform: translateY(-1px); } /* STYLES UNTUK MODAL NOTIFIKASI & PESAN */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); z-index: 10000; display: none; justify-content: center; align-items: center; padding: 16px; } .modal-overlay.active { display: flex; animation: fadeIn 0.3s ease; } .modal-box { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 24px; width: 100%; max-width: 480px; height: calc(var(--app-h, 100vh) * 0.8); max-height: 600px; display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; position: relative; } .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { font-size: 16px; font-weight: 800; color: var(--text-main); } .modal-close-btn { background: transparent; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; } .notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: var(--transition); } .notif-item.unread { background: rgba(var(--accent-rgb), 0.08); border-left: 3px solid var(--accent-solid); } .notif-item:hover { background: var(--input-bg); } .btn-notif-trigger { position: relative; } .notif-badge { position: absolute; top: -3px; right: -3px; background: #ef4444; color: white; font-size: 9px; font-weight: 800; width: 18px; height: 18px; border-radius: 50%; display: none; align-items: center; justify-content: center; border: 2px solid var(--bg-card); } @media (orientation: portrait) { .menu-content-wrapper { max-width: 420px; } /* 7 jilid: 2 kolom (2 + 2 + 2 + 1), sampul ke-7 (Tartili Ghorib) di kolom kiri baris terakhir */ .grid-jilid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 12px; } .grid-jilid .btn-cover:nth-child(7) { grid-column: 1; } .btn-cover { aspect-ratio: 3/4; } .landing-hero-card { flex-direction: row; align-items: center; gap: 12px; padding: 16px; } .landing-hero-actions { width: auto; justify-content: flex-end; } .image-scroll-area { flex: 1 !important; min-height: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 4px !important; overflow: hidden !important; } .image-container { height: 100% !important; width: auto !important; aspect-ratio: 1 / 1.414 !important; max-width: 100% !important; max-height: 100% !important; margin-bottom: 0 !important; } .image-container img { width: 100% !important; height: 100% !important; object-fit: fill !important; } .controls-wrapper { display: flex; flex-direction: column; width: 94% !important; max-width: 420px !important; gap: 4px !important; padding: 8px !important; } #read-screen .page-nav-panel { order: 1 !important; padding: 4px 10px !important; } #read-screen .shortcut-panel { order: 2 !important; } #read-screen .record-panel { order: 3 !important; } #read-screen .page-nav-panel .section-title, #read-screen .shortcut-panel .section-title, #bookmarks-screen .shortcut-panel .section-title { display: none !important; } .page-nav-buttons { gap: 8px !important; } .btn-page-nav-custom { height: 32px !important; } .btn-prev-custom .nav-icon, .btn-next-custom .nav-icon { width: 26px !important; height: 26px !important; } .nav-icon svg { width: 14px !important; height: 14px !important; } .btn-prev-custom { padding-left: 32px !important; } .btn-next-custom { padding-right: 32px !important; } #menu-screen .shortcut-panel, #bookmarks-screen .shortcut-panel { padding: 8px 12px !important; } #menu-screen .shortcut-container, #bookmarks-screen .shortcut-container { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; width: 100% !important; } #menu-screen .shortcut-left, #bookmarks-screen .shortcut-left { display: flex !important; flex-direction: row !important; gap: 8px !important; flex: 1 !important; align-items: center !important; } #menu-screen .shortcut-row, #bookmarks-screen .shortcut-row { display: flex !important; align-items: center !important; gap: 6px !important; flex: 1 !important; margin: 0 !important; flex-direction: row !important; } #menu-screen .shortcut-row span, #bookmarks-screen .shortcut-row span { font-size: 11px !important; width: auto !important; color: var(--text-muted); } #menu-screen .shortcut-panel select, #bookmarks-screen .shortcut-panel select { width: 100% !important; height: 30px !important; font-size: 12px !important; padding: 2px 6px !important; flex: 1 !important; background: var(--input-bg); color: var(--text-main); border-color: var(--border-color); border-radius: 8px; } #menu-screen .shortcut-panel .btn-open-menu, #bookmarks-screen .shortcut-panel .btn-open-target, #bookmarks-screen .shortcut-panel .btn-menu-back { width: 55px !important; flex: 0 0 55px !important; height: 30px !important; font-size: 11px !important; margin-top: 0 !important; border-radius: 8px !important; } } @media (orientation: landscape) { #menu-screen { flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; gap: 12px !important; padding: 12px !important; height: var(--app-h, 100dvh) !important; overflow-y: auto !important; overflow-x: hidden !important; } .menu-content-wrapper { max-width: 880px !important; gap: 12px !important; } .landing-hero-card { padding: 14px 20px; } .grid-jilid { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 1fr; gap: 10px; } .btn-cover { aspect-ratio: 3/4; max-height: 150px !important; } #menu-screen .shortcut-panel { width: 100% !important; max-width: 480px !important; height: auto !important; min-height: unset !important; max-height: none !important; flex-grow: 0 !important; flex-shrink: 0 !important; padding: 8px 12px !important; } #menu-screen .shortcut-container { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; height: auto !important; } #menu-screen .shortcut-left { display: flex !important; flex-direction: row !important; gap: 10px !important; flex: 1 !important; align-items: center !important; } #menu-screen .shortcut-row { display: flex !important; align-items: center !important; gap: 6px !important; flex: 1 !important; margin: 0 !important; flex-direction: row !important; } #menu-screen .shortcut-row span { width: auto !important; font-size: 11px !important; color: var(--text-muted); } #menu-screen .shortcut-panel select { padding: 2px 8px !important; font-size: 12px !important; height: 30px !important; width: 100% !important; flex: 1 !important; background: var(--input-bg); color: var(--text-main); border-color: var(--border-color); border-radius: 8px; } #menu-screen .shortcut-panel .btn-open-menu { width: 85px !important; flex: 0 0 85px !important; height: 30px !important; font-size: 11px !important; align-self: center !important; margin-top: 0 !important; border-radius: 8px !important; } .image-scroll-area { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; overflow-y: auto !important; overflow-x: hidden !important; padding-top: 4px !important; padding-bottom: 4px !important; min-height: 0 !important; } .image-container { max-width: 550px !important; height: auto !important; aspect-ratio: 1 / 1.414 !important; margin: 0 auto !important; transform-origin: top center !important; } .image-container img { width: 100% !important; height: 100% !important; object-fit: fill !important; } .controls-wrapper { position: relative !important; bottom: auto !important; left: auto !important; transform: none !important; width: calc(550px * 1.8) !important; max-width: 98% !important; margin: 4px auto; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: stretch !important; gap: 8px !important; background: var(--bg-panel); backdrop-filter: blur(20px); padding: 8px 12px; border-radius: 18px; box-shadow: var(--shadow); z-index: 100; border: 1px solid var(--border-color); } .shortcut-panel { width: auto !important; flex: 1.8 !important; height: auto !important; display: flex; flex-direction: column; justify-content: center; } .record-panel { width: auto !important; flex: 1.4 !important; height: auto !important; order: 2 !important; display: flex; flex-direction: column; justify-content: center; } .page-nav-panel { width: auto !important; flex: 0.85 !important; height: auto !important; order: 3 !important; background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 12px !important; padding: 6px 8px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: stretch !important; gap: 4px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important; } #read-screen .page-nav-panel .section-title, #read-screen .shortcut-panel .section-title { display: block !important; } #bookmarks-screen .bookmarks-content-wrapper { max-width: 480px !important; justify-content: flex-start !important; gap: 0 !important; } #bookmarks-screen .bookmarks-list { max-height: none !important; } .page-nav-buttons { gap: 6px !important; } .btn-page-nav-custom { height: 28px !important; flex: 1 !important; width: 100% !important; border-radius: 14px !important; } .btn-prev-custom .nav-icon, .btn-next-custom .nav-icon { width: 20px !important; height: 20px !important; } .nav-icon svg { width: 11px !important; height: 11px !important; } .btn-prev-custom { padding-left: 20px !important; } .btn-next-custom { padding-right: 20px !important; } .universal-btn { height: 28px !important; font-size: 11px !important; border-radius: 8px !important; } #read-screen .shortcut-container, #bookmarks-screen .shortcut-container { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; } #read-screen .shortcut-left, #bookmarks-screen .shortcut-left { display: flex !important; flex-direction: row !important; gap: 8px !important; flex: 2.2 !important; align-items: center !important; min-width: 0 !important; } #read-screen .shortcut-row, #bookmarks-screen .shortcut-row { display: flex !important; align-items: center !important; gap: 4px !important; margin: 0 !important; flex-direction: row !important; min-width: 0 !important; } #read-screen .shortcut-row span, #bookmarks-screen .shortcut-row span { width: auto !important; font-size: 11px !important; color: var(--text-muted); flex-shrink: 0; } #bookmarks-screen .shortcut-row.row-tartili { flex: 0 0 75px !important; width: 75px !important; } #bookmarks-screen .shortcut-row.row-halaman { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; } #read-screen .shortcut-row.row-tartili { flex: 0 0 75px !important; width: 75px !important; } #read-screen .shortcut-row.row-halaman { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; } #read-screen .shortcut-panel select, #bookmarks-screen .shortcut-panel select { padding: 2px 4px !important; font-size: 11px !important; height: 28px !important; width: 100% !important; min-width: 0 !important; background: var(--input-bg); color: var(--text-main); border-color: var(--border-color); border-radius: 8px; } #read-screen .btn-open-target, #bookmarks-screen .btn-open-target { width: 55px !important; flex: 0 0 55px !important; height: 28px !important; font-size: 11px !important; align-self: center !important; margin-top: 0 !important; border-radius: 8px !important; } #read-screen .btn-menu-back, #bookmarks-screen .btn-menu-back { width: 55px !important; flex: 0 0 55px !important; height: 28px !important; font-size: 11px !important; align-self: center !important; margin-top: 0 !important; border-radius: 8px !important; } } /* Samakan dropdown hanya pada landscape; portrait memakai susunan awal. */ @media (orientation: landscape) { #read-screen .shortcut-left, #bookmarks-screen .shortcut-left { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; gap: 8px !important; } #read-screen .shortcut-row, #bookmarks-screen .shortcut-row { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) !important; width: 100% !important; min-width: 0 !important; flex: none !important; margin: 0 !important; } #read-screen .shortcut-row span, #bookmarks-screen .shortcut-row span { width: 52px !important; } #read-screen .shortcut-row select, #bookmarks-screen .shortcut-row select { width: 100% !important; min-width: 0 !important; } } /* Rapikan kotak dropdown pada shortcut portrait tanpa mengubah Menu. */ @media (orientation: portrait) { #read-screen .shortcut-left, #bookmarks-screen .shortcut-left { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; flex: 1 1 auto !important; min-width: 0 !important; } #read-screen .shortcut-row, #bookmarks-screen .shortcut-row { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; flex: none !important; margin: 0 !important; } #read-screen .shortcut-row span, #bookmarks-screen .shortcut-row span { width: 52px !important; white-space: nowrap; } #read-screen .shortcut-row select, #bookmarks-screen .shortcut-row select { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; flex: none !important; } } /* Hilangkan batas 75px lama pada baris Tartili agar kedua dropdown memakai track grid yang sama lebar. */ @media (orientation: landscape), (orientation: portrait) { #read-screen .shortcut-row.row-tartili, #read-screen .shortcut-row.row-halaman, #bookmarks-screen .shortcut-row.row-tartili, #bookmarks-screen .shortcut-row.row-halaman { flex: none !important; width: 100% !important; min-width: 0 !important; } } /* Panel pintasan baca portrait: tombol seimbang dan kontrol rapi. */ @media (orientation: portrait) { #read-screen .shortcut-panel { padding: 8px 10px !important; gap: 6px !important; } #read-screen .shortcut-container { display: grid !important; grid-template-columns: calc((100% - 18px) / 4) minmax(0, 1fr) calc((100% - 18px) / 4) !important; gap: 8px !important; align-items: center !important; width: 100% !important; } #read-screen .shortcut-container > .btn-menu-back, #read-screen .shortcut-container > .btn-open-target { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; height: 32px !important; padding: 0 !important; margin: 0 !important; font-size: 11px !important; border-radius: 9px !important; } #read-screen .shortcut-left { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; flex: none !important; } #read-screen .shortcut-row { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; gap: 6px !important; align-items: center !important; width: 100% !important; min-width: 0 !important; } #read-screen .shortcut-row span { width: 64px !important; font-size: 10px !important; white-space: nowrap !important; } #read-screen .shortcut-row select { width: 100% !important; min-width: 0 !important; height: 32px !important; padding: 2px 4px !important; box-sizing: border-box !important; font-size: 11px !important; } } .btn-cover { width: 100%; border: 1px solid var(--border-color); padding: 0; cursor: pointer; border-radius: 20px; transition: var(--transition); transform: scale(0.96); background: transparent; box-shadow: 0 12px 28px -10px rgba(var(--accent-rgb),0.25), 0 2px 6px rgba(0,0,0,0.06); position: relative; overflow: hidden; } .btn-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; transition: var(--transition); } .btn-cover:hover, .btn-cover.keyboard-focused { transform: translateY(-6px) scale(1.02); outline: none; border-color: rgba(var(--accent-rgb),0.55); box-shadow: 0 22px 40px -12px rgba(var(--accent-rgb), 0.45); } .btn-cover:hover img { transform: scale(1.03); } .btn-cover:active { transform: scale(1.0); } .btn-theme-toggle, .btn-bookmark, .btn-riwayat, .btn-logout, .btn-admin, .btn-teacher-panel, .btn-notif-trigger { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.04); transition: var(--transition); flex-shrink: 0; } .btn-theme-toggle:hover, .btn-bookmark:hover, .btn-riwayat:hover, .btn-admin:hover, .btn-teacher-panel:hover, .btn-notif-trigger:hover { transform: scale(1.08); background: var(--input-bg); border-color: var(--accent-solid); } .btn-logout { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); } .btn-logout:hover { transform: scale(1.08); background: #ef4444; border-color: #ef4444; } .btn-logout:hover svg { stroke: white; } .btn-theme-toggle svg, .btn-bookmark svg, .btn-riwayat svg, .btn-logout svg, .btn-admin svg, .btn-teacher-panel svg, .btn-notif-trigger svg { width: 18px; height: 18px; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: var(--transition); } body.is-dark .btn-theme-toggle svg { stroke: var(--accent-solid); } .btn-logout svg { stroke: #ef4444; } .menu-top-actions .btn-theme-toggle, .menu-top-actions .btn-logout { width: 32px; height: 32px; border-radius: 10px; } .menu-top-actions .btn-theme-toggle svg, .menu-top-actions .btn-logout svg { width: 16px; height: 16px; } .btn-admin, .btn-teacher-panel, .btn-riwayat { display: none; } .btn-bookmark.saved { background: var(--bg-card); border-color: var(--border-color); } .btn-bookmark.saved svg { fill: var(--accent-solid); stroke: var(--accent-solid); } body.is-dark .btn-bookmark.saved svg { fill: var(--accent-solid); stroke: var(--accent-solid); } .btn-page-nav-custom { flex: 1; height: 34px; border: none; border-radius: 17px; cursor: pointer; display: flex; align-items: center; position: relative; font-weight: 700; font-size: 12px; transition: var(--transition); box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.25); color: white; } .btn-prev-custom { background: var(--accent-gradient); padding-left: 34px; justify-content: flex-start; } .btn-prev-custom .nav-icon { position: absolute; left: 3px; width: 28px; height: 28px; background: #ffffff; color: var(--accent-solid); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: var(--transition); } .btn-next-custom { background: var(--accent-gradient); padding-right: 34px; justify-content: flex-end; } .btn-next-custom .nav-icon { position: absolute; right: 3px; width: 28px; height: 28px; background: #ffffff; color: var(--accent-solid); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: var(--transition); } .nav-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .btn-page-nav-custom:hover { opacity: 0.95; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(var(--accent-rgb), 0.35); } .btn-page-nav-custom:active { transform: scale(0.97); } #read-screen { position: relative; background: var(--bg-gradient); display: none; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #read-screen.active { display: flex; flex-direction: column; } .image-scroll-area { flex: 1; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 6px 0; position: relative; } .loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border: 4px solid var(--border-color); border-top: 4px solid var(--accent-solid); border-radius: 50%; animation: spin 0.8s linear infinite; z-index: 5; display: none; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes spinPlain { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .image-container { position: relative; display: block; border-radius: 18px; background: var(--bg-card); box-shadow: var(--shadow); width: 92%; max-width: 440px; aspect-ratio: 1 / 1.414; transform-origin: center center; transition: transform 0.05s ease-out; border: 1px solid var(--border-color); } .image-container img { width: 100%; height: 100%; display: block; border-radius: 18px; pointer-events: none; object-fit: fill; } .sound-block { position: absolute; cursor: pointer; background: rgba(var(--accent-rgb), 0.08); border: 1px dashed rgba(var(--accent-rgb), 0.4); border-radius: 8px; transition: var(--transition); } .sound-block:hover { background: rgba(var(--accent-rgb), 0.22); border-color: var(--accent-solid); transform: scale(1.02); } .sound-block:active { background: rgba(var(--accent-rgb), 0.35); } .controls-wrapper { width: calc(440px * 1.8); max-width: 96%; margin: 0 auto 6px auto; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; z-index: 100; background: var(--bg-panel); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 10px; border-radius: 20px; box-shadow: var(--shadow); border: 1px solid var(--border-color); } .section-title { text-align: center; font-size: 10px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; letter-spacing: 1px; text-transform: uppercase; } .page-nav-panel { width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; gap: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.02); } .page-nav-buttons { width: 100%; display: flex; justify-content: space-between; gap: 8px; align-items: center; } .record-panel { width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; gap: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.02); } .record-buttons { display: flex; justify-content: space-between; align-items: stretch; gap: 6px; } .universal-btn { height: 32px; border: none; border-radius: 8px; color: white; cursor: pointer; font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; flex: 1 !important; width: 0 !important; padding: 0 !important; margin: 0 !important; transition: var(--transition); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .universal-btn:hover { opacity: 0.95; transform: translateY(-1px); } .btn-menu-back { background: linear-gradient(135deg, #10b981, #059669); } .btn-open-target { background: var(--accent-gradient); } .btn-record { background: linear-gradient(135deg, #f43f5e, #e11d48); } .btn-stop { background: linear-gradient(135deg, #f59e0b, #d97706); } .btn-ok { background: var(--accent-gradient); } .btn-send { background: linear-gradient(135deg, #10b981, #059669); } .universal-btn:disabled { background: var(--border-color) !important; color: var(--text-muted) !important; cursor: not-allowed; box-shadow: none !important; transform: none !important; opacity: 0.7; } @keyframes pulse-animation { 0% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 50% { opacity: 0.8; transform: scale(0.98); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } .is-recording { animation: pulse-animation 1.5s infinite ease-in-out; background: linear-gradient(135deg, #ef4444, #991b1b) !important; } .shortcut-panel { width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; gap: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.02); } .shortcut-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .shortcut-row span { width: 50px; font-size: 11px; font-weight: 600; color: var(--text-muted); } .shortcut-panel select { flex: 1; width: 0; padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 11px; background: var(--input-bg); color: var(--text-main); font-weight: 600; outline: none; transition: var(--transition); } .shortcut-panel select:focus { border-color: var(--accent-solid); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); } .shortcut-container { display: flex; gap: 8px; align-items: center; justify-content: space-between; } .shortcut-left { flex: 2; display: flex; flex-direction: column; gap: 4px; } /* Dua kontrol pintasan selalu berbagi lebar yang sama di semua layar. */ #menu-screen .shortcut-left { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; flex: 1 1 auto !important; min-width: 0 !important; } #menu-screen .shortcut-row { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) !important; align-items: center !important; gap: 6px !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } #menu-screen .shortcut-row span { width: 52px !important; white-space: nowrap; flex-shrink: 0; } #menu-screen .shortcut-row select { width: 100% !important; min-width: 0 !important; } /* Bar penilaian guru: satu grid stabil di landscape, dua baris di portrait. */ #read-screen .teacher-review-panel { width: 100%; padding: 8px 10px !important; display: flex; align-items: stretch; } .teacher-review-layout { width: 100%; display: grid; grid-template-columns: minmax(130px, 0.9fr) minmax(150px, 1.25fr) minmax(200px, 2.2fr) minmax(118px, 0.8fr); gap: 8px; align-items: stretch; } .teacher-review-score, .teacher-review-audio, .teacher-review-feedback, .teacher-review-actions { min-width: 0; } .teacher-review-score { display: flex; align-items: center; gap: 6px; } .teacher-review-score .section-title { margin: 0; text-align: left; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .teacher-review-score input { width: 56px; flex: 0 0 56px; box-sizing: border-box; padding: 6px 4px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-main); font-size: 13px; font-weight: 700; text-align: center; } .teacher-review-audio { display: flex; align-items: center; } .teacher-review-audio iframe { display: block; width: 100%; height: 44px; border: 0; } .teacher-review-feedback { width: 100%; min-height: 44px; height: 64px; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-main); font-size: 12px; font-family: inherit; resize: vertical; } .teacher-review-actions { display: flex; flex-direction: column; gap: 6px; min-height: 64px; } .teacher-review-actions button { width: 100%; min-height: 29px; flex: 1 1 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.1; cursor: pointer; padding: 4px 6px; margin: 0; } .teacher-review-actions .review-back { background: var(--input-bg); color: var(--text-main); border: 1px solid var(--border-color); } .teacher-review-actions .review-submit { background: var(--accent-gradient); color: white; border: 0; } @media (orientation: portrait) { #read-screen .teacher-review-panel { padding: 8px 10px !important; } .teacher-review-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px; } .teacher-review-feedback, .teacher-review-actions { grid-column: 1 / -1; } .teacher-review-actions { flex-direction: row; min-height: 34px; } } @media (orientation: landscape) and (max-height: 560px) { #read-screen .teacher-review-panel { padding: 6px 8px !important; } .teacher-review-layout { gap: 6px; } .teacher-review-feedback { height: 54px; } .teacher-review-actions { min-height: 54px; gap: 4px; } } html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } /* ===== MODE HEMAT EFEK (otomatis untuk HP dengan RAM kecil) ===== */ html.lite-fx * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.lite-fx body.light-theme { --bg-panel: rgba(255, 255, 255, 0.96); } html.lite-fx body.dark-theme { --bg-panel: rgba(15, 23, 42, 0.96); } /* ===== SPLASH / HALAMAN AWAL ===== */ #splash-screen { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-gradient); background-color: var(--bg-main); transition: opacity 0.5s ease, visibility 0.5s ease; } #splash-screen.hide { opacity: 0; visibility: hidden; pointer-events: none; } .splash-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; } .splash-logo { width: 112px; height: 112px; object-fit: contain; border-radius: 28px; filter: drop-shadow(0 12px 24px rgba(var(--accent-rgb), 0.35)); animation: splashFloat 2.4s ease-in-out infinite; } .splash-title { margin-top: 18px; font-size: 26px; font-weight: 800; letter-spacing: 4px; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .splash-tagline { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); } .splash-spinner { margin-top: 26px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(var(--accent-rgb), 0.18); border-top-color: var(--accent-solid); animation: splashSpin 0.9s linear infinite; } .splash-status { margin-top: 16px; max-width: 280px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); min-height: 16px; } .splash-retry { display: none; margin-top: 12px; padding: 9px 22px; border: none; border-radius: 12px; font-family: inherit; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; background: var(--accent-gradient); } .splash-footer { position: absolute; left: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); } @keyframes splashSpin { to { transform: rotate(360deg); } } @keyframes splashFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ===== PENANDA OFFLINE ===== */ #offlineBadge { display: none; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%); z-index: 9000; padding: 4px 14px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: #fff; background: #f59e0b; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); pointer-events: none; } body.is-offline #offlineBadge { display: block; } /* ===== SIMPAN JILID UNTUK OFFLINE ===== */ #offline-modal, #install-help-modal { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.5); } #offline-modal.open, #install-help-modal.open { display: flex; } .offline-card { width: 100%; max-width: 440px; max-height: calc(var(--app-h, 100vh) * 0.88); overflow-y: auto; border-radius: 20px; padding: 18px; background: var(--bg-panel); border: 1px solid var(--border-color); color: var(--text-main); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } .offline-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .offline-title { font-size: 17px; font-weight: 800; } .offline-desc { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .offline-close { flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; cursor: pointer; font-size: 13px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main); } .offline-list { display: flex; flex-direction: column; gap: 10px; } .offline-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-color); } .offline-row-info { flex: 1; min-width: 0; } .offline-row-title { font-size: 14px; font-weight: 800; } .offline-row-sub { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .offline-bar { margin-top: 7px; height: 6px; border-radius: 99px; overflow: hidden; background: rgba(var(--accent-rgb), 0.15); } .offline-bar-fill { height: 100%; width: 0%; border-radius: 99px; background: var(--accent-gradient); transition: width 0.3s ease; } .offline-row-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex-shrink: 0; } .offline-btn { min-width: 82px; padding: 8px 12px; border: none; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent-gradient); } .offline-btn:disabled { opacity: 0.5; cursor: default; } .offline-btn-del { display: none; padding: 5px 10px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; color: var(--text-muted); background: transparent; border: 1px solid var(--border-color); } .offline-foot { margin-top: 14px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--text-muted); min-height: 14px; } /* ===== TOMBOL SIMPAN OFFLINE (di bar atas menu) ===== */ .btn-offline-manager { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.04); transition: var(--transition); flex-shrink: 0; } .btn-offline-manager:hover { transform: scale(1.08); background: var(--input-bg); border-color: var(--accent-solid); } .btn-offline-manager svg { width: 16px; height: 16px; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: var(--transition); } body.is-dark .btn-offline-manager svg { stroke: var(--accent-solid); } /* ===== PEMUTAR REKAMAN SETORAN ===== */ .setoran-player { width: 100%; } .setoran-play-btn { width: 100%; padding: 11px 14px; border: none; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--accent-gradient); } .setoran-play-btn:disabled { opacity: 0.6; cursor: default; } .setoran-player-msg { font-size: 12px; font-weight: 600; color: var(--text-muted); } /* ===== PERLINDUNGAN KONTEN ===== */ .image-container, .image-container *, .setoran-player { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .image-container img { -webkit-user-drag: none; } /* Tanda air nama pengguna di atas gambar halaman (tidak bisa disentuh) */ .image-container::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: 18px; pointer-events: none; background-image: var(--page-watermark, none); background-repeat: repeat; } /* Cetak / simpan sebagai PDF: sembunyikan halaman */ @media print { .image-container, .setoran-player, audio { display: none !important; } } /* ===== SAMPUL JILID: tampil utuh sesuai rasio aslinya ===== Sebelumnya tinggi sampul dibatasi dan gambar dipotong (object-fit: cover), sehingga angka jilid di pojok kiri atas ikut terpotong. */ .btn-cover { aspect-ratio: auto !important; height: auto !important; max-height: none !important; } .btn-cover img { height: auto !important; object-fit: contain !important; } .grid-jilid { align-items: start; } /* ===== PASANG APLIKASI ===== */ .install-app-link { display: block; margin: 10px auto 0; padding: 6px 10px; background: transparent; border: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--accent-solid); } .install-steps { margin: 4px 0 0; padding-left: 20px; font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--text-main); } .install-steps li { margin-bottom: 6px; } /* ===== POPUP RIWAYAT SETORAN (siswa) ===== */ .landing-hero-actions .btn-riwayat { margin: 0 !important; flex-shrink: 0 !important; } .riwayat-summary { padding: 10px 20px; font-size: 11px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; gap: 8px; } .riwayat-summary b { color: var(--accent-solid); font-weight: 800; } .riwayat-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-color); transition: var(--transition); } .riwayat-item:hover { background: var(--input-bg); } .riwayat-info { flex: 1; min-width: 0; } .riwayat-title { font-size: 13px; font-weight: 800; color: var(--text-main); } .riwayat-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; } .riwayat-note { font-size: 11px; color: var(--text-muted); margin-top: 5px; font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .riwayat-score { min-width: 48px; height: 38px; padding: 0 8px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main); } .riwayat-score.high { color: #10b981; background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); } .riwayat-score.mid { color: #f59e0b; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35); } .riwayat-score.low { color: #ef4444; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); } .riwayat-score.pending { font-size: 10px; font-weight: 700; color: var(--text-muted); background: var(--input-bg); } .riwayat-del { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); } .riwayat-del svg { width: 16px; height: 16px; fill: none; stroke: #ef4444; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: var(--transition); } .riwayat-del:hover { transform: scale(1.08); background: #ef4444; border-color: #ef4444; } .riwayat-del:hover svg { stroke: white; } .riwayat-empty { text-align: center; padding: 32px 20px; color: var(--text-muted); font-size: 12px; line-height: 1.6; } /* ===== JUDUL TARTILIKU: kiri, sejajar tombol download / tema / keluar ===== */ .menu-top-actions .app-brand-title { width: auto; flex: 1 1 auto; min-width: 0; margin: 0 auto 0 0; text-align: left; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== TEMA TAMBAHAN ===== */ /* Blue Night (gelap, biru malam) */ body.bluenight-theme { --bg-main: #070d1f; --bg-gradient: radial-gradient(circle at 10% 12%, rgba(59, 130, 246, 0.22) 0%, transparent 44%), radial-gradient(circle at 90% 16%, rgba(99, 102, 241, 0.20) 0%, transparent 44%), radial-gradient(circle at 50% 100%, rgba(14, 165, 233, 0.12) 0%, transparent 50%), #070d1f; --bg-card: rgba(15, 27, 56, 0.72); --bg-panel: rgba(12, 22, 48, 0.82); --bg-panel-solid: rgba(12, 22, 48, 0.97); --border-color: rgba(96, 165, 250, 0.18); --text-main: #e6efff; --text-muted: #8da2c8; --input-bg: rgba(30, 58, 120, 0.30); --accent-gradient: linear-gradient(135deg, #60a5fa, #3b82f6, #6366f1); --accent-solid: #60a5fa; --accent-rgb: 96, 165, 250; --orb1-rgb: 59, 130, 246; --orb2-rgb: 99, 102, 241; --shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(255, 255, 255, 0.05) inset; --glow: 0 0 25px rgba(96, 165, 250, 0.32), 0 0 45px rgba(99, 102, 241, 0.18); } /* Lavender (terang, ungu lembut) */ body.lavender-theme { --bg-main: #f5f3ff; --bg-gradient: radial-gradient(circle at 10% 14%, rgba(167, 139, 250, 0.24) 0%, transparent 45%), radial-gradient(circle at 90% 18%, rgba(129, 140, 248, 0.20) 0%, transparent 45%), radial-gradient(circle at 50% 100%, rgba(196, 181, 253, 0.26) 0%, transparent 50%), #f5f3ff; --bg-card: rgba(255, 255, 255, 0.75); --bg-panel: rgba(255, 255, 255, 0.82); --bg-panel-solid: rgba(255, 255, 255, 0.97); --border-color: rgba(139, 92, 246, 0.20); --text-main: #2e2766; --text-muted: #7a73a6; --input-bg: rgba(245, 243, 255, 0.9); --accent-gradient: linear-gradient(135deg, #a78bfa, #8b5cf6, #7c3aed); --accent-solid: #8b5cf6; --accent-rgb: 139, 92, 246; --orb1-rgb: 167, 139, 250; --orb2-rgb: 129, 140, 248; --shadow: 0 20px 40px -15px rgba(124, 58, 237, 0.16), 0 10px 15px -5px rgba(139, 92, 246, 0.07); --glow: 0 0 20px rgba(139, 92, 246, 0.25), 0 0 35px rgba(167, 139, 250, 0.16); } /* Ceria Anak (terang, warna-warni hangat) */ body.kids-theme { --bg-main: #fff7e0; --bg-gradient: radial-gradient(circle at 10% 12%, rgba(255, 183, 3, 0.28) 0%, transparent 42%), radial-gradient(circle at 90% 18%, rgba(46, 196, 182, 0.22) 0%, transparent 42%), radial-gradient(circle at 50% 100%, rgba(255, 107, 107, 0.18) 0%, transparent 50%), #fff7e0; --bg-card: rgba(255, 255, 255, 0.82); --bg-panel: rgba(255, 255, 255, 0.88); --bg-panel-solid: rgba(255, 252, 242, 0.97); --border-color: rgba(255, 159, 28, 0.32); --text-main: #2d2a6e; --text-muted: #7b6f94; --input-bg: rgba(255, 244, 214, 0.9); --accent-gradient: linear-gradient(135deg, #ffb703, #ff7a59, #ff5d8f); --accent-solid: #ff7a59; --accent-rgb: 255, 122, 89; --orb1-rgb: 255, 183, 3; --orb2-rgb: 46, 196, 182; --shadow: 0 18px 36px -14px rgba(255, 122, 89, 0.28), 0 8px 14px -6px rgba(255, 183, 3, 0.18); --glow: 0 0 20px rgba(255, 122, 89, 0.28), 0 0 34px rgba(255, 183, 3, 0.20); } /* Futuristik (gelap, neon cyan & magenta + garis grid halus) */ body.future-theme { --bg-main: #04050d; --bg-gradient: radial-gradient(circle at 12% 10%, rgba(0, 229, 255, 0.18) 0%, transparent 42%), radial-gradient(circle at 88% 16%, rgba(255, 43, 214, 0.16) 0%, transparent 42%), radial-gradient(circle at 50% 100%, rgba(124, 77, 255, 0.16) 0%, transparent 50%), linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px) 0 0 / 38px 38px, linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px) 0 0 / 38px 38px, #04050d; --bg-card: rgba(10, 14, 34, 0.72); --bg-panel: rgba(8, 11, 28, 0.84); --bg-panel-solid: rgba(8, 11, 28, 0.97); --border-color: rgba(0, 229, 255, 0.26); --text-main: #e6faff; --text-muted: #7f93b2; --input-bg: rgba(0, 229, 255, 0.07); --accent-gradient: linear-gradient(135deg, #00e5ff, #7c4dff, #ff2bd6); --accent-solid: #00e5ff; --accent-rgb: 0, 229, 255; --orb1-rgb: 0, 229, 255; --orb2-rgb: 255, 43, 214; --shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 1px 1px rgba(0, 229, 255, 0.10) inset; --glow: 0 0 22px rgba(0, 229, 255, 0.45), 0 0 48px rgba(255, 43, 214, 0.25); } body.future-theme .landing-hero-card { box-shadow: var(--shadow), 0 0 26px rgba(var(--accent-rgb), 0.26); } /* Mode hemat efek: panel dibuat lebih pekat pada tema tambahan */ html.lite-fx body.bluenight-theme, html.lite-fx body.lavender-theme, html.lite-fx body.kids-theme, html.lite-fx body.future-theme, html.lite-fx body.emerald-theme, html.lite-fx body.aesthetic-theme { --bg-panel: var(--bg-panel-solid); } /* ===== POPUP PILIH TEMA ===== */ .theme-grid { flex: 1; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; } .theme-card { display: flex; flex-direction: column; gap: 4px; padding: 10px; text-align: left; cursor: pointer; background: var(--bg-card); color: var(--text-main); font-family: inherit; border: 2px solid var(--border-color); border-radius: 16px; transition: var(--transition); } .theme-card:hover { transform: translateY(-2px); border-color: var(--accent-solid); } .theme-card.active { border-color: var(--accent-solid); box-shadow: var(--glow); } .theme-preview { position: relative; display: block; height: 60px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(128, 128, 128, 0.28); margin-bottom: 4px; } .tp-dot { position: absolute; top: 9px; width: 14px; height: 14px; border-radius: 50%; } .tp-dot:nth-child(1) { left: 10px; } .tp-dot:nth-child(2) { left: 30px; } .tp-bar { position: absolute; left: 10px; right: 10px; bottom: 9px; height: 12px; border-radius: 6px; } .tp-check { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: #10b981; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .theme-name { font-size: 13px; font-weight: 800; color: var(--text-main); } .theme-desc { font-size: 10px; font-weight: 600; color: var(--text-muted); } /* ===== TEMA: EMERALD (gelap, hijau zamrud dengan sentuhan emas) ===== */ body.emerald-theme { --bg-main: #03120d; --bg-gradient: radial-gradient(circle at 10% 12%, rgba(16, 185, 129, 0.24) 0%, transparent 44%), radial-gradient(circle at 90% 16%, rgba(212, 175, 55, 0.14) 0%, transparent 42%), radial-gradient(circle at 50% 100%, rgba(20, 184, 166, 0.14) 0%, transparent 50%), #03120d; --bg-card: rgba(8, 30, 23, 0.72); --bg-panel: rgba(6, 26, 20, 0.84); --bg-panel-solid: rgba(6, 26, 20, 0.97); --border-color: rgba(52, 211, 153, 0.22); --text-main: #e6fff5; --text-muted: #8fb8a8; --input-bg: rgba(16, 185, 129, 0.10); --accent-gradient: linear-gradient(135deg, #34d399, #10b981, #0d9488); --accent-solid: #34d399; --accent-rgb: 52, 211, 153; --orb1-rgb: 16, 185, 129; --orb2-rgb: 212, 175, 55; --shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(212, 175, 55, 0.10) inset; --glow: 0 0 24px rgba(52, 211, 153, 0.35), 0 0 44px rgba(212, 175, 55, 0.14); } /* ===== TEMA: AESTETIK (terang, pastel rose, sage & lilac) ===== */ body.aesthetic-theme { --bg-main: #fbf6f1; --bg-gradient: radial-gradient(circle at 8% 10%, rgba(244, 194, 194, 0.42) 0%, transparent 44%), radial-gradient(circle at 92% 14%, rgba(184, 204, 190, 0.38) 0%, transparent 44%), radial-gradient(circle at 50% 100%, rgba(226, 208, 250, 0.34) 0%, transparent 52%), #fbf6f1; --bg-card: rgba(255, 255, 255, 0.72); --bg-panel: rgba(255, 252, 249, 0.82); --bg-panel-solid: rgba(255, 252, 249, 0.97); --border-color: rgba(190, 140, 150, 0.26); --text-main: #4a3a3f; --text-muted: #8b7a7f; --input-bg: rgba(255, 244, 240, 0.92); --accent-gradient: linear-gradient(135deg, #d9809c, #c26a8a, #a76bb5); --accent-solid: #c26a8a; --accent-rgb: 194, 106, 138; --orb1-rgb: 244, 170, 190; --orb2-rgb: 160, 190, 170; --shadow: 0 18px 36px -16px rgba(194, 106, 138, 0.25), 0 8px 14px -6px rgba(160, 190, 170, 0.18); --glow: 0 0 20px rgba(194, 106, 138, 0.25), 0 0 34px rgba(160, 190, 170, 0.20); } /* ===== KARTU SAPAAN (menu): avatar, dekorasi, chip ===== */ .landing-hero-card { overflow: visible; } .hero-deco { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 100% 0%, rgba(var(--orb1-rgb), 0.26) 0%, transparent 52%), repeating-conic-gradient(from 0deg at 100% 0%, rgba(var(--accent-rgb), 0.08) 0deg 6deg, transparent 6deg 12deg); -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, rgba(0, 0, 0, 0.40) 48%, transparent 78%); mask-image: radial-gradient(circle at 100% 0%, #000 0%, rgba(0, 0, 0, 0.40) 48%, transparent 78%); } .landing-hero-info, .landing-hero-actions { position: relative; z-index: 1; } .landing-hero-info { min-width: 0; gap: 10px; } .hero-identity { display: flex; align-items: center; gap: 14px; min-width: 0; } .hero-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hero-avatar { position: relative; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); background: var(--accent-gradient); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16), 0 10px 20px -8px rgba(var(--accent-rgb), 0.65); } .hero-avatar::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed rgba(var(--accent-rgb), 0.5); } .landing-hero-greeting { color: var(--accent-solid); letter-spacing: 0.4px; } .landing-hero-username { font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; } .landing-hero-motivation { font-size: 11.5px; } .landing-hero-subtitle { gap: 6px; margin-top: 0; padding-top: 10px; border-top: 1px dashed var(--border-color); } #userClassText, #userTeacherNameText { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--text-main); background: var(--input-bg); border: 1px solid var(--border-color); } #userClassText::before { content: "🏫"; margin-right: 5px; font-size: 10px; } #userTeacherNameText::before { content: "👨‍🏫"; margin-right: 5px; font-size: 10px; } .landing-hero-subtitle .badge-role { background: var(--accent-gradient); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); padding: 3px 11px; border-radius: 999px; font-size: 10.5px; letter-spacing: 0.3px; box-shadow: 0 6px 12px -6px rgba(var(--accent-rgb), 0.7); } .landing-hero-subtitle .badge-role:hover { background: var(--accent-gradient); filter: brightness(1.12); transform: translateY(-1px); } body.future-theme .landing-hero-card { border-color: rgba(var(--accent-rgb), 0.38); } body.aesthetic-theme .landing-hero-card, body.kids-theme .landing-hero-card { border-radius: 28px; } @media (max-width: 480px) { .hero-avatar { width: 42px; height: 42px; font-size: 18px; } .hero-identity { gap: 12px; } .landing-hero-username { font-size: 18px; } } /* ===== DROPDOWN PINTASAN: tampilan profesional, mengikuti tema ===== */ #menu-screen .shortcut-panel select, #read-screen .shortcut-panel select, #bookmarks-screen .shortcut-panel select, #menu-screen .shortcut-row select, #read-screen .shortcut-row select, #bookmarks-screen .shortcut-row select, .shortcut-panel select, .shortcut-row select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--input-bg); background-image: linear-gradient(45deg, transparent 50%, var(--accent-solid) 50%), linear-gradient(135deg, var(--accent-solid) 50%, transparent 50%); background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-left: 10px !important; padding-right: 24px !important; border: 1px solid var(--border-color); border-radius: 10px !important; color: var(--text-main); font-weight: 700; letter-spacing: 0.2px; cursor: pointer; text-overflow: ellipsis; outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 8px -4px rgba(var(--accent-rgb), 0.38); transition: var(--transition); } #menu-screen .shortcut-panel select:hover, #read-screen .shortcut-panel select:hover, #bookmarks-screen .shortcut-panel select:hover, #menu-screen .shortcut-row select:hover, #read-screen .shortcut-row select:hover, #bookmarks-screen .shortcut-row select:hover, .shortcut-panel select:hover, .shortcut-row select:hover { border-color: var(--accent-solid); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14), 0 3px 8px -4px rgba(var(--accent-rgb), 0.45); } #menu-screen .shortcut-panel select:focus, #read-screen .shortcut-panel select:focus, #bookmarks-screen .shortcut-panel select:focus, #menu-screen .shortcut-row select:focus, #read-screen .shortcut-row select:focus, #bookmarks-screen .shortcut-row select:focus, .shortcut-panel select:focus, .shortcut-row select:focus { border-color: var(--accent-solid); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25); } .shortcut-row span { font-weight: 700; letter-spacing: 0.3px; } /* Daftar pilihan (popup) ikut warna tema */ select option { background: var(--bg-main); color: var(--text-main); font-weight: 600; } body.is-dark select { color-scheme: dark; } body:not(.is-dark) select { color-scheme: light; } /* Pilihan peran di form daftar: gaya yang sama */ .login-card select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--accent-solid) 50%), linear-gradient(135deg, var(--accent-solid) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px; cursor: pointer; } /* ===== TOMBOL PANDUAN & TENTANG (halaman masuk + menu) ===== */ .info-links-row { display: flex; justify-content: center; gap: 10px; margin-top: 12px; } .info-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-main); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: var(--transition); } .info-link-btn svg { width: 14px; height: 14px; fill: none; stroke: var(--accent-solid); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .info-link-btn:hover { border-color: var(--accent-solid); transform: translateY(-1px); box-shadow: 0 8px 16px -10px rgba(var(--accent-rgb), 0.7); } /* ===== POPUP PANDUAN ===== */ .guide-tabs { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border-color); overflow-x: auto; flex-shrink: 0; } .guide-tab { flex: 1 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--transition); } .guide-tab.active { background: var(--accent-gradient); color: #fff; border-color: transparent; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 6px 14px -8px rgba(var(--accent-rgb), 0.8); } .guide-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; } .guide-panel { display: none; } .guide-panel.active { display: block; } .guide-step { display: flex; gap: 12px; padding: 12px; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--border-color); background: var(--bg-card); } .guide-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-gradient); color: #fff; font-size: 13px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .guide-text { min-width: 0; } .guide-text b { color: var(--text-main); } .guide-text > b { display: block; font-size: 13px; margin-bottom: 3px; } .guide-text p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-muted); } .guide-text p b { color: var(--accent-solid); } /* ===== POPUP TENTANG ===== */ .about-body { flex: 1; overflow-y: auto; padding: 18px 16px 20px; } .about-hero { text-align: center; } .about-logo { width: 76px; height: 76px; border-radius: 20px; box-shadow: var(--glow); } .about-name { margin-top: 10px; font-size: 20px; font-weight: 800; letter-spacing: 3px; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .about-tagline { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .about-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; } .about-chips span { padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--text-main); background: var(--input-bg); border: 1px solid var(--border-color); } .about-desc { margin: 16px 0 4px; font-size: 12px; line-height: 1.7; color: var(--text-muted); text-align: center; } .about-section-title { margin: 16px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-solid); text-align: center; } .about-social-list { display: flex; flex-direction: column; gap: 8px; } .about-social { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; text-decoration: none; border: 1px solid var(--border-color); background: var(--bg-card); transition: var(--transition); } .about-social:hover { transform: translateY(-1px); border-color: var(--accent-solid); box-shadow: 0 10px 18px -12px rgba(var(--accent-rgb), 0.7); } .about-social-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--input-bg); border: 1px solid var(--border-color); color: var(--accent-solid); } .about-social-icon svg { width: 20px; height: 20px; } .about-social.ig .about-social-icon { color: #e1306c; } .about-social.tt .about-social-icon { color: var(--text-main); } .about-social.wa .about-social-icon { color: #25d366; } .about-social-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .about-social-text b { font-size: 13px; color: var(--text-main); } .about-social-text small { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .about-social-go { font-size: 20px; color: var(--text-muted); } .about-credit { margin-top: 18px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); opacity: 0.8; } /* ===== INFO VERSI BARU ===== */ .update-banner { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 10050; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 16px; border-radius: 999px; background: var(--bg-panel-solid, var(--bg-main)); color: var(--text-main); border: 1px solid var(--accent-solid); box-shadow: var(--shadow), var(--glow); font-size: 12px; font-weight: 700; max-width: calc(100vw - 24px); } .update-banner button { border: none; cursor: pointer; padding: 6px 14px; border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 800; color: #fff; background: var(--accent-gradient); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } /* ===== ADMIN: lencana jumlah pendaftar + sembunyikan panel setoran ===== */ .btn-admin { position: relative; } .admin-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; line-height: 1; color: #fff; background: #ef4444; box-shadow: 0 0 0 2px var(--bg-main); } body.role-admin #studentRecordPanel { display: none !important; } /* ===== PEMUTAR AUDIO 1 HALAMAN ===== */ .page-player { position: absolute; z-index: 130; right: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; background: var(--bg-panel); border: 1px solid var(--border-color); box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .pp-extra { display: flex; align-items: center; gap: 6px; padding-right: 6px; } .pp-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--border-color); background: var(--input-bg); transition: var(--transition); padding: 0; } .pp-btn svg { width: 18px; height: 18px; fill: var(--accent-solid); stroke: none; } .pp-btn:hover { transform: scale(1.08); border-color: var(--accent-solid); } .pp-main { background: var(--accent-gradient); border-color: transparent; box-shadow: 0 8px 16px -8px rgba(var(--accent-rgb), 0.8); } .pp-main svg { fill: #fff; margin-left: 1px; } .pp-small { width: 32px; height: 32px; } .pp-small svg { width: 14px; height: 14px; } .pp-chip { padding: 6px 10px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 800; color: var(--text-main); background: var(--input-bg); border: 1px solid var(--border-color); transition: var(--transition); } .pp-chip:hover { border-color: var(--accent-solid); } .pp-count { font-size: 10px; font-weight: 700; color: var(--text-muted); min-width: 28px; text-align: center; } .sound-block.playing { background: rgba(var(--accent-rgb), 0.38); border: 1px solid var(--accent-solid); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6); } /* ===== TINGGI LAYAR NYATA (--app-h diatur oleh skrip di ) ===== Mencegah panel bawah (Setoran membaca), popup, dan notifikasi keluar layar di HP. */ body { height: var(--app-h, 100dvh); } .screen, #read-screen { height: var(--app-h, 100%); } .modal-overlay { height: var(--app-h, 100%); } #toastNotification { bottom: auto; top: calc(var(--app-h, 100dvh) - 84px); } .update-banner { bottom: auto; top: calc(var(--app-h, 100dvh) - 72px); transform: translateX(-50%); } /* Tombol audio yang sedang bunyi: tanda jelas */ .sound-block.playing { z-index: 6; } /* ===== NAMA JILID KHUSUS: Tartili Ghorib ===== */ .btn-cover { position: relative; } .cover-tag { position: absolute; top: 6px; right: 6px; z-index: 2; padding: 3px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; background: var(--accent-gradient); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); box-shadow: 0 6px 12px -6px rgba(var(--accent-rgb), 0.8); pointer-events: none; } .jilid-badge { position: absolute; z-index: 130; left: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); padding: 8px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-panel); border: 1px solid var(--border-color); box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); pointer-events: none; } .jilid-badge b { color: var(--accent-solid); font-weight: 800; } /* ===================================================================== FITUR BELAJAR: Tandai blok, Perbaiki blok, Talaqqi, Tebak Bunyi, Laporan (semua warna memakai variabel tema agar selalu serasi) ===================================================================== */ .bj-box { height: calc(var(--app-h, 100vh) - 24px) !important; max-height: 780px !important; max-width: 480px !important; } .bj-body { flex: 1; overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; } .bj-sub { font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.5; } .bj-note { text-align: center; padding: 26px 12px; font-size: 12px; color: var(--text-muted); } .bj-row { display: flex; align-items: center; gap: 8px; } .bj-steps, .bj-tools { display: flex; gap: 6px; flex-wrap: wrap; } .bj-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-main); background: var(--input-bg); border: 1px solid var(--border-color); cursor: default; transition: var(--transition); } button.bj-chip { cursor: pointer; } .bj-chip.on { background: var(--accent-gradient); color: #fff; border-color: transparent; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .bj-chip.warn { color: #f59e0b; border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.10); } .bj-btn { border: 0; border-radius: 999px; min-height: 44px; padding: 0 18px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800; color: #fff; background: var(--accent-gradient); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 8px 16px -10px rgba(var(--accent-rgb), 0.8); transition: var(--transition); } .bj-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); } .bj-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; } .bj-btn.ghost { background: transparent; color: var(--text-main); border: 1px solid var(--border-color); text-shadow: none; box-shadow: none; } .bj-btn.round { width: 56px; height: 56px; min-height: 56px; padding: 0; font-size: 20px; } .bj-btn.wa { background: #25d366; color: #04210f; text-shadow: none; box-shadow: 0 8px 16px -10px rgba(37, 211, 102, 0.8); } .bj-actions { display: flex; gap: 8px; margin-top: auto; } .bj-actions .bj-btn { flex: 1; } .bj-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; text-align: left; width: 100%; box-sizing: border-box; color: var(--text-main); font-family: inherit; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; cursor: pointer; transition: var(--transition); } .bj-card b { font-size: 14px; } .bj-card span { font-size: 12px; color: var(--text-muted); line-height: 1.5; } .bj-card:hover:not(.static) { transform: translateY(-2px); border-color: var(--accent-solid); box-shadow: var(--glow); } .bj-card.static { cursor: default; } /* halaman + blok */ .bj-stage { position: relative; width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-color); background: #fff; line-height: 0; } .bj-stage img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; } .bj-b { position: absolute; padding: 0; cursor: pointer; border-radius: 6px; border: 1px dashed rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.12); transition: var(--transition); } .bj-b.r, .bj-b.bad { background: rgba(239, 68, 68, 0.38); border: 2px solid #ef4444; } .bj-b.y { background: rgba(245, 158, 11, 0.38); border: 2px solid #f59e0b; } .bj-b.ok { background: rgba(16, 185, 129, 0.38); border: 2px solid #10b981; } .bj-b.sel { outline: 3px solid var(--accent-solid); outline-offset: 1px; } .bj-b.pulse { animation: bjPulse 1.3s ease-in-out infinite; } @keyframes bjPulse { 50% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.85); } } /* Talaqqi */ .bj-cropwrap { display: flex; justify-content: center; } .bj-cropbox { position: relative; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid var(--border-color); aspect-ratio: var(--ar); width: min(100%, calc(var(--ar) * var(--app-h, 100vh) * 0.26)); } .bj-cropbox img { position: absolute; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; } .bj-wave { padding: 10px 12px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-color); } .bj-wave-label { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; } .bj-bars { display: flex; align-items: center; gap: 3px; height: 44px; } .bj-bars i { display: block; width: 6px; height: var(--h); border-radius: 3px; background: var(--accent-solid); opacity: 0.5; transform-origin: center; } .bj-bars.me i { background: rgb(var(--orb2-rgb)); } .bj-bars.live i { opacity: 1; animation: bjBar 0.7s ease-in-out infinite alternate; } .bj-bars.live i:nth-child(odd) { animation-delay: 0.25s; } @keyframes bjBar { from { transform: scaleY(0.45); } to { transform: scaleY(1.15); } } .bj-status { font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: center; min-height: 18px; } .bj-feedback { padding: 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-main); background: var(--input-bg); border: 1px solid var(--accent-solid); } /* Laporan orang tua */ .bj-card.report { cursor: default; border-color: var(--accent-solid); box-shadow: var(--glow); } .bj-stat { flex: 1; text-align: center; padding: 10px 6px; border-radius: 14px; background: var(--input-bg); border: 1px solid var(--border-color); } .bj-stat b { display: block; font-size: 26px; font-weight: 800; color: var(--text-main); } .bj-stat span { font-size: 11px; color: var(--text-muted); } .bj-textarea { width: 100%; box-sizing: border-box; resize: vertical; padding: 10px; border-radius: 12px; font-family: inherit; font-size: 13px; color: var(--text-main); background: var(--input-bg); border: 1px solid var(--border-color); outline: none; } .bj-textarea:focus { border-color: var(--accent-solid); } .bj-report-btn svg { stroke: var(--accent-solid) !important; } .bj-report-btn { background: rgba(var(--accent-rgb), 0.12) !important; border-color: rgba(var(--accent-rgb), 0.35) !important; } .bj-report-btn:hover { background: var(--accent-solid) !important; } .bj-report-btn:hover svg { stroke: #fff !important; } /* tombol di tempat lain */ .riwayat-fix { margin-top: 6px; padding: 5px 12px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 800; color: #fff; background: var(--accent-gradient); border: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .review-mark-float { position: absolute; z-index: 130; left: 12px; top: calc(54px + env(safe-area-inset-top, 0px)); align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--bg-panel); border: 1px solid var(--border-color); box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: calc(100% - 100px); } .review-mark-btn { border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 800; white-space: nowrap; color: #fff; background: var(--accent-gradient); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .review-mark-summary { font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===================================================================== BINTANG, PETA PERJALANAN, LENCANA, MASKOT PELITA (semua warna dari variabel tema) ===================================================================== */ .bs-chip { display: none; align-items: center; padding: 3px 10px; border-radius: 999px; cursor: pointer; font-size: 10.5px; font-weight: 800; color: #f59e0b; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.45); transition: var(--transition); } .bs-chip:hover { transform: translateY(-1px); border-color: #f59e0b; } #userStarChip.bs-chip { display: inline-flex; } /* Maskot Pelita: lentera tanpa wajah; ekspresi lewat nyala api, cahaya, dan percikan */ .pelita { width: 100%; height: 100%; overflow: visible; } .pelita .pl-halo { fill: #ffd166; opacity: calc(var(--glow) * 0.30); filter: blur(6px); } .pelita .pl-ring { stroke: var(--accent-solid); stroke-width: 3; stroke-linecap: round; } .pelita .pl-cap, .pelita .pl-base { fill: var(--accent-solid); } .pelita .pl-glass { fill: rgba(var(--accent-rgb), 0.16); stroke: var(--accent-solid); stroke-width: 2; } .pelita .pl-flame { fill: #ff9f1c; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(calc(0.55 + var(--glow) * 0.45)); animation: plFlicker 1.7s ease-in-out infinite alternate; } .pelita .pl-core { fill: #ffe9a8; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(calc(0.55 + var(--glow) * 0.45)); animation: plFlicker 1.3s ease-in-out infinite alternate-reverse; } .pelita .pl-sparks path { fill: #ffd166; opacity: 0; transform-box: fill-box; transform-origin: center; } .pelita.celebrate { animation: plBounce 0.7s ease 2; } .pelita.celebrate .pl-sparks path { animation: plSpark 1.1s ease-in-out infinite alternate; } .pelita.celebrate .pl-sparks path:nth-child(2) { animation-delay: 0.25s; } .pelita.celebrate .pl-sparks path:nth-child(3) { animation-delay: 0.5s; } @keyframes plFlicker { from { transform: scale(calc(0.50 + var(--glow) * 0.42)) rotate(-2deg); } to { transform: scale(calc(0.60 + var(--glow) * 0.45)) rotate(2deg); } } @keyframes plBounce { 40% { transform: translateY(-8px); } } @keyframes plSpark { from { opacity: 0.1; transform: scale(0.6); } to { opacity: 1; transform: scale(1.15); } } /* hasil penilaian */ .bs-result { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 14px; margin-bottom: 8px; border-bottom: 1px dashed var(--border-color); } .bs-result .pelita { width: 62px; height: 72px; } .bs-result-stars { font-size: 28px; letter-spacing: 4px; color: #f59e0b; text-shadow: 0 0 14px rgba(245, 158, 11, 0.5); } .bs-result-msg { font-size: 13px; font-weight: 700; color: var(--text-main); text-align: center; } /* peta */ .bs-top { display: flex; align-items: center; gap: 12px; } .bs-mascot { flex-shrink: 0; width: 54px; height: 64px; } .bs-bubble { position: relative; flex: 1; padding: 10px 12px; border-radius: 14px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--text-main); background: var(--input-bg); border: 1px solid var(--border-color); } .bs-bubble::before { content: ""; position: absolute; left: -6px; top: 18px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--input-bg); border-left: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .bj-body > * { flex-shrink: 0; } /* isi popup tidak boleh menyusut (mencegah tumpang tindih) */ .bs-map { position: relative; width: 100%; } .bs-total { display: flex; align-items: baseline; justify-content: center; gap: 8px; } .bs-total span { font-size: 38px; font-weight: 800; color: #f59e0b; text-shadow: 0 0 18px rgba(245, 158, 11, 0.45); } .bs-total small { font-size: 13px; font-weight: 700; color: var(--text-muted); } .bs-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .bs-seg { fill: none; stroke-width: 5; stroke-linecap: round; } .bs-seg.locked { stroke: var(--border-color); stroke-dasharray: 2 10; } .bs-seg.active { stroke: var(--accent-solid); stroke-dasharray: 10 8; animation: bsDash 1.4s linear infinite; } .bs-seg.done { stroke: var(--accent-solid); } @keyframes bsDash { to { stroke-dashoffset: -36; } } .bs-node { position: absolute; width: 64px; height: 64px; transform: translate(-50%, -50%); padding: 0; cursor: pointer; border-radius: 50%; border: 0; background: var(--bg-card); box-shadow: var(--shadow); transition: var(--transition); } .bs-node:hover, .bs-node.sel { transform: translate(-50%, -50%) scale(1.1); box-shadow: var(--glow); } .bs-node svg { position: absolute; inset: 0; width: 100%; height: 100%; } .bs-node .tr { fill: none; stroke: var(--border-color); stroke-width: 5; } .bs-node .pg { fill: none; stroke: var(--accent-solid); stroke-width: 5; stroke-linecap: round; } .bs-node.done .pg { stroke: #f59e0b; } .bs-node .num { position: relative; font-size: 22px; font-weight: 800; color: var(--text-main); } .bs-node.done .num { color: #f59e0b; } .bs-node.cur { animation: bsPulse 2s ease-in-out infinite; } @keyframes bsPulse { 50% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.18), var(--glow); } } .bs-pin { position: absolute; top: -46px; right: -18px; width: 38px; height: 45px; pointer-events: none; } .bs-label { position: absolute; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; pointer-events: none; } .bs-label b { font-size: 16px; color: var(--text-main); } .bs-label span { font-size: 14px; font-weight: 800; color: #f59e0b; } /* konfeti */ .bs-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 10100; overflow: hidden; } .bs-cf { position: absolute; top: -16px; border-radius: 2px; animation-name: bsFall; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes bsFall { to { transform: translateY(calc(var(--app-h, 100vh) + 24px)) rotate(600deg); } } @media (prefers-reduced-motion: reduce) { .pelita .pl-flame, .pelita .pl-core, .pelita.celebrate, .pelita.celebrate .pl-sparks path, .bs-node.cur, .bs-seg.active { animation: none; } .pelita.celebrate .pl-sparks path { opacity: 1; } } /* ===== TEBAK BUNYI: satu layar tanpa menggulir (HP/laptop, potret/landscape) ===== */ .bj-box.bj-game { max-width: min(1000px, calc(100vw - 16px)) !important; width: 100%; height: calc(var(--app-h, 100vh) - 16px) !important; max-height: none !important; } .bj-game .bj-body { overflow: hidden; padding: 8px 10px 10px; } .bj-game .bj-body > .tb-wrap, .bj-game .bj-body > .tb-result { flex: 1; min-height: 0; flex-shrink: 1; } .tb-wrap { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } .tb-stagewrap { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; } .tb-stagehost { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; } .tb-stagewrap .bj-stage { flex-shrink: 0; } .tb-stagewrap .bj-stage img { height: 100%; } .tb-panel { display: flex; flex-direction: column; gap: 8px; } .tb-chips { display: flex; flex-wrap: wrap; gap: 6px; } .tb-row { display: flex; align-items: center; gap: 10px; } .tb-row .bj-btn.round { flex-shrink: 0; } .tb-fb { flex: 1; display: flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--text-main); } .tb-fb.ok { color: #10b981; } .tb-fb.bad { color: #ef4444; } .tb-next { width: 100%; } .tb-result { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--text-main); } .tb-result b { font-size: 20px; } .tb-result span { font-size: 13px; color: var(--text-muted); } .tb-result-stars { font-size: 56px; letter-spacing: 6px; color: #f59e0b; text-shadow: 0 0 24px rgba(245, 158, 11, 0.5); } @media (orientation: landscape) { .tb-wrap { grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: minmax(0, 1fr); } .tb-panel { justify-content: center; gap: 14px; } .tb-row { flex-direction: column; text-align: center; } .tb-fb { justify-content: center; text-align: center; } .tb-row .bj-btn.round { width: 72px; height: 72px; min-height: 72px; font-size: 26px; } .bj-game .modal-header { padding-top: 8px; padding-bottom: 8px; } } /* ===== TEBAK BUNYI (landscape): halaman besar & bisa digulir, panel tombol tetap di kanan ===== */ .tb-stagewrap.scroll { align-items: flex-start; justify-content: center; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } .tb-stagewrap.scroll .tb-stagehost { max-height: none; align-items: flex-start; } @media (orientation: landscape) { .tb-wrap { grid-template-columns: minmax(0, 1fr) 240px; gap: 12px; } .tb-panel { align-self: stretch; justify-content: center; gap: 12px; padding: 14px 12px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-color); } .tb-chips { flex-direction: column; align-items: stretch; gap: 6px; } .tb-chips .bj-chip { justify-content: center; } } /* ===== PERLINDUNGAN HALAMAN DI MODE LATIHAN (sama seperti halaman baca) ===== */ .bj-stage, .bj-stage *, .bj-cropbox, .bj-cropbox * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* gambar tidak bisa disentuh langsung: tidak ada menu "simpan gambar" / seret gambar */ .bj-stage img, .bj-cropbox img { -webkit-user-drag: none; pointer-events: none; } /* tanda air nama pengguna di atas halaman (tidak bisa disentuh) */ .bj-stage::after, .bj-cropbox::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background-image: var(--page-watermark, none); background-repeat: repeat; } /* halaman tidak ikut tercetak / disimpan sebagai PDF */ @media print { .bj-stage, .bj-cropbox { display: none !important; } } /* ===== MASUK DENGAN GOOGLE ===== */ .auth-divider { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; color: var(--text-muted); font-size: 11px; font-weight: 700; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-color); } .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 16px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; color: #3c4043; background: #fff; border: 1px solid #dadce0; border-radius: 14px; transition: var(--transition); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .btn-google svg { width: 20px; height: 20px; flex-shrink: 0; } .btn-google:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2); } .btn-google:disabled { opacity: 0.6; cursor: default; } .gc-email { align-self: center; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text-main); background: var(--input-bg); border: 1px solid var(--border-color); word-break: break-all; } .gc-cancel { background: transparent; border: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--accent-solid); margin-top: 4px; } /* ===== LUPA KATA SANDI ===== */ .link-forgot { align-self: flex-end; background: transparent; border: none; cursor: pointer; padding: 2px 4px; margin-top: -4px; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--accent-solid); } .link-forgot:hover { text-decoration: underline; } .link-forgot:disabled { opacity: 0.5; cursor: default; } .login-info { display: none; font-size: 12px; font-weight: 600; line-height: 1.5; text-align: center; color: #10b981; }