di login.php */ .container-login { width: 330px; max-width: 100%; /* Agar responsif di HP */ padding: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .container-login h1 { text-align: center; margin-top: 0; } .container-login .form-group { margin-bottom: 1rem; } .container-login .form-group label { margin-bottom: 0.5rem; font-weight: 500; } .container-login .form-group input { padding: 0.75rem; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; /* Disesuaikan agar pas */ } /* Tombol di halaman login akan otomatis full-width */ .container-login .btn { width: 100%; padding: 0.75rem; font-size: 1rem; font-weight: 600; border-radius: 6px; } .container-login .btn:hover { background-color: #0b5ed7; } /* ============================================== 5. KOMPONEN (Tombol, Modal, Pesan Error) ============================================== */ /* Tombol Dasar */ .btn { display: inline-block; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; font-weight: bold; text-decoration: none; text-align: center; } .btn-primary { background-color: #0d6efd; color: white; } .btn-primary:hover { background-color: #0b5ed7; } .btn-secondary { background-color: #6c757d; color: white; } .btn-secondary:hover { background-color: #5a6268; } /* Pesan Error/Sukses (untuk login) */ .error-msg { color: #842029; background-color: #f8d7da; border: 1px solid #f5c2c7; padding: 0.75rem; border-radius: 6px; margin-bottom: 1rem; text-align: center; } .success-msg { color: #0f5132; background-color: #d1e7dd; border: 1px solid #badbcc; padding: 0.75rem; border-radius: 6px; margin-bottom: 1rem; text-align: center; } /* Modal (untuk admin.php) */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 400px; border-radius: 8px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative; animation: animateTop 0.4s ease; } .modal-content h2 { margin-top: 0; } .modal-success h2 { color: #155724; } .modal-error h2 { color: #721c24; } /* Tombol close di modal sukses otomatis tersembunyi */ .modal-success .close-btn { display: none; } .close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; /* Pindahkan ke atas agar mudah diklik */ position: absolute; top: 10px; right: 15px; } .close-btn:hover, .close-btn:focus { color: black; text-decoration: none; } /* Animasi Modal */ @keyframes animateTop { from { margin-top: 5%; opacity: 0; } to { margin-top: 15%; opacity: 1; } } /* ============================================== TAMBAHKAN PERUBAHAN INI KE style.css ANDA ============================================== */ /* 1. Ubah .content-item */ .content-item { display: flex; flex-direction: column; width: 100%; background: #f8f9fa; /* Hapus padding dari sini agar gambar bisa nempel ke tepi */ padding: 0; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.2s ease-in-out; /* Hapus height: 220px; agar tingginya otomatis */ /* height: 220px; <-- HAPUS BARIS INI */ overflow: hidden; /* Tambahkan ini agar border-radius rapi */ } /* 2. Tambahkan class baru untuk thumbnail */ .content-thumbnail { width: 100%; height: 160px; /* Atur tinggi gambar thumbnail */ object-fit: cover; /* Agar gambar tidak gepeng */ /* tidak perlu margin-bottom karena padding di wrapper teks */ } /* 3. Tambahkan class baru untuk wrapper teks */ .content-text-wrapper { padding: 20px; /* Pindahkan padding ke sini */ display: flex; flex-direction: column; flex-grow: 1; /* Agar wrapper ini mengisi sisa ruang */ } /* 4. Pastikan

di dalam wrapper teks tetap bisa tumbuh */ .content-text-wrapper p { margin-bottom: 0; flex-grow: 1; /* Pastikan ini ada */ font-size: 0.95em; overflow: hidden; } /* 5. Ubah input file agar terlihat lebih baik (opsional) */ .form-group input[type="file"] { padding: 10px; background-color: #f8f9fa; font-size: 14px; }