/* General Body Styles */ body { /* Menggunakan font Poppins. Pastikan Anda menambahkan link Google Fonts di index.php dan admin_panel.php */ /* */ font-family: 'Poppins', sans-serif; margin: 0; padding: 20px; background: linear-gradient(to right, #ece9e6, #ffffff); /* Latar belakang gradien lembut */ color: #333; display: flex; justify-content: center; align-items: flex-start; /* Mengatur item ke atas untuk scrolling yang lebih baik */ min-height: 100vh; box-sizing: border-box; line-height: 1.6; } /* Main Container */ .container { background: #ffffff; padding: 35px; /* Padding sedikit lebih besar */ border-radius: 15px; /* Sudut lebih membulat */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Bayangan lebih dalam dan lembut */ max-width: 750px; /* Lebar maksimum yang lebih luas */ width: 100%; text-align: left; box-sizing: border-box; margin-top: 40px; /* Jarak dari atas */ margin-bottom: 40px; /* Jarak dari bawah */ } /* Header Styles */ header { text-align: center; margin-bottom: 40px; /* Jarak di bawah header */ } .school-logo { width: 120px; /* Ukuran logo sedikit lebih besar */ height: auto; /* Mempertahankan rasio aspek gambar */ object-fit: contain; margin-bottom: 20px; /* --- PENTING: PROPERTI BERIKUT MENGHILANGKAN BORDER LINGKARAN --- */ border-radius: 0; /* Menghilangkan border-radius (membuat kotak/asli) */ border: none; /* Menghilangkan border */ } h1 { color: #2c3e50; /* Warna biru-abu gelap, lebih elegan */ margin-bottom: 8px; font-size: 2.5em; /* Ukuran judul lebih besar */ font-weight: 700; } h2 { color: #34495e; /* Versi sedikit lebih terang dari warna h1 */ margin-top: 0; font-size: 1.8em; /* Ukuran subjudul lebih besar */ font-weight: 600; } /* Form Group Styles */ .form-group { margin-bottom: 30px; /* Jarak antar grup form */ } label { display: block; margin-bottom: 12px; font-weight: 600; color: #4a4a4a; /* Warna label lebih gelap */ font-size: 1.1em; } input[type="text"], input[type="tel"], /* Ditambahkan untuk Nomor HP */ select { width: calc(100% - 28px); /* Mengakomodasi padding */ padding: 14px; /* Padding lebih besar */ border: 1px solid #dcdcdc; /* Border lebih terang */ border-radius: 10px; /* Lebih membulat */ font-size: 1.05em; transition: border-color 0.3s ease, box-shadow 0.3s ease; background-color: #fcfcfc; /* Latar belakang sedikit off-white */ } input[type="text"]:focus, input[type="tel"]:focus, /* Ditambahkan untuk Nomor HP */ select:focus { border-color: #3498db; /* Warna biru lebih terang saat fokus */ box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2); /* Efek glow yang lebih jelas */ outline: none; } /* Checkbox Group Layout */ .checkbox-group { display: flex; flex-wrap: wrap; /* Izinkan wrapping ke baris berikutnya */ gap: 12px; /* Sedikit mengurangi jarak antar checkbox */ justify-content: flex-start; /* Meratakan item ke kiri */ align-items: center; /* Meratakan item secara vertikal di tengah */ } .checkbox-group input[type="checkbox"] { display: none; /* Menyembunyikan checkbox bawaan */ } .checkbox-group input[type="checkbox"] + label { background-color: #eef4f7; /* Warna biru-abu lembut untuk tidak terpilih */ color: #555; padding: 10px 18px; /* Mengurangi padding sedikit agar lebih ringkas */ border-radius: 25px; /* Bentuk seperti pil */ cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid #d4e0e8; /* Border lembut */ font-size: 0.95em; /* Ukuran font sedikit lebih kecil */ display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; /* Mencegah teks melipat di dalam label (penting!) */ min-width: 120px; /* Lebar minimum untuk setiap item */ text-align: center; /* Teks di tengah */ box-sizing: border-box; /* Pastikan padding dan border termasuk dalam width */ } .checkbox-group input[type="checkbox"]:checked + label { background-color: #3498db; /* Biru utama saat terpilih */ color: white; border-color: #3498db; transform: translateY(-3px); /* Efek terangkat lebih jelas */ box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3); } .checkbox-group input[type="checkbox"]:hover + label { background-color: #dbeaf0; /* Hover lebih terang untuk yang tidak terpilih */ } .checkbox-group input[type="checkbox"]:checked:hover + label { background-color: #2980b9; /* Biru lebih gelap saat hover dan terpilih */ } /* Penyesuaian Responsif untuk checkbox-group (sudah ada, hanya memastikan) */ @media (max-width: 768px) { .checkbox-group { flex-direction: column; /* Stack checkboxes vertically on small screens */ gap: 10px; } .checkbox-group input[type="checkbox"] + label { width: 100%; /* Full width for checkboxes */ min-width: unset; /* Hapus min-width agar bisa 100% */ text-align: center; justify-content: center; /* Center text within pill */ padding: 12px 15px; font-size: 1em; /* Mengembalikan ukuran font sedikit lebih besar di mobile */ } } /* Submit Button & General Buttons */ button[type="submit"], .button { background-color: #2ecc71; /* Hijau segar untuk submit */ color: white; padding: 16px 35px; /* Padding lebih besar */ border: none; border-radius: 10px; /* Lebih membulat */ cursor: pointer; font-size: 1.2em; /* Font lebih besar */ font-weight: bold; display: block; width: 100%; margin-top: 40px; /* Jarak di atas tombol */ transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Transisi untuk animasi */ text-decoration: none; text-align: center; box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3); /* Bayangan awal yang halus */ } button[type="submit"]:hover, .button:hover { background-color: #27ae60; /* Hijau lebih gelap saat hover */ transform: translateY(-2px); /* Terangkat lebih jelas */ box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4); /* Bayangan lebih menonjol saat hover */ } button[type="submit"]:active, .button:active { transform: translateY(0); /* Efek tertekan */ box-shadow: 0 2px 5px rgba(46, 204, 113, 0.2); /* Bayangan lebih kecil saat aktif */ } /* Admin Panel Specific Styles */ .admin-container { text-align: center; padding: 40px; } .admin-container h1 { color: #e74c3c; /* Merah mencolok untuk Admin heading */ } .admin-container h2 { color: #7f8c8d; /* Abu-abu muted untuk subjudul */ } .download-button { background-color: #9b59b6; /* Ungu untuk tombol download */ box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3); } .download-button:hover { background-color: #8e44ad; /* Ungu lebih gelap saat hover */ box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4); } .download-button:active { box-shadow: 0 2px 5px rgba(155, 89, 182, 0.2); } .disclaimer { margin-top: 40px; padding: 20px; background-color: #fef9e7; /* Kuning sangat terang */ border: 1px solid #fcecae; border-radius: 10px; color: #a07a00; /* Teks kuning gelap */ font-size: 0.9em; text-align: left; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } /* Success and Error Messages */ .success-message, .error-message { text-align: center; padding: 30px; } .success-message h1 { color: #28a745; } .success-message p { color: #333; font-size: 1.1em; } .error-message h1 { color: #dc3545; } .error-message p { color: #333; font-size: 1.1em; } /* Responsive Design */ @media (max-width: 768px) { body { padding: 15px; align-items: flex-start; } .container { margin-top: 25px; margin-bottom: 25px; padding: 25px; } h1 { font-size: 2em; } h2 { font-size: 1.4em; } .form-group label { font-size: 1em; } input[type="text"], input[type="tel"], select { padding: 12px; font-size: 0.95em; } .checkbox-group { flex-direction: column; gap: 12px; } .checkbox-group input[type="checkbox"] + label { width: 100%; text-align: center; justify-content: center; padding: 14px 15px; } button[type="submit"], .button { padding: 14px 25px; font-size: 1.05em; } .admin-container { padding: 25px; } .disclaimer { padding: 15px; font-size: 0.85em; } } @media (max-width: 480px) { .container { padding: 18px; } h1 { font-size: 1.8em; } h2 { font-size: 1.2em; } .school-logo { width: 100px; height: auto; } button[type="submit"], .button { padding: 12px 20px; font-size: 1em; } }