/* ========================================= STYLE.CSS - GABUNGAN SEMUA FILE CSS ========================================= */ /* ========================================= 1. APP MOBILE (app.mobile.css) ========================================= */ /* Reset kecil + sistem ukuran */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; line-height: 1.5; } /* Tipografi adaptif */ :root{ --fs-xxl: clamp(22px, 2.5vw + 12px, 40px); --fs-xl: clamp(18px, 2.0vw + 10px, 32px); --fs-lg: clamp(16px, 1.6vw + 8px, 24px); --fs-md: clamp(14px, 1.2vw + 6px, 18px); --fs-sm: clamp(13px, 1.0vw + 4px, 16px); --pad-lg: clamp(16px, 3.5vw, 32px); --pad-md: clamp(12px, 2.8vw, 24px); --pad-sm: clamp(8px, 2.0vw, 16px); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --shadow-1: 0 4px 10px rgba(0,0,0,.15); --shadow-2: 0 6px 16px rgba(0,0,0,.25); --nav-h: clamp(56px, 10vh, 80px); } html, body { min-height: 100%; overflow-y: auto !important; } body, .background { background-position: center; background-size: cover; } @media (max-width: 768px){ body, .background { background-attachment: scroll !important; } } :where(a, button, input, select, textarea, [tabindex]):focus-visible{ outline: 3px solid #3b82f6; outline-offset: 3px; border-radius: 10px; } /* ========================================= 2. LOGIN (Kode Terbaru) ========================================= */ /* Background - (Tambahkan class "login-bg" di tag halaman login) */ body.login-bg { margin: 0; padding: 0; background: url('../images/cobaBg.webp') no-repeat center center fixed; background-size: cover; font-family: Arial, sans-serif; overflow: hidden; } /* Container utama khusus login */ .login-bg .container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; width: 100vw; /* Diperbaiki dari 100vh agar lebar penuh sempurna */ } /* Kolom kanan */ .right { flex: 1; background-color: rgba(0, 64, 0, 0.6); border-radius: 20px; padding: 10px 30px 30px 30px; max-width: 400px; color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.3); margin-top: 50px; width: 100%; height: 600px; } /* Logo */ .logo { display: flex; justify-content: center; margin-bottom: 20px; } .logo img { max-height: 50px; } /* Form */ .form-box { display: flex; flex-direction: column; } .input { padding: 12px; margin-bottom: 15px; border-radius: 8px; border: none; font-size: 16px; background-color: rgba(255,255,255,0.1); color: #fff; transition: all 0.2s ease-in-out; } .input:focus, .input:hover { transform: scale(1.05); /* membesar 5% */ background-color: rgba(255,255,255,0.2); /* opsional, biar lebih jelas */ border: 1px solid #3b82f6; /* garis fokus biru */ } .input::placeholder { color: #ddd; } .options { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 20px; } .options a, .options a:visited { color: #fff; } .checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 14px; height: 14px; border: 2px solid #fff; /* border putih */ border-radius: 2px; background-color: #fff; /* kotak putih solid */ cursor: pointer; position: relative; } /* Saat dicentang */ .checkbox input[type="checkbox"]:checked { background-color: #fff; /* isi tetap putih */ } /* Centang custom */ .checkbox input[type="checkbox"]:checked::after { content: "✓"; color: #004d26; /* centang hijau gelap biar kontras */ font-size: 14px; font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Tombol */ .btn { background-color: #004d26; color: #fff; border: none; padding: 14px; font-size: 16px; border-radius: 8px; cursor: pointer; font-weight: bold; margin-bottom: 15px; transition: all 0.2s ease-in-out; } .btn.secondary { display: block; text-align: center; text-decoration: none; padding: 12px; } .btn:focus-visible, .btn:hover, .btn.secondary:hover, .btn.secondary:focus-visible { transform: scale(1.05); background-color: #00994d; /* tetap hijau gelap */ color: #fff; /* teks putih */ outline: 3px solid #3b82f6; /* ring fokus biru */ outline-offset: 3px; } /* Register & Guest */ .register, .guest { text-align: center; margin-top: 10px; } /* Reset / Judul khusus di login */ .login-bg h2 { text-align: center; padding-top: 5px; margin-bottom: 20px; font-size: 24px; font-weight: bold; color: #ffffff; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } .judul { background-color: rgba(0, 139, 0, 0.786); width: 190px; height: 40px; border-radius: 10px; justify-items: center; margin: 2px auto 2px auto; box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); margin-bottom: 20px; } .alert { padding: 10px; border-radius: 8px; margin-bottom: 15px; font-size: 14px; text-align: left; } .alert-danger { background: #f8d7da; color: #721c24; } .alert-success { background: #d4edda; color: #155724; } /* Ring fokus jelas gabungan */ .input:focus-visible, .right a:focus-visible, select:focus-visible, input[type="checkbox"]:focus-visible, #resetScope .form-control:focus-visible, #resetScope button:focus-visible { outline: 3px solid #3b82f6; outline-offset: 3px; border-radius: 8px; /* checkbox & input */ } /* Opsional: biar link ‘Lupa Password’ kebaca fokusnya di background gelap */ .right a:focus-visible { border-radius: 6px; } /* State aktif mengikuti roving tabindex gabungan */ .is-active, #resetScope .is-active { box-shadow: 0 0 0 3px rgba(59,130,246,.33); } /* ========================================= 3. AUDIO ADMISSION (audio-admission.css) ========================================= */ .audio-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90vh; background: linear-gradient(to bottom right, rgba(255,255,255,0.1), rgba(0,0,0,0.1)); text-align: center; padding: 2rem; box-sizing: border-box; } .audio-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; border-radius: 1rem; padding: 1rem 2rem; font-size: 1.2rem; color: #fff; cursor: pointer; border: none; outline: none; transition: transform 0.2s ease, box-shadow 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.25); } .audio-btn:hover { transform: scale(1.06); box-shadow: 0 6px 14px rgba(0,0,0,0.35); } .audio-btn.primary { background-color: #138a36; } .audio-btn.primary:hover { background-color: #17a63f; } .audio-btn.danger { background-color: #7f1d1d; border: 2px solid #ef4444; } .audio-btn.danger:hover { background-color: #b91c1c; } .audio-btn i { margin-right: 0.6rem; font-size: 1.3rem; } .audio-container p { font-size: 1.1rem; color: #222; margin-top: 1rem; font-weight: 500; text-shadow: 0 1px 2px rgba(255,255,255,0.8); } .audio-attention, .audio-nyala, .audio-mati { margin: 1rem 0; } .audio-attention .audio-btn { background: #007bff; font-size: 1.4rem; padding: 1.2rem 2.4rem; border: 2px solid #fff; box-shadow: 0 0 10px rgba(0,123,255,0.6); } .audio-attention .audio-btn:hover { background: #0d6efd; transform: scale(1.08); box-shadow: 0 0 20px rgba(0,123,255,0.8); } @media (max-width: 768px) { .audio-btn { width: 80%; font-size: 1rem; } .audio-attention .audio-btn { width: 85%; font-size: 1.2rem; } .audio-container { min-height: 80vh; padding: 1rem; } } /* ========================================= 4. MAIN MENU & MENU GAME MENULIS ========================================= */ .main-menu-body { height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background-image: url('../images/bgMainMenu.webp'); background-size: cover; background-position: center; font-family: Arial, sans-serif; color: rgb(255, 255, 255); } .menu-container { display: flex; flex-direction: column; gap: 30px; text-align: center; margin-top: 70px; transform: all 0.3s ease; } .menu-container a { color: rgb(255, 255, 255); text-decoration: none; background: linear-gradient(180deg, #efae19, #7e5a07); padding: 30px 100px; font-size: 40px; font-weight: bold; border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: all 0.3s ease; } .menu-container a:hover, .menu-container a:focus { background-color: #f0f0f0; transform: scale(1.05); border: 1px solid #3b82f6; } .menu-container a.small-back { font-size: 26px; padding: 10px 16px; border-radius: 6px; width: auto; min-width: 0; display: inline-block; line-height: 1; box-shadow: none; background-color: rgba(255,255,255,0.95); color: #333; background: none; } @media (max-width: 600px) { .menu-container a { font-size: 18px; padding: 15px 30px; } } /* ========================================= 5. MENU LEVEL GAME MENULIS ========================================= */ .level-container-box { background: rgba(0, 50, 0, 0.6); padding: 2rem 1rem 6rem; border-radius: 20px; box-sizing: border-box; margin-top: 50px; width: 80%; max-width: 1200px; height: 70vh; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-gap: 20px; position: relative; } @media (min-width: 1024px) { .level-container-box { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 768px) { .level-container-box { grid-template-columns: repeat(3, 1fr); } } .soal-box { aspect-ratio: 1/1; position: relative; background: linear-gradient(180deg, #ffffff, #f9f6a3) !important; border-radius: 15px; padding: 15px; text-align: center; width: 100%; height: auto; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.2s; text-decoration: none; color: #0a3c1a; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .soal-box:hover { transform: scale(1.07); background: linear-gradient(180deg, #e0ffe0, #b3ffb3); } .soal-box.locked { pointer-events: none; opacity: 0.6; filter: grayscale(100%); position: relative; } .soal-box.locked .level-lock { position: absolute; right: 6px; top: 6px; font-size: 1.2em; opacity: 0.9; } .soal-box.done .soal-number { background: #28a745; color: #fff; } .soal-number { font-size: 2.5em; font-weight: bold; margin-bottom: 5px; } .star { font-size: 20px; line-height: 1; transition: color 0.2s ease, text-shadow 0.2s ease; } .star.active { color: orange; text-shadow: 0 0 10px rgba(255,165,0,0.8); opacity: 1; } .star.inactive { color: lightgray; opacity: 0.6; } .star-big { font-size: 4.2em; } .star-small { font-size: 3.4em; } .nav-bottom-bar { position: relative; z-index: 5; margin: 0; margin-top: 1rem; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: center; } .nav-bottom-bar .nav-wrap { width: min(90%, 900px); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .nav-bottom-btn { padding: 12px 28px; background: linear-gradient(180deg, #f4d35e, #dfba5c) !important; border: none; border-radius: 12px; cursor: pointer; font-size: 1.2em; color: #2e2e2e; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.25); transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease; white-space: nowrap; } .nav-bottom-btn:hover { background: linear-gradient(180deg, #ffd86f, #e0b652); transform: scale(1.05); color: #000; } @media (max-width: 480px){ .nav-bottom-btn { padding: 10px 18px; font-size: 1rem; } } .chapter-badge { position: absolute; top: 8px; left: 8px; background: #0d6efd; color: #fff; font-weight: 600; font-size: 0.95rem; line-height: 1; padding: .35rem .6rem; border-radius: .5rem; box-shadow: 0 2px 6px rgba(0,0,0,.15); pointer-events: none; z-index: 3; } /* ========================================= 6. VIDEO / SEBELUM PENGERJAAN ========================================= */ .video-background { background: url('../images/bgMainMenu.webp') no-repeat center center fixed; background-size: cover; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .video-box-container { margin-top: 90px; margin-bottom: 10px; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 6px 16px rgba(0,0,0,.3); max-width: 900px; width: 90%; } .video-wrapper-169 { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 900px; width: 100%; border-radius: 15px; } .video-wrapper-169 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* ========================================= 7. GAME PLAY (soalchapter1.css) ========================================= */ .game-no-scroll { overflow: hidden !important; } .game-logo-inside { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 300px; height: 60px; background: url('../images/logo.webp') no-repeat center; background-size: 300px 62px; border-radius: 15px; pointer-events: none; z-index: 2; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .game-layout-wrap { position: relative; width: 100vw; height: 100vh; background: transparent; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .game-page-wrap { flex: 1; display: grid; place-items: center; overflow: hidden; } #game-root-box { position: relative; width: 100%; height: calc(100vh - var(--nav-h)); border-radius: 20px; overflow: hidden; background: #000; } #unityFrame, #unityFrame > * { width: 100% !important; height: 100% !important; display: block; } #unityFrame canvas { width: 100% !important; height: 100% !important; object-fit: cover; background: #000; } #unity-loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); color: #ffe97a; font-size: 1.4rem; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,0.6); z-index: 2; opacity: 1; transition: opacity 0.5s ease; } .game-nav-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: var(--nav-h); display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.3); z-index: 5; } /* ========================================= 8. ADMIN DASHBOARD & EDIT USER ========================================= */ .admin-dashboard-layout { height: auto !important; min-height: 100vh; } .admin-main-content { background-color: #f8f9fa; min-height: 100vh; padding: 20px; border-radius: 8px; padding-bottom: 100px; } .admin-sidebar { min-height: 100vh; transition: all 0.3s ease-in-out; } .admin-sidebar .nav-link { padding: 12px 15px; transition: 0.3s; border-radius: 6px; } .admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { background-color: #495057; font-weight: bold; color:#fff;} .admin-stat-card { border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: transform 0.2s ease-in-out; } .admin-stat-card:hover { transform: scale(1.03); } .admin-table { border-radius: 10px; overflow: hidden; } .admin-table-scroll thead th { position: sticky; top: 0; z-index: 2; } .admin-scroll-top { opacity: 0; pointer-events: none; position: fixed; bottom: 20px; right: 25px; z-index: 2000; font-size: 20px; border: none; outline: none; background-color: #dc3545; color: white; cursor: pointer; padding: 12px 16px; border-radius: 50%; transition: opacity 0.3s ease-in-out; } .admin-scroll-top.show { opacity: 1; pointer-events: auto; } #admin-users-edit .edit-card { border: 1px solid rgba(0,0,0,.08); border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.06); } #admin-users-edit .form-control:focus, #admin-users-edit .form-select:focus { border-color: #0d6efd; box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); } @media (prefers-color-scheme: dark) { #admin-users-edit .edit-card { background: #15171a; border-color: rgba(255,255,255,.08); box-shadow: 0 8px 22px rgba(0,0,0,.4); } #admin-users-edit .form-control { background: #0f1012; color: #e5e7eb; border-color: rgba(255,255,255,.12); } }